/* =========================================================
   ABOUT PAGE
   SECTION 02 — WHO WE ARE
   ========================================================= */

.about-who {
    position: relative;
    padding: 120px 0 130px;
    background: var(--color-white);
    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.about-who-container {
    position: relative;
}


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

.about-who-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    gap: 90px;

    align-items: end;

    margin-bottom: 80px;
}


.about-who-label,
.about-who-content-label {
    display: inline-flex;

    margin-bottom: 20px;

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

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

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


.about-who-title {
    max-width: 850px;

    margin: 0;

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

    font-size:
        clamp(3rem, 5.4vw, 5.8rem);

    font-weight: 800;

    line-height: 0.96;

    letter-spacing: -0.06em;

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


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

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


.about-who-lead {
    max-width: 450px;
}


.about-who-lead p {
    margin: 0 0 18px;

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

    font-size: 1rem;
    line-height: 1.75;

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


.about-who-lead p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.about-who-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);

    gap: 90px;

    align-items: center;

    margin-bottom: 100px;
}


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

.about-who-visual {
    position: relative;
}


.about-who-image-wrap {
    position: relative;

    width: 100%;

    min-height: 520px;

    overflow: hidden;

    border-radius: 28px;

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


.about-who-image {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 520px;

    object-fit: cover;

    object-position: center;
}


.about-who-image-note {
    display: flex;

    align-items: center;
    gap: 12px;

    position: absolute;

    left: 24px;
    bottom: 24px;

    padding: 11px 16px;

    border-radius: 999px;

    background: var(--color-lime);

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

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.1em;

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


.about-who-image-note span {
    display: inline-flex;

    align-items: center;
    gap: 12px;
}


.about-who-image-note span:not(:last-child)::after {
    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

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


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

.about-who-content {
    max-width: 520px;
}


.about-who-content h3 {
    max-width: 520px;

    margin: 0 0 28px;

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

    font-size:
        clamp(2.4rem, 3.6vw, 4rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.055em;

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


.about-who-content p {
    margin: 0 0 20px;

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

    font-size: 1rem;

    line-height: 1.75;

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


.about-who-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   VISION / MISSION
   ========================================================= */

.about-who-principles {
    display: grid;

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

    gap: 14px;
}


.about-who-principle {
    min-height: 340px;

    padding: 34px;

    border-radius: 24px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.about-who-principle--vision {
    background: var(--color-lime);
}


.about-who-principle--mission {
    background: var(--color-background-soft);

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


.about-who-principle-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.about-who-principle-number {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: var(--color-white);

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

    font-size: 0.72rem;
    font-weight: 700;

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


.about-who-principle-label {
    font-family: var(--font-body);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.13em;

    color: var(--color-teal-dark);
}


.about-who-principle h3 {
    max-width: 560px;

    margin: 45px 0 18px;

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

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

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.05em;

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


.about-who-principle p {
    max-width: 520px;

    margin: 0;

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

    font-size: 0.96rem;

    line-height: 1.7;

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


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

@media (max-width: 1000px) {

    .about-who {
        padding: 95px 0 105px;
    }


    .about-who-intro {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-bottom: 60px;
    }


    .about-who-main {
        grid-template-columns: 1fr;

        gap: 50px;

        margin-bottom: 70px;
    }


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


    .about-who-image-wrap,
    .about-who-image {
        min-height: 460px;
    }

}


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

@media (max-width: 600px) {

    .about-who {
        padding: 72px 0 82px;
    }


    .about-who-label,
    .about-who-content-label {
        margin-bottom: 16px;
    }


    .about-who-title {
        font-size:
            clamp(2.6rem, 12vw, 4rem);

        line-height: 0.98;
    }


    .about-who-lead p {
        font-size: 0.94rem;

        line-height: 1.68;
    }


    .about-who-main {
        gap: 36px;

        margin-bottom: 55px;
    }


    .about-who-image-wrap,
    .about-who-image {
        min-height: 360px;
    }


    .about-who-image-wrap {
        border-radius: 20px;
    }


    .about-who-image-note {
        left: 14px;
        bottom: 14px;

        gap: 8px;

        padding: 9px 12px;

        font-size: 0.57rem;
    }


    .about-who-image-note span {
        gap: 8px;
    }


    .about-who-content h3 {
        font-size:
            clamp(2.25rem, 10vw, 3.2rem);

        line-height: 1;
    }


    .about-who-content p {
        font-size: 0.94rem;

        line-height: 1.68;
    }


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

        gap: 10px;
    }


    .about-who-principle {
        min-height: 300px;

        padding: 25px;

        border-radius: 20px;
    }


    .about-who-principle h3 {
        margin-top: 35px;

        font-size: 2.2rem;
    }


    .about-who-principle p {
        font-size: 0.92rem;
    }

}/* =========================================================
   ABOUT PAGE
   SECTION 03 — FOUNDER
   ========================================================= */

.about-founder {
    position: relative;

    padding: 110px 0 100px;

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

    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.about-founder-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   DECORATIVE BACKGROUND SHAPES
   ========================================================= */

.about-founder-decoration {
    position: absolute;

    pointer-events: none;

    z-index: -1;
}


/* LEFT */

.about-founder-decoration--left {
    left: -170px;
    bottom: -100px;

    width: 360px;
    height: 620px;

    border-radius: 50%;

    border: 70px solid rgba(220, 238, 255, 0.5);

    transform: rotate(-18deg);
}


/* TOP RIGHT */

.about-founder-decoration--top {
    top: -190px;
    right: -90px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border: 75px solid rgba(204, 239, 238, 0.55);
}


/* BOTTOM RIGHT */

.about-founder-decoration--bottom {
    right: -180px;
    bottom: -250px;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    border: 70px solid rgba(213, 241, 239, 0.5);
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.about-founder-grid {
    display: grid;

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

    gap: 70px;

    align-items: start;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.about-founder-left {
    min-width: 0;
}


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

.about-founder-section-label {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 26px;
}


.about-founder-section-label > span:first-child {
    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

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


.about-founder-label-line {
    width: 110px;

    height: 1px;

    background: var(--color-teal);

    opacity: 0.6;
}


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

.about-founder-title {
    max-width: 720px;

    margin: 0;

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

    font-size:
        clamp(3.4rem, 5.5vw, 6rem);

    font-weight: 800;

    line-height: 0.94;

    letter-spacing: -0.065em;

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


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

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


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

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

    margin: 30px 0 32px;

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

    font-size: 1rem;

    line-height: 1.65;

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


/* =========================================================
   FOUNDER PROFILE CARD
   ========================================================= */

.about-founder-profile-card {
    position: relative;

    max-width: 690px;

    min-height: 310px;

    margin-top: 25px;

    padding: 55px 42px 40px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(225, 239, 255, 0.95),
            rgba(227, 247, 243, 0.9)
        );
}


/* Decorative circle */

.about-founder-profile-card::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -120px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

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


/* Another circle */

.about-founder-profile-card::before {
    content: "";

    position: absolute;

    right: -40px;
    top: -100px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

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


/* =========================================================
   PROFILE LABEL
   ========================================================= */

.about-founder-profile-label {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 22px;

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

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.15em;

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


/* =========================================================
   FOUNDER NAME
   ========================================================= */

.about-founder-name {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    margin: 0;

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

    font-size:
        clamp(3.5rem, 5vw, 5.4rem);

    font-weight: 800;

    line-height: 0.88;

    letter-spacing: -0.06em;

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


.about-founder-name span:last-child {
    color: var(--color-teal);
}


/* =========================================================
   PROFILE LINE
   ========================================================= */

.about-founder-profile-line {
    position: relative;

    z-index: 2;

    width: 45px;

    height: 2px;

    margin-top: 22px;

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


/* =========================================================
   ROLES
   ========================================================= */

.about-founder-roles {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

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

    font-size: 0.82rem;

    font-weight: 600;

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


.about-founder-role-divider {
    color: var(--color-teal);

    opacity: 0.6;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.about-founder-right {
    min-width: 0;

    padding-top: 42px;
}


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

.about-founder-quote {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 28px;

    min-height: 190px;

    padding: 34px 42px 32px 30px;

    border: 1px solid rgba(36, 155, 154, 0.16);

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(237, 249, 248, 0.95),
            rgba(245, 250, 255, 0.95)
        );

    overflow: hidden;
}


/* =========================================================
   QUOTE ICON
   ========================================================= */

.about-founder-quote-icon {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 66px;
    height: 66px;

    border-radius: 50%;

    background: var(--color-teal);

    font-family: Georgia, serif;

    font-size: 3.2rem;

    font-weight: 700;

    line-height: 1;

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


/* =========================================================
   QUOTE TEXT
   ========================================================= */

.about-founder-quote p {
    position: relative;

    z-index: 2;

    max-width: 610px;

    margin: 3px 0 0;


    font-size:
        clamp(1.45rem, 2.3vw, 2.05rem);

    font-style: italic;

    font-weight: 600;

    line-height: 1.35;

    letter-spacing: -0.02em;

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


/* =========================================================
   LARGE QUOTE MARK
   ========================================================= */

.about-founder-quote-mark {
    position: absolute;

    right: 22px;
    bottom: -20px;

    font-family: Georgia, serif;

    font-size: 7rem;

    line-height: 1;

    color: rgba(36, 155, 154, 0.1);
}


/* =========================================================
   BIO
   ========================================================= */

.about-founder-bio {
    margin-top: 28px;
}


.about-founder-bio p {
    max-width: 700px;

    margin: 0 0 24px;

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

    font-size: 0.98rem;

    line-height: 1.75;

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


.about-founder-bio p:last-child {
    margin-bottom: 0;
}


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

.about-founder-signature {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 34px;
}


.about-founder-signature-line {
    width: 72px;

    height: 1px;

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


.about-founder-signature-content {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.about-founder-signature-name {
    font-family: "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 2.3rem;

    line-height: 1;

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


.about-founder-signature-content > span {
    font-family: var(--font-body);

    font-size: 0.66rem;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 0.09em;

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


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

.about-founder-stats {
    display: grid;

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

    align-items: center;

    gap: 28px;

    margin-top: 30px;

    padding: 22px 55px;

    border: 1px solid rgba(36, 155, 154, 0.12);

    border-radius: 25px;

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

    box-shadow:
        0 15px 45px rgba(18, 42, 55, 0.04);
}


/* =========================================================
   STAT
   ========================================================= */

.about-founder-stat {
    display: flex;

    align-items: center;

    gap: 20px;

    min-width: 0;
}


/* =========================================================
   STAT ICON
   ========================================================= */

.about-founder-stat-icon {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: rgba(36, 155, 154, 0.1);

    color: var(--color-teal);

    font-size: 1.35rem;
}


/* =========================================================
   STAT CONTENT
   ========================================================= */

.about-founder-stat-content {
    display: flex;

    align-items: center;

    gap: 15px;
}


.about-founder-stat-content strong {
    font-family: var(--font-heading);

    font-size: 2.8rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.05em;

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


.about-founder-stat-content span {
    font-family: var(--font-body);

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.1em;

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


/* =========================================================
   TEXT-BASED STAT
   ========================================================= */

.about-founder-stat-content--text {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;
}


.about-founder-stat-content--text strong {
    font-size: 1.5rem;

    letter-spacing: 0;

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


.about-founder-stat-content--text span {
    font-size: 0.7rem;
}


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

.about-founder-stat-divider {
    width: 1px;

    height: 58px;

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


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

@media (max-width: 1050px) {

    .about-founder {
        padding: 95px 0 90px;
    }


    .about-founder-grid {
        gap: 45px;
    }


    .about-founder-title {
        font-size:
            clamp(3.1rem, 6vw, 5rem);
    }


    .about-founder-quote {
        padding: 28px 30px;
    }


    .about-founder-quote-icon {
        width: 55px;
        height: 55px;

        font-size: 2.7rem;
    }


    .about-founder-quote p {
        font-size: 1.4rem;
    }


    .about-founder-stats {
        padding: 20px 30px;

        gap: 18px;
    }


    .about-founder-stat {
        gap: 13px;
    }


    .about-founder-stat-icon {
        width: 50px;
        height: 50px;
    }

}


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

@media (max-width: 760px) {

    .about-founder {
        padding: 75px 0 75px;
    }


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

        gap: 45px;
    }


    .about-founder-right {
        padding-top: 0;
    }


    .about-founder-title {
        font-size:
            clamp(2.8rem, 12vw, 4.2rem);

        line-height: 0.94;
    }


    .about-founder-intro {
        margin-top: 24px;

        font-size: 0.92rem;
    }


    .about-founder-profile-card {
        min-height: auto;

        padding: 38px 28px 32px;

        border-radius: 20px;
    }


    .about-founder-name {
        font-size:
            clamp(3.2rem, 14vw, 4.8rem);
    }


    .about-founder-roles {
        font-size: 0.72rem;

        line-height: 1.8;
    }


    .about-founder-quote {
        min-height: auto;

        gap: 18px;

        padding: 25px 22px;
    }


    .about-founder-quote-icon {
        width: 48px;
        height: 48px;

        font-size: 2.3rem;
    }


    .about-founder-quote p {
        margin-top: 0;

        font-size: 1.25rem;

        line-height: 1.4;
    }


    .about-founder-quote-mark {
        font-size: 5rem;
    }


    .about-founder-bio {
        margin-top: 25px;
    }


    .about-founder-bio p {
        font-size: 0.9rem;

        line-height: 1.7;
    }


    .about-founder-signature {
        margin-top: 28px;

        gap: 14px;
    }


    .about-founder-signature-line {
        width: 42px;
    }


    .about-founder-signature-name {
        font-size: 1.9rem;
    }


    .about-founder-stats {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 40px;

        padding: 25px 22px;

        border-radius: 20px;
    }


    .about-founder-stat-divider {
        width: 100%;

        height: 1px;
    }


    .about-founder-stat {
        min-height: 55px;
    }


    .about-founder-stat-content strong {
        font-size: 2.3rem;
    }


    .about-founder-stat-content--text strong {
        font-size: 1.3rem;
    }


    .about-founder-decoration--left {
        left: -220px;

        width: 320px;
        height: 500px;
    }


    .about-founder-decoration--top {
        right: -180px;
        top: -120px;

        width: 320px;
        height: 320px;
    }


    .about-founder-decoration--bottom {
        right: -200px;
        bottom: -180px;

        width: 350px;
        height: 350px;
    }

}


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

@media (max-width: 420px) {

    .about-founder-section-label {
        gap: 12px;
    }


    .about-founder-label-line {
        width: 65px;
    }


    .about-founder-profile-card {
        padding: 32px 22px 28px;
    }


    .about-founder-name {
        font-size: 3.15rem;
    }


    .about-founder-roles {
        display: block;

        line-height: 1.8;
    }


    .about-founder-role-divider {
        margin: 0 4px;
    }


    .about-founder-quote {
        display: block;
    }


    .about-founder-quote-icon {
        margin-bottom: 18px;
    }


    .about-founder-quote p {
        font-size: 1.15rem;
    }


    .about-founder-stat {
        gap: 14px;
    }

}
/* =========================================================
   ABOUT PAGE
   SECTION 04 — WHAT WE DO
   EDITORIAL PATHWAY LAYOUT
   ========================================================= */

.about-services {
    position: relative;

    padding: 140px 0;

    background: var(--color-black);

    color: var(--color-white);

    overflow: hidden;
}


.about-services-container {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.75fr)
        minmax(500px, 1.25fr);

    gap: 100px;

    align-items: start;
}


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

.about-services-intro {
    position: sticky;

    top: 130px;

    max-width: 560px;
}


.about-services-label {
    display: inline-flex;

    margin-bottom: 24px;

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

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

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


.about-services-title {
    margin: 0;

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

    font-size:
        clamp(3.2rem, 5vw, 5.5rem);

    font-weight: 800;

    line-height: 0.94;

    letter-spacing: -0.065em;

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


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

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


.about-services-description {
    max-width: 460px;

    margin: 34px 0 0;

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

    font-size: 1rem;

    line-height: 1.8;

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


/* =========================================================
   SMALL NOTE
   ========================================================= */

.about-services-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 48px;

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

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.14em;

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


.about-services-note-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

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


/* =========================================================
   PATHWAY
   ========================================================= */

.about-services-pathway {
    position: relative;

    padding-left: 44px;
}


.about-services-path-line {
    position: absolute;

    top: 22px;
    bottom: 22px;

    left: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--color-teal),
            rgba(255,255,255,0.15)
        );
}


/* =========================================================
   SERVICE ROW
   ========================================================= */

.about-service-row {
    position: relative;

    display: grid;

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

    gap: 26px;

    align-items: center;

    min-height: 175px;

    padding: 28px 0;

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

    transition:
        padding 300ms ease;
}


.about-service-row:first-of-type {
    padding-top: 10px;
}


.about-service-row:hover {
    padding-left: 14px;
}


.about-service-row--last {
    border-bottom: 0;

    padding-bottom: 10px;
}


/* =========================================================
   INDEX
   ========================================================= */

.about-service-index {
    position: relative;

    display: flex;

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

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: var(--color-black);

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

    font-size: 0.68rem;
    font-weight: 700;

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

    z-index: 2;

    transition:
        background 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
}


.about-service-row:hover .about-service-index {
    background: var(--color-lime);

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

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


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

.about-service-content {
    min-width: 0;
}


.about-service-tag {
    display: inline-flex;

    margin-bottom: 10px;

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

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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


.about-service-row:hover .about-service-tag {
    color: var(--color-lime);
}


.about-service-content h3 {
    margin: 0 0 10px;

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

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

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;

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


.about-service-content p {
    max-width: 520px;

    margin: 0;

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

    font-size: 0.9rem;

    line-height: 1.65;

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


/* =========================================================
   ACTION
   ========================================================= */

.about-service-action {
    display: flex;

    align-items: center;
    justify-content: flex-end;
}


.about-service-action span,
.about-service-action a {
    display: flex;

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

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

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

    font-size: 1rem;

    text-decoration: none;

    color: var(--color-white);

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}


.about-service-row:hover .about-service-action span,
.about-service-row:hover .about-service-action a {
    background: var(--color-lime);

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

    color: var(--color-black);

    transform: rotate(45deg);
}


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

@media (max-width: 1000px) {

    .about-services {
        padding: 105px 0;
    }


    .about-services-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .about-services-intro {
        position: relative;

        top: auto;

        max-width: 700px;
    }


    .about-services-description {
        max-width: 600px;
    }


    .about-services-pathway {
        max-width: 800px;
    }

}


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

@media (max-width: 650px) {

    .about-services {
        padding: 78px 0 85px;
    }


    .about-services-container {
        gap: 55px;
    }


    .about-services-label {
        margin-bottom: 18px;
    }


    .about-services-title {
        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height: 0.97;
    }


    .about-services-description {
        margin-top: 25px;

        font-size: 0.93rem;

        line-height: 1.7;
    }


    .about-services-note {
        margin-top: 32px;
    }


    .about-services-pathway {
        padding-left: 30px;
    }


    .about-services-path-line {
        top: 17px;
        bottom: 17px;
    }


    .about-service-row {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            36px;

        gap: 14px;

        min-height: 150px;

        padding: 25px 0;
    }


    .about-service-row:first-of-type {
        padding-top: 5px;
    }


    .about-service-index {
        width: 38px;
        height: 38px;

        font-size: 0.6rem;
    }


    .about-service-tag {
        margin-bottom: 8px;

        font-size: 0.56rem;
    }


    .about-service-content h3 {
        font-size: 1.55rem;

        line-height: 1.05;
    }


    .about-service-content p {
        font-size: 0.82rem;

        line-height: 1.6;
    }


    .about-service-action span,
    .about-service-action a {
        width: 34px;
        height: 34px;

        font-size: 0.8rem;
    }


    .about-service-row:hover {
        padding-left: 0;
    }

}

/* =========================================================
   ABOUT PAGE
   SECTION 05 — OUR EDUCATION PATHWAYS
   ========================================================= */

.about-pathways {
    position: relative;

    padding: 135px 0 125px;

    background: var(--color-white);

    overflow: hidden;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.about-pathways-container {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(520px, 1.22fr);

    gap: 90px;

    align-items: start;

    position: relative;
}


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

.about-pathways-intro {
    position: relative;

    min-height: 760px;

    padding-top: 5px;
}


.about-pathways-label {
    display: inline-flex;

    margin-bottom: 34px;

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

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

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


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

.about-pathways-title {
    max-width: 650px;

    margin: 0;

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

    font-size:
        clamp(3.4rem, 5vw, 5.7rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.065em;

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


/*
   IMPORTANT:
   Each title line is separated intentionally.
   This prevents the black and teal lines from
   visually colliding at large font sizes.
*/

.about-pathways-title-line {
    display: block;

    margin: 0;

    padding: 0;

    line-height: 1.02;
}


.about-pathways-title-line--accent {
    margin-top: 14px;

    padding-top: 2px;

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


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

.about-pathways-description {
    max-width: 475px;

    margin: 38px 0 0;

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

    font-size: 1rem;

    line-height: 1.8;

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


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.about-pathways-philosophy {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 42px;
}


.about-pathways-philosophy-line {
    display: block;

    width: 52px;

    height: 1px;

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


.about-pathways-philosophy-text {
    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.18em;

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


.about-pathways-dot {
    color: var(--color-teal);
}


/* =========================================================
   DECORATIVE GLOBE
   ========================================================= */

.about-pathways-orbit {
    position: absolute;

    left: -120px;

    bottom: -105px;

    width: 480px;
    height: 330px;

    pointer-events: none;

    opacity: 0.55;
}


.about-pathways-globe {
    position: absolute;

    left: 35px;
    bottom: -105px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border: 1px solid rgba(33, 138, 134, 0.10);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(33, 138, 134, 0.06),
            transparent 55%
        );
}


.about-pathways-globe::before,
.about-pathways-globe::after {
    content: "";

    position: absolute;

    inset: 18px;

    border: 1px solid rgba(33, 138, 134, 0.07);

    border-radius: 50%;
}


.about-pathways-globe::after {
    inset: 55px;

    border-color: rgba(33, 138, 134, 0.06);
}


.about-pathways-orbit-line {
    position: absolute;

    width: 500px;
    height: 120px;

    border: 1px solid rgba(33, 138, 134, 0.10);

    border-radius: 50%;

    transform: rotate(-16deg);
}


.about-pathways-orbit-line--one {
    left: -10px;
    bottom: 45px;
}


.about-pathways-orbit-line--two {
    left: -35px;
    bottom: 25px;

    transform:
        rotate(20deg)
        scaleY(0.65);
}


.about-pathways-orbit-dot {
    position: absolute;

    left: 365px;
    bottom: 132px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

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


/* =========================================================
   RIGHT PATHWAY LIST
   ========================================================= */

.about-pathways-list {
    position: relative;

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


/* =========================================================
   PATHWAY ITEM
   ========================================================= */

.about-pathway-item {
    display: grid;

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

    align-items: center;

    gap: 14px;

    min-height: 82px;

    padding: 0 4px;

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

    text-decoration: none;

    transition:
        padding 280ms ease,
        background 280ms ease;
}


.about-pathway-item:hover {
    padding-left: 16px;
    padding-right: 16px;

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


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

.about-pathway-number {
    font-family: var(--font-body);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.06em;

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


/* =========================================================
   SMALL CONNECTING LINE
   ========================================================= */

.about-pathway-short-line {
    display: block;

    width: 40px;

    height: 1px;

    background: rgba(33, 138, 134, 0.55);

    transition:
        width 250ms ease,
        background 250ms ease;
}


.about-pathway-item:hover .about-pathway-short-line {
    width: 52px;

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


/* =========================================================
   NAME
   ========================================================= */

.about-pathway-name {
    min-width: 0;

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

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

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.035em;

    color: var(--color-black);

    transition:
        transform 280ms ease;
}


.about-pathway-item:hover .about-pathway-name {
    transform: translateX(5px);
}


/* =========================================================
   ARROW
   ========================================================= */

.about-pathway-arrow {
    display: flex;

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

    justify-self: end;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(17, 17, 17, 0.28);

    border-radius: 50%;

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

    font-size: 0.95rem;

    color: var(--color-black);

    transition:
        background 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


.about-pathway-item:hover .about-pathway-arrow {
    background: var(--color-teal);

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

    color: var(--color-white);

    transform: rotate(45deg);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .about-pathways-container {
        grid-template-columns:
            minmax(380px, 0.82fr)
            minmax(600px, 1.18fr);

        gap: 120px;
    }


    .about-pathways-title {
        font-size: 6rem;
    }


    .about-pathway-item {
        min-height: 86px;
    }

}


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

@media (max-width: 1100px) {

    .about-pathways {
        padding: 105px 0;
    }


    .about-pathways-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .about-pathways-intro {
        min-height: auto;
    }


    .about-pathways-description {
        max-width: 650px;
    }


    .about-pathways-orbit {
        display: none;
    }


    .about-pathways-list {
        max-width: 850px;
    }

}


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

@media (max-width: 650px) {

    .about-pathways {
        padding: 76px 0 82px;
    }


    .about-pathways-container {
        gap: 52px;
    }


    .about-pathways-label {
        margin-bottom: 25px;

        font-size: 0.62rem;
    }


    .about-pathways-title {
        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height: 1;
    }


    /*
       Extra separation on mobile because the title
       becomes very large relative to the viewport.
    */

    .about-pathways-title-line {
        line-height: 1.04;
    }


    .about-pathways-title-line--accent {
        margin-top: 12px;

        padding-top: 3px;
    }


    .about-pathways-description {
        margin-top: 30px;

        font-size: 0.92rem;

        line-height: 1.7;
    }


    .about-pathways-philosophy {
        margin-top: 32px;

        gap: 12px;
    }


    .about-pathways-philosophy-line {
        width: 35px;
    }


    .about-pathways-philosophy-text {
        gap: 7px;

        font-size: 0.53rem;

        letter-spacing: 0.13em;
    }


    /* Pathway list */

    .about-pathway-item {
        grid-template-columns:
            30px
            25px
            minmax(0, 1fr)
            36px;

        gap: 8px;

        min-height: 76px;

        padding: 0;
    }


    .about-pathway-item:hover {
        padding-left: 8px;
        padding-right: 8px;
    }


    .about-pathway-number {
        font-size: 0.57rem;
    }


    .about-pathway-short-line {
        width: 22px;
    }


    .about-pathway-item:hover .about-pathway-short-line {
        width: 28px;
    }


    .about-pathway-name {
        font-size:
            clamp(1.08rem, 4.8vw, 1.4rem);

        line-height: 1.12;
    }


    .about-pathway-arrow {
        width: 32px;
        height: 32px;

        font-size: 0.72rem;
    }

}

/* =========================================================
   ABOUT PAGE
   SECTION 06 — HOW WE WORK
   LEFT CONTENT + RIGHT PATH COMPASS
   ========================================================= */

.about-process {
    position: relative;

    padding: 125px 0 120px;

    background: var(--color-lime);

    overflow: hidden;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.about-process-container {
    display: grid;

    grid-template-columns:
        minmax(390px, 0.82fr)
        minmax(620px, 1.18fr);

    gap: 70px;

    align-items: center;

    min-height: 720px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.about-process-content {
    position: relative;

    z-index: 20;

    padding-right: 20px;
}


.about-process-label-wrap {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 34px;
}


.about-process-label {
    font-family: var(--font-body);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    white-space: nowrap;

    color: var(--color-teal-dark);
}


.about-process-label-line {
    width: 45px;

    height: 1px;

    background: rgba(33, 138, 134, 0.38);
}


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

.about-process-title {
    max-width: 610px;

    margin: 0;

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

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

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.065em;

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


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

    margin-top: 16px;

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


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

.about-process-description {
    max-width: 490px;

    margin: 38px 0 0;

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

    font-size: 0.98rem;

    line-height: 1.8;

    color: rgba(17, 17, 17, 0.61);
}


/* =========================================================
   SUPPORTING NOTE
   ========================================================= */

.about-process-note {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 42px;
}


.about-process-note-symbol {
    display: flex;

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

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-black);

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

    font-size: 1.1rem;

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


.about-process-note p {
    max-width: 280px;

    margin: 0;

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

    font-size: 0.72rem;

    line-height: 1.6;

    color: rgba(17, 17, 17, 0.5);
}


.about-process-note strong {
    color: var(--color-teal-dark);
}


/* =========================================================
   RIGHT PATH COMPASS
   ========================================================= */

.about-process-compass {
    position: relative;

    width: 100%;

    max-width: 720px;

    height: 680px;

    margin: 0 auto;

    isolation: isolate;
}


/* =========================================================
   DECORATIVE RINGS
   ========================================================= */

.about-process-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    pointer-events: none;

    z-index: 0;
}


.about-process-ring--outer {
    width: 600px;
    height: 600px;

    border: 1px solid rgba(33, 138, 134, 0.07);
}


.about-process-ring--inner {
    width: 400px;
    height: 400px;

    border: 1px solid rgba(33, 138, 134, 0.15);
}


/* =========================================================
   ORBIT
   ========================================================= */

.about-process-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 480px;
    height: 138px;

    border: 1px solid rgba(33, 138, 134, 0.11);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-17deg);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   CENTER PATH
   ========================================================= */

.about-process-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 158px;
    height: 158px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    background: var(--color-black);

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

    z-index: 30;

    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.13);
}


.about-process-center-kicker {
    margin-bottom: 4px;

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

    font-size: 0.55rem;

    font-weight: 700;

    letter-spacing: 0.22em;

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


.about-process-center-title {
    font-family: var(--font-heading);

    font-size: 2.35rem;

    font-weight: 800;

    line-height: 0.95;

    letter-spacing: -0.06em;

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


.about-process-center-arrow {
    margin-top: 9px;

    font-size: 0.9rem;

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


/* =========================================================
   PROCESS POINTS
   ========================================================= */

.about-process-point {
    position: absolute;

    width: 205px;

    z-index: 25;
}


.about-process-point-number {
    position: relative;

    display: flex;

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

    width: 36px;
    height: 36px;

    margin-bottom: 12px;

    border: 1px solid rgba(33, 138, 134, 0.35);

    border-radius: 50%;

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

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

    font-size: 0.58rem;

    font-weight: 700;

    color: var(--color-teal-dark);

    z-index: 26;

    transition:
        background 250ms ease,
        transform 250ms ease;
}


.about-process-point:hover
.about-process-point-number {
    background: var(--color-white);

    transform: scale(1.08);
}


.about-process-point-content {
    position: relative;

    z-index: 26;
}


.about-process-point-kicker {
    display: block;

    margin-bottom: 6px;

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

    font-size: 0.53rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    color: var(--color-teal-dark);
}


.about-process-point h3 {
    margin: 0 0 8px;

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

    font-size: 1.75rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;

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


.about-process-point p {
    max-width: 205px;

    margin: 0;

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

    font-size: 0.72rem;

    line-height: 1.6;

    color: rgba(17, 17, 17, 0.52);
}


/* =========================================================
   NORTH — 01 UNDERSTAND
   ========================================================= */

.about-process-point--north {
    left: 50%;

    top: 0;

    text-align: center;

    transform: translateX(-50%);
}


.about-process-point--north
.about-process-point-number {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   WEST — 02 EXPLORE
   ========================================================= */

.about-process-point--west {
    left: 10;

    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   EAST — 03 COMPARE
   ========================================================= */

.about-process-point--east {
    left: 80%;

    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   SOUTH — 04 DECIDE
   ========================================================= */

.about-process-point--south {
    left: 50%;

    bottom: 0;

    text-align: center;

    transform: translateX(-50%);
}


.about-process-point--south
.about-process-point-number {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   CONNECTOR BASE
   ========================================================= */

.about-process-connector {
    position: absolute;

    display: block;

    background: rgba(33, 138, 134, 0.72);

    pointer-events: none;

    z-index: 4;
}


/* =========================================================
   01 → PATH
   NORTH CONNECTOR

   IMPORTANT:
   The line begins BELOW the Understand content.
   ========================================================= */

.about-process-connector--north {
    left: 50%;

    top: 145px;

    width: 1px;

    height: 72px;

    transform: translateX(-50%);
}


/* =========================================================
   PATH → 04
   SOUTH CONNECTOR

   IMPORTANT:
   The line ends ABOVE the Decide content.
   ========================================================= */

.about-process-connector--south {
    left: 50%;

    bottom: 145px;

    width: 1px;

    height: 72px;

    transform: translateX(-50%);
}


/* =========================================================
   02 → PATH
   WEST CONNECTOR
   ========================================================= */

.about-process-connector--west {
    left: 180px;

    top: 50%;

    width: 78px;

    height: 1px;

    transform: translateY(-50%);
}


/* =========================================================
   PATH → 03
   EAST CONNECTOR
   ========================================================= */

.about-process-connector--east {
    right: 180px;

    top: 50%;

    width: 78px;

    height: 1px;

    transform: translateY(-50%);
}


/* =========================================================
   ARROWHEADS
   ========================================================= */

.about-process-connector--north::after,
.about-process-connector--south::after,
.about-process-connector--west::after,
.about-process-connector--east::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

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

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


/* North */

.about-process-connector--north::after {
    left: 50%;

    bottom: 0;

    transform:
        translateX(-50%)
        rotate(135deg);
}


/* South */

.about-process-connector--south::after {
    left: 50%;

    top: 0;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


/* West */

.about-process-connector--west::after {
    right: 0;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* East */

.about-process-connector--east::after {
    left: 0;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(-135deg);
}


/* =========================================================
   DIRECTION INDICATORS
   ========================================================= */

.about-process-direction {
    position: absolute;

    display: flex;

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

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: var(--color-white);

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

    font-size: 0.65rem;

    color: var(--color-teal);

    z-index: 15;
}


/* North indicator */

.about-process-direction--north {
    left: 50%;

    top: 217px;

    transform: translateX(-50%);
}


/* South indicator */

.about-process-direction--south {
    left: 50%;

    bottom: 217px;

    transform: translateX(-50%);
}


/* West indicator */

.about-process-direction--west {
    left: 258px;

    top: 50%;

    transform: translateY(-50%);
}


/* East indicator */

.about-process-direction--east {
    right: 258px;

    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .about-process-container {
        grid-template-columns:
            minmax(410px, 0.8fr)
            minmax(680px, 1.2fr);

        gap: 90px;

        min-height: 740px;
    }


    .about-process-compass {
        max-width: 790px;

        height: 710px;
    }


    .about-process-ring--outer {
        width: 640px;
        height: 640px;
    }


    .about-process-ring--inner {
        width: 420px;
        height: 420px;
    }


    .about-process-orbit {
        width: 510px;

        height: 145px;
    }


    .about-process-point {
        width: 220px;
    }


    .about-process-point p {
        max-width: 220px;
    }


    .about-process-connector--north {
        top: 150px;

        height: 78px;
    }


    .about-process-connector--south {
        bottom: 150px;

        height: 78px;
    }


    .about-process-connector--west {
        left: 195px;

        width: 92px;
    }


    .about-process-connector--east {
        right: 195px;

        width: 92px;
    }


    .about-process-direction--north {
        top: 228px;
    }


    .about-process-direction--south {
        bottom: 228px;
    }


    .about-process-direction--west {
        left: 292px;
    }


    .about-process-direction--east {
        right: 292px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1150px) {

    .about-process {
        padding: 105px 0;
    }


    .about-process-container {
        grid-template-columns:
            minmax(300px, 0.72fr)
            minmax(500px, 1.28fr);

        gap: 30px;

        min-height: 650px;
    }


    .about-process-title {
        font-size:
            clamp(3rem, 5vw, 4.7rem);
    }


    .about-process-description {
        max-width: 440px;
    }


    .about-process-compass {
        height: 620px;
    }


    .about-process-ring--outer {
        width: 540px;
        height: 540px;
    }


    .about-process-ring--inner {
        width: 365px;
        height: 365px;
    }


    .about-process-orbit {
        width: 420px;

        height: 120px;
    }


    .about-process-center {
        width: 142px;
        height: 142px;
    }


    .about-process-center-title {
        font-size: 2rem;
    }


    .about-process-point {
        width: 175px;
    }


    .about-process-point-kicker {
        font-size: 0.48rem;
    }


    .about-process-point h3 {
        font-size: 1.5rem;
    }


    .about-process-point p {
        max-width: 175px;

        font-size: 0.64rem;
    }


    /* North */

    .about-process-connector--north {
        top: 125px;

        height: 68px;
    }


    /* South */

    .about-process-connector--south {
        bottom: 125px;

        height: 68px;
    }


    /* West */

    .about-process-connector--west {
        left: 125px;

        width: 65px;
    }


    /* East */

    .about-process-connector--east {
        right: 125px;

        width: 65px;
    }


    .about-process-direction--north {
        top: 193px;
    }


    .about-process-direction--south {
        bottom: 193px;
    }


    .about-process-direction--west {
        left: 190px;
    }


    .about-process-direction--east {
        right: 190px;
    }

}


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

@media (max-width: 800px) {

    .about-process {
        padding: 80px 0 85px;
    }


    .about-process-container {
        display: block;

        min-height: auto;
    }


    /* ---------------------------------------------
       LEFT CONTENT
       --------------------------------------------- */

    .about-process-content {
        padding-right: 0;
    }


    .about-process-label-wrap {
        margin-bottom: 27px;
    }


    .about-process-label {
        font-size: 0.6rem;
    }


    .about-process-label-line {
        width: 25px;
    }


    .about-process-title {
        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height: 1;
    }


    .about-process-title span {
        margin-top: 11px;
    }


    .about-process-description {
        margin-top: 28px;

        font-size: 0.91rem;

        line-height: 1.7;
    }


    .about-process-note {
        margin-top: 32px;
    }


    /* ---------------------------------------------
       COMPASS
       --------------------------------------------- */

    .about-process-compass {
        width: 100%;

        max-width: 100%;

        height: 520px;

        margin-top: 65px;
    }


    .about-process-ring--outer {
        width: 450px;
        height: 450px;
    }


    .about-process-ring--inner {
        width: 305px;
        height: 305px;
    }


    .about-process-orbit {
        width: 350px;

        height: 105px;
    }


    .about-process-center {
        width: 115px;
        height: 115px;
    }


    .about-process-center-title {
        font-size: 1.65rem;
    }


    .about-process-center-kicker {
        font-size: 0.45rem;
    }


    .about-process-center-arrow {
        font-size: 0.75rem;
    }


    /* ---------------------------------------------
       POINTS
       --------------------------------------------- */

    .about-process-point {
        width: 140px;
    }


    .about-process-point-number {
        width: 32px;
        height: 32px;

        margin-bottom: 9px;

        font-size: 0.52rem;
    }


    .about-process-point-kicker {
        font-size: 0.44rem;

        line-height: 1.35;
    }


    .about-process-point h3 {
        font-size: 1.25rem;

        margin-bottom: 6px;
    }


    .about-process-point p {
        max-width: 140px;

        font-size: 0.61rem;

        line-height: 1.55;
    }


    /* ---------------------------------------------
       NORTH CONNECTOR
       --------------------------------------------- */

    .about-process-connector--north {
        top: 93px;

        height: 55px;
    }


    /* ---------------------------------------------
       SOUTH CONNECTOR
       --------------------------------------------- */

    .about-process-connector--south {
        bottom: 93px;

        height: 55px;
    }


    /* ---------------------------------------------
       HORIZONTAL CONNECTORS
       --------------------------------------------- */

    .about-process-connector--west {
        left: 110px;

        width: 55px;
    }


    .about-process-connector--east {
        right: 110px;

        width: 55px;
    }


    /* ---------------------------------------------
       DIRECTION INDICATORS
       --------------------------------------------- */

    .about-process-direction--north {
        top: 148px;
    }


    .about-process-direction--south {
        bottom: 148px;
    }


    .about-process-direction--west {
        left: calc(50% - 175px);
    }


    .about-process-direction--east {
        right: calc(50% - 175px);
    }

}


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

@media (max-width: 520px) {

    .about-process {
        padding: 75px 0 80px;
    }


    .about-process-compass {
        height: 455px;

        margin-top: 55px;
    }


    .about-process-ring--outer {
        width: 350px;
        height: 350px;
    }


    .about-process-ring--inner {
        width: 235px;
        height: 235px;
    }


    .about-process-orbit {
        width: 280px;

        height: 85px;
    }


    .about-process-center {
        width: 96px;
        height: 96px;
    }


    .about-process-center-title {
        font-size: 1.4rem;
    }


    .about-process-center-kicker {
        font-size: 0.4rem;
    }


    .about-process-center-arrow {
        margin-top: 6px;

        font-size: 0.7rem;
    }


    .about-process-point {
        width: 115px;
    }


    .about-process-point-number {
        width: 30px;
        height: 30px;

        font-size: 0.48rem;
    }


    .about-process-point-kicker {
        font-size: 0.4rem;
    }


    .about-process-point h3 {
        font-size: 1.08rem;
    }


    .about-process-point p {
        max-width: 115px;

        font-size: 0.54rem;
    }


    /* North */

    .about-process-connector--north {
        top: 73px;

        height: 52px;
    }


    /* South */

    .about-process-connector--south {
        bottom: 73px;

        height: 52px;
    }


    /* West */

    .about-process-connector--west {
        left: 88px;

        width: 42px;
    }


    /* East */

    .about-process-connector--east {
        right: 88px;

        width: 42px;
    }


    /* Direction indicators */

    .about-process-direction--north {
        top: 125px;
    }


    .about-process-direction--south {
        bottom: 125px;
    }


    .about-process-direction--west {
        left: calc(50% - 140px);
    }


    .about-process-direction--east {
        right: calc(50% - 140px);
    }

}

/* =========================================================
   ABOUT — WHY CHOOSE US
   ========================================================= */

.about-why {
    padding: 140px 0;
    background: var(--color-background);
}

.about-why-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(600px, 1.4fr);
    gap: 100px;
    align-items: start;
}


/* ---------------------------------------------------------
   LEFT CONTENT
   --------------------------------------------------------- */

.about-why-intro {
    position: sticky;
    top: 120px;
}

.about-why-label-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.about-why-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--color-teal);
    white-space: nowrap;
}

.about-why-label-line {
    width: 55px;
    height: 1px;
    background: var(--color-teal);
}

.about-why-title {
    margin: 0;
    max-width: 500px;

    font-family: var(--font-heading);
    font-size: clamp(52px, 5.5vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;

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

.about-why-title span {
    display: block;
    color: var(--color-teal);
}

.about-why-description {
    max-width: 470px;
    margin: 30px 0 35px;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;

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

.about-why-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 7px;

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

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;

    color: var(--color-black);
    text-decoration: none;

    transition:
        color .25s ease,
        border-color .25s ease;
}

.about-why-link span {
    font-size: 17px;
    transition: transform .25s ease;
}

.about-why-link:hover {
    color: var(--color-teal);
    border-color: var(--color-teal);
}

.about-why-link:hover span {
    transform: translate(3px, -3px);
}


/* ---------------------------------------------------------
   BENEFIT GRID
   --------------------------------------------------------- */

.about-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-why-item {
    min-height: 300px;
    padding: 32px 35px;

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

    transition:
        background-color .3s ease,
        transform .3s ease;
}

.about-why-item:nth-child(1),
.about-why-item:nth-child(2) {
    border-top: 1px solid var(--color-black);
}

.about-why-item:nth-child(2n) {
    border-right: 1px solid var(--color-border);
}

.about-why-item:nth-child(3),
.about-why-item:nth-child(4) {
    border-bottom: 1px solid var(--color-border);
}

.about-why-item:hover {
    background: var(--color-lime);
}


/* ---------------------------------------------------------
   ITEM TOP
   --------------------------------------------------------- */

.about-why-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 42px;
}

.about-why-number {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-teal);
}

.about-why-icon {
    width: 32px;
    height: 32px;

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

    border: 1px solid var(--color-border);
    border-radius: 50%;

    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-black);

    transition:
        background-color .3s ease,
        border-color .3s ease;
}

.about-why-item:hover .about-why-icon {
    background: var(--color-white);
    border-color: var(--color-black);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.about-why-kicker {
    display: block;
    margin-bottom: 13px;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;

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

.about-why-item h3 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 800;

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

.about-why-item h3 span {
    display: block;
    color: var(--color-teal);
}

.about-why-item p {
    max-width: 330px;

    margin: 17px 0 0;

    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;

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


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

@media (max-width: 1100px) {

    .about-why {
        padding: 110px 0;
    }

    .about-why-layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .about-why-intro {
        position: static;
    }

    .about-why-title {
        font-size: clamp(52px, 8vw, 72px);
    }

    .about-why-description {
        max-width: 600px;
    }

}


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

@media (max-width: 700px) {

    .about-why {
        padding: 90px 0;
    }

    .about-why-layout {
        gap: 55px;
    }

    .about-why-title {
        font-size: 48px;
    }

    .about-why-description {
        font-size: 14px;
        line-height: 1.75;
    }

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

    .about-why-item,
    .about-why-item:nth-child(1),
    .about-why-item:nth-child(2),
    .about-why-item:nth-child(3),
    .about-why-item:nth-child(4) {
        min-height: auto;

        padding: 30px 0;

        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        border-top: 0;
    }

    .about-why-item:first-child {
        border-top: 1px solid var(--color-black);
    }

    .about-why-item-top {
        margin-bottom: 30px;
    }

    .about-why-item h3 {
        font-size: 23px;
    }

    .about-why-item p {
        max-width: 500px;
    }

}