@media (min-width: 1024px) {
    .proo-static-hero--service-ring {
        /* Give the CTA a deliberate pause before the card stage begins. */
        /* Keep the opening composition visually stable when desktop browser or
           OS scaling reduces the CSS viewport. At the approved 950px viewport
           this still resolves to the previous 445.9px; from 125-175% it eases
           down by only a few physical pixels instead of hitting a magnified
           fixed minimum. */
        --centered-intro-height: clamp(250px, calc(48.48vh - 14.7px), 474px);
        /* One ordinary wheel gesture must produce immediate visible feedback.
           The previous 400px dwell felt like a missed scroll and encouraged a
           second, much larger gesture before centering had even begun. */
        --centered-swipe-dwell: 52px;
        /* Keep the rotating stage comfortably inside the opening fold while
           preserving the exact WebGL-to-DOM growth handoff geometry. */
        --centered-card-width: min(
            820px,
            47vw,
            calc((100vh - (2 * var(--centered-card-side))) * 16 / 9)
        );
    }

    /* Inline fold-fit code also writes a legacy multi-scene height. Once the
       ring controller has measured its single story, this value is the only
       desktop scroll budget and prevents an empty tail below the release. */
    .proo-static-hero--service-ring.is-proo-ring-mounted {
        height: var(--proo-desktop-story-height) !important;
        position: relative !important;
        z-index: 40 !important;
        isolation: isolate;
    }

    /* Keep the hero and its optional WordPress/Elementor widget host in one
       explicit paint layer while the sticky sequence is active. The runtime
       now keeps the document height invariant even during fast scrolling. */
    .proo-story-stacking-host {
        position: relative !important;
        z-index: 40 !important;
        isolation: isolate;
    }

    /* Keep the complete opening composition on its first-load coordinates
       while scroll supplies story progress. The older centered-card rule made
       this wrapper relative, so the copy and ring first travelled upward in
       normal flow and the state machine then had to fix the ring back at its
       measured opening position. That ownership change was the visible snap. */
    .proo-static-hero--service-ring.proo-static-hero--scroll-expand
    .proo-static-hero__inner {
        position: sticky !important;
        top: var(--proo-hero-sticky-top, 0px) !important;
        height: var(--proo-hero-viewport-height, 100vh) !important;
        overflow: visible !important;
    }

    /* Keep the opening message above the card while the primary service grows.
       Once growth is complete, native page scroll moves the copy and expanded
       card upward together, preserving their spacing instead of letting the
       card climb through the headline. */
    .proo-static-hero--service-ring.proo-static-hero--centered-card.is-proo-story-machine-active
    .proo-static-hero__copy {
        opacity: var(--proo-story-copy-opacity, 1) !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: translate3d(
            0,
            calc(0px - var(--proo-story-release-offset, 0px)),
            0
        ) !important;
        will-change: transform, opacity;
    }

    /* Cheap story reveal: keep copy as real text and fade whole text groups
       only after the card has opened. No per-word scroll measuring. */
    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-meta,
    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-title,
    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-description,
    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-caption {
        opacity: 0;
        transition: opacity 260ms ease-out;
    }

    .proo-static-hero--service-ring.is-proo-story-copy-visible
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-meta,
    .proo-static-hero--service-ring.is-proo-story-copy-visible
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-title,
    .proo-static-hero--service-ring.is-proo-story-copy-visible
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-description,
    .proo-static-hero--service-ring.is-proo-story-copy-visible
    .proo-static-hero__frosted-content
    .proo-static-hero__frosted-caption {
        opacity: 1;
    }

    /* Reduce the authored two-line story heading by exactly 25% without
       changing its column or its two explicit nowrap line spans. */
    .proo-static-hero--service-ring .proo-static-hero__frosted-title {
        font-size: clamp(2.3625rem, min(4.575vw, 7.2vh), 5.475rem) !important;
    }

    .proo-static-hero--service-ring[data-lang="el"]
    .proo-static-hero__frosted-title {
        font-size: clamp(1.7625rem, 2.5125vw, 3.15rem) !important;
    }

    .proo-static-hero--service-ring .proo-static-hero__frosted-title > span {
        white-space: nowrap !important;
    }

    .proo-static-hero--service-ring .proo-static-hero__cards {
        isolation: isolate;
        overflow: visible;
    }

    /* The source story keeps only its primary card. The other two source
       slides can never leak back in behind the WebGL carousel. */
    .proo-static-hero--service-ring.is-proo-ring-mounted
    .proo-static-hero__cards > .proo-static-hero__slide:not(:first-child) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .proo-static-hero--service-ring.is-proo-ring-mounted
    .proo-static-hero__cards > .proo-static-hero__slide:first-child {
        pointer-events: none !important;
    }

    .proo-static-hero--service-ring.is-proo-ring-mounted
    .proo-static-hero__cards > .proo-static-hero__slide:first-child {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .proo-static-hero--service-ring.is-proo-ring-source-visible
    .proo-static-hero__cards > .proo-static-hero__slide:first-child {
        opacity: var(--proo-ring-source-opacity, 0) !important;
        visibility: visible !important;
    }

    .proo-service-ring {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 12;
        width: 100%;
        /* 618px at the approved 950px desktop viewport, then a continuous,
           near-inverse response to browser/device scale. This prevents the
           former 500px CSS floor from becoming an 875px physical stage at
           175% while retaining the exact 100% composition. */
        height: clamp(300px, calc(67.82vh - 26px), 680px);
        min-height: 0;
        overflow: visible;
        cursor: grab;
        opacity: 0;
        visibility: visible;
        transform: translateY(72px);
        transform-origin: 50% 50%;
        touch-action: pan-y pinch-zoom;
        will-change: transform, opacity;
    }

    .proo-service-ring__surface {
        position: absolute;
        inset: 0;
        transform-origin: 50% 50%;
        will-change: transform, opacity;
        pointer-events: auto;
    }

    .proo-service-ring__actions {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
    }

    .proo-service-ring__action {
        position: absolute;
        display: block;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: transparent;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -50%);
        pointer-events: none;
        cursor: pointer;
        touch-action: manipulation;
    }

    .proo-service-ring__action.is-proo-ring-action-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .proo-service-ring__action.is-proo-ring-action-active:hover {
        background: transparent;
        box-shadow: none;
    }

    .proo-service-ring__action.is-proo-ring-action-active:focus-visible {
        outline: 0;
        box-shadow: none;
    }

    .proo-service-ring__action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .proo-service-ring__canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        outline: none;
        pointer-events: auto;
    }

    .proo-service-ring__texture-video {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .proo-static-hero--service-ring .proo-static-hero__copy {
        position: relative !important;
        z-index: 16 !important;
        padding-top: 104px !important;
    }

    /* WordPress places the global header before the hero in normal flow,
       while the standalone clone previews use an overlay header. Do not add
       the overlay allowance a second time on the production layout. */
    .proo-static-hero--service-ring.has-proo-flow-header {
        /* Match the pre-carousel copy band exactly. The previous 40px trim
           was what pulled the complete text/button stack upward. */
        /* 395.9px at 100%; 392.8px, 389.5px and 386.8px to the eye at
           125%, 150% and 175%. The small progressive trim compensates for the
           intentionally untouched header growing under browser scaling. */
        --centered-intro-height: clamp(220px, calc(42.97vh - 12.3px), 424px);
    }

    .proo-static-hero--service-ring.has-proo-flow-header .proo-static-hero__copy {
        padding-top: clamp(.75rem, 2vh, 1.5rem) !important;
    }

    .proo-static-hero--service-ring.is-proo-ring-ready:not(.is-proo-ring-entered)
    .proo-service-ring {
        animation: proo-service-ring-enter 1.05s cubic-bezier(.22, 1, .36, 1) .22s forwards;
    }

    /* The entrance is a one-shot. Once it has completed—or the scroll handoff
       has started—the ring must never replay from opacity zero on the way back. */
    .proo-static-hero--service-ring.is-proo-ring-entered .proo-service-ring {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .proo-static-hero--service-ring.is-proo-ring-mounted:not(.is-centered-sequence-active):not(.is-frosted-transitioning):not(.is-frosted-released)
    .proo-static-hero__copy {
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        animation: none !important;
    }

    .proo-service-ring.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .proo-service-ring.is-returning-primary {
        cursor: wait;
    }

    html.is-proo-ring-dragging,
    html.is-proo-ring-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
    }

    /* The WebGL plane remains present through the first part of the source
       card's growth. JS scales it to the same live card rectangle while the
       vertex bend relaxes and the real text-bearing card crossfades in. */
    .proo-static-hero--service-ring.is-proo-ring-handoff-active .proo-service-ring {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        animation: none !important;
        pointer-events: none !important;
    }

    /* The state-machine build never swaps the whole canvas for a separately
       animated layout. The ring stays mounted and the real primary card
       crossfades over its exact front projection, while this one class blocks
       drag input for the complete center/morph/reverse transaction. */
    .proo-static-hero--service-ring.is-proo-story-machine-active .proo-service-ring {
        position: fixed !important;
        top: calc(
            var(--proo-story-stage-top, 0px) -
            var(--proo-story-release-offset, 0px)
        ) !important;
        right: 0 !important;
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        pointer-events: none !important;
    }

    /* While progress is between endpoints the DOM card is viewport-owned.
       Removing the old transformed/perspective containing blocks means a fast
       reverse scroll cannot pull it away from the projected WebGL rectangle. */
    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__cards {
        perspective: none !important;
    }

    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__cards > .proo-static-hero__slide:first-child {
        transform: none !important;
        will-change: auto !important;
    }

    .proo-static-hero--service-ring.is-proo-story-machine-active
    .proo-static-hero__cards > .proo-static-hero__slide:first-child
    .proo-static-hero__card--builder {
        position: fixed !important;
        z-index: 32 !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
    }

    /* Browser scroll position is authoritative. If a fast gesture or restored
       page position has already placed the complete hero above the viewport,
       no fixed carousel owner may remain painted over the following sections. */
    .proo-static-hero--service-ring.is-proo-story-past-viewport .proo-service-ring,
    .proo-static-hero--service-ring.is-proo-story-past-viewport
    .proo-static-hero__cards > .proo-static-hero__slide:first-child {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        animation: none !important;
    }

    .proo-static-hero--service-ring.is-proo-ring-handoff-complete .proo-service-ring,
    .proo-static-hero--service-ring.is-frosted-transitioning .proo-service-ring,
    .proo-static-hero--service-ring.is-frosted-released .proo-service-ring {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        animation: none !important;
    }

    @keyframes proo-service-ring-enter {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Native flat mobile swipe variant. These rules apply to the three original
   source slides only; no carousel clone, cylinder, canvas or 3D transform is
   mounted on phones. */
@media (max-width: 1023px) {
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted) {
        --mobile-card-side-gap: clamp(16px, 4vw, 20px) !important;
        --mobile-card-width: calc(100vw - (2 * var(--mobile-card-side-gap))) !important;
        --mobile-card-render-height: var(--mobile-card-width) !important;
        --mobile-card-base-height: var(--mobile-card-render-height) !important;
        --mobile-card-height: var(--mobile-card-render-height) !important;
        --mobile-card-stack-height: var(--mobile-card-render-height) !important;
        --mobile-story-v4-panel-height: var(--mobile-card-render-height) !important;
        --mobile-story-v4-panel-top: max(
            198px,
            calc(
                var(--proo-hero-viewport-height, 100dvh)
                - var(--mobile-card-width)
                - var(--mobile-card-bottom-gap)
                - 8px
            )
        ) !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__copy {
        flex: 0 0 var(--mobile-story-v4-panel-top) !important;
        height: var(--mobile-story-v4-panel-top) !important;
        min-height: var(--mobile-story-v4-panel-top) !important;
        max-height: var(--mobile-story-v4-panel-top) !important;
        justify-content: center !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__cards {
        height: var(--mobile-card-render-height) !important;
        min-height: var(--mobile-card-render-height) !important;
        max-height: var(--mobile-card-render-height) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        perspective: none !important;
        transform: none !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__cards > .proo-static-hero__slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: var(--mobile-card-render-height) !important;
        min-height: var(--mobile-card-render-height) !important;
        max-height: var(--mobile-card-render-height) !important;
        scroll-snap-align: center !important;
        transform: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card {
        width: var(--mobile-card-width) !important;
        height: var(--mobile-card-render-height) !important;
        min-height: var(--mobile-card-render-height) !important;
        max-height: var(--mobile-card-render-height) !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__card--builder {
        position: relative !important;
        display: block !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: clamp(18px, 4.6vw, 22px) !important;
        background: #131314 !important;
        color: #f7f7f5 !important;
        box-shadow: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: #131314 !important;
        transform: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        display: block !important;
        background: rgb(0 0 0 / .42) !important;
        pointer-events: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__builder-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: 74% center !important;
        transform: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__builder-copy,
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__card--builder > .proo-static-hero__card-number,
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__card--builder > .proo-static-hero__release-status,
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-meta,
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label {
        display: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-copy {
        position: absolute !important;
        inset: 0 !important;
        z-index: 6 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(18px, 5.2vw, 28px) !important;
        gap: clamp(9px, 2.6vw, 13px) !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: transparent !important;
        color: #f7f7f5 !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: left !important;
        text-shadow: 0 2px 16px rgb(0 0 0 / .48) !important;
        pointer-events: none !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 23ch !important;
        margin: 0 !important;
        color: #f7f7f5 !important;
        font-size: clamp(1.65rem, 7.66vw, 2rem) !important;
        line-height: .98 !important;
        text-align: left !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-description {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 42ch !important;
        margin: 0 !important;
        color: rgb(247 247 245 / .82) !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1.34 !important;
        text-align: left !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child
    :is(.proo-static-hero__mobile-video-title, .proo-static-hero__mobile-video-description) > span {
        display: block !important;
        width: auto !important;
        align-self: flex-start !important;
        text-align: left !important;
    }
}

@media (max-width: 1023px) {
    .proo-service-ring {
        display: none !important;
    }

    .proo-static-hero--service-ring .proo-static-hero__copy {
        padding-top: 72px !important;
    }
}

@media (max-width: 1023px) {
    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted {
        /* V12 phone experiment: all three curved faces resolve to exact 1:1
           squares. The remaining fold space is assigned to the centred intro
           band, with a stable reservation for the indicator below the card. */
        --proo-mobile-card-square-size: calc(100vw - 32px);
        --proo-mobile-ring-indicator-space: 37px;
        --proo-mobile-intro-band-height: max(
            0px,
            calc(
                var(
                    --proo-mobile-ring-fold-height,
                    var(--proo-hero-viewport-height, 100dvh)
                )
                - var(--proo-mobile-card-square-size)
                - var(--proo-mobile-ring-indicator-space)
            )
        );
        --mobile-story-v4-panel-height: var(--proo-mobile-card-square-size);
        height: var(
            --proo-mobile-ring-fold-height,
            var(--proo-hero-viewport-height, 100dvh)
        ) !important;
        min-height: var(
            --proo-mobile-ring-fold-height,
            var(--proo-hero-viewport-height, 100dvh)
        ) !important;
    }

    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__copy {
        justify-content: center !important;
        padding: 0 1.25rem !important;
        transform: none !important;
    }

    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__inner {
        height: var(
            --proo-mobile-ring-fold-height,
            var(--proo-hero-viewport-height, 100dvh)
        ) !important;
        min-height: var(
            --proo-mobile-ring-fold-height,
            var(--proo-hero-viewport-height, 100dvh)
        ) !important;
    }

    /* The source slides retain the approved content and intrinsic layout but
       never paint underneath the curved renderer. */
    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__cards > .proo-static-hero__slide {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__cards {
        /* The reference cylinder has no pagination strip. Give that reserved
           space back to the rotating stage while the hero still ends exactly
           at the first-load fold. */
        height: var(--proo-mobile-card-square-size) !important;
        margin-top: 0 !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        overscroll-behavior-x: none !important;
        scroll-snap-type: none !important;
    }

    /* The production header is already in normal flow. Trim only that layout;
       standalone/01-beta previews retain their approved overlay-header spacing. */
    .proo-static-hero--service-ring.has-proo-flow-header
    .proo-static-hero__copy {
        flex-basis: var(--mobile-story-v4-panel-top, 256px) !important;
        height: var(--mobile-story-v4-panel-top, 256px) !important;
        padding: .75rem 1.25rem !important;
    }

    /* This final height owner intentionally outranks both the legacy inline
       story measurement and the production-header branch above. It converts
       every pixel removed from the portrait cards into a centred intro band. */
    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__copy {
        flex: 0 0 var(--proo-mobile-intro-band-height) !important;
        flex-basis: var(--proo-mobile-intro-band-height) !important;
        height: var(--proo-mobile-intro-band-height) !important;
        min-height: 0 !important;
    }

    .proo-static-hero--service-ring.has-proo-flow-header.is-proo-mobile-ring-mounted
    .proo-static-hero__cards {
        margin-top: 0 !important;
    }

    .proo-mobile-service-ring {
        position: absolute;
        inset: 0;
        z-index: 14;
        display: block;
        overflow-x: clip;
        overflow-y: visible;
        cursor: grab;
        touch-action: pan-y pinch-zoom;
        user-select: none;
        -webkit-user-select: none;
        perspective: 1080px;
        perspective-origin: 50% 50%;
    }

    .proo-mobile-service-ring.is-dragging {
        cursor: grabbing;
    }

    /* Continuous motion still benefits from positional feedback. The active
       pill follows the service nearest the front; it never snaps the ring. */
    .proo-mobile-service-ring__indicator {
        position: absolute;
        top: calc(100% + 29px);
        left: 50%;
        z-index: 18;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 8px;
        gap: 6px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .proo-mobile-service-ring__indicator > span {
        display: block;
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #56565c;
        transition: width 180ms ease, background-color 180ms ease;
    }

    .proo-mobile-service-ring__indicator > span.is-active {
        width: 46px;
        background: #a0a1a8;
    }

    .proo-mobile-service-ring__track {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        /* Widen the front card without changing the stage height. The 16px
           viewport-side inset matches the live mobile card rhythm; adjacent
           panels may disappear completely when one card faces front. */
        width: calc(100% - 32px) !important;
        height: 100% !important;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        will-change: transform;
        pointer-events: none;
    }

    .proo-mobile-service-ring__panel {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform-origin: 50% 50%;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        pointer-events: none;
    }

    /* Only the narrow front-facing window owns taps. Touching a control pauses
       the cylinder immediately, while off-axis repeated cards remain inert. */
    .proo-mobile-service-ring__panel.is-proo-cylinder-front {
        pointer-events: auto;
    }

    .proo-mobile-service-ring__card,
    .proo-mobile-service-ring__card * {
        pointer-events: none !important;
    }

    .proo-mobile-service-ring__panel:not(.is-proo-cylinder-front)
    :is(a, button, input, select, textarea) {
        pointer-events: none !important;
    }

    .proo-mobile-service-ring__panel.is-proo-cylinder-front
    :is(a, button, input, select, textarea),
    .proo-mobile-service-ring__panel.is-proo-cylinder-front
    :is(a, button, input, select, textarea) * {
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .proo-mobile-service-ring__card.proo-static-hero__card {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 auto !important;
        transform: none !important;
        transition: none !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        clip-path: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* The AI card's artwork is white. Keep its mobile clone on the same dark
       surface as the desktop texture instead of inheriting the light theme. */
    .proo-mobile-service-ring__panel[data-service-index="1"]
    .proo-mobile-service-ring__card.proo-static-hero__card--software {
        background: #232325 !important;
        color: #f7f7f5 !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="1"]
    .proo-static-hero__card-action {
        background: transparent !important;
        border-radius: 0 !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="1"]
    .proo-static-hero__card-action::before,
    .proo-mobile-service-ring__panel[data-service-index="1"]
    .proo-static-hero__card-action::after {
        display: none !important;
        box-shadow: none !important;
    }

    /* A constantly moving cylinder has no discrete active tab. */
    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted
    .proo-static-hero__section4-tabs {
        display: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-mobile-service-ring__card.proo-static-hero__card--builder {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: clamp(18px, 4.6vw, 22px) !important;
        background: var(--mobile-first-card-dark-bg, #1d1d1f) !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        box-shadow: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__responsive-mark {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        border-bottom-right-radius: inherit !important;
        border-bottom-left-radius: inherit !important;
        background: #131314 !important;
        contain: paint;
        transform: translateZ(0) !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__builder-copy,
    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__card--builder > .proo-static-hero__card-number,
    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__card--builder > .proo-static-hero__release-status {
        display: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__responsive-mark::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block !important;
        background: rgb(0 0 0 / .42) !important;
        pointer-events: none;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__builder-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: 74% center !important;
        transform: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-copy {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 6 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        align-content: end !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(18px, 5.2vw, 28px) !important;
        gap: clamp(9px, 2.6vw, 13px) !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: transparent !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        opacity: 1 !important;
        transform: none !important;
        justify-items: start !important;
        text-align: left !important;
        text-shadow: 0 2px 16px rgb(0 0 0 / .48);
        pointer-events: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-meta,
    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-software-label {
        display: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: 23ch !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        font-size: clamp(1.65rem, 7.66vw, 2rem) !important;
        line-height: .98 !important;
        text-align: left !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-description {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: 42ch !important;
        color: rgb(247 247 245 / .82) !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1.34 !important;
        text-align: left !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    :is(.proo-static-hero__mobile-video-title, .proo-static-hero__mobile-video-description)
    > span {
        display: block !important;
        width: auto !important;
        align-self: flex-start !important;
        text-align: left !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-meta,
    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-software-label {
        color: var(--mobile-first-card-dark-muted, #a4a4a8) !important;
    }

    /* Restore the richer approved mobile renderer. Its square meshes retain
       the curved WebGL face and momentum behavior; real HTML owns card 01's
       copy in the interaction layer instead of baking words into the canvas. */
    .proo-mobile-service-ring.proo-mobile-curved-ring {
        --proo-mobile-ring-render-bleed: 48px;
        overflow: visible;
        perspective: none;
        cursor: grab;
        contain: layout style;
    }

    .proo-mobile-service-ring.proo-mobile-curved-ring.is-dragging {
        cursor: grabbing;
    }

    .proo-mobile-curved-ring__surface,
    .proo-mobile-curved-ring__actions {
        position: absolute;
        top: calc(var(--proo-mobile-ring-render-bleed) * -1);
        right: 0;
        bottom: calc(var(--proo-mobile-ring-render-bleed) * -1);
        left: 0;
    }

    .proo-mobile-curved-ring__surface {
        z-index: 1;
        overflow: visible;
        pointer-events: none;
    }

    .proo-mobile-curved-ring__canvas {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        pointer-events: none;
    }

    .proo-mobile-curved-ring__actions {
        z-index: 3;
        pointer-events: none;
    }

    .proo-mobile-curved-ring__action {
        position: absolute;
        display: block;
        width: clamp(54px, 15vw, 64px);
        height: clamp(54px, 15vw, 64px);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: transparent;
        opacity: 0;
        outline: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .proo-mobile-curved-ring__action.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    .proo-mobile-curved-ring__action[data-service-index="2"] {
        width: clamp(44px, 12vw, 50px);
        height: clamp(44px, 12vw, 50px);
    }

    .proo-mobile-curved-ring__action:focus,
    .proo-mobile-curved-ring__action:focus-visible {
        outline: 0;
        box-shadow: none;
    }

    .proo-mobile-curved-ring__indicator {
        position: absolute;
        top: calc(100% + 29px);
        left: 50%;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 8px;
        gap: 6px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .proo-mobile-curved-ring__indicator > span {
        display: block;
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #56565c;
        transition: width 180ms ease, background-color 180ms ease;
    }

    .proo-mobile-curved-ring__indicator > span.is-active {
        width: 46px;
        background: #a0a1a8;
    }

    .proo-mobile-curved-ring__texture-video {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .proo-mobile-curved-ring__semantic-copy.proo-static-hero__mobile-video-copy {
        position: absolute !important;
        z-index: 6 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: clamp(18px, 5.2vw, 28px) !important;
        gap: clamp(9px, 2.6vw, 13px) !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: clamp(18px, 4.6vw, 22px) !important;
        background: transparent !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        text-align: left !important;
        text-shadow: 0 2px 16px rgb(0 0 0 / .48);
        transform: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .proo-mobile-curved-ring__semantic-copy
    .proo-static-hero__mobile-video-meta {
        display: none !important;
    }

    .proo-mobile-curved-ring__semantic-copy
    :is(.proo-static-hero__mobile-video-title, .proo-static-hero__mobile-video-description) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .proo-mobile-curved-ring__semantic-copy
    .proo-static-hero__mobile-video-title {
        max-width: 23ch !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        font-size: clamp(1.65rem, 7.66vw, 2rem) !important;
        line-height: .98 !important;
    }

    .proo-mobile-curved-ring__semantic-copy
    .proo-static-hero__mobile-video-description {
        max-width: 42ch !important;
        color: rgb(247 247 245 / .82) !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1.34 !important;
    }

    .proo-mobile-curved-ring__semantic-copy
    :is(.proo-static-hero__mobile-video-title, .proo-static-hero__mobile-video-description)
    > span {
        display: block !important;
        width: auto !important;
        align-self: flex-start !important;
        text-align: left !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .proo-static-hero--service-ring .proo-service-ring {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .proo-static-hero--service-ring .proo-static-hero__copy {
        opacity: 1;
        animation: none !important;
    }
}

/* Flat-swipe mobile indicator polish. The visible indicator is centered in
   the free band below the responsive card, with identical clearance to the card
   and the fold. */
@media (max-width: 1023px) {
    .proo-static-hero--three-card-stage.proo-static-hero--section4-mobile-tabs:not(.is-proo-mobile-ring-mounted) {
        --flat-tab-indicator-height: 8px;
        /* The approved indicator had 18px of visible card-side clearance:
           10px flow margin plus 8px of centering inside its 24px row. */
        --flat-tab-previous-gap: 18px;
        --flat-tab-balanced-gap: calc(var(--flat-tab-previous-gap) * 1.0626);
        /* Stable reference matching the current responsive button height.
           It is deliberately independent from the button DOM and styling. */
        --mobile-intro-clearance-unit: clamp(31.4px, 9.755vw, 48.1px);
        /* Give the normal mobile card a 7% taller target. On short displays
           the existing fit ceiling still reduces it before either equal intro
           clearance can fall below the approved minimum. */
        --mobile-card-standard-height: calc(var(--mobile-card-width) * 1.07);
        --flat-tab-flow-margin: calc(
            var(--flat-tab-balanced-gap)
            - ((var(--section4-mobile-tabs-height) - var(--flat-tab-indicator-height)) / 2)
        );
        --mobile-card-min-height: min(220px, var(--mobile-card-width));
        --mobile-card-base-fit-height: min(
            var(--mobile-card-standard-height),
            max(
                var(--mobile-card-min-height),
                calc(
                    var(--proo-hero-viewport-height, 100dvh)
                    - var(--mobile-intro-required-height, 140px)
                    - (2 * var(--flat-tab-balanced-gap))
                    - var(--flat-tab-indicator-height)
                )
            )
        );
        --mobile-card-render-height: calc(
            var(--mobile-card-base-fit-height)
            + var(--mobile-card-height-bonus, 0px)
        ) !important;
        --mobile-card-base-height: var(--mobile-card-render-height) !important;
        --mobile-card-height: var(--mobile-card-render-height) !important;
        --mobile-card-stack-height: var(--mobile-card-render-height) !important;
        --mobile-story-v4-panel-height: var(--mobile-card-render-height) !important;
        --mobile-story-v4-panel-top: max(
            var(--mobile-intro-required-height, 140px),
            calc(
                var(--proo-hero-viewport-height, 100dvh)
                - var(--mobile-card-render-height)
                - (2 * var(--flat-tab-balanced-gap))
                - var(--flat-tab-indicator-height)
            )
        ) !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-mobile-intro-clearance-probe {
        position: absolute !important;
        width: var(--mobile-intro-clearance-unit) !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .proo-static-hero--three-card-stage.proo-static-hero--section4-mobile-tabs:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__section4-tabs {
        position: relative !important;
        top: auto !important;
        margin: var(--flat-tab-flow-margin) auto !important;
    }

    .proo-static-hero--three-card-stage.proo-static-hero--section4-mobile-tabs:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__section4-dots {
        gap: 8px !important;
    }

    .proo-static-hero--three-card-stage.proo-static-hero--section4-mobile-tabs:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__section4-dot {
        width: 8px !important;
        height: var(--flat-tab-indicator-height) !important;
    }

    .proo-static-hero--three-card-stage.proo-static-hero--section4-mobile-tabs:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__section4-dot[aria-current="true"] {
        width: 50px !important;
        height: var(--flat-tab-indicator-height) !important;
    }

    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark::after {
        background: rgb(0 0 0 / .42) !important;
    }
}

/* Phone/tablet card-one editorial follow-up. Desktop retains the WebGL source
   layout; both touch-oriented sizes use the native card and follow-up flow. */
.proo-card-one-followup {
    display: none;
}

@media (max-width: 1023px) {
    .proo-static-hero--mobile-card1-followup {
        --proo-mobile-card-title-in-box-scale: .7;
    }

    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-copy {
        gap: 0 !important;
        padding-bottom: clamp(12px, 3.6vw, 18px) !important;
    }

    .proo-static-hero[data-lang="el"].proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-copy {
        padding-bottom: clamp(18px, 5.2vw, 28px) !important;
    }

    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: opacity 180ms cubic-bezier(.22, 1, .36, 1),
            transform 180ms cubic-bezier(.22, 1, .36, 1);
    }

    .proo-static-hero--mobile-card1-followup.is-proo-beyond-page-top:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-description {
        display: none !important;
    }

    .proo-card-one-followup {
        box-sizing: border-box;
        display: block;
        width: 100%;
        min-height: 0;
        /* Keep the transferred copy clearly separate from the card while the
           carousel indicator remains visible between the two states. */
        margin-top: 0;
        padding: calc(68.6px + clamp(9px, 2.4vw, 14px))
            clamp(14px, 4vw, 24px) 0;
        overflow: hidden;
        background: #fdf9f9;
        /* Exact light-theme match for the main hero subtitle token. */
        color: #6c6c70;
    }

    html[data-hero-theme="dark"] .proo-card-one-followup {
        background: #131314;
        /* Exact dark-theme match for the main hero subtitle token. */
        color: #a4a4a8;
    }

    /* The transferred heading and supporting copy are one editorial unit.
       One compositor-friendly transition keeps their entrance atomic. */
    .proo-card-one-followup__group {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
        transition: opacity 240ms cubic-bezier(.22, 1, .36, 1),
            transform 240ms cubic-bezier(.22, 1, .36, 1);
    }

    .proo-card-one-followup.is-revealed .proo-card-one-followup__group {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 180ms;
    }

    .proo-card-one-followup__title {
        position: relative;
        z-index: 41;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
        margin: 0 auto clamp(10px, 2.8vw, 16px);
        color: #131314;
        font-family: "Junicode", Georgia, serif;
        font-size: clamp(1.38rem, 6.4vw, 1.95rem);
        font-weight: 400;
        font-synthesis: none;
        line-height: 1.02;
        letter-spacing: -.018em;
        text-align: center;
    }

    .proo-card-one-followup__title > span {
        display: block;
        white-space: nowrap;
    }

    html[data-hero-theme="dark"] .proo-card-one-followup__title {
        color: #f7f7f5;
    }

    .proo-card-one-followup__copy {
        position: relative;
        z-index: 41;
        width: 95%;
        margin: 0 auto;
        color: inherit;
        font-family: "Junicode", Georgia, serif;
        font-size: clamp(.9rem, 4.7vw, 1.8rem);
        font-weight: 400;
        font-synthesis: none;
        line-height: var(--proo-followup-line-height, 1.02);
        letter-spacing: -0.012em;
        text-align: center;
    }

    .proo-card-one-followup__line {
        display: block;
        width: max-content;
        max-width: none;
        margin-inline: auto;
        white-space: nowrap;
        text-align: center;
    }

    .proo-card-one-followup[data-lang="el"] .proo-card-one-followup__copy {
        font-family: "Noto Serif", Georgia, serif;
        font-size: clamp(.9rem, 4.7vw, 1.8rem);
        letter-spacing: -0.01em;
    }

    .proo-card-one-followup[data-lang="el"] .proo-card-one-followup__title {
        font-family: "Noto Serif", Georgia, serif;
        letter-spacing: -.025em;
    }

    .proo-static-hero[data-lang="en"].proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title,
    .proo-card-one-followup[data-lang="en"] .proo-card-one-followup__title,
    .proo-card-one-followup[data-lang="en"] .proo-card-one-followup__copy {
        font-weight: 400 !important;
        font-synthesis: none !important;
        -webkit-text-stroke: 0.65px currentColor;
        text-stroke: 0.65px currentColor;
    }

    .proo-static-hero--mobile-card1-followup .proo-static-hero__section4-tabs {
        opacity: 1;
        visibility: visible;
        transition: opacity 260ms cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear 0s;
    }



    /* A desktop-to-mobile breakpoint change may produce browser-generated
       scroll events while the document is reflowing. Keep the under-card copy
       atomically hidden until the first real user scroll gesture. */
    .proo-card-one-followup.is-breakpoint-reset .proo-card-one-followup__group {
        opacity: 0 !important;
        transform: translate3d(0, -8px, 0) !important;
        transition: none !important;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .proo-card-one-followup__group,
    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title,
    .proo-static-hero--mobile-card1-followup .proo-static-hero__subtitle,
    .proo-static-hero--mobile-card1-followup .proo-static-hero__join {
        transition: none !important;
    }

    .proo-card-one-followup.is-revealed .proo-card-one-followup__group {
        opacity: 1 !important;
        transform: none !important;
    }

    .proo-static-hero--mobile-card1-followup .proo-static-hero__section4-tabs {
        transition: none !important;
    }
}

/* V58: one bilingual display-leading standard across every hero state.
   Language owns the ratio; viewport size and card relocation do not. */
.proo-static-hero[data-lang="en"] .proo-static-hero__title,
.proo-card-one-followup[data-lang="en"] .proo-card-one-followup__title {
    line-height: 1.10 !important;
}

.proo-static-hero[data-lang="el"] .proo-static-hero__title,
.proo-card-one-followup[data-lang="el"] .proo-card-one-followup__title {
    line-height: 1.3 !important;
}

@media (max-width: 1023px) and (prefers-color-scheme: dark) {
    html:not([data-hero-theme="light"]) .proo-card-one-followup {
        background: #131314;
        color: #a4a4a8;
    }

    html:not([data-hero-theme="light"]) .proo-card-one-followup__title {
        color: #f7f7f5;
    }
}
/* V18 phone/tablet treatment: keep card 01 visually quiet at rest. Its semantic
   title remains measurable and accessible, but is painted only in the normal-
   flow follow-up after the first scroll. Reuse the existing lightweight SVG
   scroll cue in its place; no polling or new event listener is required. */
@media (max-width: 1023px) {
    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-video-title {
        opacity: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label {
        display: inline-flex !important;
        width: 18px !important;
        height: 26px !important;
        left: clamp(18px, 5vw, 24px) !important;
        right: auto !important;
        bottom: clamp(18px, 5vw, 24px) !important;
        opacity: .82 !important;
        transform: none !important;
        transition: opacity 240ms cubic-bezier(.22, 1, .36, 1) !important;
    }

    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__scroll-wheel-icon {
        width: 18px !important;
        height: 26px !important;
        transform: none !important;
    }



    /* Preserve the approved video tint beneath its short corner label. */
    .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark::after {
        background: rgb(0 0 0 / .34) !important;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
    .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label {
        transition: none !important;
    }
}