/* =========================================================
   ETHICS SECURITY SERVICE
   FINAL MOBILE SERVICE CARD
   Full photo + complete important service information
   Desktop is intentionally untouched.
========================================================= */

@media (max-width: 767.98px) {

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

    body.ess-home-page .ess-services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        border: 0 !important;
    }


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

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card {

        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border:
          1px solid
          #E5E9ED !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       PHOTO
       Use complete 4:5 mobile image.
       Never crop people.
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    .ess-service-card-photo {

        order: 1 !important;

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #F3F5F7 !important;
    }


    body.ess-home-page
    .ess-services-grid
    .ess-service-card-photo picture {

        position: static !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    body.ess-home-page
    .ess-services-grid
    .ess-service-card-photo picture > img {

        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;

        inset: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Keep optional photo overlay harmless */

    body.ess-home-page
    .ess-services-grid
    .ess-service-card-photo::before,
    body.ess-home-page
    .ess-services-grid
    .ess-service-card-photo::after {

        pointer-events: none !important;
    }


    /* =====================================================
       NUMBER + ICON
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    .ess-service-card > .ess-service-top {

        order: 2 !important;

        position: static !important;

        display: flex !important;

        width: 100% !important;
        height: auto !important;

        align-items: flex-start !important;
        justify-content: space-between !important;

        padding: 18px 19px 0 !important;
        margin: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    body.ess-home-page
    .ess-services-grid
    .ess-service-number {

        display: inline-block !important;

        color: #AEB7C1 !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    body.ess-home-page
    .ess-services-grid
    .ess-service-icon {

        display: flex !important;

        width: 48px !important;
        height: 48px !important;

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

        color: #B68A2B !important;

        border:
          1px solid
          rgba(182,138,43,.30) !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       SERVICE TITLE
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card > h3 {

        order: 3 !important;

        position: static !important;

        display: block !important;

        width: auto !important;
        max-width: none !important;

        height: auto !important;

        margin: 18px 19px 0 !important;
        padding: 0 !important;

        color: #071B2E !important;

        font-size: 20px !important;
        font-weight: 700 !important;

        line-height: 1.28 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       IMPORTANT DESCRIPTION
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card > p {

        order: 4 !important;

        position: static !important;

        display: block !important;

        width: auto !important;
        max-width: none !important;

        height: auto !important;

        margin: 11px 19px 0 !important;
        padding: 0 !important;

        color: #697786 !important;

        font-size: 13px !important;

        line-height: 1.6 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       IMPORTANT SERVICE TAGS
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card
    > .ess-service-tags {

        order: 5 !important;

        position: static !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 6px !important;

        width: auto !important;
        height: auto !important;

        margin: 15px 19px 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    body.ess-home-page
    .ess-services-grid
    .ess-service-tags > span {

        display: inline-flex !important;

        align-items: center !important;

        padding: 6px 9px !important;

        color: #657382 !important;

        background: #F7F8F9 !important;

        border:
          1px solid
          #DFE4E8 !important;

        font-size: 7px !important;
        font-weight: 700 !important;

        line-height: 1 !important;

        text-transform: uppercase !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       EXPLORE SERVICE
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card > a {

        order: 6 !important;

        position: static !important;

        display: inline-flex !important;

        width: fit-content !important;
        height: auto !important;

        align-items: center !important;

        gap: 10px !important;

        margin: 20px 19px 22px !important;
        padding: 0 !important;

        color: #B1842A !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        text-decoration: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       PREVENT CARD DECORATION FROM COVERING CONTENT
    ===================================================== */

    body.ess-home-page
    .ess-services-grid
    article.ess-service-card::before {

        pointer-events: none !important;
        z-index: 0 !important;
    }


    body.ess-home-page
    .ess-services-grid
    article.ess-service-card
    > * {

        position: relative;
        z-index: 1;
    }

}