/*
|--------------------------------------------------------------------------
| Portfolio Numbers Section
|--------------------------------------------------------------------------
*/

.portfolio-numbers-section {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #1f1f1f;
}


/*
|--------------------------------------------------------------------------
| Video Background
|--------------------------------------------------------------------------
*/

.portfolio-numbers-section__media {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.portfolio-numbers-section__video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(1)
        brightness(.72)
        contrast(.72);
}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.portfolio-numbers-section__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        rgba(25, 25, 25, .78);
}


/*
|--------------------------------------------------------------------------
| Inner
|--------------------------------------------------------------------------
*/

.portfolio-numbers-section__inner {
    position: relative;

    z-index: 2;

    min-height: 620px;

    display: flex;

    align-items: center;

    padding-top: 80px;
    padding-bottom: 80px;
}


/*
|--------------------------------------------------------------------------
| Numbers Box
|--------------------------------------------------------------------------
*/

.portfolio-numbers {
    width: 100%;

    padding:
        72px
        48px
        78px;

    background:
        rgba(24, 24, 24, .96);
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.portfolio-numbers__eyebrow {
    margin-bottom: 42px;

    color: var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.portfolio-numbers__grid {
    display: grid;

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


/*
|--------------------------------------------------------------------------
| Item
|--------------------------------------------------------------------------
*/

.portfolio-numbers__item {
    min-width: 0;

    padding:
        8px
        48px
        0;

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


/*
|--------------------------------------------------------------------------
| Number
|--------------------------------------------------------------------------
*/

.portfolio-numbers__number {
    margin-bottom: 18px;

    color: var(--color-white);

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

    font-size:
        var(--font-size-h1);

    font-weight: 700;

    line-height: .92;

    letter-spacing: -.03em;

    font-variant-numeric:
        tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.portfolio-numbers__title {
    margin:
        0
        0
        10px;

    color: var(--color-white);

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

    font-size:
        var(--font-size-h3);

    font-weight: 400;

    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.portfolio-numbers__description {
    max-width: 430px;

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

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .portfolio-numbers-section,
    .portfolio-numbers-section__inner {
        min-height: 560px;
    }


    .portfolio-numbers {
        padding:
            60px
            35px
            65px;
    }


    .portfolio-numbers__item {
        padding:
            8px
            30px
            0;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet / Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .portfolio-numbers-section,
    .portfolio-numbers-section__inner {
        min-height: auto;
    }


    .portfolio-numbers-section__inner {
        padding-top: 60px;
        padding-bottom: 60px;
    }


    .portfolio-numbers__grid {
        grid-template-columns: 1fr;
    }


    .portfolio-numbers__item {
        padding:
            28px
            24px;

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


    .portfolio-numbers__item +
    .portfolio-numbers__item {
        border-top:
            1px solid
            rgba(255, 255, 255, .12);
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .portfolio-numbers-section__inner {
        padding-top: 45px;
        padding-bottom: 45px;
    }


    .portfolio-numbers {
        padding:
            42px
            20px
            48px;
    }


    .portfolio-numbers__eyebrow {
        margin-bottom: 22px;
    }


    .portfolio-numbers__item {
        padding:
            24px
            20px;
    }


    .portfolio-numbers__number {
        margin-bottom: 12px;
    }

}

/*
|--------------------------------------------------------------------------
| Portfolio Subsidiaries
|--------------------------------------------------------------------------
*/

.portfolio-subsidiaries {
    padding:
        85px
        0
        105px;

    background: #202020;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.portfolio-subsidiaries__head {
    margin-bottom: 55px;
}


.portfolio-subsidiaries__eyebrow {
    margin-bottom: 14px;

    color: var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
}


.portfolio-subsidiaries__title {
    margin: 0;

    color: var(--color-white);

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

    font-size:
        var(--font-size-h2);

    font-weight: 400;

    line-height: 1.05;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.portfolio-subsidiaries__grid {
    display: grid;

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

    gap:
        34px
        38px;
}


/*
|--------------------------------------------------------------------------
| Company Card
|--------------------------------------------------------------------------
*/

.portfolio-company-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        30px;

    border:
        1px solid
        rgba(
            185,
            163,
            130,
            .24
        );

    background:
        #202020;

    overflow: hidden;

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


/*
|--------------------------------------------------------------------------
| Card Hover Fill
|--------------------------------------------------------------------------
*/

.portfolio-company-card:hover {
    background:
        #403d35;

    border-color:
        rgba(
            185,
            163,
            130,
            .55
        );
}


/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.portfolio-company-card__logo {
    width: 270px;
    height: 150px;

    display: flex;

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

    margin-bottom: 20px;

    padding:
        7px;

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

    overflow: hidden;
}


.portfolio-company-card__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
*/

.portfolio-company-card__body {
    flex: 1 1 auto;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.portfolio-company-card__title {
    margin:
        0
        0
        13px;

    color: var(--color-white);

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

    font-size:
        var(--font-size-h3);

    font-weight: 600;

    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.portfolio-company-card__description {
    margin-bottom: 14px;

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

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Chips
|--------------------------------------------------------------------------
*/

.portfolio-company-card__chips {
    display: flex;

    flex-wrap: wrap;

    gap:
        7px
        8px;

    margin-top: 12px;
}


.portfolio-company-card__chip {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding:
        3px
        10px;

    background:
        rgba(
            185,
            163,
            130,
            .20
        );

    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-small);

    font-weight: 300;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.portfolio-company-card__footer {
    display: flex;

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

    gap: 25px;

    margin-top: 18px;

    padding-top: 19px;

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


/*
|--------------------------------------------------------------------------
| Sector
|--------------------------------------------------------------------------
*/

.portfolio-company-card__sector {
    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size:
        var(--font-size-text-small);

    font-weight: 400;

    line-height: 1.25;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| External Link
|--------------------------------------------------------------------------
*/

.portfolio-company-card__link {
    flex:
        0
        0
        48px;

    width: 48px;
    height: 48px;

    display: inline-flex;

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

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

    border-radius:
        50%;

    background:
        var(--color-gold);

    text-decoration: none;

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


.portfolio-company-card__link img {
    display: block;

    width: 17px;
    height: 17px;

    object-fit: contain;

    /*
     * Assuming arrow-right.svg is dark.
     */
    transition:
        filter .28s ease,
        transform .28s ease;
}


/*
|--------------------------------------------------------------------------
| Arrow Hover
|--------------------------------------------------------------------------
*/

.portfolio-company-card__link:hover,
.portfolio-company-card__link:focus-visible {
    background:
        #292929;

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

    transform:
        scale(1.04);
}


.portfolio-company-card__link:hover img,
.portfolio-company-card__link:focus-visible img {
    filter:
        brightness(0)
        invert(1);

    transform:
        translateX(2px);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .portfolio-company-card {
        padding:
            26px;
    }


    .portfolio-company-card__logo {
        width: 210px;
        height: 125px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile / Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .portfolio-subsidiaries {
        padding:
            65px
            0
            80px;
    }


    .portfolio-subsidiaries__grid {
        grid-template-columns: 1fr;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .portfolio-subsidiaries {
        padding:
            50px
            0
            60px;
    }


    .portfolio-subsidiaries__head {
        margin-bottom: 35px;
    }


    .portfolio-company-card {
        padding:
            20px;
    }


    .portfolio-company-card__logo {
        width: 200px;
        height: 115px;

        margin-bottom: 18px;
    }


    .portfolio-company-card__footer {
        margin-top: 20px;
    }


    .portfolio-company-card__link {
        flex-basis: 44px;

        width: 44px;
        height: 44px;
    }

}

/*
|--------------------------------------------------------------------------
| Joint Ventures
|--------------------------------------------------------------------------
*/

.portfolio-jv {
    padding:
        90px
        0
        110px;

    background: #292929;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.portfolio-jv__head {
    margin-bottom: 70px;
}


.portfolio-jv__eyebrow {
    margin-bottom: 14px;

    color: var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
}


.portfolio-jv__heading {
    margin: 0;

    color: #fff;

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

    font-size:
        var(--font-size-h2);

    font-weight: 400;

    line-height: 1.05;
}


/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.portfolio-jv__layout {
    display: grid;

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

    gap:
        50px;

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.portfolio-jv__nav {
    width: 100%;
}


.portfolio-jv__nav-item {
    position: relative;

    width: 100%;
    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px
        18px;

    border: 0;

    border-bottom:
        1px solid
        rgba(185, 163, 130, .24);

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    isolation: isolate;

    transition:
        border-color .3s ease;
}


/*
|--------------------------------------------------------------------------
| Nav Background Fill
|--------------------------------------------------------------------------
*/

.portfolio-jv__nav-item::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        #403d35;

    transform:
        scaleY(0);

    transform-origin:
        bottom center;

    transition:
        transform
        .38s
        cubic-bezier(.22, .61, .36, 1);
}


.portfolio-jv__nav-item:hover::before,
.portfolio-jv__nav-item.is-active::before {
    transform:
        scaleY(1);
}


.portfolio-jv__nav-item:hover,
.portfolio-jv__nav-item.is-active {
    border-bottom-color:
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| Nav Arrow
|--------------------------------------------------------------------------
*/

.portfolio-jv__nav-arrow {
    flex:
        0
        0
        17px;

    width: 17px;

    opacity: 0;

    transform:
        translateX(-5px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.portfolio-jv__nav-arrow img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0)
        saturate(100%)
        invert(76%)
        sepia(17%)
        saturate(673%)
        hue-rotate(356deg)
        brightness(86%);
}


.portfolio-jv__nav-item:hover
.portfolio-jv__nav-arrow,
.portfolio-jv__nav-item.is-active
.portfolio-jv__nav-arrow {
    opacity: 1;

    transform:
        translateX(0);
}


/*
|--------------------------------------------------------------------------
| Nav Content
|--------------------------------------------------------------------------
*/

.portfolio-jv__nav-content {
    min-width: 0;

    display: block;

    transition:
        transform .3s ease;
}


.portfolio-jv__nav-item:hover
.portfolio-jv__nav-content,
.portfolio-jv__nav-item.is-active
.portfolio-jv__nav-content {
    transform:
        translateX(2px);
}


.portfolio-jv__nav-content strong {
    display: block;

    color: #fff;

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

    font-size:
        var(--font-size-h4);

    font-weight: 600;

    line-height: 1.1;
}


.portfolio-jv__nav-content small {
    display: block;

    margin-top: 2px;

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

    font-size:
        var(--font-size-text-small);

    font-weight: 300;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| JV Panels
|--------------------------------------------------------------------------
*/

.portfolio-jv__panels {
    position: relative;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Panel
|--------------------------------------------------------------------------
*/

.portfolio-jv__panel {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(6px);
}


.portfolio-jv__panel.is-active {
    position: relative;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}

/*
|--------------------------------------------------------------------------
| Media
|--------------------------------------------------------------------------
*/

.portfolio-jv__media {
    width: 100%;

    aspect-ratio:
        16 / 5.1;

    overflow: hidden;

    background: #202020;
}


.portfolio-jv__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;
}


.portfolio-jv__panel:hover
.portfolio-jv__media img {
    transform:
        scale(1.015);
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.portfolio-jv__content {
    padding:
        26px
        28px
        28px;

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

    border-top: 0;

    background: #343434;
}


/*
|--------------------------------------------------------------------------
| Title Block
|--------------------------------------------------------------------------
*/

.portfolio-jv__title-block {
    margin-bottom: 20px;
}


.portfolio-jv__title {
    margin:
        0
        0
        8px;

    color: #fff;

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

    font-size:
        var(--font-size-h3);

    font-weight: 600;

    line-height: 1.1;
}


.portfolio-jv__chip {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    padding:
        3px
        8px;

    background:
        rgba(185, 163, 130, .17);

    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-small);

    font-weight: 300;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.portfolio-jv__description {
    max-width: 1000px;

    margin-bottom: 30px;

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

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Milestones
|--------------------------------------------------------------------------
*/

.portfolio-jv__milestones {
    display: grid;

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

    gap: 38px;

    margin-bottom: 26px;
}


.portfolio-jv__year {
    margin-bottom: 7px;

    color:
        var(--color-gold);

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

    font-size:
        var(--font-size-h4);

    font-weight: 600;

    line-height: 1.1;
}


.portfolio-jv__milestone-text {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.portfolio-jv__footer {
    display: flex;

    justify-content: flex-end;

    padding-top: 20px;

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


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.portfolio-jv__cta {
    min-height: 42px;

    display: inline-flex;

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

    padding:
        9px
        22px;

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

    background:
        var(--color-gold);

    color: #222;

    font-size:
        var(--font-size-text-main);

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

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


.portfolio-jv__cta:hover {
    background: #292929;

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .portfolio-jv__layout {
        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 35px;
    }


    .portfolio-jv__milestones {
        gap: 25px;
    }

}


/*
|--------------------------------------------------------------------------
| <= 991
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .portfolio-jv {
        padding:
            65px
            0
            80px;
    }


    .portfolio-jv__head {
        margin-bottom: 45px;
    }


    .portfolio-jv__layout {
        display: block;
    }


    .portfolio-jv__nav {
        margin-bottom: 35px;
    }


    .portfolio-jv__nav-item {
        min-height: 72px;
    }


    .portfolio-jv__milestones {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .portfolio-jv {
        padding:
            50px
            0
            60px;
    }


    .portfolio-jv__media {
        aspect-ratio:
            4 / 3;
    }


    .portfolio-jv__content {
        padding:
            22px
            20px;
    }


    .portfolio-jv__description {
        margin-bottom: 24px;
    }


    .portfolio-jv__footer {
        justify-content: stretch;
    }


    .portfolio-jv__cta {
        width: 100%;
    }

}

/*
|--------------------------------------------------------------------------
| Partnerships & Global Investments
|--------------------------------------------------------------------------
*/

.portfolio-investments {
    padding:
        90px
        0
        110px;

    background: #202020;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.portfolio-investments__head {
    display: grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(
            60px,
            9vw,
            150px
        );

    align-items: end;

    margin-bottom: 55px;
}


.portfolio-investments__eyebrow {
    margin-bottom: 13px;

    color: var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
}


.portfolio-investments__title {
    margin: 0;

    color: #fff;

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

    font-size:
        var(--font-size-h2);

    font-weight: 400;

    line-height: 1.08;
}


.portfolio-investments__intro {
    max-width: 650px;

    padding-bottom: 3px;

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

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.portfolio-investments__grid {
    display: grid;

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

    gap:
        34px
        38px;
}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.portfolio-investment-card {
    position: relative;

    min-width: 0;

    padding:
        26px;

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

    background: #202020;

    overflow: hidden;

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


/*
|--------------------------------------------------------------------------
| Main
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__main {
    display: grid;

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

    gap: 22px;

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__logo {
    width: 160px;
    height: 137px;

    display: flex;

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

    padding:
        12px;

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

    background:
        transparent;
}


.portfolio-investment-card__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__title {
    margin:
        0
        0
        6px;

    color: #fff;

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

    font-size:
        var(--font-size-h4);

    font-weight: 600;

    line-height: 1.2;
}


.portfolio-investment-card__description {
    color:
        rgba(255,255,255,.72);

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Country
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__country {
    display: inline-flex;

    margin-top: 10px;

    padding:
        3px
        9px;

    background:
        rgba(185,163,130,.17);

    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-small);

    font-weight: 300;

    line-height: 1.2;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__footer {
    max-height: 0;

    display: flex;

    justify-content: flex-end;

    margin-top: 0;

    padding-top: 0;

    overflow: hidden;

    border-top:
        1px solid
        transparent;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        max-height .42s ease,
        margin-top .35s ease,
        padding-top .35s ease,
        border-color .35s ease,
        opacity .25s ease,
        transform .35s ease;
}


/*
|--------------------------------------------------------------------------
| Card Hover
|--------------------------------------------------------------------------
*/

.portfolio-investment-card:hover {
    background:
        #403d35;

    border-color:
        rgba(185,163,130,.48);
}


.portfolio-investment-card:hover
.portfolio-investment-card__footer {
    max-height: 90px;

    margin-top: 24px;

    padding-top: 22px;

    border-top-color:
        rgba(255,255,255,.16);

    opacity: 1;

    transform:
        translateY(0);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.portfolio-investment-card__cta {
    min-height: 42px;

    display: inline-flex;

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

    padding:
        9px
        22px;

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

    background:
        var(--color-gold);

    color: #222;

    font-size:
        var(--font-size-text-main);

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

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


.portfolio-investment-card__cta:hover {
    background:
        #292929;

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Load More
|--------------------------------------------------------------------------
*/

.portfolio-investments__more {
    display: flex;

    justify-content: center;

    margin-top: 42px;
}


.portfolio-investments__load-more {
    min-height: 42px;

    padding:
        9px
        24px;

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

    background:
        var(--color-gold);

    color: #222;

    font-size:
        var(--font-size-text-main);

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;

    cursor: pointer;

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


.portfolio-investments__load-more:hover {
    background:
        #292929;

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .portfolio-investment-card__main {
        grid-template-columns:
            130px
            minmax(0, 1fr);
    }


    .portfolio-investment-card__logo {
        width: 130px;
    }

}


/*
|--------------------------------------------------------------------------
| <= 991
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .portfolio-investments {
        padding:
            65px
            0
            80px;
    }


    .portfolio-investments__head {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .portfolio-investments__intro {
        max-width: 720px;
    }


    .portfolio-investments__grid {
        grid-template-columns: 1fr;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .portfolio-investments {
        padding:
            50px
            0
            60px;
    }


    .portfolio-investment-card {
        padding:
            20px;
    }


    .portfolio-investment-card__main {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .portfolio-investment-card__logo {
        width: 180px;
        height: 95px;
    }


    /*
     * Touch devices do not really have hover,
     * so keep CTA visible.
     */

    .portfolio-investment-card__footer {
        max-height: none;

        margin-top: 22px;

        padding-top: 20px;

        border-top-color:
            rgba(255,255,255,.14);

        opacity: 1;

        transform: none;
    }


    .portfolio-investment-card__cta {
        width: 100%;
    }

}