@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion {
        /* Slightly shorter than desktop so pauses still exist on phones without
           making every section overly long. */
        --scene-scroll-unit: 66vh;
    }

    html.mobile-motion .scroll-scene {
        height: calc(
            (var(--scene-steps) + 1) * var(--scene-scroll-unit)
            + var(--scene-hold-height, 0px)
            - var(--scene-start-trim-height, 0px)
        );
        min-height: calc(100svh - var(--header-height));
    }

    html.mobile-motion .scroll-scene .sticky-stage {
        position: sticky !important;
        top: var(--header-height) !important;
        min-height: calc(100svh - var(--header-height)) !important;
        height: calc(100svh - var(--header-height));
        place-items: center;
        padding: 24px 20px;
        overflow: hidden;
    }

    html.mobile-motion [data-scroll-enter] {
        will-change: transform, opacity;
    }

    html.mobile-motion [data-enter-step] {
        opacity: 0;
        transform: translateY(56px) scale(0.95);
        transition: opacity 520ms var(--motion-ease), transform 620ms var(--motion-ease);
    }

    html.mobile-motion [data-enter-step].is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Chapter curtains keep the desktop-style handoff and occupy a full viewport. */
    html.mobile-motion .chapter-motion-ready .chapter-curtain {
        height: 180svh !important;
        min-height: 100svh;
    }

    html.mobile-motion .chapter-motion-ready .chapter-curtain__stage,
    html.mobile-motion .chapter-motion-ready .chapter-curtain[data-curtain-phase="entry"] .chapter-curtain__stage,
    html.mobile-motion .chapter-motion-ready .chapter-curtain[data-curtain-phase="settled"] .chapter-curtain__stage {
        position: sticky !important;
        inset: auto !important;
        top: var(--header-height) !important;
        height: calc(100svh - var(--header-height)) !important;
        min-height: calc(100svh - var(--header-height)) !important;
        padding: 30px 20px;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden;
    }

    html.mobile-motion .chapter-motion-ready .chapter-curtain[data-curtain-phase="entry"] .chapter-curtain__stage {
        position: fixed !important;
        inset: var(--header-height) 0 auto !important;
    }

    html.mobile-motion .chapter-curtain__copy {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    html.mobile-motion .chapter-curtain__copy p {
        margin-top: 20px;
    }

    /* Keep the summary / LCA intro reading holds on mobile. */
    html.mobile-motion .chapter-motion-ready .intro-summary-hold {
        height: calc(var(--summary-height, 100svh) + var(--summary-hold, 100svh));
    }

    html.mobile-motion .chapter-motion-ready .intro-summary-hold .intro-summary {
        position: sticky !important;
        top: min(var(--header-height), calc(100svh - var(--summary-height, 0px))) !important;
        min-height: calc(100svh - var(--header-height));
        padding: 56px 20px;
    }

    html.mobile-motion .lca-introduction-hold {
        height: auto !important;
    }

    html.mobile-motion .lca-introduction {
        position: relative !important;
        top: auto !important;
        min-height: calc(100svh - var(--header-height));
        display: grid;
        align-content: center;
        padding: 56px 20px;
    }

    /* Intro monitor and map */
    html.mobile-motion .challenge-content,
    html.mobile-motion .map-layout,
    html.mobile-motion .business-models,
    html.mobile-motion .policy-recommendations,
    html.mobile-motion .circular-case,
    html.mobile-motion .return-nudging {
        width: min(100%, 430px);
        grid-template-columns: 1fr;
        gap: 18px;
        margin-inline: auto;
    }

    html.mobile-motion .challenge-copy,
    html.mobile-motion .business-policy__copy,
    html.mobile-motion .circular-case__copy,
    html.mobile-motion .return-nudging__copy {
        width: 100%;
        max-width: none;
        transform: none;
        font-size: 17px;
        line-height: 25px;
    }

    html.mobile-motion .challenge-visual,
    html.mobile-motion .circular-case__visual,
    html.mobile-motion .return-nudging__visual,
    html.mobile-motion .business-models__visual,
    html.mobile-motion .lca-dashboard__visual {
        position: relative;
        width: min(88vw, 350px);
        margin-inline: auto;
        overflow: visible;
    }

    html.mobile-motion .challenge-visual {
        aspect-ratio: 465 / 330;
        height: auto;
    }

    html.mobile-motion .monitor-frame-image,
    html.mobile-motion .circular-case__frame,
    html.mobile-motion .return-nudging__frame,
    html.mobile-motion .business-models__frame,
    html.mobile-motion .lca-dashboard__frame {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    html.mobile-motion .monitor-screen-window {
        top: 4.3%;
        left: 3.2%;
        width: 93.6%;
        height: 67.9%;
    }

    html.mobile-motion .monitor-screen-image {
        width: 100%;
        height: 110%;
    }

    html.mobile-motion .map-layout {
        height: auto;
        aspect-ratio: auto;
    }

    html.mobile-motion .map-copy {
        position: relative;
        width: 100%;
    }

    html.mobile-motion .map-visual {
        position: relative;
        top: auto;
        right: auto;
        width: min(84vw, 340px);
        height: auto;
        aspect-ratio: 539 / 699;
        margin-inline: auto;
    }

    html.mobile-motion .map-layer {
        width: 100%;
    }

    /* LCA chart motion stays active; size the monitor and keep the hint on-screen. */
    html.mobile-motion .lca-stage,
    html.mobile-motion .business-policy-stage,
    html.mobile-motion .circular-design-stage,
    html.mobile-motion .return-recovery-stage,
    html.mobile-motion .training-library-stage {
        overflow: visible !important;
    }

    html.mobile-motion .lca-content,
    html.mobile-motion .lca-findings,
    html.mobile-motion .lca-dashboard,
    html.mobile-motion .circular-guide,
    html.mobile-motion .circular-steps,
    html.mobile-motion .return-pilots,
    html.mobile-motion .return-context,
    html.mobile-motion .return-grin,
    html.mobile-motion .return-logistics-card,
    html.mobile-motion .return-recycle,
    html.mobile-motion .training-library {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    html.mobile-motion .lca-dashboard {
        display: grid;
        align-content: center;
    }

    html.mobile-motion .lca-dashboard__visual {
        margin-bottom: 22px;
    }

    html.mobile-motion .lca-dashboard__link {
        position: absolute !important;
        top: 58%;
        right: -8px;
        width: min(43vw, 165px);
        height: auto;
        aspect-ratio: 239 / 56;
        margin: 0;
        transform: translateX(var(--dashboard-pointer-x, 0));
    }

    /* Circular Design guide and case study keep the monitor and the sliding concepts. */
    html.mobile-motion .circular-guide {
        width: min(100%, 430px);
        gap: 18px;
    }

    html.mobile-motion .circular-guide__copy,
    html.mobile-motion .circular-steps > p {
        font-size: 17px;
        line-height: 25px;
    }

    html.mobile-motion .circular-guide__visual {
        position: relative;
        width: min(88vw, 350px);
        margin-inline: auto;
        overflow: visible;
    }

    html.mobile-motion .circular-guide__link {
        position: absolute !important;
        top: 64%;
        right: -10px;
        width: min(43vw, 165px);
        height: auto;
        aspect-ratio: 239 / 56;
        margin: 0;
        transform: none;
    }

    html.mobile-motion .circular-case {
        gap: 20px;
    }

    html.mobile-motion .circular-case__visual {
        order: 1;
        aspect-ratio: 465 / 330;
    }

    html.mobile-motion .circular-case__screen {
        position: absolute !important;
        top: 4.5% !important;
        left: 3.2% !important;
        width: 93.6% !important;
        height: 67.9% !important;
        display: block !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: inset 0 0 0 1px rgb(42 43 95 / 0.08);
    }

    html.mobile-motion .circular-case__concept {
        position: absolute !important;
        top: calc(50% + var(--concept-slide-y, 115%)) !important;
        left: 50% !important;
        width: min(var(--concept-width), calc(100% - 16px)) !important;
        max-height: var(--concept-height) !important;
        aspect-ratio: 316 / 215;
        transform: translate(-50%, -50%) !important;
        background: #fff;
        will-change: top;
    }

    html.mobile-motion .circular-case__concept img {
        position: absolute !important;
        top: calc(50% + var(--concept-image-y)) !important;
        height: var(--concept-image-height) !important;
        width: calc(var(--concept-image-width) + var(--concept-image-width)) !important;
        max-width: none !important;
        transform: translate(var(--concept-image-x), -50%) !important;
    }

    html.mobile-motion .circular-case__concept--left img { left: 0 !important; }
    html.mobile-motion .circular-case__concept--right img { right: 0 !important; }

    html.mobile-motion .circular-case__copy {
        order: 2;
    }

    /* Return strategies: keep the monitor-by-monitor story and the play-icon animation. */
    html.mobile-motion .return-strategies-scene {
        --strategy-next-overlap: 0svh;
    }

    html.mobile-motion .return-strategies {
        width: min(100%, 430px) !important;
        height: calc(100svh - var(--header-height));
        margin-inline: auto;
        display: block !important;
    }

    html.mobile-motion .return-strategies__item {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center;
        opacity: var(--monitor-opacity, 1) !important;
        transform: translate3d(0, var(--monitor-y, 0svh), 0) !important;
        pointer-events: none !important;
        will-change: transform, opacity;
    }

    html.mobile-motion .return-strategies__item.is-interactive {
        pointer-events: auto !important;
    }

    html.mobile-motion .return-strategies__monitor {
        width: min(88vw, 350px) !important;
        transform: translateY(-8px);
    }

    html.mobile-motion .return-strategies__screen-content {
        gap: 10px;
        padding: 12px 14px;
    }

    html.mobile-motion .return-strategies__icon-animation {
        width: 40px;
        height: 40px;
        transform: scale(0.78);
        transform-origin: center;
    }

    html.mobile-motion .return-strategies__title {
        font-size: clamp(13px, 4vw, 18px);
        line-height: 1.22;
    }

    /* Return nudging keeps the big-screen frame and the slide transition, with copy below. */
    html.mobile-motion .return-nudging {
        gap: 20px;
    }

    html.mobile-motion .return-nudging__visual {
        order: 1;
        aspect-ratio: 464 / 434;
    }

    html.mobile-motion .return-nudging__screen {
        position: absolute !important;
        left: 3.4482759% !important;
        top: 5.7603687% !important;
        width: 93.1034483% !important;
        height: 66.359447% !important;
        display: block !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    html.mobile-motion .return-nudging__slide,
    html.mobile-motion .return-nudging__slide--initial {
        position: absolute !important;
        top: calc(50% + var(--concept-slide-y, 110%)) !important;
        left: 50% !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        transform: translate(-50%, -50%) !important;
        overflow: hidden;
    }

    html.mobile-motion .return-nudging__slide img {
        top: 50% !important;
        left: 50% !important;
        width: var(--nudging-image-width) !important;
        height: var(--nudging-image-height) !important;
        max-width: none !important;
        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)) !important;
    }

    html.mobile-motion .return-nudging__copy-stage {
        order: 2;
        position: relative;
        min-height: 255px;
        overflow: hidden;
        display: block;
    }

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

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

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

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

    /* Other Return & Recovery sections keep compact mobile sizes. */
    html.mobile-motion .return-pilots,
    html.mobile-motion .return-context,
    html.mobile-motion .return-grin,
    html.mobile-motion .return-recycle {
        width: min(100%, 430px);
    }

    html.mobile-motion .return-pilots__copy,
    html.mobile-motion .return-context,
    html.mobile-motion .return-grin__copy,
    html.mobile-motion .return-logistics-card,
    html.mobile-motion .return-recycle__copy {
        font-size: 17px;
        line-height: 25px;
    }

    /* Business & Policy: keep hint over the monitor, not below. */
    html.mobile-motion .business-models {
        gap: 20px;
    }

    html.mobile-motion .business-models__visual {
        order: 1;
        overflow: visible;
    }

    html.mobile-motion .business-policy__copy {
        order: 2;
    }

    html.mobile-motion .business-models__pointer {
        position: absolute !important;
        left: -8px;
        top: 59%;
        width: min(43vw, 165px);
        height: auto;
        aspect-ratio: 239 / 56;
        margin: 0;
        opacity: var(--enter-opacity, 1) !important;
        transform: translateY(var(--enter-y, 0px)) !important;
    }

    /* Training Materials remain animated but laid out for mobile. */
    html.mobile-motion .training-library-stage {
        padding: 34px 20px 42px !important;
        overflow: hidden !important;
    }

    html.mobile-motion .training-library {
        row-gap: 24px;
    }

    html.mobile-motion .training-library__lead h2,
    html.mobile-motion .training-library__lead p,
    html.mobile-motion .training-library__closing {
        font-size: 17px;
        line-height: 25px;
    }

    html.mobile-motion .training-library__lead h2 {
        font-size: 18px;
        margin-bottom: 14px;
    }

    html.mobile-motion .training-library__resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    html.mobile-motion .training-resource {
        width: 100%;
        min-height: 0;
        grid-template-rows: auto auto;
    }

    html.mobile-motion .training-resource img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    html.mobile-motion .training-resource span {
        font-size: 15px;
        line-height: 18px;
    }

    html.mobile-motion .training-resource:last-child:nth-child(odd) {
        width: calc((100% - 14px) / 2);
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* ==========================================================
   MOBILE REFINEMENTS — v3
   Keep the desktop storytelling language, but selectively let long copy flow
   naturally where a sticky viewport would crop content on phones.
   ========================================================== */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    /* The opening Introduction is always exactly the first phone viewport. */
    html.mobile-motion .chapter-title {
        width: 100%;
        height: 100dvh;
        min-height: 100svh;
    }

    /* The six-device detail is intentionally a normal document-flow section on
       mobile. All copy stays readable, including the final Smart sensor item. */
    html.mobile-motion .device-detail-scene {
        height: auto !important;
        min-height: 0 !important;
    }

    html.mobile-motion .device-detail-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 42px 20px 54px;
        overflow: visible !important;
    }

    html.mobile-motion .device-detail-stage {
        width: min(100%, 430px);
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    html.mobile-motion .device-detail-copy {
        height: auto;
        min-height: 0;
    }

    html.mobile-motion .device-facts li,
    html.mobile-motion .device-facts li.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }

    html.mobile-motion .device-card--small,
    html.mobile-motion .device-card--small.is-active {
        transform: none !important;
    }

    /* LCA pie and bars use the same scroll-linked reveal as desktop. These
       declarations override the old phone fallback that showed final states. */
    html.mobile-motion.chapter-motion-ready [data-lca-chart="pie"] .lca-pie {
        clip-path: inset(0 var(--pie-crop-right, 100%) 0 0) !important;
        -webkit-clip-path: inset(0 var(--pie-crop-right, 100%) 0 0) !important;
        will-change: clip-path;
    }

    html.mobile-motion [data-lca-chart="pie"] .lca-pie__fill {
        mask-image: conic-gradient(
            transparent 0deg calc(360deg - var(--pie-angle, 0deg)),
            #000 calc(360deg - var(--pie-angle, 0deg)) 360deg
        ) !important;
        -webkit-mask-image: conic-gradient(
            transparent 0deg calc(360deg - var(--pie-angle, 0deg)),
            #000 calc(360deg - var(--pie-angle, 0deg)) 360deg
        ) !important;
        will-change: mask-image;
    }

    html.mobile-motion.chapter-motion-ready [data-lca-chart="pie"] .lca-legend-image {
        clip-path: inset(var(--legend-crop-top, 100%) 0 0 0) !important;
        -webkit-clip-path: inset(var(--legend-crop-top, 100%) 0 0 0) !important;
        will-change: clip-path;
    }

    html.mobile-motion [data-lca-chart="bars"] .lca-bars__bar {
        transform: scaleY(var(--bar-progress, 0)) !important;
        transform-origin: bottom !important;
        will-change: transform;
    }

    /* Hint/pointer graphics sit partly on the artwork, just higher than before,
       so they retain the desktop visual cue without leaving the viewport. */
    html.mobile-motion .lca-dashboard__link {
        top: 50%;
        right: -4px;
    }

    html.mobile-motion .circular-guide__link {
        top: 52%;
        right: -4px;
    }

    html.mobile-motion .business-models__pointer {
        top: 52%;
        left: -4px;
    }

    /* Restore the A-B-C-D-E reveal sequence. */
    html.mobile-motion .circular-steps-scene {
        --scene-scroll-unit: 54vh;
    }

    html.mobile-motion .circular-steps-scene .sticky-stage {
        padding: 18px 20px;
    }

    html.mobile-motion .circular-steps {
        width: min(100%, 430px);
    }

    html.mobile-motion .circular-steps [data-scroll-enter] {
        opacity: 1 !important;
        transform: translate3d(0, var(--enter-y, 0svh), 0) !important;
        will-change: transform !important;
    }

    html.mobile-motion .circular-steps__list {
        gap: 8px;
    }

    html.mobile-motion .circular-step {
        padding-block: 9px;
    }

    /* Smart pillbox carousel: scale each HALF of the two-up source PNG into the
       actual monitor opening. The former fixed 316x215 image dimensions caused
       the concepts to be oversized on phones. */
    html.mobile-motion .circular-case__visual {
        width: min(92vw, 365px);
    }

    html.mobile-motion .circular-case__concept,
    html.mobile-motion .circular-case__concept:first-child {
        position: absolute !important;
        top: calc(50% + var(--concept-slide-y, 115%)) !important;
        left: 50% !important;
        width: min(73%, 245px) !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        aspect-ratio: 316 / 215;
        overflow: hidden;
        border-radius: 6px;
        transform: translate(-50%, -50%) !important;
        transition: top var(--concept-slide-duration, 720ms) var(--motion-ease) !important;
        will-change: top !important;
    }

    html.mobile-motion .circular-case__concept img {
        top: 50% !important;
        width: 200% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: fill;
        transform: translateY(-50%) !important;
    }

    html.mobile-motion .circular-case__concept--left img {
        left: 0 !important;
        right: auto !important;
    }

    html.mobile-motion .circular-case__concept--right img {
        left: auto !important;
        right: 0 !important;
    }

    /* Return & Recovery pilots: lead -> flags -> result, as on desktop. */
    html.mobile-motion .return-pilots-scene [data-scroll-enter] {
        opacity: 1 !important;
        transform: translate3d(0, var(--enter-y, 0svh), 0) !important;
        will-change: transform !important;
    }

    html.mobile-motion .return-pilots {
        gap: clamp(22px, 4svh, 34px);
    }

    /* The following text-only context does not need a long sticky timeline. */
    html.mobile-motion .return-copy-scene {
        height: auto !important;
        min-height: 0 !important;
    }

    html.mobile-motion .return-copy-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 58svh !important;
        padding: 38px 20px;
        overflow: visible !important;
    }

    /* Three video monitors: slower travel and an intentional pause on each one.
       Gap is zero in HTML, so the next monitor begins as the current one exits. */
    html.mobile-motion .return-strategies-scene {
        --scene-scroll-unit: 90vh;
        --strategy-next-overlap: 0svh;
    }

    html.mobile-motion .return-strategies__monitor {
        width: min(88vw, 350px) !important;
    }

    /* Packaging carousel: correct image fit; only the monitor slide animates.
       Both copy blocks are ordinary, static text underneath the monitor. */
    html.mobile-motion .return-nudging-scene .sticky-stage {
        padding: 12px 20px 16px;
    }

    html.mobile-motion .return-nudging {
        width: min(100%, 430px);
        gap: 10px;
        align-content: center;
    }

    html.mobile-motion .return-nudging__visual {
        width: min(82vw, 310px, 38svh);
        margin-inline: auto;
    }

    html.mobile-motion [data-nudging-image="baseline"],
    html.mobile-motion [data-nudging-image="instructions"] {
        --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;
    }

    html.mobile-motion .return-nudging__slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transform: translate(-50%, -50%) !important;
    }

    html.mobile-motion .return-nudging__copy-stage {
        position: relative !important;
        min-height: 0 !important;
        display: grid !important;
        gap: 8px;
        overflow: visible !important;
    }

    html.mobile-motion .return-nudging__copy-stage .return-nudging__copy,
    html.mobile-motion .return-nudging__copy--outcome,
    html.mobile-motion .return-nudging-scene[data-active-step="2"] .return-nudging__copy--intro,
    html.mobile-motion .return-nudging-scene[data-active-step="2"] .return-nudging__copy--outcome {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100%;
        margin: 0;
        font-size: clamp(13px, 3.55vw, 15px);
        line-height: 1.36;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html.mobile-motion .return-nudging__copy h2 {
        margin: 0 0 8px;
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.25;
    }

    html.mobile-motion .return-nudging__copy p {
        margin: 0;
    }

    /* GRIN needs less dead scroll than the desktop version. */
    html.mobile-motion .return-grin-scene {
        height: 118svh !important;
    }

    /* Reverse-logistics card receives a small reading pause. */
    html.mobile-motion .return-logistics-scene {
        height: 125svh !important;
    }

    /* Bring back the clockwise recycling rotation from desktop. */
    html.mobile-motion .return-recycle-scene .return-recycle__visual {
        transform: translate3d(0, var(--enter-y, 0svh), 0)
                   rotate(var(--enter-rotate, 0deg)) !important;
        transform-origin: center;
        will-change: transform !important;
    }

    html.mobile-motion .return-recycle-scene .return-recycle__copy {
        transform: translate3d(0, var(--enter-y, 0svh), 0) !important;
        will-change: transform !important;
    }
}

/* On very short phones the packaging text still remains accessible. The monitor
   scales by viewport height first, leaving enough room for the static copy. */
@media (max-width: 760px) and (max-height: 680px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion .return-nudging__visual {
        width: min(68vw, 220px, 31svh);
    }

    html.mobile-motion .return-nudging__copy-stage .return-nudging__copy,
    html.mobile-motion .return-nudging__copy--outcome {
        font-size: 12px;
        line-height: 1.28;
    }

    html.mobile-motion .return-nudging__copy h2 {
        font-size: 13.5px;
        margin-bottom: 5px;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion .return-nudging__slide,
    html.mobile-motion .return-nudging__slide--initial {
        transition: top var(--nudging-slide-duration, 720ms) var(--motion-ease) !important;
        will-change: top !important;
    }
}

/* ==========================================================
   MOBILE REFINEMENTS — v4
   Full-viewport chapter cards without the curtain wipe, shorter holds where
   requested, consistent interactive hints, and tighter phone-scale artwork.
   ========================================================== */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    /* Chapter separators are now simple full-screen cards. They enter with the
       document scroll; no fixed/flying curtain layer is used on mobile. */
    html.mobile-motion .chapter-motion-ready .chapter-curtain,
    html.mobile-motion .chapter-curtain {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: hidden;
    }

    html.mobile-motion .chapter-motion-ready .chapter-curtain .chapter-curtain__stage,
    html.mobile-motion .chapter-motion-ready .chapter-curtain[data-curtain-phase="entry"] .chapter-curtain__stage,
    html.mobile-motion .chapter-motion-ready .chapter-curtain[data-curtain-phase="settled"] .chapter-curtain__stage,
    html.mobile-motion .chapter-curtain__stage {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        width: 100%;
        height: 100svh !important;
        min-height: 100svh !important;
        padding: calc(var(--header-height) + 28px) 20px 34px;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html.mobile-motion .chapter-curtain__background,
    html.mobile-motion .chapter-curtain__copy {
        transform: none !important;
    }

    html.mobile-motion .chapter-curtain__background {
        background: #2a2b5f;
    }

    /* Use the shared desktop zoom variables on the challenge monitor. */
    html.mobile-motion .monitor-screen-image {
        transform: translate(-50%, -50%) scale(var(--scroll-zoom, 1)) !important;
        will-change: transform;
    }

    /* Circularity dashboard: substantially shorter phone hold. */
    html.mobile-motion .lca-dashboard-scene {
        height: 165svh !important;
        margin-top: 0 !important;
    }

    html.mobile-motion .lca-dashboard-scene .sticky-stage {
        overflow: visible !important;
    }

    /* All three clickable hint graphics use the same 30px fade/raise cue. */
    html.mobile-motion [data-mobile-hint] {
        opacity: var(--mobile-hint-opacity, 0) !important;
        transform: translate3d(0, var(--mobile-hint-y, 30px), 0) !important;
        will-change: opacity, transform !important;
    }

    html.mobile-motion .lca-dashboard__link {
        top: 43%;
        right: -2px;
    }

    html.mobile-motion .circular-guide__link {
        top: 44%;
        right: -2px;
    }

    html.mobile-motion .business-models__pointer {
        top: 47%;
        left: -2px;
    }

    /* Behavioural-strategy play icon: smaller heart/triangle and better centring. */
    html.mobile-motion .return-strategies-scene {
        /* Each monitor reaches the centre quickly, pauses there for roughly
           half a viewport of scrolling, then hands directly to the next one. */
        --scene-scroll-unit: 56vh;
        --strategy-icon-size: 44px;
        --strategy-circle-size: 44px;
        --strategy-heart-width: 28px;
        --strategy-heart-height: 28px;
        --strategy-circle-start-x: 6px;
        --strategy-circle-start-y: 6px;
        --strategy-circle-start-scale: 0.64;
        --strategy-triangle-width: 18px;
        --strategy-triangle-height: 21px;
        --strategy-triangle-x: 13px;
        --strategy-triangle-y: 11px;
        --strategy-next-overlap: 0svh;
    }

    html.mobile-motion .return-strategies__icon-animation {
        width: 44px;
        height: 44px;
        transform: none;
    }

    html.mobile-motion .return-strategies__heart {
        width: 28px;
        height: 28px;
    }

    html.mobile-motion .return-strategies__triangle {
        width: 18px;
        height: 21px;
        left: 13px;
        top: 11px;
    }

    /* Packaging monitor uses the original desktop opening proportions. Moving
       inactive slides 112% outside the viewport prevents the next image edge
       from peeking through below the current state. */
    html.mobile-motion .return-nudging__screen {
        left: 3.4482759% !important;
        top: 5.7603687% !important;
        width: 93.1034483% !important;
        height: 70% !important;
    }

    html.mobile-motion [data-nudging-image="baseline"],
    html.mobile-motion [data-nudging-image="instructions"] {
        --nudging-image-width: 100%;
        --nudging-image-height: 102%;
        --nudging-image-x: 0px;
        --nudging-image-y: 0px;
        --nudging-image-scale-x: 1;
        --nudging-image-scale-y: 1;
    }

    html.mobile-motion .return-nudging__slide img {
        width: 100% !important;
        height: 102% !important;
        object-fit: fill !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Recycling starts sooner and completes within a shorter scene. */
    html.mobile-motion .return-recycle-scene {
        height: 112svh !important;
    }

    html.mobile-motion .return-recycle-scene .sticky-stage {
        padding-block: 20px;
    }

    /* This text block is taller than a phone viewport. Let it flow normally so
       all policy recommendations remain readable instead of being clipped. */
    html.mobile-motion .policy-recommendations-scene {
        height: auto !important;
        min-height: 100svh !important;
    }

    html.mobile-motion .policy-recommendations-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 100svh !important;
        padding: 40px 20px 54px;
        overflow: visible !important;
    }

    html.mobile-motion .policy-recommendations-scene [data-scroll-enter] {
        --enter-y: 0px !important;
        --enter-opacity: 1 !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    html.mobile-motion .policy-recommendations {
        align-items: start;
        gap: 24px;
    }

    html.mobile-motion .policy-recommendations__visual {
        width: min(58vw, 225px);
    }

    /* Training library: two columns keep all four resources and the closing
       copy visible inside the sticky phone viewport. */
    html.mobile-motion .training-library-stage {
        padding: 12px 18px 16px !important;
    }

    html.mobile-motion .training-library {
        width: min(100%, 390px);
        row-gap: 10px;
    }

    html.mobile-motion .training-library__lead h2 {
        margin-bottom: 7px;
        font-size: 15px;
        line-height: 20px;
    }

    html.mobile-motion .training-library__lead p,
    html.mobile-motion .training-library__closing {
        font-size: clamp(13px, 3.65vw, 15px);
        line-height: 1.38;
    }

    html.mobile-motion .training-library__resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: center;
        column-gap: 7px;
        row-gap: 11px;
    }

    html.mobile-motion .training-resource {
        width: 100%;
        grid-column: auto;
        justify-self: stretch;
        grid-template-rows: auto auto;
    }

    html.mobile-motion .training-resource img {
        width: min(20vw, 78px, 11svh);
        height: auto;
        aspect-ratio: 1;
        justify-self: center;
    }

    html.mobile-motion .training-resource span {
        margin-top: 2px;
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.15;
    }
}

@media (max-width: 760px) and (max-height: 690px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion .training-library__lead h2 {
        font-size: 14px;
        line-height: 18px;
    }

    html.mobile-motion .training-library__lead p,
    html.mobile-motion .training-library__closing {
        font-size: 12px;
        line-height: 1.3;
    }

    html.mobile-motion .training-resource img {
        width: min(18vw, 68px, 9.5svh);
    }

    html.mobile-motion .training-resource span {
        font-size: 10.5px;
    }
}

/* v4.1 — deterministic mobile hold for the three Return & Recovery monitors.
   JS now maps each timeline unit to a fixed viewport distance, so the monitor
   cannot start exiting until its full hold has been consumed. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion .return-strategies-scene {
        --scene-scroll-unit: 45vh; /* fallback only; JS owns the exact height */
    }
}

/* ==========================================================
   MOBILE V5 — simplified behavioural-video stack + typography/grid fixes
   ========================================================== */
@media (max-width: 760px) {
    /* The three behavioural-strategy monitors are intentionally NOT a sticky
       timeline on phones. They read as three clear, tappable cards in normal
       document flow. */
    html.mobile-motion .return-strategies-scene,
    .return-strategies-scene {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        --strategy-next-overlap: 0svh !important;
    }

    html.mobile-motion .return-strategies-scene .sticky-stage,
    .return-strategies-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 34px 20px 46px !important;
        overflow: visible !important;
        background: var(--background) !important;
    }

    html.mobile-motion .return-strategies,
    .return-strategies {
        width: min(100%, 430px) !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 24px !important;
        margin-inline: auto;
        padding: 0 !important;
    }

    html.mobile-motion .return-strategies__item,
    .return-strategies__item {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        will-change: auto !important;
    }

    html.mobile-motion .return-strategies__monitor,
    .return-strategies__monitor {
        width: min(88vw, 360px) !important;
        margin-inline: auto;
        transform: none !important;
    }

    html.mobile-motion .return-strategies__screen,
    .return-strategies__screen {
        pointer-events: auto !important;
    }

    /* Keep the compact play mark from v4, but make it read cleanly as a tap CTA. */
    html.mobile-motion .return-strategies__icon-animation,
    .return-strategies__icon-animation {
        width: 42px !important;
        height: 42px !important;
        transform: none !important;
        flex: 0 0 42px;
    }

    html.mobile-motion .return-strategies__heart,
    .return-strategies__heart {
        width: 27px !important;
        height: 27px !important;
    }

    html.mobile-motion .return-strategies__triangle,
    .return-strategies__triangle {
        width: 17px !important;
        height: 20px !important;
        left: 12px !important;
        top: 11px !important;
    }

    html.mobile-motion .return-strategies__title,
    .return-strategies__title {
        font-size: clamp(13px, 3.9vw, 17px) !important;
        line-height: 1.24 !important;
    }

    /* Nudging copy uses exactly the same text treatment as the GRIN copy. */
    html.mobile-motion .return-nudging__copy-stage .return-nudging__copy,
    html.mobile-motion .return-nudging__copy--outcome,
    .return-nudging__copy-stage .return-nudging__copy,
    .return-nudging__copy--outcome {
        color: #373737 !important;
        font-family: var(--font-condensed) !important;
        font-size: 17px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 25px !important;
        letter-spacing: 0 !important;
    }

    html.mobile-motion .return-nudging__copy h2,
    .return-nudging__copy h2 {
        color: #000 !important;
        font-family: var(--font-condensed) !important;
        font-size: 17px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 25px !important;
        letter-spacing: 0 !important;
        margin-bottom: 16px !important;
    }

    /* Training Materials: four resources in two balanced columns. */
    html.mobile-motion .training-library__resources,
    .training-library__resources {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        row-gap: 18px !important;
        justify-content: center !important;
        align-items: start !important;
    }

    html.mobile-motion .training-resource,
    .training-resource {
        width: 100% !important;
        grid-column: auto !important;
        justify-self: stretch !important;
        grid-template-rows: auto auto !important;
    }

    html.mobile-motion .training-resource:last-child:nth-child(odd),
    .training-resource:last-child:nth-child(odd) {
        width: calc((100% - 16px) / 2) !important;
        grid-column: 1 / -1 !important;
        justify-self: center !important;
    }

    html.mobile-motion .training-resource img,
    .training-resource img {
        width: min(31vw, 122px, 16svh) !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        justify-self: center !important;
        object-fit: contain !important;
    }

    html.mobile-motion .training-resource span,
    .training-resource span {
        margin-top: 3px !important;
        font-size: clamp(12px, 3.3vw, 15px) !important;
        line-height: 1.16 !important;
    }
}

@media (max-width: 760px) and (max-height: 690px) {
    html.mobile-motion .training-resource img,
    .training-resource img {
        width: min(27vw, 102px, 14svh) !important;
    }

    html.mobile-motion .training-library__resources,
    .training-library__resources {
        row-gap: 12px !important;
    }
}

/* v5.1 — keep both nudging text blocks readable on mobile.
   The sticky stage previously clipped the second paragraph because its content
   could be taller than one viewport. Let the copy overflow the stage and keep
   both blocks in normal flow; the monitor carousel remains scroll-driven. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion .return-nudging-scene .sticky-stage {
        overflow: visible !important;
    }

    html.mobile-motion .return-nudging {
        align-content: start !important;
    }

    html.mobile-motion .return-nudging__copy-stage {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    html.mobile-motion .return-nudging__copy-stage .return-nudging__copy,
    html.mobile-motion .return-nudging__copy--intro,
    html.mobile-motion .return-nudging__copy--outcome,
    html.mobile-motion .return-nudging-scene[data-active-step="2"] .return-nudging__copy--intro,
    html.mobile-motion .return-nudging-scene[data-active-step="2"] .return-nudging__copy--outcome {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    html.mobile-motion .return-nudging__copy--outcome {
        margin-top: 14px !important;
    }
}

/* MOBILE V6 — isolated from desktop (the breakpoint remains 760px).
   The desktop bundle embeds IBM Plex Sans, not Condensed or Cabin. Resolve
   legacy family names explicitly on phones; keep the original font weights. */
@media (max-width: 760px) {
    .lca-findings .lca-findings__copy h2,
    .training-library__lead h2,
    .training-library__lead p,
    .training-library__closing,
    .looking-initiatives__lead,
    .looking-initiatives__closing,
    .looking-links__label,
    .looking-links__item,
    .looking-credits__copy h2,
    .looking-credits__copy h3,
    .looking-credits__copy p,
    .looking-contact h2,
    .looking-contact h3,
    .site-footer.site-footer--dice p {
        font-family: var(--font-main);
    }

    /* Both logo lists use two columns. Looking Ahead still has a centred fifth
       item; the four Training Materials cards fill two complete rows. */
    html:is(.mobile-motion, :root) .training-library__resources,
    html:is(.mobile-motion, :root) .looking-initiatives__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 16px !important;
        align-items: start !important;
    }

    html:is(.mobile-motion, :root) .training-resource,
    html:is(.mobile-motion, :root) .looking-initiative {
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        grid-column: auto !important;
        display: grid;
        grid-template-rows: auto auto !important;
        justify-self: stretch !important;
    }

    html:is(.mobile-motion, :root) .training-resource:last-child:nth-child(odd),
    html:is(.mobile-motion, :root) .looking-initiative:last-child {
        grid-column: 1 / -1 !important;
        width: calc((100% - 16px) / 2) !important;
        justify-self: center !important;
    }

    html:is(.mobile-motion, :root) .training-resource img,
    html:is(.mobile-motion, :root) .looking-initiative img {
        position: static;
        width: min(100%, 160px) !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        object-fit: contain;
        justify-self: center;
    }

    html:is(.mobile-motion, :root) .training-resource span,
    html:is(.mobile-motion, :root) .looking-initiative span {
        position: static;
        margin-top: 4px !important;
        font-family: var(--font-main);
        font-size: 16px !important;
        font-weight: 700;
        line-height: 20px !important;
    }

    html:is(.mobile-motion, :root) .training-library,
    html:is(.mobile-motion, :root) .looking-initiatives {
        width: min(100%, 430px);
        grid-template-rows: auto auto auto;
        row-gap: 28px;
    }

    html:is(.mobile-motion, :root) .training-library__lead p,
    html:is(.mobile-motion, :root) .training-library__closing,
    html:is(.mobile-motion, :root) .looking-initiatives__lead,
    html:is(.mobile-motion, :root) .looking-initiatives__closing {
        font-size: 17px;
        line-height: 25px;
    }

    html:is(.mobile-motion, :root) .training-library__lead h2 {
        margin-bottom: 16px;
        font-size: 18px;
        line-height: 25px;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion {
        --mobile-chapter-hold: 50svh;
        --mobile-lca-hold: 50svh;
    }

    /* Keep the current full blue chapter card; add half a viewport of hold.
       Overflow must not create a scrolling ancestor that disables sticky. */
    html.mobile-motion.chapter-motion-ready .chapter-curtain {
        height: calc(var(--mobile-reading-height, 100svh) + var(--mobile-chapter-hold)) !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html.mobile-motion.chapter-motion-ready .chapter-curtain .chapter-curtain__stage {
        position: sticky !important;
        inset: auto !important;
        top: var(--mobile-reading-top, var(--header-height)) !important;
        height: auto !important;
        min-height: calc(100svh - var(--header-height)) !important;
        padding: 28px 20px 34px;
    }

    html.mobile-motion .lca-introduction-hold {
        height: calc(var(--mobile-reading-height, 100svh) + var(--mobile-lca-hold)) !important;
    }

    html.mobile-motion .lca-introduction {
        position: sticky !important;
        top: var(--mobile-reading-top, var(--header-height)) !important;
        height: auto;
        overflow: visible !important;
    }

    /* Previous guide: 3 * 66vh minus the viewport-sized stage.
       Keep 70% of that sticky distance. */
    html.mobile-motion .circular-guide-scene {
        --mobile-guide-hold: calc((98svh + var(--header-height)) * 0.7);
        height: calc(var(--mobile-reading-height, 100svh) + var(--mobile-guide-hold)) !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html.mobile-motion .circular-guide-scene .sticky-stage {
        height: auto !important;
        top: var(--mobile-reading-top, var(--header-height)) !important;
    }

    /* Taller logo sections flow normally instead of hiding content inside a
       one-screen sticky stage. Their reveal still follows the document scroll. */
    html.mobile-motion .training-library-scene,
    html.mobile-motion .looking-initiatives-scene {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html.mobile-motion .training-library-scene .sticky-stage,
    html.mobile-motion .looking-initiatives-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 40px 20px 48px !important;
        overflow: visible !important;
    }

    html.mobile-motion .training-library-scene [data-scroll-enter],
    html.mobile-motion .looking-initiatives-scene [data-scroll-enter] {
        opacity: var(--mobile-flow-opacity, 1) !important;
        transform: translate3d(0, var(--mobile-flow-y, 0px), 0) !important;
        transition: none !important;
    }

    html.mobile-motion .training-resource:focus-visible,
    html.mobile-motion .looking-initiative:focus-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* MOBILE V8 — tighten the Recycling handoff while Nudging stays in the natural
   mobile document flow defined by the v5.1 block above. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    /* Pull Recycling into the outgoing logistics scene and remove excess
       vertical space while retaining the scroll-linked rotation. */
    html.mobile-motion .return-logistics-scene {
        height: 110svh !important;
    }

    html.mobile-motion .return-recycle-scene {
        height: 100svh !important;
        min-height: 100svh !important;
        margin-top: -10svh !important;
        z-index: 2;
    }

    html.mobile-motion .return-recycle-scene .sticky-stage {
        padding: 4px 18px 12px !important;
        background: transparent !important;
    }

    html.mobile-motion .return-recycle {
        gap: 14px !important;
    }

    html.mobile-motion .return-recycle__visual {
        width: min(210px, 58vw) !important;
    }
}

/* ==========================================================
   CLIENT UPDATE — mobile behavioural-video cluster
   Copy first, then three static tappable monitors. No scroll animation.
   ========================================================== */
@media (max-width: 760px) {
    html.mobile-motion .return-strategies-scene,
    .return-strategies-scene {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    html.mobile-motion .return-strategies-scene .sticky-stage,
    .return-strategies-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 38px 20px 48px !important;
        overflow: visible !important;
    }

    html.mobile-motion .return-strategies,
    .return-strategies {
        width: min(100%, 430px) !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 22px !important;
        justify-content: stretch !important;
        margin-inline: auto !important;
    }

    html.mobile-motion .return-strategies__intro,
    .return-strategies__intro {
        grid-column: 1 !important;
        width: 100% !important;
        margin: 0 0 4px !important;
        color: #373737 !important;
        font-family: var(--font-condensed) !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 25px !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    html.mobile-motion .return-strategies__intro p + p,
    .return-strategies__intro p + p {
        margin-top: 18px !important;
    }

    html.mobile-motion .return-strategies__item,
    .return-strategies__item,
    html.mobile-motion .return-strategies__item:nth-of-type(3),
    .return-strategies__item:nth-of-type(3) {
        grid-column: 1 !important;
        width: min(100%, 364px) !important;
        height: auto !important;
        aspect-ratio: 364 / 259 !important;
        justify-self: center !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        will-change: auto !important;
    }

    html.mobile-motion .return-strategies__monitor,
    .return-strategies__monitor,
    html.mobile-motion .return-strategies__frame,
    .return-strategies__frame {
        width: 100% !important;
        height: 100% !important;
        max-width: 364px !important;
    }

    html.mobile-motion .return-strategies__screen-content,
    .return-strategies__screen-content {
        gap: 14px !important;
        padding: 14px 18px !important;
    }

    html.mobile-motion .return-strategies__title,
    .return-strategies__title {
        max-width: min(214px, 61vw) !important;
        color: #94eece !important;
        font-family: "IBM Plex Sans", Arial, sans-serif !important;
        font-size: 18px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 370px) {
    html.mobile-motion .return-strategies__title,
    .return-strategies__title {
        font-size: 16px !important;
        max-width: 58vw !important;
    }
}