/* ==========================================================================
   Datanestca B.V. — site styles
   Built on Bootstrap 5.3.3 color modes (data-bs-theme="dark|light").
   Brand palette (from Logo/print.pdf):
     navy        #01265a
     sky         #9bd0e6
     sky-light   #a8def2
     steel       #6695b6
   Typography: Montserrat (brand wordmark) for headings, Inter for body.
   ========================================================================== */

/* ---------- Brand tokens (theme-independent) ---------- */
:root {
    --dn-navy: #01265a;
    --dn-navy-rgb: 1, 38, 90;
    --dn-sky: #9bd0e6;
    --dn-sky-rgb: 155, 208, 230;
    --dn-sky-light: #a8def2;
    --dn-steel: #6695b6;
    --dn-steel-rgb: 102, 149, 182;

    --dn-font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --dn-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    --dn-radius: 1rem;
    --dn-radius-sm: .625rem;
    --dn-section-y: clamp(4rem, 9vw, 7rem);
    --dn-transition: .2s ease;

    --bs-font-sans-serif: var(--dn-font-body);
    --bs-body-font-family: var(--dn-font-body);
    --bs-body-line-height: 1.65;
}

/* ---------- Dark theme (default) ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --dn-bg: #03132e;
    --dn-bg-alt: #061b3f;
    --dn-surface: #0a2550;
    --dn-surface-hover: #0f2e60;
    --dn-border: rgba(155, 208, 230, .16);
    --dn-text: #e9f2f9;
    --dn-text-muted: #a9bdd3;
    --dn-heading: #ffffff;
    --dn-accent: var(--dn-sky);
    --dn-accent-rgb: var(--dn-sky-rgb);
    --dn-accent-strong: var(--dn-sky-light);
    --dn-accent-soft: rgba(155, 208, 230, .10);
    --dn-cta-bg: var(--dn-sky);
    --dn-cta-color: var(--dn-navy);
    --dn-cta-hover: var(--dn-sky-light);
    --dn-nav-bg: rgba(3, 19, 46, .82);
    --dn-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
    --dn-glow: 0 0 0 1px rgba(155, 208, 230, .25), 0 1rem 2.5rem rgba(0, 0, 0, .35);

    --bs-body-bg: var(--dn-bg);
    --bs-body-color: var(--dn-text);
    --bs-secondary-color: var(--dn-text-muted);
    --bs-tertiary-bg: var(--dn-surface);
    --bs-border-color: var(--dn-border);
    --bs-heading-color: var(--dn-heading);
    --bs-link-color: var(--dn-accent);
    --bs-link-hover-color: var(--dn-accent-strong);
    --bs-link-color-rgb: var(--dn-sky-rgb);
    --bs-link-hover-color-rgb: 168, 222, 242;
    --bs-primary: var(--dn-sky);
    --bs-primary-rgb: var(--dn-sky-rgb);
    --bs-emphasis-color: #ffffff;
}

/* ---------- Light theme ---------- */
[data-bs-theme="light"] {
    color-scheme: light;

    --dn-bg: #ffffff;
    --dn-bg-alt: #f3f8fc;
    --dn-surface: #ffffff;
    --dn-surface-hover: #f6fafd;
    --dn-border: rgba(1, 38, 90, .12);
    --dn-text: #1c2f4a;
    --dn-text-muted: #51657f;
    --dn-heading: var(--dn-navy);
    --dn-accent: var(--dn-navy);
    --dn-accent-rgb: var(--dn-navy-rgb);
    --dn-accent-strong: #0b3a7e;
    --dn-accent-soft: rgba(155, 208, 230, .22);
    --dn-cta-bg: var(--dn-navy);
    --dn-cta-color: #ffffff;
    --dn-cta-hover: #0b3a7e;
    --dn-nav-bg: rgba(255, 255, 255, .85);
    --dn-shadow: 0 1rem 2.5rem rgba(1, 38, 90, .10);
    --dn-glow: 0 0 0 1px rgba(1, 38, 90, .10), 0 1rem 2.5rem rgba(1, 38, 90, .12);

    --bs-body-bg: var(--dn-bg);
    --bs-body-color: var(--dn-text);
    --bs-secondary-color: var(--dn-text-muted);
    --bs-tertiary-bg: var(--dn-bg-alt);
    --bs-border-color: var(--dn-border);
    --bs-heading-color: var(--dn-heading);
    --bs-link-color: var(--dn-accent);
    --bs-link-hover-color: var(--dn-accent-strong);
    --bs-link-color-rgb: var(--dn-navy-rgb);
    --bs-link-hover-color-rgb: 11, 58, 126;
    --bs-primary: var(--dn-navy);
    --bs-primary-rgb: var(--dn-navy-rgb);
    --bs-emphasis-color: var(--dn-navy);
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
    /* Set by js/scripts.js to the measured sticky header height; 5rem is the no-JS fallback. */
    scroll-padding-top: var(--dn-header-h, 5rem);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

body {
    font-family: var(--dn-font-body);
    background-color: var(--dn-bg);
    color: var(--dn-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.navbar-brand,
.btn,
.dn-eyebrow {
    font-family: var(--dn-font-display);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.lead {
    font-weight: 400;
    color: var(--dn-text-muted);
}

p {
    max-width: 70ch;
}

::selection {
    background: var(--dn-sky);
    color: var(--dn-navy);
}

:focus-visible {
    outline: 3px solid var(--dn-accent);
    outline-offset: 3px;
    border-radius: .25rem;
}

/* Theme-dependent images */
.dn-logo-dark,
.dn-logo-light {
    height: 2.25rem;
    width: auto;
}

[data-bs-theme="dark"] .dn-logo-light {
    display: none;
}

[data-bs-theme="light"] .dn-logo-dark {
    display: none;
}

/* Icons from inline sprite */
.dn-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -.125em;
    flex-shrink: 0;
}

/* ---------- Skip link ---------- */
.dn-skip {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--dn-cta-bg);
    color: var(--dn-cta-color);
    border-radius: var(--dn-radius-sm);
    font-weight: 600;
}

.dn-skip:focus {
    top: 1rem;
}

/* ---------- Header / navbar ---------- */
.dn-navbar {
    background: var(--dn-nav-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--dn-border);
    transition: background var(--dn-transition), border-color var(--dn-transition);
}

.dn-navbar .navbar-brand {
    padding: .25rem 0;
}

.dn-navbar .nav-link {
    font-family: var(--dn-font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    color: var(--dn-text);
    padding: .5rem .85rem;
    border-radius: var(--dn-radius-sm);
    transition: color var(--dn-transition), background var(--dn-transition);
}

@media (min-width: 992px) {
    .dn-navbar .nav-link {
        --bs-navbar-nav-link-padding-x: .75rem;
    }
}

.dn-navbar .nav-link:hover,
.dn-navbar .nav-link:focus-visible {
    color: var(--dn-accent);
    background: var(--dn-accent-soft);
}

.dn-navbar .nav-link.active {
    color: var(--dn-accent);
}

.dn-navbar .navbar-toggler {
    border-color: var(--dn-border);
    color: var(--dn-text);
    padding: .4rem .6rem;
}

.dn-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--dn-accent-rgb), .35);
}

.dn-navbar .navbar-toggler .dn-icon {
    font-size: 1.4rem;
}

.dn-navbar .navbar-toggler-icon {
    display: none;
}

@media (max-width: 991.98px) {
    .dn-navbar .navbar-collapse {
        margin-top: .75rem;
        padding-top: .5rem;
        border-top: 1px solid var(--dn-border);
    }
}

/* Theme switcher */
.dn-theme-toggle {
    --bs-btn-color: var(--dn-text);
    --bs-btn-border-color: var(--dn-border);
    --bs-btn-hover-color: var(--dn-accent);
    --bs-btn-hover-bg: var(--dn-accent-soft);
    --bs-btn-hover-border-color: var(--dn-border);
    --bs-btn-active-color: var(--dn-accent);
    --bs-btn-active-bg: var(--dn-accent-soft);
    --bs-btn-active-border-color: var(--dn-border);
    --bs-btn-focus-shadow-rgb: var(--dn-accent-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
}

.dn-theme-toggle::after {
    display: none;
}

.dn-theme-menu {
    --bs-dropdown-bg: var(--dn-surface);
    --bs-dropdown-border-color: var(--dn-border);
    --bs-dropdown-color: var(--dn-text);
    --bs-dropdown-link-color: var(--dn-text);
    --bs-dropdown-link-hover-color: var(--dn-accent);
    --bs-dropdown-link-hover-bg: var(--dn-accent-soft);
    --bs-dropdown-link-active-color: var(--dn-cta-color);
    --bs-dropdown-link-active-bg: var(--dn-cta-bg);
    --bs-dropdown-min-width: 0;
    --bs-dropdown-padding-y: .35rem;
    --bs-dropdown-padding-x: .35rem;
    --bs-dropdown-border-radius: 999px;
    box-shadow: var(--dn-shadow);
}

.dn-theme-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.05rem;
}

.dn-theme-menu .dropdown-item+.dropdown-item {
    margin-top: .25rem;
}

/* ---------- Sections ---------- */
.dn-section {
    position: relative;
    padding-block: var(--dn-section-y);
}

.dn-section-alt {
    background: var(--dn-bg-alt);
}

.dn-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dn-accent);
    margin-bottom: .75rem;
}

.dn-section-title {
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
    margin-bottom: .5rem;
}

.dn-section-sub {
    font-family: var(--dn-font-display);
    font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
    font-weight: 500;
    color: var(--dn-text-muted);
    margin-bottom: 1.75rem;
}

.dn-accent-rule {
    width: 3.5rem;
    height: .25rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dn-sky-light), var(--dn-steel));
    margin-bottom: 1.5rem;
}

/* ---------- Hero ---------- */
.dn-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
    background-image:
        radial-gradient(60rem 40rem at 85% 10%, rgba(var(--dn-sky-rgb), .18), transparent 60%),
        radial-gradient(40rem 30rem at 0% 100%, rgba(var(--dn-steel-rgb), .18), transparent 60%);
    background-color: var(--dn-bg);
}

[data-bs-theme="light"] .dn-hero {
    --dn-bg: #f6f6f6;
    background-image:
        radial-gradient(60rem 40rem at 85% 10%, rgba(var(--dn-sky-rgb), .35), transparent 60%),
        radial-gradient(40rem 30rem at 0% 100%, rgba(var(--dn-steel-rgb), .16), transparent 60%);
}

.dn-bg-grid {
    position: absolute;
    inset: 0;
    background-image: url(../img/bg-pattern.png);
    background-position: center center;
    background-size: 30px 30px;
    background-attachment: fixed;
    pointer-events: none;
}

.dn-hero-title {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
}

.dn-hero-motto {
    font-family: var(--dn-font-display);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: clamp(.85rem, .75rem + .4vw, 1.05rem);
    color: var(--dn-accent);
}

.dn-hero-mark {
    width: min(100%, 26rem);
    height: auto;
    filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, .35));
}

[data-bs-theme="light"] .dn-hero-mark {
    filter: drop-shadow(0 1.5rem 3rem rgba(1, 38, 90, .25));
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .7rem 1.5rem;
}

.btn-dn-primary {
    --bs-btn-color: var(--dn-cta-color);
    --bs-btn-bg: var(--dn-cta-bg);
    --bs-btn-border-color: var(--dn-cta-bg);
    --bs-btn-hover-color: var(--dn-cta-color);
    --bs-btn-hover-bg: var(--dn-cta-hover);
    --bs-btn-hover-border-color: var(--dn-cta-hover);
    --bs-btn-active-color: var(--dn-cta-color);
    --bs-btn-active-bg: var(--dn-cta-hover);
    --bs-btn-active-border-color: var(--dn-cta-hover);
    --bs-btn-focus-shadow-rgb: var(--dn-accent-rgb);
    box-shadow: 0 .5rem 1.25rem rgba(var(--dn-accent-rgb), .25);
    transition: color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}

.btn-dn-primary:hover {
    transform: translateY(-1px);
}

.btn-dn-outline {
    --bs-btn-color: var(--dn-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--dn-border);
    --bs-btn-hover-color: var(--dn-accent);
    --bs-btn-hover-bg: var(--dn-accent-soft);
    --bs-btn-hover-border-color: rgba(var(--dn-accent-rgb), .4);
    --bs-btn-active-color: var(--dn-accent);
    --bs-btn-active-bg: var(--dn-accent-soft);
    --bs-btn-active-border-color: rgba(var(--dn-accent-rgb), .4);
    --bs-btn-focus-shadow-rgb: var(--dn-accent-rgb);
}

[data-bs-theme="light"] .btn-dn-outline {
    --bs-btn-bg: rgba(255, 255, 255, 0.5);
}

/* ---------- Cards ---------- */
.dn-card {
    height: 100%;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius);
    padding: 1.75rem;
    transition: transform var(--dn-transition), box-shadow var(--dn-transition), border-color var(--dn-transition), background var(--dn-transition);
}

.dn-card:hover {
    transform: translateY(-3px);
    background: var(--dn-surface-hover);
    border-color: rgba(var(--dn-accent-rgb), .35);
    box-shadow: var(--dn-shadow);
}

.dn-card h3 {
    font-size: 1.15rem;
    margin-bottom: .6rem;
}

.dn-card p {
    margin-bottom: 0;
    color: var(--dn-text-muted);
}

.dn-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .875rem;
    background: var(--dn-accent-soft);
    color: var(--dn-accent);
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
    padding: .5rem;
}

/* Challenge callout in About */
.dn-callout {
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-left: .25rem solid var(--dn-accent);
    border-radius: var(--dn-radius);
    padding: 1.5rem 1.75rem;
}

.dn-callout p:last-child {
    margin-bottom: 0;
    color: var(--dn-accent);
}

.dn-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dn-check-list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .5rem 0;
}

.dn-check-list .dn-icon {
    color: var(--dn-accent);
    font-size: 1.25rem;
    margin-top: .15rem;
}

/* ---------- Approach steps ---------- */
.dn-steps {
    --gap: 1rem;
}

.dn-step {
    position: relative;
    height: 100%;
    background: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius);
    padding: 1.75rem 1.5rem 1.5rem;
    transition: transform var(--dn-transition), box-shadow var(--dn-transition), border-color var(--dn-transition);
}

.dn-step:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--dn-accent-rgb), .35);
    box-shadow: var(--dn-shadow);
}

.dn-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgba(var(--dn-sky-rgb), .35), rgba(var(--dn-steel-rgb), .25));
    color: var(--dn-accent);
    font-size: 1.4rem;
    margin: 0 .75rem 1rem 0;
}

.dn-step-num {
    font-family: var(--dn-font-display);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .15em;
    color: var(--dn-accent);
}

.dn-step h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.dn-step p {
    margin: 0;
    color: var(--dn-text-muted);
    font-size: .95rem;
}

/* arrow connector between steps on large screens */
@media (min-width: 992px) {
    .dn-step-col:not(:last-child) .dn-step::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -1.4rem;
        width: 1rem;
        height: 1rem;
        border-top: 2px solid var(--dn-accent);
        border-right: 2px solid var(--dn-accent);
        transform: translateY(-50%) rotate(45deg);
        opacity: .7;
    }
}

/* ---------- Why list ---------- */
.dn-why-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
    padding: 1.25rem 1.25rem;
    border-radius: var(--dn-radius);
    border: 1px solid transparent;
    transition: background var(--dn-transition), border-color var(--dn-transition);
}

.dn-why-item:hover {
    background: var(--dn-surface);
    border-color: var(--dn-border);
}

.dn-why-item .dn-card-icon {
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
}

.dn-why-item h3 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

.dn-why-item p {
    margin: 0;
    color: var(--dn-text-muted);
    font-size: .95rem;
}

/* ---------- Contact / CTA ---------- */
.dn-cta {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--dn-radius) * 1.5);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(40rem 20rem at 100% 0%, rgba(var(--dn-sky-rgb), .25), transparent 60%),
        linear-gradient(135deg, var(--dn-navy), #0a3a7a);
    color: #e9f2f9;
    border: 1px solid rgba(155, 208, 230, .25);
    box-shadow: var(--dn-shadow);
}

.dn-cta h2 {
    color: #fff;
}

.dn-cta p {
    color: rgba(233, 242, 249, .88);
}

.dn-cta .dn-eyebrow {
    color: var(--dn-sky)
}

.dn-cta .dn-hero-motto {
    color: var(--dn-sky);
}

.dn-cta .btn-dn-primary {
    --bs-btn-color: var(--dn-navy);
    --bs-btn-bg: var(--dn-sky);
    --bs-btn-border-color: var(--dn-sky);
    --bs-btn-hover-color: var(--dn-navy);
    --bs-btn-hover-bg: var(--dn-sky-light);
    --bs-btn-hover-border-color: var(--dn-sky-light);
    --bs-btn-active-color: var(--dn-navy);
    --bs-btn-active-bg: var(--dn-sky-light);
    --bs-btn-active-border-color: var(--dn-sky-light);
}

.dn-cta .dn-mark-bg {
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 22rem;
    opacity: .12;
    pointer-events: none;
}

.dn-cta a.dn-email {
    color: #fff;
    font-weight: 600;
    text-decoration-color: rgba(155, 208, 230, .6);
}

.dn-cta a.dn-email:hover {
    color: var(--dn-sky);
}

/* ---------- Footer ---------- */
.dn-footer {
    background: var(--dn-bg-alt);
    border-top: 1px solid var(--dn-border);
    padding-block: 3.5rem 1.5rem;
    font-size: .95rem;
}

.dn-footer .dn-logo-dark,
.dn-footer .dn-logo-light {
    height: 2.5rem;
}

.dn-logo-light[src$=".svg"] {
    filter: drop-shadow(0 1px black);
}

.dn-footer h2 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dn-accent);
    margin-bottom: 1rem;
}

.dn-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dn-footer li+li {
    margin-top: .5rem;
}

.dn-footer a {
    color: var(--dn-text);
    text-decoration: none;
    transition: color var(--dn-transition);
}

.dn-footer a:hover,
.dn-footer a:focus-visible {
    color: var(--dn-accent);
    text-decoration: underline;
}

.dn-footer .dn-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dn-border);
    color: var(--dn-text-muted);
    font-size: .875rem;
}

.dn-footer .dn-motto {
    font-family: var(--dn-font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .75rem;
    color: var(--dn-accent);
}

.dn-footer .dn-footer-desc {
    color: var(--dn-text-muted);
    max-width: 36rem;
}

.dn-contact-item-address .dn-icon {
    margin-top: .25rem;
}

/* ---------- Back to top ---------- */
.dn-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dn-surface);
    color: var(--dn-accent);
    border: 1px solid var(--dn-border);
    box-shadow: var(--dn-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity var(--dn-transition), transform var(--dn-transition), visibility var(--dn-transition);
}

.dn-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dn-top:hover {
    color: var(--dn-cta-color);
    background: var(--dn-cta-bg);
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.js .dn-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .6s ease, transform .6s ease;
}

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

.js .dn-reveal.dn-reveal-approach {
    max-width: 48rem
}

.js .dn-reveal.dn-reveal-why {
    max-width: 44rem
}

@media (prefers-reduced-motion: reduce) {
    .dn-reveal {
        opacity: 1;
        transform: none;
    }
}