@keyframes dsStoryLeftTopDown {
    0% { transform: translate3d(0, -13%, 0); opacity: .18; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes dsStoryRightBottomUp {
    0% { transform: translate3d(0, 13%, 0); opacity: .18; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

.ds-page #approach .story-slide.is-active .story-panel-copy,
.ds-page #approach .story-slide.is-active .story-map-panel,
.ds-page #approach .story-slide.is-active .story-strategy-panel {
    animation: dsStoryLeftTopDown .82s cubic-bezier(.22,.61,.36,1) both !important;
    will-change: transform, opacity;
}

.ds-page #approach .story-slide.is-active .story-panel-image {
    animation: dsStoryRightBottomUp .82s cubic-bezier(.22,.61,.36,1) both !important;
    will-change: transform, opacity;
}

.ds-page #approach .story-slide,
.ds-page #approach .story-panel {
    overflow: hidden !important;
}

.ds-page #work .case-slide {
    transition: opacity .58s ease, transform .9s cubic-bezier(.22,.61,.36,1) !important;
}

@media (min-width: 981px) {
    .ds-page #events .event-card:not(.is-active) .event-card__num {
        position: absolute !important;
        top: 24px !important;
        left: 22px !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
        line-height: 1 !important;
        z-index: 8 !important;
    }

    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 56% !important;
        font-size: clamp(15px, 1vw, 18px) !important;
        line-height: .95 !important;
        letter-spacing: -.01em !important;
    }
}

@media (min-width: 981px) and (max-width: 1360px) {
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 58% !important;
        font-size: 15px !important;
    }

    .ds-page #events .event-card:not(.is-active) .event-card__num {
        top: 20px !important;
        left: 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 980px) {
    .ds-page #events .event-card:nth-child(5) .event-card__title-closed {
        font-size: inherit !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-page #approach .story-slide.is-active .story-panel-copy,
    .ds-page #approach .story-slide.is-active .story-map-panel,
    .ds-page #approach .story-slide.is-active .story-strategy-panel,
    .ds-page #approach .story-slide.is-active .story-panel-image {
        animation: none !important;
    }
}


/* =========================================================
   v1.0.1 — EVENT CARD RESPONSIVE TEXT REFINEMENT
   ========================================================= */

/* Green collapsed cards: use Design Space dark blue for stronger contrast. */
@media (min-width: 981px) {
    .ds-page #events .event-card:nth-child(2):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(4):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(2):not(.is-active) .event-card__num,
    .ds-page #events .event-card:nth-child(4):not(.is-active) .event-card__num {
        color: #1d3464 !important;
    }

    /* Card 05: retain a readable size, but keep clear space around the number. */
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 58% !important;
        font-size: clamp(17px, 1.16vw, 21px) !important;
        line-height: 1 !important;
        letter-spacing: -0.025em !important;
        white-space: nowrap !important;
    }
}

/* Medium laptops: slightly tighter but still readable. */
@media (min-width: 981px) and (max-width: 1280px) {
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 59% !important;
        font-size: clamp(16px, 1.25vw, 18px) !important;
    }
}

/* Very narrow desktop/laptop widths: protect the 05/title separation. */
@media (min-width: 981px) and (max-width: 1120px) {
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 60% !important;
        font-size: 15px !important;
        letter-spacing: -0.04em !important;
    }
}

/* On stacked/tablet/mobile event cards, use normal readable horizontal sizing. */
@media (max-width: 980px) {
    .ds-page #events .event-card:nth-child(5) .event-card__title-closed {
        font-size: clamp(16px, 4vw, 20px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        white-space: normal !important;
    }

    .ds-page #events .event-card:nth-child(2) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(4) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(2) .event-card__num,
    .ds-page #events .event-card:nth-child(4) .event-card__num {
        color: #1d3464 !important;
    }
}


/* =========================================================
   v1.0.2 — CLEAN EVENT CARD TYPOGRAPHY
   ========================================================= */

/* Remove 01–05 from every event card. */
.ds-page #events .event-card__num {
    display: none !important;
}

/* Every collapsed vertical title uses exactly the same sizing and positioning. */
@media (min-width: 981px) {
    .ds-page #events .event-card:not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) rotate(-90deg) !important;
        transform-origin: center center !important;

        font-size: clamp(18px, 1.28vw, 22px) !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Blue cards: green titles. */
    .ds-page #events .event-card:nth-child(1):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(3):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        color: #00e196 !important;
    }

    /* Green cards: dark blue titles for contrast. */
    .ds-page #events .event-card:nth-child(2):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(4):not(.is-active) .event-card__title-closed {
        color: #1d3464 !important;
    }
}

/* Tablet/mobile: keep numbers removed and use consistent readable title sizing. */
@media (max-width: 980px) {
    .ds-page #events .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5) .event-card__title-closed {
        font-size: clamp(17px, 4vw, 20px) !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
    }

    .ds-page #events .event-card:nth-child(1) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(3) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5) .event-card__title-closed {
        color: #00e196 !important;
    }

    .ds-page #events .event-card:nth-child(2) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(4) .event-card__title-closed {
        color: #1d3464 !important;
    }
}


/* =========================================================
   v1.0.3 — RESTORE ORIGINAL VERTICAL EVENT TITLES
   ========================================================= */

/* Numbers remain removed. */
.ds-page #events .event-card__num {
    display: none !important;
}

/* Desktop collapsed cards: restore the exact original vertical orientation.
   All five titles use one shared size and weight. */
@media (min-width: 981px) {
    .ds-page #events .event-card:not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate3d(-50%, -50%, 0) rotate(180deg) !important;
        transform-origin: center center !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: clamp(20px, 1.35vw, 26px) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Blue cards */
    .ds-page #events .event-card:nth-child(1):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(3):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(5):not(.is-active) .event-card__title-closed {
        color: #00e196 !important;
    }

    /* Green cards */
    .ds-page #events .event-card:nth-child(2):not(.is-active) .event-card__title-closed,
    .ds-page #events .event-card:nth-child(4):not(.is-active) .event-card__title-closed {
        color: #1d3464 !important;
    }
}