/*
 * Biliton Industry Detail
 * Canonical rebuild for BILITON_INDUSTRY_ACQUISITION_V21_2_96
 * Scope: current industry-detail.php classes only.
 */

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

.industry-detail-hero{
    position:relative;
    isolation:isolate;
    min-height:510px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background-image:
        linear-gradient(
            90deg,
            rgba(4,31,51,.97) 0%,
            rgba(4,31,51,.92) 30%,
            rgba(4,31,51,.66) 50%,
            rgba(4,31,51,.25) 72%,
            rgba(4,31,51,.08) 100%
        ),
        var(--industry-hero);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.industry-detail-hero > .site-container{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
    padding-top:42px;
    padding-bottom:42px;
}

.industry-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 24px;
    color:rgba(255,255,255,.82);
    font-size:13px;
}

.industry-breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.industry-detail-hero .eyebrow{
    display:block;
    margin:0 0 16px;
    color:#f3a51e;
    font-size:14px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.industry-detail-hero h1{
    max-width:820px;
    margin:0;
    color:#fff;
    font-size:clamp(42px,4vw,62px);
    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:800;
}

.industry-detail-hero > .site-container > p{
    max-width:760px;
    margin:22px 0 0;
    color:rgba(255,255,255,.93);
    font-size:18px;
    line-height:1.65;
}

.industry-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.industry-detail-hero .site-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 24px;
    border-radius:4px;
    font-weight:800;
    text-decoration:none;
}

.industry-detail-hero .site-btn.primary{
    background:#ef7b00;
    color:#fff;
    border:1px solid #ef7b00;
}

.industry-detail-hero .site-btn.outline{
    background:rgba(255,255,255,.05);
    color:#fff;
    border:1px solid rgba(255,255,255,.65);
}

.industry-hero-trust{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:34px;
    color:rgba(255,255,255,.84);
    font-size:14px;
    font-weight:600;
}

.industry-hero-trust span{
    position:relative;
    padding-right:20px;
    margin-right:20px;
}

.industry-hero-trust span:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:4px;
    height:4px;
    margin-top:-2px;
    border-radius:50%;
    background:#f3a51e;
}


/* ==========================================================
   SECTION NAV
   ========================================================== */

.industry-nav-strip{
    border-bottom:1px solid #e3e8eb;
    background:#fff;
}

.industry-nav-strip .site-container{
    width:min(1180px,calc(100% - 40px));
    min-height:70px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:26px;
}

.industry-nav-strip span{
    color:#0b2d3d;
    font-size:12px;
    font-weight:900;
    letter-spacing:.11em;
}

.industry-nav-strip a{
    color:#435765;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

.industry-nav-strip a:hover{
    color:#ef7b00;
}


/* ==========================================================
   SHARED SECTIONS
   ========================================================== */

.industry-section{
    padding:82px 0;
}

.industry-section > .site-container{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

.industry-section.industry-soft{
    background:#f5f7f8;
}

.industry-heading{
    max-width:780px;
}

.industry-heading > span{
    display:block;
    margin-bottom:12px;
    color:#ef7b00;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
}

.industry-heading h2{
    margin:0;
    color:#102a38;
    font-size:clamp(30px,3vw,44px);
    line-height:1.12;
    letter-spacing:-.025em;
}

.industry-heading p{
    max-width:720px;
    margin:18px 0 0;
    color:#5b6d78;
    font-size:17px;
    line-height:1.72;
}


/* ==========================================================
   PERFORMANCE NEEDS
   ========================================================== */

.industry-need-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-top:42px;
}

.industry-need-grid article{
    min-height:230px;
    padding:27px 24px;
    background:#fff;
    border:1px solid #e1e7eb;
    border-top:4px solid #ef7b00;
    box-shadow:0 12px 30px rgba(7,38,57,.06);
}

.industry-need-grid article > b{
    display:block;
    margin-bottom:27px;
    color:#ef7b00;
    font-size:13px;
    letter-spacing:.08em;
}

.industry-need-grid h3{
    margin:0;
    color:#102a38;
    font-size:21px;
    line-height:1.25;
}

.industry-need-grid p{
    margin:13px 0 0;
    color:#61727d;
    font-size:15px;
    line-height:1.68;
}


/* ==========================================================
   PRODUCT SOLUTIONS
   ========================================================== */

.industry-product-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:42px;
}

.industry-product-grid article{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    min-height:210px;
    padding:30px;
    background:#fff;
    border:1px solid #dee6ea;
    box-shadow:0 12px 32px rgba(7,38,57,.055);
}

.industry-product-grid article > div:first-child > span{
    display:block;
    margin-bottom:10px;
    color:#ef7b00;
    font-size:11px;
    font-weight:900;
    letter-spacing:.1em;
}

.industry-product-grid h3{
    margin:0;
    color:#102a38;
    font-size:24px;
    line-height:1.2;
}

.industry-product-grid p{
    margin:13px 0 0;
    color:#61727d;
    line-height:1.68;
}

.industry-product-grid article > div:last-child{
    min-width:155px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.industry-product-grid article > div:last-child a{
    color:#173c50;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
}

.industry-product-grid article > div:last-child a:hover{
    color:#ef7b00;
}

.industry-quote-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 15px;
    background:#ef7b00;
    color:#fff !important;
    border-radius:3px;
}

.industry-reference-note{
    max-width:190px;
    color:#6d7d86;
    font-size:13px;
    line-height:1.55;
}


/* ==========================================================
   GRADE SELECTION
   ========================================================== */

.industry-selection{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
    gap:56px;
    align-items:start;
}

.industry-factor-list{
    list-style:none;
    padding:0;
    margin:38px 0 0;
    border-top:1px solid #dfe6ea;
}

.industry-factor-list li{
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    min-height:64px;
    padding:8px 0;
    border-bottom:1px solid #dfe6ea;
    color:#233e4d;
    font-size:16px;
    font-weight:700;
}

.industry-factor-list li b{
    color:#ef7b00;
    font-size:12px;
    letter-spacing:.08em;
}

.industry-selection aside{
    padding:34px;
    background:#0c3042;
    color:#fff;
}

.industry-selection aside > span{
    display:block;
    color:#f3a51e;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.industry-selection aside h3{
    margin:12px 0 0;
    color:#fff;
    font-size:26px;
    line-height:1.25;
}

.industry-selection aside > p{
    margin:22px 0;
    color:rgba(255,255,255,.75);
    line-height:1.65;
}

.industry-app-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:23px;
}

.industry-app-tags a{
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.24);
    color:#fff;
    font-size:13px;
    text-decoration:none;
}

.industry-app-tags a:hover{
    border-color:#f3a51e;
    color:#f3a51e;
}

.industry-selection aside .site-btn.primary{
    display:inline-flex;
    padding:13px 18px;
    background:#ef7b00;
    color:#fff;
    text-decoration:none;
    font-weight:800;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.industry-section.industry-dark{
    background:#092b3b;
    color:#fff;
}

.industry-dark .industry-heading > span{
    color:#f3a51e;
}

.industry-dark .industry-heading h2{
    color:#fff;
}

.industry-process ol{
    list-style:none;
    padding:0;
    margin:42px 0 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid rgba(255,255,255,.18);
}

.industry-process li{
    min-height:210px;
    padding:28px 25px;
    border-right:1px solid rgba(255,255,255,.14);
}

.industry-process li:last-child{
    border-right:0;
}

.industry-process li > b{
    color:#f3a51e;
    font-size:13px;
    letter-spacing:.08em;
}

.industry-process h3{
    margin:28px 0 0;
    color:#fff;
    font-size:21px;
}

.industry-process p{
    margin:12px 0 0;
    color:rgba(255,255,255,.7);
    font-size:15px;
    line-height:1.65;
}


/* ==========================================================
   FAQ
   ========================================================== */

.industry-faq{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:70px;
    align-items:start;
}

.industry-faq details{
    border-bottom:1px solid #dfe6ea;
}

.industry-faq details:first-child{
    border-top:1px solid #dfe6ea;
}

.industry-faq summary{
    position:relative;
    cursor:pointer;
    list-style:none;
    padding:22px 40px 22px 0;
    color:#173746;
    font-size:17px;
    font-weight:800;
}

.industry-faq summary::-webkit-details-marker{
    display:none;
}

.industry-faq summary::after{
    content:"+";
    position:absolute;
    right:4px;
    top:19px;
    color:#ef7b00;
    font-size:24px;
    font-weight:400;
}

.industry-faq details[open] summary::after{
    content:"−";
}

.industry-faq details p{
    margin:0;
    padding:0 40px 22px 0;
    color:#61727d;
    line-height:1.7;
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.industry-final-cta{
    padding:62px 0;
    background:#eef2f4;
    border-top:1px solid #dfe6ea;
}

.industry-final-cta .site-container{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.industry-final-cta span{
    display:block;
    margin-bottom:10px;
    color:#ef7b00;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.industry-final-cta h2{
    max-width:760px;
    margin:0;
    color:#102a38;
    font-size:clamp(28px,3vw,40px);
    line-height:1.15;
}

.industry-final-cta p{
    max-width:720px;
    margin:14px 0 0;
    color:#61727d;
    line-height:1.68;
}

.industry-final-cta .site-btn.primary{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 23px;
    background:#ef7b00;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    border-radius:3px;
}


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

@media(max-width:980px){

    .industry-detail-hero{
        min-height:470px;
    }

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

    .industry-product-grid{
        grid-template-columns:1fr;
    }

    .industry-selection{
        grid-template-columns:1fr;
        gap:36px;
    }

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

    .industry-process li:nth-child(2){
        border-right:0;
    }

    .industry-faq{
        grid-template-columns:1fr;
        gap:35px;
    }
}


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

@media(max-width:700px){

    .industry-detail-hero{
        min-height:520px;
        background-position:center;
    }

    .industry-detail-hero > .site-container,
    .industry-nav-strip .site-container,
    .industry-section > .site-container,
    .industry-final-cta .site-container{
        width:min(100% - 30px,1180px);
    }

    .industry-detail-hero h1{
        font-size:clamp(34px,10vw,46px);
    }

    .industry-detail-hero > .site-container > p{
        font-size:16px;
    }

    .industry-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .industry-detail-hero .site-btn{
        width:100%;
    }

    .industry-hero-trust{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px 16px;
    }

    .industry-hero-trust span{
        margin:0;
        padding:0;
    }

    .industry-hero-trust span::after{
        display:none !important;
    }

    .industry-nav-strip .site-container{
        padding:16px 0;
        gap:12px 18px;
    }

    .industry-nav-strip span{
        width:100%;
    }

    .industry-section{
        padding:58px 0;
    }

    .industry-need-grid{
        grid-template-columns:1fr;
        margin-top:30px;
    }

    .industry-product-grid{
        margin-top:30px;
    }

    .industry-product-grid article{
        grid-template-columns:1fr;
        gap:20px;
        padding:24px;
    }

    .industry-product-grid article > div:last-child{
        min-width:0;
    }

    .industry-selection aside{
        padding:26px;
    }

    .industry-process ol{
        grid-template-columns:1fr;
    }

    .industry-process li{
        min-height:0;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.14);
    }

    .industry-process li:last-child{
        border-bottom:0;
    }

    .industry-final-cta{
        padding:50px 0;
    }

    .industry-final-cta .site-container{
        align-items:flex-start;
        flex-direction:column;
    }
}