
/* Final image-fit rules: keep generated artwork visible instead of cropped. */
.home-top-banner-frame,
.cs-top-banner-frame,
.sdes-industry-banner-frame,
.sdes-page-banner-frame {
    background: #ffffff !important;
    overflow: hidden !important;
}

.cs-top-banner-frame picture,
.sdes-industry-banner-frame picture,
.sdes-page-banner-frame picture,
.cs-top-banner-frame img,
.sdes-industry-banner-frame img,
.sdes-page-banner-frame img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 672 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
}

.sp-hero-img,
.sp-hero-img.sp-hero-img-portrait,
.sp-hero .sp-hero-img,
.sp-hero.sp-page-amazon-product-data-entry .sp-hero-img,
.sp-hero.sp-page-amazon-product-data-entry .sp-hero-img.sp-hero-img-portrait {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.sp-hero-img picture,
.sp-hero-img img,
.sp-hero.sp-page-amazon-product-data-entry .sp-hero-img picture,
.sp-hero.sp-page-amazon-product-data-entry .sp-hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    opacity: 1 !important;
}

/*
 * Landscape heroes for the rewritten Data Entry & Documents pages.
 * These assets are 3:2, so forcing them into the legacy 600x900
 * portrait frame created large white bands above and below the image.
 */
.sp-hero-page-card-entry .sp-hero-img,
.sp-hero-page-excel-data-entry-services .sp-hero-img,
.sp-hero-page-handwritten-data-entry .sp-hero-img,
.sp-hero-page-logistics-data-entry .sp-hero-img,
.sp-hero-page-online-data-entry .sp-hero-img,
.sp-hero-page-document-management .sp-hero-img,
.sp-hero-page-document-indexing .sp-hero-img,
.sp-hero-page-document-scanning .sp-hero-img,
.sp-hero-page-indexing-entry .sp-hero-img,
.sp-hero-page-scanning-services .sp-hero-img {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.sp-hero-page-card-entry .sp-hero-img picture,
.sp-hero-page-card-entry .sp-hero-img img,
.sp-hero-page-excel-data-entry-services .sp-hero-img picture,
.sp-hero-page-excel-data-entry-services .sp-hero-img img,
.sp-hero-page-handwritten-data-entry .sp-hero-img picture,
.sp-hero-page-handwritten-data-entry .sp-hero-img img,
.sp-hero-page-logistics-data-entry .sp-hero-img picture,
.sp-hero-page-logistics-data-entry .sp-hero-img img,
.sp-hero-page-online-data-entry .sp-hero-img picture,
.sp-hero-page-online-data-entry .sp-hero-img img,
.sp-hero-page-document-management .sp-hero-img picture,
.sp-hero-page-document-management .sp-hero-img img,
.sp-hero-page-document-indexing .sp-hero-img picture,
.sp-hero-page-document-indexing .sp-hero-img img,
.sp-hero-page-document-scanning .sp-hero-img picture,
.sp-hero-page-document-scanning .sp-hero-img img,
.sp-hero-page-indexing-entry .sp-hero-img picture,
.sp-hero-page-indexing-entry .sp-hero-img img,
.sp-hero-page-scanning-services .sp-hero-img picture,
.sp-hero-page-scanning-services .sp-hero-img img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
}

@media (max-width: 760px) {
    .sp-hero-img,
    .sp-hero-img.sp-hero-img-portrait,
    .sp-hero .sp-hero-img,
    .sp-hero.sp-page-amazon-product-data-entry .sp-hero-img,
    .sp-hero.sp-page-amazon-product-data-entry .sp-hero-img.sp-hero-img-portrait {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Stable industry banner geometry. Loaded last to resolve earlier image rules. */
main.sdes-industry-service-page > .sdes-industry-banner,
main.sdes-industry-service-page > .sdes-page-banner,
main.sdes-edu-page > .sdes-industry-banner,
main.sdes-edu-page > .sdes-page-banner {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 0 16px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg,#f3f7ff 0%,#ffffff 100%) !important;
    box-sizing: border-box !important;
}

main.sdes-industry-service-page > .sdes-industry-banner > .container,
main.sdes-industry-service-page > .sdes-page-banner > .container,
main.sdes-edu-page > .sdes-industry-banner > .container,
main.sdes-edu-page > .sdes-page-banner > .container {
    width: min(1240px, calc(100% - 48px)) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

main.sdes-industry-service-page .sdes-industry-banner-frame,
main.sdes-industry-service-page .sdes-page-banner-frame,
main.sdes-edu-page .sdes-industry-banner-frame,
main.sdes-edu-page .sdes-page-banner-frame,
main.sdes-industry-service-page .sdes-industry-banner-frame picture,
main.sdes-industry-service-page .sdes-page-banner-frame picture,
main.sdes-edu-page .sdes-industry-banner-frame picture,
main.sdes-edu-page .sdes-page-banner-frame picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 672 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfdbef !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #081d3f !important;
}

main.sdes-industry-service-page .sdes-industry-banner-frame img,
main.sdes-industry-service-page .sdes-page-banner-frame img,
main.sdes-edu-page .sdes-industry-banner-frame img,
main.sdes-edu-page .sdes-page-banner-frame img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1200 / 672 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/*
 * Service hero stock-photo contract — 2026-08-01
 * All service heroes now use local photographs in a balanced 4:3 landscape
 * frame. This replaces the legacy 600x900 portrait box while keeping the text
 * and image columns visually similar in width and overall height.
 */
body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 54px) !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
}

body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img,
body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img.sp-hero-img-portrait,
body:not(.sdes-industry-page) main#main-content .sp-hero.sp-page-amazon-product-data-entry .sp-hero-img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 18px 0 0 auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img picture,
body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img img,
body:not(.sdes-industry-page) main#main-content .sp-hero.sp-page-amazon-product-data-entry .sp-hero-img picture,
body:not(.sdes-industry-page) main#main-content .sp-hero.sp-page-amazon-product-data-entry .sp-hero-img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #e8eef7 !important;
    opacity: 1 !important;
}

/* Close the hero directly after its real content and quick links. */
body:not(.sdes-industry-page) main#main-content .sp-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-text {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 24px !important;
}

body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img,
body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img.sp-hero-img-portrait {
    margin-bottom: 24px !important;
}

@media (max-width: 1180px) {
    body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-inner {
        grid-template-columns: 1fr !important;
    }
    body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img,
    body:not(.sdes-industry-page) main#main-content .sp-hero .sp-hero-img.sp-hero-img-portrait {
        margin: 0 auto 46px !important;
    }
}

@media (max-width: 760px) {
    main.sdes-industry-service-page > .sdes-industry-banner,
    main.sdes-industry-service-page > .sdes-page-banner,
    main.sdes-edu-page > .sdes-industry-banner,
    main.sdes-edu-page > .sdes-page-banner {
        padding: 16px 0 12px !important;
    }
    main.sdes-industry-service-page > .sdes-industry-banner > .container,
    main.sdes-industry-service-page > .sdes-page-banner > .container,
    main.sdes-edu-page > .sdes-industry-banner > .container,
    main.sdes-edu-page > .sdes-page-banner > .container {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
    }
    main.sdes-industry-service-page .sdes-industry-banner-frame,
    main.sdes-industry-service-page .sdes-page-banner-frame,
    main.sdes-edu-page .sdes-industry-banner-frame,
    main.sdes-edu-page .sdes-page-banner-frame,
    main.sdes-industry-service-page .sdes-industry-banner-frame picture,
    main.sdes-industry-service-page .sdes-page-banner-frame picture,
    main.sdes-edu-page .sdes-industry-banner-frame picture,
    main.sdes-edu-page .sdes-page-banner-frame picture {
        height: auto !important;
        border-radius: 16px !important;
    }
    main.sdes-industry-service-page .sdes-industry-banner-frame img,
    main.sdes-industry-service-page .sdes-page-banner-frame img,
    main.sdes-edu-page .sdes-industry-banner-frame img,
    main.sdes-edu-page .sdes-page-banner-frame img {
        width: 100% !important;
        height: auto !important;
    }
}
