/* ==========================================================
   REVISI DESIGN SYSTEM
   PERMANENT SUPPORT PAGE
========================================================== */


/* ==========================================================
   ACTIVE NAVIGATION
========================================================== */

.rv-menu a[aria-current="page"],
.rv-mobile-menu a[aria-current="page"] {

    color:
        var(--color-primary);

}


.rv-menu a[aria-current="page"]::after,
.rv-mobile-menu a[aria-current="page"]::after {

    opacity:
        1;

    transform:
        scaleX(1);

}


/* ==========================================================
   ORGANIC WAVES
========================================================== */

.rv-support-organic-wave {

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        100%;

    height:
        clamp(
            150px,
            18vw,
            260px
        );

    display:
        block;

    pointer-events:
        none;

    z-index:
        0;

}


.rv-support-hero-wave path {

    fill:
        var(--color-dark);

}


.rv-support-packages-wave path {

    fill:
        var(--color-light);

}


/* ==========================================================
   HERO
========================================================== */

.rv-support-hero {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    padding-top:
        clamp(
            9rem,
            15vh,
            12rem
        );

    padding-bottom:
        clamp(
            10rem,
            18vw,
            15rem
        );

    background:
        var(--color-light);

    overflow:
        hidden;

    isolation:
        isolate;

}


.rv-support-hero::after {

    content:
        "";

    position:
        absolute;

    top:
        -15%;

    right:
        -32%;

    width:
        78vw;

    height:
        130%;

    max-width:
        1150px;

    background:
        var(--color-accent);

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        -1;

}


.rv-support-hero-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(10, 12, 12, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(10, 12, 12, .045) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events:
        none;

    z-index:
        1;

}


.rv-support-hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, .85fr);

    align-items:
        center;

    gap:
        clamp(
            4rem,
            8vw,
            9rem
        );

}


.rv-support-hero-copy {

    max-width:
        900px;

}


.rv-support-hero-title {

    max-width:
        17ch;

    margin:
        0;

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-h2);

    line-height:
        var(--lh-tight);

    letter-spacing:
        var(--ls-heading);

    color:
        var(--color-dark);

}


.rv-support-hero-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-support-hero-description {

    max-width:
        var(--text-width-md);

    margin-top:
        var(--space-6);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-lg);

    font-weight:
        var(--font-medium);

    line-height:
        var(--lh-body);

    color:
        var(--color-dark);

}


.rv-support-hero-cta {

    margin-top:
        var(--space-6);

}

.rv-support-hero-cta .rv-btn-icon svg {

    transform:
        rotate(-135deg);

}


.rv-support-hero-cta:hover .rv-btn-icon svg {

    transform:
        rotate(-0deg);

}


/* ==========================================================
   HERO FLOW VISUAL
========================================================== */

.rv-support-hero-visual {

    position:
        relative;

    min-height:
        420px;

}


.rv-support-flow-card {

    position:
        absolute;

    left:
        50%;

    width:
        min(
            100%,
            430px
        );

    min-height:
        112px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        var(--space-5);

    padding:
        var(--space-6)
        var(--space-8);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-lg);

}


.rv-support-flow-card-request {

    top:
        0;

    transform:
        translateX(-58%)
        rotate(-5deg);

    background:
        var(--color-light);

    color:
        var(--color-dark);

    z-index:
        1;

}


.rv-support-flow-card-project {

    top:
        132px;

    transform:
        translateX(-42%)
        rotate(4deg);

    background:
        var(--color-accent);

    color:
        var(--color-dark);

    z-index:
        2;

}


.rv-support-flow-card-ready {

    top:
        264px;

    transform:
        translateX(-54%)
        rotate(-2deg);

    background:
        var(--color-dark);

    color:
        var(--color-light);

    z-index:
        3;

}


.rv-support-flow-index {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    color:
        currentColor;

    opacity:
        .65;

}


.rv-support-flow-label {

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-h4);

    line-height:
        var(--lh-tight);

    color:
        currentColor;

}


.rv-support-flow-mark {

    width:
        var(--space-8);

    height:
        var(--space-8);

    border-radius:
        50%;

    background:
        var(--color-accent);

}


.rv-support-flow-card-project
.rv-support-flow-mark {

    background:
        var(--color-light);

}


.rv-support-flow-card-ready svg {

    width:
        var(--space-8);

    height:
        var(--space-8);

    color:
        var(--color-accent);

}


/* ==========================================================
   INTRO
========================================================== */

.rv-support-intro {

    position:
        relative;

    padding-top:
        var(--space-32);

    padding-bottom:
        var(--section-padding);

    background:
        var(--color-dark);

    color:
        var(--color-light);

}


.rv-support-intro-content {

    position:
        relative;

    z-index:
        1;

}


.rv-support-intro-header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .7fr);

    align-items:
        end;

    gap:
        var(--space-16);

    padding-bottom:
        var(--space-20);

}


.rv-support-intro-title {

    max-width:
        14ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-light);

}


.rv-support-intro-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-support-intro-description {

    max-width:
        var(--text-width-md);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted);

}


.rv-support-value-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(248, 248, 248, .14);

    border-bottom:
        1px solid
        rgba(248, 248, 248, .14);

}


.rv-support-value-item {

    min-width:
        0;

    padding:
        var(--space-10);

    border-right:
        1px solid
        rgba(248, 248, 248, .14);

}


.rv-support-value-item:first-child {

    padding-left:
        0;

}


.rv-support-value-item:last-child {

    padding-right:
        0;

    border-right:
        0;

}


.rv-support-value-number {

    display:
        block;

    margin-bottom:
        var(--space-12);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    color:
        var(--color-accent);

}


.rv-support-value-item h3 {

    max-width:
        18ch;

    font-family:
        var(--font-body);

    font-size:
        var(--fs-xl);

    font-weight:
        var(--font-semibold);

    line-height:
        1.25;

    color:
        var(--color-light);

}


.rv-support-value-item p {

    max-width:
        34ch;

    margin-top:
        var(--space-4);

    font-size:
        var(--fs-sm);

    color:
        var(--color-muted);

}


/* ==========================================================
   PACKAGES
========================================================== */

.rv-support-packages {

    position:
        relative;

    padding-top:
        var(--section-padding);

    padding-bottom:
        clamp(
            13rem,
            23vw,
            21rem
        );

    background:
        var(--color-dark);

    color:
        var(--color-light);

    overflow:
        hidden;

    scroll-margin-top:
        clamp(
            7rem,
            10vw,
            9rem
        );

}


.rv-support-packages-content {

    position:
        relative;

    z-index:
        1;

}


.rv-support-packages-header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .65fr);

    align-items:
        end;

    gap:
        var(--space-16);

    padding-bottom:
        var(--space-16);

}


.rv-support-packages-title {

    max-width:
        14ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-light);

}


.rv-support-packages-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-support-packages-description {

    max-width:
        var(--text-width-sm);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted);

}


.rv-support-package-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-6);

}


.rv-support-package-card {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    background:
        rgba(248, 248, 248, .055);

    border:
        1px solid
        rgba(248, 248, 248, .16);

    border-radius:
        var(--radius-lg);

    color:
        var(--color-light);

    transition:
        transform var(--transition-premium),
        background var(--transition-normal),
        border-color var(--transition-normal);

}


.rv-support-package-card:hover {

    transform:
        translateY(-6px);

    background:
        rgba(248, 248, 248, .08);

    border-color:
        rgba(248, 248, 248, .28);

}


.rv-support-package-featured {

    background:
        var(--color-accent);

    border-color:
        var(--color-accent);

    color:
        var(--color-dark);

}


.rv-support-package-featured:hover {

    background:
        var(--color-accent);

    border-color:
        var(--color-accent);

}


.rv-support-package-custom {

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

}


.rv-support-package-custom:hover {

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

}


.rv-support-package-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-12);

}


.rv-support-package-label {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        var(--space-8);

    padding-inline:
        var(--space-4);

    border:
        1px solid
        currentColor;

    border-radius:
        var(--radius-round);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    line-height:
        1;

    text-transform:
        uppercase;

    color:
        currentColor;

}


.rv-support-package-number {

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    color:
        currentColor;

    opacity:
        .65;

}


.rv-support-package-name {

    margin:
        0;

    font-size:
        var(--fs-h3);

    line-height:
        var(--lh-tight);

    color:
        currentColor;

}


.rv-support-package-hours {

    margin-top:
        var(--space-8);

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-h2);

    line-height:
        var(--lh-tight);

    color:
        currentColor;

}


.rv-support-package-hours span {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-semibold);

}


.rv-support-package-bonus {

    width:
        max-content;

    margin-top:
        var(--space-3);

    padding:
        var(--space-2)
        var(--space-4);

    border-radius:
        var(--radius-round);

    background:
        var(--color-accent);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-bold);

    line-height:
        1.4;

    text-transform:
        uppercase;

    color:
        var(--color-dark);

}


.rv-support-package-featured
.rv-support-package-bonus {

    background:
        var(--color-dark);

    color:
        var(--color-light);

}


.rv-support-package-custom
.rv-support-package-bonus {

    background:
        var(--color-light);

    color:
        var(--color-dark);

}


.rv-support-package-price {

    margin-top:
        var(--space-8);

    font-size:
        var(--fs-xl);

    font-weight:
        var(--font-semibold);

    line-height:
        1.3;

    color:
        currentColor;

}


.rv-support-package-price span {

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-medium);

    opacity:
        .7;

}


.rv-support-package-description {

    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-5);

    margin-bottom:
        var(--space-8);

    font-size:
        var(--fs-sm);

    color:
        currentColor;

    opacity:
        .72;

}


.rv-support-package-button {

    width:
        100%;

    margin-top:
        auto;

}


.rv-support-package-featured
.rv-support-package-button {

    background:
        var(--color-dark);

    color:
        var(--color-light);

    border-color:
        var(--color-dark);

}


.rv-support-package-featured
.rv-support-package-button:hover {

    background:
        var(--color-primary);

    color:
        var(--color-light);

    border-color:
        var(--color-primary);

}


.rv-support-package-custom
.rv-support-package-button {

    background:
        var(--color-light);

    color:
        var(--color-dark);

    border-color:
        var(--color-light);

}


.rv-support-package-custom
.rv-support-package-button:hover {

    background:
        var(--color-accent);

    color:
        var(--color-dark);

    border-color:
        var(--color-accent);

}


/* ==========================================================
   INCLUDED
========================================================== */

.rv-support-included {

    display:
        grid;

    grid-template-columns:
        minmax(280px, .65fr)
        minmax(0, 1.35fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    margin-top:
        var(--space-16);

    padding-top:
        var(--space-16);

    border-top:
        1px solid
        rgba(248, 248, 248, .16);

}


.rv-support-included-heading > span {

    display:
        block;

    margin-bottom:
        var(--space-4);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    text-transform:
        uppercase;

    color:
        var(--color-accent);

}


.rv-support-included-heading h3 {

    max-width:
        12ch;

    font-size:
        var(--fs-h3);

    color:
        var(--color-light);

}


.rv-support-included-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.rv-support-included-list li {

    display:
        grid;

    grid-template-columns:
        var(--space-10)
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-4);

    padding-block:
        var(--space-5);

    border-bottom:
        1px solid
        rgba(248, 248, 248, .14);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-semibold);

    color:
        var(--color-light);

}


.rv-support-included-list li:first-child {

    padding-top:
        0;

}


.rv-support-included-list li:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


.rv-support-included-list li span {

    font-size:
        var(--fs-xs);

    color:
        var(--color-accent);

}


/* ==========================================================
   PROCESS
========================================================== */

.rv-support-process {

    padding-top:
        var(--space-32);

    padding-bottom:
        var(--section-padding);

    background:
        var(--color-light);

}


.rv-support-process-header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .65fr);

    align-items:
        end;

    gap:
        var(--space-16);

    padding-bottom:
        var(--space-20);

}


.rv-support-process-title {

    max-width:
        13ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-dark);

}


.rv-support-process-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-support-process-description {

    max-width:
        var(--text-width-sm);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted-alpha);

}


.rv-support-process-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    border-top:
        1px solid
        rgba(10, 12, 12, .14);

}


.rv-support-process-item {

    display:
        grid;

    grid-template-columns:
        minmax(150px, .3fr)
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-8);

    padding-block:
        var(--space-10);

    border-bottom:
        1px solid
        rgba(10, 12, 12, .14);

}


.rv-support-process-number {

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-h3);

    line-height:
        1;

    color:
        var(--color-primary);

}


.rv-support-process-item > div {

    display:
        grid;

    grid-template-columns:
        minmax(240px, .7fr)
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-8);

}


.rv-support-process-item h3 {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-xl);

    font-weight:
        var(--font-semibold);

    line-height:
        1.25;

    color:
        var(--color-dark);

}


.rv-support-process-item p {

    max-width:
        var(--text-width-sm);

    font-size:
        var(--fs-sm);

    color:
        var(--color-muted-alpha);

}


/* ==========================================================
   SCOPE
========================================================== */

.rv-support-scope {

    padding-block:
        var(--section-padding);

    background:
        var(--color-accent);

}


.rv-support-scope-content {

    display:
        grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(420px, 1.15fr);

    align-items:
        center;

    gap:
        clamp(
            4rem,
            9vw,
            10rem
        );

}


.rv-support-scope-title {

    max-width:
        13ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-dark);

}


.rv-support-scope-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-support-scope-description {

    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-6);

    margin-bottom:
        var(--space-8);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-dark);

}


.rv-support-scope-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    border-top:
        1px solid
        rgba(10, 12, 12, .18);

}


.rv-support-scope-list li {

    display:
        grid;

    grid-template-columns:
        var(--space-12)
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-4);

    padding-block:
        var(--space-5);

    border-bottom:
        1px solid
        rgba(10, 12, 12, .18);

    font-size:
        var(--fs-lg);

    font-weight:
        var(--font-semibold);

    color:
        var(--color-dark);

}


.rv-support-scope-list li span {

    font-size:
        var(--fs-xs);

    color:
        var(--color-primary);

}


/* ==========================================================
   FINAL CTA
========================================================== */

.rv-support-cta {

    padding-block:
        clamp(
            5rem,
            9vw,
            8rem
        );

    background:
        var(--color-primary);

    color:
        var(--color-light);

    overflow:
        hidden;

}


.rv-support-cta-content {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, .9fr);

    align-items:
        center;

    gap:
        clamp(
            4rem,
            9vw,
            10rem
        );

}


.rv-support-cta-title {

    max-width:
        15ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-light);

}


.rv-support-cta-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-support-cta-description {

    max-width:
        var(--text-width-md);

    margin-top:
        var(--space-6);

    margin-bottom:
        var(--space-8);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-light);

}


.rv-support-cta-art {

    width:
        min(
            100%,
            560px
        );

    margin-inline:
        auto;

}


.rv-support-cta-art svg {

    width:
        100%;

    height:
        auto;

    overflow:
        visible;

}


.rv-support-art-sheet-back {

    fill:
        var(--color-dark);

}


.rv-support-art-sheet-front {

    fill:
        var(--color-light);

}


.rv-support-art-line-one {

    fill:
        var(--color-dark);

}


.rv-support-art-line-two,
.rv-support-art-line-three {

    fill:
        var(--color-muted);

}


.rv-support-art-badge {

    fill:
        var(--color-accent);

}


.rv-support-art-check {

    color:
        var(--color-dark);

}


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

@media (max-width: 1180px) {

    .rv-support-hero-content {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, .75fr);

        gap:
            var(--space-12);

    }


    .rv-support-flow-card {

        width:
            min(
                100%,
                370px
            );

    }


    .rv-support-scope-content,
    .rv-support-cta-content {

        gap:
            var(--space-16);

    }

}


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

@media (max-width: 1024px) {

    .rv-support-hero {

        min-height:
            auto;

        padding-top:
            clamp(
                9rem,
                16vw,
                11rem
            );

        padding-bottom:
            clamp(
                11rem,
                22vw,
                15rem
            );

    }


    .rv-support-hero::after {

        top:
            -12%;

        right:
            -47%;

        width:
            105vw;

        height:
            125%;

    }


    .rv-support-hero-content {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-support-hero-copy {

        max-width:
            760px;

    }


    .rv-support-hero-visual {

        width:
            min(
                100%,
                640px
            );

        min-height:
            370px;

        margin-inline:
            auto;

    }


    .rv-support-flow-card {

        width:
            min(
                88%,
                430px
            );

        min-height:
            100px;

    }


    .rv-support-flow-card-request {

        transform:
            translateX(-60%)
            rotate(-4deg);

    }


    .rv-support-flow-card-project {

        top:
            116px;

        transform:
            translateX(-40%)
            rotate(3deg);

    }


    .rv-support-flow-card-ready {

        top:
            232px;

        transform:
            translateX(-55%)
            rotate(-2deg);

    }


    .rv-support-intro-header,
    .rv-support-packages-header,
    .rv-support-process-header {

        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            var(--space-6);

    }


    .rv-support-intro-title,
    .rv-support-packages-title,
    .rv-support-process-title {

        max-width:
            16ch;

    }


    .rv-support-value-grid {

        grid-template-columns:
            1fr;

    }


    .rv-support-value-item,
    .rv-support-value-item:first-child,
    .rv-support-value-item:last-child {

        padding:
            var(--space-8)
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(248, 248, 248, .14);

    }


    .rv-support-value-item:last-child {

        border-bottom:
            0;

    }


    .rv-support-value-number {

        margin-bottom:
            var(--space-6);

    }


    .rv-support-value-item h3,
    .rv-support-value-item p {

        max-width:
            var(--text-width-md);

    }


    .rv-support-included {

        grid-template-columns:
            1fr;

        gap:
            var(--space-10);

    }


    .rv-support-included-heading h3 {

        max-width:
            16ch;

    }


    .rv-support-process-item {

        grid-template-columns:
            minmax(100px, .2fr)
            minmax(0, 1fr);

    }


    .rv-support-process-item > div {

        grid-template-columns:
            1fr;

        gap:
            var(--space-3);

    }


    .rv-support-scope-content,
    .rv-support-cta-content {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-support-scope-copy,
    .rv-support-cta-copy {

        max-width:
            760px;

    }


    .rv-support-cta-art {

        width:
            min(
                72%,
                500px
            );

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .rv-support-organic-wave {

        height:
            clamp(
                105px,
                27vw,
                170px
            );

    }


    .rv-support-hero {

        min-height:
            100svh;

        align-items:
            flex-start;

        padding-top:
            clamp(
                8.5rem,
                27vw,
                10rem
            );

        padding-bottom:
            clamp(
                8rem,
                28vw,
                11rem
            );

    }


    .rv-support-hero::after {

        top:
            -10%;

        right:
            -95%;

        width:
            190vw;

        height:
            110%;

    }


    .rv-support-hero-title {

        max-width:
            13ch;

        font-size:
            var(--fs-h2);

    }


    .rv-support-hero-description {

        max-width:
            36ch;

        margin-top:
            var(--space-5);

        font-size:
            var(--fs-base);

    }


    .rv-support-hero-cta {

        margin-top:
            var(--space-5);

    }


    .rv-support-hero-visual {

        min-height:
            260px;

        margin-top:
            var(--space-2);

    }


    .rv-support-flow-card {

        width:
            min(
                90%,
                350px
            );

        min-height:
            76px;

        gap:
            var(--space-3);

        padding:
            var(--space-4)
            var(--space-5);

        border-radius:
            var(--radius-md);

    }


    .rv-support-flow-card-request {

        transform:
            translateX(-57%)
            rotate(-4deg);

    }


    .rv-support-flow-card-project {

        top:
            82px;

        transform:
            translateX(-43%)
            rotate(3deg);

    }


    .rv-support-flow-card-ready {

        top:
            164px;

        transform:
            translateX(-54%)
            rotate(-2deg);

    }


    .rv-support-flow-label {

        font-size:
            var(--fs-h5);

    }


    .rv-support-flow-mark,
    .rv-support-flow-card-ready svg {

        width:
            var(--space-6);

        height:
            var(--space-6);

    }


    .rv-support-intro {

        padding-top:
            var(--space-20);

        padding-bottom:
            var(--space-20);

    }


    .rv-support-intro-header,
    .rv-support-packages-header,
    .rv-support-process-header {

        padding-bottom:
            var(--space-12);

    }


    .rv-support-intro-title,
    .rv-support-packages-title,
    .rv-support-process-title,
    .rv-support-scope-title,
    .rv-support-cta-title {

        font-size:
            var(--fs-h2);

    }


    .rv-support-intro-description,
    .rv-support-packages-description,
    .rv-support-process-description,
    .rv-support-scope-description,
    .rv-support-cta-description {

        font-size:
            var(--fs-sm);

    }


    .rv-support-value-item h3 {

        font-size:
            var(--fs-lg);

    }


    .rv-support-packages {

        padding-top:
            var(--space-20);

        padding-bottom:
            clamp(
                10rem,
                35vw,
                14rem
            );

    }


    .rv-support-package-grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

    }


    .rv-support-package-card {

        padding:
            var(--space-8)
            var(--space-6);

    }


    .rv-support-package-card:hover {

        transform:
            none;

    }


    .rv-support-package-top {

        margin-bottom:
            var(--space-8);

    }


    .rv-support-package-name {

        font-size:
            var(--fs-h3);

    }


    .rv-support-package-hours {

        margin-top:
            var(--space-6);

        font-size:
            var(--fs-h2);

    }


    .rv-support-package-price {

        margin-top:
            var(--space-6);

        font-size:
            var(--fs-lg);

    }


    .rv-support-package-description {

        margin-bottom:
            var(--space-6);

    }


    .rv-support-included {

        margin-top:
            var(--space-12);

        padding-top:
            var(--space-12);

    }


    .rv-support-included-heading h3 {

        font-size:
            var(--fs-h3);

    }


    .rv-support-included-list li {

        grid-template-columns:
            var(--space-8)
            minmax(0, 1fr);

        gap:
            var(--space-3);

        font-size:
            var(--fs-sm);

    }


    .rv-support-process {

        padding-top:
            var(--space-20);

        padding-bottom:
            var(--space-20);

    }


    .rv-support-process-item {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

        padding-block:
            var(--space-8);

    }


    .rv-support-process-number {

        font-size:
            var(--fs-h4);

    }


    .rv-support-process-item h3 {

        font-size:
            var(--fs-lg);

    }


    .rv-support-scope {

        padding-block:
            var(--space-20);

    }


    .rv-support-scope-content {

        gap:
            var(--space-12);

    }


    .rv-support-scope-list li {

        grid-template-columns:
            var(--space-8)
            minmax(0, 1fr);

        gap:
            var(--space-3);

        padding-block:
            var(--space-4);

        font-size:
            var(--fs-base);

    }


    .rv-support-cta {

        padding-block:
            var(--space-20);

    }


    .rv-support-cta-content {

        gap:
            var(--space-10);

    }


    .rv-support-cta-art {

        display:
            none;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .rv-support-hero-title {

        max-width:
            12ch;

    }


    .rv-support-hero-visual {

        min-height:
            240px;

    }


    .rv-support-flow-card {

        width:
            94%;

    }


    .rv-support-package-card {

        padding:
            var(--space-6)
            var(--space-5);

        border-radius:
            var(--radius-md);

    }


    .rv-support-package-label {

        min-height:
            var(--space-6);

        padding-inline:
            var(--space-3);

    }


    .rv-support-package-button,
    .rv-support-scope .rv-btn,
    .rv-support-cta .rv-btn {

        width:
            100%;

        padding-inline:
            var(--space-5);

        white-space:
            normal;

        text-align:
            center;

    }

}