/* About page: Bridge China, Connect the World */
.about-page {
    background: #fff;
    color: var(--navy);
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {
    text-wrap: pretty;
}

.about-eyebrow,
.about-kicker {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.35;
    text-transform: uppercase;
}

.about-eyebrow {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.about-kicker {
    color: var(--primary-dark);
}

.about-hero {
    min-height: clamp(620px, 53vw, 760px);
}

.about-hero .page-visual-hero__grid {
    min-height: clamp(620px, 53vw, 760px);
}

.about-hero__copy {
    max-width: 760px !important;
    padding-bottom: clamp(5.5rem, 8vw, 7.5rem) !important;
    padding-top: clamp(7rem, 12vw, 10rem) !important;
}

.about-hero__copy h1 {
    font-size: clamp(3.2rem, 6vw, 6rem) !important;
    letter-spacing: -.055em;
    line-height: .98;
    max-width: 700px;
}

.about-hero__copy .lead {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.55;
    margin-top: 1.25rem;
    max-width: 680px;
}

.about-hero__support {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .98rem;
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 650px !important;
}

.about-hero__actions,
.about-cta__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.8rem;
}

.about-hero .btn-flat-outline-light {
    background: rgba(3, 17, 39, .28);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.about-hero .btn-flat-outline-light:hover,
.about-hero .btn-flat-outline-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

.about-hero__signals {
    align-items: center;
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-wrap: wrap;
    font-size: .77rem;
    gap: .75rem 1.2rem;
    margin-top: 1.55rem;
}

.about-hero__signals span {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.about-hero__signals i {
    color: var(--primary-light);
}

.about-hero__media img {
    object-position: center 16%;
}

.about-section {
    padding: clamp(4.8rem, 8vw, 7.5rem) 0;
}

.about-section--soft {
    background: #eef3f8;
}

.about-section--ink {
    background: var(--navy-deep);
    color: #fff;
}

.about-section-heading {
    margin-bottom: 2.8rem;
    max-width: 800px;
}

.about-section-heading--wide {
    max-width: 960px;
}

.about-section-heading--row {
    align-items: end;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    max-width: none;
}

.about-section-heading h2 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: .7rem 0 1rem;
}

.about-section-heading p {
    color: var(--dark-gray);
    font-size: 1.04rem;
    line-height: 1.72;
    margin: 0;
    max-width: 780px;
}

.about-section-heading--light h2 {
    color: #fff;
}

.about-section-heading--light p {
    color: rgba(255, 255, 255, .72);
}

.about-foundation-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-foundation-card {
    background: #fff;
    border: 1px solid rgba(11, 42, 83, .1);
    min-height: 180px;
    padding: 1.6rem;
}

.about-foundation-card span {
    color: var(--primary-dark);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-foundation-card h3 {
    color: var(--navy);
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 1rem 0 0;
}

.about-story {
    background: #fff;
}

.about-story-grid {
    align-items: center;
    display: grid;
    gap: clamp(2.5rem, 6vw, 6.5rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
}

.about-story__copy {
    max-width: 720px;
}

.about-story__copy p {
    color: var(--dark-gray);
    font-size: .98rem;
    line-height: 1.78;
    margin-bottom: 1.15rem;
}

.about-story__copy .about-lead,
.about-profile__content .about-lead {
    color: var(--navy);
    font-size: 1.23rem;
    line-height: 1.62;
}

.about-story-rail {
    border-top: 1px solid var(--medium-gray);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
    padding-top: 1rem;
}

.about-story-rail > div {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.about-story-rail span {
    color: var(--primary-dark);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.about-story-rail strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.about-story-rail small {
    color: var(--dark-gray);
    font-size: .76rem;
    line-height: 1.4;
}

.about-story__media {
    margin: 0 0 0 auto;
    max-width: 360px;
    position: relative;
}

.about-story__media::before {
    border: 1px solid var(--primary-color);
    content: '';
    inset: 0;
    position: absolute;
    z-index: 0;
}

.about-story__media video {
    aspect-ratio: 9 / 16;
    background: var(--navy);
    display: block;
    height: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}

.about-story__media figcaption {
    background: var(--navy);
    color: rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
    font-size: .76rem;
    gap: .22rem;
    line-height: 1.45;
    padding: .85rem 1rem;
    position: relative;
    z-index: 2;
}

.about-story__media-note {
    color: rgba(255, 255, 255, .62);
    display: block;
    font-size: .72rem;
    line-height: 1.45;
    padding: 0;
}

.about-ecosystem {
    overflow: hidden;
    position: relative;
}

.about-ecosystem::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 84px 84px;
    content: '';
    inset: 0;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .72), transparent 90%);
    pointer-events: none;
    position: absolute;
}

.about-ecosystem .container {
    position: relative;
    z-index: 1;
}

.about-ecosystem-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-ecosystem-card {
    background: rgba(17, 50, 88, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    flex-direction: column;
    min-height: 350px;
    padding: 1.6rem;
    position: relative;
}

.about-ecosystem-card::before {
    background: var(--primary-color);
    content: '';
    height: 3px;
    left: 1.6rem;
    position: absolute;
    right: 1.6rem;
    top: 0;
}

.about-ecosystem-card--featured {
    background: linear-gradient(145deg, rgba(17, 50, 88, .96), rgba(6, 26, 58, .96));
    border-color: rgba(255, 181, 46, .48);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .2);
    transform: translateY(-10px);
}

.about-ecosystem-card__number {
    color: var(--primary-light);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    position: absolute;
    right: 1.6rem;
    top: 1.25rem;
}

.about-ecosystem-card > i {
    color: var(--primary-light);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.about-ecosystem-card__label {
    color: rgba(255, 255, 255, .58);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-ecosystem-card h3 {
    color: #fff;
    font-size: 1.65rem;
    line-height: 1.08;
    margin: .55rem 0 .8rem;
}

.about-ecosystem-card p {
    color: rgba(255, 255, 255, .73);
    font-size: .87rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.about-inline-link {
    color: var(--primary-light);
    font-size: .8rem;
    font-weight: 800;
    margin-top: auto;
    text-decoration: none;
}

.about-inline-link:hover,
.about-inline-link:focus {
    color: #fff;
}

.about-profile {
    background: #fff;
}

.about-profile-grid {
    align-items: center;
    display: grid;
    gap: clamp(2.5rem, 7vw, 7rem);
    grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr);
}

.about-profile__media {
    margin: 0;
    max-width: 390px;
}

.about-profile__portrait-wrap {
    background: linear-gradient(145deg, #f7efe4, #e7eff5);
    border: 1px solid var(--medium-gray);
    overflow: hidden;
    position: relative;
}

.about-profile__portrait-wrap::after {
    background: linear-gradient(0deg, rgba(3, 17, 39, .62), transparent 45%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.about-profile__portrait-wrap img {
    display: block;
    height: 510px;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.about-profile__media figcaption {
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .28rem;
    padding: 1rem 1.1rem;
}

.about-profile__media figcaption strong {
    font-size: 1.1rem;
}

.about-profile__media figcaption span {
    color: rgba(255, 255, 255, .68);
    font-size: .76rem;
    line-height: 1.45;
}

.about-profile__content {
    max-width: 760px;
}

.about-profile__content h2 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: .7rem 0 1rem;
}

.about-profile__content > p {
    color: var(--dark-gray);
    font-size: .98rem;
    line-height: 1.75;
}

.about-profile-highlights {
    border-bottom: 1px solid var(--medium-gray);
    border-top: 1px solid var(--medium-gray);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.7rem 0 1.25rem;
    padding: 1rem 0;
}

.about-profile-highlights > div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.about-profile-highlights small {
    color: var(--primary-dark);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-profile-highlights strong {
    color: var(--navy);
    font-size: .88rem;
    line-height: 1.4;
}

.about-page .text-link {
    color: var(--primary-dark);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.about-page .text-link:hover,
.about-page .text-link:focus {
    color: var(--navy);
}

.about-capability-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-capability-card {
    background: #fff;
    border: 1px solid var(--medium-gray);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 290px;
    padding: 1.45rem;
    position: relative;
}

.about-capability-card__number {
    color: #a5b1bf;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    position: absolute;
    right: 1.4rem;
    top: 1.25rem;
}

.about-capability-card > i {
    color: var(--primary-dark);
    font-size: 1.9rem;
    margin-bottom: 1.3rem;
}

.about-capability-card h3 {
    font-size: 1.2rem;
    line-height: 1.15;
    margin-bottom: .65rem;
}

.about-capability-card p {
    color: var(--dark-gray);
    font-size: .86rem;
    line-height: 1.65;
    margin: 0;
}

.about-journey {
    background: #fff;
}

.about-journey .about-section-heading--row > p {
    max-width: 420px;
}

.about-journey-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-journey-card {
    border: 1px solid var(--medium-gray);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 1.45rem;
    position: relative;
}

.about-journey-card::after {
    color: var(--primary-color);
    content: '\F138';
    font-family: bootstrap-icons;
    font-size: 1.2rem;
    position: absolute;
    right: 1.2rem;
    top: 1.15rem;
}

.about-journey-card:last-child::after {
    content: '\F26A';
}

.about-journey-card__number {
    color: var(--primary-color);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.06em;
}

.about-journey-card h3 {
    font-size: 1.2rem;
    line-height: 1.15;
    margin: 1.1rem 0 .65rem;
}

.about-journey-card p {
    color: var(--dark-gray);
    font-size: .86rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.about-journey-card small {
    border-top: 1px solid var(--medium-gray);
    color: var(--primary-dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;
    margin-top: auto;
    padding-top: .8rem;
    text-transform: uppercase;
}

.about-boundaries {
    background: #eef3f8;
    padding-top: 1rem;
}

.about-boundary-panel {
    background: var(--navy);
    color: #fff;
    display: grid;
    gap: 2.4rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    padding: clamp(1.8rem, 5vw, 3.6rem);
    position: relative;
}

.about-boundary-panel::before {
    background: var(--primary-color);
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.about-boundary-panel .about-kicker {
    color: var(--primary-light);
}

.about-boundary-panel h2 {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    letter-spacing: -.04em;
    line-height: 1.03;
    margin: .7rem 0 1rem;
}

.about-boundary-panel__intro p {
    color: rgba(255, 255, 255, .72);
    line-height: 1.7;
    margin: 0;
    max-width: 560px;
}

.about-boundary-panel__list {
    display: grid;
    gap: .9rem;
}

.about-boundary-panel__list > div {
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    gap: .65rem;
    padding-bottom: .9rem;
}

.about-boundary-panel__list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.about-boundary-panel__list i {
    color: var(--primary-light);
    flex: 0 0 auto;
    margin-top: .15rem;
}

.about-boundary-panel__list span {
    color: rgba(255, 255, 255, .78);
    font-size: .86rem;
    line-height: 1.58;
}

.about-entity-note {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .58);
    display: flex;
    font-size: .72rem;
    gap: .45rem;
    grid-column: 1 / -1;
    padding-top: 1rem;
}

.about-entity-note i {
    color: var(--primary-light);
}

.about-proof {
    background: #fff;
}

.about-proof-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-proof-card {
    border: 1px solid var(--medium-gray);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.about-proof-card__media {
    height: 205px;
    overflow: hidden;
}

.about-proof-card__media img {
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    width: 100%;
}

.about-proof-card:hover .about-proof-card__media img {
    transform: scale(1.04);
}

.about-proof-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.35rem;
}

.about-proof-card__body > span {
    color: var(--primary-dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-proof-card h3 {
    font-size: 1.2rem;
    line-height: 1.18;
    margin: .7rem 0 .6rem;
}

.about-proof-card p {
    color: var(--dark-gray);
    font-size: .86rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.about-proof-card .text-link {
    margin-top: auto;
}

.about-cta {
    background: var(--navy);
    color: #fff;
    padding: clamp(4.8rem, 8vw, 7.5rem) 0;
}

.about-cta .about-kicker {
    color: var(--primary-light);
}

.about-cta h2 {
    color: #fff;
    font-size: clamp(2.25rem, 4.5vw, 4.3rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: .7rem auto 1rem;
    max-width: 900px;
}

.about-cta p {
    color: rgba(255, 255, 255, .72);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 680px;
}

.about-cta__actions {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
}

.about-cta__primary-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.about-cta__secondary-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.25rem;
    justify-content: center;
    margin-top: .3rem;
}

.about-cta__secondary-link {
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .2s ease;
}

.about-cta__secondary-link:hover,
.about-cta__secondary-link:focus {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.about-cta__secondary-divider {
    background: rgba(255, 255, 255, .28);
    height: 1.1rem;
    width: 1px;
}

.about-cta .btn-flat-outline {
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

.about-cta .btn-flat-outline:hover,
.about-cta .btn-flat-outline:focus {
    background: #fff;
    color: var(--navy);
}

@media (max-width: 1100px) {
    .about-capability-grid,
    .about-journey-grid,
    .about-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .about-hero__copy {
        padding-top: 6.5rem !important;
    }

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

    .about-story__media {
        margin-left: auto;
        max-width: 360px;
        width: 100%;
    }

    .about-profile__media {
        max-width: 420px;
    }

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

    .about-entity-note {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .about-ecosystem-grid,
    .about-capability-grid,
    .about-journey-grid,
    .about-proof-grid,
    .about-foundation-grid {
        grid-template-columns: 1fr;
    }

    .about-ecosystem-card--featured {
        transform: none;
    }

    .about-section-heading--row {
        align-items: flex-start;
        flex-direction: column;
        gap: .7rem;
    }

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

    .about-story-rail > div {
        border-bottom: 1px solid var(--medium-gray);
        padding-bottom: .8rem;
    }

    .about-story-rail > div:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .about-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-hero__actions .btn {
        width: 100%;
    }

    .about-cta__primary-actions {
        align-items: stretch;
        flex-direction: column;
        width: min(100%, 28rem);
    }

    .about-cta__primary-actions .btn {
        width: 100%;
    }

    .about-cta__secondary-actions {
        flex-direction: column;
        gap: .7rem;
    }

    .about-cta__secondary-divider {
        display: none;
    }
}

@media (max-width: 576px) {
    .about-hero,
    .about-hero .page-visual-hero__grid {
        min-height: 680px;
    }

    .about-hero__copy {
        padding-bottom: 4.8rem !important;
        padding-top: 5.3rem !important;
    }

    .about-hero__copy h1 {
        font-size: 2.75rem !important;
    }

    .about-hero__signals {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }

    .about-story__media {
        max-width: 360px;
    }

    .about-profile__portrait-wrap img {
        height: 430px;
    }

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

    .about-boundary-panel {
        padding: 1.35rem;
    }
}