/* ============================================================
   nr-why — "Why teams stay with Netrouting" (nr_includes trust)
   Lichte Ascone kaarten-sectie: witte band, gecentreerde lede met
   caps-eyebrow en serif-accent in de kop, 4 cloud-kaarten met
   dunne lijn-iconen en een leaf-hoek rechtsonder.

   Waarom een eigen bestand: nr26.css (bevroren) bevat kapot
   gegroepeerde selectors (`section.nr-includes.is-dark ~
   section.nr-includes.is-dark, section.nr-hero + ... .nr-includes__item
   {...}`) die item-styles met !important op de HELE tweede sectie
   dumpen. De gebakken markup is daarom omgezet naar .is-light en
   alles hier wordt met hogere specificiteit vastgelegd, scoped op
   [data-nr-preset="trust"] zodat de andere presets (pine stats-band)
   onaangeraakt blijven.
   ============================================================ */

/* ── Sectie-band ─────────────────────────────────────────────── */
html body section.nr-includes[data-nr-preset="trust"] {
    background: var(--nr26-white, #FFFFFF) !important;
    border: 0 !important;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 100px) 0 !important;
    color: var(--nr26-text, #3E4742) !important;
    overflow: hidden;
}
/* Tone-ritme (nr26.js wisselt wit/cloud zodat nooit twee gelijke
   tinten elkaar opvolgen): krijgt de sectie nr26-tone-cloud, dan
   band cloud en kaarten wit — zelfde contrast, ritme blijft kloppen. */
html body section.nr-includes[data-nr-preset="trust"].nr26-tone-cloud {
    background: var(--nr26-cloud, #F1F2EF) !important;
}
html body section.nr-includes[data-nr-preset="trust"].nr26-tone-cloud .nr-includes__item,
html body section.nr-includes[data-nr-preset="trust"].nr26-tone-cloud .nr-includes__item:hover {
    background: var(--nr26-white, #FFFFFF) !important;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__inner {
    max-width: var(--nr26-container, 1280px);
    margin: 0 auto;
    padding: 0 var(--nr26-gutter, clamp(20px, 4vw, 48px));
}

/* ── Lede: eyebrow + kop + sub, gecentreerd ──────────────────── */
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__lede {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(36px, 4vw, 52px);
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 14px;
    color: var(--nr26-pine-soft, #2E6B5E) !important;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__eyebrow-dot {
    display: none;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__headline {
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700 !important;
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--nr26-ink, #0A0C29) !important;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__headline em {
    font-family: var(--nr26-serif, Georgia, serif);
    font-style: italic;
    font-weight: 420;
    letter-spacing: -0.01em;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.65;
    color: var(--nr26-muted, #6B7470) !important;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Grid: 4 kaarten desktop, 2x2 tablet, gestapeld mobiel ───── */
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    overflow: visible;
}
@media (max-width: 1100px) {
    html body section.nr-includes[data-nr-preset="trust"] .nr-includes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    html body section.nr-includes[data-nr-preset="trust"] .nr-includes__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ── Kaarten: cloud, hairline, leaf-hoek rechtsonder ─────────── */
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--nr26-cloud, #F1F2EF) !important;
    border: 1px solid var(--nr26-line, #E2E3DC) !important;
    border-radius: var(--nr26-r-md, 20px) !important;
    border-bottom-right-radius: 56px !important;
    padding: 26px 24px 30px !important;
    min-width: 0;
    box-shadow: none !important;
    transition: border-color 160ms ease, transform 200ms ease;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item:hover {
    background: var(--nr26-cloud, #F1F2EF) !important;
    border-color: var(--nr26-pine-soft, #2E6B5E) !important;
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item,
    html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item:hover {
        transition: none;
        transform: none;
    }
}

/* Icoon: dun lijn-icoon (stroke currentColor) in mint chip */
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--nr26-mint, #E0EAE8);
    color: var(--nr26-pine, #1C3F3A) !important;
    margin: 0 0 16px;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    /* nr26.css zet `.nr-includes__item *` op wit; svg tekent met
       stroke: currentColor, dus de kleur hier expliciet vastpinnen. */
    color: var(--nr26-pine, #1C3F3A) !important;
    stroke-width: 1.6;
}
/* currentColor resolved per element: ook de paths/circles binnenin
   matchen `.nr-includes__item *` en werden wit. */
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__icon svg * {
    color: var(--nr26-pine, #1C3F3A) !important;
}

html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--nr26-ink, #0A0C29) !important;
    margin: 0 0 8px;
}
html body section.nr-includes[data-nr-preset="trust"] .nr-includes__item-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nr26-muted, #6B7470) !important;
}