/* ==========================================================
   REVISI DESIGN SYSTEM
   ABOUT 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-about-organic-wave {

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        100%;

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

    display:
        block;

    pointer-events:
        none;

    z-index:
        0;

}


.rv-about-hero-wave path {

    fill:
        var(--color-dark);

}


.rv-about-story-wave path {

    fill:
        var(--color-light);

}


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

.rv-about-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-about-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-about-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-about-hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(380px, .8fr);

    align-items:
        center;

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

}


.rv-about-hero-copy {

    max-width:
        900px;

}


.rv-about-hero-title {

    max-width:
        16ch;

    margin:
        0;

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

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

    color:
        var(--color-dark);

}


.rv-about-hero-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-about-hero-description {

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

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

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

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

    color:
        var(--color-dark);

}


.rv-about-hero-cta {

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

}


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

    transform:
        rotate(-135deg);

}


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

    transform:
        rotate(-90deg);

}


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

.rv-about-hero-media {

    position:
        relative;

    width:
        min(
            100%,
            470px
        );

    margin:
        0 auto;

}


.rv-about-hero-image {

    position:
        relative;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        var(--color-dark);

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

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

}


.rv-about-hero-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.rv-about-hero-caption {

    position:
        absolute;

    top:
        var(--space-5);

    left:
        var(--space-5);

    right:
        var(--space-5);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

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

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

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

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

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

    color:
        var(--color-dark);

}


.rv-about-hero-caption span,
.rv-about-hero-caption strong {

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

    line-height:
        1.3;

}


.rv-about-hero-caption span {

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

    text-transform:
        uppercase;

}


.rv-about-hero-caption strong {

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

}


.rv-about-hero-stat {

    position:
        absolute;

    right:
        calc(
            var(--space-8) * -1
        );

    bottom:
        var(--space-8);

    width:
        min(
            55%,
            230px
        );

    padding:
        var(--space-6);

    background:
        var(--color-dark);

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

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

    color:
        var(--color-light);

}


.rv-about-hero-stat strong {

    display:
        block;

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

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

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

    line-height:
        1;

    color:
        var(--color-accent);

}


.rv-about-hero-stat span {

    display:
        block;

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

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

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

    line-height:
        1.4;

    color:
        var(--color-light);

}


/* ==========================================================
   STORY
========================================================== */

.rv-about-story {

    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-about-story-content {

    position:
        relative;

    z-index:
        1;

}


.rv-about-story-heading {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, .8fr);

    align-items:
        start;

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

}


.rv-about-story-title {

    max-width:
        15ch;

    margin:
        0;

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

    color:
        var(--color-light);

}


.rv-about-story-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-about-story-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-6);

}


.rv-about-story-text p {

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

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

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

    color:
        var(--color-muted);

}


/* ==========================================================
   MANIFESTO
========================================================== */

.rv-about-manifesto-grid {

    display:
        grid;

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

    align-items:
        stretch;

    gap:
        var(--space-6);

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

}


.rv-about-manifesto-card {

    position:
        relative;

    min-height:
        420px;

    display:
        flex;

    align-items:
        flex-end;

    margin:
        0;

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

    background:
        var(--color-accent);

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

    overflow:
        hidden;

}


.rv-about-manifesto-card > span {

    position:
        absolute;

    top:
        calc(
            var(--space-10) * -1
        );

    right:
        var(--space-8);

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

    font-size:
        clamp(
            11rem,
            18vw,
            19rem
        );

    line-height:
        1;

    color:
        var(--color-dark);

    opacity:
        .12;

}


.rv-about-manifesto-card p {

    position:
        relative;

    max-width:
        12ch;

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

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

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

    color:
        var(--color-dark);

}


.rv-about-manifesto-list {

    min-height:
        420px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

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

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

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

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

}


.rv-about-manifesto-list p,
.rv-about-manifesto-list strong {

    display:
        block;

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

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

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

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

    line-height:
        1.4;

}


.rv-about-manifesto-list p {

    color:
        var(--color-muted);

}


.rv-about-manifesto-list strong {

    border-bottom:
        0;

    color:
        var(--color-light);

}


/* ==========================================================
   STATS
========================================================== */

.rv-about-stats {

    display:
        grid;

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

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

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

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

}


.rv-about-stat-item {

    min-width:
        0;

    padding:
        var(--space-10);

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

}


.rv-about-stat-item:first-child {

    padding-left:
        0;

}


.rv-about-stat-item:last-child {

    padding-right:
        0;

    border-right:
        0;

}


.rv-about-stat-item strong {

    display:
        block;

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

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

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

    line-height:
        1;

    color:
        var(--color-primary);

}


.rv-about-stat-item span {

    display:
        block;

    max-width:
        24ch;

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

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

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

    color:
        var(--color-light);

}


/* ==========================================================
   PRINCIPLES
========================================================== */

.rv-about-principles {

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

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

    background:
        var(--color-light);

}


.rv-about-principles-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-about-principles-title {

    max-width:
        14ch;

    margin:
        0;

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

    color:
        var(--color-dark);

}


.rv-about-principles-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-about-principles-description {

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

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

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

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

}


.rv-about-principles-list {

    display:
        grid;

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

    margin:
        0;

    padding:
        0;

    list-style:
        none;

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

}


.rv-about-principle-item {

    min-width:
        0;

    display:
        grid;

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

    align-items:
        start;

    gap:
        var(--space-6);

    padding:
        var(--space-10);

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

}


.rv-about-principle-item:nth-child(odd) {

    padding-left:
        0;

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

}


.rv-about-principle-item:nth-child(even) {

    padding-right:
        0;

}


.rv-about-principle-number {

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

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

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

    color:
        var(--color-primary);

}


.rv-about-principle-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-about-principle-item p {

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

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

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

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

}


/* ==========================================================
   COOPERATION
========================================================== */

.rv-about-cooperation {

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

    background:
        var(--color-accent);

}


.rv-about-cooperation-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-about-cooperation-title {

    max-width:
        15ch;

    margin:
        0;

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

    color:
        var(--color-dark);

}


.rv-about-cooperation-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-about-cooperation-description {

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

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

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

    color:
        var(--color-dark);

}


.rv-about-cooperation-grid {

    display:
        grid;

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

    gap:
        var(--space-6);

}


.rv-about-cooperation-card {

    min-width:
        0;

    min-height:
        480px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        var(--space-12);

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

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

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

}


.rv-about-cooperation-card:hover {

    transform:
        translateY(-6px);

}


.rv-about-cooperation-card-project {

    background:
        var(--color-light);

    color:
        var(--color-dark);

}


.rv-about-cooperation-card-support {

    background:
        var(--color-dark);

    color:
        var(--color-light);

}


.rv-about-cooperation-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

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

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

    text-transform:
        uppercase;

    color:
        currentColor;

}


.rv-about-cooperation-card-copy {

    margin-top:
        auto;

}


.rv-about-cooperation-card-copy h3 {

    max-width:
        13ch;

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

    color:
        currentColor;

}


.rv-about-cooperation-card-copy p {

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

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

    color:
        currentColor;

    opacity:
        .72;

}


.rv-about-cooperation-card .rv-btn {

    width:
        max-content;

}


.rv-about-cooperation-card-support
.rv-btn:hover {

    background:
        var(--color-accent);

    color:
        var(--color-dark);

}


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

.rv-about-cta {

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

    background:
        var(--color-primary);

    color:
        var(--color-light);

    overflow:
        hidden;

}


.rv-about-cta-content {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, .95fr);

    align-items:
        center;

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

}


.rv-about-cta-title {

    max-width:
        14ch;

    margin:
        0;

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

    color:
        var(--color-light);

}


.rv-about-cta-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-about-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-about-cta-art {

    width:
        min(
            100%,
            580px
        );

    margin-inline:
        auto;

}


.rv-about-cta-art svg {

    width:
        100%;

    height:
        auto;

    overflow:
        visible;

}


.rv-about-art-bubble-back {

    fill:
        var(--color-dark);

}


.rv-about-art-bubble-front {

    fill:
        var(--color-light);

}


.rv-about-art-dot-one,
.rv-about-art-dot-three {

    fill:
        var(--color-dark);

}


.rv-about-art-dot-two {

    fill:
        var(--color-accent);

}


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

@media (max-width: 1180px) {

    .rv-about-hero-content {

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

        gap:
            var(--space-12);

    }


    .rv-about-hero-stat {

        right:
            calc(
                var(--space-4) * -1
            );

    }


    .rv-about-cta-content {

        gap:
            var(--space-16);

    }

}


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

@media (max-width: 1024px) {

    .rv-about-hero {

        min-height:
            auto;

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

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

    }


    .rv-about-hero::after {

        top:
            -12%;

        right:
            -47%;

        width:
            105vw;

        height:
            125%;

    }


    .rv-about-hero-content {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-about-hero-copy {

        max-width:
            760px;

    }


    .rv-about-hero-media {

        width:
            min(
                72%,
                500px
            );

    }


    .rv-about-story-heading,
    .rv-about-principles-header,
    .rv-about-cooperation-header {

        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            var(--space-6);

    }


    .rv-about-story-title,
    .rv-about-principles-title,
    .rv-about-cooperation-title {

        max-width:
            16ch;

    }


    .rv-about-story-text {

        max-width:
            760px;

    }


    .rv-about-manifesto-grid {

        grid-template-columns:
            1fr;

    }


    .rv-about-manifesto-card,
    .rv-about-manifesto-list {

        min-height:
            340px;

    }


    .rv-about-stats {

        grid-template-columns:
            1fr;

    }


    .rv-about-stat-item,
    .rv-about-stat-item:first-child,
    .rv-about-stat-item:last-child {

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

        border-right:
            0;

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

    }


    .rv-about-stat-item:last-child {

        border-bottom:
            0;

    }


    .rv-about-cta-content {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-about-cta-copy {

        max-width:
            760px;

    }


    .rv-about-cta-art {

        width:
            min(
                72%,
                520px
            );

    }

}


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

@media (max-width: 768px) {

    .rv-about-organic-wave {

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

    }


    .rv-about-hero {

        min-height:
            100svh;

        align-items:
            flex-start;

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

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

    }


    .rv-about-hero::after {

        top:
            -10%;

        right:
            -95%;

        width:
            190vw;

        height:
            110%;

    }


    .rv-about-hero-title {

        max-width:
            13ch;

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

    }


    .rv-about-hero-description {

        max-width:
            36ch;

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

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

    }


    .rv-about-hero-cta {

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

    }


    .rv-about-hero-media {

        width:
            min(
                88%,
                430px
            );

    }


    .rv-about-hero-image {

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

    }


    .rv-about-hero-caption {

        top:
            var(--space-3);

        left:
            var(--space-3);

        right:
            var(--space-3);

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

    }


    .rv-about-hero-caption strong {

        display:
            none;

    }


    .rv-about-hero-stat {

        right:
            calc(
                var(--space-4) * -1
            );

        bottom:
            var(--space-4);

        width:
            min(
                62%,
                210px
            );

        padding:
            var(--space-5);

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

    }


    .rv-about-story {

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

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

    }


    .rv-about-story-title,
    .rv-about-principles-title,
    .rv-about-cooperation-title,
    .rv-about-cta-title {

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

    }


    .rv-about-story-text p,
    .rv-about-principles-description,
    .rv-about-cooperation-description,
    .rv-about-cta-description {

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

    }


    .rv-about-manifesto-grid {

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

        gap:
            var(--space-4);

    }


    .rv-about-manifesto-card,
    .rv-about-manifesto-list {

        min-height:
            300px;

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

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

    }


    .rv-about-manifesto-card p {

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

    }


    .rv-about-manifesto-list p,
    .rv-about-manifesto-list strong {

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

    }


    .rv-about-stats {

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

    }


    .rv-about-stat-item strong {

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

    }


    .rv-about-principles {

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

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

    }


    .rv-about-principles-header {

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

    }


    .rv-about-principles-list {

        grid-template-columns:
            1fr;

    }


    .rv-about-principle-item,
    .rv-about-principle-item:nth-child(odd),
    .rv-about-principle-item:nth-child(even) {

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

        gap:
            var(--space-4);

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

        border-right:
            0;

    }


    .rv-about-principle-item h3 {

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

    }


    .rv-about-cooperation {

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

    }


    .rv-about-cooperation-header {

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

    }


    .rv-about-cooperation-grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

    }


    .rv-about-cooperation-card {

        min-height:
            410px;

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

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

    }


    .rv-about-cooperation-card:hover {

        transform:
            none;

    }


    .rv-about-cooperation-card-copy h3 {

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

    }


    .rv-about-cooperation-card-copy p {

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

    }


    .rv-about-cta {

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

    }


    .rv-about-cta-content {

        gap:
            var(--space-10);

    }


    .rv-about-cta-art {

        display:
            none;

    }

}


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

@media (max-width: 480px) {

    .rv-about-hero-title {

        max-width:
            12ch;

    }


    .rv-about-hero-media {

        width:
            94%;

    }


    .rv-about-hero-stat {

        right:
            calc(
                var(--space-2) * -1
            );

        width:
            min(
                68%,
                190px
            );

    }


    .rv-about-cooperation-card .rv-btn,
    .rv-about-cta .rv-btn {

        width:
            100%;

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

        white-space:
            normal;

        text-align:
            center;

    }

}

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

    transform:
        rotate(-135deg);

}


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

    transform:
        rotate(0deg);

}