@charset "UTF-8";
/**
 * Developercode — Homepage design system
 * Bouwen. Automatiseren. Groeien.
 *
 * Visuele taal afgeleid van de Developercode merkfilms:
 * bijna-wit canvas, diepe inkt-typografie, één helder blauw accent,
 * haarlijn-kaders, mono labels en veel witruimte.
 *
 * Alle secties delen deze tokens. Widgets renderen enkel semantische HTML.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.dcx,
.dcx-cf7 {
    /* Canvas */
    --dc-bg: #fbfcfe;
    --dc-bg-tint: #f4f7fc;
    --dc-bg-deep: #0e1622;
    --dc-surface: #ffffff;

    /* Inkt */
    --dc-ink: #12151c;
    --dc-ink-soft: #333941;
    --dc-muted: #5b6675;
    --dc-faint: #8d97a5;

    /* Lijnen */
    --dc-line: #e6eaf1;
    --dc-line-soft: #eff2f7;
    --dc-line-dark: rgba(255, 255, 255, .1);

    /* Merk */
    --dc-blue: #147be1;
    --dc-blue-rgb: 20, 123, 225;
    --dc-blue-deep: #0f5cb8;
    --dc-blue-soft: #eaf3fd;

    /* Signaal */
    --dc-green: #10b981;
    --dc-green-rgb: 16, 185, 129;
    --dc-green-soft: #e7f8f1;
    /* Tweede accent uit de inktschaal. De huisstijl kent naast blauw geen
       eigen kleur, dus wat zich van blauw moet onderscheiden krijgt grafiet
       in plaats van een extra tint. */
    --dc-graphite: #2b3646;
    --dc-graphite-rgb: 43, 54, 70;
    --dc-graphite-soft: #eef1f6;
    --dc-amber: #f59e0b;
    --dc-amber-soft: #fef4e2;
    --dc-red: #e5484d;
    --dc-red-soft: #fdedee;

    /* Typografie */
    --dc-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dc-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Ritme — ruim opgezet: één hoofdidee per sectie heeft lucht nodig. */
    --dc-shell: 1320px;
    --dc-shell-wide: 1560px;
    --dc-gut: clamp(20px, 4vw, 56px);
    --dc-section-y: clamp(88px, 10vw, 176px);

    /* Vorm */
    --dc-r-sm: 8px;
    --dc-r: 14px;
    --dc-r-lg: 20px;
    --dc-r-xl: 28px;
    --dc-r-pill: 999px;

    /* Diepte */
    --dc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --dc-shadow: 0 4px 16px -4px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .04);
    --dc-shadow-lg: 0 24px 56px -18px rgba(16, 24, 40, .16), 0 6px 18px -8px rgba(16, 24, 40, .07);
    --dc-shadow-blue: 0 18px 40px -14px rgba(var(--dc-blue-rgb), .45);

    /* Beweging */
    --dc-ease: cubic-bezier(.22, .61, .36, 1);
    --dc-fast: .18s;
    --dc-mid: .34s;
    --dc-slow: .6s;
}

/* ==========================================================================
   2. SCOPED RESET
   ========================================================================== */

.dcx {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--dc-ink-soft);
    font-family: var(--dc-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.dcx *,
.dcx *::before,
.dcx *::after { box-sizing: border-box; }

/* :where() heeft specificiteit 0, zodat elke componentregel hieronder
   moeiteloos wint van deze reset. */
:where(.dcx) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption,
                    blockquote, dl, dd, dt) {
    margin: 0;
    padding: 0;
}

:where(.dcx) :where(ul, ol) { list-style: none; }

:where(.dcx) :where(img, svg, video) {
    display: block;
    max-width: 100%;
}

:where(.dcx) :where(img, video) { height: auto; }

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

/* Links zonder eigen klasse volgen de tekstkleur van de sectie. Links mét
   klasse (knoppen, pijllinks) bepalen hun kleur zelf. */
.dcx a:not([class]) { color: inherit; }

.dcx button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.dcx :focus-visible {
    outline: 2px solid var(--dc-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.dcx-shell {
    width: 100%;
    max-width: var(--dc-shell);
    margin-inline: auto;
    padding-inline: var(--dc-gut);
}

.dcx-shell--wide { max-width: var(--dc-shell-wide); }

/* Alleen voor schermlezers: labels bij knoppen die enkel een pictogram tonen. */
.dcx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dcx-section { padding-block: var(--dc-section-y); }

.dcx--tint { background: var(--dc-bg-tint); }
.dcx--white { background: var(--dc-surface); }

.dcx--deep {
    background: var(--dc-bg-deep);
    color: rgba(255, 255, 255, .72);
}

.dcx--deep .dcx-h2,
.dcx--deep .dcx-h3 { color: #fff; }

/* Hairline scheiding tussen aangrenzende lichte secties */
.dcx--rule { border-top: 1px solid var(--dc-line); }

/* ==========================================================================
   4. TYPOGRAFIE
   ========================================================================== */

/* Het label boven elke kop. Staat het in een oudere widget zonder de
   .dcx-tokens, dan vallen de waarden terug op de merkwaarden zelf. */
.dcx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--dc-font-mono, ui-monospace, "JetBrains Mono", monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--dc-blue, #147be1);
}

.dcx-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    flex: none;
}

.dcx-eyebrow--plain::before { display: none; }

/* Variant met het Developercode-merkteken in plaats van het streepje. */
.dcx-eyebrow--mark::before { display: none; }
.dcx-eyebrow--mark { gap: 10px; }

/* --- Merkteken ---
   Brackets voor de code, de stijgende lijn voor de groei. De lijn tekent
   zichzelf zodra de eyebrow in beeld komt; het knooppunt landt erna. */
.dc-mark {
    width: 28px;
    height: 20px;
    flex: none;
    overflow: visible;
}

.dc-mark__bracket { opacity: .42; }

.dc-mark__line {
    stroke-dasharray: 15;
}

.dc-mark__node {
    transform-box: fill-box;
    transform-origin: center;
}

/* Het teken houdt zich alleen in als het in een reveal zit die nog moet
   binnenkomen. Staat het merkteken in een widget zonder reveal — de oudere
   Developercode-widgets met eigen CSS — dan is het meteen compleet. */
.dcx-reveal .dc-mark__line { stroke-dashoffset: 15; }
.dcx-reveal .dc-mark__node { transform: scale(0); }

.is-in .dc-mark__line { animation: dc-mark-draw .9s var(--dc-ease) .1s forwards; }
.is-in .dc-mark__node { animation: dc-mark-node .45s var(--dc-ease) .85s forwards; }

@keyframes dc-mark-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes dc-mark-node {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Geen JS? Dan het teken meteen compleet. */
.no-js .dc-mark__line { stroke-dashoffset: 0; }
.no-js .dc-mark__node { transform: none; }

.dcx--deep .dcx-eyebrow { color: #62aaf3; }

.dcx-h1 {
    font-family: var(--dc-font);
    /* 72px op laptop, 100px op groot scherm */
    font-size: clamp(2.75rem, 6.6vw, 6.25rem);
    line-height: 1.0;
    letter-spacing: -.042em;
    font-weight: 700;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dcx-h2 {
    font-family: var(--dc-font);
    font-size: clamp(2.125rem, 4.2vw, 4rem);
    line-height: 1.06;
    letter-spacing: -.034em;
    font-weight: 700;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dcx-h3 {
    font-family: var(--dc-font);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    line-height: 1.24;
    letter-spacing: -.022em;
    font-weight: 600;
    color: var(--dc-ink);
}

.dcx-h4 {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -.01em;
    font-weight: 600;
    color: var(--dc-ink);
}

/* Tweede regel in merkblauw — de kernbeweging uit de merkfilm */
.dcx-accent { color: var(--dc-blue); }

.dcx-lede {
    font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
    line-height: 1.62;
    color: var(--dc-muted);
    max-width: 56ch;
}

.dcx-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--dc-muted);
}

.dcx-mono {
    font-family: var(--dc-font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

/* Sectiekop: eyebrow + titel + lede */
.dcx-head { max-width: 780px; }
.dcx-head > * + * { margin-top: 22px; }
.dcx-head--center { margin-inline: auto; text-align: center; }
.dcx-head--center .dcx-lede { margin-inline: auto; }

/* Kop met titel links en lede/actie rechts */
.dcx-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    gap: clamp(28px, 5vw, 96px);
    align-items: end;
}

.dcx-head-split > :first-child > * + * { margin-top: 22px; }

@media (max-width: 900px) {
    .dcx-head-split { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   5. KNOPPEN
   --------------------------------------------------------------------------
   Eén knop voor de hele site. De hero-CTA is de norm en die norm geldt nu
   overal: een pil, optioneel een labelpil ervoor, de tekst, en rechts een
   rond vlak met de pijl erin. Bij hover loopt er een lichtveeg overheen en
   tilt de knop een fractie op.

   De klassen werken ook buiten een .dcx-sectie: de tokens hebben een
   terugvalwaarde, zodat oudere widgets dezelfde knop krijgen.
   ========================================================================== */

.dcx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    /* Rechts smaller: daar zit het ronde vlak, dat zijn eigen ruimte meebrengt. */
    padding: 10px 10px 10px 22px;
    border-radius: var(--dc-r-pill, 999px);
    font-family: var(--dc-font, inherit);
    font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    transition: transform var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1)),
                box-shadow var(--dc-mid, .32s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1)),
                background-color var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1)),
                border-color var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1)),
                color var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Knop zonder rondje: dan weer gelijke ruimte links en rechts. */
.dcx-btn--plain { padding: 14px 24px; gap: 10px; }

.dcx-btn:hover { transform: translateY(-2px); }
.dcx-btn:active { transform: translateY(0); }

.dcx-btn:focus-visible {
    outline: 2px solid var(--dc-blue, #147be1);
    outline-offset: 3px;
}

/* --- De lichtveeg ------------------------------------------------------- */

.dcx-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .24) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--dc-ease, cubic-bezier(.22, 1, .36, 1));
}

.dcx-btn:hover::after { transform: translateX(120%); }

/* Op lichte knoppen is een witte veeg onzichtbaar; daar veegt de merkkleur. */
.dcx-btn--ghost::after {
    background: linear-gradient(105deg, transparent 30%, rgba(var(--dc-blue-rgb, 20, 123, 225), .10) 50%, transparent 70%);
}

/* --- De onderdelen ------------------------------------------------------ */

/* Labelpil vóór de tekst — 'Gratis', 'Nieuw', 'Populair'. */
.dcx-btn__tag {
    padding: 5px 11px;
    border-radius: var(--dc-r-pill, 999px);
    background: rgba(255, 255, 255, .22);
    font-family: var(--dc-font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    flex: none;
}

.dcx-btn__text {
    font-family: var(--dc-font, inherit);
    font-weight: 600;
    letter-spacing: -.015em;
}

/* Het ronde vlak met de pijl. */
.dcx-btn__go {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--dc-blue, #147be1);
    flex: none;
    transition: background-color var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1)),
                color var(--dc-fast, .18s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1));
}

.dcx-btn__go svg {
    width: 17px;
    height: 17px;
    transition: transform var(--dc-mid, .32s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1));
}

.dcx-btn:hover .dcx-btn__go svg { transform: translateX(3px); }

/* Losse iconen in een knop zonder rondje. */
.dcx-btn > svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform var(--dc-mid, .32s) var(--dc-ease, cubic-bezier(.22, 1, .36, 1));
}

.dcx-btn:hover > svg { transform: translateX(3px); }

/* --- Varianten ---------------------------------------------------------- */

/* De hoofdactie. */
.dcx-btn.dcx-btn--primary {
    background: var(--dc-blue, #147be1);
    color: #fff;
    box-shadow: 0 18px 40px -14px rgba(var(--dc-blue-rgb, 20, 123, 225), .55);
}

.dcx-btn.dcx-btn--primary:hover {
    background: var(--dc-blue-deep, #0f5cb8);
    color: #fff;
    box-shadow: 0 24px 50px -14px rgba(var(--dc-blue-rgb, 20, 123, 225), .7);
}

/* Tweede actie op een licht vlak. */
.dcx-btn.dcx-btn--ghost {
    background: var(--dc-surface, #fff);
    color: var(--dc-ink, #12151c);
    border-color: var(--dc-line, #e6eaf1);
    box-shadow: var(--dc-shadow-sm, 0 2px 10px -4px rgba(18, 21, 28, .12));
}

.dcx-btn.dcx-btn--ghost:hover {
    border-color: var(--dc-blue, #147be1);
    color: var(--dc-blue, #147be1);
    box-shadow: 0 18px 34px -18px rgba(var(--dc-blue-rgb, 20, 123, 225), .45);
}

.dcx-btn--ghost .dcx-btn__go {
    background: var(--dc-blue, #147be1);
    color: #fff;
}

.dcx-btn--ghost .dcx-btn__tag {
    background: var(--dc-blue-soft, #eaf3fd);
    color: var(--dc-blue, #147be1);
}

/* Op inkt. */
.dcx-btn.dcx-btn--dark {
    background: var(--dc-ink, #12151c);
    color: #fff;
    box-shadow: 0 18px 40px -16px rgba(18, 21, 28, .5);
}

.dcx-btn.dcx-btn--dark:hover { background: #000; color: #fff; }

.dcx-btn--dark .dcx-btn__go { background: #fff; color: var(--dc-ink, #12151c); }

/* Tweede actie op een donker vlak. */
.dcx-btn.dcx-btn--light {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
}

.dcx-btn.dcx-btn--light:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}

.dcx-btn--light .dcx-btn__go { background: #fff; color: var(--dc-ink, #12151c); }
.dcx-btn--light .dcx-btn__tag { background: rgba(255, 255, 255, .16); }

/* --- Maten -------------------------------------------------------------- */

.dcx-btn--lg { padding: 12px 12px 12px 26px; font-size: 1.0625rem; }
.dcx-btn--lg.dcx-btn--plain { padding: 17px 30px; }
.dcx-btn--lg .dcx-btn__go { width: 44px; height: 44px; }

.dcx-btn--sm { padding: 7px 7px 7px 16px; gap: 10px; font-size: .875rem; }
.dcx-btn--sm.dcx-btn--plain { padding: 10px 18px; }
.dcx-btn--sm .dcx-btn__go { width: 32px; height: 32px; }
.dcx-btn--sm .dcx-btn__go svg { width: 14px; height: 14px; }

.dcx-btn--block { width: 100%; }
/* Vollebreedte-knop: tekst links, pijl rechts, net als in de hero op mobiel. */
.dcx-btn--block:not(.dcx-btn--plain) { justify-content: space-between; }

@media (max-width: 700px) {
    .dcx-btn:not(.dcx-btn--plain) { justify-content: space-between; }
    /* Een veeg over een knop die je aanraakt in plaats van aanwijst voegt niets toe. */
    .dcx-btn::after { display: none; }
}

/* Tekstlink met pijl */
.dcx .dcx-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dc-blue);
}

.dcx-link svg { width: 15px; height: 15px; transition: transform var(--dc-mid) var(--dc-ease); }
.dcx .dcx-link:hover { color: var(--dc-blue-deep); }
.dcx-link:hover svg { transform: translateX(4px); }

.dcx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   6. KAARTEN & BADGES
   ========================================================================== */

.dcx-card {
    position: relative;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
    padding: clamp(22px, 2.4vw, 32px);
    transition: border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease),
                transform var(--dc-mid) var(--dc-ease);
}

.dcx-card--hover:hover {
    border-color: rgba(var(--dc-blue-rgb), .35);
    box-shadow: var(--dc-shadow-lg);
    transform: translateY(-4px);
}

.dcx-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-blue-soft);
    color: var(--dc-blue-deep);
    font-family: var(--dc-font);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    white-space: nowrap;
}

.dcx-badge--green { background: var(--dc-green-soft); color: #077f5a; }
.dcx-badge--graphite { background: var(--dc-graphite-soft); color: var(--dc-graphite); }
.dcx-badge--amber { background: var(--dc-amber-soft); color: #a6690b; }
.dcx-badge--red { background: var(--dc-red-soft); color: #c0343a; }
.dcx-badge--neutral { background: var(--dc-bg-tint); color: var(--dc-muted); }

/* Icoonvlak */
.dcx-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    flex: none;
}

.dcx-ico svg { width: 20px; height: 20px; }
.dcx-ico--green { background: var(--dc-green-soft); color: #0d9668; }
.dcx-ico--graphite { background: var(--dc-graphite-soft); color: #3a4658; }
.dcx-ico--amber { background: var(--dc-amber-soft); color: #d98806; }
.dcx-ico--ink { background: var(--dc-ink); color: #fff; }

/* Checklijst */
.dcx-checks { display: grid; gap: 11px; }

.dcx-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--dc-ink-soft);
}

.dcx-checks li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--dc-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9668' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Statistiek */
.dcx-stat__value {
    font-family: var(--dc-font);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--dc-ink);
    font-variant-numeric: tabular-nums;
}

.dcx-stat__label {
    margin-top: 8px;
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dcx--deep .dcx-stat__value { color: #fff; }
.dcx--deep .dcx-stat__label { color: rgba(255, 255, 255, .45); }

/* ==========================================================================
   6b. BROWSERFRAME & ZWEVEND LABEL  (gedeelde componenten)
   --------------------------------------------------------------------------
   Gebruikt door de preview-sectie, het websitetraject en de Claude-sectie.
   Staat hier, niet in een van die secties, omdat drie widgets erop leunen.
   ========================================================================== */

.dc-frame {
    position: relative;
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
}

.dc-frame__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--dc-bg-tint);
    border-bottom: 1px solid var(--dc-line);
}

.dc-frame__dots { display: flex; gap: 6px; flex: none; }

.dc-frame__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d8dee8;
}

.dc-frame__dots i:nth-child(1) { background: #f0a3a3; }
.dc-frame__dots i:nth-child(2) { background: #f2d194; }
.dc-frame__dots i:nth-child(3) { background: #a7dcb8; }

.dc-frame__url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 5px 14px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    color: var(--dc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-frame__url svg { width: 12px; height: 12px; color: var(--dc-green); flex: none; }

.dc-frame__live {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--dc-font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-frame__live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-green);
    animation: dc-live 2.4s var(--dc-ease) infinite;
}

.dc-frame__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--dc-bg-tint);
    overflow: hidden;
}

.dc-frame__media video,
.dc-frame__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cursor die het venster binnenloopt en op de knop tikt. Sfeer, geen
   informatie — dus aria-hidden en uit bij reduced motion. */
.dc-frame__cursor {
    position: absolute;
    left: 24%;
    top: 62%;
    width: 22px;
    height: 22px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8.5-6.2 1.3L9.6 19z' fill='%2312151c' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 3px 8px rgba(16, 24, 40, .28));
    animation: dc-cursor 7s var(--dc-ease) infinite;
}

@keyframes dc-cursor {
    0%, 8%    { transform: translate(0, 0) scale(1); opacity: 0; }
    14%       { opacity: 1; }
    38%       { transform: translate(148px, -74px) scale(1); opacity: 1; }
    44%       { transform: translate(148px, -74px) scale(.82); }
    50%       { transform: translate(148px, -74px) scale(1); }
    76%       { transform: translate(40px, 30px) scale(1); opacity: 1; }
    88%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* Zwevend label bij een frame. */
.dc-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: var(--dc-r-lg);
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--dc-shadow-lg);
}

.dc-chip .dcx-ico { width: 38px; height: 38px; border-radius: 10px; }
.dc-chip .dcx-ico svg { width: 18px; height: 18px; }

.dc-chip__body { display: grid; gap: 3px; }

.dc-chip__body b {
    font-family: var(--dc-font);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--dc-ink);
    white-space: nowrap;
}

.dc-chip__body i {
    font-family: var(--dc-font-mono);
    font-size: 10px;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-faint);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .dc-chip { padding: 10px 14px 10px 10px; }
    .dc-chip__body b,
    .dc-chip__body i { white-space: normal; }
    .dc-frame__cursor,
    .dc-frame__live { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-frame__cursor { animation: none; opacity: 0; }
    .dc-frame__live i { animation: none; }
}

/* ==========================================================================
   7. BEWEGING — scroll reveal
   ========================================================================== */

.dcx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--dc-ease), transform .7s var(--dc-ease);
    transition-delay: var(--dc-delay, 0ms);
}

.dcx-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Geen JS? Dan gewoon zichtbaar. */
.no-js .dcx-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .dcx *,
    .dcx *::before,
    .dcx *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .dcx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   8. HERO — wit canvas
   --------------------------------------------------------------------------
   Bijna het volledige scherm, maar licht en rustig. Het bewijs zit niet in
   een achtergrondfilm maar in de twee schermen rechts: die spelen allebei
   echt af, in hetzelfde frame.

   Eén dominante actie. De AI-route is een tekstlink, geen tweede knop —
   twee even zware knoppen laten de bezoeker twijfelen.
   ========================================================================== */

.dc-hero {
    min-height: calc(92vh - 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(40px, 6vh, 96px);
    padding-bottom: clamp(32px, 5vh, 56px);
    background: var(--dc-surface);
    color: var(--dc-ink-soft);
    overflow: hidden;
    isolation: isolate;
}

/* --- Inhoud -------------------------------------------------------------- */

.dc-hero__inner {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
}

.dc-hero__copy { max-width: 620px; }

.dc-hero__eyebrow { color: var(--dc-blue); }

.dc-hero__title {
    margin-top: 26px;
    font-family: var(--dc-font);
    /* 72px op laptop, tot 100px op groot scherm */
    font-size: clamp(2.75rem, 6.4vw, 6.25rem);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 700;
    color: var(--dc-ink);
    max-width: 15ch;
    text-wrap: balance;
}

.dc-hero__title .dcx-accent { color: var(--dc-blue); }

.dc-hero__lede {
    margin-top: clamp(20px, 2.2vw, 30px);
    max-width: 46ch;
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
    line-height: 1.6;
    color: var(--dc-muted);
    text-wrap: pretty;
}

.dc-hero__actions {
    margin-top: clamp(32px, 3.4vw, 46px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
}

/* --- De hoofdactie -------------------------------------------------------
   De knop zelf komt uit .dcx-btn (sectie 5). De hero voegt alleen toe wat
   met déze plek te maken heeft. --------------------------------------- */

.dc-hero__cta { flex: none; }

/* --- De tweede route -----------------------------------------------------
   Geen tweede knop: twee even zware knoppen laten de bezoeker twijfelen.
   Wel dezelfde pijl en dezelfde beweging als in de knop. ---------------- */

.dcx .dc-hero__alt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--dc-line);
    font-family: var(--dc-font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--dc-ink-soft);
    transition: color var(--dc-fast) var(--dc-ease), border-color var(--dc-fast) var(--dc-ease);
}

.dcx .dc-hero__alt:hover { color: var(--dc-blue); border-color: var(--dc-blue); }
.dc-hero__alt svg { width: 15px; height: 15px; transition: transform var(--dc-mid) var(--dc-ease); }
.dc-hero__alt:hover svg { transform: translateX(3px); }

.dc-hero__note {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    color: var(--dc-muted);
}

.dc-hero__note svg { width: 16px; height: 16px; color: var(--dc-green); flex: none; }

/* --- De twee schermen ---------------------------------------------------- */

.dc-hero__screens {
    position: relative;
    height: clamp(320px, 34vw, 440px);
    --dc-px: 0;
    --dc-py: 0;
}

.dc-screen {
    position: absolute;
    margin: 0;
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
    transform: translate3d(
        calc(var(--dc-px, 0) * var(--dc-depth, 0) * 1px),
        calc(var(--dc-py, 0) * var(--dc-depth, 0) * 1px),
        0
    );
    transition: transform .6s var(--dc-ease);
}

.dc-screen__bar {
    display: flex;
    gap: 5px;
    padding: 10px 12px;
    background: var(--dc-bg-tint);
    border-bottom: 1px solid var(--dc-line);
}

.dc-screen__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d8dee8;
}

.dc-screen__bar i:nth-child(1) { background: #f0a3a3; }
.dc-screen__bar i:nth-child(2) { background: #f2d194; }
.dc-screen__bar i:nth-child(3) { background: #a7dcb8; }

/* Vaste verhouding, zodat de film en het stilstaande beeld hetzelfde vlak
   vullen en er niets verspringt zodra de video begint. */
.dc-screen__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--dc-bg-tint);
    overflow: hidden;
}

.dc-screen__media video,
.dc-screen__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.dc-screen figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--dc-surface);
    border-top: 1px solid var(--dc-line);
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-screen__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.dc-screen__dot--live {
    background: var(--dc-green);
    animation: dc-live 2.6s var(--dc-ease) infinite;
}

.dc-screen__dot--run {
    background: var(--dc-blue);
    animation: dc-blink 1.9s steps(1, end) infinite;
}

@keyframes dc-live {
    0%   { box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb), .5); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--dc-green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb), 0); }
}

@keyframes dc-blink {
    0%, 60%   { opacity: 1; }
    61%, 100% { opacity: .3; }
}

/* De site groot en vooraan, de workflow kleiner en verder weg. */
.dc-screen--web {
    top: 0;
    right: 0;
    width: min(100%, 470px);
    z-index: 1;
}

/* Overlapt bewust alleen het beeldvlak van het andere scherm, nooit het
   bijschrift eronder — anders lees je daar de helft van. */
.dc-screen--ai {
    top: 12%;
    left: -22%;
    width: min(62%, 290px);
    z-index: 2;
}

/* --- Logostrook — de gereedschapskist ------------------------------------
   Geen rij grijze plaatjes meer, maar een rail die traag doorloopt met de
   logo's in hun eigen kleur op witte chips. De chips staan om en om iets
   lager, zodat de strook een ritme heeft in plaats van een rechte streep.
   Aanwijzen zet de band stil en licht die ene chip op in de merkkleur.
   -------------------------------------------------------------------------- */

.dc-hero__trust {
    --dc-logo-run: 56s;      /* duur van één ronde; de widget kan dit zetten */
    --dc-logo-gap: clamp(10px, 1vw, 18px);

    position: relative;
    margin-top: clamp(32px, 4vh, 56px);
    padding-top: clamp(20px, 2.6vh, 30px);
    border-top: 1px solid var(--dc-line);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2.2vw, 38px);
}

.dc-hero__trust-label {
    display: inline-flex;
    align-items: flex-start;
    max-width: 20ch;
    font-family: var(--dc-font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

/* De rail zelf. Twee identieke sporen achter elkaar: zodra het eerste
   volledig naar links is geschoven, staat het tweede exact op zijn plek. */
.dc-trust__rail {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 12px 0 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
}

.dc-logos {
    display: flex;
    align-items: center;
    flex: none;
    gap: var(--dc-logo-gap);
    padding-right: var(--dc-logo-gap);
    animation: dc-logos-run var(--dc-logo-run) linear infinite;
}

@keyframes dc-logos-run {
    to { transform: translateX(-100%); }
}

.dc-trust__rail:hover .dc-logos,
.dc-trust__rail:focus-within .dc-logos { animation-play-state: paused; }

.dc-logo {
    --b: var(--dc-blue);

    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px 8px 10px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-sm);
    transition: transform var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

/* De golfslag. */
.dc-logo:nth-child(even) { transform: translateY(10px); }

/* In rust ligt er een neutrale schaduw onder de chip — de kleur zit in het
   logo zelf, niet in het vlak eromheen. Pas bij aanwijzen kleurt de gloed
   mee met dat ene merk. */
.dc-logo::after {
    content: "";
    position: absolute;
    inset: auto 14% -7px 14%;
    height: 14px;
    border-radius: 50%;
    background: var(--dc-ink);
    filter: blur(9px);
    opacity: .1;
    z-index: -1;
    transition: opacity var(--dc-mid) var(--dc-ease),
                background var(--dc-mid) var(--dc-ease);
}

.dc-logo:hover {
    transform: translateY(-5px);
    border-color: var(--b);
    border-color: color-mix(in srgb, var(--b) 48%, var(--dc-line));
    box-shadow: 0 16px 30px -16px var(--b);
}

.dc-logo:nth-child(even):hover { transform: translateY(5px); }
.dc-logo:hover::after { background: var(--b); opacity: .42; }

.dc-logo__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
}

/* Het OpenAI-teken is zwart. Op een donkere sectie zou dat wegvallen, dus
   daar keert het om. Alle andere merken hebben genoeg eigen kleur. */
.dcx--deep .dc-logo { --dc-mark-ink: #ffffff; }

.dc-logo__mark svg,
.dc-logo__mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Eigen uploads zijn zelden vierkant: die krijgen hun eigen breedte. */
.dc-logo--img .dc-logo__mark { width: auto; max-width: 96px; }
.dc-logo--img .dc-logo__mark img { width: auto; }

.dc-logo__name {
    font-family: var(--dc-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--dc-ink);
    white-space: nowrap;
}

/* --- Responsief ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .dc-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 56px); }
    .dc-hero__copy { max-width: none; }
    .dc-hero__title { max-width: 14ch; }

    .dc-hero__screens { height: clamp(280px, 52vw, 420px); }
    .dc-screen--web { width: min(70%, 440px); right: 0; top: 0; }
    .dc-screen--ai { width: min(52%, 300px); left: 0; bottom: 0; }
}

@media (max-width: 760px) {
    .dc-hero {
        min-height: auto;
        padding-top: clamp(40px, 10vh, 88px);
        padding-bottom: 44px;
    }

    /* Op mobiel is de tekst de hero. Eén scherm erbij is genoeg bewijs; twee
       overlappende kaartjes worden op deze breedte onleesbaar. */
    .dc-hero__title { max-width: none; font-size: clamp(2.5rem, 11vw, 3.4rem); }
    .dc-hero__lede { max-width: none; }

    .dc-hero__actions { flex-direction: column; align-items: stretch; gap: 20px; }
    .dc-hero__alt { align-self: flex-start; }

    .dc-hero__screens { height: auto; position: static; }
    .dc-screen { position: static; width: 100% !important; transform: none; }
    .dc-screen--ai { display: none; }

    .dc-hero__trust {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .dc-hero__trust-label { max-width: none; }
    .dc-trust__rail { padding: 10px 0 18px; }
    .dc-logo { padding: 7px 13px 7px 9px; gap: 8px; }
    .dc-logo__mark { width: 22px; height: 22px; }
    .dc-logo__name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-screen__dot--live,
    .dc-screen__dot--run { animation: none; }
    .dcx-btn::after { display: none; }

    /* Geen lopende band: de logo's staan stil en breken gewoon af. */
    .dc-trust__rail {
        overflow: visible;
        flex-wrap: wrap;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .dc-logos { animation: none; flex-wrap: wrap; }
    .dc-logos--clone { display: none; }
    .dc-logo:nth-child(even) { transform: none; }
    .dc-logo:nth-child(even):hover { transform: translateY(-5px); }
}

/* ==========================================================================
   9. DIENSTKEUZE — "Waar kunnen we je mee helpen?"
   --------------------------------------------------------------------------
   Twee keuzes op een wit vel. Geen donkere slab meer met volvlak beeld, maar
   twee rustige kaarten op haarlijnen: beeld in een vaste beeldverhouding
   bovenin, tekst eronder, en één accentkleur per spoor die alleen in de
   details terugkomt — label, kicker, pijl en de streep die bij aanwijzen
   volloopt. De maatvoering is bewust ingehouden: de kop draagt de sectie
   zonder te schreeuwen en de kaarten blijven leesbaar in plaats van groot.
   ========================================================================== */

.dc-pillars {
    /* Lokaal palet: dezelfde merktokens, één accent per spoor. */
    --p-line: var(--dc-line);
    --p-line-soft: var(--dc-line-soft);
    --p-accent: var(--dc-blue);
    --p-accent-soft: var(--dc-blue-soft);

    position: relative;
    isolation: isolate;
    background: var(--dc-surface);
    color: var(--dc-muted);
    overflow: hidden;
    /* De hero erboven is óók wit; zonder deze haarlijn lopen de twee
       secties in elkaar over. */
    border-top: 1px solid var(--dc-line-soft);
}

/* --- Canvas: één zachte wash, verder niets ------------------------------- */

.dc-pillars__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 84% 0%, rgba(var(--dc-blue-rgb), .05) 0%, transparent 70%),
        radial-gradient(38% 36% at 6% 8%, rgba(var(--dc-blue-rgb), .04) 0%, transparent 72%);
}

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

/* --- Kop ------------------------------------------------------------------ */

.dc-pillars__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
}

/* Het label pakt het accent van de sectie op; de vorm blijft die van de hero. */
.dc-pillars .dcx-eyebrow { color: var(--p-accent); }

.dc-pillars .dcx-h2 {
    margin-top: clamp(16px, 1.6vw, 22px);
    /* Ingehouden: 34px op mobiel, 52px op groot scherm. */
    font-size: clamp(2.125rem, 3.2vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -.034em;
    color: var(--dc-ink);
}

.dc-pillars .dcx-accent { color: var(--p-accent); }

.dc-pillars .dcx-lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--dc-muted);
    max-width: 48ch;
}

/* --- Acties onder de intro ------------------------------------------------ */

.dc-pillars__actions {
    margin-top: clamp(20px, 2.2vw, 28px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.dcx .dc-pillars__textlink { color: var(--p-accent); }
.dcx .dc-pillars__textlink:hover { color: var(--dc-blue); }

/* --- De haarlijn met het sterretje erop ----------------------------------- */

.dc-pillars__rule {
    position: relative;
    margin-top: clamp(34px, 4vw, 56px);
    height: 1px;
    background: var(--p-line);
}

.dc-pillars__asterisk {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: clamp(38px, 3.4vw, 46px);
    height: clamp(38px, 3.4vw, 46px);
    border-radius: 50%;
    /* Ondoorzichtig, zodat het teken de lijn onderbreekt in plaats van
       eroverheen te zweven. */
    background: var(--dc-surface);
    border: 1px solid var(--p-line);
    color: var(--p-accent);
}

.dc-pillars__asterisk svg { width: 38%; height: 38%; }

/* --- De twee kaarten ------------------------------------------------------ */

.dc-pillars__grid {
    position: relative;
    margin-top: clamp(28px, 3.2vw, 44px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
}

.dc-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--dc-r-lg);
    border: 1px solid var(--p-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-sm);
    isolation: isolate;
    transition: transform var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

/* Per spoor één accent; alle details erven het via currentColor-tokens. */
.dc-choice--fill { --p-accent: var(--dc-blue);   --p-accent-soft: var(--dc-blue-soft); }
.dc-choice--dark { --p-accent: var(--dc-graphite); --p-accent-soft: var(--dc-graphite-soft); }

.dc-choice:hover,
.dc-choice:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--p-accent) 34%, var(--dc-line));
    box-shadow: var(--dc-shadow-lg);
}

/* De accentstreep bovenaan loopt vol zodra het spoor wordt aangewezen. */
.dc-choice::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 auto auto 0;
    height: 2px;
    width: 0;
    background: var(--p-accent);
    transition: width var(--dc-slow) var(--dc-ease);
    pointer-events: none;
}

.dc-choice:hover::before,
.dc-choice:focus-within::before { width: 100%; }

/* --- Beeld in een vaste beeldverhouding ----------------------------------- */

.dc-choice__media {
    position: relative;
    z-index: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--dc-bg-tint);
    border-bottom: 1px solid var(--p-line-soft);
}

.dc-choice__media img,
.dc-choice__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform 1.1s var(--dc-ease);
}

.dc-choice:hover .dc-choice__media img,
.dc-choice:hover .dc-choice__media video,
.dc-choice:focus-within .dc-choice__media img,
.dc-choice:focus-within .dc-choice__media video { transform: scale(1.05); }

/* Zonder beeld blijft een leeg vlak over; dat vullen we met een fijne
   arcering in plaats van een gat. */
.dc-choice__media--empty {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(var(--dc-blue-rgb), .05) 0 1px,
        transparent 1px 8px
    );
}

/* --- Het volgnummer als klein merkteken ----------------------------------- */

.dc-choice__num {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding-inline: 8px;
    border-radius: var(--dc-r-sm);
    border: 1px solid var(--p-line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1;
    color: var(--dc-ink);
    pointer-events: none;
}

/* --- Wat je moet weten om te kiezen --------------------------------------- */

.dc-choice__body {
    /* Bewust niet position:relative: dan valt de titel-link (::after) terug op
       .dc-choice en dekt hij het hele spoor. z-index werkt hier ook zo,
       want een flex-item hoeft niet gepositioneerd te zijn. */
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(20px, 2.2vw, 30px);
}

.dc-choice__tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--dc-r-pill);
    background: var(--p-accent-soft);
    color: var(--p-accent);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}

.dc-choice__title {
    margin-top: 14px;
    font-family: var(--dc-font);
    font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -.024em;
    line-height: 1.22;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dc-choice__title .dcx-accent { color: var(--p-accent); }

.dcx .dc-choice__link { color: inherit; }
.dcx .dc-choice__link:hover { color: var(--p-accent); }

/* De titel-link strekt zich over de hele kaart uit. */
.dc-choice__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.dc-choice__kicker {
    margin-top: 10px;
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.45;
    color: var(--p-accent);
}

.dc-choice__text {
    margin-top: 10px;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--dc-muted);
    max-width: 44ch;
}

/* Vier korte kernwoorden als losse pillen — genoeg om te herkennen, te
   weinig om een dienstenoverzicht te worden. */
.dc-choice__list {
    margin-top: clamp(14px, 1.6vw, 20px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dc-choice__list li span {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--dc-r-pill);
    border: 1px solid var(--p-line);
    background: var(--dc-bg);
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--dc-ink-soft);
}

/* De knop is hier een pijllink: de kaart zelf is al de klik. */
.dc-choice__cta {
    /* Onderaan uitlijnen, zodat twee kaarten van ongelijke lengte toch
       op dezelfde regel eindigen. */
    margin-top: auto;
    padding-top: clamp(16px, 1.8vw, 22px);
    align-self: stretch;
    border-top: 1px solid var(--p-line-soft);
}

.dc-choice__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--p-accent);
    /* Sier: de echte link is de titel, die de hele kaart dekt. */
    pointer-events: none;
}

.dc-choice__btn svg {
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-choice:hover .dc-choice__btn svg,
.dc-choice:focus-within .dc-choice__btn svg { transform: translateX(4px); }

/* --- Smaller ------------------------------------------------------------- */

@media (max-width: 1040px) {
    .dc-pillars__head { grid-template-columns: 1fr; align-items: start; }
    .dc-pillars__asterisk { display: none; }

    .dc-pillars__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .dc-choice__media { aspect-ratio: 16 / 11; }
    .dc-choice__text { font-size: .9063rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-choice,
    .dc-choice::before,
    .dc-choice__btn svg,
    .dc-choice__media img,
    .dc-choice__media video { transition: none; }

    .dc-choice:hover,
    .dc-choice:focus-within { transform: none; }

    .dc-choice:hover .dc-choice__media img,
    .dc-choice:hover .dc-choice__media video,
    .dc-choice:focus-within .dc-choice__media img,
    .dc-choice:focus-within .dc-choice__media video { transform: scale(1.01); }
}

/* ==========================================================================
   10. CASES — de stapel browservensters
   --------------------------------------------------------------------------
   Twee kolommen, naar het voorbeeld van design010. Links de tekst: zwarte kop,
   blauwe introregel, het verhaal van de gekozen case en de call to action.
   Rechts de cases als browservensters die diagonaal achter elkaar wegvallen —
   het voorste venster is de gekozen case, de drie erachter tonen wat er nog
   komt. Alles staat recht: geen scheve kaarten, geen schaduwenfestival, maar
   één schone cascade met een zwevend label op het voorste venster.

   De stapel rekent met percentages van de kaart zelf, niet van de sectie, dus
   de compositie klopt op elke breedte zonder JavaScript of vaste maten.
   ========================================================================== */

.dcx.dc-cases {
    --dc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --dc-shadow: 0 6px 18px -12px rgba(16, 24, 40, .22);
    --dc-shadow-lg: 0 34px 64px -30px rgba(16, 24, 40, .38),
                    0 10px 24px -16px rgba(16, 24, 40, .16);

    position: relative;
}

/* De blauwe afsluitlijn onderaan de sectie is bewust verwijderd; de secties
   scheiden nu op tint in plaats van op een lijn. */

/* --- De tweedeling -------------------------------------------------------- */

.dc-cases__split {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr);
    gap: clamp(36px, 4.6vw, 80px);
    align-items: center;
}

/* --- Links: kop, verhaal, knop -------------------------------------------- */

.dc-cases__intro { min-width: 0; }

.dc-cases .dcx-h2 {
    margin-top: 18px;
    font-size: clamp(2.125rem, 3.9vw, 3.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.042em;
    text-wrap: balance;
}

/* De kop blijft in design010 volledig zwart, ook het accentwoord. */
.dc-cases .dcx-h2 .dcx-accent { color: var(--dc-ink); }

.dc-cases .dcx-lede {
    margin-top: 16px;
    max-width: 40ch;
    font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -.016em;
    /* Zelfde inkt als elke andere introregel op de site. */
    color: var(--dc-muted);
}

/* --- Het tekstblok van de gekozen case ------------------------------------ */

/* De panelen liggen op elkaar. Alleen het open paneel staat in de flow, de
   rest zweeft eroverheen; zo is de hoogte van de wikkel altijd die van het
   open paneel en laat een case met veel cijfers bij de andere geen gat achter.
   Dat werkt ook zonder JavaScript: paneel 1 draagt is-active al in de HTML. */
.dc-cases__panels {
    position: relative;
    margin-top: clamp(26px, 3vw, 40px);
}

.dc-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--dc-mid) var(--dc-ease),
                transform var(--dc-mid) var(--dc-ease),
                visibility var(--dc-mid);
}

.dc-panel.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.dc-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.dc-panel__disc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    font-family: var(--dc-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--dc-ink);
}

.dc-panel__disc::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-blue);
    flex: none;
}

.dc-panel__disc--green::before    { background: var(--dc-green); }
.dc-panel__disc--graphite::before { background: var(--dc-graphite); }
.dc-panel__disc--amber::before    { background: var(--dc-amber); }

.dc-panel__sector {
    font-family: var(--dc-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--dc-faint);
}

.dc-panel__client {
    margin: 0;
    font-family: var(--dc-font);
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.034em;
    line-height: 1.1;
    color: var(--dc-ink);
}

.dc-panel__result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--dc-blue-soft);
    border: 1px solid rgba(var(--dc-blue-rgb), .16);
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.42;
    color: var(--dc-blue-deep);
}

.dc-panel__result svg {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
}

/* --- Uitdaging en oplossing ----------------------------------------------- */

.dc-panel__story {
    display: grid;
    gap: 12px;
    margin: 0;
}

.dc-panel__key {
    display: block;
    margin-bottom: 4px;
    font-family: var(--dc-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-panel__row dd {
    margin: 0;
    max-width: 46ch;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--dc-muted);
}

/* --- De cijfers ----------------------------------------------------------- */

.dc-panel__metrics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 30rem;
    padding: 14px 0;
    border-top: 1px solid var(--dc-line);
    border-bottom: 1px solid var(--dc-line);
}

.dc-panel__metric { min-width: 0; }

.dc-panel__metric + .dc-panel__metric {
    padding-left: 16px;
    border-left: 1px solid var(--dc-line);
}

.dc-panel__metric-value {
    display: block;
    font-family: var(--dc-font);
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--dc-ink);
    font-variant-numeric: tabular-nums;
}

.dc-panel__metric-label {
    display: block;
    margin-top: 6px;
    font-family: var(--dc-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--dc-faint);
}

/* --- Extra resultaten ----------------------------------------------------- */

.dc-panel__wins {
    display: grid;
    gap: 8px;
}

.dc-panel__wins li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dc-ink-soft);
}

.dc-panel__wins svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 4px;
    stroke-width: 3;
    color: var(--dc-blue);
}

/* --- Techniek ------------------------------------------------------------- */

.dc-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dc-panel__tags li {
    padding: 5px 11px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    font-family: var(--dc-font-mono);
    font-size: 10px;
    letter-spacing: .05em;
    color: var(--dc-muted);
}

.dc-panel__cta { margin-top: 4px; }

/* --- De bediening onder de tekst ------------------------------------------ */

.dc-cases__bar {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--dc-line);
}

.dc-cases__count {
    flex: none;
    font-family: var(--dc-font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 1;
    color: var(--dc-faint);
}

.dc-cases__now {
    font-family: var(--dc-font);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dc-ink);
    font-variant-numeric: tabular-nums;
}

.dc-cases__of { margin-left: 3px; }

/* Streepjes in plaats van bolletjes: strakker, en met twaalf cases nog leesbaar. */
.dc-cases__ticks {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dcx .dc-cases__tick {
    position: relative;
    width: 20px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: var(--dc-line);
    cursor: pointer;
    transition: width var(--dc-mid) var(--dc-ease),
                background-color var(--dc-fast) var(--dc-ease);
}

/* Groter raakvlak dan het streepje zelf, zodat tikken op mobiel lukt. */
.dc-cases__tick::before {
    content: "";
    position: absolute;
    inset: -11px -3px;
}

.dcx .dc-cases__tick:hover { background: var(--dc-faint); }

.dcx .dc-cases__tick.is-active {
    width: 38px;
    background: var(--dc-blue);
}

.dc-cases__tick:focus-visible {
    outline: 2px solid var(--dc-blue);
    outline-offset: 5px;
}

.dc-cases__arrows {
    display: flex;
    gap: 8px;
    flex: none;
}

.dcx .dc-cases__btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    color: var(--dc-ink);
    box-shadow: var(--dc-shadow-sm);
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                color var(--dc-fast) var(--dc-ease),
                opacity var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dc-cases__btn svg { width: 17px; height: 17px; }
.dc-cases__btn[data-dc-deck-prev] svg { transform: rotate(180deg); }

.dcx .dc-cases__btn:hover:not(:disabled) {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
    color: #fff;
    transform: translateY(-2px);
}

.dc-cases__btn:disabled { opacity: .3; cursor: not-allowed; }

/* --- Rechts: de stapel ---------------------------------------------------- */

.dc-cases__deck {
    position: relative;
    min-width: 0;
}

/* Een zachte gloed onder de stapel, zodat de vensters op een lichtvlak staan
   in plaats van op een leeg vlak. Geen randen, geen raster: alleen diepte. */
.dc-cases__deck::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -16% -16% -20% -12%;
    background:
        radial-gradient(38% 36% at 66% 30%, rgba(var(--dc-blue-rgb), .13), transparent 70%),
        radial-gradient(32% 30% at 34% 76%, rgba(var(--dc-graphite-rgb), .09), transparent 70%);
    pointer-events: none;
}

.dc-deck {
    position: relative;
    z-index: 1;
    /* 1.25 = kaarthoogte (0.86 breed × 2.18/3) × 1.285 voor drie stappen omhoog. */
    aspect-ratio: 1.25;
    touch-action: pan-y;

    /* De cascade: elk venster achter het voorste schuift naar rechtsboven en
       krimpt een tikje. Naar boven, want dan piept de adresbalk van het
       volgende venster erbovenuit en lees je alvast welke site daar wacht —
       precies wat de vensters in design010 doen. De percentages gaan over de
       kaart zelf, dus de compositie klopt op elke breedte.

       Ze staan op de stapel en niet op de casesectie, want de paginahero
       gebruikt dezelfde stapel buiten die sectie om; daar bleven de vensters
       anders precies op elkaar liggen. */
    --dc-fan-x: 8%;
    --dc-fan-y: -14%;
    --dc-fan-scale: .045;
}

/* --- Eén browservenster --------------------------------------------------- */

.dc-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 86%;
    aspect-ratio: 3 / 2.18;
    transform-origin: 0 100%;
    transform: translate3d(calc(var(--dc-p) * var(--dc-fan-x)), calc(var(--dc-p) * var(--dc-fan-y)), 0)
               scale(calc(1 - var(--dc-p) * var(--dc-fan-scale)));
    z-index: calc(30 - var(--dc-p));
    transition: transform .62s var(--dc-ease),
                opacity .44s var(--dc-ease);
    will-change: transform;
}

/* Achterste vensters bestaan wel, maar zijn niet meer te zien of te raken. */
.dc-card.is-deep {
    opacity: 0;
    pointer-events: none;
}

/* Bekeken vensters zakken linksonder het beeld uit. */
.dc-card.is-gone {
    transform: translate3d(-16%, 14%, 0) scale(1.02);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.dc-card__frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: clamp(10px, 1.6%, 16px);
    overflow: hidden;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: 0 16px 36px -26px rgba(16, 24, 40, .42);
    transition: box-shadow var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease);
}

.dc-card.is-active .dc-card__frame {
    box-shadow: var(--dc-shadow-lg);
    border-color: rgba(var(--dc-blue-rgb), .22);
}

/* De adresbalk: drie stipjes en het domein. Dit is het enige wat de kaart
   hoeft te zeggen — de rest staat links in de tekst. */
.dc-card__chrome {
    flex: none;
    height: 9%;
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.4%, 12px);
    padding-inline: clamp(8px, 1.8%, 16px);
    background: var(--dc-surface);
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-card__dots {
    display: flex;
    gap: 4px;
    flex: none;
}

.dc-card__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-line);
}

.dc-card__url {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 64%;
    padding: 0 10px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-bg-tint);
    font-family: var(--dc-font-mono);
    font-size: clamp(8px, .82vw, 11px);
    letter-spacing: .02em;
    line-height: 1;
    color: var(--dc-muted);
    overflow: hidden;
}

.dc-card__url > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-card__lock {
    width: 1em;
    height: 1em;
    flex: none;
    color: var(--dc-green);
}

/* Een case zonder website draagt geen adres maar een naam. Die krijgt geen
   adresbalk-uiterlijk: geen slotje, geen mono, gewoon een rustig label. */
.dc-card__url--plain {
    background: transparent;
    font-family: var(--dc-font);
    font-size: clamp(9px, .9vw, 12px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dc-ink-soft);
}

.dc-card__shot {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--dc-bg-tint);
}

.dc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.1s var(--dc-ease);
}

.dc-card.is-active:hover .dc-card__img { transform: scale(1.035); }

/* Sluier over de vensters achter de stapel: hoe dieper, hoe stiller. */
.dc-card__veil {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(196deg, rgba(244, 247, 252, .22), rgba(244, 247, 252, .62));
    opacity: calc(var(--dc-p) * .3);
    transition: opacity .44s var(--dc-ease);
}

/* Het zwevende label uit design010. Draagt het eerste cijfer van de case —
   de clou, kort — of anders simpelweg dat de site live staat. Het adres zelf
   staat al in de balk erboven, dus dat herhalen we hier niet. */
.dc-card__badge {
    position: absolute;
    left: 7%;
    bottom: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 86%;
    padding: 10px 16px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-ink);
    box-shadow: 0 16px 30px -14px rgba(16, 24, 40, .6);
    font-family: var(--dc-font-mono);
    font-size: clamp(9px, .88vw, 12px);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate(0, 34%) scale(.94);
    transition: opacity var(--dc-mid) var(--dc-ease),
                transform var(--dc-mid) var(--dc-ease);
}

.dc-card.is-active .dc-card__badge {
    opacity: 1;
    transform: translate(0, 46%) scale(1);
    transition-delay: .12s;
}

.dc-card__badge b {
    font-family: var(--dc-font);
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.dc-card__badge > span {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* Het live-teken. Geen ronde stip meer maar een eigen baken: een massieve kern
   met twee ongelijke bogen die naar het woord ernaast wijzen — het signaal dat
   de site in de lucht staat. De vorm zit in een masker, zodat de kleur uit de
   token blijft komen en de gloed de bogen volgt in plaats van het vierkant. */
.dc-card__badge i {
    --dc-live-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='4.92' cy='10.73' r='2.6' fill='%23000'/%3E%3Cpath d='M9.84 11.6A5 5 0 0 0 5.79 5.81' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M12.89 10.03A8 8 0 0 0 8.3 3.48' stroke='%23000' stroke-width='1.55' stroke-linecap='round' stroke-opacity='.5'/%3E%3C/svg%3E");
    width: 13px;
    height: 13px;
    flex: none;
    margin: -1px -1px -1px 0;
    background: var(--dc-green);
    -webkit-mask: var(--dc-live-mark) center / contain no-repeat;
            mask: var(--dc-live-mark) center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(var(--dc-green-rgb), .55));
    animation: dc-live-mark 2.6s ease-in-out infinite;
}

/* Ademen, niet knipperen: het baken zwelt aan en zakt terug. */
@keyframes dc-live-mark {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(var(--dc-green-rgb), .55)); }
    50%       { opacity: .8; filter: drop-shadow(0 0 1px rgba(var(--dc-green-rgb), .22)); }
}

/* De live-variant is geen label meer maar een venster. Geen vulling, geen
   rand: de vorm ontstaat doordat de screenshot erachter vervaagt en dimt.
   Daardoor houdt het woord zijn contrast op elke plaat en ook op de helft die
   onder de kaart uitsteekt, terwijl de kleuren van de site erdoorheen blijven
   schemeren. Het licht in de pil komt van het baken zelf. */
.dc-card__badge--live {
    gap: 9px;
    padding: 9px 17px 9px 13px;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(17px) saturate(165%) brightness(.38);
            backdrop-filter: blur(17px) saturate(165%) brightness(.38);
}

/* Kan de browser niet door de pil heen kijken, dan valt hij terug op inkt —
   liever een vlakke pil dan een onleesbaar woord. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dc-card__badge--live { background: var(--dc-ink); }
}

.dc-card__badge--live > span {
    color: #fff;
    letter-spacing: .16em;
}

/* Klikvlak op de vensters achter de stapel. Het voorste venster laat de klik
   met rust: daar hoort de knop in de tekst bij. */
.dcx .dc-card__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: inherit;
    cursor: pointer;
}

.dc-card.is-active .dc-card__hit { pointer-events: none; }

/* --- Afsluiter ------------------------------------------------------------ */

.dc-cases__more {
    margin-top: clamp(48px, 5vw, 84px);
    padding-top: clamp(24px, 2.4vw, 34px);
    border-top: 1px solid var(--dc-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dc-cases__more .dcx-h4 {
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -.028em;
}

/* --- Smaller: de stapel onder de tekst ------------------------------------ */

@media (max-width: 1080px) {
    .dc-cases__split {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(40px, 7vw, 64px);
    }

    .dc-cases .dcx-lede { max-width: 52ch; }

    .dc-cases__deck { max-width: 720px; }
    .dc-card { width: 88%; }
    .dc-deck { aspect-ratio: 1.22; }
}

@media (max-width: 620px) {
    .dc-cases__bar {
        flex-wrap: wrap;
        gap: 16px;
    }

    .dc-cases__ticks { order: 3; flex-basis: 100%; }

    .dc-cases__count { flex: 1; }

    .dc-panel__metrics {
        grid-auto-flow: row;
        gap: 12px;
    }

    .dc-panel__metric + .dc-panel__metric {
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--dc-line);
    }

    .dc-panel__cta .dcx-btn { width: 100%; }

    .dc-cases__more { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-card,
    .dc-card__veil,
    .dc-card__badge,
    .dc-panel { transition-duration: .01ms; }

    .dc-card__badge i { animation: none; }

    .dc-card.is-active:hover .dc-card__img { transform: none; }
}

/* ==========================================================================
   11. VOOR / NA SLIDER
   ========================================================================== */

.dc-ba__grid {
    margin-top: clamp(36px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .78fr);
    gap: clamp(28px, 3.5vw, 56px);
    align-items: center;
}

.dc-ba__stage {
    position: relative;
    border-radius: var(--dc-r-lg);
    overflow: hidden;
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
    background: var(--dc-surface);
    touch-action: pan-y;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: ew-resize;
}

.dc-ba__layer { position: relative; display: block; }

.dc-ba__layer img { width: 100%; height: auto; display: block; }

/* Bovenste laag ("na") wordt weggeklipt door de slider */
.dc-ba__layer--after {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    clip-path: inset(0 0 0 var(--dc-ba-pos, 50%));
}

.dc-ba__layer--after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-ba__tag {
    position: absolute;
    top: 14px;
    z-index: 4;
    padding: 6px 12px;
    border-radius: var(--dc-r-pill);
    font-family: var(--dc-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    pointer-events: none;
}

.dc-ba__tag--before { left: 14px; background: rgba(18, 21, 28, .78); color: #fff; }
.dc-ba__tag--after { right: 14px; background: rgba(var(--dc-blue-rgb), .95); color: #fff; }

/* Handvat */
.dc-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--dc-ba-pos, 50%);
    width: 2px;
    z-index: 5;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(18, 21, 28, .12);
    transform: translateX(-1px);
    pointer-events: none;
}

.dc-ba__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--dc-blue);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .22);
    transform: translate(-50%, -50%);
}

.dc-ba__knob svg { width: 20px; height: 20px; }

/* Onzichtbare, wel toetsenbord-bereikbare besturing */
.dc-ba__range {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
}

.dc-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.dc-ba__range::-moz-range-thumb { width: 46px; height: 100px; border: 0; background: transparent; }
.dc-ba__range:focus-visible + .dc-ba__handle .dc-ba__knob { outline: 2px solid var(--dc-blue); outline-offset: 3px; }

.dc-ba__hint {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-ba__hint svg { width: 14px; height: 14px; }

/* Kolom met verschillen */
.dc-ba__panel > * + * { margin-top: 26px; }

.dc-ba__delta { display: grid; gap: 0; border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg); overflow: hidden; background: var(--dc-surface); }

.dc-ba__delta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-ba__delta-row:last-child { border-bottom: 0; }

.dc-ba__delta-label {
    grid-column: 1 / -1;
    font-family: var(--dc-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dc-faint);
    margin-bottom: -6px;
}

.dc-ba__from { font-size: .875rem; color: var(--dc-muted); text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, .5); }
.dc-ba__arrow { color: var(--dc-faint); display: grid; place-items: center; }
.dc-ba__arrow svg { width: 14px; height: 14px; }
.dc-ba__to { font-size: .9375rem; font-weight: 600; color: var(--dc-ink); text-align: right; }

.dc-ba__note {
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--dc-faint);
    padding-left: 14px;
    border-left: 2px solid var(--dc-line);
}

@media (max-width: 980px) {
    .dc-ba__grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
    .dc-ba__delta-row { grid-template-columns: auto 1fr; gap: 8px 10px; }
    .dc-ba__from { grid-column: 1 / -1; }
    .dc-ba__to { text-align: left; }
    .dc-ba__arrow { transform: rotate(90deg); }
}

/* ==========================================================================
   12. WEBSITETRAJECT — wit podium
   --------------------------------------------------------------------------
   Geen donkere collage meer, maar hetzelfde witte canvas als de rest van de
   pagina. Links de belofte in diepe inkt met de genummerde schijfjes eronder,
   rechts de merkfilm in het browservenster dat ook de previewsectie gebruikt.
   Daaronder de optelsom als brede balk en het traject in stappen.

   Beweging draagt het verhaal: de kolommen komen na elkaar binnen, de rail
   onder de schijfjes trekt zich open, een lichtstreep glijdt één keer over het
   venster, het spoor kleurt blauw en het accent in de kop wordt onderstreept.
   Bij prefers-reduced-motion zet de globale regel in blok 7 alles stil.

   Opbouw: mobiel stapelt alles onder elkaar (leesvolgorde = DOM-volgorde);
   vanaf 1080px staan kop en venster naast elkaar.
   ========================================================================== */

.dc-journey {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--dc-surface);
}

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

/* Eén zachte blauwe gloed achter het venster. Geeft het witte vlak diepte
   zonder een tweede kleur te introduceren — en ademt heel langzaam mee. */
.dc-journey__aura {
    position: absolute;
    z-index: 0;
    top: -14%;
    right: -12%;
    width: min(82vw, 1080px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
                rgba(var(--dc-blue-rgb), .13) 0%,
                rgba(var(--dc-blue-rgb), .05) 44%,
                transparent 70%);
    animation: dc-journey-breathe 18s var(--dc-ease) infinite;
}

@keyframes dc-journey-breathe {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .85; }
    50%      { transform: scale(1.09) translate3d(-2%, 3%, 0); opacity: 1; }
}

/* --- Het podium ----------------------------------------------------------- */

.dc-stage {
    display: grid;
    gap: clamp(34px, 4vw, 56px);
    align-items: center;
}

/* --- De kop ---------------------------------------------------------------- */

.dc-stage__title {
    margin-top: clamp(18px, 2.2vw, 28px);
    max-width: 16ch;
    font-family: var(--dc-font);
    font-size: clamp(2.125rem, 4.1vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -.038em;
    font-weight: 700;
    color: var(--dc-ink);
    text-wrap: balance;
}

/* Het accent krijgt een streep die zich pas trekt als de kop in beeld staat.
   Als achtergrond, niet als ::after — dan blijft het kloppen wanneer het
   accent over twee regels breekt. */
.dc-journey .dcx-accent {
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 .085em;
    transition: background-size .9s var(--dc-ease) .35s;
}

.dc-stage__copy.is-in .dcx-accent,
.no-js .dc-journey .dcx-accent { background-size: 100% .085em; }

.dc-stage__note {
    margin-top: clamp(16px, 1.8vw, 22px);
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--dc-muted);
}

/* --- Genummerde schijfjes -------------------------------------------------- */

.dc-stage__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: clamp(28px, 3vw, 40px);
}

/* De rail waarop de schijfjes staan, trekt zich open van links naar rechts. */
.dc-stage__chips::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, var(--dc-line) 0%, var(--dc-line) 62%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s var(--dc-ease) .2s;
}

.dc-stage__copy.is-in .dc-stage__chips::before,
.no-js .dc-stage__chips::before { transform: none; }

.dc-stage__chips li {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-sm);
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--dc-muted);
    opacity: 0;
    transform: translateY(10px) scale(.86);
    transition: opacity .5s var(--dc-ease), transform .5s var(--dc-ease);
    transition-delay: calc(var(--dc-i, 0) * 70ms + 280ms);
}

.is-in .dc-stage__chips li { opacity: 1; transform: none; }
.no-js .dc-stage__chips li { opacity: 1; transform: none; }

.dc-stage__chips li:first-child {
    background: var(--dc-blue);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--dc-shadow-blue);
}

/* --- Het venster ----------------------------------------------------------- */

.dc-stage__media { position: relative; }

/* De reveal van deze kolom schaalt mee: het venster komt naar je toe in
   plaats van alleen omhoog. Beide regels expliciet, want ze delen hun
   specificiteit met .dcx-reveal.is-in uit blok 7. */
.dc-stage__media.dcx-reveal { transform: translateY(26px) scale(.965); }
.dc-stage__media.dcx-reveal.is-in { transform: none; }

.dc-journey__frame {
    position: relative;
    z-index: 1;
    transition: transform var(--dc-slow) var(--dc-ease), box-shadow var(--dc-slow) var(--dc-ease);
}

.dc-journey__frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 38px 78px -28px rgba(16, 24, 40, .28), 0 8px 22px -10px rgba(16, 24, 40, .08);
}

.dc-stage__film,
.dc-stage__blueprint {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Eén lichtstreep die over het venster glijdt zodra het in beeld komt. */
.dc-stage__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .4) 48%, transparent 62%);
    transform: translateX(-120%);
}

.dc-stage__media.is-in .dc-stage__sheen {
    animation: dc-journey-sheen 1.6s var(--dc-ease) .45s 1;
}

@keyframes dc-journey-sheen {
    0%   { transform: translateX(-120%); opacity: 0; }
    16%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* Het glazen balkje in het venster: de knop bedient de film, het label
   vertelt wat je ziet. */
.dc-stage__control {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 8px;
    border-radius: var(--dc-r-pill);
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--dc-shadow-lg);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--dc-ease) .55s, transform .6s var(--dc-ease) .55s;
}

.dc-stage__media.is-in .dc-stage__control,
.no-js .dc-stage__control { opacity: 1; transform: none; }

.dcx .dc-stage__play {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-blue);
    color: #fff;
    box-shadow: var(--dc-shadow-blue);
    transition: transform var(--dc-fast) var(--dc-ease), background var(--dc-fast) var(--dc-ease);
}

.dcx .dc-stage__play:hover { transform: scale(1.08); background: var(--dc-blue-deep); }

.dcx .dc-stage__play--static {
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    box-shadow: none;
}

.dc-stage__glyph { display: grid; place-items: center; }

.dc-stage__icon { width: 16px; height: 16px; }

/* Draait de film, dan biedt de knop pauze aan — en andersom. */
.dc-stage__icon--play { display: none; }
.dc-stage__play[aria-pressed="false"] .dc-stage__icon--pause { display: none; }
.dc-stage__play[aria-pressed="false"] .dc-stage__icon--play { display: block; }

.dc-stage__mark { width: 22px; height: 16px; }

.dc-stage__label {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--dc-ink);
    white-space: nowrap;
}

/* --- Het spoor onder het venster -------------------------------------------
   Van de eerste stap naar de laatste. De stippellijn kleurt blauw zodra de
   sectie in beeld staat. Decoratief: het echte traject staat eronder. */

.dc-stage__route {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(14px, 1.6vw, 20px);
    padding: 8px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-bg-tint);
    border: 1px solid var(--dc-line);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s var(--dc-ease) .7s, transform .6s var(--dc-ease) .7s;
}

.dc-stage__media.is-in .dc-stage__route,
.no-js .dc-stage__route { opacity: 1; transform: none; }

.dc-stage__pin {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 6px 16px 6px 6px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-sm);
}

.dc-stage__pin i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
}

.dc-stage__pin i svg { width: 15px; height: 15px; }

.dc-stage__pin--end i { background: var(--dc-green-soft); color: #0d9668; }

.dc-stage__pin b {
    font-family: var(--dc-font);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.008em;
    color: var(--dc-ink);
    white-space: nowrap;
}

.dc-stage__dash {
    position: relative;
    flex: 1;
    min-width: 30px;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--dc-line) 0 6px, transparent 6px 12px);
}

.dc-stage__dash::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg, rgba(var(--dc-blue-rgb), .9) 0 6px, transparent 6px 12px);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--dc-ease) .9s;
}

.dc-stage__media.is-in .dc-stage__dash::after,
.no-js .dc-stage__dash::after { transform: none; }

/* --- De optelsom als brede balk ---------------------------------------------
   Een optelsom leest van links naar rechts, dus staan de onderdelen als
   kolommen naast elkaar. De haarlijnen ertussen komen uit de 1px gaten in het
   raster — daardoor kloppen ze ook als de rij afbreekt. */

.dc-spec {
    margin-top: clamp(48px, 5.5vw, 88px);
    border-radius: clamp(var(--dc-r-lg), 2vw, var(--dc-r-xl));
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow);
    overflow: hidden;
}

.dc-spec__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px);
    border-bottom: 1px solid var(--dc-line);
}

.dc-spec__head {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: var(--dc-font);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.018em;
    color: var(--dc-ink);
}

.dc-spec__seal {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
}

.dc-spec__seal .dc-mark { width: 22px; height: 16px; }

/* De uitkomst is het enige verzadigde vlak in de sectie — daar moet het oog
   landen, en daar zit ook de pijl naar het gesprek. */
.dc-spec__stat {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 9px 9px 9px 22px;
    border-radius: var(--dc-r-pill);
    background: linear-gradient(118deg, var(--dc-blue) 0%, var(--dc-blue-deep) 100%);
    box-shadow: var(--dc-shadow-blue);
}

.dc-spec__stat > span { display: grid; gap: 1px; }

.dc-spec__stat i {
    font-style: normal;
    font-family: var(--dc-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.dc-spec__stat b {
    font-family: var(--dc-font);
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 700;
    letter-spacing: -.026em;
    color: #fff;
}

.dc-spec__go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    color: var(--dc-blue);
    transition: transform var(--dc-mid) var(--dc-ease), background var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-spec__go svg {
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-spec__go:hover {
    background: var(--dc-ink);
    color: #fff;
    transform: scale(1.06);
}

.dc-spec__go:hover svg { transform: rotate(0deg); }

/* Flex in plaats van grid: breekt de rij af, dan groeit wat overblijft door
   tot de volle breedte. Zo blijft er nooit een half gevulde rasterrij staan. */
.dc-spec__rows {
    display: flex;
    flex-wrap: wrap;
    background: var(--dc-surface);
}

.dc-spec__rows li {
    flex: 1 1 190px;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 2px 14px;
    padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 24px);
    background: var(--dc-surface);
    /* Haarlijnen als schaduw, niet als gaten in het raster: breekt de rij af,
       dan blijven de lege cellen wit in plaats van dat de rasterkleur
       doorschijnt. De lijnen aan de rand vallen buiten de kaart en worden
       door de overflow weggeknipt. */
    box-shadow: -1px 0 0 var(--dc-line-soft), 0 -1px 0 var(--dc-line-soft);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--dc-ease), transform .55s var(--dc-ease), background var(--dc-mid) var(--dc-ease);
    transition-delay: calc(var(--dc-i, 0) * 90ms + 180ms);
}

.is-in .dc-spec__rows li { opacity: 1; transform: none; }
.no-js .dc-spec__rows li { opacity: 1; transform: none; }

.dc-spec__rows li:hover { background: var(--dc-bg-tint); }

.dc-spec__ico {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    transition: transform var(--dc-mid) var(--dc-ease), background var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-spec__rows li:hover .dc-spec__ico {
    transform: translateY(-2px) scale(1.06);
    background: var(--dc-blue);
    color: #fff;
}

.dc-spec__ico svg { width: 19px; height: 19px; }

.dc-spec__rows b {
    font-family: var(--dc-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.016em;
    color: var(--dc-ink);
}

.dc-spec__rows i {
    font-style: normal;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--dc-faint);
    min-width: 0;
}

/* --- Het traject onder de optelsom ------------------------------------------ */

.dc-journey__foot { margin-top: clamp(56px, 6vw, 100px); }

.dc-journey__foot .dcx-eyebrow { color: var(--dc-blue); }

.dc-journey__steps {
    position: relative;
    margin-top: clamp(28px, 3vw, 44px);
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
}

/* Het spoor: een haarlijn die zich vult met de scrollpositie. */
.dc-journey__steps::before,
.dc-journey__steps::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
}

.dc-journey__steps::before {
    width: 100%;
    background: var(--dc-line);
}

.dc-journey__steps::after {
    width: var(--dc-progress, 0%);
    background: linear-gradient(90deg, var(--dc-blue) 0%, #4aa3f5 100%);
    transition: width .2s linear;
}

.dc-step {
    position: relative;
    display: flex;
    gap: 16px;
    padding: clamp(20px, 2.1vw, 28px);
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--dc-ease), transform .6s var(--dc-ease), border-color var(--dc-mid) var(--dc-ease), box-shadow var(--dc-mid) var(--dc-ease);
    transition-delay: calc(var(--dc-i, 0) * 90ms);
}

.dc-step.is-in,
.is-in .dc-step { opacity: 1; transform: none; }
.no-js .dc-step { opacity: 1; transform: none; }

/* Na de reveal-regels, anders wint 'transform: none' van de hover. */
.dc-step:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--dc-blue-rgb), .38);
    box-shadow: var(--dc-shadow-lg);
}

.dc-step__num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    font-family: var(--dc-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: transform var(--dc-mid) var(--dc-ease), background var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-step:hover .dc-step__num {
    transform: scale(1.06);
    background: var(--dc-blue);
    color: #fff;
}

.dc-step__body { display: grid; gap: 8px; align-content: start; }

.dc-step__title {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--dc-ink);
}

.dc-step__text {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--dc-muted);
}

.dc-step__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-step__meta svg { width: 13px; height: 13px; color: var(--dc-green); flex: none; }

.dc-journey__act {
    margin-top: clamp(40px, 4.5vw, 68px);
    text-align: center;
}

/* --- De compositie ---------------------------------------------------------- */

@media (min-width: 1080px) {
    .dc-stage {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: clamp(44px, 4.6vw, 88px);
    }
}

@media (max-width: 1079px) {
    .dc-stage__title { max-width: 20ch; }
    .dc-stage__note { max-width: 60ch; }
}

@media (max-width: 900px) {
    .dc-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dc-journey__steps { grid-template-columns: 1fr; }

    .dc-spec__rows li { flex-basis: 100%; }

    /* De uitkomst pakt de volle breedte, met de pijl aan het eind. */
    .dc-spec__top { align-items: stretch; }
    .dc-spec__stat { justify-content: space-between; }

    .dc-stage__chips li { width: 36px; height: 36px; font-size: 11px; }

    .dc-stage__control {
        left: 10px;
        bottom: 10px;
        gap: 9px;
        padding: 6px 15px 6px 6px;
    }

    .dc-stage__play { width: 34px; height: 34px; }
    .dc-stage__label { font-size: .875rem; }

    /* Zonder ruimte naast elkaar staan de punten onder elkaar, met de
       stippellijn rechtop ertussen. */
    .dc-stage__route {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        border-radius: var(--dc-r-lg);
    }

    .dc-stage__pin b { white-space: normal; }

    .dc-stage__dash {
        flex: none;
        align-self: center;
        width: 2px;
        min-width: 0;
        height: 18px;
        background: repeating-linear-gradient(180deg, var(--dc-line) 0 5px, transparent 5px 10px);
    }

    .dc-stage__dash::after {
        background: repeating-linear-gradient(180deg, rgba(var(--dc-blue-rgb), .9) 0 5px, transparent 5px 10px);
        transform: scaleY(0);
        transform-origin: top;
    }
}

/* Scroll-gestuurde animatie waar de browser die kent: het beeld in het venster
   pant heel licht mee terwijl de sectie voorbijkomt. Puur extra — zonder
   ondersteuning staat het beeld gewoon stil. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .dc-journey__frame .dc-frame__media video,
        .dc-journey__frame .dc-frame__media img {
            animation: dc-journey-pan linear both;
            animation-timeline: view();
            animation-range: entry 15% exit 95%;
        }
    }
}

@keyframes dc-journey-pan {
    from { transform: scale(1.1) translateY(-1.6%); }
    to   { transform: scale(1.02) translateY(1.6%); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-journey__aura { animation: none; }
    .dc-journey__steps::after { transition: none; }
    .dc-stage__sheen { display: none; }
    .dc-journey .dcx-accent { background-size: 100% .085em; }
    .dc-stage__chips::before { transform: none; }
    .dc-stage__dash::after { transform: none; }
}

/* ==========================================================================
   13. SEO / GEO / CONVERSIE — één systeem
   --------------------------------------------------------------------------
   Geen rij iconen met losse termen, maar één beeld: de website in het midden
   en drie sporen die eruit lopen. Aanwijzen laat zien welk spoor waar
   aangrijpt. De lijnen zijn SVG, de tekst gewoon tekst.
   ========================================================================== */

.dc-growth__system {
    margin-top: clamp(48px, 5vw, 80px);
}

/* --- Het scherm in het midden --------------------------------------------- */

.dc-growth__screen {
    position: relative;
    width: min(100%, 620px);
    margin-inline: auto;
}

.dc-growth__shot {
    border-radius: var(--dc-r-xl);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
    background: var(--dc-surface);
}

.dc-growth__shot img {
    width: 100%;
    height: auto;
    display: block;
}

.dc-growth__hub {
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    padding: 8px 20px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-ink);
    color: #fff;
    font-family: var(--dc-font);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    box-shadow: var(--dc-shadow);
}

/* --- De waaier ------------------------------------------------------------- */

.dc-growth__fan {
    display: block;
    width: 100%;
    height: clamp(70px, 8vw, 110px);
    margin-top: 26px;
    overflow: visible;
}

.dc-fan__line { stroke: var(--dc-line); transition: stroke var(--dc-mid) var(--dc-ease); }

.dc-fan__flow {
    stroke: var(--dc-blue);
    stroke-dasharray: 24 300;
    stroke-dashoffset: 324;
    opacity: .9;
    animation: dc-fan-flow 3.4s linear infinite;
    animation-delay: calc(var(--dc-i, 0) * .45s);
}

.dc-fan__wire[data-dc-wire="1"] .dc-fan__flow { stroke: var(--dc-graphite); }
.dc-fan__wire[data-dc-wire="2"] .dc-fan__flow { stroke: var(--dc-green); }

@keyframes dc-fan-flow { to { stroke-dashoffset: 0; } }

/* Aanwijzen: alleen het gekozen spoor blijft aan. */
.dc-growth__system.is-focused .dc-fan__wire { opacity: .25; }
.dc-fan__wire.is-lit { opacity: 1 !important; }
.dc-fan__wire.is-lit .dc-fan__line { stroke: rgba(var(--dc-blue-rgb), .55); }

/* --- De drie sporen -------------------------------------------------------- */

.dc-growth__legs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
}

.dc-leg {
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    transition: border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease),
                transform var(--dc-mid) var(--dc-ease);
}

.dc-leg:hover,
.dc-leg:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--dc-shadow-lg);
    border-color: rgba(var(--dc-blue-rgb), .35);
}

.dc-growth__system.is-focused .dc-leg { opacity: .5; }
.dc-growth__system.is-focused .dc-leg:hover,
.dc-growth__system.is-focused .dc-leg:focus-visible { opacity: 1; }

.dc-leg__name {
    font-family: var(--dc-font);
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.026em;
    color: var(--dc-ink);
}

/* Een streepje in de spoorkleur onder de naam: hetzelfde signaal als de lijn. */
.dc-leg__name::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--dc-blue);
}

.dc-leg--graphite .dc-leg__name::after { background: var(--dc-graphite); }
.dc-leg--green  .dc-leg__name::after { background: var(--dc-green); }

.dc-leg__text {
    margin-top: 16px;
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--dc-muted);
}

.dc-leg__q {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--dc-line-soft);
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    font-style: italic;
    color: var(--dc-blue);
}

.dc-leg--graphite .dc-leg__q { color: var(--dc-graphite); }
.dc-leg--green  .dc-leg__q { color: #0a7f5c; }

.dc-growth__claim {
    margin-top: clamp(38px, 4vw, 56px);
    text-align: center;
    font-family: var(--dc-font);
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--dc-ink);
    text-wrap: balance;
}

@media (max-width: 860px) {
    .dc-growth__legs { grid-template-columns: 1fr; }

    /* De waaier heeft drie kolommen nodig om te kloppen; op één kolom is een
       enkele verbindingslijn eerlijker dan een verhaal dat niet meer klopt. */
    .dc-growth__fan { height: 46px; }
    .dc-fan__wire[data-dc-wire="0"],
    .dc-fan__wire[data-dc-wire="2"] { display: none; }
    .dc-growth__hub { position: static; transform: none; display: inline-block; margin-top: 16px; }
    .dc-growth__screen { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-fan__flow { animation: none; opacity: 0; }
}

/* ==========================================================================
   14. AI & AUTOMATISERING  (design013 — licht canvas, blauwe illustratie)

   Links de boodschap: blauw label, zware kop, korte intro, twee knoppen.
   Rechts geen plaatje maar echte UI — een browservenster waarin de gekozen
   werkstroom draait, met daaromheen een telefoon, twee blauwe icoontegels,
   een zwevend kaartje, gestippelde verbindingen en een groot tandwiel.
   ========================================================================== */

.dc-auto {
    background:
        radial-gradient(70% 60% at 88% 6%, rgba(var(--dc-blue-rgb), .07) 0%, transparent 60%),
        radial-gradient(60% 55% at 2% 94%, rgba(var(--dc-blue-rgb), .05) 0%, transparent 62%),
        var(--dc-surface);
    color: var(--dc-muted);
}

/* ------------------------------------------------------------------ split */

.dc-auto__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(40px, 5vw, 76px);
    align-items: center;
}

.dc-auto__title {
    margin-top: clamp(14px, 1.6vw, 22px);
    font-family: var(--dc-font);
    font-size: clamp(2.25rem, 3.9vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.038em;
    color: #0b0e16;
    text-wrap: balance;
}

.dc-auto__title .dcx-accent { color: var(--dc-blue); }

.dc-auto__lede {
    margin-top: clamp(18px, 2vw, 26px);
    max-width: 44ch;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--dc-muted);
    text-wrap: pretty;
}

.dc-auto__actions {
    margin-top: clamp(28px, 3vw, 42px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* ------------------------------------------------------------ illustratie */

/* De padding is de speelruimte: daarin steken telefoon, tegels en kaartje
   buiten het venster, precies zoals in design013. */
.dc-auto__art {
    position: relative;
    padding: 120px 42px 58px 38px;
}

.dc-auto__gear {
    position: absolute;
    top: -12px;
    left: 16%;
    width: min(266px, 44%);
    color: #eaeef7;
    z-index: 0;
    pointer-events: none;
}

.dc-auto__gear svg { width: 100%; height: auto; }

.dc-auto__wire {
    position: absolute;
    border: 1.5px dashed #d6dcec;
    border-radius: 28px;
    z-index: 1;
    pointer-events: none;
}

.dc-auto__wire--a {
    left: 4px;
    top: 126px;
    width: 52%;
    height: calc(100% - 148px);
    border-right-color: transparent;
}

.dc-auto__wire--b {
    right: 6px;
    top: 186px;
    width: 46%;
    height: calc(100% - 196px);
    border-left-color: transparent;
}

.dc-auto__dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--dc-blue);
    box-shadow: 0 0 0 4px var(--dc-surface);
    z-index: 5;
    pointer-events: none;
}

.dc-auto__dot--1 { left: -3px; top: 120px; }
.dc-auto__dot--2 { left: -3px; bottom: 49px; }
.dc-auto__dot--3 { right: -1px; top: 180px; }
.dc-auto__dot--4 { right: -1px; bottom: 37px; }

/* Telefoon rechtsboven — steekt boven het venster uit. */
.dc-auto__phone {
    position: absolute;
    top: 0;
    right: 10px;
    width: 134px;
    padding: 12px 11px 16px;
    display: grid;
    gap: 8px;
    border-radius: 24px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-lg);
    z-index: 3;
}

.dc-auto__phone-notch {
    justify-self: center;
    width: 40px;
    height: 4px;
    border-radius: var(--dc-r-pill);
    background: #e6eaf1;
    margin-bottom: 2px;
}

.dc-auto__block { display: block; height: 62px; border-radius: 10px; background: var(--dc-blue); }
.dc-auto__bar { display: block; height: 8px; border-radius: var(--dc-r-pill); background: #e9edf5; }
.dc-auto__bar--dark { width: 84%; background: #c6cddc; }
.dc-auto__bar--short { width: 56%; }

.dc-auto__pill { display: block; width: 48px; height: 14px; border-radius: var(--dc-r-pill); background: var(--dc-blue); }

/* Blauwe icoontegels */
.dc-auto__tile {
    position: absolute;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--dc-blue);
    color: #fff;
    box-shadow: 0 18px 34px -14px rgba(var(--dc-blue-rgb), .65);
    z-index: 4;
}

.dc-auto__tile svg { width: 26px; height: 26px; }
.dc-auto__tile--code { top: 214px; left: -12px; }
.dc-auto__tile--gear { bottom: 0; left: 68px; }

/* Zwevend kaartje rechtsonder */
.dc-auto__mini {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 146px;
    padding: 16px;
    display: grid;
    gap: 9px;
    border-radius: 18px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-lg);
    z-index: 4;
}

.dc-auto__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dc-blue);
    margin-bottom: 3px;
}

/* --------------------------------------------------------- browservenster */

.dc-auto__window {
    position: relative;
    z-index: 2;
    border-radius: var(--dc-r-xl);
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
}

.dc-auto__chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 132px 14px 18px;
    border-bottom: 1px solid var(--dc-line-soft);
    background: var(--dc-bg);
}

.dc-auto__lights { display: inline-flex; gap: 6px; flex: none; }
.dc-auto__lights i { width: 10px; height: 10px; border-radius: 50%; }
.dc-auto__lights i:nth-child(1) { background: #f0787c; }
.dc-auto__lights i:nth-child(2) { background: #f5c451; }
.dc-auto__lights i:nth-child(3) { background: #5ec97f; }

.dc-auto__url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    color: var(--dc-faint);
}

.dc-auto__live {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--dc-font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #0a8f65;
}

.dc-auto__live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb), .6);
    animation: dc-pulse 2.4s var(--dc-ease) infinite;
}

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

/* Keuzelijst met werkstromen — als chips in de werkbalk van het venster */
.dc-auto__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--dc-line-soft);
    background: var(--dc-surface);
}

/* Let op de .dcx ervoor: zonder die extra klasse wint de knop-reset
   uit blok 2 (.dcx button) en verliest de chip zijn padding, rand en vlak.
   De rest van de knoppen in dit bestand staat om dezelfde reden zo. */
.dcx .dc-auto__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--dc-r-pill);
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-ink-soft);
    font-family: var(--dc-font);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-align: left;
    /* Krimpen mag: een lange procesnaam moet binnen het venster blijven,
       want dat venster snijdt alles af wat erbuiten valt. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                color var(--dc-fast) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

.dcx .dc-auto__tab:hover { border-color: rgba(var(--dc-blue-rgb), .42); color: var(--dc-blue); }

.dcx .dc-auto__tab[aria-selected="true"] {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--dc-blue-rgb), .85);
}

.dc-auto__tab-ico { display: grid; place-items: center; color: var(--dc-blue); flex: none; }
.dc-auto__tab-ico svg { width: 15px; height: 15px; }
.dc-auto__tab[aria-selected="true"] .dc-auto__tab-ico { color: #fff; }
.dc-auto__tab-title { color: inherit; }

/* Het scherm zelf */
.dc-auto__screen {
    position: relative;
    padding: clamp(20px, 2.4vw, 28px);
    min-height: 300px;
    background:
        radial-gradient(rgba(16, 24, 40, .05) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--dc-bg);
}

.dc-auto__panel { position: relative; display: none; }
.dc-auto__panel.is-active { display: block; }

.dc-auto__panel-head { margin-bottom: 18px; }

.dc-auto__panel-title {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dc-ink);
}

.dc-auto__panel-sub { margin-top: 4px; font-size: .8125rem; line-height: 1.5; color: var(--dc-faint); }

.dc-flowchain {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* Kaarten binnen één rij even hoog, maar de rijen zelf niet uitrekken
       tot de hoogte van het paneel — dat gaf halflege kaarten. */
    align-content: flex-start;
    gap: 10px;
}

.dc-node {
    position: relative;
    flex: 1 1 146px;
    min-width: 136px;
    padding: 15px;
    border-radius: var(--dc-r);
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-sm);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-node-in .55s var(--dc-ease) forwards;
    animation-delay: var(--dc-delay, 0ms);
}

@keyframes dc-node-in {
    to { opacity: 1; transform: none; }
}

/* De werkstroom mag pas gaan lopen zodra het blok in beeld komt. Zonder deze
   pauze is de animatie allang afgelopen tegen de tijd dat iemand er is: de
   stappen staan er dan gewoon, en het effect gaat verloren. */
.dcx-reveal:not(.is-in) .dc-node,
.dcx-reveal:not(.is-in) .dc-flowchain__arrow { animation-play-state: paused; }

.dc-node--trigger { border-color: rgba(var(--dc-blue-rgb), .3); }
.dc-node--ai { border-color: rgba(var(--dc-graphite-rgb), .3); background: var(--dc-graphite-soft); }
.dc-node--human { border-color: rgba(245, 158, 11, .34); background: var(--dc-amber-soft); }
.dc-node--done { border-color: rgba(var(--dc-green-rgb), .34); background: var(--dc-green-soft); }

.dc-node__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    margin-bottom: 11px;
}

.dc-node__ico svg { width: 15px; height: 15px; }
.dc-node--ai .dc-node__ico { background: rgba(var(--dc-graphite-rgb), .16); color: var(--dc-graphite); }
.dc-node--human .dc-node__ico { background: rgba(245, 158, 11, .2); color: #b1730a; }
.dc-node--done .dc-node__ico { background: rgba(var(--dc-green-rgb), .16); color: #0a8f65; }

.dc-node__kind {
    font-family: var(--dc-font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-node__title { margin-top: 5px; font-family: var(--dc-font); font-size: .875rem; font-weight: 600; color: var(--dc-ink); letter-spacing: -.01em; line-height: 1.3; }
.dc-node__desc { margin-top: 6px; font-size: .78125rem; line-height: 1.45; color: var(--dc-muted); }

/* Pijl tussen nodes */
.dc-flowchain__arrow {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    color: #c2cbda;
    opacity: 0;
    animation: dc-node-in .5s var(--dc-ease) forwards;
    animation-delay: var(--dc-delay, 0ms);
}

.dc-flowchain__arrow svg { width: 16px; height: 16px; }

.dc-auto__panel-foot {
    margin-top: 22px;
    padding-top: 18px;
    padding-right: 116px;
    border-top: 1px solid var(--dc-line);
    display: flex;
    flex-wrap: wrap;
    gap: 9px 24px;
}

.dc-auto__win {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--dc-ink-soft);
}

.dc-auto__win svg { width: 15px; height: 15px; color: var(--dc-green); flex: none; }

/* ---------------------------------------------------------------- voor/na */

.dc-auto__ba {
    margin-top: clamp(56px, 6vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
}

.dc-auto__ba-card {
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--dc-r-xl);
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow);
}

.dc-auto__ba-card--after {
    border-color: rgba(var(--dc-green-rgb), .3);
    background: linear-gradient(180deg, var(--dc-green-soft) 0%, var(--dc-surface) 62%);
}

.dc-auto__ba-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-auto__ba-title { font-family: var(--dc-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dc-faint); }
.dc-auto__ba-card--after .dc-auto__ba-title { color: #0a8f65; }

.dc-auto__ba-time { font-family: var(--dc-font); font-size: 1.125rem; font-weight: 700; color: var(--dc-ink); letter-spacing: -.02em; }

.dc-auto__ba-list { display: grid; gap: 10px; }

.dc-auto__ba-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--dc-muted);
}

.dc-auto__ba-list li svg { width: 15px; height: 15px; margin-top: 3px; flex: none; }
.dc-auto__ba-card--before li svg { color: var(--dc-red); }
.dc-auto__ba-card--after li svg { color: var(--dc-green); }

.dc-auto__ba-mid {
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
}

.dc-auto__ba-mid span {
    font-family: var(--dc-font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-faint);
    max-width: 12ch;
    line-height: 1.6;
}

.dc-auto__ba-mid i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dc-blue);
    color: #fff;
    box-shadow: 0 14px 28px -12px rgba(var(--dc-blue-rgb), .7);
}

.dc-auto__ba-mid svg { width: 19px; height: 19px; }

@media (max-width: 1120px) {
    .dc-auto__hero { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 72px); }
    .dc-auto__lede { max-width: 58ch; }
    .dc-auto__art { max-width: 760px; }
}

@media (max-width: 860px) {
    .dc-auto__ba { grid-template-columns: minmax(0, 1fr); }
    .dc-auto__ba-mid i { transform: rotate(90deg); }
}

/* Op smalle schermen valt het decor weg: het venster met de werkstroom
   is het enige dat er dan nog toe doet. */
@media (max-width: 720px) {
    .dc-auto__art { padding: 0; }
    .dc-auto__chrome { padding-right: 18px; }
    .dc-auto__panel-foot { padding-right: 0; }
    .dc-auto__gear,
    .dc-auto__wire,
    .dc-auto__dot,
    .dc-auto__phone,
    .dc-auto__tile,
    .dc-auto__mini { display: none; }
}

@media (max-width: 620px) {
    .dc-auto__tabs { padding: 12px 14px; }
    .dc-flowchain { flex-direction: column; align-items: stretch; }
    .dc-flowchain__arrow { align-self: center; transform: rotate(90deg); }
    .dc-node { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-auto__live i { animation: none; }
}

/* ==========================================================================
   15. CLAUDE TRAINING / CONSULTANCY / IMPLEMENTATIE
   ========================================================================== */

/* --- Kop: titel links, uitleg en onderwerpen rechts --------------------- */

.dc-aiserv__head {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
}

.dc-aiserv__head-main > * + * { margin-top: 20px; }
.dc-aiserv__head-aside > * + * { margin-top: 22px; }

.dc-aiserv__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dc-aiserv__topics li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--dc-r-pill);
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--dc-ink-soft);
    transition: border-color var(--dc-fast) var(--dc-ease),
                color var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dc-aiserv__topics li:hover {
    border-color: rgba(var(--dc-blue-rgb), .45);
    color: var(--dc-blue-deep);
    transform: translateY(-2px);
}

.dc-aiserv__topics li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dc-blue);
    flex: none;
}

/* --- Mozaïek: de merkfilm groot, het gesprek ernaast --------------------- */

.dc-aiserv__mosaic {
    margin-top: clamp(36px, 4.4vw, 68px);
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: stretch;
}

.dc-film,
.dc-shot {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.dc-film__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--dc-r-xl);
    overflow: hidden;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-lg);
}

.dc-film__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-film__meta {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-film__tag,
.dc-film__time,
.dcx .dc-film__btn {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(14, 22, 34, .78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--dc-r-pill);
}

.dc-film__tag,
.dc-film__time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
}

.dc-film__tag i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-blue);
    box-shadow: 0 0 0 0 rgba(var(--dc-blue-rgb), .55);
    animation: dc-film-pulse 2.4s var(--dc-ease) infinite;
    flex: none;
}

@keyframes dc-film-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--dc-blue-rgb), .55); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--dc-blue-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--dc-blue-rgb), 0); }
}

.dc-film__time { background: rgba(14, 22, 34, .6); }

.dc-film__controls {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dcx .dc-film__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 40px;
    cursor: pointer;
    transition: background var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dcx .dc-film__btn:hover { background: var(--dc-blue); transform: translateY(-1px); }

.dcx .dc-film__btn--play { width: 40px; padding: 0; justify-content: center; }

.dc-film__ico { width: 15px; height: 15px; flex: none; }
.dc-film__ico--play { fill: currentColor; stroke: none; margin-left: 2px; }
.dc-film__ico--pause { fill: currentColor; stroke: none; }

.dc-film__ico--pause,
.dc-film__ico--on { display: none; }

.dc-film.is-playing .dc-film__ico--play { display: none; }
.dc-film.is-playing .dc-film__ico--pause { display: block; }

.dc-film.is-loud .dc-film__ico--off { display: none; }
.dc-film.is-loud .dc-film__ico--on { display: block; }
.dcx .dc-film.is-loud .dc-film__btn--sound { background: var(--dc-blue); }

.dc-film__btn-text { line-height: 1; }

.dc-film__caption {
    margin-top: 16px;
    padding-left: 2px;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--dc-muted);
}

/* --- De foto ernaast: loopt door tot onder het bijschrift van de film ---- */

.dc-shot__frame {
    position: relative;
    flex: 1;
    min-height: 260px;
    border-radius: var(--dc-r-xl);
    overflow: hidden;
    border: 1px solid var(--dc-line);
    background: var(--dc-bg);
    box-shadow: var(--dc-shadow);
}

/* Het frame is hoger dan breed, de foto is liggend (3:2). Met een uitsnede
   viel een derde van het beeld weg -- inclusief de persoon links. De foto
   staat er nu volledig in (object-fit: contain); de banden die daardoor
   overblijven vullen we met een uitvergrote, onscherpe kopie van diezelfde
   foto (--dc-shot-img, gezet op het frame), zodat het kader gevuld blijft
   zonder dat er iets van het beeld afgaat.
   Absoluut gepositioneerd, anders houdt de inline afbeelding onderin een
   strip van de frame-achtergrond over. */
.dc-shot__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--dc-shot-img);
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.2);
    transform: scale(1.15);
    opacity: .5;
    pointer-events: none;
}

.dc-shot__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--dc-shot-pos, center);
    transition: transform var(--dc-slow) var(--dc-ease);
}

.dc-shot:hover .dc-shot__img { transform: scale(1.04); }

/* Geen verduisterende laag meer over de foto: het beeld moet volledig
   zichtbaar blijven. Het bijschrift krijgt in plaats daarvan een eigen,
   compacte achtergrond (zelfde taal als .dc-shot__tag). */

.dc-shot__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 7px 12px;
    border-radius: var(--dc-r-pill);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(14, 22, 34, .68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dc-shot__caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    padding: 10px 14px;
    border-radius: var(--dc-r-lg, 14px);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    background: rgba(14, 22, 34, .68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* --- De drie routes, elk met eigen beeld -------------------------------- */

.dc-aiserv__routes {
    margin-top: clamp(18px, 2vw, 26px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 22px);
}

.dc-route {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    overflow: hidden;
    transition: transform var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease);
}

.dc-route:hover {
    transform: translateY(-5px);
    box-shadow: var(--dc-shadow-lg);
    border-color: color-mix(in srgb, var(--dc-route-accent, var(--dc-blue)) 35%, var(--dc-line));
}

.dc-route__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--dc-bg-tint);
}

.dc-route__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dc-slow) var(--dc-ease);
}

.dc-route:hover .dc-route__img { transform: scale(1.045); }

/* De accentkleur van de route trekt zich bij hover over het beeld dicht. */
.dc-route__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--dc-route-accent, var(--dc-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dc-slow) var(--dc-ease);
}

.dc-route:hover .dc-route__media::after { transform: scaleX(1); }

.dc-route__num {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #fff;
}

.dc-route__media .dc-route__num {
    position: absolute;
    top: 13px;
    left: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--dc-r-pill);
    background: rgba(14, 22, 34, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dc-route__media .dc-route__num::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-route-accent, var(--dc-blue));
}

.dc-route__num--flat { color: var(--dc-route-accent, var(--dc-blue)); }

/* Zonder beeld valt de kaart terug op de smalle accentregel bovenaan. */
.dc-route--plain::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--dc-route-accent, var(--dc-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dc-slow) var(--dc-ease);
}

.dc-route--plain:hover::before { transform: scaleX(1); }

.dc-route__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(22px, 2.4vw, 32px);
}

.dc-route__title { margin-top: 0; }
.dc-route--plain .dc-route__title { margin-top: 14px; }
.dc-route__for { margin-top: 12px; font-size: .9375rem; line-height: 1.6; color: var(--dc-muted); }

.dc-route__list { margin-top: 22px; display: grid; gap: 9px; }

.dc-route__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--dc-ink-soft);
}

.dc-route__list li::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--dc-route-accent, var(--dc-blue)) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--dc-route-accent, var(--dc-blue)) 32%, #fff);
}

.dc-route__foot { margin-top: auto; padding-top: 28px; }

/* --- Responsief ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .dc-aiserv__head { grid-template-columns: 1fr; align-items: start; }
    .dc-aiserv__head-aside { margin-top: 26px; }

    .dc-aiserv__mosaic { grid-template-columns: 1fr; }
    .dc-shot__frame { flex: none; aspect-ratio: 3 / 2; min-height: 0; }

    .dc-aiserv__routes { grid-template-columns: 1fr; }

    .dc-route { flex-direction: row; align-items: stretch; }
    .dc-route__media { flex: 0 0 38%; aspect-ratio: auto; }
    .dc-route__media::after { inset: 0 auto 0 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
    .dc-route:hover .dc-route__media::after { transform: scaleY(1); }
}

@media (max-width: 640px) {
    .dc-film__caption { font-size: .875rem; }
    .dc-film__btn-text { display: none; }
    .dcx .dc-film__btn--sound { width: 40px; padding: 0; justify-content: center; }

    .dc-route { flex-direction: column; }
    .dc-route__media { flex: none; aspect-ratio: 16 / 10; }
    .dc-route__media::after { inset: auto 0 0 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
    .dc-route:hover .dc-route__media::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-shot:hover .dc-shot__img,
    .dc-route:hover .dc-route__img { transform: none; }
    .dc-film__tag i { animation: none; }
}

/* ==========================================================================
   16. WERKWIJZE
   --------------------------------------------------------------------------
   Vormgegeven naar design012, in dezelfde taal als de dienstkeuze: een
   bijna-zwart canvas met een fijn raster, een pil-label, een grote kop
   waarin één regel groen oplicht, en daaronder de stappen als collage.

   De stappen staan niet meer op één dunne lijn — die viel weg tegen het
   donkere canvas. Ze zakken nu per kolom trapsgewijs weg, zodat de route
   zichtbaar naar rechtsonder loopt. De eerste stap is paars (hier begint
   het), de laatste groen (hier staat het live); daartussen liggen rustige
   donkere panelen, zodat begin en eind het verhaal dragen.
   ========================================================================== */

.dc-way {
    /* Palet uit design012 — bewust lokaal voor deze sectie. */
    --d12-bg: #0e100f;
    --d12-panel: #151816;
    --d12-panel-2: #101211;
    --d12-line: #1c1f1e;
    --d12-green: #94f899;
    --d12-green-deep: #6ee878;
    --d12-blue: #147be1;
    --d12-blue-lift: #2f93f2;
    --d12-pill: #262626;
    --d12-cell: clamp(76px, 8vw, 124px);

    /* Hoeveel elke volgende kolom wegzakt. */
    --dc-way-drop: clamp(0px, 2.6vw, 38px);

    position: relative;
    isolation: isolate;
    background: var(--d12-bg);
    color: rgba(255, 255, 255, .64);
    overflow: hidden;
}

/* --- Canvas: raster + twee zachte gloedvlekken ---------------------------- */

.dc-way__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dc-way__canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--d12-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--d12-line) 1px, transparent 1px);
    background-size: var(--d12-cell) var(--d12-cell);
    /* Spiegelbeeld van de dienstkeuze: daar dooft het raster naar rechts weg,
       hier naar links. Twee donkere secties op één pagina mogen niet als
       hetzelfde plaatje lezen. */
    -webkit-mask-image: radial-gradient(112% 92% at 96% -6%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
            mask-image: radial-gradient(112% 92% at 96% -6%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
}

.dc-way__canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 44% at 14% 6%, rgba(75, 55, 224, .26) 0%, transparent 72%),
        radial-gradient(38% 42% at 88% 92%, rgba(148, 248, 153, .09) 0%, transparent 70%);
}

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

/* --- Kop ------------------------------------------------------------------ */

.dc-way__head {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .78fr);
    gap: clamp(28px, 5vw, 88px);
    align-items: end;
}

/* Donkere sectie: het label pakt het groen van dit palet. */
.dc-way .dcx-eyebrow { color: var(--d12-green); }

.dc-way .dcx-h2 {
    margin-top: 26px;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1.03;
    letter-spacing: -.042em;
    color: #fdfdfd;
    text-wrap: balance;
}

.dc-way .dcx-accent { color: var(--d12-green); }

.dc-way .dcx-lede {
    color: rgba(255, 255, 255, .58);
    max-width: 46ch;
}

/* Sierteken uit design012 — hetzelfde vlak als bij de dienstkeuze. */
.dc-way__asterisk {
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 92px);
    height: clamp(64px, 7vw, 92px);
    margin-left: auto;
    margin-bottom: clamp(18px, 2vw, 28px);
    border-radius: clamp(18px, 1.8vw, 24px);
    background: var(--d12-panel-2);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--d12-green);
}

.dc-way__asterisk svg { width: 56%; height: 56%; }

/* --- Acties onder de kop -------------------------------------------------- */

.dc-way__actions {
    margin-top: clamp(28px, 3.2vw, 42px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
}

.dcx .dc-way__textlink { color: var(--d12-green); }
.dcx .dc-way__textlink:hover { color: #fff; }

/* --- De stappen als collage ----------------------------------------------- */

.dc-way__stage {
    position: relative;
    margin-top: clamp(48px, 5.4vw, 82px);
}

/* Gestreepte kaders lopen achter de kaarten door, net als in het ontwerp. */
.dc-way__trace {
    position: absolute;
    z-index: 0;
    border: 1px dashed rgba(255, 255, 255, .13);
    border-radius: clamp(22px, 2.2vw, 30px);
    pointer-events: none;
}

.dc-way__trace--a { inset: -38px 34% -14% -46px; }
.dc-way__trace--b { inset: 22% -46px -40px 30%; }

.dc-way__track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.4vw, 34px);
    /* Stretch, niet start: de bovenkant trapt af, de onderlijn blijft recht.
       Anders eindigt elke kaart op zijn eigen hoogte en valt de rij uiteen. */
    align-items: stretch;
}

/* De trap: elke volgende kolom zakt een stap weg, zodat de route naar
   rechtsonder loopt in plaats van kaarsrecht te staan. */
.dc-way__step { position: relative; }
.dc-way__step:nth-child(3n + 2) { margin-top: var(--dc-way-drop); }
.dc-way__step:nth-child(3n + 3) { margin-top: calc(var(--dc-way-drop) * 2); }

.dc-way__card {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: clamp(20px, 2vw, 28px);
    background: var(--d12-panel-2);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

/* Hairline bovenaan die meegroeit bij het inzoomen: de voortgang van de
   route, nu per kaart in plaats van als één lange lijn. */
.dc-way__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--d12-blue-lift), rgba(148, 248, 153, .85));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dc-slow) var(--dc-ease);
    transition-delay: var(--dc-delay, 0ms);
}

.dc-way__step.is-in .dc-way__card::before,
.dc-way__track.is-in .dc-way__card::before { transform: scaleX(1); }

.dc-way__card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .9);
}

/* Drie puntjes rechtsboven — het rustpunt uit design012. */
.dc-way__dots {
    position: absolute;
    z-index: 2;
    top: clamp(20px, 2vw, 26px);
    right: clamp(20px, 2vw, 26px);
    display: flex;
    gap: 5px;
}

.dc-way__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(148, 248, 153, .7);
}

.dc-way__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--dc-font-mono);
    font-size: .75rem;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .72);
}

.dc-way__name {
    position: relative;
    z-index: 1;
    margin-top: clamp(20px, 2vw, 26px);
    font-family: var(--dc-font);
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -.022em;
    line-height: 1.18;
    color: #fdfdfd;
}

.dc-way__q {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    margin-bottom: clamp(18px, 2vw, 24px);
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
}

/* Groene pil onderaan — de "Save The world"-pil uit het ontwerp, hier voor
   de doorlooptijd of wat de stap oplevert. */
.dc-way__chip {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    /* De kaart is een flexkolom, dus auto duwt de pil naar de onderrand:
       kaarten met een korte en een lange toelichting houden één onderlijn. */
    margin-top: auto;
    padding: 7px 15px;
    border-radius: var(--dc-r-pill);
    background: rgba(148, 248, 153, .12);
    border: 1px solid rgba(148, 248, 153, .28);
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--d12-green);
}

/* Zonder pil hoeft er onder de toelichting geen lucht te blijven staan. */
.dc-way__card > .dc-way__q:last-child { margin-bottom: 0; }

/* --- Variant: de start, vol paars ----------------------------------------- */

.dc-way__step--fill .dc-way__card {
    background: var(--d12-blue);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 40px 90px -40px rgba(75, 55, 224, .95);
}

.dc-way__step--fill .dc-way__card:hover {
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 52px 110px -40px rgba(75, 55, 224, 1);
}

.dc-way__step--fill .dc-way__num {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.dc-way__step--fill .dc-way__q { color: rgba(255, 255, 255, .78); }
.dc-way__step--fill .dc-way__dots i { background: rgba(255, 255, 255, .55); }

.dc-way__step--fill .dc-way__chip {
    background: var(--d12-green);
    border-color: var(--d12-green);
    color: #0e100f;
}

/* De wereldbol uit design012 als watermerk, half buiten beeld. */
.dc-way__globe {
    position: absolute;
    z-index: 0;
    right: -26%;
    bottom: -40%;
    width: 72%;
    color: rgba(255, 255, 255, .11);
    pointer-events: none;
}

.dc-way__globe svg { width: 100%; height: auto; }

/* --- Variant: het einde, groen -------------------------------------------- */

.dc-way__step--mint .dc-way__card {
    background: linear-gradient(160deg, rgba(148, 248, 153, .14), rgba(148, 248, 153, .03) 62%), var(--d12-panel);
    border-color: rgba(148, 248, 153, .34);
}

.dc-way__step--mint .dc-way__card:hover {
    border-color: rgba(148, 248, 153, .6);
    box-shadow: 0 40px 90px -44px rgba(148, 248, 153, .3);
}

.dc-way__step--mint .dc-way__num {
    background: var(--d12-green);
    border-color: var(--d12-green);
    color: #0e100f;
}

.dc-way__step--mint .dc-way__card::before {
    background: linear-gradient(to right, var(--d12-green-deep), var(--d12-green));
}

/* --- Afsluitende noot onder de stappen ------------------------------------ */

.dc-way__foot {
    margin-top: clamp(34px, 3.6vw, 52px);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .5);
}

.dc-way__foot::before {
    content: "";
    flex: none;
    width: 34px;
    height: 1px;
    background: rgba(148, 248, 153, .5);
}

/* --- Meebewegen ----------------------------------------------------------- */

@media (max-width: 1100px) {
    .dc-way__head { grid-template-columns: 1fr; align-items: start; }
    .dc-way__asterisk { margin-left: 0; }
    .dc-way__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Twee kolommen: dan zakt alleen de rechterkolom weg. */
    .dc-way__step:nth-child(3n + 2),
    .dc-way__step:nth-child(3n + 3) { margin-top: 0; }
    .dc-way__step:nth-child(even) { margin-top: var(--dc-way-drop); }

    .dc-way__trace--a { inset: -28px 40% -12% -32px; }
    .dc-way__trace--b { inset: 26% -32px -28px 36%; }
}

@media (max-width: 720px) {
    .dc-way__track { grid-template-columns: 1fr; }
    .dc-way__step:nth-child(even) { margin-top: 0; }
    .dc-way__trace { display: none; }
    .dc-way__globe { right: -30%; bottom: -46%; width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-way__card:hover { transform: none; }
    .dc-way__card::before { transform: scaleX(1); }
}

/* ==========================================================================
   17. AFSLUITENDE CTA — twee routes
   --------------------------------------------------------------------------
   Aan het einde staat de bezoeker voor dezelfde keuze als aan het begin, maar
   nu weet hij waarom. Twee routes naast elkaar, geen algemeen contactformulier.
   ========================================================================== */

.dc-cta {
    padding-block: var(--dc-section-y);
    background: var(--dc-bg);
    color: var(--dc-muted);
    overflow: hidden;
}

/* Dezelfde gloed als voorheen, maar nu als tint óp het licht in plaats van
   als licht in het donker: net genoeg om het vlak niet vlak te laten zijn. */
.dc-cta__glow {
    position: absolute;
    inset: -30% -10% auto;
    height: 80%;
    pointer-events: none;
    background:
        radial-gradient(40% 46% at 28% 10%, rgba(var(--dc-blue-rgb), .11) 0%, transparent 70%),
        radial-gradient(40% 46% at 74% 16%, rgba(var(--dc-green-rgb), .07) 0%, transparent 70%);
}

.dc-cta .dcx-head { position: relative; margin-inline: auto; }

.dc-cta__split {
    position: relative;
    margin-top: clamp(44px, 5vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(20px, 3vw, 40px);
}

.dc-cta__route {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3.2vw, 46px);
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow);
    overflow: hidden;
    transition: border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

.dc-cta__route:hover { box-shadow: var(--dc-shadow-lg); }
.dc-cta__route--web:hover { border-color: rgba(var(--dc-blue-rgb), .45); }
.dc-cta__route--ai:hover  { border-color: rgba(var(--dc-green-rgb), .45); }

/* --- Beeld achter een route ---------------------------------------------
   Op een wit vlak heeft de blauwe knop niets om zich tegen af te zetten.
   Met een foto erachter wél — mits die foto ver naar achteren blijft: een
   sluier in de canvaskleur legt het licht terug over het beeld, zodat de
   knop het enige volle kleurvlak in de kaart blijft. */

.dc-cta__route--shot { border-color: rgba(var(--dc-graphite-rgb), .14); }

.dc-cta__shot {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--dc-cta-shot);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.dc-cta__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(196deg,
        rgba(255, 255, 255, var(--dc-cta-veil, .84)) 0%,
        rgba(251, 252, 254, var(--dc-cta-veil, .84)) 52%,
        rgba(234, 243, 253, var(--dc-cta-veil, .84)) 100%);
}

/* De inhoud staat op het beeld, niet erachter. */
.dc-cta__route > *:not(.dc-cta__shot) { position: relative; z-index: 1; }

.dc-cta__route-q {
    font-family: var(--dc-font);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dc-cta__route-text {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--dc-muted);
    max-width: 40ch;
}

.dc-cta__route .dcx-btn { margin-top: auto; padding-top: 17px; }
.dc-cta__route > .dcx-btn { margin-top: 28px; }

/* Het scheidingswoord tussen de twee routes. */
.dc-cta__or {
    align-self: center;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-sm);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-cta__facts {
    position: relative;
    margin-top: clamp(36px, 4vw, 56px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px clamp(22px, 3vw, 44px);
}

.dc-cta__facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    color: var(--dc-muted);
}

.dc-cta__facts svg { width: 15px; height: 15px; color: var(--dc-green); flex: none; }

@media (max-width: 860px) {
    .dc-cta__split { grid-template-columns: minmax(0, 1fr); }
    .dc-cta__or { justify-self: center; }
    .dc-cta__route > .dcx-btn { width: 100%; }
}

/* ==========================================================================
   18. INSIGHTS / BLOG
   ========================================================================== */

.dc-insights__grid {
    margin-top: clamp(36px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.dc-post {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-xl);
    overflow: hidden;
    transition: transform var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease);
}

.dc-post:hover,
.dc-post:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--dc-shadow-lg);
    border-color: rgba(var(--dc-blue-rgb), .3);
}

/* De uitgelichte afbeeldingen van deze blog zijn infographics met de titel
   er bovenin al in verwerkt. Een 11:5-kader dat vanaf de onderkant uitlijnt
   snijdt bij een 3:2-bron de bovenste 32% weg — precies dat titelblok — zodat
   de illustratie heel blijft en de kop er niet twee keer staat. */
.dc-post__media {
    position: relative;
    aspect-ratio: 11 / 5;
    background: var(--dc-bg-tint);
    border-bottom: 1px solid var(--dc-line-soft);
    overflow: hidden;
}

.dc-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transition: transform .8s var(--dc-ease);
}

/* Beeld zonder ingebakken tekst: gewoon volledig tonen. */
.dc-post__media--full { aspect-ratio: 3 / 2; }
.dc-post__media--full img { object-fit: contain; object-position: center; }

.dc-post:hover .dc-post__media img { transform: scale(1.02); }

.dc-post__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(20px, 2.2vw, 28px);
}

.dc-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.dc-post__cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-blue-soft);
    color: var(--dc-blue-deep);
    font-family: var(--dc-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}

.dc-post__date {
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-post__title { margin-bottom: 10px; }

/* De hele kaart is klikbaar, maar in de DOM staat één echte link. */
.dc-post__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dc-post__excerpt { font-size: .9375rem; line-height: 1.6; color: var(--dc-muted); }

.dc-post__more {
    margin-top: auto;
    padding-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    color: var(--dc-blue);
}

.dc-post__more svg { width: 15px; height: 15px; transition: transform var(--dc-mid) var(--dc-ease); }
.dc-post:hover .dc-post__more svg { transform: translateX(4px); }

@media (max-width: 980px) {
    .dc-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dc-insights__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. ELEMENTOR-INBEDDING
   Containers zijn slechts een omhulsel; de widget bepaalt de spacing.
   ========================================================================== */

.elementor-widget-dc-home-hero,
.elementor-widget-dc-pillars,
.elementor-widget-dc-cases,
.elementor-widget-dc-before-after,
.elementor-widget-dc-journey,
.elementor-widget-dc-growth,
.elementor-widget-dc-automation,
.elementor-widget-dc-ai-services,
.elementor-widget-dc-way,
.elementor-widget-dc-insights,
.elementor-widget-dc-final-cta {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.elementor-widget-dc-home-hero .elementor-widget-container,
.elementor-widget-dc-pillars .elementor-widget-container,
.elementor-widget-dc-cases .elementor-widget-container,
.elementor-widget-dc-before-after .elementor-widget-container,
.elementor-widget-dc-journey .elementor-widget-container,
.elementor-widget-dc-growth .elementor-widget-container,
.elementor-widget-dc-automation .elementor-widget-container,
.elementor-widget-dc-ai-services .elementor-widget-container,
.elementor-widget-dc-way .elementor-widget-container,
.elementor-widget-dc-insights .elementor-widget-container,
.elementor-widget-dc-final-cta .elementor-widget-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   20. GRATIS HOMEPAGE-PREVIEW
   --------------------------------------------------------------------------
   De belangrijkste conversie van de pagina. Links het traject als drie
   klikbare stappen, rechts een browservenster dat meebeweegt. De stappen
   lopen vanzelf door zodra de sectie in beeld komt, maar stoppen zodra
   iemand zelf kiest.
   ========================================================================== */

.dc-preview {
    position: relative;
    background:
        linear-gradient(180deg, var(--dc-surface) 0%, var(--dc-bg-tint) 100%);
    border-top: 1px solid var(--dc-line);
    border-bottom: 1px solid var(--dc-line);
    overflow: hidden;
}

.dc-preview__glow {
    position: absolute;
    inset: -30% -10% auto;
    height: 70%;
    pointer-events: none;
    background: radial-gradient(46% 52% at 62% 30%, rgba(var(--dc-blue-rgb), .12) 0%, transparent 70%);
}

.dc-preview__head {
    position: relative;
    max-width: 780px;
    margin-bottom: clamp(38px, 4vw, 56px);
}

.dc-preview__head .dcx-h2 { margin-top: 18px; }
.dc-preview__head .dcx-lede { margin-top: 18px; max-width: 62ch; }

.dc-preview__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
    gap: clamp(28px, 3.6vw, 60px);
    align-items: start;
}

/* --- Stappen ------------------------------------------------------------ */

.dc-preview__tabs {
    display: grid;
    gap: 10px;
}

.dcx .dc-preview__tab {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
    padding: 18px 20px 21px;
    text-align: left;
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    overflow: hidden;
    transition: border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease),
                background-color var(--dc-mid) var(--dc-ease);
}

.dcx .dc-preview__tab:hover { border-color: rgba(var(--dc-blue-rgb), .35); }

.dcx .dc-preview__tab[aria-selected="true"] {
    border-color: rgba(var(--dc-blue-rgb), .45);
    box-shadow: var(--dc-shadow);
}

.dc-preview__num {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--dc-bg-tint);
    color: var(--dc-faint);
    transition: background-color var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-preview__tab[aria-selected="true"] .dc-preview__num {
    background: var(--dc-blue);
    color: #fff;
}

.dc-preview__tab-body { display: grid; gap: 5px; min-width: 0; }

.dc-preview__tab-title {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--dc-ink);
    line-height: 1.35;
}

.dc-preview__tab-note {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--dc-muted);
    /* Toelichting alleen bij de actieve stap: houdt de kolom rustig. */
    display: none;
}

.dc-preview__tab[aria-selected="true"] .dc-preview__tab-note { display: block; }

/* Voortgangsbalk die de automatische doorloop laat zien. */
.dc-preview__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--dc-blue);
}

.dc-preview__tab[aria-selected="true"] .dc-preview__bar {
    animation: dc-preview-bar var(--dc-cycle, 6s) linear forwards;
}

.dc-preview__body.is-paused .dc-preview__bar { animation: none; }

@keyframes dc-preview-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- Actie -------------------------------------------------------------- */

.dc-preview__act {
    margin-top: clamp(24px, 2.6vw, 32px);
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow);
}

.dc-preview__micro {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--dc-muted);
    text-align: center;
}

.dc-preview__micro svg { width: 15px; height: 15px; color: var(--dc-green); flex: none; }

.dc-preview__meta {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--dc-line-soft);
}

.dc-preview__meta li { font-size: .875rem; }

/* --- Venster ------------------------------------------------------------ */

.dc-preview__stage { position: relative; }

.dc-frame--tall .dc-frame__media { aspect-ratio: 16 / 11; background: #fbfcfe; }

.dc-preview__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px) scale(.995);
    transition: opacity .45s var(--dc-ease), transform .45s var(--dc-ease);
}

.dc-preview__panel.is-active { opacity: 1; transform: none; }

.dc-preview__panel img,
.dc-preview__wire {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dc-frame__url span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-chip--stamp {
    left: -30px;
    bottom: 34px;
}

@media (max-width: 1000px) {
    .dc-preview__body { grid-template-columns: minmax(0, 1fr); }
    .dc-preview__stage { order: -1; }
    .dc-preview__tab-note { display: block; }
    .dc-chip--stamp { left: 12px; bottom: -18px; }
}

@media (max-width: 700px) {
    .dc-preview__tab { padding: 15px 16px; gap: 11px; }
    .dc-preview__act { padding: 18px; }
    .dc-chip--stamp { left: 0; bottom: -16px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-preview__bar { display: none; }
    .dc-preview__panel { transition: none; }
}

/* ==========================================================================
   21. ONLINE CURSUS — Claude voor bedrijven
   --------------------------------------------------------------------------
   Links het uurprogramma, rechts een kalenderblad met de eerstvolgende
   datum. Die datum wordt in PHP berekend, dus hij klopt altijd — ook als
   de pagina maanden niet is aangeraakt.
   ========================================================================== */

.dc-course {
    background: var(--dc-bg-deep);
    color: rgba(255, 255, 255, .72);
    overflow: hidden;
}

.dc-course::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent);
            mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent);
}

.dc-course__wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

.dc-course .dcx-h2 { margin-top: 18px; color: #fff; }
.dc-course .dcx-lede { margin-top: 18px; max-width: 54ch; color: rgba(255, 255, 255, .6); }
.dc-course .dcx-eyebrow { color: #8fc4fa; }

/* --- Programma ----------------------------------------------------------- */

.dc-course__program {
    margin-top: clamp(30px, 3vw, 44px);
    display: grid;
    gap: 2px;
}

.dc-course__slot {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    transition: background-color var(--dc-fast) var(--dc-ease);
}

.dc-course__slot:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }

.dc-course__time {
    font-family: var(--dc-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    color: #62aaf3;
    font-variant-numeric: tabular-nums;
}

.dc-course__topic { display: grid; gap: 4px; }

.dc-course__topic b {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #fff;
    line-height: 1.4;
}

.dc-course__topic i {
    font-style: normal;
    font-size: .8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .5);
}

/* --- Kalenderkaart ------------------------------------------------------- */

.dc-course__card {
    position: relative;
    padding: clamp(24px, 2.8vw, 36px);
    border-radius: var(--dc-r-xl);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    overflow: hidden;
}

.dc-course__glow {
    position: absolute;
    inset: -50% -30% auto;
    height: 90%;
    pointer-events: none;
    background: radial-gradient(50% 50% at 70% 0%, rgba(var(--dc-blue-rgb), .28) 0%, transparent 70%);
}

.dc-course__kicker {
    position: relative;
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.dc-course__date {
    position: relative;
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 26px);
}

/* Het kalenderblad zelf. */
.dc-course__leaf {
    flex: none;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    width: 106px;
    padding: 16px 10px 18px;
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}

.dc-course__leaf-day {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--dc-blue);
}

.dc-course__leaf-num {
    font-family: var(--dc-font);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--dc-ink);
    font-variant-numeric: tabular-nums;
}

.dc-course__leaf-mon {
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    color: var(--dc-faint);
}

.dc-course__meta { display: grid; gap: 6px; min-width: 0; }

.dc-course__full {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.dc-course__hours {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff;
}

.dc-course__hours svg { width: 17px; height: 17px; color: #62aaf3; flex: none; }

.dc-course__name {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    color: #fff;
}

.dc-course__format {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .5);
}

.dc-course__seats {
    position: relative;
    margin-top: 24px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--dc-r);
    background: rgba(var(--dc-green-rgb), .1);
    border: 1px solid rgba(var(--dc-green-rgb), .22);
    font-size: .8125rem;
    line-height: 1.45;
    color: #7fe3c0;
}

.dc-course__seats svg { width: 16px; height: 16px; flex: none; }

.dc-course__act {
    position: relative;
    margin-top: 24px;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.dcx .dc-course__alt { color: #8fc4fa; font-size: .875rem; }
.dcx .dc-course__alt:hover { color: #fff; }

@media (max-width: 960px) {
    .dc-course__wrap { grid-template-columns: minmax(0, 1fr); }
    .dc-course__card { order: -1; }
}

@media (max-width: 560px) {
    .dc-course__date { flex-direction: column; align-items: flex-start; gap: 18px; }
    .dc-course__slot { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
}

/* ==========================================================================
   22. AFSPRAAKROUTES & ZWEVENDE BALK
   --------------------------------------------------------------------------
   Vier routes in plaats van één knop. Dezelfde component staat in de
   afsluitende sectie en in de balk die meeloopt zodra je voorbij de hero
   bent — zodat een afspraak overal één klik ver is.
   ========================================================================== */

.dc-cta__intents-title,
.dc-dock__title {
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.dc-cta__intents-title { margin-top: clamp(28px, 3vw, 38px); }

.dc-intents {
    display: grid;
    gap: 10px;
}

.dc-cta__intents {
    margin-top: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dc-intent__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    height: 100%;
    padding: 14px 16px;
    border-radius: var(--dc-r);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dcx .dc-intent__link:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-2px);
}

.dc-intent__ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--dc-blue-rgb), .18);
    color: #8fc4fa;
    flex: none;
}

.dc-intent__ico svg { width: 17px; height: 17px; }

.dc-intent__body { display: grid; gap: 2px; min-width: 0; }

.dc-intent__body b {
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.dc-intent__body i {
    font-style: normal;
    font-size: .75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
}

.dc-intent__go {
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, .38);
    flex: none;
    transition: transform var(--dc-fast) var(--dc-ease), color var(--dc-fast) var(--dc-ease);
}

.dc-intent__link:hover .dc-intent__go { transform: translateX(3px); color: #fff; }

/* --- Zwevende balk -------------------------------------------------------- */

.dc-dock {
    position: fixed;
    z-index: 90;
    right: clamp(14px, 2.4vw, 28px);
    bottom: clamp(14px, 2.4vw, 28px);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    background: none;
    /* Komt van onderen binnen zodra je voorbij de hero bent. */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dc-mid) var(--dc-ease), transform var(--dc-mid) var(--dc-ease);
    pointer-events: none;
}

.dc-dock.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dcx .dc-dock__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 16px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-ink);
    color: #fff;
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: 0 18px 40px -14px rgba(16, 24, 40, .5);
    transition: background-color var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dcx .dc-dock__toggle:hover { background: var(--dc-blue); transform: translateY(-2px); }

.dc-dock__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    flex: none;
}

.dc-dock__icon svg {
    position: absolute;
    width: 15px;
    height: 15px;
    transition: opacity var(--dc-fast) var(--dc-ease), transform var(--dc-fast) var(--dc-ease);
}

.dc-dock__close { opacity: 0; transform: rotate(-90deg); }

.dc-dock__toggle[aria-expanded="true"] .dc-dock__icon svg:not(.dc-dock__close) {
    opacity: 0;
    transform: rotate(90deg);
}

.dc-dock__toggle[aria-expanded="true"] .dc-dock__close { opacity: 1; transform: none; }

.dc-dock__panel {
    width: min(340px, calc(100vw - 28px));
    padding: 20px;
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
    animation: dc-dock-in .28s var(--dc-ease);
}

/* Het paneel staat op wit; de routes binnenin erven van de donkere
   CTA-sectie en worden hier teruggezet naar de lichte huisstijl. */
.dc-dock__panel .dc-dock__title { color: var(--dc-faint); }

.dc-dock__panel .dc-intent__link {
    background: var(--dc-bg-tint);
    border-color: var(--dc-line);
}

.dcx .dc-dock__panel .dc-intent__link:hover {
    background: var(--dc-blue-soft);
    border-color: rgba(var(--dc-blue-rgb), .28);
}

.dc-dock__panel .dc-intent__ico {
    background: rgba(var(--dc-blue-rgb), .1);
    color: var(--dc-blue);
}

.dc-dock__panel .dc-intent__body b { color: var(--dc-ink); }
.dc-dock__panel .dc-intent__body i { color: var(--dc-muted); }

.dc-dock__panel .dc-intent__go { color: var(--dc-faint); }
.dc-dock__panel .dc-intent__link:hover .dc-intent__go { color: var(--dc-blue); }

@keyframes dc-dock-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.dc-dock__intents { margin-top: 14px; }

.dc-dock__note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dc-line);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--dc-muted);
}

.dc-dock__note svg { color: var(--dc-faint); }

.dc-dock__note svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 700px) {
    .dc-cta__intents { grid-template-columns: 1fr; }

    /* Blijft ook op mobiel een compacte knop rechtsonder, geen volle balk. */
    .dc-dock { left: auto; align-items: flex-end; }
    .dcx .dc-dock__toggle { width: auto; justify-content: flex-start; }
    .dc-dock__panel { width: min(340px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-dock__panel { animation: none; }
}

/* ==========================================================================
   23. FOOTER
   --------------------------------------------------------------------------
   Wit vlak onder de donkere CTA-sectie. Vier lagen: een afspraak-band, merk
   naast vijf linkkolommen, een contactstrip en een smalle onderrand.

   Bewust vlak: geen rasterpatroon en geen gloed op de achtergrond. De
   structuur komt uit haarlijnen, ruimte en één custom lijntekening. Dat
   leest strakker dan een verlopend vlak en houdt de tekst maximaal helder.
   ========================================================================== */

.dc-foot {
    background: var(--dc-surface);
    color: var(--dc-muted);
    border-top: 1px solid var(--dc-line);
    padding-block: clamp(44px, 4.6vw, 72px) clamp(16px, 1.6vw, 24px);
}

/* --- 1. Afspraak-band ----------------------------------------------------
   Eén omkaderd vlak, verder leeg. Het accentstreepje bovenaan geeft de band
   een kop zonder dat er een tweede kleurvlak bij hoeft. ------------------ */

.dc-foot__cta {
    position: relative;
    display: grid;
    /* Drie sporen: tekst, merkteken en knoppen. 360px is breed genoeg om het
       langste knoplabel op één regel te houden. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 360px);
    align-items: center;
    gap: clamp(28px, 3.4vw, 64px);
    padding: clamp(28px, 3.2vw, 48px);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    overflow: hidden;
}

/* Accentstreep op de bovenrand, uitgelijnd met de tekst eronder. */
.dc-foot__cta::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: clamp(28px, 3.2vw, 48px);
    width: 56px;
    height: 2px;
    background: var(--dc-blue);
    border-radius: 0 0 2px 2px;
}

/* Custom merkteken: een stijgend pad door twee kaders — bouwen en groeien in
   één lijntekening. Staat in een eigen spoor tussen tekst en knoppen, dus het
   is een bewust element in plaats van een watermerk achter de tekst. */
.dc-foot__mark {
    width: 132px;
    height: 132px;
    flex: none;
    align-self: center;
}

.dc-foot__mark-frame { stroke: rgba(var(--dc-graphite-rgb), .20); }
.dc-foot__mark-tick  { stroke: rgba(var(--dc-graphite-rgb), .16); }
.dc-foot__mark-path  { stroke: rgba(var(--dc-blue-rgb), .60); }

.dc-foot__mark-node {
    fill: var(--dc-surface);
    stroke: var(--dc-blue);
}

.dc-foot__cta-copy,
.dc-foot__cta-actions { min-width: 0; }

.dc-foot__cta-title {
    margin-top: 16px;
    font-family: var(--dc-font);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -.032em;
    font-weight: 700;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dc-foot__cta-text {
    margin-top: 12px;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--dc-muted);
    max-width: 56ch;
}

.dc-foot__cta-actions {
    display: grid;
    gap: 10px;
}

/* .dcx-btn staat standaard op nowrap. Deze knoplabels zijn lang, en op een
   telefoon rekt zo'n knop de hele pagina op. Hier mag de tekst afbreken;
   past hij op één regel, dan blijft het één regel. */
.dc-foot__cta-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
}

.dc-foot__cta-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--dc-muted);
}

.dc-foot__cta-note svg { width: 15px; height: 15px; flex: none; color: var(--dc-green); }

/* --- 2. Merk + kolommen -------------------------------------------------- */

.dc-foot__main {
    display: grid;
    /* De merkkolom staat smaller dan de navigatie: vijf sporen naast elkaar. */
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 80px);
    padding-block: clamp(44px, 4.6vw, 72px) clamp(36px, 3.6vw, 56px);
}

/* min-width:0 zodat lange e-mailadressen de gridkolom niet oprekken. */
.dc-foot__brand { min-width: 0; }

.dc-foot__logo img {
    height: 30px;
    width: auto;
    /* Het logo is donker aangeleverd — op wit mag het gewoon zichzelf zijn. */
}

.dc-foot__about {
    margin-top: 22px;
    font-size: .9375rem;
    line-height: 1.72;
    color: var(--dc-muted);
    max-width: 38ch;
}

/* --- Mono-labels: één stijl voor kolomkoppen, social en contactlabels. --- */

.dc-foot__label {
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-foot__col-title { margin-bottom: 16px; }

.dc-foot__social-title {
    display: block;
    margin-top: 30px;
    margin-bottom: 14px;
}

/* --- Social: vierkante icoonknoppen, label alleen voor schermlezers. ----- */

.dc-foot__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dcx .dc-foot__social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-faint);
    transition: color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                background-color var(--dc-fast) var(--dc-ease);
}

.dcx .dc-foot__social a:hover,
.dcx .dc-foot__social a:focus-visible {
    color: var(--dc-blue);
    border-color: rgba(var(--dc-blue-rgb), .38);
    background: var(--dc-blue-soft);
}

.dc-foot__social svg { width: 17px; height: 17px; }

/* --- Linkkolommen -------------------------------------------------------- */

.dc-foot__nav {
    display: grid;
    /* Vijf sporen: websites, software, groei, AI en het bedrijf. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 36px);
}

.dc-foot__col ul { display: grid; gap: 2px; }

.dcx .dc-foot__col a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-block: 6px;
    font-size: .9063rem;
    line-height: 1.45;
    color: var(--dc-muted);
}

/* Chevron staat er altijd, maar is onzichtbaar tot hover. Zo verspringt de
   tekst niet en blijven de kolommen links netjes uitgelijnd. */
.dc-foot__caret {
    width: 9px;
    height: 9px;
    flex: none;
    color: var(--dc-blue);
    opacity: 0;
    translate: -4px 0;
    transition: opacity var(--dc-mid) var(--dc-ease),
                translate var(--dc-mid) var(--dc-ease);
}

.dcx .dc-foot__col a:hover,
.dcx .dc-foot__col a:focus-visible { color: var(--dc-ink); }

.dcx .dc-foot__col a:hover .dc-foot__caret,
.dcx .dc-foot__col a:focus-visible .dc-foot__caret {
    opacity: 1;
    translate: 0 0;
}

/* --- 3. Contactstrip -----------------------------------------------------
   Geen zwevende kaartjes meer: één band tussen twee haarlijnen, met
   verticale scheidingen ertussen. Vlakker en rustiger onder de kolommen. - */

.dc-foot__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--dc-line);
}

.dc-foot__strip-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 28px);
}

.dc-foot__strip-item + .dc-foot__strip-item { border-inline-start: 1px solid var(--dc-line); }
.dc-foot__strip-item:first-child { padding-inline-start: 0; }
.dc-foot__strip-item:last-child { padding-inline-end: 0; }

.dc-foot__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--dc-line);
    background: var(--dc-bg-tint);
    color: var(--dc-graphite);
    transition: color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                background-color var(--dc-fast) var(--dc-ease);
}

.dc-foot__ico svg { width: 18px; height: 18px; }

/* Alleen de cellen met een link reageren op hover. */
.dc-foot__strip-item:has(a):hover .dc-foot__ico {
    color: var(--dc-blue);
    border-color: rgba(var(--dc-blue-rgb), .38);
    background: var(--dc-blue-soft);
}

.dc-foot__strip-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dcx .dc-foot__strip-text a,
.dc-foot__strip-value {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dc-ink);
    overflow-wrap: anywhere;
}

.dcx .dc-foot__strip-text a:hover { color: var(--dc-blue); }

/* --- 4. Onderrand -------------------------------------------------------- */

.dc-foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    padding-top: clamp(20px, 2vw, 28px);
}

.dc-foot__copy {
    font-size: .8125rem;
    color: var(--dc-faint);
}

.dc-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-inline-start: clamp(0px, 3vw, 40px);
    margin-inline-end: auto;
}

.dcx .dc-foot__legal a {
    font-size: .8125rem;
    color: var(--dc-muted);
}

.dcx .dc-foot__legal a:hover { color: var(--dc-blue); }

.dcx .dc-foot__totop {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-ink);
    transition: color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                background-color var(--dc-fast) var(--dc-ease);
}

.dcx .dc-foot__totop:hover {
    color: var(--dc-blue);
    border-color: rgba(var(--dc-blue-rgb), .38);
    background: var(--dc-blue-soft);
}

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

.dc-foot__totop:hover svg { translate: 0 -2px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
    .dc-foot__mark { display: none; }
    .dc-foot__cta { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
    .dc-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(20px, 4vw, 40px); }
}

@media (max-width: 900px) {
    .dc-foot__cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .dc-foot__cta-actions { max-width: 380px; }
    .dc-foot__main { grid-template-columns: minmax(0, 1fr); }
    .dc-foot__about { max-width: 52ch; }

    .dc-foot__strip { grid-template-columns: minmax(0, 1fr); }
    .dc-foot__strip-item { padding-inline: 0; }
    .dc-foot__strip-item + .dc-foot__strip-item {
        border-inline-start: 0;
        border-block-start: 1px solid var(--dc-line);
    }
}

@media (max-width: 620px) {
    .dc-foot__cta-actions { max-width: none; }
    .dc-foot__cta-text { max-width: none; }
    .dc-foot__about { max-width: none; }
    .dc-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
    .dc-foot__legal { margin-inline-start: 0; }
    .dc-foot__bottom { gap: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-foot__caret,
    .dc-foot__totop svg { transition: none; }
    .dc-foot__totop:hover svg { translate: 0 0; }
}

/* ==========================================================================
   24. PAGINABREDE AFSPRAKEN
   --------------------------------------------------------------------------
   Ankerlinks binnen de homepage schuiven zacht. De header scrollt mee, dus er
   hoeft geen ruimte meer voor vrij te blijven; alleen wat lucht boven het doel.
   Wie beweging heeft uitgezet, springt gewoon.
   ========================================================================== */

html:has(.dc-hero) {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.dc-hero) { scroll-behavior: auto; }
}

/* Duidelijke focus, ook op donkere secties. */
.dcx--deep :focus-visible,
.dc-course :focus-visible,
.dc-cta__copy :focus-visible {
    outline: 2px solid #8fc4fa;
    outline-offset: 3px;
}

/* ==========================================================================
   25. HEADER BOVEN DE HERO
   --------------------------------------------------------------------------
   De themaheader is doorzichtig zolang je bovenaan staat. Op de homepage
   staat hij nu boven een wit vlak, dus geven we hem daar een echte witte
   achtergrond. Geen lijn onder de topbar of de header: het wit van de header
   loopt zonder scheiding door in het wit van de hero.

   De gescrolde staat laat het thema zelf doen; die was al wit.
   ========================================================================== */

body.home .lc-header:not(.lc-header--scrolled) {
    background: var(--dc-surface, #fff);
    border-bottom: 0;
}

body.home .lc-header:not(.lc-header--scrolled) .lc-topbar {
    border-bottom: 0;
}

/* ==========================================================================
   26. REGEL ONDER EEN FORMULIER
   --------------------------------------------------------------------------
   De velden en de knop komen uit Contact Form 7 (sectie 29). Wat hier
   overblijft is de zin die de widget zelf onder het formulier zet.
   ========================================================================== */

.dc-form__note {
    margin-top: 14px;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--dc-faint);
}

/* ==========================================================================
   27. WORKFLOW-STAPPEN MET DETAILS
   --------------------------------------------------------------------------
   Een stap laat op zichzelf zien wát er gebeurt. Wie wil weten wat de stap
   dan precies doet, wijst hem aan: dan schuiven de details eronder open.
   Werkt met muis en met toetsenbord.
   ========================================================================== */

.dc-node--has-detail { cursor: help; }

.dc-node__detail {
    display: grid;
    /* Eén kind, dus één rij die kan groeien. minmax(0, ...) is nodig omdat
       een fr-track anders niet kleiner wordt dan zijn min-content. */
    grid-template-rows: minmax(0, 0fr);
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows var(--dc-mid) var(--dc-ease),
                opacity var(--dc-mid) var(--dc-ease),
                margin-top var(--dc-mid) var(--dc-ease);
}

.dc-node__detail > ul {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 6px;
}

.dc-node__detail li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-node__detail li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
    flex: none;
}

.dc-node:hover .dc-node__detail,
.dc-node:focus .dc-node__detail,
.dc-node:focus-visible .dc-node__detail {
    grid-template-rows: minmax(0, 1fr);
    margin-top: 14px;
    opacity: 1;
}

/* Bij het openklappen mag de stap zelf ook oplichten. */
.dc-node--has-detail:hover,
.dc-node--has-detail:focus,
.dc-node--has-detail:focus-visible {
    border-color: rgba(var(--dc-blue-rgb), .45);
    box-shadow: var(--dc-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .dc-node__detail { transition: none; }
}

/* ==========================================================================
   28. AI-CONSULT — eerst kiezen, dan boeken
   --------------------------------------------------------------------------
   Eén diepe kaart op een licht vlak, met ruime ronding. Bovenin de kop, de
   introtekst en de keuze; onderin drie banen waarin twee witte bladen met een
   schuine snede in het donker happen. Daardoor staat de knop in het rustigste
   deel van het beeld en blijft het contrast waar het hoort.

   De keuze zit in radio-inputs; welk paneel zichtbaar is bepaalt de CSS via
   :checked. Geen JavaScript nodig, en met tab en pijltjes te bedienen.
   ========================================================================== */

.dc-consult {
    /* Blauw dat op diepe inkt blijft leven — hetzelfde accent als het traject. */
    --dcc-accent: #62aaf3;
    --dcc-line: rgba(255, 255, 255, .14);
    --dcc-pad: clamp(24px, 2.8vw, 44px);
    --dcc-notch: clamp(26px, 4vw, 76px);

    background: var(--dc-bg-tint);
}

.dc-consult__stage {
    position: relative;
    border-radius: clamp(20px, 2.6vw, 40px);
    background: var(--dc-bg-deep);
    color: rgba(255, 255, 255, .72);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--dc-shadow-lg);
}

.dc-consult__glow {
    position: absolute;
    inset: -34% -10% auto;
    height: 92%;
    pointer-events: none;
    background:
        radial-gradient(42% 50% at 50% 16%, rgba(var(--dc-blue-rgb), .26) 0%, transparent 72%),
        radial-gradient(38% 44% at 82% 6%, rgba(var(--dc-green-rgb), .14) 0%, transparent 70%);
}

/* Het accentwoord staat nog een keer reusachtig achter de kop — als vlak,
   niet als tekst. Vandaar aria-hidden in de markup. */
.dc-consult__ghost {
    position: absolute;
    top: clamp(64px, 8vw, 128px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--dc-font);
    font-weight: 700;
    font-size: clamp(5rem, 13vw, 11.5rem);
    line-height: .82;
    letter-spacing: -.055em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .03);
    pointer-events: none;
    user-select: none;
}

/* --- Kop ----------------------------------------------------------------- */

.dc-consult__hero {
    position: relative;
    z-index: 1;
    padding: clamp(48px, 6vw, 96px) clamp(22px, 4vw, 72px) clamp(50px, 6vw, 88px);
    text-align: center;
}

.dc-consult__eyebrow { color: #fff; }

.dc-consult__title {
    max-width: 26ch;
    margin: clamp(16px, 2vw, 26px) auto 0;
    font-family: var(--dc-font);
    font-weight: 700;
    font-size: clamp(2.35rem, 5.4vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
}

/* Het accentdeel krijgt zijn eigen regel en een tikje meer gewicht — daar
   valt het oog, en daar staat waar het gesprek over gaat. */
.dc-consult__title .dcx-accent {
    display: block;
    font-size: 1.06em;
    color: var(--dc-blue);
}

.dc-consult__lede {
    max-width: 54ch;
    margin: clamp(18px, 2vw, 28px) auto 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .6);
}

.dc-consult__art {
    margin: clamp(24px, 3vw, 44px) auto 0;
    max-width: 620px;
}

.dc-consult__art-img {
    margin-inline: auto;
    border-radius: var(--dc-r-lg);
}

/* --- De keuze ------------------------------------------------------------ */

.dc-consult__legend {
    margin-top: clamp(30px, 3.8vw, 54px);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.dc-consult__options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

/* De radio zelf blijft in de DOM voor toetsenbord en screenreader, maar is
   visueel vervangen door het label. */
.dc-consult__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.dc-consult__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 12px;
    border-radius: var(--dc-r-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                color var(--dc-fast) var(--dc-ease),
                transform var(--dc-fast) var(--dc-ease);
}

.dc-consult__option:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: translateY(-1px);
}

.dc-consult__option-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--dc-blue-rgb), .28);
    color: #a8d0fb;
    flex: none;
    transition: background-color var(--dc-fast) var(--dc-ease), color var(--dc-fast) var(--dc-ease);
}

.dc-consult__option-ico svg { width: 15px; height: 15px; }

.dc-consult__radio:checked + .dc-consult__option {
    background: #fff;
    border-color: #fff;
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-consult__radio:checked + .dc-consult__option .dc-consult__option-ico {
    background: var(--dc-ink);
    color: #fff;
}

.dc-consult__radio:focus-visible + .dc-consult__option {
    outline: 2px solid var(--dcc-accent);
    outline-offset: 3px;
}

/* --- Praktische punten ---------------------------------------------------
   Op brede schermen hangen ze links en rechts van de kop, met een haarlijn
   die naar het midden loopt. Daaronder staan ze gewoon op een rij. */

.dc-consult__marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 36px;
    margin-top: clamp(32px, 4vw, 52px);
}

.dc-consult__mark {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 26ch;
    padding-bottom: 12px;
    text-align: left;
}

.dc-consult__mark::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .82);
}

.dc-consult__mark-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: rgba(var(--dc-blue-rgb), .22);
    border: 1px solid var(--dcc-line);
    color: var(--dcc-accent);
}

.dc-consult__mark-ico svg { width: 17px; height: 17px; }

.dc-consult__mark b {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
}

@media (min-width: 1180px) {
    .dc-consult__marks {
        display: block;
        margin: 0;
    }

    .dc-consult__mark {
        position: absolute;
        max-width: 17ch;
    }

    .dc-consult__mark:nth-child(1) { left: clamp(28px, 4vw, 68px); top: 48%; }
    .dc-consult__mark:nth-child(2) { right: clamp(28px, 4vw, 68px); top: 58%; }

    /* De haarlijn die vanaf het streepje het midden in loopt. */
    .dc-consult__mark::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 1px;
        width: clamp(60px, 9vw, 160px);
    }

    .dc-consult__mark:nth-child(1)::after {
        left: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
    }

    .dc-consult__mark:nth-child(2)::after {
        right: 100%;
        background: linear-gradient(270deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
    }
}

/* --- De onderrand: twee witte bladen met een schuine snede ---------------- */

.dc-consult__base {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 40%) 1fr;
    align-items: stretch;
}

.dc-consult__tray {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(26px, 3vw, 40px) var(--dcc-pad) clamp(28px, 3.4vw, 44px);
    background: var(--dc-surface);
    color: var(--dc-ink);
}

/* De snede laat het donker vanuit het midden naar beneden doorlopen. */
.dc-consult__tray--start {
    clip-path: polygon(0 0, calc(100% - var(--dcc-notch)) 0, 100% 100%, 0 100%);
    padding-right: calc(var(--dcc-pad) + var(--dcc-notch));
}

.dc-consult__tray--end {
    clip-path: polygon(var(--dcc-notch) 0, 100% 0, 100% 100%, 0 100%);
    padding-left: calc(var(--dcc-pad) + var(--dcc-notch));
    align-items: flex-end;
    text-align: right;
}

.dc-consult__seal {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dc-blue);
    color: #fff;
    box-shadow: var(--dc-shadow-blue);
}

.dc-consult__seal .dc-mark { width: 24px; height: 17px; }

.dc-consult__claim {
    padding-top: 18px;
    border-top: 1px solid var(--dc-line);
    font-family: var(--dc-font);
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: var(--dc-ink);
    max-width: 24ch;
}

.dc-consult__stat {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--dc-line);
}

.dc-consult__stat b {
    font-family: var(--dc-font);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    white-space: nowrap;
    color: var(--dc-ink);
}

.dc-consult__stat i {
    font-style: normal;
    font-size: .8125rem;
    line-height: 1.35;
    text-align: left;
    max-width: 15ch;
    color: var(--dc-muted);
}

/* --- Het antwoord bij de keuze, in het donker tussen de bladen ------------ */

.dc-consult__mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 40px) clamp(14px, 2vw, 30px) clamp(34px, 4vw, 54px);
    text-align: center;
}

.dc-consult__panel { display: none; }

.dc-consult__text {
    margin: 0 auto 22px;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

/* Zonder :has() zou de eerste keuze altijd zichtbaar blijven — dat is een
   prima terugval, dus die staat als uitgangspunt aan. */
.dc-consult__panel[data-dc-panel="0"] { display: block; }

/* De radio's staan in een andere wrapper dan de panelen, dus een
   broer-selector komt er niet bij; :has() op de groep wel. Vijf keuzes is
   de praktische bovengrens van deze aanpak. */
.dc-consult__set:has(.dc-consult__radio:nth-of-type(1):checked) [data-dc-panel="0"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(2):checked) [data-dc-panel="1"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(3):checked) [data-dc-panel="2"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(4):checked) [data-dc-panel="3"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(5):checked) [data-dc-panel="4"] {
    display: block;
    animation: dc-consult-in .3s var(--dc-ease);
}

/* Zodra een andere keuze aanstaat, verdwijnt de eerste weer. */
.dc-consult__set:has(.dc-consult__radio:nth-of-type(2):checked) [data-dc-panel="0"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(3):checked) [data-dc-panel="0"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(4):checked) [data-dc-panel="0"],
.dc-consult__set:has(.dc-consult__radio:nth-of-type(5):checked) [data-dc-panel="0"] {
    display: none;
}

@keyframes dc-consult-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Smaller ------------------------------------------------------------- */

/* Vanaf hier past de afspraak niet meer tussen de bladen; die schuift naar
   boven en de twee bladen delen de onderrand. De snede blijft, zodat het
   donker er ook hier tussendoor loopt. */
@media (max-width: 1024px) {
    .dc-consult__base { grid-template-columns: 1fr 1fr; }

    .dc-consult__mid {
        grid-column: 1 / -1;
        order: -1;
        padding-top: 0;
    }

    .dc-consult__tray { padding-top: clamp(24px, 3.4vw, 34px); }

    /* Beide sneden lopen nu dezelfde kant op, zodat er een schuine baan van
       gelijke breedte tussen de bladen blijft in plaats van een punt. */
    .dc-consult__tray--end {
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dcc-notch) 100%);
    }
}

/* Op smalle schermen wint leesbaarheid van de vorm: alles onder elkaar,
   links uitgelijnd, zonder snede. */
@media (max-width: 700px) {
    .dc-consult__base { grid-template-columns: 1fr; }

    .dc-consult__mid { grid-column: auto; }

    .dc-consult__tray,
    .dc-consult__tray--start,
    .dc-consult__tray--end {
        clip-path: none;
        align-items: flex-start;
        text-align: left;
        padding-inline: clamp(22px, 5vw, 40px);
    }

    .dc-consult__tray--end { border-top: 1px solid var(--dc-line); }
    .dc-consult__stat { justify-content: flex-start; }
    .dc-consult__claim { max-width: none; }
}

@media (max-width: 640px) {
    .dc-consult__options { flex-direction: column; }
    .dc-consult__option { justify-content: flex-start; }
    .dc-consult__ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-consult__panel { animation: none !important; }
    .dc-consult__option:hover,
    .dcx .dc-consult__pill:hover { transform: none; }
}


/* ==========================================================================
   29. CONTACT FORM 7
   --------------------------------------------------------------------------
   Alle formulieren lopen via Contact Form 7. CF7 bepaalt de velden en de
   mails; deze sectie bepaalt hoe het eruitziet. Alles hangt onder .dcx-cf7,
   het omhulsel dat DC_CF7::render() om het formulier zet.

   De verzendknop verdient een woord. CF7 rendert hem als <input type="submit">
   en een input kan geen kinderen bevatten, dus past het ronde pijlvlak van
   .dcx-btn er niet in. DC_CF7 legt daarom een <span class="dcx-btn"> om de
   input heen met de tekst en de pijl erin; de input ligt er doorzichtig
   overheen en blijft de echte knop.

   De knop is vollebreedte maar níet .dcx-btn--block: die variant duwt tekst
   en pijl uit elkaar naar de randen, wat in een hero klopt maar in een
   formulierkaart een leeg gat in het midden achterlaat. Hier staan tekst en
   pijl samen in het midden.
   ========================================================================== */

.dcx-cf7 {
    font-family: var(--dc-font-body);
    color: var(--dc-ink-soft);
}

/* Een veld met width:100% en padding moet binnen zijn kolom blijven. Het thema
   zet dit niet overal, dus hier wel. */
.dcx-cf7,
.dcx-cf7 *,
.dcx-cf7 *::before,
.dcx-cf7 *::after { box-sizing: border-box; }

.dcx-cf7 .wpcf7-form { margin: 0; }

/* --- Indeling ------------------------------------------------------------ */

.dcx-cf7 .dc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dcx-cf7 .dc-form-row { min-width: 0; }
.dcx-cf7 .dc-form-full { grid-column: 1 / -1; }

.dcx-cf7 .wpcf7-form-control-wrap { display: block; }

/* --- Velden -------------------------------------------------------------- */

/* Alles wat een invoerveld is, staat in één lijst. CF7 kan elk van deze
   types opleveren; wat hier niet in staat valt terug op de browserstijl en
   valt meteen uit de toon.

   De velden zijn gevuld in plaats van omlijnd: een zacht vlak op de witte
   kaart leest rustiger dan zes losse kaders, en het veld waar je in staat
   wordt wit — de aandacht ligt daar waar je typt. */
.dcx-cf7 input[type="text"],
.dcx-cf7 input[type="email"],
.dcx-cf7 input[type="tel"],
.dcx-cf7 input[type="url"],
.dcx-cf7 input[type="number"],
.dcx-cf7 input[type="date"],
.dcx-cf7 input[type="time"],
.dcx-cf7 input[type="search"],
.dcx-cf7 input[type="password"],
.dcx-cf7 input[type="file"],
.dcx-cf7 select,
.dcx-cf7 textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--dc-r);
    background: var(--dc-bg-tint);
    border: 1px solid var(--dc-line-soft);
    font-family: var(--dc-font-body);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--dc-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                box-shadow var(--dc-fast) var(--dc-ease);
}

/* Alle enkelregelige velden even hoog, ongeacht hun type. Een datumveld
   en een keuzelijst rekenen anders met hun binnenwerk dan een tekstveld. */
.dcx-cf7 input[type="text"],
.dcx-cf7 input[type="email"],
.dcx-cf7 input[type="tel"],
.dcx-cf7 input[type="url"],
.dcx-cf7 input[type="number"],
.dcx-cf7 input[type="date"],
.dcx-cf7 input[type="time"],
.dcx-cf7 input[type="search"],
.dcx-cf7 input[type="password"],
.dcx-cf7 select {
    height: 54px;
}

.dcx-cf7 textarea {
    min-height: 148px;
    resize: vertical;
}

.dcx-cf7 input:hover:not(:focus):not([disabled]):not([type="checkbox"]):not([type="radio"]),
.dcx-cf7 select:hover:not(:focus):not([disabled]),
.dcx-cf7 textarea:hover:not(:focus):not([disabled]) {
    border-color: var(--dc-line);
    background: var(--dc-surface);
}

.dcx-cf7 input:focus:not([type="checkbox"]):not([type="radio"]),
.dcx-cf7 select:focus,
.dcx-cf7 textarea:focus {
    outline: none;
    background: var(--dc-surface);
    border-color: var(--dc-blue);
    box-shadow: 0 0 0 4px rgba(var(--dc-blue-rgb), .12);
}

.dcx-cf7 input::placeholder,
.dcx-cf7 textarea::placeholder {
    color: var(--dc-faint);
    opacity: 1;
}

/* Een uitgezet veld moet er ook uitzien alsof het uit staat. */
.dcx-cf7 input[disabled],
.dcx-cf7 select[disabled],
.dcx-cf7 textarea[disabled],
.dcx-cf7 input[readonly] {
    opacity: .6;
    cursor: not-allowed;
}

/* De browser vult velden in met een eigen gele of blauwe achtergrond. Dat
   overschrijf je niet met background — alleen een binnenschaduw wint. */
.dcx-cf7 input:-webkit-autofill,
.dcx-cf7 input:-webkit-autofill:hover,
.dcx-cf7 textarea:-webkit-autofill,
.dcx-cf7 select:-webkit-autofill {
    -webkit-text-fill-color: var(--dc-ink);
    -webkit-box-shadow: 0 0 0 40px var(--dc-bg-tint) inset;
    box-shadow: 0 0 0 40px var(--dc-bg-tint) inset;
    caret-color: var(--dc-ink);
}

.dcx-cf7 input:-webkit-autofill:focus,
.dcx-cf7 textarea:-webkit-autofill:focus,
.dcx-cf7 select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--dc-surface) inset,
                        0 0 0 4px rgba(var(--dc-blue-rgb), .12);
    box-shadow: 0 0 0 40px var(--dc-surface) inset,
                0 0 0 4px rgba(var(--dc-blue-rgb), .12);
}

/* Het pijltje van de keuzelijst: als achtergrond, want appearance staat uit. */
.dcx-cf7 select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d97a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
    cursor: pointer;
}

/* Zolang de eerste optie — het label van CF7 — nog geselecteerd staat, leest
   de keuzelijst als een placeholder in plaats van als een gemaakte keuze. */
.dcx-cf7 select:has(option[value=""]:checked) { color: var(--dc-faint); }

/* Windows tekent de klaplijst zelf; zonder deze regel wordt dat wit op wit. */
.dcx-cf7 select option {
    color: var(--dc-ink);
    background: var(--dc-surface);
}

/* De ophoogpijltjes van een getalveld halen de hoogte uit balans. */
.dcx-cf7 input[type="number"] {
    -moz-appearance: textfield;
}

.dcx-cf7 input[type="number"]::-webkit-outer-spin-button,
.dcx-cf7 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dcx-cf7 input[type="date"]::-webkit-calendar-picker-indicator,
.dcx-cf7 input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    transition: opacity var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 input[type="date"]:hover::-webkit-calendar-picker-indicator,
.dcx-cf7 input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.dcx-cf7 input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Een bestandsveld heeft een eigen knop; die krijgt de vorm van het huis. */
.dcx-cf7 input[type="file"] {
    height: auto;
    padding: 10px 12px;
    font-size: .875rem;
    color: var(--dc-muted);
    cursor: pointer;
}

.dcx-cf7 input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--dc-r-sm);
    background: var(--dc-graphite-soft);
    color: var(--dc-ink-soft);
    font-family: var(--dc-font-body);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 input[type="file"]:hover::file-selector-button {
    background: var(--dc-blue-soft);
    color: var(--dc-blue-deep);
}

/* Een label boven een veld, voor formulieren die er een hebben. De velden
   in de huidige formulieren werken met een placeholder. */
.dcx-cf7 .dc-form-row > label {
    display: block;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dc-ink-soft);
}

/* --- Aankruisvelden ------------------------------------------------------ */

/* De systeemvinkjes verschillen per besturingssysteem en negeren de
   hoekrondingen. Daarom tekenen we ze zelf; de input blijft de echte
   bediening, dus toetsenbord en schermlezer merken er niets van. */
.dcx-cf7 input[type="checkbox"],
.dcx-cf7 input[type="radio"] {
    flex: none;
    display: grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 6px;
    background: var(--dc-surface);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                box-shadow var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 input[type="radio"] { border-radius: 50%; }

.dcx-cf7 input[type="checkbox"]:hover,
.dcx-cf7 input[type="radio"]:hover {
    border-color: var(--dc-blue);
}

.dcx-cf7 input[type="checkbox"]::before {
    content: '';
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 input[type="radio"]::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 input[type="checkbox"]:checked,
.dcx-cf7 input[type="radio"]:checked {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
}

.dcx-cf7 input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
.dcx-cf7 input[type="radio"]:checked::before { transform: scale(1); }

.dcx-cf7 input[type="checkbox"]:focus-visible,
.dcx-cf7 input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--dc-blue-rgb), .18);
}

/* Een rij keuzes: elk vinkje op zijn eigen regel, tekst ernaast. */
.dcx-cf7 .wpcf7-checkbox .wpcf7-list-item,
.dcx-cf7 .wpcf7-radio .wpcf7-list-item {
    display: block;
    margin: 0 0 10px;
}

.dcx-cf7 .wpcf7-checkbox .wpcf7-list-item:last-child,
.dcx-cf7 .wpcf7-radio .wpcf7-list-item:last-child { margin-bottom: 0; }

.dcx-cf7 .wpcf7-checkbox label,
.dcx-cf7 .wpcf7-radio label,
.dcx-cf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--dc-ink-soft);
    cursor: pointer;
}

.dcx-cf7 .wpcf7-list-item-label { flex: 1; }

/* --- Akkoordverklaring --------------------------------------------------- */

/* De akkoordregel staat op een eigen vlakje: hij hoort bij het formulier,
   maar niet bij de velden erboven. */
.dcx-cf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.dcx-cf7 .wpcf7-acceptance label {
    padding: 14px 16px;
    border-radius: var(--dc-r);
    background: var(--dc-bg-tint);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--dc-muted);
    transition: background-color var(--dc-fast) var(--dc-ease);
}

.dcx-cf7 .wpcf7-acceptance label:hover { background: var(--dc-graphite-soft); }

.dcx-cf7 .wpcf7-acceptance input[type="checkbox"] { margin-top: 1px; }

.dcx-cf7 .wpcf7-acceptance a {
    color: var(--dc-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Verzendknop --------------------------------------------------------- */

/* De span is de knop; .dcx-btn levert de vorm, de kleur en het pijlvlak. */
.dcx-cf7 .dcx-cf7__submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* De echte knop: onzichtbaar, maar hij vangt de klik en houdt zijn naam. */
.dcx-cf7 .dcx-cf7__submit-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    font: inherit;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Toetsenbordfocus landt op de input; de rand hoort om de hele knop. */
.dcx-cf7 .dcx-cf7__submit:focus-within {
    outline: 2px solid var(--dc-blue);
    outline-offset: 3px;
}

.dcx-cf7 .dcx-cf7__submit-input:focus-visible { outline: none; }

/* Tijdens verzenden reageert de knop niet meer. */
.dcx-cf7 .submitting .dcx-cf7__submit {
    opacity: .72;
    transform: none;
    pointer-events: none;
}

/* CF7 zet zijn spinner direct achter de input, dus binnen de knop. Naast de
   pijl zou hij de knop breder maken; we leggen hem er daarom overheen. */
.dcx-cf7 .dcx-cf7__submit .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 22px;
    margin: -12px 0 0;
    background-color: var(--dc-blue, #147be1);
    opacity: 1;
}

.dcx-cf7 .dcx-cf7__submit .wpcf7-spinner::before { background-color: #fff; }

.dcx-cf7 .submitting .dcx-cf7__submit .dcx-btn__go svg { opacity: 0; }

/* Zolang de akkoordverklaring niet is aangevinkt, zet CF7 de knop uit. Dat
   moet je kunnen zien. */
.dcx-cf7 .dcx-cf7__submit:has(.dcx-cf7__submit-input:disabled) {
    opacity: .5;
    transform: none;
    box-shadow: none;
}

.dcx-cf7 .dcx-cf7__submit-input:disabled { cursor: not-allowed; }

/* --- Meldingen ----------------------------------------------------------- */

.dcx-cf7 .wpcf7 form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--dc-r);
    background: var(--dc-graphite-soft);
    color: var(--dc-ink-soft);
    font-size: .875rem;
    line-height: 1.5;
}

.dcx-cf7 .wpcf7 form.sent .wpcf7-response-output {
    background: var(--dc-green-soft);
    color: #0a6b4d;
}

.dcx-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.dcx-cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.dcx-cf7 .wpcf7 form.payment-required .wpcf7-response-output {
    background: var(--dc-amber-soft);
    color: #8a5a06;
}

.dcx-cf7 .wpcf7 form.failed .wpcf7-response-output,
.dcx-cf7 .wpcf7 form.aborted .wpcf7-response-output,
.dcx-cf7 .wpcf7 form.spam .wpcf7-response-output {
    background: var(--dc-red-soft);
    color: #b03238;
}

/* Foutmelding onder het veld waar hij over gaat. */
.dcx-cf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--dc-red);
}

.dcx-cf7 .wpcf7-not-valid {
    border-color: var(--dc-red);
    background: var(--dc-red-soft);
}

.dcx-cf7 .wpcf7-not-valid:focus {
    border-color: var(--dc-red);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .14);
}

.dcx-cf7 .wpcf7-not-valid-tip { font-weight: 500; }

/* Alleen zichtbaar in de Elementor-editor: een formulier is nog niet gekozen. */
.dcx-cf7__notice {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--dc-line, #e6eaf1);
    border-radius: var(--dc-r, 14px);
    background: var(--dc-bg-tint, #f4f7fc);
    color: var(--dc-muted, #5b6675);
    font-size: .875rem;
}

/* --- Op een donker vlak -------------------------------------------------- */

.dcx-cf7--on-dark { color: rgba(255, 255, 255, .78); }

.dcx-cf7--on-dark input[type="text"],
.dcx-cf7--on-dark input[type="email"],
.dcx-cf7--on-dark input[type="tel"],
.dcx-cf7--on-dark input[type="url"],
.dcx-cf7--on-dark input[type="number"],
.dcx-cf7--on-dark input[type="date"],
.dcx-cf7--on-dark input[type="time"],
.dcx-cf7--on-dark input[type="search"],
.dcx-cf7--on-dark input[type="password"],
.dcx-cf7--on-dark input[type="file"],
.dcx-cf7--on-dark select,
.dcx-cf7--on-dark textarea {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}

.dcx-cf7--on-dark input::placeholder,
.dcx-cf7--on-dark textarea::placeholder { color: rgba(255, 255, 255, .45); }

.dcx-cf7--on-dark input:hover:not(:focus):not([disabled]):not([type="checkbox"]):not([type="radio"]),
.dcx-cf7--on-dark select:hover:not(:focus):not([disabled]),
.dcx-cf7--on-dark textarea:hover:not(:focus):not([disabled]) {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .26);
}

.dcx-cf7--on-dark input:focus:not([type="checkbox"]):not([type="radio"]),
.dcx-cf7--on-dark select:focus,
.dcx-cf7--on-dark textarea:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

/* Op donker vult de browser met een lichte achtergrond; die dekken we af. */
.dcx-cf7--on-dark input:-webkit-autofill,
.dcx-cf7--on-dark input:-webkit-autofill:hover,
.dcx-cf7--on-dark input:-webkit-autofill:focus,
.dcx-cf7--on-dark textarea:-webkit-autofill,
.dcx-cf7--on-dark select:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 40px #17202c inset;
    box-shadow: 0 0 0 40px #17202c inset;
    caret-color: #fff;
}

.dcx-cf7--on-dark select option {
    color: var(--dc-ink);
    background: #fff;
}

.dcx-cf7--on-dark input[type="checkbox"],
.dcx-cf7--on-dark input[type="radio"] {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .3);
}

.dcx-cf7--on-dark input[type="checkbox"]:checked,
.dcx-cf7--on-dark input[type="radio"]:checked {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
}

.dcx-cf7--on-dark .wpcf7-checkbox label,
.dcx-cf7--on-dark .wpcf7-radio label { color: rgba(255, 255, 255, .78); }

.dcx-cf7--on-dark .wpcf7-acceptance label {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
}

.dcx-cf7--on-dark .wpcf7-acceptance label:hover { background: rgba(255, 255, 255, .1); }

.dcx-cf7--on-dark .wpcf7-acceptance a { color: #fff; }

/* --- Nieuwsbrief: één regel, knop ernaast -------------------------------- */

.dcx-cf7--inline .dc-form-grid { grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 620px) {
    .dcx-cf7--inline .dc-form-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .dcx-cf7--inline .dc-form-full { grid-column: auto; }
    .dcx-cf7--inline .dcx-cf7__submit { width: auto; margin-top: 0; }
}

@media (max-width: 560px) {
    .dcx-cf7 .dc-form-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Onder 16px zoomt Safari op iOS in zodra een veld focus krijgt. */
@media (max-width: 640px) {
    .dcx-cf7 input,
    .dcx-cf7 select,
    .dcx-cf7 textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .dcx-cf7 input,
    .dcx-cf7 select,
    .dcx-cf7 textarea,
    .dcx-cf7 input[type="checkbox"]::before,
    .dcx-cf7 input[type="radio"]::before { transition: none; }
}

/* ==========================================================================
   30. VEELGESTELDE VRAGEN
   --------------------------------------------------------------------------
   Dezelfde taal als de rest van de pagina: haarlijnen, inkt en één blauw
   accent. De lijst links, de contactkaart rechts. Die kaart is het enige
   donkere vlak in de sectie en gebruikt de inkt van de afsluitende CTA,
   zodat de twee contactmomenten op de pagina bij elkaar horen.
   ========================================================================== */

/* --- Filterbalk ---------------------------------------------------------- */

.dc-faq__filters {
    margin-top: clamp(28px, 3vw, 44px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.dcx .dc-faq__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--dc-muted);
    cursor: pointer;
    transition: color var(--dc-fast) var(--dc-ease),
                border-color var(--dc-fast) var(--dc-ease),
                background-color var(--dc-fast) var(--dc-ease);
}

.dcx .dc-faq__filter:hover {
    color: var(--dc-ink);
    border-color: rgba(var(--dc-blue-rgb), .35);
}

.dcx .dc-faq__filter.is-active {
    background: var(--dc-ink);
    border-color: var(--dc-ink);
    color: #fff;
}

.dc-faq__filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* --- Indeling ------------------------------------------------------------ */

.dc-faq__layout {
    margin-top: clamp(36px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(22px, 3vw, 44px);
    align-items: start;
}

.dc-faq__layout--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px;
    margin-inline: auto;
}

.dc-faq__list { display: grid; gap: 12px; min-width: 0; }

/* --- Vraag --------------------------------------------------------------- */

.dc-faq__item {
    position: relative;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
    overflow: hidden;
    transition: border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

.dc-faq__item:hover { border-color: rgba(var(--dc-blue-rgb), .3); }

.dc-faq__item.is-active {
    border-color: rgba(var(--dc-blue-rgb), .38);
    box-shadow: var(--dc-shadow);
}

.dc-faq__item[hidden] { display: none; }

/* Het nummer is het enige dat van kleur verandert bij openen — de kop zelf
   blijft inkt, zodat een open vraag niet als link gaat lezen. */
.dcx .dc-faq__q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: clamp(16px, 1.8vw, 22px);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.dc-faq__num {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    background: var(--dc-bg-tint);
    border: 1px solid var(--dc-line-soft);
    font-family: var(--dc-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dc-faint);
    font-variant-numeric: tabular-nums;
    transition: color var(--dc-mid) var(--dc-ease),
                background-color var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease);
}

.dc-faq__item.is-active .dc-faq__num {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
    color: #fff;
}

.dc-faq__q-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.dc-faq__q-text {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.35;
    color: var(--dc-ink);
}

.dc-faq__toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-bg-tint);
    border: 1px solid var(--dc-line-soft);
    color: var(--dc-muted);
    transition: background-color var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease),
                color var(--dc-mid) var(--dc-ease);
}

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

.dc-faq__item.is-active .dc-faq__toggle {
    background: var(--dc-blue-soft);
    border-color: rgba(var(--dc-blue-rgb), .25);
    color: var(--dc-blue-deep);
}

.dc-faq__item.is-active .dc-faq__toggle svg { transform: rotate(135deg); }

/* --- Antwoord ------------------------------------------------------------
   grid-template-rows animeert wél naar de werkelijke hoogte; een max-height
   met een gokgetal knipt lange antwoorden af. */

.dc-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dc-slow) var(--dc-ease);
}

.dc-faq__item.is-active .dc-faq__a { grid-template-rows: 1fr; }

.dc-faq__a-clip { overflow: hidden; min-height: 0; }

.dc-faq__a-body {
    padding: 0 clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px);
    padding-left: calc(42px + 16px + clamp(16px, 1.8vw, 22px));
}

.dc-faq__a-text {
    padding-top: 16px;
    border-top: 1px solid var(--dc-line-soft);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--dc-muted);
}

.dc-faq__a-text p + p { margin-top: 14px; }

.dc-faq__a-text ul,
.dc-faq__a-text ol { margin: 14px 0; padding-left: 20px; }

.dc-faq__a-text ul { list-style: disc; }
.dc-faq__a-text ol { list-style: decimal; }
.dc-faq__a-text li + li { margin-top: 7px; }

.dc-faq__a-text strong { color: var(--dc-ink); font-weight: 600; }

.dc-faq__a-text a {
    color: var(--dc-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dc-faq__a-text a:hover { color: var(--dc-blue-deep); }

/* --- Contactkaart -------------------------------------------------------- */

.dc-faq__aside { min-width: 0; }

@media (min-width: 1025px) {
    .dc-faq__layout:not(.dc-faq__layout--single) .dc-faq__aside {
        position: sticky;
        top: 96px;
    }
}

.dc-faq__card {
    overflow: hidden;
    border-radius: var(--dc-r-xl);
    background: var(--dc-bg-deep);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* Bij de enkele kolom staat de kaart onder de lijst en is er breedte genoeg
   om beeld en tekst naast elkaar te zetten. */
.dc-faq__layout--single .dc-faq__card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: stretch;
}

.dc-faq__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--dc-graphite);
    overflow: hidden;
}

.dc-faq__layout--single .dc-faq__visual { aspect-ratio: auto; min-height: 280px; }

.dc-faq__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--dc-ease);
}

.dc-faq__card:hover .dc-faq__visual img { transform: scale(1.04); }

/* Het beeld loopt onderaan de inkt in, zodat er geen harde naad tussen foto
   en kaart staat. */
.dc-faq__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 22, 34, .1) 0%, rgba(14, 22, 34, .55) 55%, var(--dc-bg-deep) 100%);
}

.dc-faq__layout--single .dc-faq__visual::after {
    background: linear-gradient(110deg, rgba(14, 22, 34, .1) 0%, rgba(14, 22, 34, .5) 58%, var(--dc-bg-deep) 100%);
}

.dc-faq__visual-cap {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: var(--dc-r);
    background: rgba(14, 22, 34, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dc-faq__visual-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--dc-r-sm);
    background: var(--dc-blue);
    color: #fff;
}

.dc-faq__visual-ico svg { width: 16px; height: 16px; }

.dc-faq__visual-label {
    display: block;
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.dc-faq__visual-meta {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .58);
}

.dc-faq__card-body {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.4vw, 32px);
}

.dc-faq__card-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    margin-bottom: 16px;
    border-radius: var(--dc-r-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.dc-faq__card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #37d39f;
    flex: none;
}

.dc-faq__card-title {
    font-family: var(--dc-font);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.18;
    color: #fff;
}

.dc-faq__card-text {
    margin-top: 12px;
    font-size: .9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .6);
}

.dc-faq__usps {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.dc-faq__usp {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .9375rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

.dc-faq__usp-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}

.dc-faq__usp-ico svg { width: 14px; height: 14px; }

.dc-faq__usp-ico--blue     { color: #62aaf3; }
.dc-faq__usp-ico--green    { color: #37d39f; }
.dc-faq__usp-ico--graphite { color: rgba(255, 255, 255, .72); }
.dc-faq__usp-ico--amber    { color: #f0b64e; }

.dc-faq__actions {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.dc-faq__actions .dcx-btn { width: 100%; }

.dc-faq__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .48);
}

.dc-faq__meta svg { width: 14px; height: 14px; color: #37d39f; flex: none; }

/* --- Smaller ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .dc-faq__layout { grid-template-columns: minmax(0, 1fr); }

    .dc-faq__aside { width: 100%; max-width: 640px; margin-inline: auto; }

    .dc-faq__layout--single .dc-faq__card { grid-template-columns: minmax(0, 1fr); }

    .dc-faq__layout--single .dc-faq__visual {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .dc-faq__layout--single .dc-faq__visual::after {
        background: linear-gradient(180deg, rgba(14, 22, 34, .1) 0%, rgba(14, 22, 34, .55) 55%, var(--dc-bg-deep) 100%);
    }
}

@media (max-width: 640px) {
    .dcx .dc-faq__q { gap: 12px; padding: 15px; }

    .dc-faq__num { width: 36px; height: 36px; border-radius: 10px; font-size: 11.5px; }

    .dc-faq__q-text { font-size: 1rem; }

    .dc-faq__toggle { width: 30px; height: 30px; }

    .dc-faq__a-body {
        padding: 0 15px 15px;
        padding-left: calc(36px + 12px + 15px);
    }
}

/* ==========================================================================
   20. GEDEELDE BOUWSTENEN — dienstpagina's
   --------------------------------------------------------------------------
   De homepage kreeg zijn eigen secties. Alles daaronder wordt gebouwd met
   zes bouwstenen die hun vorm uit een variant halen. Deze laag beschrijft
   die zes; de tokens en de typografie komen ongewijzigd van boven.
   ========================================================================== */

/* -- accentkleuren per kaart ----------------------------------------------- */

.dcx-ico--blue { background: var(--dc-blue-soft); color: var(--dc-blue); }

/* Het cijferblok had wel opmaak voor de waarde en het label, maar geen
   omhulsel. Buiten de homepage stonden ze daardoor op één regel. */
.dcx-stat {
    display: grid;
    justify-items: start;
    gap: 0;
}

/* --------------------------------------------------------------------------
   20.1 Paginahero
   -------------------------------------------------------------------------- */

.dc-phero {
    position: relative;
    padding-block: clamp(64px, 8vw, 128px) clamp(56px, 7vw, 112px);
    overflow: clip;
}

/* Bootstrap uit het thema zet 2rem inspringing op elke lijst. In de hero moeten
   de pills, de kerncijfers en de logo's op dezelfde linkerlijn staan als de kop
   en de header, dus die inspringing gaat er hier af. */
.dc-phero :where(ul, ol) { padding-inline-start: 0; }

.dc-phero__shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.dc-phero--split .dc-phero__shell { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
.dc-phero--stack .dc-phero__shell,
.dc-phero--plain .dc-phero__shell { grid-template-columns: minmax(0, 1fr); }

.dc-phero--stack .dc-phero__copy { max-width: 900px; }

.dc-phero--plain .dc-phero__copy,
.dc-phero--nomedia .dc-phero__copy { max-width: 940px; }

.dc-phero__copy > * + * { margin-top: 24px; }

.dc-phero__title {
    /* Iets rustiger dan de homepage: hier draagt de kop een zoekvraag,
       geen merkbelofte. */
    font-size: clamp(2.375rem, 4.9vw, 4.5rem);
    letter-spacing: -.038em;
    line-height: 1.03;
    max-width: 18ch;
}

.dc-phero--stack .dc-phero__title,
.dc-phero--plain .dc-phero__title { max-width: 22ch; }

.dcx--deep .dc-phero__title { color: #fff; }

.dc-phero__lede { max-width: 52ch; }
.dcx--deep .dc-phero__lede { color: rgba(255, 255, 255, .68); }

.dc-phero__actions { margin-top: 32px; gap: 20px; }

.dc-phero__note {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    color: var(--dc-muted);
}

.dc-phero__note svg { width: 16px; height: 16px; color: var(--dc-green); flex: none; }
.dcx--deep .dc-phero__note { color: rgba(255, 255, 255, .6); }

/* -- het beeld ------------------------------------------------------------- */

.dc-phero__stage { position: relative; }

.dc-phero__frame { transform: perspective(1600px) rotateY(-2deg); }
.dc-phero--stack .dc-phero__frame { transform: none; }

.dc-frame--bare {
    border: 0;
    background: none;
    box-shadow: none;
}

.dc-phero__media img,
.dc-phero__media video,
.dc-split__media img,
.dc-split__media video {
    width: 100%;
    display: block;
}

.dc-phero__caption,
.dc-split__caption {
    padding: 14px 18px;
    border-top: 1px solid var(--dc-line);
    font-size: .8125rem;
    color: var(--dc-muted);
}

.dc-split__caption { border: 0; padding: 14px 2px 0; }

/* Twee plaatjes die half over het venster hangen: bewijs zonder een extra
   sectie. Op smalle schermen gaan ze onder het beeld staan. */
.dc-phero__chips {
    position: absolute;
    inset: auto -18px -26px auto;
    display: grid;
    gap: 10px;
    width: min(268px, 74%);
}

.dc-phero__chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--dc-r);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow);
}

.dc-phero__chip--1 { transform: translateX(-14%); }

.dc-phero__chipbody { display: grid; gap: 2px; min-width: 0; }

.dc-phero__chip .dcx-ico { width: 38px; height: 38px; border-radius: 10px; }
.dc-phero__chip .dcx-ico svg { width: 18px; height: 18px; }

.dc-phero__chip strong {
    font-family: var(--dc-font);
    font-size: .875rem;
    font-weight: 600;
    color: var(--dc-ink);
    letter-spacing: -.01em;
}

.dc-phero__chipbody span {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--dc-muted);
}

/* -- de voet met feiten en logo's ------------------------------------------ */

.dc-phero__foot {
    position: relative;
    z-index: 1;
    margin-top: clamp(56px, 6vw, 92px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--dc-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.dcx--deep .dc-phero__foot { border-top-color: var(--dc-line-dark); }

.dc-phero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 4vw, 64px);
}

.dc-phero__trust { display: grid; gap: 14px; }

.dc-phero__logos,
.dc-band__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   20.2 Mozaïek — de kaartensectie
   --------------------------------------------------------------------------
   Geen rij gelijke kaarten. Het raster is een mozaïek: één kaart draagt het
   verhaal en krijgt beeld en ruimte, de rest staat er als compacte cellen
   omheen. Over alles heen ligt de tekentaal van de merkfilms — haarlijnen,
   een kruisje op het snijpunt, mono volgnummers, een geschuinde icoonplaat
   en één accentlijn die bij aanwijzen over de bovenrand trekt.

   Elke vorm deelt dezelfde celanatomie. Wat verschilt is de indeling, dus
   staat hieronder eerst de cel en pas daarna wat elke vorm ermee doet.
   -------------------------------------------------------------------------- */

.dc-grid {
    position: relative;
    isolation: isolate;
}

/* ------------------------------------------------------------------ kop */

.dc-grid__head { margin-bottom: clamp(40px, 4.8vw, 76px); }

.dc-grid__head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
}

.dc-grid__head--left { max-width: 780px; }

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

.dc-grid__head--center .dcx-eyebrow { justify-content: center; }
.dc-grid__head--center .dcx-lede { margin-inline: auto; }
.dc-grid__head--center .dc-grid__counter { justify-content: center; }
.dc-grid__head .dcx-eyebrow { margin-bottom: 18px; }

.dc-grid__aside { display: grid; gap: 20px; }

.dc-grid__head--split .dc-grid__aside,
.dc-grid__head--left .dc-grid__aside { margin-top: 20px; }

/* De teller leest als een regelnummer in een tekening. */
.dc-grid__counter {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-grid__counter span {
    color: var(--dc-blue);
    font-size: .8125rem;
}

.dc-grid__counter::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dc-line);
}

.dcx--deep .dc-grid__counter::after { background: var(--dc-line-dark); }
.dcx--deep .dc-grid__counter span { color: #62aaf3; }

/* ----------------------------------------------------------------- raster */

.dc-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--dc-cols, 3), minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

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

/* ------------------------------------------------------------------- cel */

.dc-grid__item {
    display: flex;
    min-width: 0;
    /* De accentkleur van de kaart als eigen variabele, zodat lijn, plaat,
       cijfer en pijl uit dezelfde bron putten. */
    --dc-a: var(--dc-blue);
    --dc-a-rgb: var(--dc-blue-rgb);
    --dc-a-soft: var(--dc-blue-soft);
}

.dc-grid__item--green {
    --dc-a: #0d9668;
    --dc-a-rgb: var(--dc-green-rgb);
    --dc-a-soft: var(--dc-green-soft);
}

.dc-grid__item--graphite {
    --dc-a: var(--dc-graphite);
    --dc-a-rgb: var(--dc-graphite-rgb);
    --dc-a-soft: var(--dc-graphite-soft);
}

.dc-grid__item--amber {
    --dc-a: #c47c07;
    --dc-a-rgb: 245, 158, 11;
    --dc-a-soft: var(--dc-amber-soft);
}

.dcx--deep .dc-grid__item--graphite {
    --dc-a: #93a4bb;
    --dc-a-rgb: 147, 164, 187;
}

/* De cel draagt het uiterlijk; de li eromheen draagt alleen de reveal. Zo
   vecht de hover-beweging niet met de transitie van .dcx-reveal. */
.dc-grid__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    transition:
        transform var(--dc-mid) var(--dc-ease),
        border-color var(--dc-mid) var(--dc-ease),
        box-shadow var(--dc-mid) var(--dc-ease),
        background-color var(--dc-mid) var(--dc-ease);
}

/* Kruisje op de hoek: het merkteken van een technische tekening. */
.dc-grid__tick {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 3;
    width: 9px;
    height: 9px;
    pointer-events: none;
}

.dc-grid__tick::before,
.dc-grid__tick::after {
    content: "";
    position: absolute;
    background: var(--dc-line);
    transition: background-color var(--dc-mid) var(--dc-ease);
}

.dc-grid__tick::before { top: 4px; left: 0; right: 0; height: 1px; }
.dc-grid__tick::after { left: 4px; top: 0; bottom: 0; width: 1px; }

.dc-grid__item:hover .dc-grid__tick::before,
.dc-grid__item:hover .dc-grid__tick::after,
.dc-grid__item:focus-within .dc-grid__tick::before,
.dc-grid__item:focus-within .dc-grid__tick::after { background: var(--dc-a); }

.dcx--deep .dc-grid__tick::before,
.dcx--deep .dc-grid__tick::after { background: rgba(255, 255, 255, .22); }

/* De accentlijn trekt bij aanwijzen over de bovenrand. */
.dc-grid__scan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 2px;
    background: linear-gradient(90deg, var(--dc-a) 0%, rgba(var(--dc-a-rgb), 0) 96%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dc-slow) var(--dc-ease);
    pointer-events: none;
}

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

/* Volgnummer. In de gekaderde vormen staat het in de hoek, in de reeksen
   draagt het de leesvolgorde en krijgt het gewicht. */
.dc-grid__no {
    position: absolute;
    pointer-events: none;
    top: clamp(19px, 2vw, 26px);
    right: clamp(19px, 2vw, 26px);
    z-index: 2;
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    letter-spacing: .2em;
    color: var(--dc-faint);
    font-variant-numeric: tabular-nums;
    transition: color var(--dc-mid) var(--dc-ease);
}

.dc-grid__item:hover .dc-grid__no { color: var(--dc-a); }
.dcx--deep .dc-grid__no { color: rgba(255, 255, 255, .42); }

/* Schaduwcijfer achter de grote kaart. Nooit leesbaar, wel voelbaar. */
.dc-grid__ghost {
    position: absolute;
    right: 12px;
    bottom: -34px;
    z-index: 0;
    font-family: var(--dc-font);
    font-weight: 700;
    font-size: clamp(104px, 13vw, 208px);
    line-height: .74;
    letter-spacing: -.06em;
    color: rgba(var(--dc-a-rgb), .075);
    pointer-events: none;
    user-select: none;
}

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

/* ----------------------------------------------------------------- beeld */

.dc-grid__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--dc-bg-tint);
}

.dc-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--dc-ease);
}

.dc-grid__item:hover .dc-grid__media img { transform: scale(1.055); }

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

/* Mono labeltje op het beeld — een onderschrift, geen sticker. */
.dc-grid__tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: var(--dc-r-pill);
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    font-family: var(--dc-font-mono);
    font-size: .625rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dc-ink);
}

.dc-grid__tag i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-a);
}

/* ----------------------------------------------------------------- inhoud */

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

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

.dc-grid--numbered .dc-grid__top { padding-right: 32px; }

/* Geschuinde icoonplaat: twee hoeken afgesneden, zoals een montageplaatje.
   Bij aanwijzen loopt het accent van onder naar boven vol. */
.dc-grid__ico {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    color: var(--dc-a);
    background: var(--dc-a-soft);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    transition: color var(--dc-mid) var(--dc-ease);
}

.dc-grid__ico::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dc-a);
    transform: translateY(101%);
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-grid__ico svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
}

.dc-grid__item:hover .dc-grid__ico::before,
.dc-grid__item:focus-within .dc-grid__ico::before { transform: none; }
.dc-grid__item:hover .dc-grid__ico,
.dc-grid__item:focus-within .dc-grid__ico { color: #fff; }

.dcx--deep .dc-grid__ico { background: rgba(var(--dc-a-rgb), .16); }
.dcx--deep .dc-grid__item--blue .dc-grid__ico { color: #62aaf3; }
.dcx--deep .dc-grid__item:hover .dc-grid__ico { color: var(--dc-bg-deep); }

.dc-grid__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid rgba(var(--dc-a-rgb), .28);
    border-radius: var(--dc-r-pill);
    font-family: var(--dc-font-mono);
    font-size: .625rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dc-a);
}

.dc-grid__title {
    letter-spacing: -.016em;
    font-size: 1.125rem;
}

.dc-grid--numbered .dc-grid__title { padding-right: 26px; }

.dc-grid__link {
    color: inherit;
    transition: color var(--dc-fast) var(--dc-ease);
}

.dc-grid__item:hover .dc-grid__link { color: var(--dc-a); }
.dcx--deep .dc-grid__item:hover .dc-grid__link { color: #fff; }

.dc-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.dc-grid__text {
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--dc-muted);
}

.dcx--deep .dc-grid__text { color: rgba(255, 255, 255, .66); }
.dcx--deep .dc-grid__title { color: #fff; }

.dc-grid__checks { padding-top: 2px; }

.dcx--deep .dc-grid__checks li { color: rgba(255, 255, 255, .78); }

/* Cijfer: het bewijs in één regel. */
.dc-grid__stat {
    display: flex;
    align-items: baseline;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
}

.dc-grid__stat b {
    font-family: var(--dc-font);
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--dc-a);
    font-variant-numeric: tabular-nums;
}

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

.dcx--deep .dc-grid__item--blue .dc-grid__stat b { color: #62aaf3; }

/* Pijllink met een eigen rondje, zodat de kaart een duidelijk eindpunt heeft. */
.dc-grid__more {
    margin-top: auto;
    padding-top: 8px;
}

.dc-grid__stat + .dc-grid__more { margin-top: 0; }

.dc-grid__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--dc-font);
    font-weight: 500;
    font-size: .9375rem;
    color: var(--dc-ink);
}

.dc-grid__cta i {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--dc-line);
    border-radius: 50%;
    color: var(--dc-a);
    transition:
        background-color var(--dc-mid) var(--dc-ease),
        border-color var(--dc-mid) var(--dc-ease),
        color var(--dc-mid) var(--dc-ease);
}

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

.dc-grid__item:hover .dc-grid__cta i,
.dc-grid__item:focus-within .dc-grid__cta i {
    background: var(--dc-a);
    border-color: var(--dc-a);
    color: #fff;
}

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

.dcx--deep .dc-grid__cta { color: #fff; }
.dcx--deep .dc-grid__cta i { border-color: var(--dc-line-dark); }
.dcx--deep .dc-grid__item:hover .dc-grid__cta i { color: var(--dc-bg-deep); }

/* ==========================================================================
   Vormen
   ========================================================================== */

/* -- Gekaderd: mozaïek, kaarten, panelen ---------------------------------- */

.dc-grid--mosaic .dc-grid__cell,
.dc-grid--cards .dc-grid__cell,
.dc-grid--panels .dc-grid__cell {
    overflow: hidden;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
}

.dc-grid--mosaic .dc-grid__body,
.dc-grid--cards .dc-grid__body,
.dc-grid--panels .dc-grid__body { padding: clamp(24px, 2.4vw, 34px); }

.dc-grid--mosaic .dc-grid__item:hover .dc-grid__cell,
.dc-grid--cards .dc-grid__item:hover .dc-grid__cell,
.dc-grid--panels .dc-grid__item:hover .dc-grid__cell {
    transform: translateY(-4px);
    border-color: rgba(var(--dc-a-rgb), .38);
    box-shadow: var(--dc-shadow-lg);
}

.dcx--white.dc-grid--mosaic .dc-grid__cell,
.dcx--white.dc-grid--cards .dc-grid__cell,
.dcx--white.dc-grid--panels .dc-grid__cell,
.dcx--white.dc-grid--blueprint .dc-grid__list,
.dcx--white.dc-grid--blueprint .dc-grid__cell { background: var(--dc-bg); }

.dcx--deep.dc-grid--mosaic .dc-grid__cell,
.dcx--deep.dc-grid--cards .dc-grid__cell,
.dcx--deep.dc-grid--panels .dc-grid__cell {
    background: rgba(255, 255, 255, .04);
    border-color: var(--dc-line-dark);
}

.dcx--deep.dc-grid--mosaic .dc-grid__item:hover .dc-grid__cell,
.dcx--deep.dc-grid--cards .dc-grid__item:hover .dc-grid__cell,
.dcx--deep.dc-grid--panels .dc-grid__item:hover .dc-grid__cell {
    background: rgba(255, 255, 255, .065);
    border-color: rgba(var(--dc-a-rgb), .5);
}

/* -- Mozaïek: één kaart draagt, de rest sluit aan ------------------------- */

.dc-grid--mosaic .dc-grid__list { grid-auto-rows: minmax(196px, auto); }

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

/* Op twee kolommen is "groot" simpelweg de volle breedte; een tweede rij
   erbij zou de kaart uitrekken zonder dat er inhoud tegenover staat. */
.dc-grid--c2.dc-grid--mosaic .dc-grid__item--feature { grid-row: span 1; }

/* De grote kaart met beeld staat naast elkaar: beeld links, verhaal rechts. */
.dc-grid--mosaic .dc-grid__item--feature.dc-grid__item--media .dc-grid__cell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: stretch;
}

.dc-grid--mosaic .dc-grid__item--feature.dc-grid__item--media .dc-grid__media {
    height: 100%;
    aspect-ratio: auto;
}

.dc-grid--mosaic .dc-grid__item--feature .dc-grid__body { justify-content: center; }

.dc-grid--mosaic .dc-grid__item--feature .dc-grid__stat,
.dc-grid--mosaic .dc-grid__item--feature .dc-grid__more { margin-top: 4px; }

.dc-grid--mosaic .dc-grid__item--feature .dc-grid__title {
    font-size: clamp(1.375rem, 1.9vw, 1.75rem);
    line-height: 1.22;
}

.dc-grid--mosaic .dc-grid__item--feature .dc-grid__text { font-size: 1rem; }
.dc-grid--mosaic .dc-grid__item--feature .dc-grid__ico { width: 58px; height: 58px; }
.dc-grid--mosaic .dc-grid__item--feature .dc-grid__ico svg { width: 24px; height: 24px; }

/* De kleine cellen naast de grote kaart houden hun beeld smal, anders wint
   het plaatje het van de tekst die ernaast staat. */
.dc-grid--mosaic .dc-grid__item--small .dc-grid__media { aspect-ratio: 16 / 9; }

/* -- Tekening: één naadloos haarlijnraster -------------------------------- */

.dc-grid--blueprint .dc-grid__list {
    gap: 1px;
    overflow: hidden;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
}

/* Elke cel legt zelf een haarlijn van 1px om zich heen. Die valt precies in
   de kier tussen twee cellen, dus twee buren delen één lijn — en waar geen
   cel staat blijft het vlak leeg in plaats van dichtgekleurd. */
.dc-grid--blueprint .dc-grid__cell { box-shadow: 0 0 0 1px var(--dc-line); }

.dc-grid--blueprint .dc-grid__cell {
    background: var(--dc-surface);
    padding: clamp(26px, 2.8vw, 40px);
}

.dc-grid--blueprint .dc-grid__item:hover { z-index: 2; }

.dc-grid--blueprint .dc-grid__item:hover .dc-grid__cell {
    background: var(--dc-bg-tint);
    transform: none;
}

/* Het kruisje gaat op het snijpunt van vier cellen staan. */
.dc-grid--blueprint .dc-grid__media {
    margin: calc(clamp(26px, 2.8vw, 40px) * -1) calc(clamp(26px, 2.8vw, 40px) * -1) clamp(20px, 2vw, 26px);
}

.dcx--deep.dc-grid--blueprint .dc-grid__list {
    background: var(--dc-bg-deep);
    border-color: var(--dc-line-dark);
}

.dcx--deep.dc-grid--blueprint .dc-grid__cell {
    background: var(--dc-bg-deep);
    box-shadow: 0 0 0 1px var(--dc-line-dark);
}
.dcx--deep.dc-grid--blueprint .dc-grid__item:hover .dc-grid__cell { background: rgba(255, 255, 255, .05); }

/* -- Reeks: brede rijen met een groot nummer ------------------------------ */

.dc-grid--stack .dc-grid__list {
    gap: 0;
    border-top: 1px solid var(--dc-line);
}

.dc-grid--stack .dc-grid__cell {
    display: grid;
    grid-template-columns: clamp(58px, 6vw, 92px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(26px, 2.8vw, 44px) 0;
    border-bottom: 1px solid var(--dc-line);
}

.dc-grid--stack .dc-grid__item--media .dc-grid__cell {
    grid-template-columns: clamp(58px, 6vw, 92px) minmax(0, 1fr) clamp(150px, 19vw, 260px);
}

.dc-grid--stack .dc-grid__item:hover .dc-grid__cell { transform: translateX(6px); }

.dc-grid--stack .dc-grid__no {
    position: static;
    font-family: var(--dc-font);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: .9;
    letter-spacing: -.045em;
    color: rgba(var(--dc-graphite-rgb), .26);
}

.dc-grid--stack .dc-grid__item:hover .dc-grid__no { color: var(--dc-a); }

/* Het beeld staat in de derde kolom, dus moet het uit de bronvolgorde
   worden gehaald: in de tekst komt het verhaal eerst. */
.dc-grid--stack .dc-grid__media {
    order: 3;
    border-radius: var(--dc-r);
    aspect-ratio: 4 / 3;
}

.dc-grid--stack .dc-grid__body { order: 2; }
.dc-grid--stack .dc-grid__scan { top: -1px; }
.dc-grid--stack .dc-grid__tick { display: none; }
.dc-grid--stack .dc-grid__title { font-size: clamp(1.125rem, 1.7vw, 1.375rem); padding-right: 0; }
.dc-grid--stack .dc-grid__text { max-width: 62ch; }

.dcx--deep.dc-grid--stack .dc-grid__list { border-top-color: var(--dc-line-dark); }
.dcx--deep.dc-grid--stack .dc-grid__cell { border-bottom-color: var(--dc-line-dark); }
.dcx--deep.dc-grid--stack .dc-grid__no { color: rgba(255, 255, 255, .18); }

/* -- Panelen: het beeld voert -------------------------------------------- */

.dc-grid--panels .dc-grid__media { aspect-ratio: 3 / 2; }
.dc-grid--panels .dc-grid__title { font-size: 1.1875rem; }

/* -- Genummerde reeks: de rail loopt vol bij binnenkomst ------------------ */

.dc-grid--steps .dc-grid__cell,
.dc-grid--checks .dc-grid__cell,
.dc-grid--plain .dc-grid__cell { gap: 13px; }

.dc-grid--steps .dc-grid__cell { padding-top: 26px; }

.dc-grid--steps .dc-grid__cell::before,
.dc-grid--steps .dc-grid__cell::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.dc-grid--steps .dc-grid__cell::before { background: var(--dc-line); }

.dc-grid--steps .dc-grid__cell::after {
    background: var(--dc-a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--dc-ease);
    transition-delay: var(--dc-delay, 0ms);
}

.dc-grid--steps .dc-grid__item.is-in .dc-grid__cell::after,
.no-js .dc-grid--steps .dc-grid__cell::after { transform: none; }

.dc-grid--steps .dc-grid__no {
    position: static;
    order: -1;
    font-size: .8125rem;
    color: var(--dc-a);
}

.dc-grid--steps .dc-grid__scan { display: none; }
.dc-grid--steps .dc-grid__tick { display: none; }
.dc-grid--steps .dc-grid__title { padding-right: 0; }

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

/* -- Vinklijst: het vinkje vervangt de plaat ------------------------------ */

.dc-grid--checks .dc-grid__title {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding-right: 0;
}

.dc-grid--checks .dc-grid__title::before {
    content: "";
    flex: none;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--dc-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9668' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.dc-grid--checks .dc-grid__text,
.dc-grid--checks .dc-grid__checks { padding-left: 32px; }

.dc-grid--checks .dc-grid__scan,
.dc-grid--checks .dc-grid__tick { display: none; }

.dc-grid--checks .dc-grid__no,
.dc-grid--plain .dc-grid__no {
    position: static;
    order: -1;
    margin-bottom: 2px;
}

/* -- Kale kolommen: één haarlijn die het accent aanneemt ------------------ */

.dc-grid--plain .dc-grid__cell {
    padding-left: clamp(18px, 1.8vw, 26px);
    border-left: 1px solid var(--dc-line);
    transition: border-color var(--dc-mid) var(--dc-ease);
}

.dc-grid--plain .dc-grid__item:hover .dc-grid__cell { border-left-color: var(--dc-a); }
.dc-grid--plain .dc-grid__scan,
.dc-grid--plain .dc-grid__tick { display: none; }
.dc-grid--plain .dc-grid__title { padding-right: 0; }

.dcx--deep.dc-grid--plain .dc-grid__cell { border-left-color: var(--dc-line-dark); }

/* ------------------------------------------------------------------ slot */

.dc-grid__foot {
    margin-top: clamp(36px, 4vw, 56px);
    padding-top: clamp(24px, 2.6vw, 36px);
    border-top: 1px solid var(--dc-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dcx--deep .dc-grid__foot { border-top-color: var(--dc-line-dark); }

.dc-grid__footnote {
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dc-muted);
}

.dcx--deep .dc-grid__footnote { color: rgba(255, 255, 255, .66); }

/* --------------------------------------------------------------------------
   20.3 Beeld naast tekst
   -------------------------------------------------------------------------- */

.dc-split__head { margin-bottom: clamp(48px, 5vw, 80px); }

.dc-split__rows { display: grid; gap: clamp(64px, 7vw, 128px); }

.dc-split__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(32px, 4.4vw, 80px);
    align-items: center;
}

.dc-split__row--flip .dc-split__copy { order: 2; }
.dc-split__row--flip .dc-split__stage { order: 1; }
.dc-split__row--nomedia { grid-template-columns: minmax(0, 1fr); max-width: 780px; }

.dc-split__copy > * + * { margin-top: 18px; }
.dc-split__tag { color: var(--dc-blue); }
.dc-split__title { font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.14; }
.dcx--deep .dc-split__title { color: #fff; }
.dc-split__text { max-width: 54ch; }
.dcx--deep .dc-split__text { color: rgba(255, 255, 255, .66); }
.dc-split__checks { margin-top: 22px; }
.dc-split__stat { margin-top: 26px; display: block; }
.dc-split__more { margin-top: 24px; }

.dc-split__stage { min-width: 0; }
.dc-split__frame { overflow: hidden; }

/* --------------------------------------------------------------------------
   20.4 Keten
   -------------------------------------------------------------------------- */

.dc-flow__head { margin-bottom: clamp(48px, 5vw, 76px); }

.dc-flow__chain {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
}

.dc-flow__node {
    position: relative;
    display: grid;
    gap: 18px;
    padding-right: 20px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--dc-ease), transform .6s var(--dc-ease);
    transition-delay: var(--dc-delay, 0ms);
}

.dcx-reveal.is-in .dc-flow__node { opacity: 1; transform: none; }
.no-js .dc-flow__node { opacity: 1; transform: none; }

.dc-flow__marker {
    position: relative;
    display: flex;
    align-items: center;
}

.dc-flow__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 13px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
    border: 1px solid rgba(var(--dc-blue-rgb), .2);
}

.dc-flow__node--green .dc-flow__ico {
    background: var(--dc-green-soft);
    color: var(--dc-green);
    border-color: rgba(var(--dc-green-rgb), .24);
}

.dc-flow__node--graphite .dc-flow__ico {
    background: var(--dc-graphite-soft);
    color: var(--dc-graphite);
    border-color: rgba(var(--dc-graphite-rgb), .2);
}

.dcx--deep .dc-flow__ico {
    background: rgba(var(--dc-blue-rgb), .16);
    border-color: rgba(var(--dc-blue-rgb), .3);
    color: #62aaf3;
}

.dcx--deep .dc-flow__node--green .dc-flow__ico {
    background: rgba(var(--dc-green-rgb), .14);
    border-color: rgba(var(--dc-green-rgb), .28);
    color: #4ad9a5;
}

.dcx--deep .dc-flow__node--graphite .dc-flow__ico {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .78);
}

.dc-flow__ico svg { width: 21px; height: 21px; }

/* De draad tussen twee schakels tekent zichzelf zodra de sectie in beeld is. */
.dc-flow__wire {
    flex: 1;
    height: 1px;
    margin-left: 14px;
    background: linear-gradient(90deg, var(--dc-line) 0%, var(--dc-line) 100%);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .8s var(--dc-ease);
    transition-delay: calc(var(--dc-delay, 0ms) + 180ms);
}

.dcx--deep .dc-flow__wire { background: var(--dc-line-dark); }
.dcx-reveal.is-in .dc-flow__wire { transform: scaleX(1); }
.no-js .dc-flow__wire { transform: scaleX(1); }

.dc-flow__body { display: grid; gap: 7px; }

.dc-flow__step {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--dc-faint);
}

.dc-flow__label {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--dc-ink);
}

.dcx--deep .dc-flow__label { color: #fff; }

.dc-flow__note {
    font-size: .875rem;
    line-height: 1.58;
    color: var(--dc-muted);
}

.dcx--deep .dc-flow__note { color: rgba(255, 255, 255, .6); }

.dc-flow__foot {
    margin-top: clamp(48px, 5vw, 80px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--dc-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.dcx--deep .dc-flow__foot { border-top-color: var(--dc-line-dark); }

.dc-flow__claim {
    max-width: 46ch;
    font-family: var(--dc-font);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.022em;
    color: var(--dc-ink);
}

.dcx--deep .dc-flow__claim { color: #fff; }

/* --------------------------------------------------------------------------
   20.5 Bewijsstrook
   -------------------------------------------------------------------------- */

.dc-band { padding-block: clamp(36px, 4vw, 60px); border-block: 1px solid var(--dc-line); }
.dcx--deep.dc-band { border-color: var(--dc-line-dark); }

.dc-band__shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}

.dc-band__label { flex: none; }

.dc-band__facts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 4vw, 64px);
}

.dc-band__claim { max-width: 62ch; }

.dc-band__claim p {
    font-family: var(--dc-font);
    font-size: clamp(1.375rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.026em;
    color: var(--dc-ink);
}

.dcx--deep .dc-band__claim p { color: #fff; }
.dc-band__claim cite { display: block; margin-top: 14px; font-style: normal; }
.dc-band__link { flex: none; }

/* --------------------------------------------------------------------------
   20.6 Afweging
   -------------------------------------------------------------------------- */

.dc-table__head { margin-bottom: clamp(40px, 4.6vw, 68px); }

/* Brede inhoud schuift binnen zijn eigen kader; de pagina zelf schuift nooit. */
.dc-table__scroll {
    overflow-x: auto;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
}

.dc-table__grid {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    text-align: left;
}

.dc-table__grid th,
.dc-table__grid td {
    padding: 18px clamp(16px, 1.6vw, 26px);
    vertical-align: top;
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-table__grid tbody tr:last-child th,
.dc-table__grid tbody tr:last-child td { border-bottom: 0; }

.dc-table__grid thead th {
    border-bottom: 1px solid var(--dc-line);
    background: var(--dc-bg-tint);
}

.dc-table__col { width: 32%; }

.dc-table__col--b { background: rgba(var(--dc-blue-rgb), .05); }
.dc-table__cell--b { background: rgba(var(--dc-blue-rgb), .028); }

.dc-table__coltitle {
    display: block;
    font-family: var(--dc-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--dc-ink);
}

.dc-table__colnote {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--dc-muted);
}

.dc-table__grid tbody th {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dc-ink);
}

.dc-table__cell {
    font-size: .9375rem;
    line-height: 1.56;
    color: var(--dc-muted);
}

/* Teken en tekst staan naast elkaar op één regel. De cel blijft een echte
   table-cell (anders vervalt de kolombreedte van de tabel); het flexen gebeurt
   in de wikkel erbinnen. Loopt de tekst door, dan lijnt de tweede regel uit
   onder de eerste letter en niet onder het teken. */
.dc-table__val {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.dc-table__valtext { min-width: 0; }

.dc-table__sign {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
}

.dc-table__sign svg { width: 12px; height: 12px; stroke-width: 3; }
.dc-table__sign--yes { background: var(--dc-green-soft); color: #0d9668; }
.dc-table__sign--no { background: var(--dc-red-soft); color: var(--dc-red); }
.dc-table__sign--no svg { width: 15px; height: 15px; stroke-width: 2; }

/* -- offerte ---------------------------------------------------------------- */

/* Geen prijskaarten: bedragen verschillen per klant, dus deze vorm vraagt om
   een offerte in plaats van een reeks met richtprijzen. */

.dc-table__quote {
    display: grid;
    justify-items: start;
    gap: 18px;
    max-width: 68ch;
    margin-inline: auto;
    padding: clamp(28px, 3.4vw, 52px);
    background: var(--dc-surface);
    border: 1px solid rgba(var(--dc-blue-rgb), .3);
    border-radius: var(--dc-r-lg);
    box-shadow: var(--dc-shadow-lg);
}

.dc-table__quotelabel {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-family: var(--dc-font);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dc-blue);
    background: rgba(var(--dc-blue-rgb), .08);
    border-radius: 999px;
}

.dc-table__quotetitle { max-width: 24ch; }

.dc-table__quotetext {
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--dc-muted);
}

.dc-table__quotepoints { width: 100%; }

.dc-table__quoteaction { margin-top: 6px; }

.dc-table__foot {
    margin-top: clamp(32px, 3.4vw, 48px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dc-table__note {
    max-width: 62ch;
    font-size: .875rem;
    line-height: 1.62;
    color: var(--dc-faint);
}

/* --------------------------------------------------------------------------
   20.7 Responsief — mobiel wordt opnieuw gezet, niet verkleind
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .dc-grid--c4 { --dc-cols: 2; }

    /* Vanaf hier past de grote kaart nog wel naast één cel, maar niet meer
       naast twee: de tweede rij zou leeg blijven. */
    .dc-grid--c4.dc-grid--mosaic .dc-grid__item--feature { grid-row: span 1; }
    .dc-grid--stack .dc-grid__item--media .dc-grid__cell { grid-template-columns: clamp(58px, 6vw, 92px) minmax(0, 1fr) clamp(130px, 17vw, 200px); }
    .dc-flow__chain { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
    .dc-flow__node { grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; padding-right: 0; }
    .dc-flow__marker { flex-direction: column; align-items: center; height: 100%; }
    .dc-flow__wire { width: 1px; height: auto; margin: 12px 0 0; flex: 1; transform: scaleY(0); transform-origin: top; }
    .dcx-reveal.is-in .dc-flow__wire { transform: scaleY(1); }
    .no-js .dc-flow__wire { transform: scaleY(1); }
}

@media (max-width: 1024px) {
    .dc-phero--split .dc-phero__shell { grid-template-columns: minmax(0, 1fr); }
    .dc-phero__frame { transform: none; }
    .dc-phero__title { max-width: 22ch; }
    .dc-grid--c3 { --dc-cols: 2; }
    .dc-grid--c3.dc-grid--mosaic .dc-grid__item--feature { grid-row: span 1; }

    /* Beeld naast tekst wordt beeld boven tekst zodra de kolom smaller is
       dan het beeld zelf. */
    .dc-grid--mosaic .dc-grid__item--feature.dc-grid__item--media .dc-grid__cell { grid-template-columns: minmax(0, 1fr); }
    .dc-grid--mosaic .dc-grid__item--feature.dc-grid__item--media .dc-grid__media { aspect-ratio: 16 / 9; height: auto; }
    .dc-grid--mosaic .dc-grid__list { grid-auto-rows: auto; }
    .dc-grid__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .dc-split__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .dc-split__row--flip .dc-split__copy,
    .dc-split__row--flip .dc-split__stage { order: 0; }
    .dc-split__text { max-width: none; }
}

@media (max-width: 720px) {
    .dc-phero { padding-block: 52px 48px; }
    .dc-phero__actions { gap: 16px; }
    .dc-phero__actions .dcx-btn { width: 100%; justify-content: space-between; }

    /* De plaatjes hangen op mobiel niet meer over het beeld: daar is geen
       ruimte voor, en half afgesneden bewijs is geen bewijs. */
    .dc-phero__chips {
        position: static;
        width: 100%;
        margin-top: 14px;
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    }

    .dc-phero__chip--1 { transform: none; }
    .dc-phero__foot { margin-top: 40px; gap: 24px; }
    .dc-phero__facts { gap: 22px 32px; }

    .dc-grid--c2,
    .dc-grid--c3,
    .dc-grid--c4 { --dc-cols: 1; }

    /* Eén kolom kent geen uitschieters meer: elke kaart is even breed. De
       selector moet even zwaar wegen als die van de vorm zelf, anders blijft
       "span 2" staan en loopt het raster het scherm uit. */
    .dc-grid--mosaic .dc-grid__item--feature,
    .dc-grid--mosaic .dc-grid__item--wide { grid-column: auto; grid-row: auto; }

    .dc-grid--stack .dc-grid__cell,
    .dc-grid--stack .dc-grid__item--media .dc-grid__cell {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .dc-grid--stack .dc-grid__media { order: 0; aspect-ratio: 16 / 9; }
    .dc-grid--stack .dc-grid__item:hover .dc-grid__cell { transform: none; }
    .dc-grid--blueprint .dc-grid__cell { padding: clamp(24px, 6vw, 32px); }

    .dc-grid__foot,
    .dc-flow__foot,
    .dc-table__foot { flex-direction: column; align-items: flex-start; }

    .dc-band__shell { flex-direction: column; align-items: flex-start; }
    .dc-split__rows { gap: 56px; }
}

@media (max-width: 420px) {
    .dc-phero__title { font-size: 2.125rem; }
    .dc-phero__chips { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-grid__item,
    .dc-grid__cell,
    .dc-grid__scan,
    .dc-flow__node,
    .dc-flow__wire,
    .dc-table__quote {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   31. HERO MET AANVRAAGFORMULIER
   --------------------------------------------------------------------------
   De opbouw "aanvraag" van de paginahero. Links de belofte met daaronder de
   cases als stapel browservensters, elk met een knop naar de site die erbij
   hoort; rechts de kaart waarin de bezoeker meteen kan aanvragen.
   Het formulier weegt visueel even zwaar als de kop: wie na drie regels al
   weet wat hij wil, hoeft niet te scrollen.

   Op een smal scherm klapt het naar één kolom in de volgorde belofte →
   formulier → cases. Een case is bewijs, en bewijs komt na de mogelijkheid om
   te handelen; wie het eerst wil zien scrolt een schermhoogte verder.
   ========================================================================== */

.dc-phero--form .dc-phero__shell {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .84fr);
    grid-template-areas: "copy form";
    align-items: start;
    column-gap: clamp(40px, 4.4vw, 76px);
    row-gap: clamp(34px, 4vw, 56px);
}

.dc-phero--form .dc-phero__copy  { grid-area: copy; min-width: 0; }
.dc-phero--form .dc-phero__aside { grid-area: form; min-width: 0; }

/* Het bewijs hoort bij de belofte: de cases staan in de kolom van de kop, op
   dezelfde linkerlijn, en niet als losse strook onder de hero. */
.dc-phero--form .dc-phero__proof { min-width: 0; }
.dc-phero--form .dc-phero__copy > .dc-phero__proof { margin-top: clamp(34px, 4vw, 56px); }

/* De kop mag hier niet de volle heropmaat aannemen: naast een formulierkaart
   leest een regel van vier woorden breed prettiger dan een van twee. */
.dc-phero--form .dc-phero__title {
    font-size: clamp(2.25rem, 3.6vw, 3.75rem);
    max-width: 15ch;
}

.dc-phero--form .dc-phero__lede { max-width: 46ch; }

/* --- Kernwoorden onder de belofte ---------------------------------------- */

/* Geen dienstenlijst maar een adempauze: zes woorden die zeggen waar het over
   gaat, in de mono van de labels zodat ze niet met de kop concurreren. */
.dc-phero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.dc-phero__pills li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 12px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--dc-muted);
    white-space: nowrap;
}

.dc-phero__pills li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dc-blue);
    opacity: calc(1 - var(--dc-i, 0) * .13);
    flex: none;
}

.dcx--deep .dc-phero__pills li {
    background: rgba(255, 255, 255, .05);
    border-color: var(--dc-line-dark);
    color: rgba(255, 255, 255, .68);
}

/* --- De formulierkaart ---------------------------------------------------- */

.dc-formcard {
    position: relative;
    padding: clamp(24px, 2.4vw, 36px);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-xl);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
}

/* Eén haarlijn blauw over de bovenrand — genoeg om de kaart het zwaartepunt
   van de hero te maken zonder er een gekleurd blok van te maken. */
.dc-formcard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg,
        var(--dc-blue) 0%,
        rgba(var(--dc-blue-rgb), .45) 42%,
        rgba(var(--dc-blue-rgb), 0) 100%);
}

.dc-formcard__glow {
    position: absolute;
    inset: -40% -30% auto -30%;
    height: 70%;
    background: radial-gradient(50% 60% at 50% 0%, rgba(var(--dc-blue-rgb), .09), transparent 72%);
    pointer-events: none;
}

.dc-formcard__head {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
}

.dc-formcard__title {
    font-family: var(--dc-font);
    font-size: clamp(1.375rem, 1.9vw, 1.75rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.03em;
    color: var(--dc-ink);
    text-wrap: balance;
}

.dc-formcard__text {
    margin-top: 10px;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--dc-muted);
    max-width: 44ch;
}

.dc-formcard .dcx-cf7 { position: relative; z-index: 1; }

.dc-formcard__note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dc-line-soft);
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--dc-faint);
}

.dc-formcard__note svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--dc-green);
}

/* In een kaart is er geen ruimte voor twee kolommen naast elkaar zodra de
   kolom zelf smal wordt. De velden staan daarom onder elkaar, behalve waar
   het formulier zelf om een paar vraagt. */
.dcx-cf7--card .dc-form-grid { gap: 14px; }

@media (max-width: 1320px) {
    .dcx-cf7--card .dc-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- De case onder de belofte -------------------------------------------- */

.dc-phero__proof-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-phero__proof-label span {
    width: 22px;
    height: 1px;
    background: var(--dc-blue);
    flex: none;
}

.dcx--deep .dc-phero__proof-label { color: rgba(255, 255, 255, .5); }

/* De case onder de belofte is niet langer een kaartje met een miniatuurtje
   erin, maar dezelfde stapel browservensters als in de casesectie: dezelfde
   cascade, dezelfde gloed eronder, hetzelfde zwevende label. Alleen de
   volgorde is omgedraaid — beeld links, tekst rechts — want rechts in deze
   hero staat het aanvraagformulier, en dat wint van een casetekst. */
.dc-cases__split--hero {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(22px, 2.6vw, 40px);
    align-items: center;
}

/* De stapel deelt zijn regel met een formulier, dus hij staat iets vlakker
   dan op de homepage en de adresbalk is een maat fijner. Het zwevende label
   hangt onder het voorste venster; die ruimte geven we hem. */
/* In de hero deelt de stapel zijn regel met een formulier. Hij staat daarom
   iets rechter op: een kleinere waaier en een tikje meer hoogte, zodat het
   achterste venster niet over het label erboven heen kruipt. */
.dc-cases__split--hero .dc-deck {
    aspect-ratio: 1.2;
    margin-bottom: 16px;
    --dc-fan-x: 7%;
    --dc-fan-y: -11%;
    --dc-fan-scale: .04;
}

.dc-cases__split--hero .dc-cases__deck::before { inset: -12% -12% -16% -10%; }

.dc-cases__split--hero .dc-card__chrome { padding: 8px 11px; }
.dc-cases__split--hero .dc-card__url { font-size: 10px; }
.dc-cases__split--hero .dc-card__dots i { width: 5px; height: 5px; }
.dc-cases__split--hero .dc-card__badge { padding: 8px 14px; gap: 8px; }
.dc-cases__split--hero .dc-card__badge--live { padding: 8px 15px 8px 11px; }

/* Rechts alleen het hoognodige: wie het is, wat er staat en de knop ernaartoe.
   Zonder kop erboven hoeft het paneel geen aanloop. */
.dc-cases__split--hero .dc-cases__panels { margin-top: 0; }

.dc-cases__split--hero .dc-panel { gap: 12px; }

.dc-cases__split--hero .dc-panel__client {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    margin-top: 6px;
}

.dc-cases__split--hero .dc-panel__result {
    margin-top: 8px;
    font-size: .875rem;
    line-height: 1.5;
}

.dc-cases__split--hero .dc-panel__result svg { width: 16px; height: 16px; }

/* De knop hoort bij de case en niet bij de hero: klein en omlijnd, met
   dezelfde pijl als elders, zodat hij de aanvraagknop niet beconcurreert. */
.dc-cases__split--hero .dc-panel__cta { margin-top: 4px; }

.dc-cases__split--hero .dc-cases__bar {
    margin-top: 18px;
    padding-top: 14px;
    gap: 12px;
}

.dc-cases__split--hero .dc-cases__btn { width: 30px; height: 30px; }
.dc-cases__split--hero .dc-cases__btn svg { width: 14px; height: 14px; }
.dc-cases__split--hero .dc-cases__tick { width: 16px; }

.dcx--deep .dc-cases__split--hero .dc-cases__bar { border-top-color: var(--dc-line-dark); }

/* --- Smaller ------------------------------------------------------------- */

@media (max-width: 1080px) {
    /* Eén kolom, en de belofte valt uit elkaar: eyebrow, kop en introregel
       staan boven het formulier, de kernwoorden en de case eronder. Wie na
       drie regels weet wat hij wil, hoeft niet eerst langs een lijst en een
       case voordat hij kan aanvragen.

       display:contents haalt de wikkel uit de opmaak zonder de HTML te
       veranderen: de kinderen worden zelf rasterkinderen en kunnen dus een
       eigen volgorde krijgen. */
    .dc-phero--form .dc-phero__shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        row-gap: 22px;
    }

    .dc-phero--form .dc-phero__copy { display: contents; }
    .dc-phero--form .dc-phero__copy > * { margin-top: 0; }

    .dc-phero--form .dcx-eyebrow       { order: 1; }
    .dc-phero--form .dc-phero__title   { order: 2; max-width: 18ch; }
    .dc-phero--form .dc-phero__lede    { order: 3; }
    .dc-phero--form .dc-phero__aside   { order: 4; grid-area: auto; max-width: 560px; margin-top: 6px; }
    .dc-phero--form .dc-phero__pills   { order: 5; margin-top: 6px; }
    .dc-phero--form .dc-phero__actions { order: 6; margin-top: 0; }
    .dc-phero--form .dc-phero__note    { order: 7; }
    .dc-phero--form .dc-phero__copy > .dc-phero__proof { order: 8; grid-area: auto; margin-top: 10px; }

    /* De casesectie klapt hieronder al naar één kolom; de stapel in de hero
       krijgt hier juist de volle breedte terug en blijft naast zijn tekst
       staan, want er staat geen kop meer boven. */
    .dc-cases__split--hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}

@media (max-width: 720px) {
    .dc-cases__split--hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .dc-cases__split--hero .dc-deck { aspect-ratio: 1.38; }
    .dc-phero__pills { gap: 7px; }
    .dc-phero__pills li { padding: 6px 12px 6px 10px; font-size: 11px; }
}

@media (max-width: 480px) {
    .dc-formcard { padding: 20px 18px; border-radius: var(--dc-r-lg); }
    .dc-cases__split--hero .dc-deck { aspect-ratio: 1.44; }
}

/* ==========================================================================
   32. KETEN ALS WAAIER — werk dat wordt opgesplitst
   --------------------------------------------------------------------------
   De vorm "waaier" van dc-flow. Bovenaan wie de opdracht krijgt, daaronder
   de gespecialiseerde taken naast elkaar, en daaronder komt het weer samen.
   De draden zijn dezelfde SVG-klassen als in de groeisectie (.dc-fan__*),
   dus de beweging is overal op de site dezelfde.
   ========================================================================== */

.dc-flow__fan {
    position: relative;
    width: min(100%, 900px);
    margin-inline: auto;
    display: grid;
    justify-items: center;
}

/* --- Bovenaan: wie de opdracht krijgt ------------------------------------ */

.dc-flow__hub {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px 14px 20px;
    border-radius: var(--dc-r-pill);
    background: var(--dc-ink);
    color: #fff;
    box-shadow: var(--dc-shadow-lg);
}

.dcx--deep .dc-flow__hub {
    background: var(--dc-blue);
    box-shadow: var(--dc-shadow-blue);
}

.dc-flow__hub-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.dc-flow__hub-mark svg { width: 20px; height: 15px; }

.dc-flow__hub-body { display: grid; gap: 2px; }

.dc-flow__hub-body strong {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.2;
}

.dc-flow__hub-body span {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .62);
}

/* --- De draden ------------------------------------------------------------ */

.dc-flow__wires {
    display: block;
    width: 100%;
    height: clamp(52px, 6vw, 88px);
    overflow: visible;
}

/* Wat samenkomt is dezelfde tekening, op zijn kop. */
.dc-flow__wires--up { transform: scaleY(-1); }

/* Wie één tak aanwijst, ziet alleen die tak oplichten. */
.dc-flow__fan.is-focused .dc-fan__wire { opacity: .22; }

/* --- De takken ------------------------------------------------------------ */

.dc-flow__agents {
    display: grid;
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
}

.dc-flow__agents[data-dc-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
.dc-flow__agents[data-dc-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-flow__agents[data-dc-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-flow__agents[data-dc-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dc-flow__agent {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 20px 16px 22px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-lg);
    background: var(--dc-surface);
    text-align: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dc-slow) var(--dc-ease) calc(var(--dc-i, 0) * 90ms),
                transform var(--dc-slow) var(--dc-ease) calc(var(--dc-i, 0) * 90ms),
                border-color var(--dc-mid) var(--dc-ease),
                box-shadow var(--dc-mid) var(--dc-ease);
}

.dcx-reveal.is-in .dc-flow__agent { opacity: 1; transform: none; }
.no-js .dc-flow__agent { opacity: 1; transform: none; }

.dc-flow__agent:hover {
    border-color: rgba(var(--dc-blue-rgb), .4);
    box-shadow: var(--dc-shadow);
}

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

.dcx--deep .dc-flow__agent:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(var(--dc-blue-rgb), .5);
}

.dc-flow__agent-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--dc-blue-soft);
    color: var(--dc-blue);
}

.dc-flow__agent-ico svg { width: 20px; height: 20px; }

.dc-flow__agent--green .dc-flow__agent-ico    { background: var(--dc-green-soft); color: #0d9668; }
.dc-flow__agent--graphite .dc-flow__agent-ico { background: var(--dc-graphite-soft); color: #3a4658; }

.dcx--deep .dc-flow__agent-ico {
    background: rgba(var(--dc-blue-rgb), .2);
    color: #62aaf3;
}

.dcx--deep .dc-flow__agent--green .dc-flow__agent-ico {
    background: rgba(var(--dc-green-rgb), .18);
    color: #4ade9f;
}

/* Grafiet valt weg op een donker vlak; daar wordt het merkblauw met wit. */
.dcx--deep .dc-flow__agent--graphite .dc-flow__agent-ico {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.dc-flow__agent-name {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--dc-ink);
}

.dcx--deep .dc-flow__agent-name { color: #fff; }

.dc-flow__agent-note {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--dc-muted);
    text-wrap: pretty;
}

.dcx--deep .dc-flow__agent-note { color: rgba(255, 255, 255, .6); }

/* --- Samenkomst en resultaat --------------------------------------------- */

.dc-flow__merge {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 24px 13px 16px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow);
}

.dcx--deep .dc-flow__merge {
    background: rgba(255, 255, 255, .06);
    border-color: var(--dc-line-dark);
    box-shadow: none;
}

.dc-flow__merge-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-green-soft);
    color: #0d9668;
}

.dc-flow__merge-ico svg { width: 17px; height: 17px; }

.dcx--deep .dc-flow__merge-ico {
    background: rgba(var(--dc-green-rgb), .2);
    color: #4ade9f;
}

.dc-flow__merge-body { display: grid; gap: 2px; }

.dc-flow__merge-body strong {
    font-family: var(--dc-font);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dc-ink);
}

.dcx--deep .dc-flow__merge-body strong { color: #fff; }

.dc-flow__merge-body span {
    font-size: .8125rem;
    color: var(--dc-muted);
}

.dcx--deep .dc-flow__merge-body span { color: rgba(255, 255, 255, .58); }

/* Het laatste stukje lijn naar het resultaat. */
.dc-flow__drop {
    width: 1px;
    height: clamp(28px, 3vw, 44px);
    margin-block: 4px;
    background: linear-gradient(180deg, var(--dc-line), rgba(var(--dc-blue-rgb), .6));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dc-slow) var(--dc-ease) .4s;
}

.dcx--deep .dc-flow__drop {
    background: linear-gradient(180deg, var(--dc-line-dark), rgba(var(--dc-blue-rgb), .8));
}

.dcx-reveal.is-in .dc-flow__drop { transform: scaleY(1); }
.no-js .dc-flow__drop { transform: scaleY(1); }

.dc-flow__result {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.dc-flow__result strong {
    font-family: var(--dc-font);
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dc-blue);
}

.dcx--deep .dc-flow__result strong { color: #62aaf3; }

.dc-flow__result span {
    font-size: .875rem;
    color: var(--dc-muted);
    max-width: 44ch;
}

.dcx--deep .dc-flow__result span { color: rgba(255, 255, 255, .6); }

/* --- Op een wit vlak ------------------------------------------------------
   De takken en de samenkomst staan standaard op --dc-surface. Op het canvas
   scheelt dat net genoeg van de achtergrond; op wit valt het weg. Daar keert
   de verhouding om: het vlak wordt de kaart, de kaart krijgt de canvastint.
   -------------------------------------------------------------------------- */

.dcx--white .dc-flow__agent,
.dcx--white .dc-flow__merge { background: var(--dc-bg); }

/* Bij aanwijzen licht de kaart op naar wit in plaats van te verdiepen. */
.dcx--white .dc-flow__agent:hover { background: var(--dc-surface); }

/* Zonder eigen wit vlak onder de pil is de volle schaduw te veel; de rand
   en de tint doen het werk. */
.dcx--white .dc-flow__merge { box-shadow: var(--dc-shadow-sm); }

/* --- Smaller ------------------------------------------------------------- */

@media (max-width: 760px) {
    /* Vier smalle kolommen worden onleesbaar; twee per rij blijft kloppen.
       De draden gaan dan weg — ze zouden naar de verkeerde plek wijzen. */
    .dc-flow__agents[data-dc-n="3"],
    .dc-flow__agents[data-dc-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* De waaier zou naar de verkeerde plek wijzen zodra de takken opnieuw
       worden ingedeeld. In plaats daarvan blijft er één rechte lijn staan,
       zodat de volgorde nog steeds te lezen is. */
    .dc-flow__wires {
        height: 34px;
        background: linear-gradient(180deg,
            var(--dc-line) 0%,
            rgba(var(--dc-blue-rgb), .5) 100%) center / 1px 100% no-repeat;
    }

    .dcx--deep .dc-flow__wires {
        background-image: linear-gradient(180deg,
            var(--dc-line-dark) 0%,
            rgba(var(--dc-blue-rgb), .7) 100%);
    }

    .dc-flow__wires .dc-fan__wire { display: none; }
}

@media (max-width: 440px) {
    .dc-flow__agents[data-dc-n="2"],
    .dc-flow__agents[data-dc-n="3"],
    .dc-flow__agents[data-dc-n="4"] { grid-template-columns: minmax(0, 1fr); }

    .dc-flow__hub { padding: 12px 20px 12px 14px; }
    .dc-flow__merge { padding: 11px 18px 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-flow__agent,
    .dc-flow__drop {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   33. CONTACT — informatie links, formulier rechts
   --------------------------------------------------------------------------
   De contactsectie stond op een eigen verloop met een puntraster en een
   zwarte infokaart: een tweede huisstijl binnen dezelfde pagina. Ze staat nu
   op het canvas van de pagina zelf en leent haar onderdelen van de rest van
   de site — de eyebrow met het merkteken, de haarlijnen, het icoonvlak en
   dezelfde formulierkaart als in de aanvraaghero.

   Links leest de bezoeker wie hij bereikt: kop, bereikbaarheid, een beeld,
   de kanalen en wat we beloven. Rechts staat de kaart waarin hij dat meteen
   kan doen. Het formulier weegt daarmee even zwaar als de tekst ernaast.

   Op een smal scherm klapt het naar kop → formulier → de rest. De kop zit in
   de linkerkolom en het formulier ernaast, dus die twee kunnen alleen van
   plaats wisselen wanneer de kolom zichzelf oplost: display:contents laat de
   onderdelen rechtstreeks in het raster vallen, waarna order de volgorde
   bepaalt.
   ========================================================================== */

/* Standaard heeft de sectie geen eigen vlak: ze neemt de achtergrond over van
   de pagina, zodat ze naadloos tussen de widgets erboven en eronder past. */
.dc-contact--bare { background: transparent; }

.dc-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: clamp(36px, 4vw, 56px);
    align-items: start;
}

.dc-contact__info { min-width: 0; }
.dc-contact__form { min-width: 0; }

/* --- De kop --------------------------------------------------------------- */

.dc-contact__head > * + * { margin-top: 22px; }

/* Naast een formulierkaart leest een kop van drie woorden per regel prettiger
   dan de volle sectiemaat. */
.dc-contact__title {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    max-width: 14ch;
}

.dc-contact__info .dcx-lede { max-width: 44ch; }

/* --- Bereikbaarheid ------------------------------------------------------- */

/* Hetzelfde levende stipje als in de adresbalk van een venster: één regel die
   zegt of er nu iemand is, zonder er een badge van te maken. */
.dc-contact__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 8px 16px 8px 13px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-pill);
    background: var(--dc-surface);
    font-family: var(--dc-font-mono);
    font-size: 11.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dc-muted);
}

.dc-contact__status i {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-green);
    animation: dc-live 2.4s var(--dc-ease) infinite;
}

/* --- Het beeld ------------------------------------------------------------ */

.dc-contact__media {
    position: relative;
    margin-top: 28px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-xl);
    background: var(--dc-bg-tint);
    box-shadow: var(--dc-shadow);
    overflow: hidden;
}

.dc-contact__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* Het label hoort bij het beeld en niet erboven: het ligt in de hoek, op de
   glazen chip die de hele site gebruikt. */
.dc-contact__chip {
    left: 16px;
    bottom: 16px;
    right: auto;
}

/* --- De kanalen ----------------------------------------------------------- */

/* Geen vier losse kaartjes maar één lijst met haarlijnen ertussen: dezelfde
   rust als de tabellen en de veelgestelde vragen elders. */
.dc-contact__channels {
    margin-top: 30px;
    border-top: 1px solid var(--dc-line);
}

.dc-contact__channel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--dc-line);
}

.dc-contact__channel .dcx-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    transition: background var(--dc-mid) var(--dc-ease),
                color var(--dc-mid) var(--dc-ease);
}

.dc-contact__channel .dcx-ico svg { width: 18px; height: 18px; }

.dc-contact__channel-body {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dc-contact__channel-label {
    font-family: var(--dc-font-mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-contact__channel-value {
    font-family: var(--dc-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--dc-ink);
    overflow-wrap: anywhere;
    transition: color var(--dc-fast) var(--dc-ease);
}

a.dc-contact__channel-value:hover { color: var(--dc-blue); }

/* De pijl verraadt dat de regel aanklikbaar is. Regels zonder link — een
   reactietijd, een plaats — krijgen hem niet en blijven dus stil. */
.dc-contact__channel-go {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--dc-line);
    color: var(--dc-faint);
    transition: transform var(--dc-mid) var(--dc-ease),
                border-color var(--dc-mid) var(--dc-ease),
                color var(--dc-mid) var(--dc-ease);
}

.dc-contact__channel-go svg { width: 14px; height: 14px; }

.dc-contact__channel:hover .dc-contact__channel-go {
    transform: translateX(3px);
    border-color: rgba(var(--dc-blue-rgb), .4);
    color: var(--dc-blue);
}

.dc-contact__channel:hover .dcx-ico {
    background: var(--dc-blue);
    color: #fff;
}

/* --- Wat we beloven ------------------------------------------------------- */

.dc-contact__checks { margin-top: 26px; }

/* De linkerkolom is langer dan de kaart ernaast — beeld, kanalen en beloften
   stapelen nu eenmaal op. De kaart loopt daarom mee tijdens het scrollen, zodat
   het formulier in beeld blijft zolang de bezoeker de kolom ernaast leest.
   Alleen op een scherm dat hoog genoeg is om de hele kaart te tonen; anders zou
   de onderkant met de knop erbuiten vallen. */
@media (min-width: 1041px) and (min-height: 760px) {
    .dc-contact__form {
        position: sticky;
        top: clamp(24px, 7vh, 88px);
    }
}

/* --- Alleen het formulier ------------------------------------------------- */

/* Zonder informatiekolom is er niets om naast te staan: de kop gaat naar het
   midden en de kaart eronder houdt een leesbare breedte. */
.dc-contact--solo .dc-contact__grid { grid-template-columns: minmax(0, 1fr); }

.dc-contact--solo .dc-contact__head {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.dc-contact--solo .dc-contact__title {
    max-width: none;
    text-wrap: balance;
}

.dc-contact--solo .dc-contact__info .dcx-lede {
    max-width: 52ch;
    margin-inline: auto;
}

.dc-contact--solo .dc-contact__form {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
}

/* --- Smaller -------------------------------------------------------------- */

@media (max-width: 1040px) {
    .dc-contact__grid { grid-template-columns: minmax(0, 1fr); }

    /* De kolom lost op, zodat kop en formulier van plaats kunnen wisselen:
       eerst weten waar het over gaat, dan kunnen aanvragen, dan de rest. */
    .dc-contact__info { display: contents; }

    .dc-contact__head     { order: 1; }
    .dc-contact__form     { order: 2; }

    /* Als grid-item zou de pil zich over de volle kolom uitrekken; hij hoort
       net zo breed te zijn als zijn tekst. */
    .dc-contact__status   { order: 3; margin-top: 0; justify-self: start; }
    .dc-contact__media    { order: 4; margin-top: 0; }
    .dc-contact__channels { order: 5; margin-top: 0; }
    .dc-contact__checks   { order: 6; margin-top: 0; }

    .dc-contact__title { max-width: 18ch; }
    .dc-contact__img { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
    .dc-contact__grid { row-gap: 28px; }
    .dc-contact__channel { gap: 13px; padding: 14px 2px; }
    .dc-contact__channel .dcx-ico { width: 36px; height: 36px; border-radius: 10px; }
    .dc-contact__channel-value { font-size: 1rem; }
    .dc-contact__media { border-radius: var(--dc-r-lg); }
    .dc-contact__chip { left: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-contact__status i { animation: none; }

    .dc-contact__channel .dcx-ico,
    .dc-contact__channel-go { transition: none; }
}

/* ==========================================================================
   33. GETEKEND VENSTER — terminal en editor
   --------------------------------------------------------------------------
   Voor onderwerpen waar geen echt beeld van bestaat. Geen schermafdruk en
   geen stockfoto, maar een venster opgebouwd uit de tokens die de rest van
   de site ook gebruikt: diepe inkt, mono, één blauw accent en groen voor
   wat af is. De regels komen één voor één in beeld zodra de sectie in
   beeld komt, zodat het leest als iets wat loopt.
   ========================================================================== */

.dc-term {
    position: relative;
    border-radius: var(--dc-r-lg);
    background: var(--dc-bg-deep);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--dc-shadow-lg);
    overflow: hidden;
}

.dc-term__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
}

.dc-term__dots {
    display: flex;
    gap: 6px;
    flex: none;
}

.dc-term__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.dc-term__dots i:first-child { background: rgba(255, 255, 255, .26); }

.dc-term__name {
    font-family: var(--dc-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.dc-term__body {
    display: grid;
    gap: 10px;
    padding: 22px 20px 26px;
    font-family: var(--dc-font-mono);
    font-size: clamp(12px, 1.05vw, 13.5px);
    line-height: 1.5;
}

.dc-term__line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: rgba(255, 255, 255, .62);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--dc-ease) calc(var(--dc-i, 0) * 130ms),
                transform .45s var(--dc-ease) calc(var(--dc-i, 0) * 130ms);
}

.dcx-reveal.is-in .dc-term__line { opacity: 1; transform: none; }
.no-js .dc-term__line { opacity: 1; transform: none; }

.dc-term__gutter {
    color: rgba(255, 255, 255, .26);
    text-align: center;
}

.dc-term__text { min-width: 0; overflow-wrap: anywhere; }

/* Wat jij vraagt staat in wit; het antwoord eronder is rustiger. */
.dc-term__line--in { color: #fff; }
.dc-term__line--in .dc-term__gutter { color: var(--dc-blue); }

.dc-term__line--ok { color: #7ee2b8; }
.dc-term__line--ok .dc-term__gutter { color: var(--dc-green); }

.dc-term__line--note {
    color: rgba(255, 255, 255, .38);
    font-style: normal;
}

.dc-term__line--file .dc-term__text { color: #8fc4fa; }
.dc-term__line--file .dc-term__gutter { color: var(--dc-blue); }

.dc-term__line--cursor .dc-term__gutter { color: var(--dc-blue); }

.dc-term__caret {
    display: inline-block;
    width: 8px;
    height: 15px;
    border-radius: 1px;
    background: var(--dc-blue);
    animation: dc-term-blink 1.1s steps(2, start) infinite;
}

@keyframes dc-term-blink { 50% { opacity: 0; } }

/* De editor krijgt regelnummers in plaats van tekens in de kantlijn. */
.dc-term--editor { counter-reset: dc-term-line; }

.dc-term--editor .dc-term__body { gap: 6px; }

.dc-term--editor .dc-term__line:not(.dc-term__line--cursor) .dc-term__gutter {
    counter-increment: dc-term-line;
    font-size: 11px;
    color: rgba(255, 255, 255, .2);
}

.dc-term--editor .dc-term__line:not(.dc-term__line--cursor) .dc-term__gutter::before {
    content: counter(dc-term-line);
}

.dc-term--editor .dc-term__gutter { font-size: 0; }
.dc-term--editor .dc-term__line--cursor .dc-term__gutter { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
    .dc-term__line { transition: none; opacity: 1; transform: none; }
    .dc-term__caret { animation: none; }
}

@media (max-width: 480px) {
    .dc-term__body { padding: 18px 14px 22px; gap: 9px; }
    .dc-term__line { grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
}

/* --------------------------------------------------------------------------
   33.1 Label om het veld heen
   --------------------------------------------------------------------------
   Contact Form 7 zet het id-attribuut maar één keer per pagina neer. Staat
   hetzelfde formulier er twee keer op — in de hero en onderaan — dan wijzen
   de labels van de tweede kopie naar de velden van de eerste. Het veld staat
   daarom binnen zijn label; dan is er geen id nodig. Het label zelf draagt
   dan geen opmaak meer, die zit in de tekstspan erin.
   -------------------------------------------------------------------------- */

.dcx-cf7 .dc-form-row > label:has(> .dc-form-label) {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.dcx-cf7 .dc-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dc-ink-soft);
}

.dcx-cf7--on-dark .dc-form-label { color: rgba(255, 255, 255, .78); }