.multimo-dn-carousel,
.multimo-dn-slide-panel {
    display: none;
}

@media (min-width: 901px) {
    .multimo-dn-carousel {
        --mdn-accent: #f3b63f;
        --mdn-height: 780px;
        position: relative;
        isolation: isolate;
        display: block;
        width: 100%;
        max-width: 100%;
        height: var(--mdn-height);
        min-height: 620px;
        overflow: hidden;
        background: #17191e;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }

    .multimo-dn-carousel.multimo-dn-full-width {
        left: 0;
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
        transform: translate3d(var(--mdn-breakout, 0px), 0, 0);
    }

    .multimo-dn-track {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .multimo-dn-slide-panel {
        --mdn-split: 50%;
        position: absolute;
        z-index: 1;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #17191e;
        color: #fff;
        font-family: inherit;
        opacity: 0;
        transform: translate3d(3.5%, 0, 0);
        pointer-events: none;
        transition: opacity 480ms ease, transform 640ms cubic-bezier(.22, 1, .36, 1);
        will-change: transform, opacity;
    }

    .multimo-dn-slide-panel.is-before {
        transform: translate3d(-3.5%, 0, 0);
    }

    .multimo-dn-slide-panel.is-active {
        z-index: 2;
        opacity: 1;
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
    }

    .multimo-dn-carousel *,
    .multimo-dn-carousel *::before,
    .multimo-dn-carousel *::after,
    .multimo-dn-slide-panel *,
    .multimo-dn-slide-panel *::before,
    .multimo-dn-slide-panel *::after {
        box-sizing: border-box;
    }

    .multimo-dn-stage {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: grid;
        grid-template-columns: var(--mdn-split) calc(100% - var(--mdn-split));
    }

    .multimo-dn-slide-panel.multimo-dn-intro .multimo-dn-stage,
    .multimo-dn-slide-panel.multimo-dn-intro .multimo-dn-divider {
        transition: grid-template-columns 900ms cubic-bezier(.22, 1, .36, 1), left 900ms cubic-bezier(.22, 1, .36, 1);
    }

    .multimo-dn-scene {
        position: relative;
        min-width: 0;
        overflow: hidden;
        background-position: center 58%;
        background-size: cover;
    }

    .multimo-dn-day {
        filter: brightness(1.02) saturate(.92);
    }

    .multimo-dn-night {
        filter: brightness(.82) saturate(.9) contrast(1.04);
    }

    .multimo-dn-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 9, 13, .14), rgba(7, 9, 13, .03) 45%, rgba(7, 9, 13, .72));
    }

    .multimo-dn-night .multimo-dn-shade {
        background: linear-gradient(180deg, rgba(4, 8, 18, .3), rgba(4, 8, 18, .06) 45%, rgba(4, 8, 18, .8));
    }

    .multimo-dn-copy {
        position: absolute;
        z-index: 9;
        top: 48%;
        left: 50%;
        width: min(760px, 64vw);
        transform: translate(-50%, -50%);
        text-align: center;
        text-shadow: 0 3px 28px rgba(0, 0, 0, .38);
        pointer-events: none;
    }

    .multimo-dn-eyebrow {
        margin: 0 0 18px;
        color: var(--mdn-accent);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .24em;
    }

    .multimo-dn-copy h2 {
        margin: 0;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(62px, 6.2vw, 112px);
        font-weight: 400;
        letter-spacing: -.055em;
        line-height: .9;
    }

    .multimo-dn-copy h2 span {
        display: block;
    }

    .multimo-dn-description {
        max-width: 580px;
        margin: 26px auto 0;
        color: #fff;
        font-size: clamp(14px, 1.05vw, 18px);
        line-height: 1.6;
        opacity: .92;
    }

    .multimo-dn-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
        pointer-events: auto;
    }

    .multimo-dn-button {
        min-height: 50px;
        padding: 0 27px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform .18s ease, background .18s ease, color .18s ease;
    }

    .multimo-dn-button:hover {
        transform: translateY(-2px);
    }

    .multimo-dn-primary {
        background: var(--mdn-accent);
        color: #17130b !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    }

    .multimo-dn-secondary {
        border: 1px solid rgba(255, 255, 255, .65);
        background: rgba(15, 16, 18, .2);
        color: #fff !important;
        backdrop-filter: blur(8px);
    }

    .multimo-dn-secondary:hover {
        background: #fff;
        color: #171716 !important;
    }

    .multimo-dn-label {
        position: absolute;
        z-index: 3;
        bottom: 65px;
        display: flex;
        align-items: center;
        gap: 14px;
        text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
        white-space: nowrap;
    }

    .multimo-dn-label-day {
        left: clamp(34px, 5vw, 96px);
    }

    .multimo-dn-label-night {
        right: clamp(34px, 5vw, 96px);
        flex-direction: row-reverse;
        text-align: right;
    }

    .multimo-dn-icon {
        color: var(--mdn-accent);
        font-family: Georgia, serif;
        font-size: 34px;
        line-height: 1;
    }

    .multimo-dn-label small,
    .multimo-dn-label strong {
        display: block;
    }

    .multimo-dn-label small {
        margin-bottom: 6px;
        color: var(--mdn-accent);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .25em;
    }

    .multimo-dn-label strong {
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(18px, 1.5vw, 26px);
        font-weight: 400;
    }

    .multimo-dn-divider {
        position: absolute;
        z-index: 8;
        top: 0;
        bottom: 0;
        left: var(--mdn-split);
        width: 76px;
        margin-left: -38px;
        cursor: ew-resize;
        touch-action: none;
        outline: none;
    }

    .multimo-dn-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, .8);
        box-shadow: 0 0 26px rgba(0, 0, 0, .4);
    }

    .multimo-dn-handle {
        position: absolute;
        top: var(--mdn-handle-top, 72%);
        left: 50%;
        width: 54px;
        height: 54px;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
        background: rgba(18, 18, 18, .58);
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 21px;
        backdrop-filter: blur(8px);
    }

    .multimo-dn-divider:focus-visible .multimo-dn-handle {
        outline: 3px solid var(--mdn-accent);
        outline-offset: 4px;
    }

    .multimo-dn-hint {
        position: absolute;
        z-index: 7;
        top: var(--mdn-hint-top, calc(72% + 40px));
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
        text-align: center;
        text-transform: uppercase;
        opacity: .72;
        pointer-events: none;
    }

    .multimo-dn-carousel .multimo-dn-carousel-arrow {
        position: absolute !important;
        z-index: 20;
        top: 50%;
        width: 48px;
        height: 48px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, .58) !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center;
        transform: translateY(-50%);
        background: rgba(12, 14, 18, .38) !important;
        color: #fff !important;
        cursor: pointer;
        backdrop-filter: blur(9px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .multimo-dn-carousel .multimo-dn-carousel-arrow span {
        display: block;
        margin-top: -3px;
        font-family: Arial, sans-serif;
        font-size: 34px;
        font-weight: 300;
        line-height: 1;
    }

    .multimo-dn-carousel .multimo-dn-carousel-arrow:hover,
    .multimo-dn-carousel .multimo-dn-carousel-arrow:focus-visible {
        border-color: var(--mdn-accent) !important;
        background: rgba(12, 14, 18, .7) !important;
        transform: translateY(-50%) scale(1.06);
        outline: none;
    }

    .multimo-dn-carousel .multimo-dn-carousel-prev {
        left: clamp(22px, 2.6vw, 48px) !important;
    }

    .multimo-dn-carousel .multimo-dn-carousel-next {
        right: clamp(22px, 2.6vw, 48px) !important;
    }

    .multimo-dn-carousel-dots {
        position: absolute;
        z-index: 20;
        bottom: 54px;
        left: 50%;
        display: flex;
        align-items: center;
        gap: 9px;
        transform: translateX(-50%);
    }

    .multimo-dn-carousel-dots button {
        width: 9px;
        height: 9px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .86);
        border-radius: 99px;
        background: rgba(255, 255, 255, .2);
        cursor: pointer;
        box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
        transition: width .22s ease, background .22s ease, border-color .22s ease;
    }

    .multimo-dn-carousel-dots button.is-active {
        width: 30px;
        border-color: var(--mdn-accent);
        background: var(--mdn-accent);
    }

    .multimo-dn-carousel-dots button:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }

    .multimo-dn-carousel .screen-reader-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        white-space: nowrap !important;
    }

    html body .multimo-dn-carousel {
        position: relative !important;
        display: block !important;
        height: var(--mdn-height) !important;
        min-height: var(--mdn-height) !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body .multimo-dn-carousel > .multimo-dn-track {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    html body .multimo-dn-carousel > .multimo-dn-track > .multimo-dn-slide-panel {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
    .multimo-dn-carousel *,
    .multimo-dn-carousel *::before,
    .multimo-dn-carousel *::after,
    .multimo-dn-slide-panel *,
    .multimo-dn-slide-panel *::before,
    .multimo-dn-slide-panel *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}