/* =========================================================
   LMAK GLOBAL — ABOUT PAGE
   about.css
   ========================================================= */


/* =========================================================
   01. ABOUT HERO
   ========================================================= */

.about-page-hero {
    position: relative;
    min-height: min(900px, 88svh);

    display: flex;
    align-items: center;

    padding-top: calc(var(--header-height, 88px) + 72px);
    padding-bottom: 110px;

    overflow: hidden;
    isolation: isolate;
}


/* Background grid */

.about-hero-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

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

    background-size: 76px 76px;

    mask-image:
        radial-gradient(
            ellipse at 68% 48%,
            black 0%,
            rgba(0,0,0,.88) 30%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at 68% 48%,
            black 0%,
            rgba(0,0,0,.88) 30%,
            transparent 78%
        );

    opacity: .95;

    z-index: -4;
}


/* Green glow */

.about-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;

    z-index: -3;
}

.about-hero-glow-one {
    width: min(720px, 66vw);
    aspect-ratio: 1;

    top: -12%;
    right: -16%;

    background:
        radial-gradient(
            circle,
            rgba(56,200,106,.17) 0%,
            rgba(56,200,106,.07) 31%,
            rgba(56,200,106,.025) 50%,
            transparent 73%
        );

    filter: blur(6px);

    animation:
        aboutGlowFloat 10s ease-in-out infinite alternate;
}

.about-hero-glow-two {
    width: min(570px, 52vw);
    aspect-ratio: 1;

    left: -22%;
    bottom: -38%;

    background:
        radial-gradient(
            circle,
            rgba(242,203,32,.095) 0%,
            rgba(242,203,32,.035) 38%,
            transparent 73%
        );

    filter: blur(14px);

    animation:
        aboutGlowFloatTwo 13s ease-in-out infinite alternate;
}

@keyframes aboutGlowFloat {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-24px, 30px, 0) scale(1.08);
    }

}

@keyframes aboutGlowFloatTwo {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(32px, -22px, 0) scale(1.08);
    }

}


/* Hero layout */

.about-page-hero .container {
    position: relative;
    width: 100%;
}

.about-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(410px, .95fr);

    align-items: center;

    gap: clamp(55px, 7vw, 110px);
}


/* Hero content */

.about-hero-content {
    position: relative;
    z-index: 5;

    max-width: 760px;
}

.about-hero-content .section-eyebrow {
    margin-bottom: 25px;
}

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

    color: var(--white);

    font-size:
        clamp(
            58px,
            6.5vw,
            96px
        );

    line-height: .91;

    font-weight: 800;

    letter-spacing: -.078em;

    text-wrap: balance;
}

.about-hero-title span {
    color: var(--green);
}

.about-hero-description {
    max-width: 690px;

    margin-top: 30px;

    color: var(--text-soft);

    font-size:
        clamp(
            17px,
            1.35vw,
            20px
        );

    line-height: 1.78;
}


/* Hero scroll */

.about-hero-scroll {
    position: absolute;

    right: max(
        var(--gutter, 28px),
        calc((100vw - var(--container, 1240px)) / 2)
    );

    bottom: 38px;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: var(--text-muted);

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

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    z-index: 5;
}

.about-hero-scroll .hero-scroll-line {
    position: relative;

    width: 38px;
    height: 1px;

    overflow: hidden;

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

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

    position: absolute;
    top: 0;
    left: 0;

    width: 52%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green)
        );

    animation:
        aboutScrollLine 2.3s ease-in-out infinite;
}

@keyframes aboutScrollLine {

    0% {
        transform: translateX(-120%);
    }

    46% {
        transform: translateX(205%);
    }

    100% {
        transform: translateX(205%);
    }

}


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

.about-hero-visual {
    position: relative;

    width: min(100%, 620px);
    aspect-ratio: 1 / 1;

    margin-inline: auto;

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

    isolation: isolate;

    perspective: 1000px;
}


/* Soft center glow */

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

    position: absolute;

    width: 46%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,200,106,.16),
            rgba(56,200,106,.04) 45%,
            transparent 72%
        );

    filter: blur(14px);

    animation:
        aboutCoreGlow 5s ease-in-out infinite alternate;

    z-index: -3;
}

@keyframes aboutCoreGlow {

    from {
        transform: scale(.88);
        opacity: .62;
    }

    to {
        transform: scale(1.16);
        opacity: 1;
    }

}


/* Orbit rings */

.about-visual-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

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

    pointer-events: none;

    will-change: transform;

    z-index: -2;
}

.about-orbit-one {
    width: 46%;
    height: 46%;

    border-color:
        rgba(56,200,106,.25);

    animation:
        aboutOrbitOne
        14s
        linear
        infinite;
}

.about-orbit-two {
    width: 64%;
    height: 64%;

    border-color:
        rgba(242,203,32,.16);

    animation:
        aboutOrbitTwo
        20s
        linear
        infinite reverse;
}

.about-orbit-three {
    width: 84%;
    height: 84%;

    border-color:
        rgba(255,255,255,.08);

    animation:
        aboutOrbitThree
        27s
        linear
        infinite;
}

@keyframes aboutOrbitOne {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(1.025);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            scale(1);
    }

}

@keyframes aboutOrbitTwo {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes aboutOrbitThree {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(.98);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            scale(1);
    }

}


/* Orbit points */

.about-orbit-one::after,
.about-orbit-two::after,
.about-orbit-three::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    box-shadow:
        0 0 16px rgba(255,255,255,.2);
}

.about-orbit-one::after {
    top: 7%;
    left: 19%;

    background: var(--green);
    box-shadow:
        0 0 18px rgba(56,200,106,.55);
}

.about-orbit-two::after {
    right: 8%;
    bottom: 22%;

    background: var(--yellow);
    box-shadow:
        0 0 18px rgba(242,203,32,.48);
}

.about-orbit-three::after {
    left: 8%;
    bottom: 17%;

    width: 5px;
    height: 5px;

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


/* Core */

.about-visual-core {
    position: relative;

    width: 33%;
    min-width: 150px;
    aspect-ratio: 1;

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

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 32%,
            rgba(56,200,106,.11),
            rgba(3,8,6,.96) 65%
        );

    box-shadow:
        0 24px 80px rgba(0,0,0,.42),
        inset 0 0 40px rgba(56,200,106,.055);

    animation:
        aboutCoreBreath
        4.6s
        ease-in-out
        infinite;
}

@keyframes aboutCoreBreath {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.025);
    }

}


/* Core ring */

.about-visual-core::before {
    content: "";

    position: absolute;
    inset: 9%;

    border:
        1px solid
        rgba(56,200,106,.16);

    border-radius: 50%;

    animation:
        aboutCoreRing
        7s
        ease-in-out
        infinite;
}

@keyframes aboutCoreRing {

    0%,
    100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


/* Core logo */

.about-core-mark {
    width: 34%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 20px rgba(56,200,106,.14)
        );

    opacity: .96;
}

.about-core-label {
    margin-top: 13px;

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

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

    font-weight: 800;

    letter-spacing: .08em;
}


/* Core pulse */

.about-core-glow {
    position: absolute;
    inset: -15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,200,106,.08),
            transparent 62%
        );

    filter: blur(18px);

    animation:
        aboutCoreHalo
        4.6s
        ease-in-out
        infinite;

    z-index: -1;
}

@keyframes aboutCoreHalo {

    0%,
    100% {
        opacity: .35;
        transform: scale(.9);
    }

    50% {
        opacity: .9;
        transform: scale(1.1);
    }

}


/* Floating labels */

.about-floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 10px;

    padding:
        11px 14px;

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

    border-radius: 999px;

    background:
        rgba(5,13,9,.74);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);

    color: var(--text-soft);

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

    font-weight: 700;

    white-space: nowrap;

    z-index: 3;

    will-change: transform;
}

.about-floating-card span {
    color: var(--yellow);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;
}

.about-card-one {
    top: 13%;
    left: 12%;

    animation:
        aboutFloatOne
        5.4s
        ease-in-out
        infinite;
}

.about-card-two {
    top: 20%;
    right: 6%;

    animation:
        aboutFloatTwo
        6.2s
        ease-in-out
        infinite;
}

.about-card-three {
    right: 9%;
    bottom: 17%;

    animation:
        aboutFloatThree
        5.8s
        ease-in-out
        infinite;
}

.about-card-four {
    left: 9%;
    bottom: 13%;

    animation:
        aboutFloatFour
        6.6s
        ease-in-out
        infinite;
}

@keyframes aboutFloatOne {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-4px, -9px, 0);
    }

}

@keyframes aboutFloatTwo {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(5px, -7px, 0);
    }

}

@keyframes aboutFloatThree {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(3px, 8px, 0);
    }

}

@keyframes aboutFloatFour {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-5px, 7px, 0);
    }

}


/* =========================================================
   03. WHO WE ARE
   ========================================================= */

.about-story {
    position: relative;

    padding-top:
        clamp(120px, 12vw, 180px);

    padding-bottom:
        clamp(120px, 11vw, 175px);
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(160px, .34fr)
        minmax(0, 1.66fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items: start;
}

.about-section-label {
    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--text-muted);

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

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    white-space: nowrap;
}

.about-section-label::before {
    content: "";

    width: 23px;
    height: 1px;

    flex: 0 0 23px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green)
        );
}

.about-section-number {
    color: var(--yellow);
}

.about-story-content {
    max-width: 980px;
}

.about-story-content .section-title {
    max-width: 840px;
}

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

    margin-top: 34px;

    display: grid;
    gap: 20px;
}

.about-story-copy p {
    color: var(--text-soft);

    font-size:
        clamp(
            16px,
            1.18vw,
            18px
        );

    line-height: 1.82;
}

.about-story-copy p:first-child {
    color: var(--white);
}


/* =========================================================
   04. STATEMENT
   ========================================================= */

.about-statement {
    padding:
        0 0
        clamp(120px, 12vw, 180px);
}

.about-statement-box {
    position: relative;

    min-height: 530px;

    display: flex;
    align-items: center;

    overflow: hidden;

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

    border-radius:
        var(--radius-xl, 28px);

    background:
        radial-gradient(
            circle at 82% 48%,
            rgba(56,200,106,.09),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.018),
            rgba(56,200,106,.025)
        );

    isolation: isolate;
}


/* Background lines */

.about-statement-grid {
    position: absolute;
    inset: 0;

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

    background-size: 65px 65px;

    mask-image:
        radial-gradient(
            circle at 74% 50%,
            black,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at 74% 50%,
            black,
            transparent 72%
        );

    z-index: -3;
}


/* Glow */

.about-statement-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    right: 6%;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,200,106,.13),
            rgba(56,200,106,.025) 48%,
            transparent 72%
        );

    filter: blur(10px);

    animation:
        statementGlow
        7s
        ease-in-out
        infinite alternate;

    z-index: -2;
}

@keyframes statementGlow {

    from {
        transform:
            translateY(-50%)
            scale(.92);
    }

    to {
        transform:
            translateY(-50%)
            scale(1.12);
    }

}


/* Statement content */

.about-statement-content {
    position: relative;

    z-index: 2;

    width: min(
        62%,
        760px
    );

    padding:
        clamp(48px, 7vw, 90px);
}

.about-statement-label {
    display: block;

    color: var(--yellow);

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

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.about-statement-content h2 {
    margin-top: 22px;

    color: var(--white);

    font-size:
        clamp(
            50px,
            6vw,
            82px
        );

    line-height: .94;

    font-weight: 800;

    letter-spacing: -.075em;
}

.about-statement-content h2 span {
    color: var(--green);
}

.about-statement-content p {
    max-width: 630px;

    margin-top: 28px;

    color: var(--text-soft);

    font-size:
        clamp(
            15px,
            1.15vw,
            17px
        );

    line-height: 1.78;
}


/* Statement logo */

.about-statement-mark {
    position: absolute;

    right: 8%;
    top: 50%;

    width: 260px;
    height: 260px;

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

    transform:
        translateY(-50%);

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.01);

    box-shadow:
        inset 0 0 80px
        rgba(56,200,106,.045);

    animation:
        statementLogoFloat
        5.8s
        ease-in-out
        infinite;
}

.about-statement-mark::before,
.about-statement-mark::after {
    content: "";

    position: absolute;

    inset: -20px;

    border:
        1px solid
        rgba(56,200,106,.10);

    border-radius: 50%;
}

.about-statement-mark::after {
    inset: -42px;

    border-color:
        rgba(242,203,32,.06);
}

.about-statement-mark img {
    width: 68px;
    height: auto;

    opacity: .9;

    filter:
        drop-shadow(
            0 0 24px rgba(56,200,106,.16)
        );
}

@keyframes statementLogoFloat {

    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(calc(-50% - 9px))
            rotate(2deg);
    }

}


/* =========================================================
   05. OUR APPROACH
   ========================================================= */

.about-approach {
    padding-bottom:
        clamp(120px, 12vw, 180px);
}

.about-heading-row {
    display: grid;

    grid-template-columns:
        minmax(160px, .34fr)
        minmax(0, 1.66fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items: start;

    margin-bottom: 70px;
}

.about-heading-content {
    max-width: 900px;
}

.about-heading-content .section-title {
    max-width: 820px;
}

.about-heading-content .section-description {
    max-width: 680px;

    margin-top: 24px;
}


/* Cards */

.about-approach-grid {
    display: grid;

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

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

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

.about-approach-card {
    position: relative;

    min-height: 360px;

    padding:
        30px 28px
        34px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.012),
            transparent
        );

    overflow: hidden;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

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

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green)
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1);
}

.about-approach-card:hover {
    transform:
        translateY(-8px);

    background:
        linear-gradient(
            145deg,
            rgba(56,200,106,.035),
            rgba(255,255,255,.012)
        );

    border-color:
        rgba(56,200,106,.18);

    box-shadow:
        0 24px 65px rgba(0,0,0,.18);
}

.about-approach-card:hover::before {
    transform:
        scaleX(1);
}

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

.about-card-number {
    color: var(--yellow);

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

    font-weight: 800;

    letter-spacing: .12em;
}

.about-card-symbol {
    width: 34px;
    height: 34px;

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

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

    border-radius: 50%;

    color: var(--green);

    font-size: 15px;

    background:
        rgba(56,200,106,.025);

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

.about-approach-card:hover
.about-card-symbol {
    transform:
        rotate(10deg)
        scale(1.08);

    border-color:
        rgba(56,200,106,.24);

    background:
        rgba(56,200,106,.06);
}

.about-approach-card h3 {
    margin-top: 82px;

    color: var(--white);

    font-size:
        clamp(
            24px,
            2.2vw,
            31px
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.055em;
}

.about-approach-card p {
    margin-top: 17px;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.82;
}


/* =========================================================
   06. CAPABILITIES
   ========================================================= */

.about-capabilities {
    position: relative;

    padding-bottom:
        clamp(120px, 12vw, 180px);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(56,200,106,.012),
            transparent
        );
}

.about-capabilities-grid {
    display: grid;

    grid-template-columns:
        minmax(160px, .34fr)
        minmax(0, 1.66fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items: start;
}

.about-capabilities-content {
    max-width: 1000px;
}

.about-capabilities-content
.section-description {
    max-width: 730px;

    margin-top: 24px;
}


/* Capability list */

.about-capability-list {
    margin-top: 58px;

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

.about-capability-item {
    min-height: 78px;

    display: grid;

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

    align-items: center;

    gap: 18px;

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

    color: var(--text-soft);

    position: relative;

    overflow: hidden;

    transition:
        color .35s ease,
        padding-left .45s cubic-bezier(.2,.7,.2,1);
}

.about-capability-item::after {
    content: "↗";

    color: var(--green);

    font-size: 16px;

    opacity: 0;
    transform:
        translateX(-6px);

    transition:
        opacity .35s ease,
        transform .4s ease;
}

.about-capability-item:hover {
    color: var(--white);

    padding-left: 8px;
}

.about-capability-item:hover::after {
    opacity: 1;

    transform:
        translateX(0);
}

.about-capability-item > span {
    color: var(--yellow);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .1em;
}

.about-capability-item strong {
    font-size:
        clamp(
            17px,
            1.5vw,
            22px
        );

    font-weight: 700;

    letter-spacing: -.035em;
}


/* =========================================================
   07. GLOBAL MARKETS
   ========================================================= */

.about-global {
    padding-bottom:
        clamp(120px, 12vw, 180px);
}

.about-global-box {
    position: relative;

    overflow: hidden;

    text-align: center;

    padding:
        clamp(58px, 8vw, 104px)
        clamp(28px, 5vw, 70px);

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

    border-radius:
        var(--radius-xl, 28px);

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(56,200,106,.065),
            transparent 55%
        ),
        rgba(255,255,255,.008);

    isolation: isolate;
}

.about-global-box::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 62px 62px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    pointer-events: none;

    z-index: -2;
}

.about-global-box .section-eyebrow {
    justify-content: center;
}

.about-global-title {
    max-width: 920px;

    margin:
        24px auto
        0;

    color: var(--white);

    font-size:
        clamp(
            46px,
            6vw,
            78px
        );

    line-height: .94;

    font-weight: 800;

    letter-spacing: -.075em;

    text-wrap: balance;
}

.about-global-title span {
    color: var(--green);
}

.about-global-description {
    max-width: 650px;

    margin:
        25px auto
        0;

    color: var(--text-muted);

    font-size:
        clamp(
            15px,
            1.15vw,
            17px
        );

    line-height: 1.8;
}


/* Market pills */

.about-market-list {
    margin-top: 40px;

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

    gap: 9px;
}

.about-market-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        0 15px;

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

    border-radius:
        999px;

    color: var(--text-soft);

    background:
        rgba(255,255,255,.014);

    font-size: 11px;

    font-weight: 700;

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

.about-market-list span:hover {
    color: var(--green);

    border-color:
        rgba(56,200,106,.23);

    background:
        rgba(56,200,106,.045);

    transform:
        translateY(-3px);
}


/* =========================================================
   08. FINAL CTA
   ========================================================= */

/* =========================================================
   ABOUT PAGE — FINAL CTA
========================================================= */

.about-final-cta {
    position: relative;

    min-height: auto !important;

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

    padding-top: clamp(110px, 10vw, 150px);
    padding-bottom: clamp(110px, 10vw, 150px);

    overflow: hidden;
    text-align: center;
}


.about-final-cta .container {
    position: relative;
    z-index: 2;

    width: min(
        1120px,
        calc(100% - 80px)
    );

    margin-inline: auto;
}


.about-final-cta .final-cta-content {
    width: 100%;
    max-width: 1000px;

    margin-inline: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* Eyebrow */

.about-final-cta .section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 26px;
}


/* Main heading */

.about-final-cta .final-cta-title {
    max-width: 980px;

    margin: 0 auto;

    color: var(--white);

    font-size:
        clamp(
            62px,
            8vw,
            108px
        );

    line-height: .89;

    font-weight: 800;

    letter-spacing: -.078em;

    text-align: center;

    text-wrap: balance;
}


.about-final-cta .final-cta-title span {
    color: var(--green);

    white-space: nowrap;
}


/* Description */

.about-final-cta .final-cta-description {
    max-width: 650px;

    margin:
        28px auto
        0;

    color: var(--text-muted);

    font-size:
        clamp(
            15px,
            1.25vw,
            18px
        );

    line-height: 1.75;

    text-align: center;
}


/* Button */

.about-final-cta .btn {
    margin-top: 32px;
}


/* Background grid */

.about-final-cta .final-cta-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

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

    background-size: 80px 80px;

    mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            rgba(0,0,0,.8) 34%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            rgba(0,0,0,.8) 34%,
            transparent 75%
        );

    opacity: .9;
}


/* Background glow */

.about-final-cta .final-cta-glow {
    position: absolute;

    width: min(900px, 80vw);
    aspect-ratio: 1.45;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(56,200,106,.11) 0%,
            rgba(56,200,106,.035) 38%,
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;
}


/* Subtle glow around CTA content */

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

    position: absolute;

    width: 420px;
    height: 220px;

    left: 50%;
    top: 50%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(56,200,106,.065),
            transparent 72%
        );

    filter: blur(16px);

    pointer-events: none;

    z-index: -1;
}


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

@media (max-width: 900px) {

    .about-final-cta {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .about-final-cta .container {
        width: min(
            100%,
            calc(100% - 64px)
        );
    }

    .about-final-cta .final-cta-title {
        font-size:
            clamp(
                54px,
                9vw,
                82px
            );
    }

}


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

@media (max-width: 760px) {

    .about-final-cta {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .about-final-cta .container {
        width:
            calc(100% - 40px);
    }

    .about-final-cta .section-eyebrow {
        margin-bottom: 20px;
    }

    .about-final-cta .final-cta-title {
        max-width: 100%;

        font-size:
            clamp(
                46px,
                12vw,
                68px
            );

        line-height: .93;

        letter-spacing: -.06em;
    }

    .about-final-cta .final-cta-description {
        max-width: 500px;

        margin-top: 22px;

        font-size: 15px;
    }

    .about-final-cta .btn {
        margin-top: 28px;
    }

}


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

@media (max-width: 520px) {

    .about-final-cta {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .about-final-cta .final-cta-title {
        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );
    }

}


/* =========================================================
   09. ABOUT PAGE REVEAL POLISH
   ========================================================= */

.about-page-hero .reveal,
.about-story .reveal,
.about-statement .reveal,
.about-approach .reveal,
.about-capabilities .reveal,
.about-global .reveal,
.about-final-cta .reveal {
    will-change:
        transform,
        opacity;
}


/* Stagger support */

.about-approach-card:nth-child(2),
.about-capability-item:nth-child(2),
.about-approach-card:nth-child(2) {
    transition-delay: .06s;
}

.about-approach-card:nth-child(3),
.about-capability-item:nth-child(3) {
    transition-delay: .12s;
}

.about-approach-card:nth-child(4),
.about-capability-item:nth-child(4) {
    transition-delay: .18s;
}

.about-capability-item:nth-child(5) {
    transition-delay: .24s;
}

.about-capability-item:nth-child(6) {
    transition-delay: .30s;
}


/* =========================================================
   10. TABLET
   ========================================================= */

@media (max-width: 1100px) {

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

        padding-top:
            calc(var(--header-height, 84px) + 75px);

        padding-bottom: 100px;
    }

    .about-hero-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .82fr);

        gap: 45px;
    }

    .about-hero-title {
        font-size:
            clamp(
                56px,
                6.8vw,
                82px
            );
    }

    .about-hero-visual {
        max-width: 520px;
    }


    .about-story-grid,
    .about-heading-row,
    .about-capabilities-grid {
        gap: 48px;
    }


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

    .about-approach-card {
        min-height: 320px;
    }

    .about-approach-card h3 {
        margin-top: 62px;
    }


    .about-statement-content {
        width: 67%;
    }

    .about-statement-mark {
        width: 220px;
        height: 220px;

        right: 6%;
    }

}


/* =========================================================
   11. SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-page-hero {
        padding-top:
            calc(var(--header-height, 80px) + 65px);
    }

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

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

    .about-hero-visual {
        width: min(100%, 520px);

        margin-top: 10px;
    }


    .about-story-grid,
    .about-heading-row,
    .about-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .about-section-label {
        margin-bottom: 5px;
    }


    .about-statement-box {
        min-height: 570px;
    }

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

        max-width: 680px;
    }

    .about-statement-mark {
        width: 180px;
        height: 180px;

        right: 7%;
        bottom: -15%;

        top: auto;

        transform: none;
    }

    .about-statement-mark img {
        width: 55px;
    }

}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 760px) {

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

        padding-top:
            calc(var(--header-height, 76px) + 56px);

        padding-bottom: 86px;
    }

    .about-page-hero .container {
        padding-inline:
            var(--gutter, 20px);
    }


    .about-hero-title {
        font-size:
            clamp(
                48px,
                12.5vw,
                70px
            );

        line-height: .93;

        letter-spacing: -.068em;
    }

    .about-hero-content .section-eyebrow {
        margin-bottom: 20px;
    }

    .about-hero-description {
        margin-top: 23px;

        font-size: 15.5px;

        line-height: 1.73;
    }


    .about-hero-visual {
        width: min(
            100%,
            440px
        );

        margin-top: 10px;
    }

    .about-visual-core {
        width: 35%;
        min-width: 120px;
    }

    .about-core-label {
        font-size: 8px;
    }

    .about-floating-card {
        padding:
            9px 11px;

        gap: 7px;

        font-size: 9px;
    }

    .about-floating-card span {
        font-size: 8px;
    }

    .about-card-one {
        top: 10%;
        left: 1%;
    }

    .about-card-two {
        top: 16%;
        right: 1%;
    }

    .about-card-three {
        right: 0;
        bottom: 17%;
    }

    .about-card-four {
        left: 0;
        bottom: 9%;
    }


    .about-hero-scroll {
        display: none;
    }


    /* Story */

    .about-story {
        padding-top: 90px;
        padding-bottom: 95px;
    }

    .about-story-grid {
        gap: 34px;
    }

    .about-story-copy {
        margin-top: 27px;
        gap: 18px;
    }

    .about-story-copy p {
        font-size: 15px;
        line-height: 1.78;
    }


    /* Statement */

    .about-statement {
        padding-bottom: 95px;
    }

    .about-statement-box {
        min-height: 600px;

        border-radius:
            var(--radius-lg, 22px);
    }

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

        padding:
            42px 26px 165px;
    }

    .about-statement-content h2 {
        font-size:
            clamp(
                45px,
                11.5vw,
                62px
            );
    }

    .about-statement-content p {
        margin-top: 23px;

        font-size: 14px;
    }

    .about-statement-mark {
        width: 150px;
        height: 150px;

        left: 50%;
        right: auto;
        bottom: 34px;

        transform:
            translateX(-50%);
    }

    .about-statement-mark::before {
        inset: -15px;
    }

    .about-statement-mark::after {
        inset: -29px;
    }

    .about-statement-mark img {
        width: 44px;
    }


    /* Approach */

    .about-approach {
        padding-bottom: 100px;
    }

    .about-heading-row {
        gap: 30px;

        margin-bottom: 44px;
    }

    .about-heading-content .section-description {
        margin-top: 20px;
    }

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

    .about-approach-card {
        min-height: 0;

        padding:
            28px 24px 31px;
    }

    .about-approach-card h3 {
        margin-top: 54px;

        font-size: 25px;
    }

    .about-approach-card p {
        max-width: 550px;

        font-size: 14px;
    }


    /* Capabilities */

    .about-capabilities {
        padding-bottom: 100px;
    }

    .about-capabilities-grid {
        gap: 32px;
    }

    .about-capability-list {
        margin-top: 40px;
    }

    .about-capability-item {
        min-height: 70px;

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

        gap: 10px;
    }

    .about-capability-item strong {
        font-size: 16px;
    }


    /* Global */

    .about-global {
        padding-bottom: 100px;
    }

    .about-global-box {
        padding:
            50px 24px;
    }

    .about-global-title {
        font-size:
            clamp(
                42px,
                10.8vw,
                60px
            );
    }

    .about-global-description {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .about-market-list {
        margin-top: 32px;
    }

}


/* =========================================================
   13. SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .about-page-hero {
        padding-bottom: 70px;
    }

    .about-hero-title {
        font-size:
            clamp(
                44px,
                13vw,
                58px
            );
    }

    .about-hero-description {
        font-size: 15px;
    }


    .about-hero-visual {
        width: 100%;

        transform: scale(.96);
    }

    .about-floating-card {
        padding:
            8px 9px;

        font-size: 8px;
    }

    .about-floating-card span {
        font-size: 7px;
    }


    .about-section-label {
        font-size: 9px;
    }


    .about-statement-box {
        min-height: 565px;
    }

    .about-statement-content {
        padding:
            36px 21px 155px;
    }

    .about-statement-content h2 {
        font-size:
            clamp(
                42px,
                12.5vw,
                54px
            );
    }


    .about-approach-card {
        padding:
            25px 21px 28px;
    }


    .about-global-box {
        padding:
            44px 20px;
    }

    .about-global-title {
        font-size:
            clamp(
                39px,
                11.5vw,
                54px
            );
    }

    .about-market-list span {
        min-height: 33px;

        padding-inline: 12px;

        font-size: 10px;
    }

}


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

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

    .about-hero-glow-one,
    .about-hero-glow-two,
    .about-hero-scroll .hero-scroll-line::after,
    .about-visual-orbit,
    .about-hero-visual::before,
    .about-visual-core,
    .about-visual-core::before,
    .about-core-glow,
    .about-floating-card,
    .about-statement-glow,
    .about-statement-mark,
    .about-approach-card,
    .about-card-symbol,
    .about-capability-item,
    .about-market-list span {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   ABOUT HERO — HORIZONTAL GUTTER FIX
========================================================= */

.about-page-hero > .container {
    width: min(
        1240px,
        calc(100% - 96px)
    );

    margin-inline: auto;
    padding-inline: 0;
}

.about-hero-content {
    padding-left: 0;
}


/* Tablet */
@media (max-width: 900px) {

    .about-page-hero > .container {
        width: min(
            100%,
            calc(100% - 64px)
        );
    }

}


/* Mobile */
@media (max-width: 760px) {

    .about-page-hero > .container {
        width: calc(100% - 40px);
    }

}