/* ── Fix: Match banner height to Moxa52 product pages ── */
        .rt-button-gap {
             margin-top: unset;
        }

        /* ── "How Moreze Works for You" section — border styling
             Light row separators + light vertical dividers everywhere,
             with a single dark vertical line highlighting the 2nd row
             (Concept Development) to match the reference design. ── */
        .rt-innovative .rt-process-content {
            border-bottom-color: rgba(15, 23, 42, 0.10);
        }

        .rt-innovative .rt-process-content .rt-process-line {
            background-color: rgba(15, 23, 42, 0.10);
        }

        /* Hide the dark animated overlay on rows 01, 03, 04 */
        .rt-innovative .rt-process-content .rt-process-overlay {
            display: none;
        }

        /* Show the dark vertical line only on row 02 (Concept Development) */
        .rt-innovative .rt-innovative-right-wrapper > .rt-process-content:nth-child(2) .rt-process-overlay {
            display: block;
            background-color: #0f172a; /* dark navy to match heading tone */
            width: 1px;
            height: 100%;
        }

        /* ══════════════════════════════════════════════════════════════
           "Versatile Range of Kiosk" — Turning marquee (matches homepage)
           Base rt-turning-* classes live in webflow-global.css; the
           following overrides mirror Home.css so the section renders
           identically on the Kiosks page (which does not load Home.css).
           Track uses a percentage-based keyframe so the loop is seamless
           regardless of item count (renders 3 copies of 7 items).
           ══════════════════════════════════════════════════════════════ */
        .rt-turning {
            padding-top: 7.5rem;
            background-color: #f5f9fa;
            padding-bottom: 7.5rem;
        }

        .rt-turning-marquee {
            padding-top: 1.5rem;
            padding-bottom: 2.5rem;
            display: flex;
            overflow: hidden;
            animation: none !important;
            transform: none !important;
        }

        .rt-turning-top {
            grid-column-gap: 1.875rem;
            grid-row-gap: 1.875rem;
            justify-content: space-between;
            align-items: flex-start;
            padding-bottom: 5rem;
            display: flex;
        }

        .rt-turning-top-left {
            flex: 1;
            max-width: 529px;
        }

        .rt-turning-top-right {
            flex: 1;
            max-width: 461px;
        }

        /* Exact set distance: 7 items × (22rem card + 2rem gap) = 168rem.
           Percentage-based translate is off by one trailing gap because the
           track has 21 items but only 20 gaps, causing a slow drift. */
        @keyframes kiosk-turning-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-168rem); }
        }

        .rt-turning-marquee-track {
            display: flex;
            flex: none;
            align-items: flex-start;
            gap: 2rem;
            animation: kiosk-turning-scroll 45s linear infinite;
            will-change: transform;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            touch-action: pan-y;
        }

        .rt-turning-marquee-track:hover {
            animation-play-state: paused;
        }

        .rt-turning-marquee-track.is-dragging {
            cursor: grabbing;
        }

        /* Home-page-style card: white outer frame (padding creates the border),
           image + dark overlay inside. On hover: overlay + image fade to white
           and text switches to dark — same behavior as the home marquee. */
        .rt-turning-marquee-item {
            background-color: #fff;
            flex: none;
            width: 22rem;
            padding: 1.5rem;
            box-shadow: 0 4px 43px rgba(0, 0, 0, 0.08);
        }

        /* Alternating stagger: rt-2 items shift down to create the zigzag rhythm (mirrors homepage) */
        .rt-turning-marquee-item.rt-2 {
            margin-top: clamp(1.5rem, 4vw, 4.375rem);
        }

        .rt-turning-marquee-item-inner {
            flex-flow: column;
            justify-content: space-between;
            min-height: clamp(440px, 58vh, 620px);
            padding: clamp(16px, 2.5vw, 30px);
            display: flex;
            position: relative;
            overflow: hidden;
            transition: background-color 0.4s ease;
        }

        .rt-turning-marquee-bg-image {
            position: absolute;
            inset: 0%;
            transition: opacity 0.45s ease;
        }

        .rt-turning-marquee-bg-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        /* Dark scrim over the image so the white title reads in the default state */
        .rt-turning-marquee-item-overlay {
            z-index: 1;
            background-image: linear-gradient(180deg,
                rgba(20, 33, 61, 0.15) 0%,
                rgba(20, 33, 61, 0.35) 55%,
                rgba(15, 23, 42, 0.80) 100%);
            position: absolute;
            inset: 0%;
            transition: opacity 0.45s ease;
            pointer-events: none;
        }

        /* Full-height content column: image grows to fill the card, text sits
           at the bottom. In the default state the image is transparent so the
           dark background photo shows through; on hover the background fades
           and the inline image becomes the hero of the white card. */
        .rt-turning-marquee-item-content {
            z-index: 2;
            position: absolute;
            inset: 0;
            /* Tighter padding so the inline image has more room to breathe */
            padding: clamp(10px, 1.5vw, 18px) clamp(12px, 1.8vw, 22px) clamp(16px, 2.2vw, 26px);
            grid-column-gap: clamp(10px, 2vw, 16px);
            grid-row-gap: clamp(10px, 2vw, 16px);
            flex-flow: column;
            display: flex;
        }

        .rt-turning-marquee-item-image {
            flex: 1 1 auto;
            min-height: 78%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 0;
            transform: scale(0.94);
            transition: opacity 0.4s ease, transform 0.5s ease;
        }

        .rt-turning-marquee-item-image img {
            width: 108%;
            height: 108%;
            max-height: 108%;
            object-fit: contain;
            display: block;
        }

        .rt-turning-marquee-item:hover .rt-turning-marquee-item-image {
            opacity: 1;
            transform: scale(1.08);
        }

        .rt-turning-marquee-item-text {
            flex: 0 0 auto;
        }

        .rt-turning-marquee-item-text {
            z-index: 4;
            position: relative;
        }

        .rt-turning-marquee-item-text h5 {
            color: #fff !important;
            margin: 0 0 0.5rem !important;
            transition: color 0.4s ease;
        }

        /* Description hidden by default, revealed on hover — matches the
           home-page "text-on-hover" reveal pattern. */
        .rt-turning-marquee-item-text p {
            color: var(--slate-gray, #64748b) !important;
            margin: 0 !important;
            font-size: 0.95rem;
            line-height: 1.5;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.45s ease, opacity 0.35s ease, color 0.4s ease;
        }

        /* Hover: fade the image + scrim to reveal the white card, switch
           heading to dark, and expand the description block. */
        .rt-turning-marquee-item:hover .rt-turning-marquee-item-inner {
            background-color: #fff;
        }

        .rt-turning-marquee-item:hover .rt-turning-marquee-bg-image {
            opacity: 0;
        }

        .rt-turning-marquee-item:hover .rt-turning-marquee-item-overlay {
            opacity: 0;
        }

        .rt-turning-marquee-item:hover .rt-turning-marquee-item-text h5 {
            color: var(--prussian-blue, #0f172a) !important;
        }

        .rt-turning-marquee-item:hover .rt-turning-marquee-item-text p {
            max-height: 12rem;
            opacity: 1;
        }

        /* ══════════════════════════════════════════════════════════════
           Kiosks video-v4 — play/pause pond ripple
           Ripples live INSIDE the button so they're centered on the
           actual button (not the flex wrapper), and pulse continuously
           regardless of play/pause state.
           ══════════════════════════════════════════════════════════════ */
        .kbv-play-wrap {
            pointer-events: auto;
        }

        .kbv-play-btn {
            position: relative;
            overflow: visible;
            cursor: pointer;
        }

        /* Keep the icon glyphs above the ripples */
        .kbv-play-btn .rt-video-v4-icon-wrapper {
            position: relative;
            z-index: 2;
        }

        .kbv-ripple {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            /* Broader "tide": wide bright band with heavy feathering on both sides
               so the wave reads as thick water rather than a hairline ring. */
            background: radial-gradient(circle,
                rgba(255, 255, 255, 0)      28%,
                rgba(255, 255, 255, 0.10)   42%,
                rgba(255, 255, 255, 0.28)   56%,
                rgba(255, 255, 255, 0.42)   68%,
                rgba(255, 255, 255, 0.28)   80%,
                rgba(255, 255, 255, 0.10)   92%,
                rgba(255, 255, 255, 0)     100%);
            /* Softer diffusion so the outer edge feels dragged, not stamped */
            box-shadow: 0 0 34px rgba(255, 255, 255, 0.22);
            filter: blur(1.2px);
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, -50%) scale(0.5);
            /* Slower, ease-out — fast crest, long trailing drag */
            animation: kbvPondRipple 5.4s cubic-bezier(0.15, 0.55, 0.35, 1) infinite;
            z-index: 1;
        }

        .kbv-ripple-1 { animation-delay: 0s; }
        .kbv-ripple-2 { animation-delay: 1.8s; }
        .kbv-ripple-3 { animation-delay: 3.6s; }

        @keyframes kbvPondRipple {
            0%   { transform: translate(-50%, -50%) scale(0.5);  opacity: 0; }
            10%  { opacity: 0.95; }
            35%  { opacity: 0.75; }
            75%  { opacity: 0.35; }
            100% { transform: translate(-50%, -50%) scale(2.9);  opacity: 0; }
        }

        /* ── Section rhythm: give the video-v4 block breathing room
             so it doesn't butt up against the sections above/below. ── */
        .rt-video-v4 {
            padding-top: var(--_padding---section-gap-image, 7.5rem);
            /* margin-top: 3.75rem;
            margin-bottom: 3.75rem; */
        }

        @media (max-width: 991px) {
            .rt-video-v4 {
                padding-top: 5rem;
                margin-top: 2.5rem;
                margin-bottom: 2.5rem;
            }
        }

        @media (max-width: 767px) {
            .rt-video-v4 {
                padding-top: 3.5rem;
                margin-top: 1.5rem;
                margin-bottom: 1.5rem;
            }
        }
        .rt-progress-v1{
    padding-bottom: 6rem;
        }