.intIconWrap{
    display: flex;
    flex-wrap: wrap;
    .intItem{
        width: calc(100% / 2);
        padding:40px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        display: flex;
        flex-wrap: wrap;
        
        &:nth-child(2n){
            border-right: none;
        }
        &:nth-child(1), &:nth-child(3){
            padding-left: 0px;
        }
        &:nth-child(1), &:nth-child(2){
            padding-top: 0px;
        }
        &:nth-last-child(1), &:nth-last-child(2){
            border-bottom: none;
        }
    }
}
.intBox{
    display: flex;
    flex-wrap: wrap;
    .intIcon{
        width: 70px;
    }
    .intIconText{
        width: calc(100% - 70px);
        padding-left: 20px;
    }
}

/* --------------------------------------------------------------------------------
   Emerging categories - reuses the portfolio sticky-visual component from about.css,
   scoped here so the numbering does not leak onto diversified-product-portfolio.html
-------------------------------------------------------------------------------- */
.intProducts{
    .portfolioHead{
        display: flex;
        gap: 12px;
        margin-bottom: 12px;

        h4{
            margin-bottom: 0;
        }
    }

    /* the counter beside each heading, as numbered on the visual */
    .portfolioNum{
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        font-size: 15px;
        letter-spacing: 0;
        border-radius: 50%;
        color: var(--blue);
        background-color: #d8eef8;
        font-family: 'Helvetica Neue';

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

    /* min-height keeps the geometry sane if the product shot is missing or
       still loading; a real image is taller, so it is inert once set */
    .portfolioFig{
        min-height: 320px;
        background-color: #f4fafd;
    }
    /* this shot has a light grey backdrop, so the overlay variant's white
       stroke would vanish - use the brand gradient instead */
    .portfolioLinkPath{
        stroke: url(#portfolioLinkGrad);
    }
}
/* overlay card anchors for this shot: softener left, robot and purifier right */
@media (min-width: 992px){
    .intProducts .portfolioDetail #ipBox1{ left: auto; right: 2.5%; top: 6%; }
    .intProducts .portfolioDetail #ipBox2{ left: 2.5%; top: 8%; }
    .intProducts .portfolioDetail #ipBox3{ left: auto; right: 2.5%; top: 10%; }
    /* the robot box carries three paragraphs - give it more width, less type */
    .intProducts .portfolioOverlay .portfolioDetail .portfolioBox,
    .intProducts .portfolioOverlay .portfolioDetail .portfolioBox.is-active{
        width: min(430px, 38%);
        p{
            font-size: 14px;
        }
    }
    .intProducts .portfolioHead h4{
        font-size: 24px !important;
    }
}
.borderBottom{
    padding-bottom: 40px;
    border-bottom:1px solid #ffffff4a;
}
.campWrap{
    border-radius: 30px;
    background-color: #5999c4;
    padding: 40px;
    .campImg{
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}
.blueBorderBotom{
    padding-bottom:50px;
    border-bottom: 1px solid var(--blue);
}

/* --------------------------------------------------------------------------------
   Platform capabilities: .intIconWrap on a solid blue panel, headings only
-------------------------------------------------------------------------------- */
.intPlatformWrap{
    padding: 40px;

    /* even vertical padding both sides of the divider, so the two rows match;
       the base component deliberately skews it for its own gradient-panel layout */
    .intItem{
        padding: 30px 40px;
        align-items: center;
        border-color: rgba(255, 255, 255, 0.45);

        &:nth-child(odd){
            padding-left: 0;
        }
        &:nth-child(even){
            padding-right: 0;
        }
        &:nth-child(1), &:nth-child(2){
            padding-top: 0;
        }
        &:nth-last-child(1), &:nth-last-child(2){
            padding-bottom: 0;
        }
    }
    .intIconText h4{
        line-height: 1.3;
    }
}
.itText{
    line-height: 1.4;
}
.mb_05{
    margin-bottom: 0px !important;
}


@media (max-width: 1024px){
    /* .gigPlatform {
        .gigGroupWrap {
            width: 100%;
            flex-direction: column;
        }
    } */
}
@media (min-width: 992px) and (max-width: 1366px){
    .portfolioBox{
        height: 300px;
        overflow-y: auto;
    }
}
@media (max-width: 991px){
    .intPlatformWrap{
        padding: 30px;

        .intItem{
            padding: 24px 26px;
        }
        .intIconText h4{
            font-size: 20px !important;
        }
    }

    .section_1{
        .row_1{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
    }
    .section_5{
        .col-lg-7{
            margin-bottom: 20px;
        }
    }

    .section_1b{
        .portfolioStage{
            .portfolioVisualCol{
                &:not(:last-child){
                    margin-bottom: 20px;
                }
            }
        }
    }
    
    .portfolioSpot{
        display: none !important;
    }
    .portfolioStage{
        padding: 0 20px;
    }
}

/* two-up leaves too little room for the longer labels on a phone */
@media (max-width: 767px){
    .section_3{
        .textWrap_2{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
    }
    .intPlatformWrap{
        padding: 25px;

        .intItem{
            width: 100%;
            padding: 22px 0;
            border-right: none;

            /* the base component clears these for its own 2-up edges */
            &:nth-child(2){
                padding-top: 22px;
            }
            /* stacked, this is no longer a last-row item - it needs its rule back */
            &:nth-last-child(2){
                padding-bottom: 22px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            }
            &:last-child{
                padding-bottom: 0;
            }
        }
        .intBox .intIcon{
            width: 56px;
        }
        .intBox .intIconText{
            width: calc(100% - 56px);
            padding-left: 16px;
        }
        .intIconText h4{
            font-size: 18px !important;
        }
    }
    .intProducts {
        .portfolioFig {
            min-height:auto;
        }
    }
    
}

/* --------------------------------------------------------------------------------
   Service digital platform: purchase to service request
-------------------------------------------------------------------------------- */
.svcFlow{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 45px;
    margin-top: 30px;
    border-radius: 20px;
    position: relative;
    &::after{
        width: 100%;
        height: 1px;
        background-color: var(--teal);
        content: "";
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
}

.svcStep{
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding: 26px 16px;
    text-align: center;
    border-radius: 18px;
    background-color: #1b68a6;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;

    /* the chevron sits in the gap to the next step */
    &:not(:last-child)::after{
        content: '\f105';
        top: 50%;
        left: calc(100% + 22px);
        position: absolute;
        font-size: 26px;
        line-height: 1;
        color: var(--teal);
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        transform: translate(-50%, -50%);
    }

    .svcIcon{
        display: block;
        height: 56px;

        img{
            width: auto;
            height: 100%;
            max-height: 100%;
            display: block;
            margin: 0 auto;
        }
    }
    .svcName{
        display: block;
        font-size: 18px;
        line-height: 1.3;
        font-weight: 700;
        color: var(--white);
        font-family: 'Helvetica Neue';
    }
}

@media (max-width: 1199px){
    .svcFlow{
        gap: 34px;
    }
    .svcStep{
        padding: 22px 12px;
        gap: 14px;

        &:not(:last-child)::after{
            left: calc(100% + 17px);
            font-size: 22px;
        }
        .svcIcon{
            height: 46px;
        }
        .svcName{
            font-size: 16px;
        }
    }
}

@media (max-width: 991px){
    .svcFlow{
        gap: 26px;
        padding: 0px;
        margin-top: 0;
    }
    .svcStep{
        padding: 18px 10px;

        &:not(:last-child)::after{
            left: calc(100% + 13px);
            font-size: 18px;
        }
        .svcIcon{
            height: 38px;
        }
        .svcName{
            font-size: 14px;
        }
    }
}

/* five across stops being readable on a phone, so each step becomes a row
   and the chevrons turn to point down the sequence */
@media (max-width: 767px){
    .svcFlow{
        gap: 30px;
        flex-direction: column;
        align-items: stretch;
        padding: 0px 0px 5px;
    }
    .svcStep{
        max-width: none;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 16px;
        padding: 16px 20px;

        &:not(:last-child)::after{
            top: calc(100% + 15px);
            left: 50%;
            transform: translate(-50%, -50%) rotate(90deg);
        }
        .svcIcon{
            flex: 0 0 auto;
            height: 42px;
        }
        .svcName{
            font-size: 17px;
        }
    }
}
/* --------------------------------------------------------------------------------
   Digitally powered backend: app screens grouped under their capability labels
-------------------------------------------------------------------------------- */
.gigPlatform{
    /* .gigGroupWrap{
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        align-items: flex-start;
        justify-content: center;
    }

    .gigGroup{
        flex: 1 1 0;
        min-width: 0;
    } */

    /* the fraud-detection block carries two screens, so it takes twice the room */
    /* .gigGroup_wide{
        flex-grow: 2;
    }

    .gigTitle{
        line-height: 1.3;
        min-height: 60px;
    }

    .gigShots{
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        align-items: flex-start;
        justify-content: center;
    } */

    /* max-width keeps a lone screen from ballooning when its group is the wide one */
    /* .gigShot{
        flex: 1 1 0;
        min-width: 0;
        max-width: 260px;
        margin-bottom: 0;

        img{
            width: 100%;
            display: block;
        }
    } */

    .gigFoot p:last-child{
        margin-bottom: 0;
    }
}
.gigPlatform{
    .gigTitle{
        min-height: 60px;
    }
    .gigGroupWrap_2{
        /* gap: 10px; */
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
        .gigGroupWrapN_1{
            width: 20%;
            padding: 0 15px;
        }
        .gigGroupWrapN_2{
            width: 20%;
            padding: 0 15px;
        }
        .gigGroupWrapN_3{
            width: 40%;
            padding: 0 15px;
            .gigGroup{
                width: 50%;
            }
        }
        .gigGroupWrapN_4{
            width: 20%;
            padding: 0 15px;
        }
    }
}

@media (max-width: 1199px){
    .gigPlatform {
        .gigTitle {
            min-height: 40px;
            font-size: 14px !important;
        }
    }
}

@media (max-width: 991px){
    .gigPlatform{
        .row_1{
            margin-bottom: 20px !important;
        }
        .gigGroupWrap_2{
            margin-bottom: 20px !important;
        }
        .gigTitle{
            margin-bottom: 20px;
        }
    }
    .shadowBoxDk_3{
        .row_1{
            margin-bottom: 20px;
        }
    }
}

/* stacked, each label gets its own full-width row so the longer ones stop wrapping
   into three lines over a single narrow screenshot */
@media (max-width: 767px){
    .gigPlatform{
        .gigTitle{
            margin-bottom: 15px;
        }
    }
    .shadowBoxDk_3{
        .row_2{
            .col-md-3{
                margin-bottom: 20px;
            }
        }
    }
}

@media (max-width: 580px){
    .gigPlatform {
        .gigGroupWrap_2 {
            .gigGroupWrapN_1 {
                width: 50%;
            }
            .gigGroupWrapN_2 {
                width: 50%;
            }
            .gigGroupWrapN_3 {
                width: 100%;
                margin-top: 20px;
                margin-bottom: 20px;
            }
            .gigGroupWrapN_4 {
                width: 50%;
            }
        }
    }
}

@media (max-width: 991px){
    .intIconWrap .intItem{
        padding: 30px;
    }
    .borderBottom{
        padding-bottom: 30px;
    }
    .blueBorderBotom{
        padding-bottom: 35px;
    }
}

@media (max-width: 767px){
    /* two-up leaves the longer labels two words per line at this width */
    .intIconWrap .intItem{
        width: 100%;
        padding: 25px 0;
        border-right: none;

        /* the base component clears these for its own 2-up edges */
        &:nth-child(2){
            padding-top: 25px;
        }
        &:nth-last-child(2){
            padding-bottom: 25px;
            border-bottom: 1px solid #fff;
        }
        &:last-child{
            padding-bottom: 0;
        }
    }
    .intBox{
        .intIcon{
            width: 56px;
        }
        .intIconText{
            width: calc(100% - 56px);
            padding-left: 16px;
        }
    }
    .campWrap{
        padding: 25px;
    }
}

/* three boxes are shorter than the five on the portfolio page, so the list column
   needs more tail room or the visual unpins while the last box is still being read */
@media (min-width: 992px){
    .intProducts .portfolioListCol{
        padding-bottom: 0px !important;
    }
}

@media (max-width: 767px){
    .intProducts{
        .portfolioHead{
            gap: 10px;
        }
        .portfolioNum{
            width: 26px;
            height: 26px;
            font-size: 13px;
        }
        .portfolioHead h4{
            font-size: 20px !important;
        }
    }
}