/* ==========================================================
   REVISI DESIGN SYSTEM
   SERVICES 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);

}


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

.rv-services-hero {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    padding-top:
        clamp(
            10rem,
            16vh,
            13rem
        );

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

    background:
        var(--color-light);

    overflow:
        hidden;

    isolation:
        isolate;

}


.rv-services-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;

}


/* ==========================================================
   HERO GRID BACKGROUND
========================================================== */

.rv-services-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;

}


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

.rv-services-hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    align-items:
        center;

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

}


.rv-services-hero-copy {

    max-width:
        920px;

}


.rv-services-hero-title {

    max-width:
        16ch;

    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-services-hero-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-services-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-services-hero-cta {

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

}


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

.rv-services-overview {

    position:
        relative;

    padding:
        var(--space-8);

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

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

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

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

    backdrop-filter:
        blur(var(--glass-blur));

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

}


.rv-services-overview-heading {

    max-width:
        100%;

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

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

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

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

    line-height:
        1.5;

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

}


.rv-services-overview-heading strong {

    display:
        block;

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

    color:
        var(--color-dark);

}


.rv-services-overview-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.rv-services-overview-list li {

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

}


.rv-services-overview-list li:last-child {

    border-bottom:
        0;

}


.rv-services-overview-list a {

    display:
        grid;

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

    align-items:
        center;

    gap:
        var(--space-3);

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

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

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

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

    line-height:
        1.4;

    color:
        var(--color-dark);

    transition:
        color var(--transition-fast),
        padding-left var(--transition-premium);

}


.rv-services-overview-list a:hover {

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

    color:
        var(--color-primary);

}


.rv-services-overview-list a span {

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

    color:
        var(--color-muted);

}


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

.rv-services-organic-wave {

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        100%;

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

    display:
        block;

    pointer-events:
        none;

    z-index:
        0;

}


.rv-services-hero-wave path {

    fill:
        var(--color-dark);

}


.rv-services-directory-wave path {

    fill:
        var(--color-primary);

}


/* ==========================================================
   SERVICES DIRECTORY
========================================================== */

.rv-services-directory {

    position:
        relative;

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

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

    background:
        var(--color-dark);

    color:
        var(--color-light);

    overflow:
        hidden;

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

}


.rv-services-directory-content {

    position:
        relative;

    z-index:
        1;

}


.rv-services-directory-header {

    display:
        grid;

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

    column-gap:
        var(--space-16);

    align-items:
        end;

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

}


.rv-services-directory-title {

    margin:
        0;

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

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

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

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

    color:
        var(--color-light);

}


.rv-services-directory-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-services-directory-description {

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

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

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

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

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

    color:
        var(--color-muted);

}


/* ==========================================================
   SERVICE GROUP
========================================================== */

.rv-service-group {

    display:
        grid;

    grid-template-columns:
        minmax(280px, .7fr)
        minmax(0, 1.3fr);

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

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

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

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

}


.rv-service-group:last-child {

    padding-bottom:
        0;

}


.rv-service-group-heading {

    align-self:
        start;

}


.rv-service-number {

    display:
        inline-flex;

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

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

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

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

    color:
        var(--color-accent);

}


.rv-service-title {

    max-width:
        10ch;

    margin:
        0;

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

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

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

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

    color:
        var(--color-light);

}


.rv-service-description {

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

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

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

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

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

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

    color:
        var(--color-muted);

}


.rv-service-scope {

    min-width:
        0;

}


/* ==========================================================
   SERVICE CARDS
========================================================== */

.rv-service-list {

    display:
        grid;

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

    gap:
        var(--space-3);

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.rv-service-list li {

    position:
        relative;

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

    background:
        linear-gradient(
            145deg,
            rgba(248, 248, 248, .07),
            rgba(248, 248, 248, .035)
        );

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

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

    overflow:
        hidden;

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

}


.rv-service-list li::before {

    content:
        "+";

    position:
        absolute;

    top:
        var(--space-4);

    right:
        var(--space-4);

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

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

    line-height:
        1;

    color:
        var(--color-accent);

    pointer-events:
        none;

    transition:
        transform var(--transition-premium);

}


.rv-service-list li:hover {

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

    border-color:
        rgba(228, 252, 16, .4);

    transform:
        translateY(-4px);

}


.rv-service-list li:hover::before {

    transform:
        rotate(90deg);

}


.rv-service-list li:focus-within {

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

}


.rv-service-list a {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        inherit;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        var(--space-5);

    color:
        var(--color-light);

}


.rv-service-list a span {

    max-width:
        85%;

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

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

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

    line-height:
        1.45;

    color:
        var(--color-light);

}


/* ==========================================================
   EXAMPLE RANGE
========================================================== */

.rv-service-more {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--space-4);

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

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

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

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

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

    line-height:
        1.65;

    color:
        rgba(248, 248, 248, .62);

}


.rv-service-more-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        var(--space-12);

    height:
        var(--space-12);

    background:
        rgba(228, 252, 16, .07);

    border:
        1px solid rgba(228, 252, 16, .42);

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

    color:
        var(--color-accent);

}


.rv-service-more-icon svg {

    width:
        var(--space-6);

    height:
        var(--space-6);

}


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

.rv-services-cta {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

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

    background:
        var(--color-primary);

    color:
        var(--color-light);

    overflow:
        hidden;

}


.rv-services-cta-content {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(20rem, 1.05fr);

    align-items:
        center;

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

}


.rv-services-cta-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.rv-services-cta-title {

    max-width:
        11ch;

    margin:
        0;

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

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

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

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

    color:
        var(--color-light);

}


.rv-services-cta-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-services-cta-description {

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

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

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

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

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

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

    color:
        rgba(248, 248, 248, .78);

}


.rv-services-cta-button {

    flex-shrink:
        0;

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

}


.rv-services-cta-art {

    width:
        min(
            100%,
            32rem
        );

    margin-left:
        auto;

}


.rv-services-cta-art svg {

    width:
        100%;

    height:
        auto;

    overflow:
        visible;

}


/* ==========================================================
   CTA MINIMAL QUESTION ART
========================================================== */

.rv-services-cta-art {

    position:
        relative;

}


.rv-services-question-surface {

    fill:
        var(--color-light);

    opacity:
        .1;

}


.rv-services-question-shadow {

    fill:
        var(--color-dark);

}


.rv-services-question-mark {

    fill:
        var(--color-accent);

}


.rv-services-question-dot-shadow {

    fill:
        var(--color-dark);

}


.rv-services-question-dot {

    fill:
        var(--color-accent);

}


.rv-services-question-spark {

    fill:
        var(--color-light);

}


.rv-services-question-square {

    fill:
        var(--color-light);

}


.rv-services-question-pill {

    fill:
        var(--color-dark);

}


.rv-services-question-dot-light {

    fill:
        var(--color-light);

}


.rv-services-question-dot-dark {

    fill:
        var(--color-dark);

}


.rv-services-question-dot-accent {

    fill:
        var(--color-accent);

}


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

@media (max-width: 1024px) {

    .rv-services-hero {

        min-height:
            100svh;

        padding-top:
            clamp(
                8.5rem,
                14vh,
                10rem
            );

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

    }


    .rv-services-hero-content {

        grid-template-columns:
            1fr;

        justify-items:
            center;

        gap:
            var(--space-12);

        text-align:
            center;

    }


    .rv-services-hero-copy {

        width:
            100%;

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

        margin-inline:
            auto;

    }


    .rv-services-hero-title {

        max-width:
            15ch;

        margin-inline:
            auto;

        text-wrap:
            balance;

    }


    .rv-services-hero-description {

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

        margin-inline:
            auto;

    }


    .rv-services-overview {

        display:
            none;

    }


    .rv-services-directory {

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

        padding-bottom:
            clamp(
                12rem,
                22vw,
                17rem
            );

    }


    .rv-services-directory-header {

        grid-template-columns:
            1fr;

        gap:
            var(--space-5);

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

    }


    .rv-services-directory-title {

        max-width:
            16ch;

    }


    .rv-services-directory-description {

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

    }


    .rv-service-group {

        grid-template-columns:
            1fr;

        gap:
            var(--space-8);

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

    }


    .rv-service-title {

        max-width:
            18ch;

    }


    .rv-service-description {

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

    }


    .rv-service-scope {

        width:
            100%;

    }


    .rv-services-cta-content {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(16rem, .72fr);

        gap:
            var(--space-8);

    }


    .rv-services-cta-art {

        width:
            min(
                100%,
                24rem
            );

    }

}


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

@media (max-width: 768px) {

    .rv-services-hero {

        min-height:
            100svh;

        align-items:
            center;

        padding-top:
            7.75rem;

        padding-bottom:
            10rem;

    }


    .rv-services-hero-content {

        width:
            min(
                100% - 2 * var(--space-4),
                var(--container-page)
            );

        justify-items:
            center;

        gap:
            var(--space-8);

        text-align:
            center;

    }


    .rv-services-hero-title {

        max-width:
            12ch;

        margin-inline:
            auto;

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

    }


    .rv-services-hero-description {

        max-width:
            34rem;

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

        margin-inline:
            auto;

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

    }


    .rv-services-hero-cta {

        width:
            min(
                100%,
                22rem
            );

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

    }


    .rv-services-directory {

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

        padding-bottom:
            10rem;

    }


    .rv-services-directory-content {

        width:
            min(
                100% - 2 * var(--space-4),
                var(--container-page)
            );

    }


    .rv-services-directory-header {

        justify-items:
            center;

        gap:
            var(--space-5);

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

        text-align:
            center;

    }


    .rv-services-directory-title {

        max-width:
            13ch;

        margin-inline:
            auto;

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

    }


    .rv-services-directory-description {

        max-width:
            34rem;

        margin-inline:
            auto;

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

    }


    .rv-service-group {

        gap:
            var(--space-6);

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

    }


    .rv-service-group-heading {

        width:
            100%;

        text-align:
            center;

    }


    .rv-service-number {

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

    }


    .rv-service-title {

        max-width:
            16ch;

        margin-inline:
            auto;

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

    }


    .rv-service-description {

        max-width:
            32rem;

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

        margin-inline:
            auto;

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

    }


    .rv-service-list {

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

        gap:
            var(--space-2);

    }


    .rv-service-list li {

        min-height:
            7rem;

    }


    .rv-service-list li::before {

        top:
            var(--space-3);

        right:
            var(--space-3);

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

    }


    .rv-service-list a {

        padding:
            var(--space-4);

    }


    .rv-service-list a span {

        max-width:
            90%;

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

        line-height:
            1.4;

    }


    .rv-service-more {

        display:
            none;

    }


    .rv-services-cta {

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

    }


    .rv-services-cta-content {

        width:
            min(
                100% - 2 * var(--space-4),
                var(--container-page)
            );

        grid-template-columns:
            1fr;

        justify-items:
            center;

        gap:
            var(--space-6);

        text-align:
            center;

    }


    .rv-services-cta-copy {

        width:
            100%;

        align-items:
            center;

        text-align:
            center;

    }


    .rv-services-cta-title {

        max-width:
            12ch;

        margin-inline:
            auto;

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

    }


    .rv-services-cta-description {

        max-width:
            30rem;

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

        margin-inline:
            auto;

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

    }


    .rv-services-cta-button {

        width:
            min(
                100%,
                22rem
            );

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

    }


    .rv-services-cta-art {

        width:
            min(
                100%,
                18rem
            );

        margin-inline:
            auto;

    }

}


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

@media (max-width: 480px) {

    .rv-services-hero {

        padding-top:
            7rem;

        padding-bottom:
            9.5rem;

    }


    .rv-services-hero-content,
    .rv-services-directory-content,
    .rv-services-cta-content {

        width:
            min(
                100% - 2 * var(--space-4),
                var(--container-page)
            );

    }


    .rv-services-hero-title {

        max-width:
            11ch;

    }


    .rv-services-directory {

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

        padding-bottom:
            10rem;

    }


    .rv-services-directory-title {

        max-width:
            12ch;

    }


    .rv-service-group {

        gap:
            var(--space-5);

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

    }


    .rv-service-list li {

        min-height:
            6.5rem;

    }


    .rv-service-list a {

        padding:
            var(--space-3);

    }


    .rv-service-list a span {

        max-width:
            88%;

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

    }


    .rv-services-cta {

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

    }


    .rv-services-cta-title {

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

    }


    .rv-services-cta-art {

        width:
            min(
                100%,
                15rem
            );

    }


    .rv-services-question-surface,
    .rv-services-question-square,
    .rv-services-question-pill,
    .rv-services-question-dot-light,
    .rv-services-question-dot-dark,
    .rv-services-question-dot-accent {

        display:
            none;

    }

}


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

@media (max-width: 360px) {

    .rv-services-hero-title,
    .rv-services-directory-title,
    .rv-services-cta-title {

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

    }


    .rv-service-list {

        grid-template-columns:
            1fr;

    }


    .rv-service-list li {

        min-height:
            4.75rem;

    }


    .rv-service-list a span {

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

    }


    .rv-services-cta-art {

        width:
            13rem;

    }

}


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

@media
(max-width: 1024px)
and (max-height: 600px)
and (orientation: landscape) {

    .rv-services-hero {

        min-height:
            auto;

        padding-top:
            7.5rem;

        padding-bottom:
            10rem;

    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .rv-service-list li:hover {

        transform:
            none;

    }


    .rv-service-list li:hover::before {

        transform:
            none;

    }

}


/* ==========================================================
   MOBILE — HEADING SIZE FIX
========================================================== */

@media (max-width: 768px) {

    .rv-services-hero-title,
    .rv-services-directory-title,
    .rv-services-cta-title {

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

    }


    .rv-services-hero-title {

        max-width:
            13ch;

    }


    .rv-services-directory-title {

        max-width:
            14ch;

    }


    .rv-services-cta-title {

        max-width:
            14ch;

    }


    /* Ukrycie ilustracji SVG w ostatniej sekcji */

    .rv-services-cta-art {

        display:
            none;

    }


    /* Usunięcie odstępu pozostałego po ilustracji */

    .rv-services-cta-content {

        gap:
            0;

    }

}

/* Domyślne ustawienie strzałki */

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

    transform:
        rotate(-135deg);

}


/* Ustawienie strzałki po najechaniu */

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

    transform:
        rotate(0deg);

}