/* ==========================================================
   HEIGHT-RESPONSIVE DESKTOP SYSTEM

   The JavaScript controller exposes:
   --usable-height         viewport height minus the live header
   --height-scale          continuous 0.52–1 visual scale
   --scene-scroll-unit-px  minimum physical distance per animation step

   Add future scrollytelling content inside .sticky-stage and size artwork
   with --responsive-visual-* tokens to inherit this behaviour.
   Mobile rules remain owned by the existing mobile stylesheets.
   ========================================================== */
:root {
    --usable-height: calc(100dvh - var(--header-height));
    --height-scale: 1;
    --scene-scroll-unit-px: 85dvh;
    --responsive-stage-pad-y: clamp(14px, 3dvh, 48px);
    --responsive-gap: clamp(12px, 3dvh, 42px);
    --responsive-copy-size: clamp(16px, 2.45dvh, 20px);
    --responsive-copy-line: clamp(22px, 3.55dvh, 30px);
    /* Short-desktop header controls. These four values are the single place
       to tune the navigation used by 1126x464 laptop viewports. */
    --compact-header-height: 40px;
    --compact-header-logo-width: 173px;
    --compact-header-menu-size: 13.5px;
    --compact-header-menu-gap: clamp(7px, 1vw, 13px);
}

/* Keep the full desktop navigation at common laptop widths. */
@media (min-width: 1100px) and (max-width: 1680px) {
    .site-header {
        justify-content: flex-start;
        gap: clamp(18px, 2vw, 34px);
        padding-inline: clamp(18px, 2vw, 34px);
    }

    .brand__logo {
        width: clamp(210px, 18vw, 270px);
        height: auto;
        max-height: calc(var(--header-height) - 8px);
    }

    .nav-toggle {
        display: none;
    }

    .primary-nav,
    .primary-nav.is-open {
        position: static;
        width: auto;
        max-height: none;
        margin-left: auto;
        overflow: visible;
        display: flex;
        grid-template-columns: none;
        justify-content: flex-end;
        align-items: center;
        gap: clamp(11px, 1.35vw, 23px);
        background: transparent;
        box-shadow: none;
        transition: none;
    }

    .primary-nav a {
        padding: 0;
        border: 0;
        font-size: clamp(14px, 1.24vw, 19px);
    }
}

@media (min-width: 761px) and (max-height: 799px) {
    :root {
        --header-height: clamp(58px, 9dvh, 70px);
        --scene-scroll-unit: var(--scene-scroll-unit-px);
        --responsive-copy-size: clamp(15px, 2.25dvh, 18px);
        --responsive-copy-line: clamp(20px, 3.2dvh, 27px);
    }

    body {
        font-size: 16px;
    }

    .site-header {
        min-height: 58px;
    }

    .sticky-stage,
    .return-recovery-stage,
    .business-policy-stage,
    .circular-design-stage,
    .training-library-stage,
    .looking-ahead-stage {
        padding: var(--responsive-stage-pad-y) 20px;
    }

    /* Restore desktop sticky behaviour that legacy height fallbacks disabled. */
    .scroll-scene,
    .device-reveal,
    .lca-scene,
    .lca-scene:has(.lca-findings),
    .circular-guide-scene,
    .circular-steps-scene,
    .circular-case-scene,
    .return-pilots-scene,
    .return-copy-scene,
    .return-strategies-scene,
    .return-nudging-scene,
    .return-grin-scene,
    .return-logistics-scene,
    .return-recycle-scene,
    .business-policy-scene {
        height: calc(
            (var(--scene-steps) + 1) * var(--scene-scroll-unit)
            + var(--scene-hold-height, 0px)
            - var(--scene-start-trim-height, 0px)
        );
    }

    .sticky-stage,
    .device-reveal .sticky-stage,
    .lca-scene .sticky-stage,
    .lca-scene:has(.lca-findings) .sticky-stage,
    .circular-guide-scene .sticky-stage,
    .circular-steps-scene .sticky-stage,
    .circular-case-scene .sticky-stage,
    .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,
    .business-policy-scene .sticky-stage {
        position: sticky;
        top: var(--header-height) !important;
        min-height: var(--usable-height);
        height: auto;
    }

    [data-scroll-enter],
    .device-reveal [data-scroll-enter],
    .circular-guide[data-scroll-enter],
    .circular-steps [data-scroll-enter],
    .business-policy-scene [data-scroll-enter],
    .return-pilots-scene [data-scroll-enter],
    .return-copy-scene [data-scroll-enter],
    .return-grin-scene [data-scroll-enter],
    .return-logistics-scene [data-scroll-enter],
    .return-recycle-scene [data-scroll-enter] {
        transform: translate3d(0, var(--enter-y, 0px), 0);
        will-change: transform;
    }

    /* Intro and reusable reading blocks. */
    .chapter-title {
        min-height: 100dvh;
        padding: calc(var(--header-height) + 18px) 24px 18px;
    }

    .chapter-title h1 {
        font-size: clamp(34px, 7dvh, 48px);
    }

    .intro-summary,
    .lca-introduction {
        min-height: var(--usable-height);
        padding: clamp(24px, 8dvh, 64px) 24px;
    }

    .intro-summary__lead,
    .topic-links,
    .lca-introduction p {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .topic-links {
        line-height: clamp(34px, 6dvh, 48px);
    }

    /* Device landscape. */
    .device-reveal__content {
        width: min(820px, calc(100vw - 40px));
        height: calc(var(--usable-height) - 20px);
        gap: clamp(8px, 2dvh, 18px);
    }

    .device-reveal__lead {
        width: min(720px, 100%);
    }

    .device-reveal__lead p {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .device-reveal .device-grid--large {
        width: min(760px, 105dvh, calc(100vw - 48px));
        height: auto;
        max-height: none;
        aspect-ratio: 947 / 609;
        justify-self: center;
        column-gap: clamp(18px, 4dvh, 38px);
        row-gap: clamp(14px, 3.5dvh, 32px);
    }

    /* Challenge monitor. */
    .challenge-content {
        width: min(900px, calc(100vw - 40px));
        grid-template-columns: minmax(260px, 390px) minmax(300px, 420px);
        gap: clamp(28px, 6vw, 60px);
    }

    .challenge-visual {
        width: min(390px, 84dvh);
        height: auto;
        aspect-ratio: 465 / 330;
    }

    .monitor-screen-window {
        top: 4.545%;
        left: 3.226%;
        width: 93.548%;
        height: 67.879%;
    }

    .monitor-screen-image {
        width: 102.151%;
        height: 109.091%;
    }

    .monitor-frame-image {
        width: 100%;
        height: 100%;
    }

    .challenge-copy {
        transform: none;
    }

    .challenge-copy p,
    .map-copy p {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    /* Map scales from the available height; its internal absolute layers use percentages. */
    .map-layout {
        width: min(860px, 112dvh, calc(100vw - 40px));
        height: auto;
        aspect-ratio: 946 / 709;
    }

    .map-copy {
        width: 37%;
    }

    .map-visual {
        width: 82.14%;
        height: 99.58%;
    }

    .map-layer {
        width: 69.37%;
    }

    /* Device details show the active fact instead of overflowing all prior facts. */
    .device-detail-stage {
        width: min(900px, calc(100vw - 40px));
        grid-template-columns: min(280px, 52dvh) minmax(330px, 520px);
        gap: clamp(28px, 5vw, 64px);
    }

    .device-detail-grid {
        width: min(280px, 52dvh);
        height: auto;
        aspect-ratio: 380 / 583;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        column-gap: clamp(12px, 3dvh, 24px);
        row-gap: clamp(10px, 2.6dvh, 22px);
    }

    .device-detail-grid .device-card--small {
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 1;
    }

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

    .device-detail-intro,
    .device-facts li,
    .device-facts strong,
    .device-facts li::before {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

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

    .device-facts {
        position: static;
        height: auto;
        gap: clamp(4px, 1dvh, 9px);
    }

    .device-facts li[data-enter-step] {
        position: relative;
        inset: auto;
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
    }

    .device-facts li[data-enter-step].is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* LCA scenes. */
    .lca-content p,
    .lca-findings__copy,
    .lca-content h2,
    .lca-findings h2 {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .lca-content--combined > p {
        margin-bottom: 8px;
    }

    .lca-content--combined .lca-pie-layout {
        grid-template-columns: minmax(0, clamp(150px, 38dvh, 255px)) minmax(0, clamp(110px, 25dvh, 180px));
        gap: 8px 28px;
        margin-top: 8px;
    }

    .lca-content--combined .lca-pie,
    .lca-content--combined .lca-legend-image {
        width: 100%;
    }

    .lca-content--combined .lca-system-summary {
        margin-top: 8px;
    }

    .lca-content .lca-pie-caption h2 {
        font-size: clamp(18px, 3.2dvh, 22px);
        line-height: 1.2;
    }

    .lca-findings {
        width: min(900px, calc(100vw - 40px));
        grid-template-columns: min(300px, 54dvh) minmax(380px, 1fr);
        gap: clamp(28px, 5vw, 58px);
        align-items: center;
    }

    .lca-device-grid {
        width: min(300px, 54dvh);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(8px, 2dvh, 14px);
    }

    .lca-findings__copy li {
        margin-bottom: clamp(7px, 1.7dvh, 14px);
    }

    .lca-findings [data-slide-side] {
        transform: translateX(var(--slide-x, 0px));
        will-change: transform;
    }

    .lca-dashboard-scene .lca-stage {
        padding-top: clamp(12px, 2.8dvh, 24px);
        padding-bottom: clamp(12px, 2.8dvh, 24px);
    }

    .lca-dashboard__visual {
        width: min(560px, 84dvh, calc(100vw - 110px));
        margin-bottom: clamp(8px, 2dvh, 14px);
    }

    .lca-dashboard__link {
        width: clamp(140px, 34dvh, 190px);
        height: auto;
        aspect-ratio: 239 / 56;
        transform: translateX(var(--dashboard-pointer-x));
        will-change: transform;
    }

    .lca-pie__fill {
        mask-image: conic-gradient(transparent 0deg calc(360deg - var(--pie-angle, 360deg)), #000 calc(360deg - var(--pie-angle, 360deg)) 360deg);
        -webkit-mask-image: conic-gradient(transparent 0deg calc(360deg - var(--pie-angle, 360deg)), #000 calc(360deg - var(--pie-angle, 360deg)) 360deg);
    }

    .chapter-motion-ready [data-lca-chart="pie"] .lca-pie {
        clip-path: inset(0 var(--pie-crop-right, 100%) 0 0);
        -webkit-clip-path: inset(0 var(--pie-crop-right, 100%) 0 0);
    }

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

    /* Circular design. */
    .circular-guide__copy,
    .circular-steps > p,
    .circular-case__copy {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .circular-guide__copy p {
        margin-bottom: clamp(8px, 1.8dvh, 14px);
    }

    .circular-guide__visual {
        width: min(500px, 72dvh, 52vw);
        margin-top: 0;
    }

    .circular-guide__link {
        right: -42%;
        width: clamp(150px, 29dvh, 210px);
        height: auto;
        aspect-ratio: 239 / 56;
    }

    .circular-steps > p {
        margin-bottom: 12px;
    }

    .circular-steps__list {
        gap: clamp(5px, 1dvh, 8px);
    }

    .circular-step {
        min-height: clamp(42px, 9dvh, 58px);
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 5px 16px;
        font-size: clamp(14px, 2.3dvh, 17px);
        line-height: 1.25;
    }

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

    .circular-case {
        grid-template-columns: minmax(280px, 440px) minmax(280px, 360px);
        gap: clamp(28px, 5vw, 54px);
    }

    .circular-case__visual {
        width: min(440px, 95dvh);
        aspect-ratio: 465 / 330;
    }

    .circular-case__frame {
        display: block;
    }

    .circular-case__screen {
        position: absolute;
        top: 4.5%;
        left: 3.2%;
        width: 93.6%;
        height: 67.9%;
        display: block;
        overflow: hidden;
        background: #fff;
    }

    .circular-case__concept {
        position: absolute;
        top: calc(50% + var(--concept-slide-y, 115%));
        left: 50%;
        width: min(var(--concept-width), calc(100% - 16px));
        height: auto;
        transform: translate(-50%, -50%);
        will-change: top;
    }

    .circular-case__concept:first-child {
        display: block;
    }

    /* Return & recovery. */
    .return-pilots {
        gap: clamp(16px, 4dvh, 30px);
    }

    .return-pilots__copy,
    .return-context,
    .return-nudging__copy,
    .return-grin__copy,
    .return-logistics-card,
    .return-recycle__copy {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .return-pilots__flags {
        grid-template-columns: repeat(3, clamp(125px, 29dvh, 190px));
        gap: clamp(20px, 5vw, 42px);
    }

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

    .return-strategies-stage {
        padding-block: 8px;
    }

    .return-strategies {
        --compact-monitor-width: clamp(205px, 52dvh, 300px);
        width: min(760px, calc(100vw - 40px));
        grid-template-columns: repeat(2, var(--compact-monitor-width));
        column-gap: clamp(20px, 4vw, 42px);
        row-gap: 0;
    }

    .return-strategies__intro {
        width: min(720px, 100%);
        margin-bottom: 2px;
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

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

    .return-strategies__item,
    .return-strategies__monitor,
    .return-strategies__frame {
        width: var(--compact-monitor-width);
        height: auto;
        aspect-ratio: 364 / 259;
    }

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

    .return-strategies__title {
        max-width: 62%;
        font-size: clamp(12px, 2.4dvh, 16px);
    }

    .return-nudging {
        width: min(900px, calc(100vw - 40px));
        grid-template-columns: minmax(260px, clamp(280px, 73dvh, 390px)) minmax(300px, 390px);
        gap: clamp(30px, 6vw, 64px);
    }

    .return-nudging__copy-stage {
        min-height: min(360px, calc(var(--usable-height) - 30px));
        overflow: hidden;
    }

    .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: absolute;
        inset: 0;
        transition: transform 720ms var(--motion-ease);
    }

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

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

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

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

    .return-grin {
        width: min(900px, calc(100vw - 40px));
        height: calc(var(--usable-height) - 18px);
        display: grid;
        grid-template-columns: minmax(220px, 300px) minmax(330px, 420px);
        align-items: center;
        justify-content: center;
        gap: clamp(38px, 7vw, 80px);
    }

    .return-grin__visual {
        position: relative;
        inset: auto;
        width: min(280px, 55dvh);
        height: auto;
        aspect-ratio: 2 / 3;
        transform: translate3d(0, calc(var(--enter-y, 0px) + var(--exit-y, 0px)), 0) scale(var(--enter-scale, 1));
    }

    .return-grin__copy {
        position: relative;
        inset: auto;
        width: 100%;
        transform: translate3d(0, var(--enter-y, 0px), 0);
    }

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

    .return-logistics-card {
        width: min(720px, calc(100vw - 48px));
        min-height: clamp(110px, 28dvh, 165px);
        padding: 18px 24px;
    }

    .return-recycle {
        grid-template-columns: clamp(180px, 52dvh, 280px) minmax(330px, 390px);
        gap: clamp(48px, 8vw, 110px);
    }

    .return-recycle__visual {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    /* Business & policy. */
    .business-models,
    .policy-recommendations {
        width: min(960px, calc(100vw - 40px));
        grid-template-columns: minmax(300px, 400px) minmax(300px, 390px);
        gap: clamp(42px, 7vw, 80px);
    }

    .business-models__visual {
        width: min(400px, 78dvh);
    }

    .business-models__pointer {
        left: -70px;
        top: 38%;
        width: clamp(145px, 34dvh, 180px);
        height: auto;
        aspect-ratio: 239 / 56;
    }

    .business-policy__copy,
    .business-policy__copy h2 {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .business-policy__copy h2,
    .policy-recommendations__copy p {
        margin-bottom: 12px;
    }

    .policy-recommendations__visual {
        width: min(380px, 78dvh);
    }

    .policy-recommendations__pointer {
        right: -70px;
        top: 38%;
        width: clamp(145px, 34dvh, 180px);
        height: auto;
        aspect-ratio: 239 / 56;
    }

    /* Training and Looking Ahead logo libraries. */
    .training-library,
    .looking-initiatives {
        width: min(900px, calc(100vw - 40px));
        row-gap: clamp(12px, 3dvh, 26px);
    }

    .training-library__lead h2,
    .training-library__lead p,
    .training-library__closing,
    .looking-initiatives__lead,
    .looking-initiatives__closing {
        font-size: var(--responsive-copy-size);
        line-height: var(--responsive-copy-line);
    }

    .training-library__lead h2 {
        margin-bottom: 8px;
    }

    .training-library__resources {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(8px, 1.5vw, 14px);
    }

    .looking-initiatives__logos {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: clamp(8px, 1.5vw, 14px);
    }

    .training-resource,
    .looking-initiative {
        width: 100%;
        min-height: 0;
        height: auto;
        grid-template-rows: auto auto;
        row-gap: 4px;
    }

    .training-resource img,
    .looking-initiative img {
        width: min(100%, clamp(86px, 25dvh, 132px));
        height: auto;
        aspect-ratio: 1;
        justify-self: center;
    }

    .looking-initiative img {
        aspect-ratio: 185 / 132;
    }

    .training-resource span,
    .looking-initiative span {
        min-height: 0;
        margin-top: 0;
        font-size: clamp(12px, 2.5dvh, 16px);
        line-height: 1.15;
    }

    .looking-links {
        width: min(610px, calc(100vw - 48px));
    }

    .looking-links__primary,
    .looking-links__item {
        min-height: clamp(48px, 11dvh, 68px);
        padding-block: 10px;
    }

    .looking-links__primary {
        font-size: clamp(22px, 4.5dvh, 29px);
        line-height: 1.1;
    }

    .looking-links__label {
        margin: clamp(20px, 5dvh, 36px) 0 12px;
        font-size: 17px;
        line-height: 24px;
    }

    .looking-links__secondary {
        gap: clamp(7px, 1.8dvh, 12px);
    }

    .looking-links__item {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Preserve chapter curtain motion on short desktops. */
@media (min-width: 761px) and (max-height: 540px) and (prefers-reduced-motion: no-preference) {
    .chapter-motion-ready .chapter-curtain {
        height: 180dvh;
    }

    .chapter-motion-ready .chapter-curtain .chapter-curtain__stage {
        position: sticky;
        inset: auto;
        top: var(--header-height);
        height: var(--usable-height);
        min-height: 0;
        visibility: hidden;
        pointer-events: none;
    }

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

    .chapter-motion-ready .chapter-curtain[data-curtain-phase="settled"] .chapter-curtain__stage {
        visibility: visible;
        pointer-events: auto;
    }

    .chapter-curtain__background {
        transform: translateY(var(--curtain-y));
    }

    .chapter-curtain__copy {
        transform: translateY(var(--chapter-copy-y));
    }

    .chapter-curtain__heading img {
        width: clamp(42px, 11dvh, 58px);
        height: auto;
    }

    .chapter-curtain__heading h2 {
        font-size: clamp(28px, 7dvh, 40px);
    }
}

/* Ultra-short desktops. A wider 680px threshold keeps the mode stable when
   browser chrome, DevTools and operating-system scaling report different
   innerHeight values for the same physical display. */
@media (min-width: 761px) and (max-height: 679px) {
    :root {
        --header-height: var(--compact-header-height);
        --responsive-stage-pad-y: 8px;
        --responsive-gap: 10px;
        /* Desktop body copy is 20/30. The short-height layout remains within
           the requested two-pixel font-size difference. */
        --responsive-copy-size: 18px;
        --responsive-copy-line: 24px;
    }

    .site-header {
        height: var(--header-height);
        min-height: var(--header-height);
        padding-inline: 12px;
        gap: 12px;
    }

    .brand__logo {
        width: var(--compact-header-logo-width);
        height: auto;
        max-height: calc(var(--header-height) - 4px);
    }

    .primary-nav {
        gap: var(--compact-header-menu-gap);
    }

    .primary-nav a {
        font-size: var(--compact-header-menu-size);
    }

    .device-reveal__content {
        height: calc(var(--usable-height) - 12px);
    }

    .device-detail-scene {
        --scene-scroll-unit: 360px;
    }

    .lca-content--combined > p,
    .lca-content--combined .lca-system-summary {
        font-size: 18px;
        line-height: 23px;
    }

    .lca-content--combined .lca-pie-layout {
        grid-template-columns: minmax(0, 190px) minmax(0, 140px);
        gap: 7px 26px;
    }

    .circular-guide__copy p {
        margin-bottom: 5px;
    }

    .return-strategies {
        --compact-monitor-width: clamp(195px, 48dvh, 225px);
    }

    .return-nudging {
        grid-template-columns: minmax(250px, 300px) minmax(360px, 1fr);
    }

    .return-nudging__copy {
        font-size: 14px;
        line-height: 18px;
    }

    .return-nudging__copy-stage {
        min-height: calc(var(--usable-height) - 18px);
    }

    .policy-recommendations__copy {
        font-size: 14px;
        line-height: 18px;
    }

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

/* JavaScript mirrors the ultra-short breakpoint on <html>. These selectors
   intentionally carry more specificity than older per-section fallbacks. */
html[data-height-mode="ultra"] .device-detail-stage {
    width: min(1000px, calc(100vw - 32px));
    grid-template-columns: min(255px, 52dvh) minmax(540px, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 46px);
}

html[data-height-mode="ultra"] .device-detail-grid {
    width: min(255px, 52dvh);
    height: auto;
    aspect-ratio: 380 / 583;
    column-gap: clamp(10px, 2.5dvh, 15px);
    row-gap: clamp(9px, 2.2dvh, 13px);
}

html[data-height-mode="ultra"] .device-detail-intro {
    margin-bottom: 10px;
}

html[data-height-mode="ultra"] .device-facts {
    gap: 8px;
}

html[data-height-mode="ultra"] .device-facts li {
    padding-left: 13px;
}

html[data-height-mode="ultra"] .device-facts li,
html[data-height-mode="ultra"] .device-facts strong,
html[data-height-mode="ultra"] .device-facts li::before,
html[data-height-mode="ultra"] .device-detail-intro {
    font-size: 18px;
    line-height: 22px;
}

/* The base LCA heading selector is deliberately specific. Match it here so
   compact headings cannot remain larger than the surrounding desktop copy. */
html[data-height-mode="ultra"] .lca-findings {
    width: min(1000px, calc(100vw - 32px));
    grid-template-columns: min(270px, 58dvh) minmax(560px, 1fr);
    gap: clamp(34px, 4vw, 46px);
}

html[data-height-mode="ultra"] .lca-device-grid {
    width: min(270px, 58dvh);
    gap: 10px;
}

html[data-height-mode="ultra"] .lca-findings .lca-findings__copy,
html[data-height-mode="ultra"] .lca-findings .lca-findings__copy h2 {
    font-size: 18px;
    line-height: 24px;
}

html[data-height-mode="ultra"] .lca-findings .lca-findings__copy h2 {
    margin-bottom: 12px;
}

html[data-height-mode="ultra"] .lca-findings .lca-findings__copy li {
    margin-bottom: 10px;
}

html[data-height-mode="ultra"] .lca-content .lca-pie-caption h2 {
    font-size: 22px;
    line-height: 26px;
}

/* Preserve the component transforms that the legacy short-height fallback
   used to replace with a plain translate. */
html[data-height-mode="ultra"] .return-grin-scene .return-grin__visual[data-scroll-enter] {
    transform: translate3d(0, calc(var(--enter-y, 0px) + var(--exit-y, 0px)), 0) scale(var(--enter-scale, 1)) !important;
    transform-origin: center bottom;
    will-change: transform;
}

html[data-height-mode="ultra"] .return-grin-scene .return-grin__copy[data-scroll-enter] {
    transform: translate3d(0, var(--enter-y, 0px), 0) !important;
    will-change: transform;
}

html[data-height-mode="ultra"] .return-recycle-scene .return-recycle__visual[data-scroll-enter] {
    transform: translate3d(0, var(--enter-y, 0px), 0) rotate(var(--enter-rotate, 0deg)) !important;
    transform-origin: center;
    will-change: transform;
}

html[data-height-mode="ultra"] .return-recycle-scene .return-recycle__copy[data-scroll-enter] {
    transform: translate3d(0, var(--enter-y, 0px), 0) !important;
    will-change: transform;
}

html[data-height-mode="ultra"] .looking-initiatives {
    grid-template-rows: auto auto auto;
    row-gap: clamp(18px, 4.8dvh, 24px);
}

html[data-height-mode="ultra"] .looking-initiatives__lead,
html[data-height-mode="ultra"] .looking-initiatives__closing {
    font-size: 18px;
    line-height: 24px;
}

html[data-height-mode="ultra"] .looking-initiative {
    row-gap: 8px;
}

html[data-height-mode="ultra"] .looking-initiative img {
    width: min(100%, clamp(118px, 31dvh, 150px));
    aspect-ratio: 185 / 132;
}

html[data-height-mode="ultra"] .looking-initiative span {
    font-size: 16px;
    line-height: 18px;
}

/* Static closing sections still scroll normally, but use the same compact
   typographic scale as the animated scenes on short desktop screens. */
html[data-height-mode="ultra"] .looking-credits__copy h2,
html[data-height-mode="ultra"] .looking-credits__copy h3,
html[data-height-mode="ultra"] .looking-credits__copy p,
html[data-height-mode="ultra"] .looking-contact h2,
html[data-height-mode="ultra"] .looking-contact h3 {
    font-size: 18px;
    line-height: 26px;
}

html[data-height-mode="ultra"] .looking-contact__email {
    font-size: 16px;
    line-height: 22px;
}

html[data-height-mode="ultra"] .site-footer.site-footer--dice p {
    font-size: 14px;
    line-height: 22px;
}

html[data-height-mode="ultra"] .lca-dashboard__visual {
    width: min(500px, 74dvh, calc(100vw - 130px));
}

html[data-height-mode="ultra"] .business-models__visual {
    width: min(370px, 74dvh);
}

html[data-height-mode="ultra"] .business-models__pointer {
    left: -58px;
    width: clamp(140px, 31dvh, 168px);
}

html[data-height-mode="ultra"] .return-nudging__copy-stage {
    min-height: calc(var(--usable-height) - 18px);
}