/* ======================================================================
   D2C GAME
   ABOUT PAGE — MOBILE

   01 — ABOUT HERO

   Mobile only.
   Desktop remains controlled by d2c-desktop.css.
   ====================================================================== */

@media (max-width: 1023px) {


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

    .about-page {
        --about-mobile-purple: #8e4dff;
        --about-mobile-purple-light: #a86fff;
        --about-mobile-gold: #ffc43a;
        --about-mobile-bg: #060a0f;
        --about-mobile-copy: rgba(232,236,242,.82);
        --about-mobile-muted: rgba(220,225,233,.62);

        background: var(--about-mobile-bg);
    }


    .about-page .about-content {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    .about-page .about-shell {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 30px;
        padding-right: 30px;
    }



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

    .about-page .site-header {
        position: absolute;

        z-index: 100;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 78px;

        margin: 0;

        border: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,.045);

        background:
            linear-gradient(
                180deg,
                rgba(5,8,12,.92) 0%,
                rgba(5,8,12,.68) 100%
            );

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .about-page .header-inner {
        display: flex;

        align-items: center;

        width: 100%;
        max-width: none;

        height: 78px;
        min-height: 78px;

        margin: 0;

        padding:
            0 27px;
    }



    /* logo */

    .about-page .brand {
        flex: 0 0 auto;

        margin: 0;

        color: #ffffff;

        font-size: 23px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.025em;

        text-decoration: none;
    }



    /* hamburger */

    .about-page .menu-toggle {
        display: flex;

        flex-direction: column;

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

        flex: 0 0 auto;

        gap: 5px;

        width: 39px;
        height: 39px;

        margin-left: 14px;
        padding: 0;

        border: 0;

        background: transparent;

        color: #ffffff;
    }


    .about-page .menu-toggle span {
        display: block;

        width: 25px;
        height: 2px;

        margin: 0;

        border: 0;
        border-radius: 99px;

        background: #ffffff;
    }



    /*
     * Keep normal mobile navigation behavior.
     */

    .about-page .site-nav {
        color: #ffffff;
    }



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

    .about-page .about-hero {
        position: relative;

        width: 100%;

        height: 100svh;
        min-height: 840px;
        max-height: 980px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background:
            var(--about-mobile-bg);

        color: #ffffff;
    }



    /* ==================================================================
       BACKGROUND
       ================================================================== */

    .about-page
    .about-hero__background {
        position: absolute;

        z-index: 0;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            var(--about-mobile-bg);
    }


    .about-page
    .about-hero__picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .about-page
    .about-hero__picture img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Works well with the reference:
         * Roman is mainly in lower-right part.
         *
         * Your separate mobile image can still be cropped
         * exactly for the final composition.
         */
        object-position:
            59% center;
    }



    /* ==================================================================
       DARK MOBILE OVERLAY
       ================================================================== */

    .about-page
    .about-hero__shade {
        position: absolute;

        z-index: 1;

        inset: 0;

        background:

            linear-gradient(
                90deg,

                rgba(4,7,11,.98) 0%,
                rgba(4,7,11,.94) 32%,
                rgba(4,7,11,.72) 54%,
                rgba(4,7,11,.34) 74%,
                rgba(4,7,11,.08) 100%
            ),

            linear-gradient(
                180deg,

                rgba(4,7,11,.40) 0%,
                rgba(4,7,11,.10) 30%,
                rgba(4,7,11,.06) 58%,
                rgba(4,7,11,.38) 78%,
                rgba(4,7,11,.96) 100%
            );

        pointer-events: none;
    }



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

    .about-page
    .about-hero__inner {
        position: relative;

        z-index: 3;

        display: flex;

        flex-direction: column;

        width: 100%;
        height: 100%;

        min-height: inherit;

        margin: 0;

        padding:
            132px 30px
            38px;
    }



    /* ==================================================================
       MY JOURNEY
       ================================================================== */

    .about-page
    .about-hero
    .about-kicker {
        display: block;

        width: auto;

        margin:
            0 0
            20px;

        padding: 0;

        color:
            var(--about-mobile-purple-light);

        font-size: 10px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .37em;

        text-transform: uppercase;
    }


    /*
     * Desktop uses line before kicker.
     * Mobile reference does not.
     */

    .about-page
    .about-hero
    .about-kicker::before,

    .about-page
    .about-hero
    .about-kicker::after {
        display: none;

        content: none;
    }



    /* ==================================================================
       H1
       ================================================================== */

    .about-page
    .about-hero h1 {
        width: 100%;
        max-width: 390px;

        margin: 0;

        color: #ffffff;

        font-size:
            clamp(
                35px,
                9.2vw,
                43px
            );

        line-height: .94;

        font-weight: 900;

        letter-spacing:
            -.052em;
    }


    .about-page
    .about-hero h1 span {
        color:
            var(--about-mobile-purple);
    }



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

    .about-page
    .about-hero__intro {
        width: 205px;
        max-width: 62%;

        margin:
            28px 0
            0;

        color:
            var(--about-mobile-copy);

        font-size: 15px;
        line-height: 1.5;

        font-weight: 400;

        letter-spacing:
            -.008em;
    }



    /* ==================================================================
       SIGNATURE
       ================================================================== */

    .about-page
    .about-signature {
        display: flex;

        align-items: flex-start;

        gap: 15px;

        width: fit-content;

        margin:
            27px 0
            0;
    }


    .about-page
    .about-signature
    > span {
        display: block;

        flex: 0 0 auto;

        width: 31px;
        height: 1px;

        margin-top: 6px;

        background:
            var(--about-mobile-purple);
    }


    .about-page
    .about-signature
    > div {
        display: flex;

        flex-direction: column;

        gap: 8px;
    }


    .about-page
    .about-signature strong {
        margin: 0;

        color:
            rgba(255,255,255,.86);

        font-size: 8px;
        line-height: 1;

        font-weight: 700;

        letter-spacing: .30em;

        text-transform: uppercase;
    }


    .about-page
    .about-signature small {
        margin: 0;

        color:
            rgba(220,224,231,.56);

        font-size: 7px;
        line-height: 1;

        font-weight: 600;

        letter-spacing: .25em;

        text-transform: uppercase;
    }



    /* ==================================================================
       SCROLL TO SEE THE JOURNEY
       ================================================================== */

    .about-page
    .about-scroll {
        position: absolute;

        z-index: 10;

        left: 30px;
        bottom: 0;

        display: grid;

        grid-template-columns:
            18px
            minmax(0, 120px);

        gap: 20px;

        align-items: start;

        width: 165px;
        height: 125px;

        margin: 0;
        padding: 0;
    }



    /*
     * Existing PHP element is called "mouse",
     * but on mobile we transform it into the
     * purple timeline NODE from the reference.
     */

    .about-page
    .about-scroll__mouse {
        position: relative;

        display: block;

        box-sizing: border-box;

        width: 16px;
        height: 16px;

        margin:
            4px 0
            0;

        border:
            3px solid
            var(--about-mobile-purple);

        border-radius: 50%;

        background:
            #11131a;

        box-shadow:
            0 0 0 3px
            rgba(142,77,255,.15),
            0 0 11px
            rgba(142,77,255,.45);
    }



    /*
     * Remove desktop mouse wheel.
     */

    .about-page
    .about-scroll__mouse::before {
        display: none;

        content: none;
    }



    /*
     * Purple line continues down to Section 02.
     */

    .about-page
    .about-scroll__mouse::after {
        content: "";

        position: absolute;

        z-index: -1;

        top: 13px;
        left: 50%;

        width: 1px;
        height: 112px;

        background:
            linear-gradient(
                180deg,
                rgba(142,77,255,.92),
                rgba(142,77,255,.55)
            );

        transform:
            translateX(-50%);
    }



    /* scroll label */

    .about-page
    .about-scroll
    > span:last-child {
        display: block;

        width: 118px;
        max-width: 118px;

        margin: 0;

        padding-top: 3px;

        color:
            rgba(255,255,255,.72);

        font-size: 7px;
        line-height: 1.55;

        font-weight: 800;

        letter-spacing: .29em;

        text-transform: uppercase;
    }

}



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

@media (max-width: 430px) {

    .about-page .about-shell {
        padding-left: 24px;
        padding-right: 24px;
    }


    .about-page .header-inner {
        padding-left: 22px;
        padding-right: 22px;
    }


    .about-page .brand {
        font-size: 21px;
    }


    .about-page .about-hero {
        min-height: 800px;
    }


    .about-page
    .about-hero__inner {
        padding:
            122px 24px
            34px;
    }


    .about-page
    .about-hero
    .about-kicker {
        font-size: 9px;

        margin-bottom: 18px;
    }


    .about-page
    .about-hero h1 {
        max-width: 340px;

        font-size:
            clamp(
                33px,
                9.4vw,
                39px
            );
    }


    .about-page
    .about-hero__intro {
        width: 195px;

        margin-top: 25px;

        font-size: 14px;
    }


    .about-page
    .about-signature {
        margin-top: 24px;
    }


    .about-page
    .about-scroll {
        left: 24px;

        grid-template-columns:
            16px 115px;

        gap: 18px;
    }

}



/* ======================================================================
   SHORT MOBILE SCREENS
   ====================================================================== */

@media
(
    max-width: 1023px
)
and
(
    max-height: 760px
) {

    .about-page
    .about-hero {
        height: auto;

        min-height: 760px;
    }


    .about-page
    .about-hero__inner {
        padding-top: 112px;
    }


    .about-page
    .about-hero h1 {
        font-size: 34px;
    }


    .about-page
    .about-hero__intro {
        margin-top: 22px;

        font-size: 13px;
    }


    .about-page
    .about-signature {
        margin-top: 20px;
    }


    
}

/* ======================================================================
   D2C GAME
   ABOUT PAGE — MOBILE

   02 — MY JOURNEY
   STEPS 01–05

   IMPORTANT:
   Uses the EXISTING public/about.php HTML.
   No new mobile HTML is required.
   Desktop is untouched.
   ====================================================================== */

@media (max-width: 1023px) {


    /* ==================================================================
       SHARED JOURNEY VARIABLES
       ================================================================== */

    .about-page {
        --about-mobile-rail-x: 38px;

        --about-mobile-bg: #05090e;
        --about-mobile-purple: #8449ff;
        --about-mobile-purple-light: #a66eff;

        --about-mobile-white: #ffffff;

        --about-mobile-copy:
            rgba(236,240,246,.88);

        --about-mobile-muted:
            rgba(220,225,233,.60);

        --about-mobile-faint:
            rgba(220,225,233,.42);

        --about-mobile-border:
            rgba(255,255,255,.075);
    }



    /* ==================================================================
       ENTIRE JOURNEY
       ================================================================== */

    .about-page
    .about-journey {
        position: relative;

        width: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background:
            var(--about-mobile-bg);

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



    /* ==================================================================
       ONE CONTINUOUS VERTICAL LINE
       Runs through all five stages.
       ================================================================== */

    .about-page
    .about-journey__line {
        position: absolute;

        z-index: 20;

        top: 0;
        bottom: 0;

        left:
            var(--about-mobile-rail-x);

        width: 1px;

        background:
            linear-gradient(
                180deg,

                rgba(133,75,255,.90) 0%,
                rgba(133,75,255,.70) 18%,
                rgba(133,75,255,.54) 70%,
                rgba(133,75,255,.25) 100%
            );

        pointer-events: none;
    }



    /* ==================================================================
       EACH JOURNEY STAGE
       ================================================================== */

    .about-page
    .about-journey-stage {
        position: relative;

        width: 100%;

        min-height: 650px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border-top:
            1px solid
            var(--about-mobile-border);

        background:
            var(--about-mobile-bg);

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


    .about-page
    .about-journey-stage:first-of-type {
        border-top: 0;
    }



    /* ==================================================================
       FULL-STAGE BACKGROUND IMAGE
       ================================================================== */

    .about-page
    .about-journey-stage__background {
        position: absolute;

        z-index: 0;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            #070b10;
    }


    .about-page
    .about-journey-stage__picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .about-page
    .about-journey-stage__picture img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position:
            center center;
    }



    /* ==================================================================
       INDIVIDUAL MOBILE IMAGE CROPS
       Change percentages later if a specific uploaded image needs it.
       ================================================================== */

    .about-page
    .about-journey-stage--1
    .about-journey-stage__picture img {
        object-position:
            58% center;
    }


    .about-page
    .about-journey-stage--2
    .about-journey-stage__picture img {
        object-position:
            55% center;
    }


    .about-page
    .about-journey-stage--3
    .about-journey-stage__picture img {
        object-position:
            60% center;
    }


    .about-page
    .about-journey-stage--4
    .about-journey-stage__picture img {
        object-position:
            60% center;
    }


    .about-page
    .about-journey-stage--5
    .about-journey-stage__picture img {
        object-position:
            58% center;
    }



    /* ==================================================================
       DARK SHADE

       Strongest behind copy at the top/left.
       Image becomes clearer toward lower/right area.
       ================================================================== */

    .about-page
    .about-journey-stage__shade {
        position: absolute;

        z-index: 1;

        inset: 0;

        background:

            linear-gradient(
                90deg,

                rgba(4,8,12,.97) 0%,
                rgba(4,8,12,.94) 31%,
                rgba(4,8,12,.76) 54%,
                rgba(4,8,12,.42) 75%,
                rgba(4,8,12,.16) 100%
            ),

            linear-gradient(
                180deg,

                rgba(4,8,12,.83) 0%,
                rgba(4,8,12,.57) 27%,
                rgba(4,8,12,.16) 54%,
                rgba(4,8,12,.04) 72%,
                rgba(4,8,12,.38) 100%
            );

        pointer-events: none;
    }



    /* ==================================================================
       INNER CONTENT

       The content starts after the timeline.
       ================================================================== */

    .about-page
    .about-journey-stage__inner {
        position: relative;

        z-index: 5;

        width: 100%;
        max-width: none;

        min-height: 650px;

        margin: 0;

        padding:
            38px 24px
            30px
            68px;
    }



    /* ==================================================================
       TIMELINE NODE
       ================================================================== */

    .about-page
    .about-journey-stage__node {
        position: absolute;

        z-index: 30;

        top: 45px;

        left:
            calc(
                var(--about-mobile-rail-x)
                - 68px
                - 8px
            );

        display: block;

        box-sizing: border-box;

        width: 16px;
        height: 16px;

        border:
            2px solid
            rgba(235,226,255,.92);

        border-radius:
            50%;

        background:
            #080c11;

        box-shadow:
            0 0 0 2px
            rgba(132,73,255,.13);
    }



    /*
     * Stage 01 active purple node,
     * matching your reference.
     */

    .about-page
    .about-journey-stage--1
    .about-journey-stage__node {
        border-color:
            #d6beff;

        background:
            var(--about-mobile-purple);

        box-shadow:
            0 0 0 3px
            rgba(132,73,255,.18),

            0 0 13px
            rgba(132,73,255,.55);
    }



    /* ==================================================================
       NUMBER + DASH + CATEGORY
       ================================================================== */

    .about-page
    .about-journey-stage__heading {
        display: flex;

        align-items: center;

        gap: 12px;

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

        margin:
            0 0
            20px;
    }



    /* 01 / 02 / 03 / 04 / 05 */

    .about-page
    .about-journey-stage__number {
        display: block;

        flex:
            0 0 auto;

        min-width: 40px;

        margin: 0;

        color:
            var(--about-mobile-purple-light);

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 34px;
        line-height: .9;

        font-weight: 400;

        font-style: italic;

        letter-spacing:
            -.045em;
    }



    /*
     * Later stages are slightly quieter like reference.
     */

    .about-page
    .about-journey-stage:not(.about-journey-stage--1)
    .about-journey-stage__number {
        color:
            rgba(229,233,240,.62);
    }



    /* little dash */

    .about-page
    .about-journey-stage__dash {
        display: block;

        flex:
            0 0 auto;

        width: 26px;
        height: 1px;

        background:
            var(--about-mobile-purple);
    }



    /* stage category */

    .about-page
    .about-journey-stage__heading
    small {
        display: block;

        min-width: 0;

        margin: 0;

        color:
            rgba(222,227,235,.65);

        font-size: 7px;
        line-height: 1.55;

        font-weight: 700;

        letter-spacing: .25em;

        text-transform: uppercase;
    }



    /* ==================================================================
       STAGE H2
       ================================================================== */

    .about-page
    .about-journey-stage
    h2 {
        width: 245px;
        max-width: 72vw;

        margin: 0;

        color:
            var(--about-mobile-white);

        text-align: left;

        font-size: 35px;
        line-height: .94;

        font-weight: 900;

        letter-spacing:
            -.052em;
    }


    .about-page
    .about-journey-stage
    h2 span {
        color:
            var(--about-mobile-purple);
    }



    /* ==================================================================
       DESCRIPTION
       ================================================================== */

    .about-page
    .about-journey-stage__copy {
        width: 245px;
        max-width: 72vw;

        margin:
            19px 0
            0;
    }


    .about-page
    .about-journey-stage__copy
    p {
        margin:
            0 0
            11px;

        color:
            var(--about-mobile-copy);

        font-size: 12px;
        line-height: 1.52;

        font-weight: 400;

        letter-spacing:
            -.006em;
    }


    .about-page
    .about-journey-stage__copy
    p:last-child {
        margin-bottom: 0;
    }



    /* ==================================================================
       MOBILE REFERENCE DOES NOT SHOW THE 3 LESSONS AS A DESKTOP ROW.

       Hide them on this mobile design.
       They still remain editable in Admin and visible on desktop.
       ================================================================== */

    .about-page
    .about-lessons {
        display: none;
    }



    /* ==================================================================
       DESKTOP IMAGE CAPTION
       Hide on mobile to keep the clean composition.
       ================================================================== */

    .about-page
    .about-journey-stage__caption {
        display: none;
    }



    /* ==================================================================
       STAGE 01
       ================================================================== */

    .about-page
    .about-journey-stage--1,

    .about-page
    .about-journey-stage--1
    .about-journey-stage__inner {
        min-height: 650px;
    }


    .about-page
    .about-journey-stage--1
    .about-journey-stage__inner {
        padding-top: 38px;
    }


    .about-page
    .about-journey-stage--1
    .about-journey-stage__node {
        top: 45px;
    }



    /* ==================================================================
       STAGE 02
       ================================================================== */

    .about-page
    .about-journey-stage--2,

    .about-page
    .about-journey-stage--2
    .about-journey-stage__inner {
        min-height: 660px;
    }



    /* ==================================================================
       STAGE 03
       ================================================================== */

    .about-page
    .about-journey-stage--3,

    .about-page
    .about-journey-stage--3
    .about-journey-stage__inner {
        min-height: 650px;
    }



    /* ==================================================================
       STAGE 04
       ================================================================== */

    .about-page
    .about-journey-stage--4,

    .about-page
    .about-journey-stage--4
    .about-journey-stage__inner {
        min-height: 650px;
    }



    /* ==================================================================
       STAGE 05
       ================================================================== */

    .about-page
    .about-journey-stage--5,

    .about-page
    .about-journey-stage--5
    .about-journey-stage__inner {
        min-height: 650px;
    }



    /* ==================================================================
       MAKE THE FINAL STAGE END CLEANLY
       ================================================================== */

    .about-page
    .about-journey-stage--5 {
        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }

}



/* ======================================================================
   ABOUT JOURNEY
   SMALL MOBILE — 430px AND BELOW
   ====================================================================== */

@media (max-width: 430px) {


    .about-page {
        --about-mobile-rail-x: 32px;
    }



    /* ==================================================================
       INNER
       ================================================================== */

    .about-page
    .about-journey-stage__inner {
        min-height: 625px;

        padding:
            34px 18px
            26px
            58px;
    }



    /* ==================================================================
       NODE

       inner left padding changed from 68 → 58.
       ================================================================== */

    .about-page
    .about-journey-stage__node {
        top: 41px;

        left:
            calc(
                var(--about-mobile-rail-x)
                - 58px
                - 8px
            );
    }



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

    .about-page
    .about-journey-stage__heading {
        gap: 10px;

        max-width: 310px;

        margin-bottom: 18px;
    }


    .about-page
    .about-journey-stage__number {
        min-width: 37px;

        font-size: 31px;
    }


    .about-page
    .about-journey-stage__dash {
        width: 23px;
    }


    .about-page
    .about-journey-stage__heading
    small {
        font-size: 6px;

        letter-spacing: .23em;
    }



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

    .about-page
    .about-journey-stage
    h2 {
        width: 225px;
        max-width: 74vw;

        font-size: 32px;
    }



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

    .about-page
    .about-journey-stage__copy {
        width: 225px;
        max-width: 74vw;

        margin-top: 17px;
    }


    .about-page
    .about-journey-stage__copy
    p {
        font-size: 11px;

        line-height: 1.5;
    }



    /* ==================================================================
       HEIGHTS
       ================================================================== */

    .about-page
    .about-journey-stage--1,

    .about-page
    .about-journey-stage--1
    .about-journey-stage__inner,

    .about-page
    .about-journey-stage--2,

    .about-page
    .about-journey-stage--2
    .about-journey-stage__inner,

    .about-page
    .about-journey-stage--3,

    .about-page
    .about-journey-stage--3
    .about-journey-stage__inner,

    .about-page
    .about-journey-stage--4,

    .about-page
    .about-journey-stage--4
    .about-journey-stage__inner,

    .about-page
    .about-journey-stage--5,

    .about-page
    .about-journey-stage--5
    .about-journey-stage__inner {
        min-height: 625px;
    }


    .about-page
    .about-journey-stage--1
    .about-journey-stage__node {
        top: 41px;
    }

}



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

@media (max-width: 370px) {


    .about-page {
        --about-mobile-rail-x: 28px;
    }


    .about-page
    .about-journey-stage__inner {
        padding-left: 51px;
        padding-right: 15px;
    }


    .about-page
    .about-journey-stage__node {
        left:
            calc(
                var(--about-mobile-rail-x)
                - 51px
                - 8px
            );
    }


    .about-page
    .about-journey-stage
    h2 {
        width: 210px;

        font-size: 29px;
    }


    .about-page
    .about-journey-stage__copy {
        width: 210px;
    }


    .about-page
    .about-journey-stage__heading
    small {
        letter-spacing: .18em;
    }

}
/* ======================================================================
   D2C GAME
   ABOUT PAGE — MOBILE

   03 — THE BOTTOM LINE
   04 — READY TO BUILD YOURS

   Uses existing public/about.php structure.
   ====================================================================== */


/*
 * Mobile-only card images.
 * Hidden everywhere unless mobile rules below enable them.
 */
.about-path-card__mobile-bg {
    display: none;
}


@media (max-width: 1023px) {


    /* ==================================================================
       03 — THE BOTTOM LINE
       ================================================================== */

    .about-page
    .about-bottom-line {
        position: relative;

        width: 100%;

        min-height: 780px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background:
            #07101b;

        color:
            #ffffff;
    }



    /* ==================================================================
       BACKGROUND IMAGE
       ================================================================== */

    .about-page
    .about-bottom-line__background {
        position: absolute;

        z-index: 0;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            #07101b;
    }


    .about-page
    .about-bottom-line__picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .about-page
    .about-bottom-line__picture img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Mountain + Roman composition.
         */
        object-position:
            58% center;
    }



    /* ==================================================================
       OVERLAY
       ================================================================== */

    .about-page
    .about-bottom-line__shade {
        position: absolute;

        z-index: 1;

        inset: 0;

        background:

            linear-gradient(
                180deg,

                rgba(5,11,20,.91) 0%,
                rgba(5,11,20,.80) 19%,
                rgba(5,11,20,.48) 39%,
                rgba(5,11,20,.14) 59%,
                rgba(5,11,20,.04) 74%,
                rgba(5,11,20,.23) 100%
            ),

            linear-gradient(
                90deg,

                rgba(5,11,20,.54) 0%,
                rgba(5,11,20,.26) 60%,
                rgba(5,11,20,.04) 100%
            );

        pointer-events: none;
    }



    /* ==================================================================
       INNER
       ================================================================== */

    .about-page
    .about-bottom-line__inner {
        position: relative;

        z-index: 3;

        display: block;

        width: 100%;
        max-width: none;

        min-height: 780px;

        margin: 0;

        padding:
            61px 31px
            42px;
    }



    /* ==================================================================
       KICKER
       ================================================================== */

    .about-page
    .about-bottom-line
    .about-kicker {
        display: block;

        width: auto;

        margin:
            0 0
            39px;

        padding: 0;

        color:
            #a567ff;

        font-size: 9px;
        line-height: 1;

        font-weight: 800;

        letter-spacing:
            .36em;

        text-transform:
            uppercase;
    }


    .about-page
    .about-bottom-line
    .about-kicker::before,

    .about-page
    .about-bottom-line
    .about-kicker::after {
        display: none;

        content: none;
    }



    /*
     * Small purple underline beneath kicker.
     */

    .about-page
    .about-bottom-line
    .about-kicker::after {
        content: "";

        display: block;

        width: 31px;
        height: 2px;

        margin-top: 17px;

        background:
            #8745ff;
    }



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

    .about-page
    .about-bottom-line
    h2 {
        width: 315px;
        max-width: 88%;

        margin: 0;

        color: #ffffff;

        text-align: left;

        font-size:
            clamp(
                33px,
                8.7vw,
                40px
            );

        line-height:
            1.02;

        font-weight: 900;

        letter-spacing:
            -.045em;
    }


    .about-page
    .about-bottom-line
    h2 span {
        color:
            #8547ff;
    }



    /* ==================================================================
       BODY TEXT
       ================================================================== */

    .about-page
    .about-bottom-line__text {
        width: 285px;
        max-width: 83%;

        margin:
            30px 0
            0;

        padding: 0;

        color:
            rgba(236,240,246,.82);

        font-size: 14px;
        line-height: 1.55;

        font-weight: 400;

        letter-spacing:
            -.008em;
    }


    /*
     * Desktop CSS creates a line using ::before.
     * Remove it on mobile.
     */

    .about-page
    .about-bottom-line__text::before {
        display: none;

        content: none;
    }



    /* ==================================================================
       SIGNATURE
       ================================================================== */

    .about-page
    .about-bottom-line__name {
        display: flex;

        align-items: center;

        gap: 18px;

        margin:
            27px 0
            0;
    }


    .about-page
    .about-bottom-line__name
    > span {
        display: block;

        width: 31px;
        height: 1px;

        background:
            #894cff;
    }


    .about-page
    .about-bottom-line__name
    strong {
        margin: 0;

        color:
            rgba(255,255,255,.71);

        font-size: 8px;
        line-height: 1;

        font-weight: 700;

        letter-spacing:
            .28em;

        text-transform:
            uppercase;
    }



    /* ==================================================================
       04 — READY TO BUILD YOURS
       ================================================================== */

    .about-page
    .about-paths {
        position: relative;

        width: 100%;

        margin: 0;

        padding:
            55px 0
            65px;

        overflow: hidden;

        background:
            #ffffff;

        color:
            #07090d;
    }



    /*
     * Remove desktop decorative circles.
     */

    .about-page
    .about-paths::before,

    .about-page
    .about-paths::after {
        display: none;

        content: none;
    }



    .about-page
    .about-paths
    > .about-shell {
        position: relative;

        z-index: 2;

        width: 100%;
        max-width: none;

        margin: 0;

        padding:
            0 21px;
    }



    /* ==================================================================
       READY KICKER
       ================================================================== */

    .about-page
    .about-paths
    .about-kicker--center {
        display: block;

        width: auto;

        margin:
            0 auto
            36px;

        padding: 0;

        color:
            #8243ff;

        text-align: center;

        font-size: 9px;
        line-height: 1;

        font-weight: 800;

        letter-spacing:
            .34em;

        text-transform:
            uppercase;
    }


    /*
     * Reference has only a short centered line underneath.
     */

    .about-page
    .about-paths
    .about-kicker--center::before {
        display: none;

        content: none;
    }


    .about-page
    .about-paths
    .about-kicker--center::after {
        content: "";

        display: block;

        width: 35px;
        height: 2px;

        margin:
            17px auto
            0;

        background:
            #7f42ff;
    }



    /* ==================================================================
       MAIN TITLE
       ================================================================== */

    .about-page
    .about-paths__title {
        width: 100%;
        max-width: 390px;

        margin:
            0 auto;

        color:
            #07090d;

        text-align: center;

        font-size:
            clamp(
                35px,
                9vw,
                43px
            );

        line-height:
            .98;

        font-weight: 900;

        letter-spacing:
            -.05em;
    }


    .about-page
    .about-paths__title
    span {
        color:
            #8648ff;
    }



    /*
     * Existing extra divider below title is not needed,
     * because reference uses the line beneath the kicker.
     */

    .about-page
    .about-paths__title-line {
        display: none;
    }



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

    .about-page
    .about-paths__intro {
        width: 100%;
        max-width: 370px;

        margin:
            23px auto
            0;

        color:
            #667082;

        text-align: center;

        font-size: 15px;
        line-height: 1.45;

        font-weight: 400;

        letter-spacing:
            -.01em;
    }



    /* ==================================================================
       OUTER DARK PANEL

       Desktop has one large dark panel around both cards.
       Mobile reference does NOT.
       ================================================================== */

    .about-page
    .about-path-panel {
        position: relative;

        width: 100%;

        margin:
            35px 0
            0;

        padding: 0;

        overflow: visible;

        border: 0;
        border-radius: 0;

        background:
            transparent;

        box-shadow: none;

        color:
            #ffffff;
    }


    .about-page
    .about-path-panel::before,

    .about-page
    .about-path-panel::after {
        display: none;

        content: none;
    }



    /* panel title hidden on mobile reference */

    .about-page
    .about-path-panel__kicker {
        display: none;
    }



    /* ==================================================================
       STACKED CARDS
       ================================================================== */

    .about-page
    .about-path-panel__grid {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 10px;

        width: 100%;

        margin: 0;
        padding: 0;
    }



    /* ==================================================================
       CARD
       ================================================================== */

    .about-page
    .about-path-card {
        position: relative;

        z-index: 1;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        width: 100%;

        min-height: 272px;

        margin: 0;

        padding:
            26px 27px
            25px;

        overflow: hidden;

        border:
            1px solid
            rgba(255,255,255,.08);

        border-radius:
            10px;

        background:
            #07101a;

        color:
            #ffffff;

        box-shadow:
            0 7px 22px
            rgba(8,14,23,.08);
    }



    /* ==================================================================
       MOBILE BACKGROUND IMAGE
       ================================================================== */

    .about-page
    .about-path-card__mobile-bg {
        position: absolute;

        z-index: -2;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }


    .about-page
    .about-path-card__mobile-bg img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }



    /* card 1 crop */

    .about-page
    .about-path-card--1
    .about-path-card__mobile-bg img {
        object-position:
            68% center;
    }



    /* card 2 crop */

    .about-page
    .about-path-card--2
    .about-path-card__mobile-bg img {
        object-position:
            68% center;
    }



    /* ==================================================================
       DARK LEFT CARD GRADIENT

       Keeps copy readable and lets image remain visible right.
       ================================================================== */

    .about-page
    .about-path-card::before {
        content: "";

        position: absolute;

        z-index: -1;

        inset: 0;

        background:

            linear-gradient(
                90deg,

                rgba(5,11,18,.98) 0%,
                rgba(5,11,18,.94) 30%,
                rgba(5,11,18,.82) 46%,
                rgba(5,11,18,.48) 63%,
                rgba(5,11,18,.15) 82%,
                rgba(5,11,18,.05) 100%
            ),

            linear-gradient(
                180deg,

                rgba(5,11,18,.10) 0%,
                rgba(5,11,18,.04) 67%,
                rgba(5,11,18,.22) 100%
            );

        pointer-events: none;
    }



    /* ==================================================================
       CARD TOP
       ================================================================== */

    .about-page
    .about-path-card__top {
        position: relative;

        z-index: 2;

        display: flex;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 14px;

        width: 100%;

        margin: 0;
    }



    /* icon first */

    .about-page
    .about-path-card__top
    svg {
        order: -1;

        flex: 0 0 auto;

        width: 33px;
        height: 33px;

        margin: 0;

        color:
            #8c49ff;
    }



    /* label */

    .about-page
    .about-path-card__top
    small {
        display: block;

        max-width: 220px;

        margin:
            7px 0
            0;

        color:
            rgba(234,237,243,.80);

        font-size: 7px;
        line-height: 1.3;

        font-weight: 700;

        letter-spacing:
            .26em;

        text-transform:
            uppercase;
    }



    /* ==================================================================
       CARD TITLE
       ================================================================== */

    .about-page
    .about-path-card
    h3 {
        position: relative;

        z-index: 2;

        width: 245px;
        max-width: 72%;

        margin:
            19px 0
            0;

        color:
            #ffffff;

        font-size: 23px;
        line-height: 1.08;

        font-weight: 900;

        letter-spacing:
            -.035em;
    }



    /* ==================================================================
       CARD COPY
       ================================================================== */

    .about-page
    .about-path-card
    > p {
        position: relative;

        z-index: 2;

        width: 210px;
        max-width: 65%;

        margin:
            12px 0
            0;

        color:
            rgba(226,231,239,.79);

        font-size: 12px;
        line-height: 1.45;

        font-weight: 400;
    }



    /* ==================================================================
       CARD BUTTON
       ================================================================== */

    .about-page
    .about-path-card__button {
        position: relative;

        z-index: 2;

        display: flex;

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

        gap: 18px;

        width: 235px;
        max-width: 70%;

        height: 43px;
        min-height: 43px;

        margin:
            auto 0
            0;

        padding:
            0 16px;

        border-radius:
            6px;

        text-decoration:
            none;

        font-size: 12px;
        line-height: 1;

        font-weight: 800;

        letter-spacing:
            -.01em;
    }



    /* ==================================================================
       PATH 1 — GOLD
       ================================================================== */

    .about-page
    .about-path-card__button--gold {
        border: 0;

        background:
            linear-gradient(
                90deg,
                #ffc331,
                #ffd154
            );

        color:
            #080a0d;

        box-shadow:
            0 7px 19px
            rgba(255,195,49,.12);
    }



    /* ==================================================================
       PATH 2 — OUTLINE
       ================================================================== */

    .about-page
    .about-path-card__button--outline {
        border:
            1px solid
            rgba(255,255,255,.85);

        background:
            rgba(7,13,21,.18);

        color:
            #ffffff;
    }

}



/* ======================================================================
   ABOUT MOBILE
   430px AND BELOW
   ====================================================================== */

@media (max-width: 430px) {


    /* ==================================================================
       BOTTOM LINE
       ================================================================== */

    .about-page
    .about-bottom-line,

    .about-page
    .about-bottom-line__inner {
        min-height: 730px;
    }


    .about-page
    .about-bottom-line__inner {
        padding:
            52px 25px
            35px;
    }


    .about-page
    .about-bottom-line
    .about-kicker {
        margin-bottom: 34px;

        font-size: 8px;
    }


    .about-page
    .about-bottom-line
    h2 {
        width: 290px;

        font-size:
            clamp(
                30px,
                8.5vw,
                36px
            );
    }


    .about-page
    .about-bottom-line__text {
        width: 260px;

        margin-top: 25px;

        font-size: 13px;
    }


    .about-page
    .about-bottom-line__name {
        margin-top: 23px;
    }



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

    .about-page
    .about-paths {
        padding:
            48px 0
            55px;
    }


    .about-page
    .about-paths
    > .about-shell {
        padding:
            0 15px;
    }


    .about-page
    .about-paths
    .about-kicker--center {
        margin-bottom: 31px;

        font-size: 8px;
    }


    .about-page
    .about-paths__title {
        max-width: 340px;

        font-size:
            clamp(
                31px,
                8.6vw,
                38px
            );
    }


    .about-page
    .about-paths__intro {
        max-width: 320px;

        margin-top: 20px;

        font-size: 14px;
    }


    .about-page
    .about-path-panel {
        margin-top: 30px;
    }



    /* cards */

    .about-page
    .about-path-card {
        min-height: 250px;

        padding:
            23px 23px
            22px;
    }


    .about-page
    .about-path-card__top
    svg {
        width: 30px;
        height: 30px;
    }


    .about-page
    .about-path-card__top
    small {
        font-size: 6px;
    }


    .about-page
    .about-path-card
    h3 {
        width: 220px;

        margin-top: 17px;

        font-size: 21px;
    }


    .about-page
    .about-path-card
    > p {
        width: 190px;

        font-size: 11px;
    }


    .about-page
    .about-path-card__button {
        width: 215px;

        height: 41px;
        min-height: 41px;

        font-size: 11px;
    }

}



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

@media (max-width: 370px) {


    .about-page
    .about-bottom-line__inner {
        padding-left: 21px;
        padding-right: 21px;
    }


    .about-page
    .about-bottom-line
    h2 {
        width: 265px;

        font-size: 29px;
    }


    .about-page
    .about-paths
    > .about-shell {
        padding:
            0 12px;
    }


    .about-page
    .about-paths__title {
        font-size: 30px;
    }


    .about-page
    .about-path-card {
        min-height: 242px;

        padding:
            21px;
    }


    .about-page
    .about-path-card
    h3 {
        width: 205px;

        font-size: 19px;
    }


    .about-page
    .about-path-card
    > p {
        width: 175px;
    }


    .about-page
    .about-path-card__button {
        width: 195px;

        font-size: 10px;
    }

}