/*
 * DDC Revenue Signs Story — V3
 *
 * IMPORTANT:
 * This component deliberately does NOT use horizontal transforms for the
 * sign content or image. The whole composition remains fixed in the viewport.
 * Scrolling only changes the active sign and swaps the content/image.
 */

.ddc-rss--v3,
.ddc-rss--v3 *,
.ddc-rss--v3 *::before,
.ddc-rss--v3 *::after {
    box-sizing: border-box !important;
}

.ddc-rss--v3 {
    --ddc-blue: #294B9B;
    --ddc-orange: #FF6700;
    --ddc-muted: #707070;
    --ddc-line: #D8DFEC;

    position: relative !important;
    width: 100% !important;
    height: 300vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #111111 !important;

    isolation: isolate !important;
    z-index: 1 !important;
}

/* =========================================================
   THE ONLY ELEMENT THAT STICKS
   Header + content + image + arc are all inside this.
   ========================================================= */

.ddc-rss--v3 .ddc-rss__sticky {
    position: sticky !important;
    top: 0 !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 680px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    background: #ffffff !important;
    z-index: 2 !important;
}

.ddc-rss--v3 .ddc-rss__viewport {
    position: relative !important;

    width: min(100%, 1440px) !important;
    height: 100% !important;

    margin: 0 auto !important;
    padding:
        clamp(42px, 5.2vh, 72px)
        clamp(32px, 5.4vw, 78px)
        0 !important;

    overflow: hidden !important;
}

/* =========================================================
   HEADER — FIXED WITH THE STORY
   ========================================================= */

.ddc-rss--v3 .ddc-rss__header {
    position: relative !important;

    width: min(100%, 900px) !important;
    margin: 0 auto !important;

    text-align: center !important;
    z-index: 10 !important;
}

.ddc-rss--v3 .ddc-rss__title,
.ddc-rss--v3 .ddc-rss__header h2 {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(38px, 3.55vw, 52px) !important;
    line-height: .99 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;

    color: #000000 !important;
}

.ddc-rss--v3 .ddc-rss__subtitle,
.ddc-rss--v3 .ddc-rss__header p {
    width: min(100%, 820px) !important;

    margin: clamp(20px, 2.1vh, 28px) auto 0 !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.52 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;

    color: #111111 !important;
}

/* =========================================================
   STORY STAGE
   Everything below header remains in exactly the same
   viewport position during the 3-sign sequence.
   ========================================================= */

.ddc-rss--v3 .ddc-rss__stage {
    position: relative !important;

    width: 100% !important;
    max-width: 1100px !important;

    height: clamp(470px, 57vh, 560px) !important;

    margin: clamp(34px, 5.1vh, 58px) auto 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr) !important;
    align-items: center !important;
    column-gap: clamp(35px, 4.5vw, 75px) !important;

    z-index: 5 !important;
}

/* =========================================================
   TEXT
   ========================================================= */

.ddc-rss--v3 .ddc-rss__content {
    position: relative !important;

    width: 100% !important;
    max-width: 650px !important;

    margin: 0 !important;
    padding: 0 0 112px !important;

    opacity: 1 !important;
    transform: none !important;

    transition: opacity .28s ease !important;

    z-index: 7 !important;
}

.ddc-rss--v3 .ddc-rss__content:not(.is-visible) {
    opacity: 0 !important;
}

.ddc-rss--v3 .ddc-rss__sign-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    min-height: 34px !important;

    margin: 0 0 20px !important;
    padding: 6px 12px !important;

    border: 1px solid #C9D3E6 !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    color: var(--ddc-blue) !important;
}

.ddc-rss--v3 .ddc-rss__sign-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;

    border-radius: 50% !important;
    background: var(--ddc-orange) !important;
}

.ddc-rss--v3 .ddc-rss__sign-title,
.ddc-rss--v3 .ddc-rss__content h3 {
    width: min(100%, 610px) !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(34px, 3.05vw, 44px) !important;
    line-height: 1.03 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    color: var(--ddc-blue) !important;
}

.ddc-rss--v3 .ddc-rss__description,
.ddc-rss--v3 .ddc-rss__content > p {
    width: min(100%, 650px) !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(16px, 1.22vw, 18px) !important;
    line-height: 1.58 !important;
    font-weight: 400 !important;

    color: #111111 !important;
}

.ddc-rss--v3 .ddc-rss__organization {
    margin: 27px 0 0 !important;
    padding: 0 !important;
}

.ddc-rss--v3 .ddc-rss__organization p {
    margin: 0 0 9px !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(15px, 1.08vw, 16px) !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;

    color: #707070 !important;
}

.ddc-rss--v3 .ddc-rss__organization ul {
    margin: 0 !important;
    padding: 0 0 0 22px !important;
}

.ddc-rss--v3 .ddc-rss__organization li {
    margin: 0 0 7px !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(15px, 1.08vw, 16px) !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;

    color: #707070 !important;
}

.ddc-rss--v3 .ddc-rss__organization li::marker {
    color: var(--ddc-blue) !important;
}

.ddc-rss--v3 .ddc-rss__result {
    margin: 26px 0 0 !important;
    padding: 0 !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: clamp(15px, 1.08vw, 16px) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    color: var(--ddc-blue) !important;
}

/* =========================================================
   IMAGE
   ========================================================= */

.ddc-rss--v3 .ddc-rss__image-wrap {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 0 90px !important;

    z-index: 6 !important;
}

.ddc-rss--v3 .ddc-rss__image-wrap img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: min(100%, 500px) !important;
    max-height: 390px !important;

    object-fit: contain !important;

    opacity: 1 !important;
    transform: none !important;

    transition: opacity .28s ease !important;
}

.ddc-rss--v3 .ddc-rss__image-wrap img:not(.is-visible) {
    opacity: 0 !important;
}

/* =========================================================
   ARC
   IMPORTANT: The arc is a visual layer BELOW the story
   content, never a scrolling element and never a source
   of document height.
   ========================================================= */

.ddc-rss--v3 .ddc-rss__arc {
    position: absolute !important;

    left: 50% !important;
    bottom: -66px !important;

    width: min(920px, 82vw) !important;
    height: 220px !important;

    transform: translateX(-50%) !important;

    pointer-events: none !important;

    z-index: 3 !important;
}

.ddc-rss--v3 .ddc-rss__arc-line {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border: 1.5px solid var(--ddc-line) !important;
    border-bottom: 0 !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;

    background: transparent !important;

    pointer-events: none !important;
}

.ddc-rss--v3 .ddc-rss__active-dot {
    position: absolute !important;

    left: 16% !important;
    bottom: 62px !important;

    width: 14px !important;
    height: 14px !important;

    transform: translateX(-50%) !important;

    border: 2px solid var(--ddc-orange) !important;
    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow: 0 0 0 1px rgba(255, 103, 0, .05) !important;

    transition: left .35s cubic-bezier(.22,.61,.36,1) !important;

    z-index: 6 !important;
}

.ddc-rss--v3 .ddc-rss__active-dot::after {
    content: "" !important;

    position: absolute !important;
    inset: 3px !important;

    border-radius: 50% !important;
    background: var(--ddc-orange) !important;
}

.ddc-rss--v3 .ddc-rss__marker {
    position: absolute !important;

    bottom: 43px !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    font-family: "Figtree", Arial, sans-serif !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    color: #C5CDDB !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    transition: color .25s ease, font-weight .25s ease !important;
}

.ddc-rss--v3 .ddc-rss__marker:hover,
.ddc-rss--v3 .ddc-rss__marker:focus {
    color: var(--ddc-blue) !important;
}

.ddc-rss--v3 .ddc-rss__marker.is-active {
    color: #111111 !important;
    font-weight: 700 !important;
}

.ddc-rss--v3 .ddc-rss__marker--1 {
    left: 16% !important;
    transform: translateX(-50%) !important;
}

.ddc-rss--v3 .ddc-rss__marker--2 {
    left: 50% !important;
    bottom: 151px !important;
    transform: translateX(-50%) !important;
}

.ddc-rss--v3 .ddc-rss__marker--3 {
    left: 84% !important;
    transform: translateX(-50%) !important;
}

/* Invisible scroll driver is intentionally empty.
 * The section's 300vh height is the driver. */
.ddc-rss--v3 .ddc-rss__scroll-driver {
    display: none !important;
}

.ddc-rss--v3 .ddc-rss__data {
    display: none !important;
}

/* =========================================================
   ELEMENTOR OVERRIDES
   ========================================================= */

.ddc-rss--v3 .elementor-widget,
.ddc-rss--v3 .elementor-widget-container,
.ddc-rss--v3 .elementor-heading-title,
.ddc-rss--v3 p,
.ddc-rss--v3 h1,
.ddc-rss--v3 h2,
.ddc-rss--v3 h3,
.ddc-rss--v3 h4,
.ddc-rss--v3 h5,
.ddc-rss--v3 h6,
.ddc-rss--v3 ul,
.ddc-rss--v3 ol,
.ddc-rss--v3 li {
    box-sizing: border-box !important;
}

.ddc-rss--v3 .elementor-heading-title {
    margin: 0 !important;
}

.ddc-rss--v3 p {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.ddc-rss--v3 img {
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) and (min-width: 768px) {
    .ddc-rss--v3 .ddc-rss__viewport {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }

    .ddc-rss--v3 .ddc-rss__stage {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, .85fr) !important;
        column-gap: 35px !important;
    }

    .ddc-rss--v3 .ddc-rss__sign-title,
    .ddc-rss--v3 .ddc-rss__content h3 {
        font-size: 35px !important;
    }

    .ddc-rss--v3 .ddc-rss__image-wrap img {
        max-width: 390px !important;
        max-height: 330px !important;
    }

    .ddc-rss--v3 .ddc-rss__arc {
        width: 82vw !important;
    }
}

/* =========================================================
   MOBILE
   Do not force a desktop sticky composition on phones.
   ========================================================= */

@media (max-width: 767px) {
    .ddc-rss--v3 {
        height: auto !important;
        min-height: 0 !important;
        padding: 50px 18px 70px !important;
        overflow: visible !important;
    }

    .ddc-rss--v3 .ddc-rss__sticky {
        position: relative !important;
        top: auto !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }

    .ddc-rss--v3 .ddc-rss__viewport {
        width: 100% !important;
        height: auto !important;

        padding: 0 !important;
        overflow: visible !important;
    }

    .ddc-rss--v3 .ddc-rss__header {
        width: 100% !important;
    }

    .ddc-rss--v3 .ddc-rss__title,
    .ddc-rss--v3 .ddc-rss__header h2 {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    .ddc-rss--v3 .ddc-rss__subtitle,
    .ddc-rss--v3 .ddc-rss__header p {
        margin-top: 16px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .ddc-rss--v3 .ddc-rss__stage {
        height: auto !important;

        margin-top: 38px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 28px !important;
    }

    .ddc-rss--v3 .ddc-rss__content {
        max-width: none !important;
        padding-bottom: 0 !important;
        order: 2 !important;
    }

    .ddc-rss--v3 .ddc-rss__image-wrap {
        height: auto !important;
        padding: 0 !important;
        order: 1 !important;
    }

    .ddc-rss--v3 .ddc-rss__image-wrap img {
        width: 100% !important;
        max-width: 500px !important;
        max-height: none !important;
        margin: 0 auto !important;
    }

    .ddc-rss--v3 .ddc-rss__sign-title,
    .ddc-rss--v3 .ddc-rss__content h3 {
        font-size: 30px !important;
        line-height: 1.08 !important;
    }

    .ddc-rss--v3 .ddc-rss__description,
    .ddc-rss--v3 .ddc-rss__organization p,
    .ddc-rss--v3 .ddc-rss__organization li,
    .ddc-rss--v3 .ddc-rss__result {
        font-size: 15px !important;
        line-height: 1.52 !important;
    }

    .ddc-rss--v3 .ddc-rss__arc {
        position: relative !important;

        left: auto !important;
        bottom: auto !important;
        transform: none !important;

        width: 100% !important;
        height: 105px !important;

        margin: 45px auto 0 !important;
    }

    .ddc-rss--v3 .ddc-rss__marker {
        font-size: 17px !important;
        bottom: 20px !important;
    }

    .ddc-rss--v3 .ddc-rss__marker--2 {
        bottom: 65px !important;
    }

    .ddc-rss--v3 .ddc-rss__active-dot {
        bottom: 31px !important;
        width: 12px !important;
        height: 12px !important;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ddc-rss--v3 .ddc-rss__content,
    .ddc-rss--v3 .ddc-rss__image-wrap img,
    .ddc-rss--v3 .ddc-rss__active-dot,
    .ddc-rss--v3 .ddc-rss__marker {
        transition: none !important;
    }
}