/* =====================================================
   INDUSTRIES PAGE
===================================================== */

.ind-page {
    width: 100%;
    background: #ffffff;
    color: #050505;
    overflow-x: hidden;
}

.ind-page * {
    box-sizing: border-box;
}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.ind-wrap {
    width: min(1320px, calc(100% - 80px));
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


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

.ind-hero {
    position: relative;
    padding: 185px 0 80px;
    background: #ffffff;
    overflow: hidden;
}

.ind-hero::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 24%;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20, 226, 122, 0.15),
            transparent 62%
        );

    filter: blur(22px);

    pointer-events: none;
}


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

.ind-hero h1 {
    position: relative;
    z-index: 1;

    margin: 0;

    max-width: 1150px;

    font-size: clamp(42px, 5vw, 60px);
    line-height: 0.97;

    letter-spacing: -2px;

    font-weight: 500;

    color: #050505;
}


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

.ind-hero-bottom {
    position: relative;
    z-index: 1;

    width: 100%;

    margin-top: 54px;

    padding-top: 34px;

    border-top:
        1px solid rgba(0, 0, 0, 0.14);
}

.ind-hero-bottom p {
    margin: 0;

    max-width: 1000px;

    font-size: 22px;
    line-height: 1.52;

    font-weight: 400;

    color: rgba(0, 0, 0, 0.62);
}


/* =====================================================
   INDUSTRY PILL SECTION
===================================================== */

.ind-pill-section {
    width: 100%;

    padding: 0 0 24px;

    background: #ffffff;

    position: relative;
}


/*
   IMPORTANT:
   Same container width as cards.
*/

.ind-pill-section > .ind-wrap {
    width: min(1320px, calc(100% - 80px));

    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   REMOVE OLD DECORATIVE LINE
===================================================== */

.ind-pill-section::before,
.ind-pill-section::after,

.ind-pill-section > .ind-wrap::before,
.ind-pill-section > .ind-wrap::after,

.ind-pill-row::before,
.ind-pill-row::after,

.ind-pill-line {
    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;

    background: none !important;

    box-shadow: none !important;
}


/* =====================================================
   PILL ROW
===================================================== */

/*
   FIX:
   Pills and cards use the SAME .ind-wrap.

   Do NOT use:
   grid-template-columns
   here.

   Flex + nowrap keeps all 8 pills
   on ONE ROW.
*/

.ind-pill-row {
    width: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


/* =====================================================
   PILL
===================================================== */

.ind-pill {
    flex: 1 1 0;

    width: auto;

    min-width: 0;

    height: 40px;

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(0, 0, 0, 0.35);

    border-radius: 999px;

    background: #ffffff;

    color: #050505;

    text-decoration: none;

    font-size: 14px;

    line-height: 1;

    font-weight: 500;

    /*letter-spacing: -0.25px;*/

    white-space: nowrap;

    box-sizing: border-box;

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


/* =====================================================
   ACTIVE / HOVER
===================================================== */

.ind-pill:hover,
.ind-pill.active {
    background: #14e27a;

    border-color: #14e27a;

    color: #050505;

    transform:
        translate3d(0, -1px, 0);
}


/* =====================================================
   INDUSTRY GRID
===================================================== */

.ind-grid-section {
    width: 100%;

    padding: 0 0 120px;

    background: #ffffff;
}


/*
   SAME WIDTH AS PILL CONTAINER
*/

.ind-grid-section > .ind-wrap {
    width: min(1320px, calc(100% - 80px));

    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   GRID
===================================================== */

.ind-grid {
    width: 100%;

    display: grid;

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

    gap: 22px;
}


/* =====================================================
   CARD SIZES
===================================================== */

.ind-card-sm {
    grid-column: span 2;

    min-height: 500px;
}

.ind-card-lg {
    grid-column: span 3;

    min-height: 520px;
}


/* =====================================================
   CARD
===================================================== */

.ind-card {
    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 10px;

    text-decoration: none;

    color: #ffffff;

    background: #111111;

    isolation: isolate;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06);

    scroll-margin-top: 130px;

    transform:
        translate3d(0, 0, 0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.45s ease;
}


/* =====================================================
   CARD IMAGE
===================================================== */

.ind-card-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color: #111111;

    transform:
        translate3d(0, 0, 0)
        scale(1.04);

    transform-origin: center center;

    opacity: 0.96;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transition:
        transform 0.8s cubic-bezier(.22, 1, .36, 1),
        filter 0.45s ease,
        opacity 0.45s ease;
}


/* =====================================================
   CARD OVERLAY
===================================================== */

.ind-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.10) 35%,
            rgba(0, 0, 0, 0.48) 72%,
            rgba(0, 0, 0, 0.78) 100%
        );

    pointer-events: none;
}


/* =====================================================
   CARD GREEN HOVER GLOW
===================================================== */

.ind-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at var(--x, 50%) var(--y, 50%),
            rgba(20, 226, 122, 0.28),
            transparent 32%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;
}

.ind-card:hover::after {
    opacity: 1;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.ind-card-content {
    position: relative;

    z-index: 2;

    min-height: inherit;

    padding: 34px 36px 30px;

    display: flex;

    flex-direction: column;

    pointer-events: none;
}


/* =====================================================
   CARD TITLE
===================================================== */

.ind-card-content h3 {
    margin: 0 0 auto;

    max-width: 92%;

    font-size:
        clamp(
            36px,
            3vw,
            40px
        );

    line-height: 0.98;

    letter-spacing: -2px;

    font-weight: 700;

    color: #ffffff;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        color 0.35s ease;
}


/* =====================================================
   CARD DESCRIPTION
===================================================== */

.ind-card-content p {
    margin: auto 0 0;

    max-width: 86%;

    font-size: 20px;

    line-height: 1.28;

    letter-spacing: -0.2px;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.98);

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


/* =====================================================
   CARD FOOTER
===================================================== */

.ind-card-footer {
    margin-top: 26px;

    padding-top: 20px;

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

    display: flex;

    justify-content: flex-end;
}


.ind-card-footer small {
    font-size: 12px;

    line-height: 1;

    font-weight: 500;

    color: #ffffff;

    /*letter-spacing: -0.1px;*/

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* =====================================================
   CARD FOCUS
===================================================== */

.ind-card.ind-card-focus {
    box-shadow:
        0 0 0 3px rgba(20, 226, 122, 0.25),
        0 26px 50px rgba(0, 0, 0, 0.14);
}


/* =====================================================
   CARD HOVER
===================================================== */

.ind-card:hover {
    transform:
        translate3d(0, -6px, 0);

    box-shadow:
        0 26px 50px rgba(0, 0, 0, 0.14);
}


.ind-card:hover .ind-card-img {
    transform:
        translate3d(0, 0, 0)
        scale(1.10);

    filter: saturate(1.06);

    opacity: 1;
}


.ind-card:hover .ind-card-content h3 {
    transform:
        translate3d(0, -4px, 0);

    color: #14e27a;
}


.ind-card:hover .ind-card-content p {
    transform:
        translate3d(0, -3px, 0);
}


.ind-card:hover .ind-card-footer small {
    transform:
        translate3d(4px, 0, 0);
}


/* =====================================================
   CARD OPENING
===================================================== */

.ind-card.is-opening {
    transform:
        translate3d(0, 0, 0) !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06) !important;

    pointer-events: none;
}


.ind-card.is-opening:hover {
    transform:
        translate3d(0, 0, 0) !important;
}


.ind-card.is-opening .ind-card-img,
.ind-card.is-opening:hover .ind-card-img {
    transform:
        translate3d(0, 0, 0)
        scale(1.04) !important;

    filter: none !important;

    opacity: 1 !important;

    transition: none !important;
}


.ind-card.is-opening .ind-card-content {
    opacity: 0;

    transition: none !important;
}


/* =====================================================
   CLICK TRANSITION IMAGE
===================================================== */

.industry-click-transition {
    position: fixed;

    z-index: 999999;

    margin: 0;
    padding: 0;

    overflow: hidden;

    pointer-events: none;

    background-color: #111111;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    transform:
        translate3d(0, 0, 0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    contain: layout paint;

    isolation: isolate;
}


/* =====================================================
   TRANSITION LOCK
===================================================== */

html.industry-transition-active,
body.industry-transition-active {
    overflow: hidden !important;
}


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

@media (max-width: 1100px) {

    .ind-wrap,
    .ind-pill-section > .ind-wrap,
    .ind-grid-section > .ind-wrap {
        width: calc(100% - 48px);

        max-width: 1100px;
    }


    .ind-hero {
        padding:
            150px
            0
            68px;
    }


    .ind-hero h1 {
        font-size: 58px;

        letter-spacing: -2.3px;
    }


    .ind-hero-bottom p {
        font-size: 20px;
    }


    .ind-pill-section {
        padding-bottom: 30px;
    }


    /*
       Keep all 8 pills in one row
       until mobile.
    */

    .ind-pill-row {
        display: flex;

        flex-wrap: nowrap;

        gap: 8px;
    }


    .ind-pill {
        flex:
            1 1 0;

        min-width: 0;

        padding:
            0 8px;

        font-size: 13px;
    }


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


    .ind-card-sm,
    .ind-card-lg {
        grid-column: span 1;

        min-height: 440px;
    }


    .ind-card-content {
        padding: 30px;
    }


    .ind-card-content h3 {
        font-size: 38px;
    }


    .ind-card-content p {
        font-size: 18px;
    }

}


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

@media (max-width: 767px) {

    .ind-wrap,
    .ind-pill-section > .ind-wrap,
    .ind-grid-section > .ind-wrap {
        width: calc(100% - 32px);

        max-width: none;
    }


    .ind-hero {
        padding:
            122px
            0
            52px;
    }


    .ind-hero::after {
        right: -130px;

        top: 14%;

        width: 280px;
        height: 280px;

        opacity: 0.65;
    }


    .ind-hero h1 {
        font-size: 40px;

        line-height: 1;

        letter-spacing: -1.5px;
    }


    .ind-hero-bottom {
        margin-top: 34px;

        padding-top: 24px;
    }


    .ind-hero-bottom p {
        font-size: 17px;

        line-height: 1.52;
    }


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

    .ind-pill-section {
        padding-bottom: 24px;
    }


    .ind-pill-row {
        width: 100%;

        display: flex;

        flex-wrap: nowrap;

        justify-content: flex-start;

        align-items: center;

        gap: 9px;

        overflow-x: auto;

        padding:
            0 0 6px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .ind-pill-row::-webkit-scrollbar {
        display: none;
    }


    .ind-pill {
        flex:
            0 0 auto;

        width: auto;

        min-width: max-content;

        height: 38px;

        padding:
            0 17px;

        font-size: 13px;
    }


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

    .ind-grid-section {
        padding-bottom: 80px;
    }


    .ind-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ind-card-sm,
    .ind-card-lg {
        grid-column: span 1;

        min-height: 380px;
    }


    .ind-card {
        border-radius: 10px;

        scroll-margin-top: 100px;
    }


    .ind-card-content {
        padding:
            24px
            22px
            22px;
    }


    .ind-card-content h3 {
        max-width: 100%;

        font-size: 32px;

        letter-spacing: -1.2px;
    }


    .ind-card-content p {
        max-width: 100%;

        font-size: 16px;

        line-height: 1.32;
    }


    .ind-card-footer {
        margin-top: 18px;

        padding-top: 14px;
    }


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

    .ind-card:hover {
        transform:
            translate3d(0, 0, 0);

        box-shadow:
            0 10px 35px rgba(0, 0, 0, 0.06);
    }


    .ind-card:hover .ind-card-img {
        transform:
            translate3d(0, 0, 0)
            scale(1.04);

        filter: none;

        opacity: 0.96;
    }


    .ind-card:hover .ind-card-content h3 {
        transform:
            translate3d(0, 0, 0);

        color: #ffffff;
    }


    .ind-card:hover .ind-card-content p {
        transform:
            translate3d(0, 0, 0);
    }


    .ind-card:hover .ind-card-footer small {
        transform:
            translate3d(0, 0, 0);
    }

}


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

@media (max-width: 420px) {

    .ind-hero h1 {
        font-size: 35px;

        letter-spacing: -1.3px;
    }


    .ind-card-sm,
    .ind-card-lg {
        min-height: 350px;
    }


    .ind-card-content {
        padding:
            22px
            20px
            20px;
    }


    .ind-card-content h3 {
        font-size: 29px;
    }

}