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


/*================================================
    HEADER ACTIVE
================================================*/

.desktop-nav a.active {
    color: #fff;
}


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

.about-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    padding: 175px 0 80px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(102, 122, 255, 0.16),
            transparent 31%
        ),
        #050608;
}

.about-grid-bg {
    position: absolute;

    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 65px 65px;
}

.about-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);
}

.about-orb-one {
    top: 140px;
    right: 10%;

    width: 420px;
    height: 420px;

    background: rgba(87, 112, 255, 0.08);
}

.about-orb-two {
    left: 25%;
    bottom: -170px;

    width: 430px;
    height: 430px;

    background: rgba(144, 91, 255, 0.07);
}

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

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    align-items: end;

    gap: 100px;
}

.about-kicker {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    color: #7893f7;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.about-kicker::before {
    width: 34px;
    height: 1px;

    background: #758ef2;

    content: "";
}

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

    margin-top: 28px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 82px;
    font-weight: 500;
    line-height: .98;

    letter-spacing: -4px;
}

.about-hero h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.65);
}

.about-hero-right > p {
    margin-bottom: 20px;

    color: #8c95a5;

    font-size: 13px;
    line-height: 1.85;
}

.about-hero-meta {
    display: grid;

    grid-template-columns: 1fr;

    margin-top: 45px;

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

.about-hero-meta > div {
    display: flex;

    min-height: 62px;

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

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

.about-hero-meta small {
    color: #535d6c;

    font-size: 7px;

    letter-spacing: 1.2px;
}

.about-hero-meta strong {
    color: #aab2bf;

    font-size: 10px;
}

.about-scroll-line {
    position: relative;
    z-index: 2;

    display: flex;

    justify-content: space-between;

    margin-top: 95px;

    padding-top: 22px;

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

    color: #414a58;

    font-size: 7px;

    letter-spacing: 1.4px;
}


/*================================================
    STORY
================================================*/

.about-story {
    padding: 135px 0;

    background: #f2f1ed;
    color: #111319;
}

.about-story-grid {
    display: grid;

    grid-template-columns: .28fr 1.12fr .4fr;

    gap: 70px;
}

.about-story-index {
    display: flex;

    flex-direction: column;

    gap: 10px;

    color: #7b8290;
}

.about-story-index span {
    font-family: "Space Grotesk", sans-serif;

    font-size: 27px;
}

.about-story-index small {
    font-size: 7px;

    letter-spacing: 1.4px;
}

.about-story-main h2 {
    max-width: 800px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 56px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2.5px;
}

.about-story-main p {
    max-width: 720px;

    margin-top: 30px;

    color: #72767d;

    font-size: 13px;
    line-height: 1.9;
}

.about-story-side {
    align-self: end;
}

.about-side-line {
    width: 100%;

    margin-bottom: 24px;

    border-top: 1px solid #ccc9c2;
}

.about-story-side span {
    color: #92959a;

    font-size: 7px;

    letter-spacing: 1.4px;
}

.about-story-side strong {
    display: block;

    margin-top: 15px;

    color: #34383f;

    font-family: "Space Grotesk", sans-serif;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.8;
}


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

.about-section-heading {
    display: grid;

    grid-template-columns: .3fr 1fr;

    align-items: start;

    margin-bottom: 70px;
}

.about-section-heading h2 {
    max-width: 780px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 53px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}


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

.about-principles {
    padding: 130px 0;

    background: #090b0f;
}

.principles-list {
    border-top: 1px solid rgba(255,255,255,.1);
}

.principle-row {
    display: grid;

    grid-template-columns: 80px 1fr .4fr;

    align-items: center;

    gap: 40px;

    min-height: 175px;

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

    transition: .3s ease;
}

.principle-row:hover {
    padding-left: 16px;

    background: rgba(255,255,255,.02);
}

.principle-number {
    color: #4e5968;

    font-size: 9px;
}

.principle-row h3 {
    color: #f3f4f6;

    font-family: "Space Grotesk", sans-serif;

    font-size: 28px;
    font-weight: 500;

    letter-spacing: -1px;
}

.principle-row p {
    max-width: 500px;

    margin-top: 10px;

    color: #727c8b;

    font-size: 11px;
    line-height: 1.8;
}

.principle-word {
    justify-self: end;

    color: #354054;

    font-family: "Space Grotesk", sans-serif;

    font-size: 32px;

    letter-spacing: -1px;
}


/*================================================
    DISCIPLINES
================================================*/

.about-disciplines {
    padding: 135px 0;

    background: #f2f1ed;
}

.disciplines-layout {
    display: grid;

    grid-template-columns: .7fr 1.3fr;

    align-items: start;

    gap: 100px;
}

.disciplines-heading h2 {
    margin: 18px 0;

    color: #111319;

    font-family: "Space Grotesk", sans-serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.disciplines-heading p {
    max-width: 470px;

    color: #75787e;

    font-size: 12px;
    line-height: 1.8;
}

.discipline-grid {
    display: grid;

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

    border-top: 1px solid #cbc8c1;
    border-left: 1px solid #cbc8c1;
}

.discipline-card {
    position: relative;

    min-height: 285px;

    padding: 32px;

    border-right: 1px solid #cbc8c1;
    border-bottom: 1px solid #cbc8c1;

    transition: .3s ease;
}

.discipline-card:hover {
    background: #fff;
}

.discipline-card > span {
    position: absolute;

    top: 28px;
    right: 28px;

    color: #a7a9ad;

    font-size: 8px;
}

.discipline-card i {
    color: #6e86da;

    font-size: 22px;
}

.discipline-card h3 {
    margin-top: 70px;

    color: #171a20;

    font-family: "Space Grotesk", sans-serif;

    font-size: 27px;
    font-weight: 500;
}

.discipline-card p {
    margin-top: 12px;

    color: #74787f;

    font-size: 11px;
    line-height: 1.8;
}


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

.about-process {
    padding: 130px 0;

    background: #07090c;
}

.process-heading {
    margin-bottom: 90px;
}

.process-track {
    position: relative;

    display: grid;

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

    gap: 0;

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

.process-step {
    position: relative;

    min-height: 260px;

    padding: 40px 30px;

    border-right: 1px solid rgba(255,255,255,.1);
}

.process-step:first-child {
    border-left: 1px solid rgba(255,255,255,.1);
}

.process-marker {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border: 1px solid rgba(106,132,237,.35);

    color: #7189e6;

    font-size: 8px;
}

.process-step h3 {
    margin-top: 85px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 24px;
    font-weight: 500;
}

.process-step p {
    max-width: 210px;

    margin-top: 11px;

    color: #667181;

    font-size: 10px;
    line-height: 1.7;
}


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

.about-vision {
    padding: 140px 0;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(92, 110, 255, .12),
            transparent 32%
        ),
        #0b0e14;
}

.vision-layout {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    align-items: start;

    gap: 100px;
}

.vision-left h2 {
    margin-top: 20px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 55px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.vision-right > p {
    max-width: 620px;

    margin-bottom: 20px;

    color: #7b8594;

    font-size: 13px;
    line-height: 1.9;
}

.vision-data {
    display: grid;

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

    margin-top: 50px;

    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
}

.vision-data > div {
    min-height: 105px;

    padding: 23px;

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

.vision-data small {
    display: block;

    margin-bottom: 10px;

    color: #4e5868;

    font-size: 7px;

    letter-spacing: 1px;
}

.vision-data strong {
    color: #aab2c0;

    font-size: 10px;
}


/*================================================
    CTA
================================================*/

.about-cta {
    padding: 120px 0;

    background: #f2f1ed;
}

.about-cta-box {
    display: grid;

    grid-template-columns: .25fr 1fr 180px;

    align-items: center;

    gap: 50px;

    padding: 70px 0;

    border-top: 1px solid #cbc8c1;
    border-bottom: 1px solid #cbc8c1;
}

.about-cta-index {
    color: #91949a;

    font-size: 8px;

    letter-spacing: 1px;
}

.about-cta-box small {
    color: #7285cc;

    font-size: 8px;

    letter-spacing: 1.4px;
}

.about-cta-box h2 {
    margin-top: 12px;

    color: #111319;

    font-family: "Space Grotesk", sans-serif;

    font-size: 48px;
    font-weight: 500;

    letter-spacing: -2px;
}

.about-cta-box p {
    max-width: 610px;

    margin-top: 15px;

    color: #76797f;

    font-size: 11px;
    line-height: 1.8;
}

.about-cta-box > a {
    display: flex;

    width: 160px;
    height: 160px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 22px;

    border-radius: 50%;

    background: #111319;
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    text-align: center;

    transition: .3s ease;
}

.about-cta-box > a:hover {
    transform: rotate(-5deg) scale(1.04);

    background: #697fd4;
}


/*================================================
    RESPONSIVE
================================================*/

@media (max-width: 1000px) {

    .about-hero-inner,
    .disciplines-layout,
    .vision-layout {
        grid-template-columns: 1fr;
    }

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

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

    .about-story-side {
        display: none;
    }

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

    .about-cta-box {
        grid-template-columns: .2fr 1fr;
    }

    .about-cta-box > a {
        grid-column: 2;
    }

}


@media (max-width: 700px) {

    .about-hero {
        min-height: auto;

        padding: 135px 0 70px;
    }

    .about-hero h1 {
        font-size: 46px;
        letter-spacing: -2.4px;
    }

    .about-scroll-line {
        flex-direction: column;

        gap: 8px;
    }

    .about-story,
    .about-principles,
    .about-disciplines,
    .about-process,
    .about-vision,
    .about-cta {
        padding: 85px 0;
    }

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

    .about-story-main h2,
    .about-section-heading h2,
    .disciplines-heading h2,
    .vision-left h2 {
        font-size: 38px;
    }

    .about-section-heading {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 45px;
    }

    .principle-row {
        grid-template-columns: 35px 1fr;

        gap: 15px;

        padding: 30px 0;
    }

    .principle-word {
        display: none;
    }

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

    .process-track {
        grid-template-columns: 1fr;
    }

    .process-step {
        border-left: 1px solid rgba(255,255,255,.1);
    }

    .vision-data {
        grid-template-columns: 1fr;
    }

    .about-cta-box {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-cta-box > a {
        grid-column: auto;

        justify-self: center;
    }

    .about-cta-box h2 {
        font-size: 38px;
    }

}