/*===================================================
    AMC Infra page (Equipment Rentals)
    (shared inner-hero / equip / industry styles live in common.css)
===================================================*/
.tagHolder{
    max-width: 100%;
}
/*===inner hero - request-a-rental button on the right===*/
.innerHeroSec{
    .breadcrumbList{
        flex-wrap: wrap;
        white-space: normal;
        max-width: 190px;
    }
    .innerHeroRow{
        align-items: flex-start;
    }
    .innerHeroCont{
        flex: 1;
        .innerHeroSub{
            max-width: 100%;
        }
    }
    .heroBtnWrap{
        flex-shrink: 0;
        .btnOne.blueBtn{
            padding: 13px 30px;
            font-size: 15px;
        }
    }
}
@media (max-width: 991px){
    .innerHeroSec{
        .heroBtnWrap{
            margin-top: 10px;
        }
    }
}

/*===intro panel - copy left, stat cards right===*/
.rentIntroSec{
    .introPanel{
        background-color: #e8eef8;
    }
    .introCont{
        .tagHolder{
            max-width: 100%;
        }
        p{
            margin: 0 0 20px;
            color: #1d2a36;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
            &:first-of-type{
                margin-top: 26px;
            }
        }
        .btnWrap{
            margin-top: 30px;
            .btnOne.blueBtn{
                padding: 13px 28px;
                font-size: 14px;
            }
        }
    }
    .introStatGrid{
        padding-left: 30px;
        .row{
            row-gap: 24px;
        }
        .introStatCard{
            display: flex;
            /*===two-up in a half column, so wrap the label under the
                 number rather than let a wide figure spill the card===*/
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            height: 100%;
            padding: 30px 24px;
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 12px 26px rgb(11 51 85 / 6%);
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 18px 36px rgb(11 51 85 / 12%);
            }
            .statNum{
                flex-shrink: 0;
                font-size: 44px;
                font-weight: 800;
                line-height: 1;
                color: var(--blue);
            }
            .statLabel{
                font-size: 15px;
                line-height: 1.4;
                color: #1d2a36;
            }
        }
    }
}
/*===the stat cards stay in view beside the long intro copy; the column
     stretches to the row's height, which gives them room to travel===*/
@media (min-width: 992px){
    .rentIntroSec{
        .introStatGrid{
            position: sticky;
            top: 120px;
        }
    }
}
@media (max-width: 991px){
    .rentIntroSec{
        .introStatGrid{
            padding-left: 0;
            margin-top: 40px;
        }
    }
}
@media (max-width: 767px){
    .rentIntroSec{
        .introStatGrid{
            .introStatCard{
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 10px;
                padding: 22px 18px;
                .statNum{
                    font-size: 34px;
                }
                .statLabel{
                    font-size: 13px;
                }
            }
        }
    }
}

/*===rental categories - fleet cards===*/
.rentCatSec{
    .rentCatGrid{
        .row{
            row-gap: 26px;
        }
        .rentCatCard{
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 24px 22px 0;
            background-color: #eef3f8;
            border: 1px solid #e3eaf2;
            border-radius: 18px;
            overflow: hidden;
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 16px 34px rgb(11 51 85 / 12%);
                .catImg img{
                    transform: scale(1.05);
                }
            }
            .catTitle{
                display: block;
                font-size: 20px;
                font-weight: 700;
                line-height: 1.25;
                color: #1d2a36;
                margin-bottom: 8px;
            }
            .catSub{
                display: block;
                font-size: 13px;
                letter-spacing: 0.2px;
                color: #4b5a66;
                margin-bottom: 16px;
            }
            .catImg{
                margin-top: auto;
                display: flex;
                justify-content: center;
                img{
                    max-width: 100%;
                    height: 210px;
                    object-fit: contain;
                    transition: transform .5s ease;
                }
            }
        }
    }
}
@media (max-width: 767px){
    .rentCatSec{
        .rentCatGrid{
            .rentCatCard{
                padding: 18px 16px 0;
                .catTitle{
                    font-size: 16px;
                }
                .catImg img{
                    height: 140px;
                }
            }
        }
    }
}

/*===process steps panel===*/
.processSec{
    overflow: hidden;
    .processPanel{
        background-color: #1667a6;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .processRow{
        display: flex;
        margin-top: 30px;
        /* every connector piece is a thin translucent line
           with a small white arrow riding on it */
        .rowEntry,
        .rowExit,
        .railSeg,
        .midSeg,
        .stubUp,
        .stubDown{
            position: absolute;
            background: #ffffff8c;
            /* thin chevron heads riding the lines, like the design */
            i,
            svg{
                position: absolute;
                color: #ffffff;
                font-size: 11px;
                width: 1em;
                height: auto;
                fill: currentColor;
            }
        }
        /* flow enters at circle height from the panel edge */
        .rowEntry{
            top: 120px;
            left: -20px;
            right: calc(90% + 60px);
            height: 1px;
            i,
            svg{
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        /* flow exits over the last step's stub */
        .rowExit{
            top: 0;
            left: 90%;
            right: -30px;
            height: 1px;
            i,
            svg{
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .processStep{
            position: relative;
            flex: 1;
            padding: 60px 14px 0;
            text-align: center;
            /* odd steps: up-and-over rail to the next step */
            .railSeg{
                top: 0;
                left: 50%;
                width: 100%;
                height: 1px;
                i,
                svg{
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            /* even steps: straight line at circle height to the next step */
            .midSeg{
                top: 120px;
                left: calc(50% + 62px);
                width: calc(100% - 124px);
                height: 1px;
                i,
                svg{
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            /* vertical stubs between the rail and each circle */
            .stubUp,
            .stubDown{
                top: 0;
                left: 50%;
                width: 1px;
                height: 60px;
                i,
                svg{
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .stubUp{
                i,
                svg{
                    top: 26px;
                }
            }
            .stubDown{
                i,
                svg{
                    top: 46px;
                }
            }
            .stepCircle{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                width: 120px;
                height: 120px;
                margin: 0 auto 26px;
                border-radius: 50%;
                background-color: #ffffff;
                .stepNum{
                    color: #1667a6;
                    font-size: 36px;
                    font-weight: 700;
                    line-height: 1;
                }
                .stepName{
                    color: #1667a6;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 1.25;
                }
            }
            p{
                max-width: 100%;
                margin: 0 auto;
                color: #ffffffd9;
                font-size: 16px;
                line-height: 1.6;
                letter-spacing: 0.2px;
            }
        }
    }
}
@media (max-width: 991px){
    .processSec{
        .processRow{
            flex-wrap: wrap;
            row-gap: 40px;
            .rowEntry,
            .rowExit{
                display: none;
            }
            .processStep{
                flex: 0 0 50%;
                padding-top: 0;
                .railSeg,
                .midSeg,
                .stubUp,
                .stubDown{
                    display: none;
                }
            }
        }
    }
}
@media (max-width: 480px){
    /*===two steps across leaves each description about 140px wide,
         which breaks the copy into three-word lines. One step per
         row on a phone gives it the full column===*/
    .processSec{
        .processRow{
            row-gap: 34px;
            .processStep{
                flex: 0 0 100%;
                p{
                    max-width: 300px;
                }
            }
        }
    }
}

/*===why rent - 3 x 2 icon cards. A light card on the white section that
     floods blue on hover (the same move the group link cards make lower
     on this page), while the icon tile answers in the opposite direction
     - it turns white and its glyph turns blue - so the whole card reads
     as flipped rather than merely tinted. Built to the same rhythm as the
     AMC Services capability cards so the two pages feel related===*/
.whyRentSec{
    .whyRentGrid{
        .row{
            row-gap: 26px;
        }
    }
    .whyRentCard{
        position: relative;
        height: 100%;
        padding: 30px 28px;
        background-color: #eef3f8;
        border: 1px solid #e3eaf2;
        border-radius: 18px;
        overflow: hidden;
        transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
        /*===the step number sits large and faint in the corner===*/
        .whyNum{
            position: absolute;
            top: 18px;
            right: 24px;
            font-size: 44px;
            font-weight: 800;
            line-height: 1;
            color: rgb(22 103 166 / 12%);
            transition: color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
        }
        .whyIcon{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 66px;
            height: 66px;
            margin-bottom: 26px;
            background-color: var(--blue);
            border-radius: 16px;
            transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .4s ease, box-shadow .4s ease;
            &::after{
                content: '';
                position: absolute;
                inset: -1px;
                border-radius: inherit;
                border: 2px solid #fff;
                opacity: 0;
                pointer-events: none;
            }
            i,
            svg{
                font-size: 28px;
                width: 1em;
                height: auto;
                color: #fff;
                fill: currentColor;
                transition: color .4s ease;
            }
        }
        .whyTitle{
            display: block;
            font-size: 19px;
            font-weight: 700;
            color: #1d2a36;
            margin-bottom: 12px;
            /*===keep clear of the corner number===*/
            padding-right: 40px;
            transition: color .4s ease;
        }
        p{
            margin: 0;
            font-size: 14px;
            line-height: 1.65;
            letter-spacing: 0.2px;
            color: #4b5a66;
            transition: color .4s ease;
        }
        &:hover{
            transform: translateY(-6px);
            background-color: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 18px 40px rgb(22 103 166 / 30%);
            .whyNum{
                color: rgb(255 255 255 / 18%);
                transform: scale(1.12);
            }
            .whyIcon{
                transform: rotate(-6deg) scale(1.06);
                background-color: #fff;
                box-shadow: 0 10px 22px rgb(6 32 56 / 25%);
                &::after{
                    animation: whyIconRing .9s ease-out;
                }
                i,
                svg{
                    color: var(--blue);
                    animation: whyIconBounce .6s ease;
                }
            }
            .whyTitle{
                color: #fff;
            }
            p{
                color: rgb(255 255 255 / 85%);
            }
        }
    }
}
@keyframes whyIconRing{
    0%{ opacity: .7; transform: scale(1); }
    100%{ opacity: 0; transform: scale(1.45); }
}
@keyframes whyIconBounce{
    0%, 100%{ transform: translateY(0) rotate(0); }
    35%{ transform: translateY(-5px) rotate(6deg); }
    65%{ transform: translateY(1px) rotate(6deg); }
}
@media (max-width: 767px){
    .whyRentSec .whyRentCard{
        padding: 26px 22px;
        .whyIcon{
            width: 58px;
            height: 58px;
            margin-bottom: 22px;
            i,
            svg{
                font-size: 24px;
            }
        }
        .whyNum{
            font-size: 36px;
        }
    }
}
@media (prefers-reduced-motion: reduce){
    .whyRentSec .whyRentCard,
    .whyRentSec .whyRentCard:hover .whyIcon,
    .whyRentSec .whyRentCard:hover .whyNum{
        transform: none;
    }
    .whyRentSec .whyRentCard:hover .whyIcon{
        &::after,
        i,
        svg{
            animation: none;
        }
    }
}

/*===cta - photo banner with quote & whatsapp buttons===*/
.rentCtaSec{
    .ctaSec{
        background-color: var(--blue);
        padding: 90px 80px;
        overflow: hidden;
        .ctaContent{
            max-width: 62%;
            .SecH{
                font-size: 64px;
                margin-bottom: 40px;
            }
        }
        .ctaBtnWrap{
            ul{
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                li{
                    a{
                        padding: 14px 30px;
                    }
                }
            }
        }
        .btnOne.solidWhiteBtn{
            background-color: #fff;
            border: 1px solid #fff;
            color: #000;
            &:hover{
                background-color: transparent;
                color: #fff;
            }
        }
        /*===machine artwork bleeding off the right edge===*/
        .ctaImg{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 220px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
        }
    }
}
@media (max-width: 1199px){
    .rentCtaSec .ctaSec .ctaContent .SecH{
        font-size: 50px;
    }
}
@media (max-width: 991px){
    .rentCtaSec .ctaSec{
        padding: 70px 50px;
        .ctaContent{
            max-width: 70%;
            .SecH{
                font-size: 40px;
            }
        }
        .ctaImg{
            width: 160px;
            right: 20px;
        }
    }
}
@media (max-width: 767px){
    .rentCtaSec .ctaSec{
        border-radius: 30px;
        padding: 50px 25px;
        .ctaContent{
            max-width: 100%;
            .SecH{
                font-size: 30px;
                margin-bottom: 30px;
            }
        }
        /*===artwork fades behind the copy on small screens===*/
        .ctaImg{
            width: 130px;
            right: -30px;
            opacity: .35;
        }
    }
    .tagHolder .SecH {
        font-size: 32px;
        overflow-wrap: break-word;
        text-align: center;
    }
}
/*===================================================
    Coverage - client names drifting in two rows

    Replaces the logo strip that used to sit here, so the chips are
    outlined rather than filled: on a white section the names should
    read as type, not as a second row of cards.
===================================================*/
.coverageSec{
    .chipMarqueeWrap{
        overflow: hidden;
        padding: 10px 0 0;
        .chipMarquee{
            overflow: hidden;
            white-space: nowrap;
            padding: 10px 0;
            ul{
                display: inline-flex;
                margin: 0;
                padding: 0;
                list-style: none;
                li{
                    flex-shrink: 0;
                    margin-right: 22px;
                }
            }
        }
        .strengthChip{
            display: inline-block;
            padding: 16px 34px;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #1d2a36;
            background-color: #fff;
            border: 1px solid #d9e0e8;
            border-radius: 40px;
            transition: border-color .3s ease, color .3s ease;
        }
        /*===the row pauses under the cursor, so the chip under it answers===*/
        .strengthChip:hover{
            border-color: var(--blue);
            color: var(--blue);
        }
    }
}
@media (max-width: 767px){
    .coverageSec{
        .chipMarqueeWrap{
            .chipMarquee{
                ul li{
                    margin-right: 14px;
                }
            }
            .strengthChip{
                padding: 12px 24px;
                font-size: 14px;
            }
        }
    }
}

/*===================================================
    Rental category cards - now buttons

    The whole card opens the enquiry popup, so it is a button rather
    than a div; these reset the browser's own button styling and keep
    the card's own look.
===================================================*/
.rentCatSec .rentCatCard{
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}
.rentCatSec .rentCatCard:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/*===chevrons hidden until the flow animation lands each segment.
    the class sits on the segment, so it survives font awesome
    swapping the <i> icons for <svg>===*/
.processRow.flowAnimate{
    .rowEntry,
    .rowExit,
    .railSeg,
    .midSeg,
    .stubUp,
    .stubDown{
        i,
        svg{
            opacity: 0;
            transition: opacity .25s ease;
        }
        &.seg-shown{
            i,
            svg{
                opacity: 1;
            }
        }
    }
}

/*===992-1279: the stat cards sit two-up in a narrow column (121px wide at 992),
     and a 44px "100+" / "24/7" ran past the card edge. The phone sizing (34px
     figure, 16px side padding) fits them with room to spare.===*/
@media (min-width: 992px) and (max-width: 1279px){
    .rentIntroSec .introStatGrid .introStatCard{
        padding: 26px 16px;
        .statNum{
            font-size: 34px;
        }
        .statLabel{
            font-size: 14px;
        }
    }
}

/*===phones: the fleet heading (and its pill, which is placed relative to it)
     sits centred over the two-up cards===*/
@media (max-width: 767px){
    .rentCatSec .headingWrap{
        justify-content: center;
        text-align: center;
    }
}

/*===small phones: two fleet cards a row left ~160px each - titles wrapped, the
     rows stretched to the tallest card and the photos sat under big empty gaps.
     One card a row instead, words on the left and the machine on the right.===*/
@media (max-width: 575px){
    .rentCatSec .rentCatGrid .row{
        row-gap: 16px;
        > [class*="col-"]{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    .rentCatSec .rentCatGrid .rentCatCard{
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46%;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 10px;
        min-height: 150px;
        padding: 18px 12px 18px 18px;
        .catTitle{
            grid-column: 1;
            align-self: end;
            font-size: 17px;
            margin-bottom: 6px;
        }
        .catSub{
            grid-column: 1;
            align-self: start;
            margin-bottom: 0;
        }
        .catImg{
            grid-column: 2;
            grid-row: 1 / span 2;
            align-self: center;
            margin-top: 0;
            img{
                width: 100%;
                height: 120px;
            }
        }
    }
}