/* =========================================
   ASMC ABOUT PAGE
   PHASE 6B
   WHY ASMC EXISTS
========================================= */


/* =========================================
   SECTION
========================================= */

.about-purpose {
    position: relative;

    padding:
        clamp(
            5rem,
            7vw,
            7.5rem
        )
        0;

    overflow: hidden;

    background:
        var(--color-deep-ink, #211627);

    color:
        var(--color-white);
}



/* =========================================
   SUBTLE BACKGROUND GEOMETRY
========================================= */

.about-purpose::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    top: -220px;
    right: -160px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


.about-purpose::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: 12%;

    border:
        1px solid
        rgba(247, 148, 29, 0.12);

    transform:
        rotate(45deg);

    pointer-events: none;
}


.about-purpose > .container {
    position: relative;

    z-index: 2;
}



/* =========================================
   INTRODUCTION
========================================= */

.about-purpose-intro {
    max-width: 1050px;

    margin:
        0
        auto
        clamp(
            4rem,
            6vw,
            6rem
        );

    text-align: center;
}


.about-purpose-kicker {
    width: fit-content;

    margin:
        0
        auto
        1.25rem;

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

    font-size:
        clamp(
            0.92rem,
            1.1vw,
            1.05rem
        );

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

    line-height: 1;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-purpose-title {
    max-width: 1000px;

    margin:
        0
        auto
        clamp(
            1.5rem,
            2.5vw,
            2.25rem
        );

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

    font-size:
        clamp(
            3rem,
            5.6vw,
            6rem
        );

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

    line-height:
        0.96;

    letter-spacing:
        -0.055em;

    color:
        var(--color-white);
}


.about-purpose-title span {
    display: block;

    color:
        #CFAFE8;
}


.about-purpose-lead {
    max-width: 760px;

    margin:
        0
        auto;

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

    font-size:
        clamp(
            1.08rem,
            1.5vw,
            1.3rem
        );

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );
}



/* =========================================
   CHALLENGE / RESPONSE
========================================= */

.about-purpose-bridge {
    width: 100%;
    max-width: 1080px;

    margin:
        0
        auto
        clamp(
            5rem,
            7vw,
            7rem
        );

    display: grid;

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

    gap:
        clamp(
            2.25rem,
            4vw,
            4rem
        );

    align-items: stretch;
}



/* =========================================
   CHALLENGE / RESPONSE CONTENT
========================================= */

.about-purpose-point {
    padding:
        clamp(
            0.5rem,
            1vw,
            1rem
        );

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.about-purpose-point-label {
    margin-bottom:
        1.25rem;

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

    font-size:
        0.8rem;

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

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-purpose-point h3 {
    max-width: 470px;

    margin:
        0
        0
        1.25rem;

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

    font-size:
        clamp(
            2rem,
            3vw,
            3.3rem
        );

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

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

    color:
        var(--color-white);
}


.about-purpose-point p {
    max-width: 470px;

    margin: 0;

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

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.12rem
        );

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );
}



/* =========================================
   CENTRE CONNECTOR
========================================= */

.about-purpose-connector {
    position: relative;

    width: 1px;

    min-height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(247, 148, 29, 0.75) 22%,
            rgba(247, 148, 29, 0.75) 78%,
            transparent 100%
        );
}


.about-purpose-connector span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 13px;

    border:
        2px solid
        var(--color-orange);

    border-radius: 50%;

    background:
        var(--color-deep-ink, #211627);

    transform:
        translate(
            -50%,
            -50%
        );
}



/* =========================================
   ECOSYSTEM HEADING
   CENTRED SECTION HEADING
========================================= */

.about-ecosystem-heading {
    width: 100%;
    max-width: 900px;

    margin:
        0
        auto
        clamp(
            3rem,
            4.5vw,
            4.25rem
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.about-ecosystem-heading > div {
    width: 100%;
}


.about-ecosystem-kicker {
    width: fit-content;

    margin:
        0
        auto
        1rem;

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

    font-size:
        0.8rem;

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

    line-height:
        1;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}


.about-ecosystem-heading h3 {
    max-width: 760px;

    margin:
        0
        auto
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );

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

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            5rem
        );

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

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

    text-align: center;

    color:
        var(--color-white);
}


.about-ecosystem-heading h3 span {
    display: block;

    color:
        #CFAFE8;
}


.about-ecosystem-intro {
    max-width: 620px;

    margin:
        0
        auto;

    padding-bottom: 0;

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

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.12rem
        );

    line-height:
        1.7;

    text-align: center;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );
}



/* =========================================
   STAKEHOLDER LIST
========================================= */

.about-stakeholder-list {
    width: 100%;
    max-width: 1080px;

    margin:
        0
        auto;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}



/* =========================================
   STAKEHOLDER ROW
========================================= */

.about-stakeholder {
    display: grid;

    grid-template-columns:
        80px
        minmax(
            190px,
            0.7fr
        )
        minmax(
            0,
            1.3fr
        );

    gap:
        clamp(
            1.25rem,
            3vw,
            3rem
        );

    align-items: center;

    padding:
        clamp(
            1.7rem,
            2.7vw,
            2.5rem
        )
        0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    transition:
        padding-left
        220ms
        ease;
}



/* =========================================
   STAKEHOLDER NUMBER
========================================= */

.about-stakeholder-number {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.15rem
        );

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

    color:
        var(--color-orange);
}



/* =========================================
   STAKEHOLDER TITLE
========================================= */

.about-stakeholder h4 {
    margin: 0;

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

    font-size:
        clamp(
            1.45rem,
            2vw,
            2.1rem
        );

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

    line-height:
        1.12;

    letter-spacing:
        -0.035em;

    color:
        var(--color-white);
}



/* =========================================
   STAKEHOLDER COPY
========================================= */

.about-stakeholder p {
    max-width: 610px;

    margin: 0;

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

    font-size:
        clamp(
            0.98rem,
            1.15vw,
            1.08rem
        );

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );
}



/* =========================================
   STAKEHOLDER HOVER
========================================= */

@media
    (hover: hover)
    and
    (pointer: fine) {

    .about-stakeholder:hover {
        padding-left:
            1rem;
    }

}



/* =========================================
   CLOSING STATEMENT
   CENTRED
========================================= */

.about-purpose-closing {
    max-width: 900px;

    margin:
        clamp(
            4rem,
            5.5vw,
            5.5rem
        )
        auto
        0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap:
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );

    text-align: center;
}



/* =========================================
   CLOSING PLUS
========================================= */

.about-purpose-closing-mark {
    width:
        clamp(
            50px,
            5vw,
            64px
        );

    aspect-ratio: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        rgba(
            247,
            148,
            29,
            0.42
        );

    border-radius: 50%;

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

    font-size:
        1.7rem;

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

    color:
        var(--color-orange);
}



/* =========================================
   CLOSING COPY
========================================= */

.about-purpose-closing p {
    max-width: 820px;

    margin:
        0
        auto;

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

    font-size:
        clamp(
            1.5rem,
            2.3vw,
            2.5rem
        );

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

    line-height:
        1.25;

    letter-spacing:
        -0.03em;

    text-align: center;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.about-purpose-closing strong {
    color:
        var(--color-white);

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



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

@media (max-width: 900px) {

    .about-purpose {
        padding:
            5rem
            0;
    }


    .about-purpose-intro {
        margin-bottom:
            4rem;
    }


    .about-purpose-bridge {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;

        margin-bottom:
            5rem;
    }


    .about-purpose-connector {
        width: 100%;
        height: 1px;
        min-height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(247, 148, 29, 0.75) 22%,
                rgba(247, 148, 29, 0.75) 78%,
                transparent 100%
            );
    }


    .about-purpose-point {
        padding:
            0;
    }


    .about-purpose-point h3,
    .about-purpose-point p {
        max-width:
            680px;
    }


    .about-ecosystem-heading {
        max-width:
            760px;
    }


    .about-ecosystem-intro {
        max-width:
            620px;
    }


    .about-stakeholder {
        grid-template-columns:
            55px
            minmax(
                170px,
                0.8fr
            )
            minmax(
                0,
                1.2fr
            );
    }

}



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

@media (max-width: 700px) {

    .about-purpose {
        padding:
            4.25rem
            0;
    }


    .about-purpose-intro {
        margin-bottom:
            3.5rem;
    }


    .about-purpose-title {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4.5rem
            );
    }


    .about-purpose-bridge {
        gap:
            2rem;

        margin-bottom:
            4rem;
    }


    .about-ecosystem-heading {
        margin-bottom:
            2.75rem;
    }


    .about-ecosystem-heading h3 {
        font-size:
            clamp(
                2.6rem,
                11vw,
                4rem
            );
    }


    .about-stakeholder {
        grid-template-columns:
            42px
            minmax(
                0,
                1fr
            );

        gap:
            0.8rem
            1rem;

        align-items:
            start;

        padding:
            1.75rem
            0;
    }


    .about-stakeholder-number {
        grid-column:
            1;

        grid-row:
            1;
    }


    .about-stakeholder h4 {
        grid-column:
            2;

        grid-row:
            1;
    }


    .about-stakeholder p {
        grid-column:
            2;

        grid-row:
            2;
    }


    .about-purpose-closing {
        max-width:
            650px;

        margin-top:
            3.5rem;
    }


    .about-purpose-closing-mark {
        width:
            46px;
    }

}



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

@media (max-width: 480px) {

    .about-purpose {
        padding:
            3.75rem
            0;
    }


    .about-purpose-title {
        font-size:
            clamp(
                2.6rem,
                12.5vw,
                3.8rem
            );
    }


    .about-purpose-lead {
        font-size:
            1rem;
    }


    .about-purpose-point h3 {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.5rem
            );
    }


    .about-ecosystem-heading {
        margin-bottom:
            2.5rem;
    }


    .about-stakeholder {
        grid-template-columns:
            34px
            minmax(
                0,
                1fr
            );
    }


    .about-stakeholder h4 {
        font-size:
            1.4rem;
    }


    .about-stakeholder p {
        font-size:
            0.96rem;
    }


    .about-purpose-closing {
        margin-top:
            3rem;
    }


    .about-purpose-closing p {
        font-size:
            1.4rem;
    }

}



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

@media (prefers-reduced-motion: reduce) {

    .about-stakeholder {
        transition: none;
    }

}

/* =========================================
   REMOVE CLOSING PLUS
========================================= */

.about-purpose-closing-mark {
    display: none;
}