/* =========================================
   ASMC ABOUT PAGE
   PHASE 6A
========================================= */


/* =========================================
   PAGE
========================================= */

.about-page {
    background: var(--color-warm-white);
}



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

.about-hero {
    position: relative;

    height: calc(100svh - var(--header-height));

    box-sizing: border-box;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-top: clamp(1.75rem, 3svh, 2.75rem);
    padding-bottom: clamp(1.75rem, 3svh, 2.75rem);

    background:
        linear-gradient(
            145deg,
            #FBF9FC 0%,
            #F0EAF4 55%,
            #F8EDF5 100%
        );
}


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

    position: absolute;

    width: min(48vw, 760px);
    aspect-ratio: 1;

    left: -22%;
    bottom: -45%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(247, 148, 29, 0.10) 0%,
            rgba(247, 148, 29, 0) 70%
        );

    pointer-events: none;
}


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

    position: absolute;

    width: min(44vw, 700px);
    aspect-ratio: 1;

    right: -16%;
    top: -30%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(146, 39, 143, 0.11) 0%,
            rgba(146, 39, 143, 0) 70%
        );

    pointer-events: none;
}



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

.about-hero-grid {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

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

    gap: clamp(1.5rem, 3.5vw, 3.5rem);

    align-items: center;
    justify-items: center;
}



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

.about-hero-copy {
    width: 100%;
    max-width: 800px;

    margin-inline: auto;

    padding-left:
        clamp(
            1.5rem,
            3.5vw,
            4rem
        );

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


.about-hero-title {
    max-width: 800px;

    margin:
        0
        auto
        clamp(1.2rem, 2.5svh, 2rem);

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

    font-size:
        clamp(
            3.6rem,
            6.5vw,
            6.8rem
        );

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

    line-height: 0.92;

    letter-spacing: -0.06em;

    text-align: center;

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


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

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


.about-hero-lead {
    max-width: 680px;

    margin:
        0
        auto
        clamp(1.4rem, 2.8svh, 2.2rem);

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

    font-size:
        clamp(
            1.2rem,
            1.7vw,
            1.5rem
        );

    line-height: 1.6;

    text-align: center;

    color: var(--color-text-secondary);
}



/* =========================================
   DISCOVER LINK
========================================= */

.about-scroll-link {
    width: fit-content;

    display: inline-flex;

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

    gap: 0.85rem;

    min-height: 46px;

    margin-inline: auto;

    padding:
        0.7rem
        0.9rem
        0.7rem
        1.2rem;

    border:
        1px solid
        rgba(102, 46, 147, 0.20);

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

    background:
        rgba(255, 255, 255, 0.58);

    color: var(--color-violet);

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

    font-size: 0.95rem;

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

    text-decoration: none;

    transition:
        transform var(--motion-base) var(--ease-standard),
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease;
}


.about-scroll-link:hover {
    transform: translateY(-2px);

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

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


.about-scroll-arrow {
    width: 29px;
    height: 29px;

    display: inline-flex;

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

    border-radius: 50%;

    background: var(--color-violet);

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



/* =========================================
   QUESTION AREA
========================================= */

.about-question-area {
    position: relative;

    height:
        min(
            78svh,
            620px
        );

    aspect-ratio: 0.82;

    width: auto;
    max-width: 100%;

    transform: translateX(-9%);

    justify-self: center;
    align-self: center;

    margin-inline: auto;
}


.about-question-frame {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

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

    isolation: isolate;

    overflow: hidden;

    border:
        1px solid
        rgba(102, 46, 147, 0.15);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.46);

    box-shadow:
        0 24px 60px
        rgba(33, 22, 39, 0.08);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


.about-question-svg {
    position: relative;

    z-index: 4;

    width:
        min(
            76%,
            395px
        );

    height: auto;

    overflow: visible;
}


.question-piece {
    transform-box: fill-box;

    transform-origin: center;
}


.question-piece-one {
    --question-order: 1;
}


.question-piece-two {
    --question-order: 2;
}


.question-piece-three {
    --question-order: 3;
}


.question-piece-four {
    --question-order: 4;
}



/* =========================================
   QUESTION DECORATION
========================================= */

.question-glow {
    position: absolute;

    z-index: 1;

    width: 70%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(102, 46, 147, 0.13) 0%,
            rgba(102, 46, 147, 0) 70%
        );

    filter: blur(18px);

    pointer-events: none;
}


.question-orbit {
    position: absolute;

    z-index: 2;

    border:
        1px solid
        rgba(102, 46, 147, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


.question-orbit-one {
    width: 73%;
    height: 62%;

    transform: rotate(14deg);
}


.question-orbit-two {
    width: 57%;
    height: 73%;

    border-style: dashed;

    border-color:
        rgba(146, 39, 143, 0.20);

    transform: rotate(-18deg);
}


.question-note {
    position: absolute;

    z-index: 5;

    padding:
        0.42rem
        0.68rem;

    border:
        1px solid
        rgba(102, 46, 147, 0.16);

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

    background:
        rgba(255, 255, 255, 0.82);

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

    font-size:
        clamp(
            0.64rem,
            0.75vw,
            0.76rem
        );

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

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--color-violet);

    box-shadow:
        0 8px 24px
        rgba(33, 22, 39, 0.06);
}


.question-note-one {
    left: 8%;
    top: 18%;
}


.question-note-two {
    right: 7%;
    top: 48%;
}


.question-note-three {
    left: 11%;
    bottom: 15%;
}



/* =========================================
   WHAT IS ASMC
========================================= */

.about-definition {
    position: relative;

    padding-top:
        clamp(
            3.75rem,
            5vw,
            5rem
        );

    padding-bottom:
        clamp(
            4rem,
            5.5vw,
            5.25rem
        );

    overflow: hidden;

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



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

.about-definition-heading {
    max-width: 1080px;

    margin:
        0
        auto
        clamp(2rem, 3vw, 2.75rem);

    text-align: center;
}


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

    margin:
        0
        auto
        1.05rem;

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

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

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

    line-height: 1;

    letter-spacing: 0.09em;

    text-transform: uppercase;

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


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

    margin-inline: auto;

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

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

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

    line-height: 0.98;

    letter-spacing: -0.052em;

    text-align: center;

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


.about-definition-title span {
    color: var(--color-violet);
}



/* =========================================
   PRIMARY DEFINITION
========================================= */

.about-definition-main {
    width: 100%;
    max-width: 900px;

    margin:
        0
        auto
        clamp(2.4rem, 3.5vw, 3.25rem);

    text-align: center;
}


.about-definition-intro {
    max-width: 860px;

    margin: 0 auto;

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

    font-size:
        clamp(
            1.5rem,
            2.25vw,
            2.35rem
        );

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

    line-height: 1.28;

    letter-spacing: -0.03em;

    text-align: center;

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



/* =========================================
   RECTANGLE AREA
========================================= */

.about-belief-stage {
    width: 100%;

    margin: 0 auto;

    display: flex;

    justify-content: center;
}


.about-belief-stack {
    width:
        min(
            100%,
            1080px
        );

    height: auto;

    margin-inline: auto;

    display: grid;

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

    gap:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    align-items: stretch;
}



/* =========================================
   OLD TRIANGLE WRAPPERS
   REMAIN INVISIBLE
========================================= */

.about-belief-card {
    position: relative;

    inset: auto;

    width: 100%;
    height: auto;

    min-height: 0;

    display: flex;

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

    overflow: visible;

    padding: 0;

    background: transparent;

    clip-path: none;

    color: inherit;
}


.about-belief-card-primary,
.about-belief-card-secondary {
    left: auto;
    right: auto;

    background: transparent;

    clip-path: none;
}



/* =========================================
   VIOLET TRANSLUCENT RECTANGLES
========================================= */

.about-belief-content-card {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: none;

    min-height:
        clamp(
            280px,
            24vw,
            340px
        );

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

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

    gap:
        clamp(
            0.8rem,
            1vw,
            1rem
        );

    padding:
        clamp(
            2.4rem,
            3.3vw,
            3rem
        )
        clamp(
            2rem,
            2.8vw,
            2.65rem
        );

    overflow: hidden;

    /*
        No border.

        This prevents any border line from
        appearing across the geometric cuts.
    */

    border: none;

    /*
        Rounded outer corners stay intact.
    */

    border-radius:
        clamp(
            24px,
            2.5vw,
            34px
        );

    /*
        Both rectangles now use violet.
        Opacity is deliberately below 1 so
        they retain the translucent feel.
    */

    background:
        linear-gradient(
            145deg,
            rgba(102, 46, 147, 0.90) 0%,
            rgba(102, 46, 147, 0.76) 100%
        );

    box-shadow:
        0 14px 32px
        rgba(58, 28, 74, 0.12),

        inset 0 1px 0
        rgba(255, 255, 255, 0.12);

    backdrop-filter:
        blur(14px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(120%);

    /*
        Geometric cuts on all four sides:

        TOP
        RIGHT
        BOTTOM
        LEFT

        The corners themselves are untouched
        so the rounded outer silhouette remains.
    */

    clip-path:
        polygon(

            /* top-left corner */
            0 0,

            /* TOP CUT */
            42% 0,
            45% 14px,
            55% 14px,
            58% 0,

            /* top-right corner */
            100% 0,

            /* RIGHT CUT */
            100% 40%,
            calc(100% - 14px) 44%,
            calc(100% - 14px) 56%,
            100% 60%,

            /* bottom-right corner */
            100% 100%,

            /* BOTTOM CUT */
            58% 100%,
            55% calc(100% - 14px),
            45% calc(100% - 14px),
            42% 100%,

            /* bottom-left corner */
            0 100%,

            /* LEFT CUT */
            0 60%,
            14px 56%,
            14px 44%,
            0 40%
        );

    text-align: center;
}



/* =========================================
   SECOND RECTANGLE

   SAME VIOLET — SLIGHTLY DIFFERENT
   TRANSPARENCY ONLY
========================================= */

.about-belief-card-secondary
.about-belief-content-card {
    background:
        linear-gradient(
            145deg,
            rgba(102, 46, 147, 0.84) 0%,
            rgba(102, 46, 147, 0.70) 100%
        );
}



/* =========================================
   RECTANGLE TITLES
========================================= */

.about-belief-label {
    position: relative;

    z-index: 2;

    width: 100%;

    margin: 0;

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

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.22rem
        );

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

    line-height: 1.2;

    letter-spacing: 0.045em;

    text-transform: uppercase;

    text-align: center;

    color: #F7BF72;
}



/* =========================================
   RECTANGLE COPY
========================================= */

.about-belief-text {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 420px;

    margin: 0;

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

    font-size:
        clamp(
            1.45rem,
            1.85vw,
            1.95rem
        );

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

    line-height: 1.16;

    letter-spacing: -0.03em;

    text-align: center;

    text-wrap: balance;

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


.about-belief-text strong {
    display: block;

    margin-block: 0.2rem;

    font-size: 1.08em;

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

    line-height: 1.08;

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



/* =========================================
   ORANGE DIVIDER
========================================= */

.about-definition-divider {
    width:
        min(
            86%,
            940px
        );

    height: 3px;

    margin:
        clamp(
            2.75rem,
            4vw,
            3.75rem
        )
        auto
        clamp(
            2.4rem,
            3.5vw,
            3.25rem
        );

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

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



/* =========================================
   SUPPORTING PARAGRAPHS
========================================= */

.about-definition-supporting {
    width: 100%;
    max-width: 1080px;

    margin-inline: auto;

    /*
        Three actual columns:

        paragraph  |  +  | paragraph

        This guarantees the plus is centred
        instead of visually leaning right.
    */

    display: grid;

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

    column-gap:
        clamp(
            2rem,
            4vw,
            4rem
        );

    align-items: center;
}



/* =========================================
   FIRST PARAGRAPH
========================================= */

.about-definition-body:first-child {
    grid-column: 1;

    justify-self: start;
}



/* =========================================
   SECOND PARAGRAPH
========================================= */

.about-definition-body:last-child {
    grid-column: 3;

    justify-self: start;
}



/* =========================================
   PLAIN PARAGRAPHS
========================================= */

.about-definition-body {
    width: 100%;
    max-width: 470px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    clip-path: none;

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

    font-size:
        clamp(
            1.05rem,
            1.3vw,
            1.18rem
        );

    line-height: 1.72;

    text-align: left;

    color: var(--color-text-secondary);

    transform: none;

    transition: none;
}


.about-definition-body:hover {
    transform: none;

    box-shadow: none;
}


.about-definition-body::before,
.about-definition-body::after {
    display: none;
}



/* =========================================
   CENTRED PLUS
========================================= */

.about-definition-supporting::before {
    display: none;
}


.about-definition-supporting::after {
    content: "+";

    /*
        The pseudo-element is now a normal
        GRID ITEM rather than absolute.
    */

    position: static;

    grid-column: 2;
    grid-row: 1;

    justify-self: center;
    align-self: center;

    width: 42px;
    height: 42px;

    display: flex;

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

    transform: none;

    border:
        1px solid
        rgba(102, 46, 147, 0.18);

    border-radius: 50%;

    background:
        rgba(102, 46, 147, 0.07);

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

    font-size: 1.55rem;

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

    line-height: 1;

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



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

.about-principles {
    display: grid;

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

    margin-top:
        clamp(
            3.5rem,
            4.8vw,
            4.5rem
        );

    border-top:
        2px solid
        var(--color-violet);

    border-bottom:
        2px solid
        var(--color-violet);
}


.about-principle {
    min-height: 220px;

    display: flex;
    flex-direction: column;

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

    padding:
        clamp(
            1.5rem,
            2.5vw,
            2.4rem
        );

    border-right:
        1px solid
        rgba(102, 46, 147, 0.18);

    text-align: center;
}


.about-principle:last-child {
    border-right: 0;
}


.about-principle-number {
    margin-bottom: 1.35rem;

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

    font-size: 0.9rem;

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

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


.about-principle h3 {
    margin:
        0
        0
        0.75rem;

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

    font-size:
        clamp(
            1.7rem,
            2.3vw,
            2.4rem
        );

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

    line-height: 1.05;

    letter-spacing: -0.04em;

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


.about-principle p {
    max-width: 340px;

    margin:
        0
        auto;

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

    font-size: 1rem;

    line-height: 1.6;

    color: var(--color-text-secondary);
}



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

.about-next {
    position: relative;

    padding-block:
        clamp(
            3.5rem,
            5.5vw,
            5rem
        );

    overflow: hidden;

    background: var(--color-violet-soft);
}


.about-next-inner {
    display: grid;

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

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

    align-items: center;
}


.about-next-label {
    margin: 0;

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

    font-size: 0.85rem;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

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


.about-next h2 {
    max-width: 900px;

    margin: 0;

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

    font-size:
        clamp(
            2.6rem,
            5vw,
            5.3rem
        );

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

    line-height: 0.98;

    letter-spacing: -0.05em;

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


.about-next-arrow {
    width:
        clamp(
            56px,
            6vw,
            76px
        );

    aspect-ratio: 1;

    display: inline-flex;

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

    border-radius: 50%;

    background: var(--color-violet);

    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2.2rem
        );

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



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

@media (max-width: 1100px) {

    .about-hero-grid {
        gap: 2rem;
    }


    .about-hero-copy {
        padding-left: 1rem;
    }


    .about-question-area {
        height:
            min(
                72svh,
                560px
            );

        transform: translateX(-5%);
    }


    .about-belief-content-card {
        min-height: 300px;

        padding:
            2.1rem
            1.75rem;
    }


    .about-belief-text {
        font-size:
            clamp(
                1.28rem,
                2vw,
                1.72rem
            );
    }


    .about-definition-supporting {
        column-gap:
            clamp(
                1.75rem,
                3vw,
                3rem
            );
    }

}



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

@media (max-width: 900px) {

    .about-hero {
        height: auto;

        min-height: auto;

        padding-top: 3.5rem;
        padding-bottom: 5rem;
    }


    .about-hero-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .about-hero-copy {
        max-width: 760px;

        padding-left: 0;
    }


    .about-question-area {
        width:
            min(
                88%,
                510px
            );

        height: auto;

        aspect-ratio: 0.82;

        transform: none;

        justify-self: center;
    }


    .about-belief-stack {
        gap: 1.25rem;
    }


    .about-principles {
        grid-template-columns: 1fr;
    }


    .about-principle {
        min-height: 200px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(102, 46, 147, 0.18);
    }


    .about-principle:last-child {
        border-bottom: 0;
    }

}



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

@media (max-width: 768px) {

    .about-hero {
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }


    .about-hero-title {
        font-size:
            clamp(
                3.4rem,
                15vw,
                5.3rem
            );
    }


    .about-hero-lead {
        max-width: 600px;

        font-size:
            clamp(
                1.1rem,
                4vw,
                1.3rem
            );
    }


    .about-question-area {
        width:
            min(
                92%,
                480px
            );
    }


    .question-note-one {
        left: 5%;
        top: 15%;
    }


    .question-note-two {
        right: 4%;
        top: 46%;
    }


    .question-note-three {
        left: 8%;
        bottom: 12%;
    }


    .about-definition {
        padding-top: 3.5rem;
        padding-bottom: 3.75rem;
    }


    .about-definition-heading {
        margin-bottom: 2rem;
    }


    .about-definition-main {
        margin-bottom: 2.4rem;
    }



    /* RECTANGLES STACK */

    .about-belief-stack {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .about-belief-content-card {
        min-height: 260px;

        padding:
            2rem
            1.5rem;

        border-radius: 24px;

        clip-path:
            polygon(

                0 0,

                40% 0,
                44% 12px,
                56% 12px,
                60% 0,

                100% 0,

                100% 39%,
                calc(100% - 12px) 44%,
                calc(100% - 12px) 56%,
                100% 61%,

                100% 100%,

                60% 100%,
                56% calc(100% - 12px),
                44% calc(100% - 12px),
                40% 100%,

                0 100%,

                0 61%,
                12px 56%,
                12px 44%,
                0 39%
            );
    }


    .about-belief-label {
        font-size:
            clamp(
                0.82rem,
                2.4vw,
                1rem
            );
    }


    .about-belief-text {
        font-size:
            clamp(
                1.1rem,
                4vw,
                1.45rem
            );

        line-height: 1.15;
    }



    /* ORANGE DIVIDER */

    .about-definition-divider {
        margin-top: 2.4rem;
        margin-bottom: 2.2rem;
    }



    /* PARAGRAPHS + CENTRED PLUS */

    .about-definition-supporting {
        grid-template-columns: 1fr;

        row-gap:
            clamp(
                1.5rem,
                5vw,
                2.1rem
            );
    }


    .about-definition-body {
        max-width: 620px;
    }


    .about-definition-body:first-child {
        grid-column: 1;
        grid-row: 1;
    }


    .about-definition-supporting::after {
        grid-column: 1;
        grid-row: 2;

        justify-self: center;

        width: 38px;
        height: 38px;

        margin: 0;

        font-size: 1.35rem;
    }


    .about-definition-body:last-child {
        grid-column: 1;
        grid-row: 3;
    }


    .about-principles {
        margin-top: 3.1rem;
    }


    .about-next-inner {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .about-next-arrow {
        margin-top: 0.5rem;
    }

}



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

@media (max-width: 480px) {

    .about-question-area {
        width:
            min(
                96%,
                420px
            );
    }


    .about-question-svg {
        width: 74%;
    }


    .question-note {
        font-size: 0.61rem;
    }


    .about-definition-title {
        font-size:
            clamp(
                2.75rem,
                13vw,
                4rem
            );
    }


    .about-definition-intro {
        font-size: 1.5rem;
    }


    .about-belief-content-card {
        min-height: 240px;

        padding:
            1.7rem
            1.2rem;

        border-radius: 21px;
    }


    .about-belief-label {
        font-size: 0.76rem;
    }


    .about-belief-text {
        font-size:
            clamp(
                1rem,
                4.25vw,
                1.25rem
            );
    }


    .about-definition-body {
        font-size: 1rem;

        line-height: 1.65;
    }


    .about-definition-supporting::after {
        width: 34px;
        height: 34px;

        font-size: 1.2rem;
    }


    .about-principle {
        min-height: 190px;

        padding: 1.5rem;
    }

}



/* =========================================
   SHORT DESKTOP SCREENS
========================================= */

@media
    (min-width: 901px)
    and
    (max-height: 720px) {

    .about-hero {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }


    .about-hero-title {
        margin-bottom: 1rem;

        font-size:
            clamp(
                3.3rem,
                5.7vw,
                5.6rem
            );
    }


    .about-hero-lead {
        margin-bottom: 1.25rem;

        font-size:
            clamp(
                1.08rem,
                1.4vw,
                1.25rem
            );

        line-height: 1.5;
    }


    .about-question-area {
        height:
            min(
                78svh,
                540px
            );
    }


    .about-scroll-link {
        min-height: 43px;

        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

}



/* =========================================
   FOCUS
========================================= */

.about-scroll-link:focus-visible {
    outline:
        3px solid
        rgba(247, 148, 29, 0.35);

    outline-offset: 4px;
}



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

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

    .about-scroll-link {
        transition: none;
    }

}

/* =========================================
   DEEP RECTANGLES + ASYMMETRICAL COPY
========================================= */


/* Deeper purple / Deep Ink treatment */

.about-belief-content-card,
.about-belief-card-secondary .about-belief-content-card {
    background:
        linear-gradient(
            145deg,
            rgba(33, 22, 39, 0.96) 0%,
            rgba(58, 28, 74, 0.88) 100%
        );

    backdrop-filter:
        blur(14px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(115%);
}


/* Drop the right paragraph lower */

.about-definition-body:last-child {
    margin-top: 5vh;
}


/* Keep mobile spacing more controlled */

@media (max-width: 768px) {

    .about-definition-body:last-child {
        margin-top: 1.5rem;
    }

}

/* =========================================
   REMOVE SUPPORTING PARAGRAPH PLUS
========================================= */

.about-definition-supporting::after {
    display: none;
}

/* =========================================
   ABOUT PURPOSE TITLE WORD WRAP FIX
========================================= */

.about-purpose-title
.about-purpose-word {
    display:
        inline;

    white-space:
        nowrap;

    color:
        inherit;
}