@media (min-width: 601px) {
    .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);
        }
    }
}

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

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

@media (max-width: 600px) {
    .proo-static-hero--service-ring.is-proo-mobile-ring-mounted {
        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__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 phone ring is made from clones of the approved portrait cards. The
       original first slide stays in flow to keep the beta layout's exact
       343x537-style geometry, but it has one stable visual owner at a time. */
    .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(--mobile-story-v4-panel-height) !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;
    }

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

    /* 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: auto !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: auto !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: calc(100% - var(--mobile-first-card-copy-height, 174px)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        background: #131314 !important;
        contain: paint;
        transform: translateZ(0) !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__responsive-mark::after,
    .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__builder-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: 62% center !important;
        transform: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-copy {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 6 !important;
        display: grid !important;
        align-content: center !important;
        width: 100% !important;
        height: var(--mobile-first-card-copy-height, 174px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 14px clamp(14px, 3.6vw, 18px) !important;
        gap: 8px !important;
        overflow: hidden !important;
        border-radius: 0 0 clamp(18px, 4.6vw, 22px) clamp(18px, 4.6vw, 22px) !important;
        background: var(--mobile-first-card-dark-bg, #1d1d1f) !important;
        color: var(--mobile-first-card-dark-text, #f7f7f5) !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-title {
        margin: 0 auto !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;
    }

    .proo-mobile-service-ring__panel[data-service-index="0"]
    .proo-static-hero__mobile-video-description {
        margin: 0 auto !important;
        max-width: 46ch !important;
        color: var(--mobile-first-card-dark-muted, #a4a4a8) !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1.34 !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;
    }

}

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