.return-recovery-stage {
    padding: clamp(28px, 4vw, 64px) 24px;
}

.return-pilots {
    width: min(947px, 100%);
    display: grid;
    align-content: center;
    gap: clamp(28px, 4.5vh, 48px);
}

.return-pilots__copy {
    width: min(785px, 100%);
    margin: 0 auto;
    color: #373737;
    font: 400 20px/30px var(--font-main);
    letter-spacing: 0;
}

.return-pilots__copy strong {
    font-weight: 700;
}

.return-pilots__flags {
    width: min(785px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 229px);
    align-items: center;
    justify-content: center;
    gap: 49px;
    margin-inline: auto;
}

.return-pilots__flags img {
    width: 229px;
    height: 140px;
    object-fit: fill;
}

.return-context {
    width: min(760px, 100%);
    margin: 0 auto;
    color: #373737;
    font: 400 20px/30px var(--font-main);
    letter-spacing: 0;
}

.return-context p {
    margin: 0;
}

.return-context p + p {
    margin-top: 28px;
}

.return-context strong {
    font-weight: 700;
}

/* RETURN MONITOR LOGO TUNING
   Override these variables on one [data-return-monitor] for a unique asset size/position. */
.return-strategies-scene {
    /* Negative values move all three monitors higher; positive values move them lower. */
    --strategy-monitor-offset-y: -30px;
    --strategy-icon-size: 59px;
    --strategy-heart-width: 39px;
    --strategy-heart-height: 39px;
    --strategy-circle-size: 59px;
    --strategy-circle-start-x: 9px;
    --strategy-circle-start-y: 9px;
    --strategy-circle-start-scale: 0.695;
    --strategy-triangle-width: 30px;
    --strategy-triangle-height: 35px;
    --strategy-triangle-x: 20px;
    --strategy-triangle-y: 12px;
    --strategy-play-overshoot: 1.1;
    --strategy-animation-duration: 900ms;
    /* Starts the following scene while the final monitor is travelling upward. */
    margin-bottom: calc(0px - var(--strategy-next-overlap, 0px));
}

/* The incoming stage must not paint over the outgoing monitor during the handoff. */
.return-nudging-scene .sticky-stage {
    background: transparent;
}

.return-strategies {
    position: relative;
    width: 100%;
    height: calc(100svh - var(--header-height));
}

.return-strategies__item {
    --monitor-y: 110svh;
    --monitor-opacity: 1;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    z-index: var(--monitor-z, 1);
    opacity: var(--monitor-opacity);
    transform: translate3d(0, var(--monitor-y), 0);
    pointer-events: none;
    will-change: transform, opacity;
}

.return-strategies__item.is-interactive {
    pointer-events: auto;
}

.return-strategies__item.is-auto-animating {
    --monitor-z: 3;
}

.return-strategies__monitor {
    position: relative;
    width: min(798px, calc(100vw - 48px));
    aspect-ratio: 798 / 566;
    transform: translateY(var(--strategy-monitor-offset-y));
}

.return-strategies__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.return-strategies__screen {
    position: absolute;
    z-index: 1;
    /* 17px left, 26px top, 764x384 inside the 798x566 monitor. */
    left: 2.1303258%;
    top: 4.5936396%;
    width: 95.7393484%;
    height: 67.844523%;
    overflow: hidden;
    border-radius: 5px;
    color: inherit;
    background: #2a2b5f;
    text-decoration: none;
    cursor: pointer;
}

.return-strategies__screen-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
}

.return-strategies__icon-animation {
    position: relative;
    width: var(--strategy-icon-size);
    height: var(--strategy-icon-size);
    flex: 0 0 auto;
    transition: filter 180ms ease-out;
}

.return-strategies__play-circle,
.return-strategies__heart,
.return-strategies__triangle {
    position: absolute;
    height: auto;
    transform-origin: center;
    will-change: transform, opacity;
}

.return-strategies__play-circle {
    inset: 0;
    width: var(--strategy-circle-size);
    height: var(--strategy-circle-size);
    transform: translate(var(--strategy-circle-start-x), var(--strategy-circle-start-y)) scale(var(--strategy-circle-start-scale));
}

.return-strategies__heart {
    top: 0;
    left: 0;
    width: var(--strategy-heart-width);
    height: var(--strategy-heart-height);
    opacity: 1;
    transform: scale(1);
}

.return-strategies__triangle {
    top: var(--strategy-triangle-y);
    left: var(--strategy-triangle-x);
    width: var(--strategy-triangle-width);
    height: var(--strategy-triangle-height);
    opacity: 0;
    transform: scale(0.15);
}

.return-strategies__item.is-playing .return-strategies__heart {
    animation: return-heart-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.return-strategies__item.is-playing .return-strategies__play-circle {
    animation: return-circle-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.return-strategies__item.is-playing .return-strategies__triangle {
    animation: return-triangle-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.return-strategies__item.is-reversing .return-strategies__heart {
    animation: return-heart-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) reverse both;
}

.return-strategies__item.is-reversing .return-strategies__play-circle {
    animation: return-circle-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) reverse both;
}

.return-strategies__item.is-reversing .return-strategies__triangle {
    animation: return-triangle-transform var(--strategy-animation-duration) cubic-bezier(0.22, 1, 0.36, 1) reverse both;
}

.return-strategies__item.is-played .return-strategies__heart {
    opacity: 0;
    transform: scale(0.04);
}

.return-strategies__item.is-played .return-strategies__play-circle {
    transform: translate(0, 0) scale(1);
}

.return-strategies__item.is-played .return-strategies__triangle {
    opacity: 1;
    transform: scale(1);
}

@keyframes return-heart-transform {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    48%,
    100% {
        opacity: 0;
        transform: scale(0.04);
    }
}

@keyframes return-circle-transform {
    0% {
        transform: translate(var(--strategy-circle-start-x), var(--strategy-circle-start-y)) scale(var(--strategy-circle-start-scale));
    }
    58% {
        transform: translate(0, 0) scale(var(--strategy-play-overshoot));
    }
    69% {
        transform: translate(0, 0) scale(var(--strategy-play-overshoot));
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes return-triangle-transform {
    0% {
        opacity: 0;
        transform: scale(0.15);
    }
    24% {
        opacity: 1;
        transform: scale(0.72);
    }
    58% {
        opacity: 1;
        transform: scale(var(--strategy-play-overshoot));
    }
    69% {
        opacity: 1;
        transform: scale(var(--strategy-play-overshoot));
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.return-strategies__title {
    display: block;
    max-width: 390px;
    margin: 0;
    color: #95efce;
    font: 600 clamp(20px, 2.3vw, 28px)/1.22 var(--font-main);
    letter-spacing: 0;
}

.return-strategies__screen:hover .return-strategies__icon-animation,
.return-strategies__screen:focus-visible .return-strategies__icon-animation {
    filter: brightness(1.05);
}

html:not(.return-motion-ready) .return-strategies__item:not(:first-of-type) {
    display: none;
}

/* RETURN NUDGING MONITOR
   The screen opening is exactly 432x288 inside the supplied 464x434 frame. */
.return-nudging {
    --nudging-copy-mask-height: 500px;
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 464px) minmax(300px, 390px);
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 7vw, 78px);
}

.return-nudging__visual {
    position: relative;
    width: min(464px, 100%);
    aspect-ratio: 464 / 434;
    margin: 0;
}

.return-nudging__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.return-nudging__screen {
    --nudging-slide-duration: 720ms;
    position: absolute;
    z-index: 1;
    left: 3.4482759%;
    top: 5.7603687%;
    width: 93.1034483%;
    height: 70%;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}

.return-nudging__slide {
    --nudging-image-width: 100%;
    --nudging-image-height: 100%;
    --nudging-image-x: 0px;
    --nudging-image-y: 0px;
    --nudging-image-scale-x: 1;
    --nudging-image-scale-y: 1;
    position: absolute;
    top: calc(50% + var(--concept-slide-y, 110%));
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    transform: translate(-50%, -50%);
    will-change: top;
    transition: top var(--nudging-slide-duration) var(--motion-ease);
}

.return-nudging__slide--initial {
    --concept-slide-y: 0%;
}

.return-nudging__slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nudging-image-width);
    max-width: none;
    height: var(--nudging-image-height);
    object-fit: cover;
    transform: translate(
        calc(-50% + var(--nudging-image-x)),
        calc(-50% + var(--nudging-image-y))
    ) scale(var(--nudging-image-scale-x), var(--nudging-image-scale-y));
}

/* Per-image tuning: change these values without editing the carousel logic. */
[data-nudging-image="baseline"] {
    --nudging-image-width: 100%;
    --nudging-image-height: 309px;
    --nudging-image-x: 0px;
    --nudging-image-y: -10px;
    --nudging-image-scale-x: 1;
    --nudging-image-scale-y: 1;
}

[data-nudging-image="instructions"] {
    --nudging-image-width: 100%;
    --nudging-image-height: 309px;
    --nudging-image-x: 0px;
    --nudging-image-y: -10px;
    --nudging-image-scale-x: 1;
    --nudging-image-scale-y: 1;
}

.return-nudging__copy {
    color: #373737;
    font-family: var(--font-condensed);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
}

.return-nudging__copy-stage {
    position: relative;
    min-height: var(--nudging-copy-mask-height);
    overflow: hidden;
}

.return-nudging__copy-stage .return-nudging__copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(0);
    transition: transform 720ms var(--motion-ease);
    will-change: transform;
}

.return-nudging__copy--outcome {
    transform: translateY(110%) !important;
}

.return-nudging-scene[data-active-step="2"] .return-nudging__copy--intro {
    transform: translateY(-110%);
}

.return-nudging-scene[data-active-step="2"] .return-nudging__copy--outcome {
    transform: translateY(0) !important;
}

.return-nudging__copy h2 {
    margin: 0 0 34px;
    color: #000;
    font: inherit;
    font-weight: 700;
}

.return-nudging__copy p {
    margin: 0;
}

/* GRIN SMART COLLECTION AND LOGISTICS CONCLUSION
   The large machine stays below the copy and can be aligned with these variables. */
.return-grin-scene {
    /* Increase this value to move the desktop machine closer to the copy. */
    --grin-image-left: 100px;
    /* The PNG contains empty space below the machine. A negative value aligns
       the visible base of the machine with the bottom of a Full HD viewport. */
    --grin-image-bottom: -190px;
    --grin-copy-right: 42px;
    --grin-copy-top: 18%;
}

.return-grin {
    position: relative;
    width: min(1100px, 100%);
    height: calc(100svh - var(--header-height) - clamp(56px, 8vw, 128px));
}

.return-grin__visual {
    position: absolute;
    z-index: 1;
    left: var(--grin-image-left);
    top: auto;
    bottom: var(--grin-image-bottom);
    width: 680px;
    height: 1020px;
    margin: 0;
    transform: translate3d(0, calc(var(--enter-y, 0svh) + var(--exit-y, 0svh)), 0) scale(var(--enter-scale, 1));
    transform-origin: center bottom;
}

.return-grin__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.return-grin__copy,
.return-logistics-card {
    color: #373737;
    font-family: var(--font-condensed);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
}

.return-grin__copy {
    position: absolute;
    z-index: 2;
    top: var(--grin-copy-top);
    right: var(--grin-copy-right);
    width: min(390px, 42%);
    transform: translate3d(0, var(--enter-y, 0svh), 0);
}

.return-grin__copy p,
.return-logistics-card p {
    margin: 0;
}

.return-grin__copy p + p {
    margin-top: 30px;
}

.return-logistics-card {
    width: min(798px, calc(100vw - 48px));
    min-height: 199px;
    display: flex;
    align-items: center;
    padding: 24px 28px;
    border: 3px solid #d9dddc;
    border-radius: 20px;
    color: #000;
    background: #95efce;
}

/* FINAL RECYCLING SCENE
   The visual and copy share one scroll interval, followed by a half-step hold. */
.return-recycle {
    width: min(947px, 100%);
    display: grid;
    grid-template-columns: 349px minmax(0, 390px);
    align-items: center;
    justify-content: center;
    gap: clamp(64px, 8vw, 148px);
}

.return-recycle__visual {
    width: 349px;
    height: 349px;
    margin: 0;
    transform: translate3d(0, var(--enter-y, 0svh), 0) rotate(var(--enter-rotate, 0deg));
    transform-origin: center;
    will-change: transform;
}

.return-recycle__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.return-recycle__copy {
    width: min(390px, 100%);
    color: #373737;
    font-family: var(--font-main);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
    transform: translate3d(0, var(--enter-y, 0svh), 0);
    will-change: transform;
}

.return-recycle__copy p {
    margin: 0;
}

@media (max-width: 900px) {
    .return-nudging {
        grid-template-columns: minmax(0, 420px) minmax(260px, 1fr);
        gap: 36px;
    }

    .return-grin {
        width: 100%;
    }

    .return-grin-scene {
        --grin-image-left: -180px;
        --grin-copy-right: 10px;
    }
}

@media (max-width: 700px) {
    .return-recovery-stage {
        padding: 48px 20px;
    }

    .return-pilots {
        gap: 26px;
    }

    .return-pilots__copy {
        font-size: 17px;
        line-height: 25px;
    }

    .return-context {
        font-size: 17px;
        line-height: 25px;
    }

    .return-pilots__flags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .return-strategies__screen-content {
        gap: 12px;
        padding: 16px;
    }

    .return-strategies__icon-animation {
        width: clamp(36px, 9vw, 50px);
        height: clamp(36px, 9vw, 50px);
        transform: scale(0.8475);
    }

    .return-strategies__title {
        font-size: clamp(15px, 4vw, 21px);
    }

    .return-nudging {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .return-nudging__visual {
        width: min(464px, 100%);
        margin-inline: auto;
    }

    .return-nudging__copy {
        width: min(464px, 100%);
        margin-inline: auto;
        font-size: 17px;
        line-height: 25px;
    }

    .return-nudging__copy h2 {
        margin-bottom: 22px;
    }

    .return-grin {
        position: relative;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .return-grin__visual {
        position: relative;
        z-index: auto;
        inset: auto;
        width: min(280px, 76vw);
        height: auto;
        aspect-ratio: 2 / 3;
        margin-inline: auto;
        transform: none;
    }

    .return-grin__copy,
    .return-logistics-card {
        position: relative;
        z-index: auto;
        inset: auto;
        width: min(464px, 100%);
        margin-inline: auto;
        font-size: 17px;
        line-height: 25px;
        transform: none;
    }

    .return-logistics-card {
        min-height: auto;
        padding: 24px;
    }

    .return-recycle {
        width: min(464px, 100%);
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .return-recycle__visual {
        width: min(280px, 72vw);
        height: auto;
        aspect-ratio: 1;
        margin-inline: auto;
    }

    .return-recycle__copy {
        width: 100%;
        font-size: 17px;
        line-height: 25px;
    }
}

@media (max-height: 680px), (max-width: 700px), (prefers-reduced-motion: reduce) {
    .return-pilots-scene,
    .return-copy-scene,
    .return-strategies-scene,
    .return-nudging-scene,
    .return-grin-scene,
    .return-logistics-scene,
    .return-recycle-scene {
        height: auto;
    }

    .return-strategies-scene {
        margin-bottom: 0;
    }

    .return-nudging-scene .sticky-stage {
        background: var(--background);
    }

    .return-pilots-scene .sticky-stage,
    .return-copy-scene .sticky-stage,
    .return-strategies-scene .sticky-stage,
    .return-nudging-scene .sticky-stage,
    .return-grin-scene .sticky-stage,
    .return-logistics-scene .sticky-stage,
    .return-recycle-scene .sticky-stage {
        position: relative;
        top: auto;
        min-height: auto;
    }

    .return-pilots-scene [data-scroll-enter],
    .return-copy-scene [data-scroll-enter],
    .return-strategies-scene [data-scroll-enter],
    .return-grin-scene [data-scroll-enter],
    .return-logistics-scene [data-scroll-enter],
    .return-recycle-scene [data-scroll-enter] {
        transform: none;
        will-change: auto;
    }

    .return-strategies {
        height: auto;
        display: grid;
        gap: 30px;
        padding-block: 24px;
    }

    .return-strategies__item {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        will-change: auto;
    }

    .return-strategies__monitor {
        width: min(798px, 100%);
        margin-inline: auto;
        transform: none;
    }

    .return-nudging__copy-stage {
        min-height: 0;
        overflow: visible;
        display: grid;
        gap: 28px;
    }

    .return-nudging__copy-stage .return-nudging__copy,
    .return-nudging__copy--outcome,
    .return-nudging-scene[data-active-step="2"] .return-nudging__copy--intro,
    .return-nudging-scene[data-active-step="2"] .return-nudging__copy--outcome {
        position: relative;
        inset: auto;
        transform: none !important;
        transition: none;
    }
}

/* ==========================================================
   CLIENT UPDATE — Return & Recovery video monitor cluster
   Desktop: copy settles first, then the three 364x259 monitors
   arrive one-by-one and remain in the final 2 + 1 composition.
   ========================================================== */
.return-strategies-scene {
    --strategy-monitor-offset-y: 0px;
    --strategy-icon-size: 42px;
    --strategy-heart-width: 27px;
    --strategy-heart-height: 27px;
    --strategy-circle-size: 42px;
    --strategy-circle-start-x: 7px;
    --strategy-circle-start-y: 7px;
    --strategy-circle-start-scale: 0.65;
    --strategy-triangle-width: 17px;
    --strategy-triangle-height: 20px;
    --strategy-triangle-x: 13px;
    --strategy-triangle-y: 11px;
    --strategy-next-overlap: 0svh;
    margin-bottom: 0;
}

.return-strategies-stage {
    padding: 18px 24px 22px;
}

.return-strategies {
    position: relative;
    width: min(820px, calc(100vw - 48px));
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 364px);
    justify-content: center;
    align-items: start;
    column-gap: 54px;
    row-gap: 8px;
    margin-inline: auto;
}

.return-strategies__intro {
    grid-column: 1 / -1;
    width: min(798px, 100%);
    margin: 0 auto 8px;
    color: #373737;
    font: 400 20px/30px var(--font-condensed);
    letter-spacing: 0;
    opacity: 1;
    transform: translate3d(0, var(--strategy-intro-y, 55vh), 0);
    will-change: transform, opacity;
}

.return-strategies__intro p {
    margin: 0;
}

.return-strategies__intro p + p {
    margin-top: 20px;
}

.return-strategies__intro strong {
    font-weight: 700;
}

.return-strategies__item {
    --strategy-item-y: 90vh;
    --strategy-item-opacity: 1;
    position: relative;
    inset: auto;
    display: block;
    width: 364px;
    height: 259px;
    margin: 0;
    z-index: 1;
    opacity: 1;
    transform: translate3d(0, var(--strategy-item-y), 0);
    pointer-events: none;
    will-change: transform, opacity;
}

.return-strategies__item:nth-of-type(3) {
    grid-column: 1 / -1;
    justify-self: center;
}

.return-strategies__item.is-interactive {
    pointer-events: auto;
}

.return-strategies__item.is-auto-animating {
    z-index: 3;
}

.return-strategies__monitor {
    position: relative;
    width: 364px;
    height: 259px;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
}

.return-strategies__frame {
    width: 364px;
    height: 259px;
}

.return-strategies__screen-content {
    gap: 18px;
    padding: 18px 24px;
}

.return-strategies__title {
    max-width: 214px;
    color: #94eece;
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

/* The old sequence overlapped the next scene. The new final cluster remains
   visible until its own scene ends, then the following section starts cleanly. */
.return-nudging-scene .sticky-stage {
    background: var(--background);
}

@media (max-height: 760px) and (min-width: 761px) {
    .return-strategies {
        grid-template-columns: repeat(2, 320px);
        width: min(720px, calc(100vw - 40px));
        column-gap: 38px;
        row-gap: 2px;
    }

    .return-strategies__item,
    .return-strategies__monitor,
    .return-strategies__frame {
        width: 320px;
        height: 228px;
    }

    .return-strategies__intro {
        font-size: 17px;
        line-height: 25px;
        margin-bottom: 2px;
    }

    .return-strategies__intro p + p {
        margin-top: 12px;
    }

    .return-strategies__title {
        max-width: 188px;
        font-size: 16px;
    }
}