/* ==========================================================
   MOBILE LAYOUT
   Phones use a compact editorial flow instead of the long desktop sticky
   timeline. A lightweight viewport-driven motion layer restores movement
   without forcing users through every desktop animation or scroll hold.
   ========================================================== */

@media (max-width: 760px) {
    :root {
        --header-height: calc(64px + env(safe-area-inset-top, 0px));
        --mobile-gutter: 20px;
        --mobile-section-space: 48px;
    }

    html {
        scroll-padding-top: calc(var(--header-height) + 8px);
    }

    body {
        font-size: 16px;
        line-height: 1.55;
    }

    /* ---------- Header / navigation ---------- */
    .site-header {
        height: var(--header-height);
        gap: 10px;
        padding: env(safe-area-inset-top, 0px) 14px 0;
    }

    .brand__logo {
        width: min(205px, calc(100vw - 86px));
        height: auto;
    }

    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        margin-left: auto;
        padding: 10px;
        border-radius: 10px;
    }

    .nav-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .primary-nav {
        max-height: 0;
        grid-template-columns: 1fr;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .primary-nav.is-open {
        max-height: calc(100dvh - var(--header-height));
    }

    .primary-nav a {
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 13px 20px;
        font-size: 17px;
        line-height: 1.3;
    }

    /* ---------- Compact mobile scrollytelling layout ---------- */
    html:not(.mobile-motion) .scroll-scene {
        height: auto !important;
        min-height: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html:not(.mobile-motion) .scroll-scene .sticky-stage {
        position: relative !important;
        top: auto !important;
        min-height: 0;
        height: auto;
        place-items: stretch;
        padding: var(--mobile-section-space) var(--mobile-gutter);
        overflow: visible;
        background: var(--background);
    }

    html:not(.mobile-motion) [data-scroll-enter],
    html:not(.mobile-motion) [data-enter-step],
    html:not(.mobile-motion) [data-scroll-exit] {
        --enter-y: 0px !important;
        --enter-opacity: 1 !important;
        --exit-y: 0px !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html:not(.mobile-motion) [data-enter-step] {
        opacity: 1 !important;
    }

    /* ---------- Intro / chapter dividers ---------- */
    .chapter-title {
        width: 100%;
        height: 100dvh;
        min-height: 100svh;
        padding: calc(var(--header-height) + 38px) var(--mobile-gutter) 46px;
    }

    .chapter-title__content {
        width: min(100%, 430px);
    }

    .chapter-title__heading {
        align-items: center;
        gap: 12px;
    }

    .chapter-title__mark {
        width: 48px;
        height: auto;
    }

    .chapter-title h1 {
        font-size: clamp(32px, 10vw, 40px);
        line-height: 1.04;
    }

    html:not(.mobile-motion) .chapter-motion-ready .chapter-curtain,
    html:not(.mobile-motion) .chapter-curtain {
        height: auto !important;
        min-height: 0;
    }

    html:not(.mobile-motion) .chapter-motion-ready .chapter-curtain .chapter-curtain__stage,
    html:not(.mobile-motion) .chapter-motion-ready .chapter-curtain[data-curtain-phase="entry"] .chapter-curtain__stage,
    html:not(.mobile-motion) .chapter-motion-ready .chapter-curtain[data-curtain-phase="settled"] .chapter-curtain__stage,
    html:not(.mobile-motion) .chapter-curtain__stage {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        height: auto !important;
        min-height: 56svh;
        padding: 54px var(--mobile-gutter);
        visibility: visible !important;
        pointer-events: auto !important;
    }

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

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

    .chapter-curtain__heading {
        align-items: flex-start;
        gap: 12px;
    }

    .chapter-curtain__heading img {
        width: 44px;
        height: auto;
        margin-top: 1px;
    }

    .chapter-curtain__heading h2 {
        font-size: clamp(28px, 8.4vw, 36px);
        line-height: 1.08;
        text-wrap: pretty;
    }

    .chapter-curtain__copy p {
        margin: 22px 0 0;
        font-size: 17px;
        line-height: 25px;
    }

    /* ---------- Intro scenes ---------- */
    .device-reveal .sticky-stage,
    .challenge-scene .sticky-stage,
    .map-scene .sticky-stage,
    .device-detail-scene .sticky-stage {
        padding-block: 46px;
    }

    .device-reveal__content {
        width: min(100%, 430px);
        height: auto;
        gap: 28px;
        margin-inline: auto;
    }

    .device-reveal__lead p,
    .challenge-copy p,
    .map-copy p,
    .device-detail-intro,
    .device-facts li,
    .device-facts strong,
    .device-facts li::before {
        font-size: 17px;
        line-height: 25px;
    }

    .device-reveal .device-grid--large {
        width: 100%;
        height: auto;
        max-height: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 14px;
    }

    .device-grid--large .device-card {
        aspect-ratio: 1;
    }

    .challenge-content {
        width: min(100%, 430px);
        grid-template-columns: 1fr;
        gap: 26px;
        margin-inline: auto;
    }

    .challenge-visual {
        width: min(100%, 390px);
        margin-inline: auto;
    }

    html:not(.mobile-motion) .monitor-screen-image {
        --scroll-zoom: 1 !important;
    }

    .challenge-copy {
        max-width: none;
        transform: none;
    }

    .map-layout {
        width: min(100%, 430px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        margin-inline: auto;
    }

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

    .map-visual {
        position: relative;
        width: min(100%, 350px);
        height: auto;
        aspect-ratio: 539 / 699;
        margin-inline: auto;
    }

    /* Mobile keeps the original map stack. The lightweight motion controller
       crossfades the layers during natural page scrolling. */
    .map-layer,
    .map-layer.is-active {
        width: 100%;
        opacity: 0 !important;
    }

    .map-layer:first-of-type {
        opacity: 1 !important;
    }

    .device-detail-stage {
        width: min(100%, 430px);
        grid-template-columns: 1fr;
        gap: 30px;
        margin-inline: auto;
    }

    .device-detail-grid {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 12px;
        margin-inline: auto;
    }

    .device-card--small {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 14px;
        transform: none !important;
        box-shadow: none !important;
    }

    .device-card--small[data-device="ecg"] {
        border-radius: 36px 14px 14px;
    }

    .device-card--small[data-device="display"] {
        border-radius: 14px 14px 36px;
    }

    .device-card--small::after {
        display: none;
    }

    .device-detail-copy {
        min-height: 0;
    }

    .device-detail-intro {
        margin-bottom: 22px;
    }

    .device-facts {
        gap: 12px;
    }

    .device-facts li {
        padding-left: 16px;
        transform: none !important;
    }

    html:not(.mobile-motion) .chapter-motion-ready .intro-summary-hold,
    html:not(.mobile-motion) .intro-summary-hold {
        height: auto !important;
    }

    html:not(.mobile-motion) .chapter-motion-ready .intro-summary-hold .intro-summary,
    html:not(.mobile-motion) .intro-summary {
        position: relative !important;
        top: auto !important;
        min-height: 0;
        padding: 56px var(--mobile-gutter);
    }

    .intro-summary__content {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    .intro-summary__lead,
    .topic-links {
        font-size: 17px;
        line-height: 25px;
    }

    .topic-links {
        display: grid;
        gap: 10px;
        padding-left: 22px;
    }

    /* ---------- LCA ---------- */
    html:not(.mobile-motion) .lca-introduction-hold {
        height: auto !important;
    }

    html:not(.mobile-motion) .lca-introduction {
        position: relative;
        top: auto;
        min-height: 0;
        padding: 56px var(--mobile-gutter);
    }

    .lca-introduction p,
    .lca-content,
    .lca-findings,
    .lca-dashboard {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    .lca-introduction p,
    .lca-content p,
    .lca-findings__copy,
    .lca-findings .lca-findings__copy h2 {
        font-size: 17px;
        line-height: 25px;
    }

    .lca-content h2,
    .lca-findings h2 {
        font-size: 18px;
        line-height: 25px;
    }

    .chapter-motion-ready .lca-dashboard-scene {
        margin-top: 0 !important;
    }

    .lca-pie-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        margin-top: 24px;
    }

    .lca-pie {
        width: min(250px, 72vw);
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .lca-pie__fill {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .lca-legend-image {
        width: min(230px, 70vw);
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .lca-content .lca-pie-caption h2 {
        font-size: 19px;
        line-height: 25px;
    }

    .lca-bars {
        width: 100%;
        margin-top: 24px;
    }

    .lca-bars__bar {
        transform: scaleY(1) !important;
    }

    .lca-bars__bar span {
        font-size: 12px;
    }

    .lca-findings {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .lca-device-grid {
        width: 100%;
        max-width: 360px;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-inline: auto;
        transform: none !important;
    }

    .lca-device-grid img {
        border-radius: 12px;
    }

    .lca-device-grid img:first-child {
        border-top-left-radius: 34px;
    }

    .lca-device-grid img:last-child {
        border-bottom-right-radius: 34px;
    }

    .lca-findings__copy {
        transform: none !important;
    }

    .lca-findings__copy li {
        margin-bottom: 14px;
    }

    .lca-dashboard__visual {
        width: 100%;
        margin-bottom: 22px;
    }

    .lca-dashboard__link {
        position: relative;
        inset: auto;
        width: min(239px, 74vw);
        height: auto;
        aspect-ratio: 239 / 56;
        margin: 14px auto 0;
        transform: none !important;
        will-change: auto;
    }

    /* ---------- Circular Design ---------- */
    .circular-design-stage {
        padding-block: var(--mobile-section-space) !important;
    }

    .circular-guide,
    .circular-steps,
    .circular-case {
        width: min(100%, 430px);
        margin-inline: auto;
    }

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

    .circular-guide__visual {
        width: 100%;
    }

    .circular-guide__link {
        width: min(239px, 74vw);
        height: auto;
        aspect-ratio: 239 / 56;
        margin-top: 14px;
    }

    .circular-steps__list {
        gap: 10px;
    }

    .circular-step {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 13px;
        border-radius: 14px;
        font-size: 15px;
        line-height: 20px;
    }

    .circular-step__letter {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .circular-case {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* The monitor carousel becomes a static two-column concept gallery. */
    .circular-case__visual {
        width: 100%;
        aspect-ratio: auto;
        order: 2;
    }

    .circular-case__copy {
        order: 1;
    }

    .circular-case__frame {
        display: none;
    }

    .circular-case__screen {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .circular-case__concept,
    .circular-case__concept:first-child {
        position: relative;
        top: auto !important;
        left: auto;
        width: 100%;
        max-height: none;
        display: block;
        aspect-ratio: 316 / 215;
        border-radius: 10px;
        transform: none;
        transition: none;
        will-change: auto;
        box-shadow: 0 1px 0 rgb(42 43 95 / 0.05);
    }

    .circular-case__concept img {
        top: 50% !important;
        width: 200% !important;
        height: 100% !important;
        max-width: none;
        transform: translate(0, -50%) !important;
    }

    /* ---------- Return & Recovery ---------- */
    .return-recovery-stage {
        padding-block: var(--mobile-section-space) !important;
    }

    .return-pilots,
    .return-context,
    .return-nudging,
    .return-grin,
    .return-logistics-card,
    .return-recycle {
        width: min(100%, 430px);
        margin-inline: auto;
    }

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

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

    .return-pilots__flags img {
        width: 100%;
        height: auto;
        aspect-ratio: 229 / 140;
        object-fit: fill;
    }

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

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

    .return-strategies {
        width: min(100%, 430px);
        height: auto;
        display: grid;
        gap: 24px;
        margin-inline: auto;
    }

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

    .return-strategies__monitor {
        width: 100%;
        transform: none;
    }

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

    .return-strategies__icon-animation {
        width: 40px;
        height: 40px;
        transform: scale(0.72);
        transform-origin: center;
    }

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

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

    /* The two packaging states are both shown; no swipe/scroll carousel is needed. */
    .return-nudging__visual {
        width: 100%;
        aspect-ratio: auto;
    }

    .return-nudging__frame {
        display: none;
    }

    .return-nudging__screen {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        background: transparent;
    }

    .return-nudging__slide,
    .return-nudging__slide--initial {
        position: relative;
        top: auto !important;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 10px;
        transform: none;
        transition: none;
        will-change: auto;
        overflow: hidden;
    }

    .return-nudging__slide img {
        top: 50%;
        left: 50%;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        transform: translate(-50%, -50%) !important;
    }

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

    .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;
    }

    .return-nudging__copy h2 {
        margin-bottom: 18px;
        font-size: 18px;
        line-height: 24px;
    }

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

    .return-grin__visual {
        position: relative;
        inset: auto;
        width: min(250px, 68vw);
        height: auto;
        aspect-ratio: 2 / 3;
        margin-inline: auto;
        transform: none !important;
        order: 2;
    }

    .return-grin__copy {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none !important;
        order: 1;
    }

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

    .return-logistics-card {
        min-height: 0;
        padding: 22px;
        border-width: 2px;
        border-radius: 16px;
    }

    .return-recycle {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .return-recycle__visual {
        width: min(230px, 64vw);
        height: auto;
        aspect-ratio: 1;
        margin-inline: auto;
        transform: none !important;
    }

    .return-recycle__copy {
        width: 100%;
        transform: none !important;
    }

    /* ---------- Business & Policy ---------- */
    .business-policy-stage {
        padding-block: var(--mobile-section-space) !important;
    }

    .business-models,
    .policy-recommendations {
        width: min(100%, 430px);
        grid-template-columns: 1fr;
        gap: 26px;
        margin-inline: auto;
    }

    .business-models__visual,
    .policy-recommendations__visual,
    .business-policy__copy {
        transform: none !important;
        will-change: auto;
    }

    .business-models__visual {
        width: 100%;
    }

    .business-models__pointer {
        position: relative;
        inset: auto;
        width: min(239px, 74vw);
        height: auto;
        aspect-ratio: 239 / 56;
        margin: 12px auto 0;
        opacity: 1 !important;
        transform: none !important;
    }

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

    .business-policy__copy h2 {
        margin-bottom: 18px;
        font-size: 18px;
        line-height: 25px;
    }

    .policy-recommendations__copy ul {
        padding-left: 23px;
    }

    .policy-recommendations__copy li + li {
        margin-top: 7px;
    }

    .policy-recommendations__visual {
        order: -1;
        width: min(270px, 72vw);
        margin-inline: auto;
    }

    /* ---------- Training Materials ---------- */
    .training-library-stage {
        min-height: 0;
        padding: 50px var(--mobile-gutter) 56px !important;
        overflow: visible;
    }

    .training-library {
        width: min(100%, 430px);
        row-gap: 34px;
    }

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

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

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

    .training-resource,
    .training-resource[data-scroll-enter] {
        min-height: 0;
        grid-template-rows: auto auto;
        opacity: 1 !important;
        transform: none !important;
        transition: transform 180ms ease-out, filter 180ms ease-out !important;
        will-change: auto;
    }

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

    .training-resource span {
        margin-top: 4px;
        font-size: 15px;
        line-height: 18px;
    }

    .training-resource:active {
        transform: translateY(-4px) !important;
    }

    /* ---------- Final placeholder / footer ---------- */
    .chapter-placeholder,
    .chapter-placeholder--final {
        min-height: 62svh;
        padding: 64px var(--mobile-gutter);
    }

    .chapter-placeholder .content-column {
        width: min(100%, 430px);
    }

    .chapter-placeholder h2 {
        font-size: 34px;
    }

    .site-footer {
        min-height: 150px;
        padding: 38px var(--mobile-gutter) calc(38px + env(safe-area-inset-bottom, 0px));
        font-size: 14px;
        line-height: 21px;
    }
}

/* Very narrow phones: keep galleries comfortable rather than squeezing text. */
@media (max-width: 350px) {
    :root {
        --mobile-gutter: 16px;
    }

    .brand__logo {
        width: 190px;
    }

    .device-detail-grid,
    .lca-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .circular-case__screen,
    .return-nudging__screen {
        grid-template-columns: 1fr;
    }

    .training-library__resources {
        column-gap: 10px;
    }

    .training-resource:last-child:nth-child(odd) {
        width: calc((100% - 10px) / 2);
    }
}

/* Hover lifts are useful only when the device actually has a hover-capable pointer. */
@media (max-width: 760px) and (hover: hover) and (pointer: fine) {
    .training-resource:hover,
    .training-resource:focus-visible {
        transform: translateY(-8px) !important;
    }
}

/* ==========================================================
   MOBILE MOTION LAYER
   The phone layout stays compact and non-sticky, but important content now
   reveals as it enters the viewport. This is intentionally lighter than the
   desktop timeline: short transitions, small travel and no long scroll holds.
   ========================================================== */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-motion {
        scroll-behavior: smooth;
    }

    html.mobile-motion .scroll-scene,
    html.mobile-motion .chapter-curtain,
    html.mobile-motion .intro-summary,
    html.mobile-motion .lca-introduction {
        overflow: clip;
    }

    html.mobile-motion .mobile-reveal {
        --mobile-reveal-delay: 0ms;
        opacity: 0 !important;
        transform: translate3d(0, 28px, 0) scale(0.992) !important;
        transition:
            opacity 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--mobile-reveal-delay),
            transform 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--mobile-reveal-delay) !important;
        will-change: opacity, transform !important;
    }

    html.mobile-motion .mobile-reveal[data-mobile-motion="pop"] {
        transform: translate3d(0, 22px, 0) scale(0.94) !important;
    }

    html.mobile-motion .mobile-reveal[data-mobile-motion="chapter"] {
        transform: translate3d(0, 44px, 0) !important;
        transition-duration: 800ms, 900ms !important;
    }

    html.mobile-motion .mobile-reveal[data-mobile-motion="hint"] {
        transform: translate3d(-18px, 10px, 0) scale(0.98) !important;
    }

    html.mobile-motion .mobile-reveal.is-mobile-visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        will-change: auto !important;
    }

    /* Section openers still feel like chapter transitions even though mobile
       does not reserve several viewport heights for a desktop-style curtain. */
    html.mobile-motion .chapter-curtain__background {
        transform: scaleY(1.025) !important;
        transform-origin: bottom center;
    }

    /* Scroll-linked zoom is handled by the shared desktop runtime on animated mobile. */
    html.mobile-motion .monitor-screen-image {
        will-change: transform;
    }

    /* The project map advances through the original layers while the user
       scrolls past it. No sticky hold: each crossfade follows natural reading. */
    html.mobile-motion .map-layer,
    html.mobile-motion .map-layer:last-of-type,
    html.mobile-motion .map-layer.is-active {
        opacity: 0 !important;
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: opacity;
    }

    html.mobile-motion .map-layer.is-active {
        opacity: 1 !important;
    }

    /* Keep tap feedback after the reveal transform has completed. */
    html.mobile-motion .training-resource.is-mobile-visible:active {
        transform: translate3d(0, -5px, 0) scale(0.985) !important;
        transition-duration: 120ms !important;
    }

    html.mobile-motion .business-models__monitor,
    html.mobile-motion .lca-dashboard__visual,
    html.mobile-motion .circular-guide__visual {
        transition: transform 220ms ease-out;
    }

    html.mobile-motion .business-models__monitor:active,
    html.mobile-motion .lca-dashboard__visual:active,
    html.mobile-motion .circular-guide__visual:active {
        transform: scale(0.985);
    }
}