/*
|--------------------------------------------------------------------------
| Capability Single
|--------------------------------------------------------------------------
*/

.capability-single {
    background: #202020;
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.capability-single__intro {
    padding:
        calc(
            var(--utility-height, 0px)
            + var(--nav-height, 90px)
            + 65px
        )
        0
        80px;

    background: #202020;
}


.capability-single__intro-grid {
    display: grid;

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

    gap:
        clamp(
            60px,
            8vw,
            130px
        );

    align-items: center;
}


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

.capability-single__intro-content {
    max-width: 650px;
}


.capability-single__eyebrow,
.capability-single__section-eyebrow {
    margin-bottom: 10px;

    color: var(--color-gold);

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

    line-height: 1.2;

    text-transform: uppercase;
}

.capability-single__section-eyebrow {
    font-size: var(--font-size-text-large);
}


.capability-single__title {
    margin:
        0
        0
        20px;

    max-width: 650px;

    color: #fff;

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

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

    font-weight: 400;

    line-height: 1.03;
}


.capability-single__description {
    max-width: 630px;

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

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

    line-height: 1.6;
}


.capability-single__description p {
    margin:
        0
        0
        15px;
}


/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.capability-single__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;
}


.capability-single__cta,
.capability-single__download {
    min-height: 42px;

    display: inline-flex;

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

    padding:
        9px
        20px;

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

    background:
        var(--color-gold);

    color: #202020;

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

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    cursor: pointer;

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


.capability-single__download {
    background: transparent;

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

    color: #fff;
}


.capability-single__cta:hover,
.capability-single__download:hover {
    background: #2b2b2b;

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

    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/

.capability-single-gallery {
    min-width: 0;
}


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

.capability-single-gallery__main {
    position: relative;

    aspect-ratio: 1.28 / 1;

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

    overflow: hidden;

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

    background: #272727;

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


.capability-single-gallery__main img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: scale(1);

    transition:
        opacity .25s ease,
        transform .7s cubic-bezier(.22, .61, .36, 1),
        filter .45s ease;
}


/*
|--------------------------------------------------------------------------
| Main Gallery Hover
|--------------------------------------------------------------------------
*/

.capability-single-gallery__main:hover {
    background: #3d3931;

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


.capability-single-gallery__main:hover img {
    transform: scale(1.045);

    filter:
        brightness(1.04);
}


/*
|--------------------------------------------------------------------------
| Gallery Thumbnails Swiper
|--------------------------------------------------------------------------
*/

.capability-single-gallery__thumbs {
    width: 100%;

    margin-top: 15px;

    overflow: hidden;
}


.capability-single-gallery__thumbs
.swiper-wrapper {
    align-items: stretch;
}


.capability-single-gallery__thumbs
.swiper-slide {
    width: 118px;

    height: auto;
}


.capability-single-gallery__thumb {
    position: relative;

    width: 100%;
    height: 92px;

    display: block;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        transparent;

    background: #171717;

    cursor: pointer;

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


.capability-single-gallery__thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .35;

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


.capability-single-gallery__thumb span {
    position: absolute;

    inset: 0;

    display: flex;

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

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

    font-size: 10px;

    pointer-events: none;
}


.capability-single-gallery__thumb:hover,
.capability-single-gallery__thumb.is-active {
    border-color:
        var(--color-gold);
}


.capability-single-gallery__thumb:hover img,
.capability-single-gallery__thumb.is-active img {
    opacity: .65;
}


.capability-single-gallery__thumb:hover img {
    transform:
        scale(1.04);
}


/*
|--------------------------------------------------------------------------
| Section Titles
|--------------------------------------------------------------------------
*/

.capability-single__section-title {
    margin: 0;

    color: #fff;

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

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

    font-weight: 400;

    line-height: 1.1;
}


/*
|--------------------------------------------------------------------------
| What It Delivers
|--------------------------------------------------------------------------
*/

.capability-delivers {
    position: relative;

    padding:
        70px
        0
        85px;

    overflow: hidden;

    background: #202020;
}


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

.capability-delivers__media {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}


.capability-delivers__video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

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


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

.capability-delivers__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

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


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

.capability-delivers__inner {
    position: relative;

    z-index: 2;
}


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

.capability-delivers__grid {
    display: grid;

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

    gap: 14px;

    margin-top: 30px;
}


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

.capability-delivers__card {
    position: relative;

    min-height: 125px;

    display: flex;

    flex-direction: column;

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

    padding:
        25px;

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

    background:
        rgba(52, 52, 52, .84);

    backdrop-filter:
        blur(2px);

    text-align: center;

    overflow: hidden;

    isolation: isolate;

    transition:
        border-color .3s ease;
}


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

.capability-delivers__card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        #403d35;

    transform:
        scaleY(0);

    transform-origin:
        bottom center;

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


.capability-delivers__card:hover::before {
    transform:
        scaleY(1);
}


.capability-delivers__card:hover {
    border-color:
        var(--color-gold);
}


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

.capability-delivers__card h3 {
    margin:
        0
        0
        7px;

    color:
        var(--color-gold);

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

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

    line-height: 1.25;
}


.capability-delivers__card p {
    margin: 0;

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

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

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Specifications
|--------------------------------------------------------------------------
*/

.capability-specifications {
    padding:
        70px
        0
        80px;

    background: #202020;
}


.capability-specifications__grid {
    display: grid;

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

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

    align-items: start;
}


.capability-specifications__copy {
    /* max-width: 450px; */

    margin:
        20px
        0;

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

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

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Specification Table
|--------------------------------------------------------------------------
*/

.capability-specifications__table {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Specification Row
|--------------------------------------------------------------------------
*/

.capability-specifications__row {
    position: relative;

    min-height: 48px;

    display: grid;

    grid-template-columns:
        minmax(130px, .6fr)
        minmax(0, 1fr);

    gap: 30px;

    align-items: center;

    padding:
        10px
        0;

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

    overflow: hidden;

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


.capability-specifications__row:hover {
    background:
        rgba(185, 163, 130, .035);
}


/*
|--------------------------------------------------------------------------
| Animated Gold Line
|--------------------------------------------------------------------------
*/

.capability-specifications__row::after {
    content: "";

    position: absolute;

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

    height: 1px;

    background:
        var(--color-gold);

    transform:
        scaleX(0);

    transform-origin:
        left center;

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


.capability-specifications__row:hover::after {
    transform:
        scaleX(1);
}


/*
|--------------------------------------------------------------------------
| Specification Text
|--------------------------------------------------------------------------
*/

.capability-specifications__label {
    color:
        rgba(255, 255, 255, .60);

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

    text-transform: uppercase;

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


.capability-specifications__value {
    color:
        rgba(255, 255, 255, .86);

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

    text-align: right;

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


/*
|--------------------------------------------------------------------------
| Specification Hover
|--------------------------------------------------------------------------
*/

.capability-specifications__row:hover
.capability-specifications__label {
    color:
        var(--color-gold);

    transform:
        translateX(5px);
}


.capability-specifications__row:hover
.capability-specifications__value {
    color: #fff;

    transform:
        translateX(-5px);
}


/*
|--------------------------------------------------------------------------
| Product Enquiry
|--------------------------------------------------------------------------
*/

.capability-product-enquiry {
    position: relative;

    padding:
        58px
        0;

    overflow: hidden;

    background: #272727;
}


.capability-product-enquiry__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../../images/product-enquiry.png");

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    pointer-events: none;
}


.capability-product-enquiry__inner {
    position: relative;

    z-index: 1;

    display: flex;

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

    gap: 50px;
}


.capability-product-enquiry__title {
    margin: 0;

    max-width: 700px;

    color: #fff;

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

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

    font-weight: 400;

    line-height: 1.1;
}


/*
|--------------------------------------------------------------------------
| Related Products
|--------------------------------------------------------------------------
*/

.capability-related {
    padding:
        55px
        0
        90px;

    background: #292929;
}


.capability-related__head {
    display: flex;

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

    gap: 30px;

    margin-bottom: 25px;
}


.capability-related__title {
    margin: 0;

    color: #fff;

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

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

    font-weight: 400;
}


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

.capability-related__navigation {
    display: flex;

    gap: 10px;
}


.capability-related__prev,
.capability-related__next {
    width: 44px;
    height: 44px;

    display: flex;

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

    padding: 0;

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

    border-radius: 50%;

    background: transparent;

    color: #fff;

    cursor: pointer;

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


.capability-related__prev:hover,
.capability-related__next:hover {
    background:
        var(--color-gold);

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

    color:
        #202020;
}


.capability-related__prev.swiper-button-disabled,
.capability-related__next.swiper-button-disabled {
    opacity: .35;

    cursor: default;
}


/*
|--------------------------------------------------------------------------
| Related Swiper
|--------------------------------------------------------------------------
*/

.capability-related__swiper {
    width: 100%;

    overflow: hidden;
}


.capability-related__swiper
.swiper-slide {
    height: auto;
}


.capability-related__swiper
.capability-product-card {
    height: 100%;
}


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

.capability-related
.capability-product-card {
    border:
        1px solid
        rgba(255, 255, 255, .14);

    background: #363636;

    transition:
        border-color .35s ease;
}


.capability-related
.capability-product-card__media {
    background: #363636;

    transition:
        background-color .4s ease;
}


.capability-related
.capability-product-card__content,
.capability-related
.capability-product-card__footer {
    background: #363636;

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


.capability-related
.capability-product-card__media img {
    filter:
        brightness(.82);

    transform:
        scale(1);

    transition:
        filter .4s ease,
        transform .55s ease;
}


.capability-related
.capability-product-card:hover {
    border-color:
        rgba(185, 163, 130, .35);
}


.capability-related
.capability-product-card:hover
.capability-product-card__media {
    background: #171717;
}


.capability-related
.capability-product-card:hover
.capability-product-card__media img {
    filter:
        brightness(.72);

    transform:
        scale(1.01);
}


.capability-related
.capability-product-card:hover
.capability-product-card__content,
.capability-related
.capability-product-card:hover
.capability-product-card__footer {
    background:
        #38332b;
}


.capability-related
.capability-product-card:hover
.capability-product-card__footer {
    border-top-color:
        rgba(185, 163, 130, .22);
}


.capability-related
.capability-product-card:hover
.capability-product-card__category {
    background:
        rgba(185, 163, 130, .24);

    color:
        #c7af88;
}


.capability-related
.capability-product-card:hover
.capability-product-card__arrow {
    transform:
        translateX(4px);
}


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

@media (max-width: 991.98px) {

    .capability-single__intro {
        padding:
            calc(
                var(--nav-height, 90px)
                + 45px
            )
            0
            60px;
    }


    .capability-single__intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .capability-single__intro-content {
        max-width: 100%;
    }


    .capability-single-gallery {
        max-width: 720px;
    }


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


    .capability-specifications__grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


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

@media (max-width: 767.98px) {

    .capability-single__intro {
        padding:
            calc(
                var(--nav-height, 80px)
                + 30px
            )
            0
            45px;
    }


    .capability-single__title {
        font-size: 40px;
    }


    .capability-single__description {
        font-size: 15px;
    }


    .capability-single__actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .capability-single__cta,
    .capability-single__download {
        width: 100%;
    }


    .capability-single-gallery__thumbs
    .swiper-slide {
        width: 105px;
    }


    .capability-single-gallery__thumb {
        height: 82px;
    }


    .capability-delivers {
        padding:
            50px
            0;
    }


    .capability-delivers__grid {
        grid-template-columns: 1fr;
    }


    .capability-specifications {
        padding:
            50px
            0;
    }


    .capability-specifications__row {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .capability-specifications__value {
        text-align: left;
    }


    .capability-product-enquiry__inner {
        display: block;
    }


    .capability-product-enquiry__title {
        margin-bottom: 25px;
    }


    .capability-related__head {
        align-items: flex-end;
    }


    .capability-related__prev,
    .capability-related__next {
        width: 40px;
        height: 40px;
    }

}

/*
|--------------------------------------------------------------------------
| Product Card — Initial Image Zoom
|--------------------------------------------------------------------------
*/

.capability-product-card--zoomed
.capability-product-card__media img {
    transform: scale(1.3);
}

.capability-single__download:hover {
    background:#fff;
    color:#171717;
}