/* =========================================================
   COMMUNITY RELOAD
   ABOUT PAGE
   PT KREASI KOMUNITAS NUSANTARA
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.about-page {
    position: relative;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #f3f6fb 45%,
            #ffffff 100%
        );
}


/* =========================================================
   02. ABOUT HERO
   ========================================================= */

.about-hero {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

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

    position: absolute;

    width: 620px;
    height: 620px;

    left: -330px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 71, 245, 0.12),
            transparent 70%
        );

    pointer-events: none;
}

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

    position: absolute;

    width: 560px;
    height: 560px;

    right: -300px;
    bottom: -330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 184, 212, 0.10),
            transparent 70%
        );

    pointer-events: none;
}

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

.about-hero .page-hero-content {
    max-width: 920px;
}

.about-hero .page-hero-content h1 {
    max-width: 900px;
}

.about-hero .page-hero-content > p {
    max-width: 720px;
}


/* =========================================================
   03. INTRODUCTION
   ========================================================= */

.about-introduction {
    background: #ffffff;
}

.about-introduction-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    gap: 75px;

    align-items: center;
}

.about-introduction-content {
    max-width: 700px;
}

.about-introduction-content h2 {
    margin:
        0 0 22px;

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

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

    font-size:
        clamp(
            2.2rem,
            4.5vw,
            4rem
        );

    font-weight:
        800;

    line-height:
        1.06;

    letter-spacing:
        -0.05em;
}

.about-introduction-content p {
    max-width: 680px;

    margin:
        0 0 15px;

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

    font-size:
        0.92rem;

    line-height:
        1.85;
}

.about-highlight {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 30px;
    padding: 18px 20px;

    border-left:
        3px solid
        var(--color-primary);

    border-radius:
        0 var(--radius-sm)
        var(--radius-sm) 0;

    background:
        linear-gradient(
            90deg,
            rgba(104, 71, 245, 0.055),
            rgba(22, 184, 212, 0.025)
        );
}

.about-highlight span {
    color:
        var(--color-primary);

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}

.about-highlight strong {
    color:
        var(--color-text-strong);

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

    font-size:
        0.88rem;

    font-weight:
        800;
}


/* =========================================================
   04. COMPANY CARD
   ========================================================= */

.about-company-card {
    position: relative;

    min-height: 440px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    padding: 25px;

    border:
        1px solid
        rgba(38, 53, 73, 0.10);

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

    background:
        linear-gradient(
            145deg,
            #182238 0%,
            #111a29 55%,
            #0d1523 100%
        );

    box-shadow:
        0 30px 75px
        rgba(24, 34, 56, 0.18);

    isolation: isolate;

    transition:
        transform 450ms var(--ease),
        box-shadow 450ms var(--ease);
}

.about-company-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 38px 90px
        rgba(24, 34, 56, 0.23);
}

.about-company-card-background {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 71, 245, 0.28),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}

.about-company-card-background::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -400px;
    top: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 184, 212, 0.18),
            transparent 70%
        );
}

.about-company-card-header {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 15px;

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

    font-size:
        0.53rem;

    font-weight:
        750;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.about-company-card-header span:last-child {
    padding:
        6px 9px;

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

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

    color:
        rgba(255, 255, 255, 0.75);

    background:
        rgba(255, 255, 255, 0.045);
}

.about-company-card-center {
    display: flex;
    flex-direction: column;

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

    text-align: center;

    padding:
        35px 20px;
}

.about-company-card-center img {
    width: 110px;
    height: 110px;

    object-fit: contain;

    margin-bottom: 20px;

    filter:
        drop-shadow(
            0 15px 25px
            rgba(0, 0, 0, 0.18)
        );
}

.about-company-card-center strong {
    color:
        #ffffff;

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

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.75rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        0.03em;
}

.about-company-card-center span {
    margin-top: 9px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}

.about-company-card-footer {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 18px;

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

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        0.47rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


/* =========================================================
   05. VALUES
   ========================================================= */

.about-values {
    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #f3f6fb 100%
        );
}

.about-values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;
}

.about-value-card {
    position: relative;

    min-height: 275px;

    padding:
        27px;

    overflow: hidden;

    border:
        1px solid
        var(--border-color);

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

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

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

    transition:
        transform 300ms var(--ease),
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.about-value-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 71, 245, 0.10),
            transparent 70%
        );

    pointer-events: none;

    transition:
        transform 400ms var(--ease);
}

.about-value-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(104, 71, 245, 0.18);

    box-shadow:
        var(--shadow-md);
}

.about-value-card:hover::before {
    transform:
        scale(1.35);
}

.about-value-number {
    position: absolute;

    top: 21px;
    right: 23px;

    color:
        #dce2ec;

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

    font-size:
        1.55rem;

    font-weight:
        800;

    line-height:
        1;
}

.about-value-icon {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    border-radius:
        13px;

    background:
        rgba(104, 71, 245, 0.075);

    color:
        var(--color-primary);

    font-size:
        0.75rem;

    font-weight:
        900;

    transition:
        transform 300ms var(--ease),
        background 300ms ease;
}

.about-value-card:hover .about-value-icon {
    transform:
        scale(1.08);

    background:
        rgba(104, 71, 245, 0.12);
}

.about-value-card h3 {
    margin:
        0 0 9px;

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

    font-size:
        1rem;
}

.about-value-card p {
    margin:
        0;

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

    font-size:
        0.69rem;

    line-height:
        1.78;
}


/* =========================================================
   06. VISION & MISSION
   ========================================================= */

.about-vision {
    background:
        #ffffff;
}

.about-vision-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap:
        75px;

    align-items:
        start;
}

.about-vision-main {
    position: relative;

    min-height:
        490px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        48px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(104, 71, 245, 0.12);

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

    background:
        linear-gradient(
            145deg,
            #f7f4ff 0%,
            #f8faff 58%,
            #eefbfc 100%
        );

    box-shadow:
        var(--shadow-sm);
}

.about-vision-main::before {
    content: "";

    position: absolute;

    width:
        300px;

    height:
        300px;

    right:
        -150px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 71, 245, 0.14),
            transparent 70%
        );

    pointer-events:
        none;
}

.about-vision-main::after {
    content: "";

    position: absolute;

    width:
        230px;

    height:
        230px;

    left:
        -130px;

    bottom:
        -130px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 184, 212, 0.12),
            transparent 70%
        );

    pointer-events:
        none;
}

.vision-symbol {
    position:
        absolute;

    right:
        38px;

    top:
        30px;

    color:
        rgba(104, 71, 245, 0.08);

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

    font-size:
        7rem;

    font-weight:
        800;

    line-height:
        1;

    pointer-events:
        none;
}

.about-vision-main h2 {
    position:
        relative;

    z-index:
        2;

    max-width:
        560px;

    margin:
        0 0 20px;

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

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

    font-size:
        clamp(
            1.7rem,
            3.2vw,
            2.65rem
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -0.045em;
}

.about-vision-main p {
    position:
        relative;

    z-index:
        2;

    max-width:
        540px;

    margin:
        0;

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

    font-size:
        0.78rem;

    line-height:
        1.8;
}

.about-mission {
    padding-top:
        7px;
}

.about-mission > h2 {
    margin:
        0 0 30px;

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

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

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.1rem
        );

    line-height:
        1.06;

    letter-spacing:
        -0.045em;
}

.mission-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    border-top:
        1px solid
        var(--border-color);
}

.mission-item {
    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        18px;

    padding:
        21px 0;

    border-bottom:
        1px solid
        var(--border-color);

    transition:
        padding-left 300ms var(--ease);
}

.mission-item:hover {
    padding-left:
        7px;
}

.mission-item > span {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(104, 71, 245, 0.065);

    color:
        var(--color-primary);

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

    font-size:
        0.58rem;

    font-weight:
        800;
}

.mission-item strong {
    display:
        block;

    margin:
        0 0 5px;

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

    font-size:
        0.82rem;

    line-height:
        1.45;
}

.mission-item p {
    margin:
        0;

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

    font-size:
        0.65rem;

    line-height:
        1.7;
}


/* =========================================================
   07. JOURNEY
   ========================================================= */

.about-journey {
    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #f2f5fa 100%
        );
}

.about-journey .section-header {
    max-width:
        760px;
}

.journey-timeline {
    position:
        relative;

    max-width:
        930px;

    margin:
        0 auto;

    padding:
        10px 0;
}

.journey-timeline::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--border-color-strong) 10%,
            var(--border-color-strong) 90%,
            transparent
        );
}

.journey-item {
    position:
        relative;

    width:
        50%;

    padding:
        0 45px 55px;
}

.journey-item:last-child {
    padding-bottom:
        0;
}

.journey-item:nth-child(odd) {
    margin-right:
        auto;

    text-align:
        right;
}

.journey-item:nth-child(even) {
    margin-left:
        50%;

    text-align:
        left;
}

.journey-marker {
    position:
        absolute;

    top:
        0;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        5px solid
        #f3f6fb;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:
        #ffffff;

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

    font-size:
        0.55rem;

    font-weight:
        800;

    box-shadow:
        0 8px 22px
        rgba(104, 71, 245, 0.20);

    z-index:
        3;
}

.journey-item:nth-child(odd) .journey-marker {
    right:
        -20px;
}

.journey-item:nth-child(even) .journey-marker {
    left:
        -20px;
}

.journey-content {
    padding:
        25px;

    border:
        1px solid
        var(--border-color);

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

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

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

    transition:
        transform 300ms var(--ease),
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.journey-content:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(104, 71, 245, 0.16);

    box-shadow:
        var(--shadow-md);
}

.journey-content > span {
    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        var(--color-primary);

    font-size:
        0.53rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.journey-content h3 {
    margin:
        0 0 8px;

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

    font-size:
        1rem;
}

.journey-content p {
    margin:
        0;

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

    font-size:
        0.68rem;

    line-height:
        1.75;
}


/* =========================================================
   08. LEGALITY
   ========================================================= */

.about-legality {
    background:
        #ffffff;
}

.legal-grid {
    display:
        grid;

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

    gap:
        14px;

    max-width:
        1000px;

    margin:
        0 auto;
}

.legal-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        52px 1fr auto;

    align-items:
        center;

    gap:
        17px;

    min-height:
        105px;

    padding:
        19px 21px;

    border:
        1px solid
        var(--border-color);

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

    background:
        #ffffff;

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

    transition:
        transform 300ms var(--ease),
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.legal-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(104, 71, 245, 0.17);

    box-shadow:
        var(--shadow-sm);
}

.legal-icon {
    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(104, 71, 245, 0.065);

    color:
        var(--color-primary);

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

    font-size:
        0.53rem;

    font-weight:
        800;
}

.legal-type {
    display:
        block;

    margin-bottom:
        4px;

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

    font-size:
        0.48rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.legal-card h3 {
    margin:
        0 0 3px;

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

    font-size:
        0.78rem;

    line-height:
        1.35;
}

.legal-card p {
    margin:
        0;

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

    font-size:
        0.57rem;

    line-height:
        1.5;
}

.legal-status {
    align-self:
        start;

    padding:
        5px 8px;

    border:
        1px solid
        rgba(104, 71, 245, 0.12);

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

    color:
        var(--color-primary);

    background:
        rgba(104, 71, 245, 0.045);

    font-size:
        0.43rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


/* =========================================================
   09. CTA
   ========================================================= */

.about-cta-section {
    background:
        #ffffff;

    padding-top:
        25px;
}

.about-cta {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    min-height:
        285px;

    padding:
        45px 50px;

    overflow:
        hidden;

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

    background:
        linear-gradient(
            135deg,
            #182238 0%,
            #111a29 60%,
            #0d1523 100%
        );

    box-shadow:
        0 30px 70px
        rgba(24, 34, 56, 0.15);
}

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

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -210px;

    top:
        -230px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 71, 245, 0.28),
            transparent 70%
        );

    pointer-events:
        none;
}

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

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -170px;

    bottom:
        -210px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 184, 212, 0.16),
            transparent 70%
        );

    pointer-events:
        none;
}

.about-cta-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        720px;
}

.about-cta-content .section-kicker {
    color:
        #a99aff;
}

.about-cta-content h2 {
    margin:
        0 0 14px;

    color:
        #ffffff;

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

    font-size:
        clamp(
            1.8rem,
            4vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}

.about-cta-content p {
    max-width:
        650px;

    margin:
        0;

    color:
        #aab6c7;

    font-size:
        0.75rem;

    line-height:
        1.8;
}

.about-cta-actions {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex:
        0 0 auto;
}

.about-cta-actions .button-secondary {
    border-color:
        rgba(255, 255, 255, 0.14);

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

    color:
        #ffffff;
}

.about-cta-actions .button-secondary:hover {
    border-color:
        rgba(255, 255, 255, 0.25);

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

    color:
        #ffffff;
}


/* =========================================================
   10. RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .about-introduction-layout {
        gap:
            50px;
    }

    .about-vision-layout {
        gap:
            50px;
    }

    .about-values-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   11. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 850px) {

    .about-hero {
        min-height:
            430px;
    }

    .about-introduction-layout {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .about-introduction-content {
        max-width:
            800px;
    }

    .about-company-card {
        max-width:
            620px;

        width:
            100%;

        margin-inline:
            auto;
    }

    .about-vision-layout {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .about-vision-main {
        min-height:
            400px;
    }

    .journey-item {
        padding-left:
            60px;

        padding-right:
            25px;
    }

    .journey-item:nth-child(odd),
    .journey-item:nth-child(even) {
        width:
            100%;

        margin-left:
            0;

        margin-right:
            0;

        text-align:
            left;
    }

    .journey-timeline::before {
        left:
            20px;

        transform:
            none;
    }

    .journey-item:nth-child(odd) .journey-marker,
    .journey-item:nth-child(even) .journey-marker {
        left:
            0;

        right:
            auto;
    }

    .legal-grid {
        grid-template-columns:
            1fr;
    }

    .about-cta {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================================
   12. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about-hero {
        min-height:
            390px;
    }

    .about-introduction-content h2 {
        font-size:
            2.1rem;
    }

    .about-introduction-content p {
        font-size:
            0.8rem;
    }

    .about-highlight {
        margin-top:
            23px;

        padding:
            16px;
    }

    .about-highlight strong {
        font-size:
            0.77rem;
    }

    .about-company-card {
        min-height:
            390px;

        padding:
            20px;

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

    .about-company-card-center {
        padding:
            25px 15px;
    }

    .about-company-card-center img {
        width:
            88px;

        height:
            88px;

        margin-bottom:
            15px;
    }

    .about-company-card-center strong {
        font-size:
            1.15rem;
    }

    .about-company-card-footer {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;
    }

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

    .about-value-card {
        min-height:
            245px;

        padding:
            23px;
    }

    .about-vision-main {
        min-height:
            auto;

        padding:
            30px 25px;

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

    .vision-symbol {
        right:
            20px;

        top:
            18px;

        font-size:
            5rem;
    }

    .about-vision-main h2 {
        font-size:
            1.55rem;
    }

    .about-vision-main p {
        font-size:
            0.7rem;
    }

    .about-mission > h2 {
        font-size:
            2rem;
    }

    .mission-item {
        grid-template-columns:
            42px 1fr;

        gap:
            13px;

        padding:
            18px 0;
    }

    .mission-item strong {
        font-size:
            0.75rem;
    }

    .mission-item p {
        font-size:
            0.61rem;
    }

    .journey-timeline {
        padding-left:
            0;
    }

    .journey-timeline::before {
        left:
            16px;
    }

    .journey-item {
        padding:
            0 0 35px 48px;
    }

    .journey-item:nth-child(odd),
    .journey-item:nth-child(even) {
        text-align:
            left;
    }

    .journey-item:nth-child(odd) .journey-marker,
    .journey-item:nth-child(even) .journey-marker {
        left:
            -4px;
    }

    .journey-marker {
        width:
            36px;

        height:
            36px;

        border-width:
            4px;

        font-size:
            0.49rem;
    }

    .journey-content {
        padding:
            20px;
    }

    .journey-content h3 {
        font-size:
            0.9rem;
    }

    .journey-content p {
        font-size:
            0.63rem;
    }

    .legal-card {
        grid-template-columns:
            44px 1fr;

        gap:
            13px;

        padding:
            17px;
    }

    .legal-icon {
        width:
            40px;

        height:
            40px;

        border-radius:
            10px;
    }

    .legal-status {
        grid-column:
            2;

        justify-self:
            start;

        margin-top:
            -5px;
    }

    .about-cta {
        min-height:
            auto;

        padding:
            32px 24px;

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

    .about-cta-content h2 {
        font-size:
            1.65rem;
    }

    .about-cta-content p {
        font-size:
            0.68rem;
    }

    .about-cta-actions {
        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .about-cta-actions .button {
        width:
            100%;
    }

}


/* =========================================================
   13. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .about-company-card-header {
        font-size:
            0.46rem;
    }

    .about-company-card {
        min-height:
            365px;
    }

    .about-company-card-center img {
        width:
            78px;

        height:
            78px;
    }

    .about-company-card-center strong {
        font-size:
            1.05rem;
    }

    .about-vision-main {
        padding:
            27px 21px;
    }

    .mission-item {
        grid-template-columns:
            38px 1fr;
    }

    .mission-item > span {
        width:
            32px;

        height:
            32px;
    }

    .journey-item {
        padding-left:
            43px;
    }

    .journey-timeline::before {
        left:
            14px;
    }

    .journey-item:nth-child(odd) .journey-marker,
    .journey-item:nth-child(even) .journey-marker {
        left:
            -4px;
    }

    .legal-card {
        grid-template-columns:
            40px 1fr;
    }

}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

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

    .about-company-card,
    .about-value-card,
    .about-value-icon,
    .journey-content,
    .legal-card,
    .mission-item {
        transition:
            none !important;
    }

    .about-company-card:hover,
    .about-value-card:hover,
    .journey-content:hover,
    .legal-card:hover {
        transform:
            none !important;
    }

}


/* =========================================================
   END OF ABOUT.CSS
   ========================================================= */