/* SSF Global visual system */
/* Match success notifications to the white warning alert text and icon. */
.swal2-popup.swal-bottom-center .swal2-title,
.swal2-popup.swal-bottom-center .swal2-html-container,
.swal2-popup.swal-bottom-center .swal2-icon.swal2-success {
    color: #fff;
}
.swal2-popup.swal-bottom-center .swal2-success .swal2-success-ring {
    border-color: #fff !important;
}
.swal2-popup.swal-bottom-center .swal2-success [class^="swal2-success-line"] {
    background-color: #fff !important;
}

.bpo-site {
    --bpo-ink: #3b414f;
    --bpo-soft: #f0f7f4;
    --bpo-green: #4ebd94;
    background: #fff;
    overflow-x: clip
}

.bpo-site #smooth-wrapper {
    position: relative !important;
    overflow: visible !important;
    inset: auto !important
}

.bpo-site #smooth-content {
    padding-top: 0 !important;
    transform: none !important
}

.bpo-wrap {
    width: min(1280px, calc(100% - 112px))
}

.bpo-section {
    padding-top: 88px;
    padding-bottom: 88px
}

.bpo-wrap h2 {
    font-size: clamp(36px, 4.2vw, 60px);
    letter-spacing: -2.8px;
    line-height: 1.08
}

.bpo-wrap em {
    color: #238765
}

.bpo-eyebrow {
    font-size: 11px;
    letter-spacing: 2.1px;
    font-weight: 600;
    margin-bottom: 25px
}

.bpo-button {
    border-radius: 100px;
    padding: 14px 24px;
    font-size: 14px;
    gap: 30px;
    position: relative;
    overflow: hidden;
    transition: background .3s, transform .3s, box-shadow .3s
}

.bpo-button:hover,
.bpo-button:focus-visible,
.bpo-button.is-active {
    background: #68caa6;
    box-shadow: 0 10px 25px #36ad8125;
    transform: translateY(-3px)
}

.bpo-button>span:last-child {
    transition: transform .3s
}

.bpo-button:hover>span:last-child,
.bpo-button:focus-visible>span:last-child,
.bpo-button.is-active>span:last-child {
    transform: translate(3px, -3px)
}

.bpo-text-link {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 1px solid #709286;
    transition: color .25s, letter-spacing .25s
}

.bpo-text-link:hover {
    color: #2b8966;
    letter-spacing: .2px
}

.bpo-header {
    position: sticky;
    top: 0;
    min-height: 88px;
    border: 0;
    box-shadow: 0 2px 20px #1f232c08;
    transition: background .35s, box-shadow .35s, backdrop-filter .35s,
        left .45s cubic-bezier(.22, 1, .36, 1), right .45s cubic-bezier(.22, 1, .36, 1)
}

.bpo-nav {
    min-height: 88px
}

.bpo-logo {
    position: relative;
    display: block;
    width: 155px
}

.bpo-logo img {
    width: 155px;
    max-height: 56px
}

.mx-logo-light {
    display: none
}

.bpo-nav nav {
    gap: 29px
}

.bpo-nav nav a {
    font-size: 14px;
    /* font-weight: 500; */
    font-weight: 700;
    transition: color .25s
}

.bpo-nav nav>a:not(.bpo-button):hover,
.bpo-nav nav>a:not(.bpo-button):focus-visible,
.mx-nav-service>summary:hover,
.mx-nav-service>summary:focus-visible {
    color: #2e906c;
    text-decoration: underline;
    text-decoration-color: #4ebd94;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px
}

.bpo-nav nav>a[aria-current="page"]:not(.bpo-button),
.mx-service-mega.is-active>summary {
    color: #238765;
    text-decoration: underline;
    text-decoration-color: #4ebd94;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px
}

.bpo-nav .bpo-button.is-active {
    background: #238765;
    border-color: #238765;
    box-shadow: 0 8px 22px #23876530;
    text-decoration: none
}

.bpo-nav .bpo-button.is-active:hover,
.bpo-nav .bpo-button.is-active:focus-visible,
.bpo-nav .bpo-button[aria-current="page"] {
    text-decoration: none
}

.bpo-mobile-nav nav>a[aria-current="page"],
.mx-mobile-service-group.is-active>summary {
    color: #238765;
    background: #edf7f3;
    font-weight: 700;
    border-radius: 8px
}

.bpo-home .bpo-header:not(.is-scrolled) .bpo-nav nav>a[aria-current="page"]:not(.bpo-button),
.bpo-home .bpo-header:not(.is-scrolled) .mx-service-mega.is-active>summary {
    color: #4ebd94
}

.mx-nav-service {
    position: relative;
    padding: 30px 0
}

.mx-nav-service>a>span {
    margin-left: 5px;
    font-size: 12px
}

.mx-nav-panel {
    position: absolute;
    left: -90px;
    top: 100%;
    width: 410px;
    background: #fff;
    border: 1px solid #dbe8e3;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 20px 70px #1e222c22;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s
}

.mx-nav-service:hover .mx-nav-panel,
.mx-nav-service:focus-within .mx-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none
}

.bpo-nav .mx-nav-panel>a {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 9px;
    color: var(--bpo-ink) !important
}

.mx-nav-panel>a:hover {
    background: #e7f3ef
}

.mx-nav-panel i {
    padding-top: 7px;
    color: #2e916d;
    font-size: 20px
}

.mx-nav-panel small {
    display: block;
    font-size: 11px;
    color: #6a8078;
    margin-top: 4px
}

.mx-nav-panel b {
    margin-left: auto
}

.bpo-site .bpo-header {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background: transparent;
    box-shadow: none;
    /* border-radius: 18px; */
    border-radius: 50px;
    z-index: 100
}

.bpo-site .bpo-header .bpo-wrap {
    width: calc(100% - 90px);
    max-width: 1420px;
    transition: width .45s cubic-bezier(.22, 1, .36, 1)
}

.bpo-home .bpo-nav nav>a:not(.bpo-button),
.bpo-home .mx-nav-service>a {
    color: #fff
}

.bpo-home .mx-logo-light {
    display: block
}

.bpo-home .mx-logo-dark:has(+.mx-logo-light) {
    display: none
}

.bpo-site .bpo-header.is-scrolled {
    left: max(56px, calc((100% - 1280px) / 2));
    right: max(56px, calc((100% - 1280px) / 2));
    background: #ffffffed;
    backdrop-filter: blur(18px);
    box-shadow: 0 5px 35px #1e222c12
}

.bpo-site .bpo-header.is-scrolled .bpo-wrap {
    width: calc(100% - 56px)
}

@media (max-width: 1100px) {
    .bpo-site .bpo-header.is-scrolled {
        left: 32px;
        right: 32px
    }
}

@media (max-width: 767px) {
    .bpo-site .bpo-header.is-scrolled {
        left: 10px;
        right: 10px
    }
}

@media (prefers-reduced-motion: reduce) {

    .bpo-site .bpo-header,
    .bpo-site .bpo-header .bpo-wrap {
        transition: none
    }
}

.bpo-site .bpo-header.is-scrolled .bpo-nav nav>a:not(.bpo-button),
.bpo-site .bpo-header.is-scrolled .mx-nav-service>a {
    color: var(--bpo-ink)
}

.bpo-site .bpo-header.is-scrolled .bpo-nav nav>a[aria-current="page"]:not(.bpo-button),
.bpo-site .bpo-header.is-scrolled .mx-service-mega.is-active>summary {
    color: #4ebd94
}

.bpo-site .bpo-header.is-scrolled .mx-logo-dark {
    display: block
}

.bpo-site .bpo-header.is-scrolled .mx-logo-light {
    display: none
}

.mx-hero {
    margin: 16px 16px 0;
    border-radius: 28px;
    min-height: 850px;
    /* height: calc(100svh - 32px); */
    height: calc(60svh - 32px);
    max-height: 1100px;
    position: relative;
    overflow: hidden;
    background: #303744;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.mx-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    animation: mx-hero-zoom 16s ease-out both
}

.mx-hero-shade {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(90deg, #14161cf2 3%, #191d25d9 35%, #191c2474 75%, #16192040), linear-gradient(0deg, #13161cbb, transparent 55%) */
    background: linear-gradient(90deg, #14161cf2 3%, #191d25d9 35%, #191c2474 75%, #16192040), linear-gradient(0deg, #191c2474, #191c2474 55%);
}

.mx-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 90px;
    padding-bottom: 150px
}

.mx-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #c1e2d640;
    background: #ffffff0d;
    border-radius: 30px;
    padding: 9px 15px;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: inherit
}

.mx-pill>span {
    width: 6px;
    height: 6px;
    background: #4ebd94;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #4ebd9415
}

.mx-hero h1 {
    font-size: clamp(64px, 6.3vw, 96px);
    line-height: .99;
    letter-spacing: -5px;
    font-weight: 500;
    color: #fff;
    margin: 30px 0 28px;
    max-width: 850px
}

.mx-hero h1 em {
    font-style: normal;
    color: var(--bpo-green);
    /* color: #9ed2bf */
}

.mx-hero-content>p {
    color: #dfe7e4;
    font-size: 17px;
    line-height: 1.8;
    max-width: 540px
}

.mx-hero .bpo-actions {
    margin-top: 32px;
    gap: 16px
}

.mx-hero .bpo-button {
    padding: 10px 22px 10px 10px;
    gap: 16px;
    background: #4ebd94
}

.mx-btn-arrow {
    background: #3b414f;
    color: #fff;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 100%;
    font-size: 21px
}

.mx-ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    border: 1px solid #ffffff55;
    background: #ffffff0a;
    padding: 17px 24px;
    border-radius: 50px;
    font-size: 14px;
    color: #fff;
    transition: background .3s
}

.mx-ghost-button:hover {
    color: #fff;
    background: #ffffff20
}

.mx-hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    display: flex;
    align-items: center;
    gap: 70px;
    border-top: 1px solid #ffffff30;
    padding-top: 25px;
    z-index: 2
}

.mx-hero-bottom>div {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.mx-hero-bottom strong {
    font-size: 29px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1px
}

.mx-hero-bottom>div>span {
    color: #c1d2cc;
    font-size: 12px
}

.mx-scroll {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 2px;
    color: #dfefe9;
    display: flex;
    align-items: center;
    gap: 24px
}

.mx-scroll>span {
    border: 1px solid #ffffff50;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    animation: mx-nudge 2.5s infinite
}

.mx-orbit {
    position: absolute;
    right: -170px;
    top: 150px;
    width: 650px;
    height: 650px;
    border: 1px solid #c2e2d61c;
    border-radius: 50%;
    pointer-events: none
}

.mx-orbit:before,
.mx-orbit:after {
    content: '';
    position: absolute;
    border: 1px solid #c2e2d614;
    border-radius: 50%;
    inset: 55px
}

.mx-orbit:after {
    inset: 110px
}

.mx-ticker {
    overflow: hidden;
    border-bottom: 1px solid #d8e6e1;
    padding: 25px 0;
    background: #f0f7f4
}

.mx-ticker>div {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0;
    animation: mx-ticker 42s linear infinite
}

.mx-ticker-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 0 0 auto;
    min-width: 100vw;
    gap: 36px;
    padding-right: 36px;
}

.mx-ticker span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.7px;
    color: #456056;
    white-space: nowrap
}

.mx-ticker b {
    color: #3ab689;
    font-size: 22px
}

.mx-statement-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(42px, 5vw, 72px);
    border: 1px solid #d9e9e3;
    border-radius: 28px;
    background: linear-gradient(135deg, #f6fbf9 0%, #edf7f3 100%)
}

.mx-statement-panel::after {
    content: '';
    position: absolute;
    right: -110px;
    bottom: -150px;
    width: 340px;
    height: 340px;
    border: 1px solid #4ebd9424;
    border-radius: 50%;
    /* box-shadow: 0 0 0 52px #4ebd9408, 0 0 0 104px #4ebd9406; */
    box-shadow: 0 0 0 52px #4ebd94, 0 0 0 104px #3b414f;
    pointer-events: none
}

.mx-statement-panel>* {
    position: relative;
    z-index: 1
}

.mx-statement .bpo-eyebrow {
    color: #238765
}

.mx-statement h2 {
    max-width: 1120px;
    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1.18;
    letter-spacing: -2.7px
}

.mx-statement-panel h2 {
    max-width: 1050px;
    margin: 0;
    line-height: 1.12
}

.mx-statement-bottom {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 50px
}

.mx-statement-panel .mx-statement-bottom {
    gap: 32px;
    max-width: 820px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #cfe2db;
    position: relative;
    z-index: 1
}

.mx-round-mark {
    font-size: 75px;
    line-height: 1;
    color: #57c49c;
    width: 100px;
    flex-shrink: 0
}

.mx-statement-bottom p {
    max-width: 620px;
    margin: 0;
    font-size: 16px
}

.mx-circle-link {
    margin-left: auto;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: #e9f5f1;
    border: 1px solid #c3dfd5;
    border-radius: 50%;
    font-size: 28px;
    color: #292e3b;
    transition: .3s
}

.mx-statement-panel .mx-circle-link {
    background: #fff
}

.mx-circle-link:hover {
    background: #4ebd94;
    transform: rotate(45deg);
    color: #292e3b
}

.mx-work-section {
    background: #f0f7f4;
    overflow: hidden
}

.mx-carousel-controls {
    display: flex;
    gap: 10px
}

.mx-carousel-controls[hidden] {
    display: none !important
}

.mx-carousel-controls button {
    border: 1px solid #bcd6cc;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: #303645;
    font-size: 21px;
    transition: .25s
}

.mx-carousel-controls button:hover {
    background: #4ebd94;
    border-color: #4ebd94
}

.mx-carousel {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 0 15px;
    overscroll-behavior-x: contain
}

.mx-carousel::-webkit-scrollbar {
    display: none
}

.mx-work-card {
    flex: 0 0 calc(50% - 13px);
    min-width: 0;
    scroll-snap-align: start;
    color: #222732
}

.mx-work-photo {
    height: 330px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    background: #cbe1d9
}

.mx-work-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .6, .3, 1)
}

.mx-work-card:hover img {
    transform: scale(1.065)
}

.mx-work-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #14161c60, transparent 60%)
}

.mx-work-photo>span {
    position: absolute;
    left: 24px;
    top: 24px;
    background: #fffef2e8;
    border-radius: 30px;
    padding: 8px 13px;
    font-size: 9px;
    letter-spacing: 1.3px;
    z-index: 1
}

.mx-work-photo>i {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #282d3a;
    font-size: 22px;
    font-style: normal;
    z-index: 1;
    transition: .3s
}

.mx-work-card:hover .mx-work-photo>i {
    background: #4ebd94;
    transform: rotate(45deg)
}

.mx-work-copy {
    padding: 25px 4px 0
}

.mx-work-copy>span {
    font-size: 11px;
    color: #5f8175
}

.mx-work-copy h3 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.2;
    color: #222732;
    margin: 12px 0
}

.mx-work-copy p {
    font-size: 14px;
    margin: 0;
    max-width: 470px
}

.mx-caption {
    font-size: 11px;
    margin: 28px 0 0 !important;
    color: #6d837b !important
}

.mx-showcase {
    margin: 16px;
    border-radius: 24px;
    background: #262c38;
    color: #fff;
    position: relative;
    overflow: hidden
}

.mx-showcase .bpo-eyebrow {
    color: #99cfbb
}

.mx-showcase .bpo-section-heading>p {
    color: #b4cbc3
}

.mx-showcase em {
    color: #98cfbb
}

.mx-showcase-layout {
    display: grid;
    grid-template-columns: .85fr 1.3fr;
    gap: 60px;
    align-items: stretch
}

.mx-service-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.mx-service-tabs button {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 31px 0;
    border: 0;
    border-bottom: 1px solid #ffffff25;
    background: transparent;
    text-align: left;
    color: #98aea6;
    transition: color .3s, padding .3s
}

.mx-service-tabs button>span {
    font-size: 11px;
    align-self: start;
    padding-top: 4px
}

.mx-service-tabs strong {
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -.7px;
    line-height: 1.25
}

.mx-service-tabs i {
    margin-left: auto;
    font-style: normal;
    color: #97ceba;
    font-size: 22px;
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: .3s
}

.mx-service-tabs button[aria-selected=true],
.mx-service-tabs button:hover {
    color: #fff;
    padding-left: 10px
}

.mx-service-tabs button[aria-selected=true] i {
    opacity: 1;
    transform: none
}

.mx-service-panels article {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 500px;
    height: 100%;
    animation: mx-panel-in .5s ease both
}

.mx-service-panels article[hidden] {
    display: none
}

.mx-service-panels article>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mx-service-panels article:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #121419f5, #15181f60 65%, #14161c15)
}

.mx-panel-copy {
    position: relative;
    z-index: 1;
    padding: 35px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start
}

.mx-panel-copy .mx-pill {
    margin-bottom: 18px;
    font-size: 9px
}

.mx-panel-copy h3 {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 18px
}

.mx-panel-copy p {
    font-size: 14px;
    color: #cbdfd8;
    max-width: 470px
}

.mx-panel-copy>a {
    font-size: 12px;
    color: #daeee7;
    border-top: 1px solid #ffffff40;
    padding-top: 18px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 14px
}

.mx-human {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.mx-human-image {
    position: relative;
    height: 650px;
    border-radius: 110px 18px 18px 18px
}

.mx-human-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.mx-floating-label {
    position: absolute;
    bottom: 35px;
    left: 30px;
    right: 30px;
    background: #ffffffeb;
    backdrop-filter: blur(12px);
    border: 1px solid #ffffff70;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 23px;
    font-size: 14px;
    color: #2b313f;
    box-shadow: 0 10px 30px #20242d18
}

.mx-image-stamp {
    position: absolute;
    right: -25px;
    top: 35px;
    background: #4ebd94;
    transform: rotate(8deg);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 1px;
    color: #292f3c;
    font-weight: 600
}

.mx-image-stamp i {
    font-size: 25px;
    line-height: 1.4;
    font-style: normal
}

.mx-human-copy>p {
    font-size: 16px
}

.mx-feature-row {
    display: flex;
    gap: 20px;
    border-top: 1px solid #d5e4df;
    padding-top: 22px;
    margin-top: 22px
}

.mx-feature-row>i {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #e4f2ed;
    color: #318c6b;
    flex-shrink: 0
}

.mx-feature-row h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 7px;
    color: #252a35
}

.mx-feature-row p {
    font-size: 13px;
    margin: 0
}

.mx-human-copy>.bpo-text-link {
    margin-top: 30px
}

.mx-about-section {
    background: #f0f7f4
}

.mx-about-heading {
    text-align: center;
    margin-bottom: 50px
}

.mx-about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 22px
}

.mx-about-photo {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    min-height: 380px
}

.mx-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.mx-about-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #15181fc9, transparent 75%)
}

.mx-about-photo>span {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #fff;
    font-size: 26px;
    letter-spacing: -.7px;
    line-height: 1.25;
    z-index: 1
}

.mx-about-tile {
    border-radius: 18px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-height: 380px
}

.mx-about-tile>span {
    font-size: 9px;
    letter-spacing: 1.5px
}

.mx-lime-tile {
    background: #4ebd94;
    color: #21252f
}

.mx-about-tile>strong {
    font-size: 120px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -6px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mx-about-tile>strong>i {
    font-size: 38px;
    font-style: normal;
    letter-spacing: 0
}

.mx-about-tile h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: inherit;
    letter-spacing: -.6px;
    margin-top: auto;
    margin-bottom: 0
}

.mx-dark-tile {
    background: #303744;
    color: #fff
}

.mx-dark-tile>i {
    font-size: 52px;
    color: #96cdb9;
    margin: 45px 0
}

.mx-dark-tile>a {
    color: #96cdb9;
    font-size: 11px;
    margin-top: 24px
}

.mx-outline-button {
    border: 1px solid #c5d9d2;
    border-radius: 50px;
    padding: 15px 25px;
    white-space: nowrap;
    color: #303644;
    font-size: 13px;
    transition: .3s
}

.mx-outline-button:hover {
    background: #3b414f;
    color: #fff;
    border-color: #3b414f
}

.mx-photo-services {
    gap: 24px;
    grid-template-columns: 1.2fr 1fr
}

.mx-photo-service {
    position: relative;
    min-height: 470px;
    padding: 0 !important;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #1f232c;
    transition: transform .5s, box-shadow .5s
}

.mx-photo-service:nth-child(3) {
    grid-column: 2;
    grid-row: 2
}

.mx-photo-service:nth-child(4) {
    grid-column: 1;
    grid-row: 2
}

.mx-photo-service>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s, filter .8s
}

.mx-photo-service:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #15171eeb 3%, #171a2170 65%, #181b2320)
}

.mx-photo-service-content {
    position: relative;
    z-index: 1;
    padding: 35px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 470px;
    justify-content: end
}

.mx-photo-service .bpo-card-top {
    margin-bottom: auto;
    padding-bottom: 65px;
    color: #dbeae4;
    gap: 20px
}

.mx-photo-service .bpo-card-top>span {
    color: #fff;
    font-size: 10px;
    letter-spacing: .4px
}

.mx-photo-service .bpo-card-top>i {
    color: #b9ded0;
    font-size: 26px
}

.mx-photo-service h3 {
    color: #fff;
    font-size: 34px;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 18px;
    font-weight: 400;
    max-width: 350px
}

.mx-photo-service p {
    color: #cfdfd9;
    font-size: 14px;
    max-width: 460px;
    margin: 0 0 25px
}

.mx-photo-service .bpo-card-link {
    color: #fff;
    border-color: #ffffff40;
    font-weight: 400;
    font-size: 12px;
    margin: 0
}

.mx-photo-service .bpo-card-link>span {
    font-size: 20px;
    transition: transform .3s
}

.mx-photo-service:hover>img {
    transform: scale(1.07);
    filter: saturate(1.08)
}

.mx-photo-service:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px #20242d20
}

.mx-photo-service:hover .bpo-card-link>span {
    transform: translate(4px, -4px)
}

.mx-industries {
    background: #f0f7f4
}

.mx-industry-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: center
}

.mx-industry-list button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px;
    padding: 25px 0;
    border: 0;
    border-bottom: 1px solid #c9dfd7;
    background: transparent;
    font-size: 21px;
    text-align: left;
    color: #728880;
    transition: .3s
}

.mx-industry-list button>span {
    font-size: 10px
}

.mx-industry-list button>i {
    font-size: 20px;
    font-style: normal;
    margin-left: auto;
    opacity: 0;
    transition: .3s
}

.mx-industry-list button[aria-selected=true],
.mx-industry-list button:hover {
    color: #222731;
    padding-left: 14px
}

.mx-industry-list button[aria-selected=true]>i {
    opacity: 1
}

.mx-industry-photo {
    height: 560px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #21252f
}

.mx-industry-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s, transform .7s
}

.mx-industry-photo:hover>img {
    transform: scale(1.04)
}

.mx-industry-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #14171df5, transparent)
}

.mx-industry-photo>div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 35px;
    z-index: 1;
    color: #fff
}

.mx-industry-photo>div>span {
    font-size: 9px;
    letter-spacing: 1.7px;
    color: #b4dccd
}

.mx-industry-photo h3 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1.2;
    margin: 20px 0;
    color: #fff
}

.mx-industry-photo p {
    font-size: 14px;
    color: #cedfd9
}

.mx-industry-photo a {
    font-size: 12px;
    color: #a9d7c6
}

.mx-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px
}

.mx-process-grid article {
    border-top: 1px solid #bcd8ce;
    padding-top: 25px;
    position: relative;
    transition: transform .3s
}

.mx-process-grid article:hover {
    transform: translateY(-7px)
}

.mx-process-grid article>span {
    font-size: 64px;
    letter-spacing: -3px;
    line-height: 1;
    color: #9cc4b5;
    font-weight: 400;
    transition: color .3s
}

.mx-process-grid article:hover>span {
    color: #2f936e
}

.mx-process-grid article>i {
    float: right;
    color: #349974;
    font-size: 23px;
    font-style: normal
}

.mx-process-grid h3 {
    font-size: 26px;
    color: #292e3b;
    font-weight: 500;
    letter-spacing: -.7px;
    margin: 30px 0 14px
}

.mx-process-grid p {
    font-size: 14px
}

.mx-wide-photo {
    margin: 0 16px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center
}

.mx-wide-photo>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mx-wide-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #171a21ed, #20242e80, #22263040)
}

.mx-wide-photo>.bpo-wrap {
    position: relative;
    z-index: 1;
    padding: 85px 0;
    color: #fff
}

.mx-wide-photo h2 {
    font-size: clamp(42px, 5vw, 72px);
    margin: 30px 0 35px;
    max-width: 800px
}

.mx-wide-photo em {
    color: #a0d3c0
}

.mx-contact-section {
    background: #edf7f3;
    border-top: 1px solid #daebe5
}

.mx-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: center
}

.mx-contact-grid>div>p {
    max-width: 500px;
    font-size: 15px
}

.mx-direct-contact {
    margin-top: 40px
}

.mx-direct-contact>a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid #cbe2da;
    color: #313847
}

.mx-direct-contact>a>i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dbeee7
}

.mx-direct-contact>a>span {
    font-size: 11px;
    color: #5e7e72
}

.mx-direct-contact strong {
    display: block;
    font-size: 17px;
    color: #2e3442;
    font-weight: 500;
    margin-top: 6px
}

.mx-direct-contact b {
    margin-left: auto
}

.mx-enquiry-card {
    background: #fff;
    border: 1px solid #d7e9e2;
    border-radius: 20px;
    padding: 42px;
    box-shadow: 0 15px 60px #2d334110
}

.mx-enquiry-card .mx-pill {
    color: #3b856a;
    border-color: #c7e4d9;
    background: #eff7f4;
    letter-spacing: 1px
}

.mx-enquiry-card h3 {
    font-size: 37px;
    font-weight: 400;
    letter-spacing: -1.4px;
    line-height: 1.2;
    color: #2d3340;
    margin: 25px 0 16px
}

.mx-enquiry-card>p {
    font-size: 14px;
    margin-bottom: 30px
}

.mx-enquiry-card label {
    display: block;
    font-size: 12px;
    color: #394153;
    margin-bottom: 12px
}

.mx-enquiry-card select {
    width: 100%;
    height: 58px;
    border: 1px solid #cbdfd8;
    background: #fff;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    color: #2b313f;
    display: block !important
}

.mx-enquiry-card .nice-select {
    display: none !important
}

.mx-enquiry-card .bpo-button {
    margin-top: 22px;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px
}

.mx-enquiry-note {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #719085;
    font-size: 11px;
    margin-top: 26px
}

.bpo-footer {
    padding-top: 80px;
    border-radius: 24px 24px 0 0
}

.bpo-footer-grid>div>a {
    transition: color .2s, transform .2s
}

.bpo-footer-grid>div>a:hover {
    color: #4ebd94 !important;
    transform: translateX(3px)
}

.bpo-page-heading {
    background: radial-gradient(ellipse at top right, #e2f1ec, transparent 65%);
    border-radius: 0 0 30px 30px;
    padding-top: 95px;
    padding-bottom: 95px
}

.bpo-detail-hero {
    border-radius: 0 0 28px 28px;
    padding: 85px 0
}

.bpo-detail-visual img {
    border-radius: 22px 90px 22px 22px
}

.bpo-detail-visual>span {
    border-radius: 12px;
    box-shadow: 0 12px 35px #22273212
}

.bpo-section-nav {
    position: sticky;
    top: 88px;
    z-index: 20;
    background: #fffffff0;
    backdrop-filter: blur(14px)
}

.bpo-scope-card {
    border-radius: 18px;
    transition: transform .4s, box-shadow .4s, border-color .4s
}

.bpo-scope-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px #2d334010;
    border-color: #86bda9
}

.bpo-deliverables {
    border-radius: 18px
}

.bpo-connection-grid article,
.bpo-reporting-grid article {
    transition: transform .3s
}

.bpo-connection-grid article:hover,
.bpo-reporting-grid article:hover {
    transform: translateY(-5px)
}

.bpo-faq details {
    transition: background .3s, padding .3s
}

.bpo-faq details[open] {
    background: #eff8f5;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px
}

.bpo-faq summary::marker {
    color: #3b9f7a
}

.bpo-about-image {
    border-radius: 24px 80px 24px 24px
}

.bpo-site section[id] {
    scroll-margin-top: 110px
}

.bpo-site .bpo-detail-hero~section[id] {
    scroll-margin-top: 175px
}

.bpo-mobile-nav>summary {
    list-style: none
}

.bpo-mobile-nav>summary::-webkit-details-marker {
    display: none
}

.bpo-mobile-nav>summary i {
    margin-left: 10px
}

.bpo-mobile-nav nav {
    border-radius: 0 0 18px 18px;
    max-height: calc(100svh - 100px);
    overflow: auto
}

.bpo-mobile-nav nav .mx-mobile-sub {
    font-size: 12px;
    padding-left: 26px;
    color: #50806e
}

.bpo-home .bpo-mobile-nav>summary {
    color: #fff;
    border-color: #ffffff60
}

.bpo-site .bpo-header.is-scrolled .bpo-mobile-nav>summary {
    color: #222731;
    border-color: #bdd8ce
}

.bpo-home .bpo-mobile-nav nav a {
    color: #222731 !important
}

.mx-motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .6, .3, 1), transform .8s cubic-bezier(.2, .6, .3, 1);
    transition-delay: var(--reveal-delay, 0ms)
}

.mx-motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none
}

.mx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #56c99f;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 200;
    pointer-events: none
}

@keyframes mx-ticker {
    to {
        transform: translateX(-50%)
    }
}

@keyframes mx-nudge {
    50% {
        transform: translateY(5px)
    }
}

@keyframes mx-hero-zoom {
    from {
        transform: scale(1.08)
    }

    to {
        transform: scale(1)
    }
}

@keyframes mx-panel-in {
    from {
        opacity: .35;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(min-width:1800px) {
    .mx-hero-content {
        max-width: 1400px
    }

    .mx-hero h1 {
        font-size: 108px
    }

    .mx-hero {
        min-height: 900px
    }
}

@media(max-width:1100px) {
    .bpo-wrap {
        width: calc(100% - 64px)
    }

    .bpo-section {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .bpo-nav nav {
        gap: 19px
    }

    .mx-hero {
        min-height: 800px
    }

    .mx-hero h1 {
        font-size: 80px
    }

    .mx-human {
        gap: 50px
    }

    .mx-human-image {
        height: 600px
    }

    .mx-showcase-layout {
        gap: 35px
    }

    .mx-service-tabs strong {
        font-size: 22px
    }

    .mx-about-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 15px
    }

    .mx-about-tile {
        padding: 23px
    }

    .mx-about-tile h3 {
        font-size: 20px
    }

    .mx-about-tile>strong {
        font-size: 100px
    }

    .mx-industry-layout {
        gap: 40px
    }

    .mx-contact-grid {
        gap: 50px
    }

    .mx-work-photo {
        height: 280px
    }
}

@media(max-width:900px) {
    .bpo-nav>nav {
        display: none
    }

    .bpo-mobile-nav {
        display: block
    }

    .bpo-nav {
        min-height: 78px
    }

    .bpo-header {
        min-height: 78px
    }

    .bpo-mobile-nav nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 18px 22px;
        box-shadow: 0 20px 30px #21263018;
        gap: 0;
        align-items: stretch
    }

    .bpo-mobile-nav nav a {
        padding: 12px
    }

    .bpo-mobile-nav>summary {
        cursor: pointer;
        border: 1px solid #bdd8ce;
        padding: 9px 16px;
        border-radius: 50px;
        font-size: 13px
    }

    .bpo-section-nav {
        top: 78px
    }

    .mx-about-grid {
        grid-template-columns: 1fr 1fr
    }

    .mx-about-photo {
        grid-column: 1/-1;
        min-height: 350px
    }

    .mx-about-tile {
        min-height: 320px
    }

    .mx-showcase-layout {
        grid-template-columns: 1fr
    }

    .mx-service-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 25px
    }

    .mx-service-tabs button {
        padding: 20px 0
    }

    .mx-service-tabs strong {
        font-size: 20px
    }

    .mx-service-panels article,
    .mx-panel-copy {
        min-height: 450px
    }

    .mx-process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .mx-human {
        gap: 35px
    }

    .mx-human-image {
        height: 570px
    }

    .mx-image-stamp {
        width: 95px;
        height: 95px;
        right: -15px;
        font-size: 11px
    }

    .mx-floating-label {
        left: 18px;
        right: 18px;
        padding: 18px;
        font-size: 12px
    }

    .mx-photo-service-content {
        padding: 26px
    }

    .mx-industry-list button {
        font-size: 18px
    }

    .mx-industry-photo {
        height: 520px
    }

    .mx-enquiry-card {
        padding: 30px
    }
}

@media(max-width:767px) {
    .bpo-wrap {
        width: calc(100% - 40px)
    }

    .bpo-section {
        padding-top: 52px;
        padding-bottom: 52px
    }

    .bpo-wrap h2 {
        font-size: 38px;
        letter-spacing: -1.6px;
        line-height: 1.1
    }

    .bpo-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
        margin-bottom: 20px
    }

    .bpo-site .bpo-header {
        top: 10px;
        left: 10px;
        right: 10px;
        border-radius: 16px
    }

    .bpo-site .bpo-header .bpo-wrap {
        width: calc(100% - 30px)
    }

    .bpo-logo,
    .bpo-logo img {
        width: 125px
    }

    .mx-hero {
        margin: 8px 8px 0;
        min-height: 820px;
        height: calc(100svh - 16px);
        max-height: 1000px;
        border-radius: 20px
    }

    .mx-hero-content {
        width: calc(100% - 44px);
        padding-top: 105px;
        padding-bottom: 180px
    }

    .mx-hero h1 {
        font-size: 58px;
        letter-spacing: -3px;
        line-height: 1.02;
        margin: 25px 0
    }

    .mx-hero-content>p {
        font-size: 14px;
        max-width: 390px;
        line-height: 1.85
    }

    .mx-hero-bg {
        object-position: 60% center
    }

    .mx-hero-shade {
        background: linear-gradient(90deg, #14171dea, #171a20ab), linear-gradient(0deg, #13161cbf, transparent)
    }

    .mx-hero .bpo-actions {
        gap: 12px;
        flex-direction: column;
        align-items: start;
        margin-top: 25px
    }

    .mx-hero .bpo-button {
        font-size: 12px
    }

    .mx-ghost-button {
        font-size: 12px;
        padding: 14px 20px
    }

    .mx-hero .mx-pill {
        font-size: 8px;
        letter-spacing: .8px;
        padding: 9px 12px
    }

    .mx-hero-bottom {
        bottom: 25px;
        width: calc(100% - 44px);
        gap: 30px;
        align-items: start;
        padding-top: 20px;
        flex-wrap: wrap
    }

    .mx-hero-bottom strong {
        font-size: 24px
    }

    .mx-hero-bottom>div>span {
        font-size: 9px
    }

    .mx-scroll {
        display: none
    }

    .mx-orbit {
        width: 400px;
        height: 400px;
        right: -250px;
        top: 140px
    }

    .mx-ticker {
        padding: 20px 0
    }

    .mx-ticker-group {
        gap: 25px;
        padding-right: 25px;
    }

    .mx-ticker span {
        font-size: 9px
    }

    .mx-statement h2 {
        font-size: 35px;
        letter-spacing: -1.5px
    }

    .mx-statement-panel {
        padding: 32px 24px;
        border-radius: 20px
    }

    .mx-statement-panel::after {
        right: -210px;
        bottom: -210px
    }

    .mx-statement-bottom {
        gap: 20px;
        margin-top: 30px
    }

    .mx-statement-panel .mx-statement-bottom {
        margin-top: 26px;
        padding-top: 22px
    }

    .mx-round-mark {
        width: 36px;
        font-size: 40px;
        align-self: start
    }

    .mx-statement-bottom p {
        font-size: 13px
    }

    .mx-circle-link {
        width: 44px;
        height: 44px;
        font-size: 22px
    }

    .mx-work-section .bpo-section-heading {
        display: flex;
        align-items: end;
        gap: 20px
    }

    .mx-work-section .bpo-section-heading h2 {
        font-size: 33px;
        margin-bottom: 0
    }

    .mx-carousel-controls {
        gap: 6px
    }

    .mx-carousel-controls button {
        width: 36px;
        height: 36px;
        font-size: 17px
    }

    .mx-carousel {
        gap: 16px
    }

    .mx-work-card {
        flex-basis: 100%
    }

    .mx-work-photo {
        height: 240px;
        border-radius: 14px
    }

    .mx-work-photo>span {
        left: 16px;
        top: 16px;
        font-size: 8px
    }

    .mx-work-photo>i {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px
    }

    .mx-work-copy {
        padding-top: 20px
    }

    .mx-work-copy h3 {
        font-size: 25px;
        letter-spacing: -.7px
    }

    .mx-work-copy p {
        font-size: 12px
    }

    .mx-caption {
        font-size: 10px
    }

    .mx-showcase {
        margin: 8px;
        border-radius: 20px
    }

    .mx-showcase .bpo-wrap {
        width: calc(100% - 36px)
    }

    .mx-service-tabs {
        gap: 0 15px
    }

    .mx-service-tabs button {
        padding: 20px 0;
        gap: 10px;
        align-items: start
    }

    .mx-service-tabs strong {
        font-size: 16px;
        letter-spacing: -.4px
    }

    .mx-service-tabs button>span {
        font-size: 9px;
        padding-top: 3px
    }

    .mx-service-tabs i {
        display: none
    }

    .mx-service-tabs button[aria-selected=true],
    .mx-service-tabs button:hover {
        padding-left: 0
    }

    .mx-service-tabs button[aria-selected=true] {
        border-color: #4ebd94
    }

    .mx-panel-copy {
        padding: 25px;
        min-height: 430px
    }

    .mx-service-panels article {
        min-height: 430px
    }

    .mx-panel-copy h3 {
        font-size: 31px
    }

    .mx-panel-copy p {
        font-size: 12px
    }

    .mx-human {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .mx-human-image {
        height: 440px;
        margin-right: 10px;
        border-top-left-radius: 75px
    }

    .mx-image-stamp {
        right: -12px;
        top: 25px
    }

    .mx-human-copy>p {
        font-size: 14px
    }

    .mx-feature-row p {
        font-size: 12px
    }

    .mx-feature-row h3 {
        font-size: 17px
    }

    .mx-about-heading {
        text-align: left;
        margin-bottom: 30px
    }

    .mx-about-grid {
        gap: 14px
    }

    .mx-about-photo {
        min-height: 290px
    }

    .mx-about-photo>span {
        font-size: 24px;
        left: 23px;
        bottom: 23px
    }

    .mx-about-tile {
        padding: 22px;
        min-height: 295px
    }

    .mx-about-tile>span {
        font-size: 8px;
        letter-spacing: .8px;
        line-height: 1.5
    }

    .mx-about-tile>strong {
        font-size: 86px;
        letter-spacing: -4px;
        margin: 27px 0
    }

    .mx-about-tile>strong>i {
        font-size: 25px
    }

    .mx-about-tile h3 {
        font-size: 18px;
        letter-spacing: -.4px
    }

    .mx-dark-tile>i {
        font-size: 40px;
        margin: 28px 0
    }

    .mx-dark-tile>a {
        font-size: 10px;
        line-height: 1.8;
        margin-top: 15px
    }

    .mx-photo-services {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .mx-photo-service:nth-child(3),
    .mx-photo-service:nth-child(4) {
        grid-column: auto;
        grid-row: auto
    }

    .mx-photo-service,
    .mx-photo-service-content {
        min-height: 410px
    }

    .mx-photo-service-content {
        padding: 26px
    }

    .mx-photo-service h3 {
        font-size: 31px
    }

    .mx-photo-service p {
        font-size: 13px
    }

    .mx-photo-service .bpo-card-top {
        gap: 12px;
        padding-bottom: 50px
    }

    .mx-photo-service .bpo-card-top>span {
        font-size: 8px
    }

    .mx-industries .bpo-section-heading>p {
        font-size: 14px
    }

    .mx-industry-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .mx-industry-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px
    }

    .mx-industry-list button {
        padding: 16px 0;
        font-size: 14px;
        gap: 10px;
        line-height: 1.4
    }

    .mx-industry-list button>span {
        font-size: 8px
    }

    .mx-industry-list button>i {
        display: none
    }

    .mx-industry-list button[aria-selected=true],
    .mx-industry-list button:hover {
        padding-left: 0
    }

    .mx-industry-list button[aria-selected=true] {
        border-color: #2b8966
    }

    .mx-industry-photo {
        height: 440px
    }

    .mx-industry-photo>div {
        padding: 27px
    }

    .mx-industry-photo h3 {
        font-size: 30px
    }

    .mx-industry-photo>div>span {
        font-size: 8px
    }

    .mx-process-grid {
        gap: 25px
    }

    .mx-process-grid article>span {
        font-size: 50px
    }

    .mx-process-grid h3 {
        font-size: 22px;
        margin-top: 25px
    }

    .mx-process-grid p {
        font-size: 12px
    }

    .mx-wide-photo {
        min-height: 460px;
        margin: 0 8px;
        border-radius: 20px
    }

    .mx-wide-photo>.bpo-wrap {
        padding: 60px 0
    }

    .mx-wide-photo h2 {
        font-size: 42px
    }

    .mx-wide-photo .mx-pill {
        font-size: 8px;
        letter-spacing: .8px
    }

    .mx-contact-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .mx-contact-grid>div>p {
        font-size: 14px
    }

    .mx-direct-contact {
        margin-top: 25px
    }

    .mx-direct-contact strong {
        font-size: 15px
    }

    .mx-enquiry-card {
        padding: 28px
    }

    .mx-enquiry-card h3 {
        font-size: 31px
    }

    .bpo-footer {
        border-radius: 20px 20px 0 0
    }

    .bpo-detail-hero {
        padding: 55px 0
    }

    .bpo-detail-visual img {
        border-radius: 18px 65px 18px 18px
    }

    .bpo-page-heading {
        padding: 60px 0
    }

    .bpo-page-heading h1 {
        font-size: 44px
    }

    .bpo-section-nav {
        top: 78px
    }

    .bpo-site .bpo-detail-hero~section[id] {
        scroll-margin-top: 150px
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-hero-bg,
    .mx-ticker>div,
    .mx-scroll>span,
    .mx-service-panels article {
        animation: none !important
    }

    .mx-motion-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none
    }

    .bpo-site * {
        scroll-behavior: auto !important
    }

    .mx-work-photo img,
    .mx-photo-service>img,
    .bpo-button,
    .mx-process-grid article {
        transition: none !important
    }
}

@media(max-width:767px) {
    .mx-hero h1 {
        font-size: 48px;
        letter-spacing: -2.6px
    }

    .mx-hero-content {
        padding-top: 120px;
        padding-bottom: 145px
    }
}

.bpo-site .tj-page-header {
    background: #303744;
    border-radius: 0 0 24px 24px
}

.bpo-site .tj-page-header .page-header-overlay {
    opacity: .15
}

.bpo-site .tj-page-header .tj-page-title {
    color: #fff
}

.mx-photo-service[data-reveal].is-visible:hover {
    transform: translateY(-5px)
}

/* Homepage FAQ */
.mx-faq-section {
    background: linear-gradient(135deg, #f3faf7, #eaf5f1);
    border-top: 1px solid #dfede8;
    border-bottom: 1px solid #dfede8
}

.mx-faq-layout {
    display: grid;
    grid-template-columns: .9fr 1.15fr;
    gap: 95px;
    align-items: start
}

.mx-faq-intro .bpo-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    letter-spacing: 1.5px
}

.mx-faq-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: #3da881;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #3da88112
}

.mx-faq-intro h2 {
    font-size: clamp(36px, 3.5vw, 51px);
    line-height: 1.13;
    letter-spacing: -2px;
    margin-bottom: 24px
}

.mx-faq-intro>p {
    max-width: 400px;
    font-size: 14px;
    margin-bottom: 30px
}

.mx-faq-intro .mx-outline-button {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    background: #fff9
}

.mx-faq-intro .mx-outline-button:hover {
    background: #3b414f
}

.mx-faq-help {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 55px;
    padding-top: 30px;
    border-top: 1px solid #cfe4dc
}

.mx-faq-help img {
    width: 86px;
    height: 100px;
    object-fit: cover;
    border-radius: 40px 10px 10px 10px;
    flex-shrink: 0
}

.mx-faq-help div>span {
    display: block;
    font-size: 8px;
    letter-spacing: 1.1px;
    color: #688a7e;
    margin-bottom: 9px
}

.mx-faq-help h3 {
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.7px;
    color: #2a303d;
    margin: 0 0 9px
}

.mx-faq-help a {
    font-size: 12px;
    color: #297b5d;
    display: inline-flex;
    gap: 18px;
    align-items: center
}

.mx-faq-help a>span {
    transition: transform .25s
}

.mx-faq-help a:hover>span {
    transform: translate(3px, -3px)
}

.mx-faq-accordion {
    min-width: 0
}

.mx-faq-item {
    background: #fff;
    border: 1px solid #d5e7e0;
    border-radius: 16px;
    margin-bottom: 13px;
    overflow: clip;
    transition: background .3s, border-color .3s, box-shadow .3s
}

.mx-faq-item:hover {
    border-color: #90c6b2
}

.mx-faq-item[open] {
    background: var(--ssf-mint, #4ebd94);
    border-color: var(--ssf-mint, #4ebd94);
    box-shadow: 0 12px 35px #4ebd941a
}

.mx-faq-item[open] .mx-faq-question,
.mx-faq-item[open] .mx-faq-number,
.mx-faq-item[open] .mx-faq-answer p {
    color: #17382d
}

.mx-faq-item[open] .mx-faq-answer p {
    border-top-color: #17382d26
}

.mx-faq-item summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    cursor: pointer;
    list-style: none
}

.mx-faq-item summary::-webkit-details-marker {
    display: none
}

.mx-faq-number {
    color: #7ea194;
    font-size: 10px;
    letter-spacing: 1px;
    flex-shrink: 0
}

.mx-faq-question {
    color: #2a303d;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.3px
}

.mx-faq-toggle {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-left: auto;
    background: #edf6f3;
    border: 1px solid #d9e8e2;
    border-radius: 50%;
    position: relative;
    transition: background .3s, transform .3s, border-color .3s
}

.mx-faq-toggle:before,
.mx-faq-toggle:after {
    content: '';
    width: 11px;
    height: 1px;
    background: #3e4659;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s
}

.mx-faq-toggle:after {
    transform: translate(-50%, -50%) rotate(90deg)
}

.mx-faq-item[open] .mx-faq-toggle {
    background: #ffffffb3;
    border-color: #ffffff70
}

.mx-faq-item[open] .mx-faq-toggle:after {
    transform: translate(-50%, -50%) rotate(0)
}

.mx-faq-answer {
    padding: 0 76px 26px 59px
}

.mx-faq-answer p {
    border-top: 1px solid #deede8;
    padding-top: 19px;
    margin: 0;
    font-size: 13px;
    line-height: 1.95;
    color: #5b766c
}

.mx-faq-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
    font-size: 11px;
    color: #75968a !important
}

.mx-faq-footnote i {
    color: #449a7a
}

@supports(interpolate-size:allow-keywords) {
    .mx-faq-item {
        interpolate-size: allow-keywords
    }

    .mx-faq-item::details-content {
        height: 0;
        opacity: 0;
        overflow: clip;
        transition: height .35s ease, opacity .3s ease, content-visibility .35s allow-discrete
    }

    .mx-faq-item[open]::details-content {
        height: auto;
        opacity: 1
    }
}

@media(max-width:1100px) {
    .mx-faq-layout {
        gap: 45px;
        grid-template-columns: .9fr 1.1fr
    }

    .mx-faq-item summary {
        padding: 21px;
        gap: 14px
    }

    .mx-faq-question {
        font-size: 16px
    }

    .mx-faq-answer {
        padding: 0 63px 24px 52px
    }
}

@media(max-width:767px) {
    .mx-faq-layout {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .mx-faq-intro h2 {
        font-size: 38px;
        letter-spacing: -1.6px
    }

    .mx-faq-intro>p {
        max-width: 440px;
        font-size: 13px
    }

    .mx-faq-help {
        margin-top: 30px;
        padding-top: 24px
    }

    .mx-faq-help img {
        width: 68px;
        height: 78px
    }

    .mx-faq-help h3 {
        font-size: 22px
    }

    .mx-faq-item summary {
        padding: 20px 18px;
        gap: 12px
    }

    .mx-faq-question {
        font-size: 15px;
        letter-spacing: -.2px
    }

    .mx-faq-toggle {
        width: 29px;
        height: 29px
    }

    .mx-faq-answer {
        padding: 0 24px 24px 46px
    }

    .mx-faq-answer p {
        font-size: 12px
    }

    .mx-faq-footnote {
        font-size: 10px;
        gap: 8px
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-faq-item,
    .mx-faq-toggle,
    .mx-faq-toggle:after,
    .mx-faq-item::details-content,
    .mx-faq-help a>span {
        transition: none !important
    }
}

/* Footer */
.mx-footer {
    position: relative;
    width: calc(100% - 32px);
    margin: 16px auto 0;
    box-sizing: border-box;
    isolation: isolate;
    overflow: clip;
    background: #262c38;
    color: #ebf5f1;
    /* border-radius: 28px 28px 0 0; */
    border-radius: 28px 28px;
    padding: 75px 0 25px;
}

.mx-footer-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    top: -430px;
    right: -220px;
    background: radial-gradient(circle, #4ebd9415, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.mx-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 58px;
    border-bottom: 1px solid #ffffff20;
}

.mx-footer-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #a4cbbd;
    margin-bottom: 25px;
}

.mx-footer-eyebrow>span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ebd94;
    box-shadow: 0 0 0 5px #4ebd940d;
}

.mx-footer .mx-footer-top h2 {
    font-size: clamp(34px, 3.9vw, 56px);
    letter-spacing: -2px;
    line-height: 1.12;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.mx-footer .mx-footer-top em {
    color: #a7d6c5;
}

.mx-footer-cta {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    border: 1px solid #b8ded050;
    border-radius: 100px;
    padding: 11px 12px 11px 25px;
    color: #e7f4ef;
    font-size: 13px;
    white-space: nowrap;
    transition: background .3s, border-color .3s;
}

.mx-footer-cta>i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #4ebd94;
    color: #1f232d;
    font-style: normal;
    font-size: 24px;
    transition: transform .35s;
}

.mx-footer-cta:hover {
    background: #ffffff0c;
    border-color: #4ebd94;
    color: #fff;
}

.mx-footer-cta:hover>i {
    transform: rotate(45deg);
}

.mx-footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1.1fr .65fr 1.1fr;
    gap: 60px;
    padding: 58px 0 0;
}

.mx-footer-logo {
    display: inline-block;
    margin-bottom: 23px;
}

.mx-footer-logo img {
    width: 180px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

.mx-footer-logo>span {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}

.mx-footer-logo em {
    color: #4ebd94;
    font-style: normal;
    font-weight: 400;
}

.mx-footer-main>* {
    min-width: 0;
}

.mx-footer .mx-footer-about>p {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 13px;
    color: #b9cdc6;
    line-height: 1.95;
    margin-bottom: 24px;
}

.mx-footer-description>span {
    display: block;
}

.mx-footer-description>span+span {
    margin-top: 8px;
}

.mx-footer-social {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.mx-footer-social>a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    font-size: 12px;
    color: #cee5dd;
    transition: color .25s, background .25s, border-color .25s, transform .25s;
}

.mx-footer-social>a:hover {
    color: #1f232d;
    background: #4ebd94;
    border-color: #4ebd94;
    transform: translateY(-3px);
}

.mx-footer h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #eff8f5;
    font-weight: 500;
    margin: 8px 0 30px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.mx-footer h3::before {
    content: '';
    width: 3px;
    height: 17px;
    flex-shrink: 0;
    border-radius: 3px;
    background: #4ebd94;
}

.mx-footer h3>span {
    font-size: 9px;
    letter-spacing: .4px;
    padding: 4px 7px;
    border: 1px solid #4ebd9430;
    color: #add8c8;
    background: #4ebd9408;
    border-radius: 6px;
}

.mx-footer-links>a {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.7;
    color: #b6cdc5;
    margin: 0 0 17px;
    transition: color .25s, transform .25s;
}

.mx-footer-links>a>span {
    opacity: 0;
    transform: translate(-4px, 4px);
    color: #4ebd94;
    transition: opacity .25s, transform .25s;
}

.mx-footer-links>a:hover,
.mx-footer-links>a:focus-visible {
    color: #c9e6db;
    transform: translateX(4px);
}

.mx-footer-links>a:hover>span,
.mx-footer-links>a:focus-visible>span {
    opacity: 1;
    transform: none;
}

.mx-footer-contact>a,
.mx-footer-address {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
    color: #cee5dd;
    font-size: 13px;
    line-height: 1.6;
}

.mx-footer-contact>a>i,
.mx-footer-address>i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    background: #ffffff03;
    color: #cee5dd;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
    transition: color .25s, background .25s, border-color .25s, transform .25s;
}

.mx-footer-contact>a:hover>i,
.mx-footer-contact>a:focus-visible>i {
    background: #4ebd94;
    border-color: #4ebd94;
    color: #1f232d;
    transform: translateY(-3px);
}

.mx-footer-contact>a>span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mx-footer-contact small {
    display: block;
    font-size: 8px;
    font-weight: 600;
    /* color: #87a89c; */
    color: #4ebd94;
    letter-spacing: 1.1px;
    margin-bottom: 6px;
}

.mx-footer-contact>a {
    transition: color .25s, transform .25s;
}

.mx-footer-contact>a:hover,
.mx-footer-contact>a:focus-visible {
    color: #4ebd94;
    transform: translateX(3px);
}

.mx-footer .mx-footer-address>p {
    color: #9bb4ab;
    font-size: 11px;
    line-height: 1.8;
    margin: 0;
}

.mx-footer-signoff {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ffffff20;
}

.mx-footer-signoff>span {
    font-size: 9px;
    letter-spacing: 1.7px;
    color: #bedfd3;
    line-height: 1.8;
}

.mx-footer-signoff em {
    color: #80aa9b;
    font-style: normal;
}

.mx-footer-back {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    font-size: 8px;
    letter-spacing: 1.2px;
    color: #a8c9bd;
}

.mx-footer-back>span {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 1px solid #ffffff30;
    border-radius: 50%;
    font-size: 17px;
    transition: background .25s, color .25s, transform .25s;
}

.mx-footer-back:hover {
    color: #4ebd94;
}

.mx-footer-back:hover>span {
    background: #4ebd94;
    color: #20252f;
    transform: translateY(-3px);
}

.mx-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 25px;
}

.mx-footer .mx-footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: #b9cec5;
    line-height: 1.8;
}

.mx-footer-bottom nav {
    display: flex;
    gap: 22px;
}

.mx-footer-bottom a {
    font-size: 13px;
    color: #aac9be;
    background-image: linear-gradient(#4ebd94, #4ebd94);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: color .25s, background-size .25s;
}

.mx-footer-bottom a:hover,
.mx-footer-bottom a:focus-visible {
    color: #4ebd94;
    background-size: 100% 1px;
}

.mx-footer .mx-footer-bottom>p:last-child {
    text-align: right;
}

.mx-footer-group {
    display: block;
    font-size: 8px;
    color: #728f84;
    letter-spacing: .5px;
}

.mx-footer a:focus-visible {
    outline-color: #4ebd94;
}

@media(max-width:1100px) {
    .mx-footer-main {
        gap: 30px;
        grid-template-columns: 1.2fr 1.1fr .7fr 1.1fr;
    }

    .mx-footer .mx-footer-top h2 {
        font-size: 43px;
    }

    .mx-footer-cta {
        gap: 16px;
    }
}

@media(max-width:900px) {
    .mx-footer-main {
        grid-template-columns: 1.2fr 1fr;
        gap: 35px 65px;
    }

    .mx-footer-about {
        grid-column: 1;
        grid-row: 1;
    }

    .mx-footer-contact {
        grid-column: 2;
        grid-row: 1;
    }

    .mx-footer .mx-footer-about>p {
        max-width: none;
    }

    .mx-footer-bottom {
        flex-wrap: wrap;
    }
}

@media(max-width:767px) {
    .mx-footer {
        width: calc(100% - 16px);
        margin: 8px auto 0;
        padding-top: 50px;
        border-radius: 22px 22px 0 0;
    }

    .mx-footer-top {
        flex-direction: column;
        align-items: start;
        gap: 28px;
        padding-bottom: 35px;
    }

    .mx-footer-eyebrow {
        font-size: 8px;
        letter-spacing: 1px;
        margin-bottom: 22px;
    }

    .mx-footer .mx-footer-top h2 {
        font-size: 36px;
        letter-spacing: -1.6px;
    }

    .mx-footer-cta {
        font-size: 12px;
        padding: 9px 10px 9px 21px;
        gap: 25px;
    }

    .mx-footer-cta>i {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .mx-footer-main {
        gap: 30px 25px;
        grid-template-columns: 1fr 1fr;
        padding: 38px 0;
    }

    .mx-footer-about {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .mx-footer-contact {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .mx-footer-logo img {
        width: 160px;
    }

    .mx-footer h3 {
        font-size: 20px;
        margin-top: 0;
        margin-bottom: 24px;
    }

    .mx-footer-contact>a,
    .mx-footer-address {
        margin-bottom: 18px;
    }

    .mx-footer-links>a {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .mx-footer-links>a>span {
        opacity: .6;
        transform: none;
    }

    .mx-footer-signoff {
        gap: 20px;
        align-items: start;
        padding-bottom: 22px;
    }

    .mx-footer-signoff>span {
        font-size: 8px;
        letter-spacing: 1px;
        max-width: 220px;
    }

    .mx-footer-signoff em {
        display: block;
    }

    .mx-footer-back {
        font-size: 0;
        gap: 0;
    }

    .mx-footer-back>span {
        font-size: 17px;
    }

    .mx-footer-bottom {
        align-items: start;
        flex-direction: column;
        gap: 16px;
        padding-top: 22px;
    }

    .mx-footer .mx-footer-bottom>p:last-child {
        text-align: left;
    }

    .mx-footer-group {
        display: inline;
        margin-left: 10px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-footer-cta,
    .mx-footer-cta>i,
    .mx-footer-social>a,
    .mx-footer-links>a,
    .mx-footer-links>a>span,
    .mx-footer-back>span,
    .mx-footer-contact>a>i,
    .mx-footer-address>i {
        transition: none;
    }
}

/* Brand colours sampled from the supplied SSF Global logos. */
:root {
    --ssf-mint: #4ebd94;
    --ssf-charcoal: #3b414f;
    --ssf-mint-dark: #238765;
    --primary-color: #238765;
    --secondary-color: #4ebd94;
    --tj-color-heading-primary: #3b414f;
    --tj-color-text-body: #626d76;
    --tj-color-theme-bg: #edf7f2;
    --tj-color-theme-bg-2: #dcefe5;
    --tj-color-theme-bg-3: #303744;
    --tj-color-theme-dark: #262c38;
    --tj-color-theme-dark-2: #303744;
    --tj-color-theme-dark-3: #3b414f;
    --bpo-muted: #626d76;
}

.bpo-site {
    --bpo-muted: #626d76;
}

.brand-logo {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.bpo-logo {
    line-height: 0;
}

.bpo-logo .brand-logo {
    width: 155px;
    height: auto;
}

.mx-footer-logo .brand-logo {
    width: 180px;
    height: auto;
}

.hamburger_logo .brand-logo {
    width: 150px;
    height: auto;
}

.header-area .site_logo .brand-logo {
    width: 160px;
    height: auto;
}

.footer-logo .brand-logo {
    width: 180px;
    height: auto;
}

@media(max-width:767px) {
    .bpo-logo .brand-logo {
        width: 125px;
    }

    .mx-footer-logo .brand-logo {
        width: 160px;
    }
}

/* Client reviews from the existing reviews collection. */
.mx-reviews-section {
    background: #f0f7f4;
    margin-top: 16px;
}

.mx-reviews-section .bpo-section-heading {
    display: flex;
    align-items: center;
    gap: 24px;
}

.mx-reviews-section .bpo-section-heading h2 {
    margin-bottom: 0;
}

.mx-reviews-heading-side {
    flex-shrink: 0;
}

.mx-reviews-track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 2px 8px;
    overscroll-behavior-x: contain;
}

.mx-reviews-track::-webkit-scrollbar {
    display: none;
}

.mx-review-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    padding: 30px;
    background: #fff;
    border: 1px solid #dbe8e1;
    border-radius: 20px;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.mx-review-card:hover {
    border-color: #8dcbb1;
    box-shadow: 0 12px 28px #3b414f0a;
    transform: translateY(-4px);
}

.mx-review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.mx-review-quote {
    display: block;
    font-family: Georgia, serif;
    color: #4ebd94;
    font-size: 80px;
    line-height: .8;
    height: 48px;
    padding-top: 10px;
}

.mx-review-rating {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 7px;
    color: #3b414f;
    font-size: 13px;
}

.mx-review-stars {
    display: flex;
    gap: 3px;
    color: #238765;
    font-size: 11px;
}

.mx-review-rating small {
    color: #8c9b94;
    font-size: 10px;
}

.mx-review-card blockquote {
    font-size: 14px;
    line-height: 1.9;
    color: #56635e;
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    background: none;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.mx-review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e5eee8;
    padding-top: 23px;
    margin-top: auto;
}

.mx-review-avatar {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #e5f5ed;
    border: 1px solid #cde8da;
    color: #238765;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.mx-review-author>div {
    min-width: 0;
}

.mx-review-author h3 {
    font-size: 15px;
    line-height: 1.4;
    color: #3b414f;
    font-weight: 500;
    margin: 0 0 5px;
    overflow-wrap: anywhere;
}

.mx-review-author>div>span {
    font-size: 10px;
    color: #8c9b94;
}

.mx-review-author>i {
    color: #8fbca7;
    margin-left: auto;
    font-size: 18px;
}

.mx-review-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 4px 0;
}

.mx-review-pagination[hidden] {
    display: none;
}

.mx-review-pagination button {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 20px;
    transition: width .25s;
}

.mx-review-pagination button::before {
    content: '';
    position: absolute;
    inset: -4px;
}

.mx-review-pagination button::after {
    content: '';
    width: 100%;
    height: 8px;
    border-radius: 20px;
    background: #bdcfc6;
    transition: background .25s;
}

.mx-review-pagination button[aria-current=true] {
    width: 24px;
}

.mx-review-pagination button[aria-current=true]::after {
    background: var(--ssf-mint, #4ebd94);
}

.mx-review-pagination button:hover::after {
    background: #238765;
}

.mx-review-pagination button:focus-visible {
    outline: 2px solid #238765;
    outline-offset: 2px;
}

.mx-carousel-controls button:disabled {
    opacity: .35;
    cursor: default;
}

.mx-carousel-controls button:disabled:hover {
    background: transparent;
    border-color: #cbd6bc;
}

@media(max-width:1100px) {
    .mx-review-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media(max-width:767px) {
    .mx-reviews-section {
        margin-top: 8px;
    }

    .mx-reviews-section .bpo-section-heading {
        gap: 15px;
    }

    .mx-reviews-section .bpo-section-heading h2 {
        font-size: 30px;
        letter-spacing: -1.2px;
    }

    .mx-reviews-heading-side {
        gap: 8px;
    }

    .mx-reviews-heading-side button {
        width: 34px;
        height: 34px;
    }

    .mx-review-card {
        flex-basis: 90%;
        padding: 25px;
        border-radius: 16px;
    }

    .mx-reviews-track {
        gap: 16px;
    }

    .mx-review-card blockquote {
        font-size: 13px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-review-card,
    .mx-review-pagination button,
    .mx-review-pagination button::after {
        transition: none;
    }
}

.mx-review-card blockquote::before,
.mx-review-card blockquote::after {
    content: none;
    display: none;
}

/* Shared purpose */
.mx-purpose-section {
    position: relative;
    isolation: isolate;
    overflow: clip;
    width: calc(100% - 32px);
    margin: 0 auto;
    border-radius: 28px;
    background: radial-gradient(ellipse at 80% 0, #4ebd9410, transparent 55%), #262c38;
    padding: 85px 0 0;
    color: #fff;
}

.mx-purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px;
}

.mx-purpose-copy .mx-pill {
    border-color: #96c9b438;
    color: #d3e9df;
    font-size: 9px;
    letter-spacing: 1.3px;
}

.mx-purpose-copy .mx-pill>span {
    background: #4ebd94;
    box-shadow: 0 0 0 4px #4ebd9412;
}

.mx-purpose-copy h2 {
    font-size: clamp(42px, 4.5vw, 66px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -2.7px;
    color: #fff;
    margin: 30px 0 25px;
}

.mx-purpose-copy h2 em {
    color: #91d4ba;
}

.mx-purpose-copy>p {
    font-size: 14px;
    line-height: 1.9;
    color: #b8c6c5;
    max-width: 470px;
    margin-bottom: 0;
}

.mx-purpose-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 34px;
}

.mx-purpose-actions .bpo-button {
    font-size: 12px;
    gap: 24px;
}

.mx-purpose-text-link {
    color: #e1ede5;
    font-size: 12px;
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.mx-purpose-text-link:hover {
    color: #6bcdab;
}

.mx-purpose-text-link>span {
    transition: transform .3s;
}

.mx-purpose-text-link:hover>span {
    transform: translate(3px, -3px);
}

.mx-purpose-visual {
    position: relative;
    padding: 0 0 48px 0;
    min-width: 0;
}

.mx-purpose-image {
    position: relative;
    height: 460px;
    border-radius: 100px 18px 18px 18px;
    overflow: hidden;
    background: #3b414f;
}

.mx-purpose-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% center;
    transition: transform 1s cubic-bezier(.2, .6, .3, 1);
}

.mx-purpose-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #262c3820, transparent 45%, #262c3860);
    pointer-events: none;
}

.mx-purpose-visual:hover .mx-purpose-image>img {
    transform: scale(1.055);
}

.mx-purpose-image-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    top: 26px;
    right: 24px;
    border: 1px solid #ffffff60;
    background: #262c385c;
    backdrop-filter: blur(12px);
    padding: 10px 14px;
    border-radius: 30px;
    color: #fff;
    font-size: 8px;
    letter-spacing: 1.3px;
    z-index: 1;
}

.mx-purpose-image-label>span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #91d4ba;
}

.mx-purpose-note {
    position: absolute;
    bottom: 0;
    left: -32px;
    right: 45px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: #4ebd94;
    color: #203b35;
    border: 1px solid #74d3b0;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 18px 45px #0d162526;
    z-index: 2;
}

.mx-purpose-note-icon {
    background: #fff;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #203b3528;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.mx-purpose-note>div>span {
    display: block;
    font-size: 8px;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}

.mx-purpose-note h3 {
    color: #203b35;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.7px;
    margin: 0;
}

.mx-purpose-note-arrow {
    font-size: 33px;
    margin-left: auto;
    align-self: start;
    line-height: 1;
    transition: transform .35s;
}

.mx-purpose-visual:hover .mx-purpose-note-arrow {
    transform: translate(3px, -3px);
}

.mx-purpose-orbit {
    position: absolute;
    height: 130px;
    width: 130px;
    border: 1px solid #91d4ba25;
    border-radius: 50%;
    top: -28px;
    right: -30px;
    z-index: -1;
}

.mx-purpose-orbit::after {
    content: '';
    position: absolute;
    inset: 17px;
    border: 1px solid #91d4ba18;
    border-radius: 50%;
}

.mx-purpose-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    border-top: 1px solid #ffffff20;
    margin-top: 65px;
    padding: 32px 0 38px;
}

.mx-purpose-principles article {
    display: flex;
    align-items: start;
    gap: 17px;
}

.mx-purpose-principle-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #ffffff20;
    border-radius: 12px;
    color: #8ad4b6;
    background: #ffffff04;
    transition: background .3s, color .3s;
}

.mx-purpose-principles article:hover .mx-purpose-principle-icon {
    background: #4ebd94;
    color: #263c35;
}

.mx-purpose-principles article>div>span {
    display: block;
    color: #899f9c;
    font-size: 8px;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.mx-purpose-principles h3 {
    color: #f0f7f4;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.3px;
    margin: 0 0 10px;
    line-height: 1.4;
}

.mx-purpose-principles p {
    color: #a9b9b5;
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
    max-width: 280px;
}

@media(max-width:1100px) {
    .mx-purpose-grid {
        gap: 45px;
    }

    .mx-purpose-image {
        height: 440px;
    }

    .mx-purpose-note {
        left: -20px;
        right: 20px;
        padding: 24px;
        gap: 16px;
    }

    .mx-purpose-note h3 {
        font-size: 25px;
    }

    .mx-purpose-principles {
        gap: 22px;
    }
}

@media(max-width:900px) {
    .mx-purpose-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mx-purpose-copy>p {
        max-width: 600px;
    }

    .mx-purpose-copy h2 br:last-child {
        display: none;
    }

    .mx-purpose-image {
        height: 420px;
    }

    .mx-purpose-note {
        left: 25px;
        right: 25px;
    }

    .mx-purpose-principles {
        gap: 22px;
    }

    .mx-purpose-principles article {
        flex-direction: column;
    }
}

@media(max-width:767px) {
    .mx-purpose-section {
        width: calc(100% - 16px);
        border-radius: 22px;
        padding-top: 50px;
    }

    .mx-purpose-copy h2 {
        font-size: 42px;
        line-height: 1.1;
        letter-spacing: -1.8px;
        margin-top: 25px;
    }

    .mx-purpose-copy .mx-pill {
        font-size: 8px;
        letter-spacing: .6px;
        padding: 10px 12px;
    }

    .mx-purpose-copy>p {
        font-size: 13px;
    }

    .mx-purpose-actions {
        gap: 22px;
        margin-top: 28px;
    }

    .mx-purpose-actions .bpo-button {
        font-size: 11px;
        gap: 18px;
        padding: 14px 19px;
    }

    .mx-purpose-grid {
        gap: 38px;
    }

    .mx-purpose-image {
        height: 340px;
        border-top-left-radius: 65px;
    }

    .mx-purpose-image-label {
        right: 16px;
        top: 20px;
        font-size: 7px;
    }

    .mx-purpose-note {
        left: 14px;
        right: 14px;
        padding: 22px 18px;
        border-radius: 13px;
        gap: 14px;
    }

    .mx-purpose-note-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .mx-purpose-note h3 {
        font-size: 25px;
    }

    .mx-purpose-note>div>span {
        font-size: 7px;
        letter-spacing: .7px;
    }

    .mx-purpose-note-arrow {
        font-size: 25px;
    }

    .mx-purpose-orbit {
        right: -10px;
        top: -20px;
        width: 100px;
        height: 100px;
    }

    .mx-purpose-principles {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 38px;
        padding: 30px 0;
    }

    .mx-purpose-principles article {
        flex-direction: row;
    }

    .mx-purpose-principles h3 {
        font-size: 17px;
    }

    .mx-purpose-principles p {
        max-width: none;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-purpose-image>img,
    .mx-purpose-note-arrow,
    .mx-purpose-principle-icon,
    .mx-purpose-text-link>span {
        transition: none;
    }
}

/* Parent categories and specialist service directory. */
.mx-child-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mx-child-service-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #dce8e2;
    border-radius: 18px;
    background: #fff;
    color: #3b414f;
    transition: transform .3s, border-color .3s, box-shadow .3s;
    min-width: 0;
}

.mx-child-service-card:hover {
    transform: translateY(-5px);
    border-color: #74c8a7;
    box-shadow: 0 15px 35px #3b414f0a;
    color: #3b414f;
}

.mx-child-service-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.mx-child-service-top>i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #d7eae1;
    border-radius: 13px;
    background: #edf8f2;
    color: #238765;
    font-size: 21px;
}

.mx-child-service-top>span {
    color: #95aa9f;
    font-size: 10px;
    letter-spacing: 1px;
}

.mx-child-service-top>b {
    margin-left: auto;
    font-size: 21px;
    font-weight: 400;
    color: #238765;
    transition: transform .3s;
}

.mx-child-service-card:hover .mx-child-service-top>b {
    transform: translate(3px, -3px);
}

.mx-child-service-card h3 {
    color: #3b414f;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.7px;
    font-weight: 500;
    margin-bottom: 18px;
}

.mx-child-service-card p {
    color: #66766e;
    font-size: 13px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.mx-child-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.mx-child-service-card li {
    position: relative;
    padding: 6px 0 6px 14px;
    color: #6a8074;
    font-size: 12px;
    line-height: 1.6;
}

.mx-child-service-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4ebd94;
}

.mx-child-service-link {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid #e4ede7;
    margin-top: auto;
    color: #238765;
    font-size: 12px;
}

@media(max-width:1100px) {
    .mx-child-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:767px) {
    .mx-child-service-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mx-child-service-card {
        padding: 26px;
    }

    .mx-child-service-card h3 {
        font-size: 24px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-child-service-card,
    .mx-child-service-top>b {
        transition: none;
    }
}

/* Complete service mega menu and homepage category tabs. */
.bpo-nav {
    position: relative;
}

.mx-service-mega {
    position: static;
}

.mx-service-mega>summary {
    cursor: pointer;
    list-style: none;
    /* color: #3b414f; */
    color: #3b414f;
    font-size: 14px;
    font-weight: 700;
}

.mx-service-mega>summary::-webkit-details-marker {
    display: none;
}

.mx-service-mega>summary>span {
    margin-left: 6px;
    font-size: 11px;
}

.bpo-home .bpo-header:not(.is-scrolled) .mx-service-mega>summary {
    color: #fff;
}

.mx-service-mega .mx-mega-panel {
    left: 50%;
    top: 100%;
    width: min(1280px, calc(100vw - 64px));
    padding: 26px;
    border: 1px solid #e0eae5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 65px #172e2426;
    max-height: calc(100svh - 140px);
    overflow-y: auto;
    transform: translate(-50%, 10px);
}

.mx-service-mega:not([open]) .mx-mega-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.mx-service-mega[open] .mx-mega-panel {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.mx-mega-heading,
.mx-mega-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mx-mega-heading {
    padding-bottom: 22px;
    border-bottom: 1px solid #e5ece8;
}

.mx-mega-heading>div>span {
    display: block;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #238765;
    margin-bottom: 7px;
}

.mx-mega-heading strong {
    font-size: 20px;
    color: #3b414f;
    font-weight: 500;
}

.bpo-nav .mx-mega-panel a {
    color: #3b414f;
}

.mx-mega-heading>a,
.mx-mega-bottom>a {
    font-size: 11px;
    white-space: nowrap;
}

.mx-mega-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 0;
}

.bpo-nav .mx-mega-category {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.mx-mega-category>i {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf7f1;
    color: #238765;
    font-size: 15px;
    margin: 0;
}

.mx-mega-category>span {
    font-size: 13px;
    font-weight: 600;
}

.mx-mega-category small {
    display: block;
    margin-top: 4px;
    color: #84938a;
    font-size: 9px;
    font-weight: 400;
}

.mx-mega-category>b {
    position: static;
    margin-left: auto;
    font-size: 16px;
    color: #238765;
}

.mx-mega-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bpo-nav .mx-mega-column li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    margin: 0 -9px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    transition: background .2s, color .2s;
}

.mx-mega-column li a span {
    opacity: 0;
    color: #238765;
}

.bpo-nav .mx-mega-column li a:hover,
.bpo-nav .mx-mega-column li a:focus-visible {
    background: #edf8f3;
    color: #238765;
}

.mx-mega-column li a:hover span,
.mx-mega-column li a:focus-visible span {
    opacity: 1;
}

.mx-mega-bottom {
    padding-top: 18px;
    border-top: 1px solid #e5ece8;
    font-size: 11px;
    color: #7b8a81;
}

.mx-mobile-services {
    border-top: 1px solid #e1eae5;
}

.mx-mobile-services>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 0;
    color: #3b414f;
    font-size: 13px;
}

.mx-mobile-services>summary::-webkit-details-marker {
    display: none;
}

.mx-mobile-services>summary>span {
    color: #238765;
    font-size: 10px;
}

.bpo-mobile-nav nav .mx-mobile-services a {
    display: block;
    padding: 10px 12px;
    font-size: 12px;
    color: #59695f;
}

.mx-mobile-services[open]>summary {
    color: #238765;
}

.mx-mobile-services>div {
    padding-bottom: 14px;
}

.mx-service-directory {
    background: #f2f7f3;
}

.mx-directory-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 38px 0 0;
}

.mx-directory-tabs button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border: 1px solid #dce7e0;
    border-radius: 13px;
    background: #fff;
    color: #3b414f;
    font-size: 13px;
    text-align: left;
    transition: background .25s, border-color .25s;
}

.mx-directory-tabs button>i {
    font-size: 19px;
    color: #238765;
}

.mx-directory-tabs button small {
    margin-left: auto;
    background: #edf5ef;
    border-radius: 20px;
    padding: 4px 7px;
    font-size: 9px;
}

.mx-directory-tabs button[aria-selected="true"] {
    background: #4ebd94;
    border-color: #4ebd94;
    color: #173c2e;
}

.mx-directory-tabs button[aria-selected="true"]>i {
    color: #173c2e;
}

.mx-directory-tabs button[aria-selected="true"] small {
    background: #ffffff55;
}

.mx-directory-tabs button:focus-visible,
.mx-directory-card:focus-visible,
.mx-service-mega summary:focus-visible {
    outline: 2px solid #238765;
    outline-offset: 4px;
}

.mx-directory-panel[hidden] {
    display: none;
}

.mx-directory-panel:not([hidden]) {
    animation: directory-in .35s ease both;
}

@keyframes directory-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mx-directory-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 30px 0;
}

.mx-directory-intro>div {
    max-width: 710px;
}

.mx-directory-intro>div>span {
    color: #238765;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mx-directory-intro p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #65766c;
}

.mx-directory-intro>a {
    font-size: 12px;
    color: #238765;
    white-space: nowrap;
}

.mx-directory-intro>a>span {
    margin-left: 12px;
}

.mx-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mx-directory-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dfe9e2;
    border-radius: 18px;
    background: #fff;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.mx-directory-card:hover {
    transform: translateY(-5px);
    border-color: #80cdb0;
    box-shadow: 0 18px 35px #233f3010;
}

.mx-directory-photo {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #d9e7de;
}

.mx-directory-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}

.mx-directory-card:hover .mx-directory-photo>img {
    transform: scale(1.06);
}

.mx-directory-photo-icon,
.mx-directory-photo-arrow {
    position: absolute;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    bottom: 16px;
}

.mx-directory-photo-icon {
    left: 18px;
    background: #fff;
    color: #238765;
    font-size: 17px;
}

.mx-directory-photo-arrow {
    right: 18px;
    background: #4ebd94;
    color: #183b2e;
    font-size: 22px;
}

.mx-directory-card-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.mx-directory-card-copy>span:first-child {
    color: #238765;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.mx-directory-card h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #3b414f;
    margin: 0 0 15px;
}

.mx-directory-card p {
    color: #718077;
    font-size: 12px;
    line-height: 1.8;
    margin: 0 0 25px;
}

.mx-directory-card-link {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid #e5ece7;
    padding-top: 17px;
    font-size: 11px;
    color: #238765;
}

@media(max-width:1100px) {
    .mx-directory-tabs button {
        padding: 17px 12px;
        gap: 8px;
        font-size: 11px;
    }

    .mx-mega-columns {
        gap: 16px;
    }

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

@media(max-width:767px) {
    .mx-directory-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 25px;
    }

    .mx-directory-tabs button {
        padding: 15px 10px;
        font-size: 10px;
        gap: 7px;
    }

    .mx-directory-tabs button>i {
        font-size: 15px;
    }

    .mx-directory-tabs button small {
        padding: 3px 5px;
        font-size: 8px;
    }

    .mx-directory-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding: 25px 0;
    }

    .mx-directory-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mx-directory-photo {
        height: 210px;
    }

    .mx-directory-card h3 {
        font-size: 24px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .mx-directory-panel:not([hidden]) {
        animation: none;
    }

    .mx-directory-card,
    .mx-directory-photo>img,
    .mx-directory-tabs button {
        transition: none;
    }
}

/* Service menu: category navigation on the left, selected links on the right. */
.mx-mega-browser {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
    padding: 25px 0;
}

.mx-mega-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 24px;
    border-right: 1px solid #e5ece8;
}

.mx-mega-tabs button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f4f8f5;
    color: #3b414f;
    text-align: left;
    transition: background .2s, border-color .2s;
}

.mx-mega-tabs button>i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    color: #238765;
    font-size: 16px;
    margin: 0;
}

.mx-mega-tabs button>span:first-of-type {
    font-size: 13px;
    font-weight: 500;
}

.mx-mega-tabs button small {
    display: block;
    font-size: 9px;
    color: #6c8274;
    margin-top: 5px;
    font-weight: 400;
}

.mx-mega-tabs button>span:last-child {
    margin-left: auto;
    color: #238765;
}

.mx-mega-tabs button[aria-selected="true"] {
    background: #4ebd94;
    border-color: #4ebd94;
}

.mx-mega-tabs button[aria-selected="true"] small {
    color: #235d46;
}

.mx-mega-tabs button:focus-visible {
    outline: 2px solid #238765;
    outline-offset: 2px;
}

.mx-mega-service-panel[hidden] {
    display: none;
}

.mx-mega-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 23px;
}

.mx-mega-result-heading h3 {
    font-size: 24px;
    font-weight: 500;
    color: #3b414f;
    margin: 0 0 10px;
}

.mx-mega-result-heading p {
    font-size: 12px;
    line-height: 1.8;
    color: #75857a;
    max-width: 600px;
    margin: 0;
}

.mx-mega-result-heading>a {
    font-size: 11px;
    white-space: nowrap;
    padding: 10px 13px;
    border-radius: 30px;
    background: #edf8f3;
}

.mx-mega-service-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.bpo-nav .mx-mega-service-panel li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 10px;
    border-bottom: 1px solid #edf1ee;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    transition: background .2s, color .2s;
}

.mx-mega-service-panel li a>span {
    color: #238765;
}

.bpo-nav .mx-mega-service-panel li a:hover,
.bpo-nav .mx-mega-service-panel li a:focus-visible {
    background: #edf8f3;
    color: #238765;
}

@media(min-width:901px) and (max-width:1100px) {
    .mx-mega-browser {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 20px;
    }

    .mx-mega-tabs {
        padding-right: 15px;
    }

    .mx-mega-tabs button {
        padding: 15px 10px;
        gap: 8px;
    }

    .mx-mega-service-panel li a {
        font-size: 11px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-mega-tabs button,
    .mx-mega-service-panel li a {
        transition: none;
    }
}

/* Polished menu entrance, category transitions and a crisp toggle chevron. */
.mx-service-mega>summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
}

.mx-service-mega>summary>.mx-services-label {
    margin: 0;
    font-size: 14px;
}

.mx-services-chevron {
    display: block;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .2s;
}

.mx-service-mega[open] .mx-services-chevron {
    transform: rotate(180deg);
    color: #4ebd94;
}

.mx-service-mega .mx-mega-panel {
    border-radius: 22px;
    padding: 24px;
    background: linear-gradient(135deg, #fff 65%, #f5fbf7);
    border-color: #dcebe3;
    box-shadow: 0 28px 70px #142d2526, 0 4px 12px #142d2508;
    transform-origin: top center;
    scrollbar-width: thin;
    scrollbar-color: #b5dccc transparent;
}

.mx-service-mega[open] .mx-mega-panel {
    animation: mega-drop-in .4s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes mega-drop-in {
    from {
        opacity: 0;
        transform: translate(-50%, -22px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.mx-mega-heading {
    padding: 0 4px 20px;
}

.mx-mega-heading strong {
    font-size: 22px;
    letter-spacing: -.5px;
}

.mx-mega-heading>a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border: 1px solid #dcebe3;
    border-radius: 30px;
    background: #fff;
}

.mx-mega-browser {
    padding: 22px 0;
    gap: 28px;
}

.mx-mega-tabs {
    background: #f1f7f3;
    border: 0;
    border-radius: 16px;
    padding: 10px;
    align-self: start;
}

.mx-mega-tabs button {
    background: transparent;
    padding: 16px 12px;
    border-radius: 11px;
}

.mx-mega-tabs button:hover {
    background: #e3f1e9;
}

.mx-mega-tabs button[aria-selected="true"] {
    background: #4ebd94;
    box-shadow: 0 5px 14px #23876518;
}

.mx-mega-tabs button>i {
    transition: transform .25s;
}

.mx-mega-tabs button[aria-selected="true"]>i {
    transform: rotate(-6deg);
}

.mx-mega-service-panel:not([hidden]) {
    animation: mega-content-in .28s ease both;
}

@keyframes mega-content-in {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mx-mega-result-heading {
    padding: 5px 0 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e5eee8;
}

.mx-mega-result-heading h3 {
    font-size: 25px;
    letter-spacing: -.6px;
}

.bpo-nav .mx-mega-service-panel li a {
    padding: 13px 12px;
}

.mx-mega-service-panel li a>span {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #deebe3;
    border-radius: 50%;
    background: #fff;
    transition: background .2s, transform .2s;
}

.mx-mega-service-panel li a:hover>span {
    background: #4ebd94;
    border-color: #4ebd94;
    transform: rotate(8deg);
}

.mx-mega-bottom {
    padding: 16px 4px 0;
}

@media(prefers-reduced-motion:reduce) {

    .mx-service-mega[open] .mx-mega-panel,
    .mx-mega-service-panel:not([hidden]) {
        animation: none;
    }

    .mx-services-chevron,
    .mx-mega-tabs button>i,
    .mx-mega-service-panel li a>span {
        transition: none;
    }
}

/* About SSF Global: shared homepage palette and editorial layouts. */
.mx-about-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 65px;
    align-items: center;
    padding-top: 175px;
    padding-bottom: 65px;
}

.mx-about-hero h2 {
    font-size: clamp(48px, 4.8vw, 76px);
    line-height: 1.04;
    letter-spacing: -3px;
    font-weight: 500;
    color: #3b414f;
    margin: 24px 0;
}

.mx-about-page h1 em,
.mx-about-page h2 em {
    color: #238765;
    font-style: normal;
}

.mx-about-hero-copy>p {
    font-size: 15px;
    line-height: 1.9;
    color: #718077;
    max-width: 460px;
    margin-bottom: 30px;
}

.mx-about-hero-visual {
    height: 550px;
    position: relative;
    border-radius: 110px 22px 22px 22px;
    background: #e1ece4;
}

.mx-about-hero-visual>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.mx-about-photo-tag {
    position: absolute;
    top: 26px;
    right: 22px;
    background: #ffffffed;
    color: #365d4a;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 8px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.mx-about-hero-note {
    position: absolute;
    bottom: 25px;
    left: -32px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 27px;
    background: #4ebd94;
    border-radius: 18px;
    color: #173e2e;
    box-shadow: 0 12px 30px #1d53321a;
}

.mx-about-hero-note>i {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    font-size: 24px;
    border-radius: 50%;
    /* background: #ffffff60; */
    background: white;
}

.mx-about-hero-note span {
    font-size: 8px;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 9px;
}

.mx-about-hero-note strong {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.mx-about-intro-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid #dce7df;
    padding-top: 28px;
    padding-bottom: 35px;
}

.mx-about-intro-strip>span {
    font-size: 9px;
    line-height: 1.8;
    letter-spacing: 1.5px;
    color: #238765;
}

.mx-about-intro-strip p {
    font-size: 15px;
    color: #7a8b7e;
    margin: 0;
    line-height: 1.7;
}

.mx-about-intro-strip strong {
    color: #3b414f;
    font-weight: 500;
}

.mx-about-intro-strip>a {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #d3e4d9;
    border-radius: 50%;
    color: #238765;
    font-size: 24px;
}

.mx-about-story {
    background: #f2f7f3;
}

.mx-about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.mx-about-page h2 {
    letter-spacing: -1.9px;
}

.mx-about-story-photo {
    position: relative;
    margin-top: 35px;
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
}

.mx-about-story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-about-story-photo>span {
    position: absolute;
    inset: auto 0 0;
    padding: 45px 25px 25px;
    background: linear-gradient(transparent, #172d24c9);
    color: #fff;
    font-size: 23px;
    line-height: 1.25;
}

.mx-about-section-number {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #238765;
}

.mx-about-story-copy h3 {
    font-size: 31px;
    line-height: 1.2;
    letter-spacing: -.7px;
    margin: 24px 0;
    font-weight: 500;
    color: #3b414f;
}

.mx-about-story-copy>p,
.mx-about-partnership>div>p {
    font-size: 14px;
    line-height: 1.95;
    color: #708176;
    margin-bottom: 19px;
}

.mx-about-story-signoff {
    display: flex;
    gap: 18px;
    align-items: center;
    border-top: 1px solid #d9e5dc;
    padding-top: 24px;
    margin-top: 28px;
}

.mx-about-story-signoff>span {
    width: 46px;
    height: 46px;
    background: #4ebd94;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #254835;
    font-size: 24px;
}

.mx-about-story-signoff p {
    color: #718077;
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}

.mx-about-story-signoff strong {
    color: #3b414f;
    font-weight: 500;
}

.mx-about-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.mx-about-service-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1px solid #dce7df;
    border-radius: 17px;
    background: #fff;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.mx-about-service-card:hover {
    transform: translateY(-6px);
    border-color: #4ebd94;
    box-shadow: 0 18px 35px #2d51380c;
}

.mx-about-service-card>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.mx-about-service-card i {
    width: 48px;
    height: 48px;
    background: #ebf7f0;
    border-radius: 50%;
    color: #238765;
    display: grid;
    place-items: center;
    font-size: 21px;
}

.mx-about-service-card>div>span {
    font-size: 10px;
    color: #8c9c91;
}

.mx-about-service-card h3 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #3b414f;
    font-weight: 500;
    margin-bottom: 18px;
}

.mx-about-service-card p {
    font-size: 12px;
    line-height: 1.9;
    color: #75857b;
    margin-bottom: 25px;
}

.mx-about-service-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #e2ebe5;
    color: #238765;
    font-size: 10px;
}

.mx-about-values {
    background: #262c38;
    border-radius: 26px;
    margin: 0 16px;
}

.mx-about-values .bpo-eyebrow {
    color: #87d7b7;
}

.mx-about-values h2 {
    color: #fff;
}

.mx-about-values h2 em {
    color: #87d7b7;
}

.mx-about-values .bpo-section-heading>p {
    color: #a7b8ad;
}

.mx-about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 45px;
}

.mx-about-values-grid article {
    padding: 0 35px;
    border-right: 1px solid #ffffff1a;
}

.mx-about-values-grid article:first-child {
    padding-left: 0;
}

.mx-about-values-grid article:last-child {
    padding-right: 0;
    border: 0;
}

.mx-about-value-number {
    display: block;
    font-size: 8px;
    letter-spacing: 1px;
    color: #93b2a0;
}

.mx-about-values-grid i {
    width: 55px;
    height: 55px;
    background: #4ebd9415;
    border: 1px solid #4ebd9438;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #87d7b7;
    font-size: 22px;
    margin: 32px 0 24px;
}

.mx-about-values-grid h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.mx-about-values-grid p {
    font-size: 13px;
    line-height: 1.9;
    color: #a7b8ad;
    margin: 0;
}

.mx-about-partnership {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.mx-about-partnership-image {
    height: 650px;
    position: relative;
    overflow: hidden;
    border-radius: 22px 90px 22px 22px;
}

.mx-about-partnership-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-about-partnership-image>span {
    position: absolute;
    inset: auto 0 0;
    padding: 80px 35px 35px;
    color: #fff;
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 1.2;
    background: linear-gradient(transparent, #1c3029e6);
}

.mx-about-partnership-image em {
    font-style: normal;
    color: #9cdfc1;
}

.mx-about-partnership>div>p {
    margin-top: 24px;
}

.mx-about-partnership-list {
    margin: 26px 0;
}

.mx-about-partnership-list>div {
    display: flex;
    gap: 20px;
    border-top: 1px solid #dfe8e2;
    padding: 20px 0;
}

.mx-about-partnership-list>div>span {
    font-size: 11px;
    color: #238765;
    padding-top: 4px;
}

.mx-about-partnership-list h3 {
    font-size: 18px;
    font-weight: 500;
    color: #3b414f;
    margin: 0 0 7px;
}

.mx-about-partnership-list p {
    font-size: 12px;
    line-height: 1.8;
    color: #75857b;
    margin: 0;
}

@media(max-width:1100px) {
    .mx-about-hero {
        gap: 40px;
    }

    .mx-about-hero-visual {
        height: 500px;
    }

    .mx-about-story-grid,
    .mx-about-partnership {
        gap: 45px;
    }

    .mx-about-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mx-about-values-grid article {
        padding: 0 22px;
    }
}

@media(max-width:767px) {
    .mx-about-hero {
        grid-template-columns: 1fr;
        padding-top: 135px;
        padding-bottom: 35px;
        gap: 35px;
    }

    .mx-about-hero h2 {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .mx-about-hero-copy>p {
        font-size: 13px;
    }

    .mx-about-hero-copy .bpo-button {
        font-size: 11px;
    }

    .mx-about-hero-visual {
        height: 420px;
        border-top-left-radius: 75px;
    }

    .mx-about-photo-tag {
        font-size: 6px;
        padding: 11px;
        right: 14px;
    }

    .mx-about-hero-note {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 20px;
        gap: 14px;
    }

    .mx-about-hero-note strong {
        font-size: 21px;
    }

    .mx-about-hero-note>i {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }

    .mx-about-hero-note span {
        font-size: 7px;
    }

    .mx-about-intro-strip {
        flex-wrap: wrap;
        gap: 18px;
        padding-top: 22px;
        padding-bottom: 28px;
    }

    .mx-about-intro-strip>span {
        font-size: 7px;
    }

    .mx-about-intro-strip p {
        font-size: 11px;
    }

    .mx-about-intro-strip>a {
        display: none;
    }

    .mx-about-story-grid,
    .mx-about-partnership {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mx-about-story-photo {
        height: 260px;
        margin-top: 25px;
    }

    .mx-about-story-copy h3 {
        font-size: 27px;
    }

    .mx-about-story-copy>p,
    .mx-about-partnership>div>p {
        font-size: 13px;
    }

    .mx-about-service-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 28px;
    }

    .mx-about-service-card>div {
        margin-bottom: 25px;
    }

    .mx-about-values {
        margin: 0 8px;
        border-radius: 20px;
    }

    .mx-about-values-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 30px;
    }

    .mx-about-values-grid article,
    .mx-about-values-grid article:first-child,
    .mx-about-values-grid article:last-child {
        padding: 0 0 28px;
        border: 0;
        border-bottom: 1px solid #ffffff1a;
    }

    .mx-about-values-grid article:last-child {
        padding-bottom: 0;
        border: 0;
    }

    .mx-about-values-grid i {
        margin: 22px 0 18px;
    }

    .mx-about-partnership-image {
        height: 420px;
    }

    .mx-about-partnership-image>span {
        font-size: 29px;
        padding: 60px 25px 25px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .mx-about-service-card {
        transition: none;
    }
}

/* The inner-page sticky header already occupies its own space. */
.mx-about-hero {
    padding-top: 70px;
}

@media(max-width:767px) {
    .mx-about-hero {
        padding-top: 45px;
    }
}

/* About page title card. */
.mx-about-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 20px 24px 0;
    border-radius: 26px;
    background: #262c38;
    color: #fff;
}

.mx-about-banner::before,
.mx-about-banner::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 440px;
    height: 440px;
    border: 1px solid #8bd6b72b;
    border-radius: 50%;
    right: -45px;
    top: -160px;
    pointer-events: none;
}

.mx-about-banner::after {
    width: 590px;
    height: 590px;
    top: -235px;
    right: -120px;
}

.mx-about-banner-content {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
}

.mx-about-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #a9b8b0;
    margin-bottom: 44px;
}

.mx-about-breadcrumb a {
    color: #d1ded6;
    transition: color .2s;
}

.mx-about-breadcrumb a:hover {
    color: #4ebd94;
}

.mx-about-banner .bpo-eyebrow {
    color: #8bd6b7;
    font-size: 9px;
    letter-spacing: 1.6px;
    margin-bottom: 18px;
}

.mx-about-banner h1 {
    font-size: clamp(54px, 6vw, 88px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -3px;
    margin: 0 0 22px;
    color: #fff;
}

.mx-about-banner h1 em {
    color: #85d6b5;
    font-style: normal;
}

.mx-about-banner p {
    font-size: 14px;
    line-height: 1.85;
    color: #b4c5bb;
    margin: 0;
}

.mx-about-banner-mark {
    position: absolute;
    right: 35px;
    bottom: 65px;
    width: 90px;
    height: 90px;
    border: 1px solid #88d4b54d;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #85d6b5;
    font-size: 48px;
}

@media(max-width:767px) {
    .mx-about-banner {
        margin: 12px 10px 0;
        border-radius: 20px;
    }

    .mx-about-banner-content {
        padding-top: 24px;
        padding-bottom: 38px;
    }

    .mx-about-breadcrumb {
        margin-bottom: 35px;
        font-size: 10px;
    }

    .mx-about-banner h1 {
        font-size: 56px;
        letter-spacing: -2px;
    }

    .mx-about-banner .bpo-eyebrow {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .mx-about-banner p {
        font-size: 12px;
        max-width: 240px;
    }

    .mx-about-banner-mark {
        width: 45px;
        height: 45px;
        font-size: 27px;
        right: 0;
        bottom: 44px;
    }
}

/* Shared service cards: white front and photographic reverse. */
.mx-about-service-card.mx-about-service-with-image {
    position: relative;
    isolation: auto;
    display: grid;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.mx-about-service-with-image>.mx-about-service-card-body,
.mx-about-service-with-image>.mx-about-service-photo {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 420px;
    margin: 0;
    border-radius: 17px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .7s cubic-bezier(.22, .7, .25, 1);
}

.mx-about-service-with-image>.mx-about-service-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #dce7df;
    transform: perspective(1100px) rotateY(0deg);
}

.mx-about-service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 55px;
}

.mx-about-service-card-top>span {
    font-size: 10px;
    color: #8c9c91;
}

.mx-about-service-grid.mx-about-service-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media(max-width:767px) {
    .mx-about-service-grid.mx-about-service-grid-two {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mx-about-service-grid.mx-about-service-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media(max-width:991px) {
    .mx-about-service-grid.mx-about-service-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:767px) {
    .mx-about-service-grid.mx-about-service-grid-three {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mx-about-services h2 em {
    color: #238765;
}

.mx-about-service-with-image>.mx-about-service-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: #262c38;
    transform: perspective(1100px) rotateY(-180deg);
}

.mx-about-service-photo>img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-about-service-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #172c2520, #172c25e8);
}

.mx-service-back-copy {
    position: absolute;
    inset: auto 24px 28px;
    z-index: 1;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mx-service-back-copy>span:first-child {
    color: #a0e5c7;
    font-size: 8px;
    letter-spacing: 1.4px;
}

.mx-service-back-copy>strong {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.mx-service-back-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ffffff40;
    padding-top: 18px;
    color: #b1ebd2;
    font-size: 11px;
}

.mx-service-back-link>span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #4ebd94;
    color: #173d2e;
    font-size: 18px;
}

@media(hover:hover) and (pointer:fine) {
    .mx-about-service-with-image:hover>.mx-about-service-card-body {
        transform: perspective(1100px) rotateY(180deg);
    }

    .mx-about-service-with-image:hover>.mx-about-service-photo {
        transform: perspective(1100px) rotateY(0deg);
    }
}

.mx-about-service-with-image:focus-visible {
    outline: 2px solid #238765;
    outline-offset: 5px;
    border-radius: 17px;
}

.mx-about-service-with-image:focus-visible>.mx-about-service-card-body {
    transform: perspective(1100px) rotateY(180deg);
}

.mx-about-service-with-image:focus-visible>.mx-about-service-photo {
    transform: perspective(1100px) rotateY(0deg);
}

@media(max-width:767px) {

    .mx-about-service-with-image>.mx-about-service-card-body,
    .mx-about-service-with-image>.mx-about-service-photo {
        min-height: 390px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-about-service-with-image>.mx-about-service-card-body,
    .mx-about-service-with-image>.mx-about-service-photo {
        transition: none;
    }
}

/* FAQ page follows the homepage accordion and inner-page title card. */
.mx-faq-page-section {
    margin-top: 24px;
}

.mx-faq-page-section .mx-faq-intro {
    align-self: start;
}

.mx-faq-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    border-top: 1px solid #dce7df;
    padding-top: 65px;
    padding-bottom: 75px;
}

.mx-faq-next h2 em {
    color: #238765;
}

.mx-faq-next p {
    color: #718077;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 24px;
    max-width: 480px;
}

@media(max-width:767px) {
    .mx-faq-page-section {
        margin-top: 12px;
    }

    .mx-faq-next {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .mx-faq-next p {
        font-size: 13px;
    }
}

/* Keep the FAQ introduction alongside the questions while the section scrolls. */
@media(min-width:768px) {
    .mx-faq-layout>.mx-faq-intro {
        position: sticky;
        top: 125px;
        align-self: start;
    }
}

@media(max-width:767px) {
    .mx-faq-layout>.mx-faq-intro {
        position: static;
    }
}

/* Photographic conversation banner with a desktop parallax background. */
.mx-faq-next-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #26382f;
    background-image: linear-gradient(90deg, rgba(24, 38, 31, .9), rgba(24, 38, 31, .7)), url('../images/pages/faq-banner.jpg');
    background-size: cover;
    background-position: center;
}

.mx-faq-next .bpo-eyebrow {
    color: #9bdcbd;
}

.mx-faq-next h2 {
    color: #fff;
}

.mx-faq-next h2 em {
    color: #93dfbb;
}

.mx-faq-next p {
    color: #d6e4dc;
}

@media(min-width:1024px) and (prefers-reduced-motion:no-preference) {
    .mx-faq-next-banner {
        background-attachment: fixed;
    }
}

@media(max-width:767px) {
    .mx-faq-next-banner {
        background-position: center;
    }
}

.mx-faq-next-banner .mx-faq-next {
    border-top: 0;
}

/* Move the photograph itself as the conversation banner passes the viewport. */
.mx-faq-next-banner {
    background-image: none;
    background-attachment: scroll;
}

.mx-faq-next-banner::before {
    content: '';
    position: absolute;
    inset: -90px 0;
    z-index: -2;
    background: url('../images/pages/faq-banner.jpg') center / cover no-repeat;
    transform: translate3d(0, var(--banner-shift, 0px), 0);
    will-change: transform;
    pointer-events: none;
}

.mx-faq-next-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(24, 38, 31, .9), rgba(24, 38, 31, .7));
    pointer-events: none;
}

@media(prefers-reduced-motion:reduce) {
    .mx-faq-next-banner::before {
        transform: none;
        will-change: auto;
    }
}

/* Contact page uses the shared inner-page banner and homepage visual language. */
.mx-contact-page h2 em {
    color: #238765;
}

.mx-contact-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 55px;
}

.mx-contact-methods>a {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px;
    border: 1px solid #dce8e0;
    border-radius: 18px;
    background: #f3f9f5;
    transition: transform .25s, border-color .25s;
}

.mx-contact-methods>a:hover {
    transform: translateY(-4px);
    border-color: #4ebd94;
}

.mx-contact-methods>a>i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #daebe1;
    border-radius: 50%;
    color: #238765;
    font-size: 22px;
}

.mx-contact-methods>a>div>span {
    font-size: 8px;
    letter-spacing: 1.4px;
    color: #6e8e7a;
}

.mx-contact-methods h3 {
    font-size: 23px;
    font-weight: 500;
    color: #3b414f;
    margin: 7px 0 9px;
    letter-spacing: -.5px;
}

.mx-contact-methods strong {
    color: #238765;
    font-size: 14px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.mx-contact-methods b {
    margin-left: auto;
    color: #238765;
    font-size: 24px;
    font-weight: 400;
}

.mx-contact-page-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 35px;
    align-items: start;
}

.mx-contact-form-card {
    padding: 40px;
    border: 1px solid #dce8e0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 45px #234c3406;
}

.bpo-wrap .mx-contact-form-card h2 {
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.mx-contact-form-card>p {
    font-size: 13px;
    line-height: 1.8;
    color: #75857b;
    margin-bottom: 30px;
}

.mx-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    margin-bottom: 25px;
}

.mx-contact-field-wide {
    grid-column: 1 / -1;
}

.mx-contact-fields label {
    display: block;
    color: #46594c;
    font-size: 11px;
    margin-bottom: 9px;
}

.mx-contact-fields input,
.mx-contact-fields textarea {
    width: 100%;
    border: 1px solid #dce7df;
    border-radius: 10px;
    background: #f6faf7;
    padding: 15px;
    color: #3b414f;
    font: inherit;
    font-size: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.mx-contact-fields textarea {
    min-height: 150px;
    resize: vertical;
}

.mx-contact-fields input:focus,
.mx-contact-fields textarea:focus {
    border-color: #4ebd94;
    box-shadow: 0 0 0 3px #4ebd941a;
}

.mx-contact-fields input::placeholder,
.mx-contact-fields textarea::placeholder {
    color: #8b9b90;
    opacity: 1;
}

.mx-contact-form-note {
    font-size: 10px;
    color: #819386;
    margin: 18px 0 0;
}

.mx-contact-side {
    border-radius: 22px;
    overflow: hidden;
    background: #262c38;
}

.mx-contact-side-photo {
    position: relative;
    height: 300px;
}

.mx-contact-side-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-contact-side-photo>span {
    position: absolute;
    inset: auto 0 0;
    padding: 60px 30px 25px;
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.8px;
    background: linear-gradient(transparent, #26382ed9);
}

.mx-contact-side-photo em {
    color: #9cdec0;
    font-style: normal;
}

.mx-contact-side-copy {
    padding: 30px;
}

.mx-contact-side-copy .bpo-eyebrow {
    color: #8cd6b5;
    font-size: 8px;
    letter-spacing: 1.2px;
    margin-bottom: 18px;
}

.mx-contact-side-copy h3 {
    color: #fff;
    font-size: 29px;
    font-weight: 500;
    letter-spacing: -.7px;
    margin-bottom: 16px;
}

.mx-contact-side-copy>p {
    color: #b0c3b6;
    font-size: 12px;
    line-height: 1.9;
}

.mx-contact-side-copy ol {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.mx-contact-side-copy li {
    display: flex;
    gap: 14px;
    color: #cfdfd5;
    font-size: 11px;
    padding: 13px 0;
    border-top: 1px solid #ffffff15;
}

.mx-contact-side-copy li>span {
    color: #79cba6;
    font-size: 9px;
}

.mx-contact-follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 12px;
}

.mx-contact-follow>span {
    font-size: 8px;
    letter-spacing: 1.2px;
    color: #91b09d;
}

.mx-contact-follow>div {
    display: flex;
    gap: 8px;
}

.mx-contact-follow a {
    width: 34px;
    height: 34px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #b9dec9;
    font-size: 13px;
    transition: background .2s, color .2s;
}

.mx-contact-follow a:hover {
    background: #4ebd94;
    color: #163e2d;
}

@media(max-width:1100px) {
    .mx-contact-page-grid {
        gap: 24px;
        grid-template-columns: 1.3fr 1fr;
    }

    .mx-contact-form-card {
        padding: 28px;
    }

    .mx-contact-methods>a {
        padding: 24px;
        gap: 16px;
    }
}

@media(max-width:767px) {
    .mx-contact-methods {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 28px 0 35px;
    }

    .mx-contact-methods>a {
        padding: 22px;
        gap: 15px;
    }

    .mx-contact-methods>a>i {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .mx-contact-methods h3 {
        font-size: 21px;
    }

    .mx-contact-methods strong {
        font-size: 12px;
    }

    .mx-contact-methods>a>div>span {
        font-size: 7px;
    }

    .mx-contact-page-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mx-contact-form-card {
        padding: 24px 16px;
    }

    .bpo-wrap .mx-contact-form-card h2 {
        font-size: 33px;
    }

    .mx-contact-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mx-contact-captcha {
        margin-left: -5px;
    }

    .mx-contact-side-photo {
        height: 270px;
    }

    .mx-contact-side-copy {
        padding: 25px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .mx-contact-methods>a,
    .mx-contact-fields input,
    .mx-contact-fields textarea,
    .mx-contact-follow a {
        transition: none;
    }
}

/* Four parent service pages share the homepage components. */
.mx-category-page h2 em {
    color: #238765;
}

.mx-category-page .mx-about-banner h1 {
    max-width: 1100px;
    font-size: clamp(46px, 5.6vw, 80px);
}

.mx-category-page .mx-about-banner p {
    max-width: 650px;
}

.mx-category-intro {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 75px;
    align-items: center;
}

.mx-category-photo {
    height: 520px;
    position: relative;
    border-radius: 85px 20px 20px 20px;
    overflow: hidden;
}

.mx-category-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-category-photo>div {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: flex;
    gap: 17px;
    align-items: center;
    padding: 22px;
    border-radius: 14px;
    background: #4ebd94;
    color: #173c2d;
}

.mx-category-photo i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.mx-category-photo>div>span {
    font-size: 14px;
    line-height: 1.5;
}

.mx-category-copy>p {
    color: #718077;
    font-size: 14px;
    line-height: 1.95;
    margin-top: 22px;
}

.mx-category-highlights {
    display: flex;
    gap: 30px;
    margin: 28px 0;
    border-top: 1px solid #dfe9e2;
    border-bottom: 1px solid #dfe9e2;
    padding: 24px 0;
}

.mx-category-highlights>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mx-category-highlights strong {
    color: #238765;
    font-size: 36px;
    line-height: 1;
    font-weight: 500;
}

.mx-category-highlights i {
    color: #238765;
    font-size: 27px;
}

.mx-category-highlights span {
    color: #74877b;
    font-size: 10px;
    max-width: 90px;
    line-height: 1.7;
}

.mx-category-copy .bpo-actions {
    flex-wrap: wrap;
    gap: 22px;
}

.mx-category-copy .bpo-button {
    font-size: 12px;
}

.mx-category-copy .bpo-text-link {
    font-size: 11px;
}

.mx-category-services {
    background: #f2f7f3;
}

.mx-category-services .mx-directory-grid {
    margin-top: 40px;
}

.mx-category-process {
    background: #262c38;
    margin: 24px 16px 0;
    border-radius: 26px;
}

.mx-category-process h2 {
    color: #fff;
}

.mx-category-process h2 em,
.mx-category-process .bpo-eyebrow {
    color: #91dbb9;
}

.mx-category-process .bpo-section-heading>p {
    color: #adbbb2;
}

.mx-category-process .mx-process-grid article {
    /* background: #ffffff06; */
    background: transparent;
    border-color: #ffffff21;
}

.mx-category-process .mx-process-grid h3 {
    color: #fff;
}

.mx-category-process .mx-process-grid p {
    color: #adbbb2;
}

.mx-category-process .mx-process-grid article>span,
.mx-category-process .mx-process-grid article>i {
    color: #91dbb9;
}

@media(max-width:1100px) {
    .mx-category-intro {
        gap: 40px;
    }

    .mx-category-photo {
        height: 540px;
    }
}

@media(max-width:767px) {
    .mx-category-page .mx-about-banner h1 {
        font-size: 44px;
        letter-spacing: -1.5px;
        overflow-wrap: anywhere;
    }

    .mx-category-page .mx-about-breadcrumb {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mx-category-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mx-category-photo {
        height: 350px;
        border-top-left-radius: 65px;
    }

    .mx-category-photo>div {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 18px;
    }

    .mx-category-photo>div>span {
        font-size: 12px;
    }

    .mx-category-copy>p {
        font-size: 13px;
    }

    .mx-category-highlights {
        gap: 24px;
    }

    .mx-category-process {
        margin: 15px 8px 0;
        border-radius: 20px;
    }

    .mx-category-services .mx-directory-grid {
        margin-top: 28px;
    }
}

/* Service detail pages: shared across every service catalogue. */
.mx-detail-hero {
    margin: 20px 24px 0;
    padding: 30px 0 0;
    border-radius: 26px;
    background: #262c38;
    color: #fff;
    overflow: hidden
}

.mx-detail-hero .mx-about-breadcrumb {
    flex-wrap: wrap;
    margin-bottom: 40px
}

.mx-detail-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: center
}

.mx-detail-hero-copy {
    padding: 12px 0 28px;
    min-width: 0
}

.mx-detail-hero .bpo-eyebrow {
    color: #9adbbf;
    font-size: 10px;
    line-height: 1.8
}

.mx-detail-hero h1 {
    font-size: clamp(38px, 4.4vw, 68px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2.4px;
    color: #fff;
    margin: 0 0 24px;
    overflow-wrap: anywhere
}

.mx-detail-hero h1 em {
    color: #85d6b5;
    font-style: normal
}

.mx-detail-hero-copy>p {
    font-size: 16px;
    line-height: 1.85;
    color: #c1cec8;
    max-width: 580px
}

.mx-detail-scope-link {
    color: #d8eee3;
    font-size: 13px;
    display: inline-flex;
    gap: 14px;
    align-items: center
}

.mx-detail-scope-link:hover {
    color: #85d6b5
}

.mx-detail-hero-photo {
    position: relative;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    align-self: stretch;
    min-height: 370px
}

.mx-detail-hero-photo>img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover
}

.mx-detail-hero-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, #172b25e6)
}

.mx-detail-photo-caption {
    position: absolute;
    z-index: 1;
    bottom: 26px;
    left: 26px;
    right: 26px;
    display: flex;
    gap: 16px;
    align-items: center
}

.mx-detail-photo-caption>i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: #4ebd94;
    color: #183e30;
    border-radius: 12px;
    font-size: 21px;
    flex-shrink: 0
}

.mx-detail-photo-caption span {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #b2dcca;
    margin-bottom: 7px
}

.mx-detail-photo-caption strong {
    font-size: 21px;
    font-weight: 500;
    color: #fff
}

.mx-detail-principles {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding: 24px 0;
    border-top: 1px solid #ffffff24;
    color: #c5d6cd;
    font-size: 12px
}

.mx-detail-principles span {
    display: flex;
    gap: 12px;
    align-items: center
}

.mx-detail-principles i {
    color: #85d6b5
}

.mx-service-detail .bpo-section-nav {
    margin-top: 12px
}

.mx-service-detail .bpo-section-nav>.bpo-wrap {
    gap: 36px
}

.mx-service-detail .bpo-section-nav a {
    font-size: 12px;
    font-weight: 500;
    border-bottom: 2px solid transparent
}

.mx-service-detail .bpo-section-nav a:hover,
.mx-service-detail .bpo-section-nav a:focus-visible {
    border-bottom-color: #238765
}

.bpo-site .mx-service-detail section[id] {
    scroll-margin-top: 180px
}

.mx-service-detail .bpo-intro {
    gap: 70px
}

.mx-service-detail .bpo-intro .bpo-lead {
    font-size: 18px;
    color: #394b43
}

.mx-service-detail #scope {
    background: #f2f7f4
}

.mx-service-detail .bpo-scope-grid {
    gap: 22px
}

.mx-service-detail .bpo-scope-card {
    padding: 32px;
    border: 1px solid #dce7df;
    border-radius: 18px;
    box-shadow: 0 8px 28px #233b2c04
}

.mx-service-detail .bpo-scope-card .bpo-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: #edf6f0;
    border-radius: 12px;
    color: #238765;
    font-size: 12px
}

.mx-service-detail .bpo-scope-card h3 {
    font-size: 24px;
    letter-spacing: -.5px;
    line-height: 1.3
}

.mx-service-detail .bpo-scope-card p {
    font-size: 14px
}

.mx-service-detail .bpo-check-list li {
    font-size: 13px
}

.mx-service-detail .bpo-team-panel {
    gap: 60px;
    align-items: center
}

.mx-service-detail .bpo-role-tags span {
    border-radius: 30px;
    background: #f4f8f5;
    padding: 10px 16px
}

.mx-service-detail .bpo-deliverables {
    padding: 36px;
    background: #edf6f0;
    border: 1px solid #dce7df;
    border-radius: 20px
}

.mx-service-detail #workflow {
    background: #262c38;
    color: #fff;
    border-radius: 26px;
    margin: 0 24px
}

.mx-service-detail #workflow .bpo-eyebrow {
    color: #9adbbf
}

.mx-service-detail #workflow h2 {
    color: #fff
}

.mx-service-detail #workflow h2 em {
    color: #85d6b5
}

.mx-service-detail .bpo-steps {
    gap: 22px;
    margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr))
}

.mx-service-detail .bpo-steps article {
    padding: 28px;
    border: 1px solid #dce7df;
    border-radius: 16px;
    background: #f8faf8
}

.mx-service-detail .bpo-steps article>span {
    font-size: 12px;
    color: #238765
}

.mx-service-detail .bpo-steps h3 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.4px;
    margin-top: 24px
}

.mx-service-detail .bpo-steps p {
    font-size: 14px;
    margin-bottom: 0
}

.mx-service-detail #workflow .bpo-steps article {
    border-color: #ffffff24;
    background: #ffffff05
}

.mx-service-detail #workflow .bpo-steps h3 {
    color: #fff
}

.mx-service-detail #workflow .bpo-steps p {
    color: #bdcec5
}

.mx-service-detail #workflow .bpo-steps article>span {
    color: #85d6b5
}

.mx-service-detail .bpo-example {
    gap: 60px
}

.mx-service-detail .bpo-example .bpo-lead {
    font-size: 18px
}

.mx-service-detail .bpo-faq {
    max-width: none
}

.mx-service-detail .bpo-faq details {
    padding: 24px 0
}

.mx-service-detail .bpo-faq summary {
    font-size: 20px
}

.mx-service-detail .bpo-faq p {
    font-size: 14px
}

.mx-service-detail .bpo-industries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px
}

.mx-service-detail .bpo-industries>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid #dce7df;
    background: #fff;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    transition: background .2s, border-color .2s
}

.mx-service-detail .bpo-industries>a:hover {
    background: #e2f2e9;
    border-color: #72b698
}

.mx-service-detail .bpo-industries>a span {
    color: #238765
}

.mx-detail-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 60px;
    align-items: start
}

.mx-detail-content-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 36px
}

.mx-detail-rich-content {
    min-width: 0;
    overflow-wrap: anywhere
}

.mx-detail-rich-content img {
    max-width: 100%;
    height: auto
}

.mx-detail-rich-content h2,
.mx-detail-rich-content h3 {
    margin-top: 30px;
    line-height: 1.25
}

.mx-detail-rich-content p,
.mx-detail-rich-content li {
    line-height: 1.85;
    color: #53655e
}

.mx-detail-sidebar-panel {
    border: 1px solid #dce7df;
    border-radius: 18px;
    padding: 28px
}

.mx-detail-sidebar-panel h2 {
    font-size: 28px
}

.mx-detail-sidebar-panel nav a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #dce7df;
    font-size: 14px;
    line-height: 1.5;
    color: #394b43
}

.mx-detail-sidebar-contact {
    margin-top: 20px;
    padding: 28px;
    border-radius: 18px;
    background: #262c38;
    color: #fff
}

.mx-detail-sidebar-contact .bpo-eyebrow {
    color: #9adbbf
}

.mx-detail-sidebar-contact h3 {
    font-size: 26px;
    line-height: 1.25;
    color: #fff
}

.mx-detail-sidebar-contact p {
    font-size: 14px;
    color: #bdcec5
}

.mx-detail-sidebar-contact .bpo-button {
    font-size: 12px;
    padding: 14px 18px
}

@media(max-width:1000px) {
    .mx-detail-hero-grid {
        gap: 32px
    }

    .mx-detail-hero h1 {
        font-size: 44px
    }

    .mx-detail-hero .bpo-actions {
        gap: 20px;
        flex-wrap: wrap
    }

    .mx-service-detail .bpo-intro,
    .mx-service-detail .bpo-team-panel,
    .mx-service-detail .bpo-example {
        gap: 32px
    }

    .mx-service-detail .bpo-industries {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .mx-detail-editorial {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 30px
    }
}

@media(max-width:767px) {
    .mx-detail-hero {
        margin: 12px 12px 0;
        border-radius: 20px;
        padding-top: 24px
    }

    .mx-detail-hero .mx-about-breadcrumb {
        font-size: 10px;
        gap: 8px;
        margin-bottom: 28px
    }

    .mx-detail-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px
    }

    .mx-detail-hero-copy {
        padding: 0
    }

    .mx-detail-hero h1 {
        font-size: clamp(34px, 8vw, 46px);
        letter-spacing: -1.5px
    }

    .mx-detail-hero-copy>p {
        font-size: 14px
    }

    .mx-detail-hero-photo {
        min-height: 280px
    }

    .mx-detail-principles {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 28px;
        font-size: 11px
    }

    .mx-detail-photo-caption {
        left: 20px;
        bottom: 20px
    }

    .mx-service-detail .bpo-scope-card {
        padding: 25px
    }

    .mx-service-detail #workflow {
        margin: 0 12px;
        border-radius: 20px
    }

    .mx-service-detail .bpo-deliverables {
        padding: 26px
    }

    .mx-service-detail .bpo-industries {
        grid-template-columns: minmax(0, 1fr)
    }

    .mx-service-detail .bpo-faq summary {
        font-size: 17px
    }

    .mx-detail-editorial {
        grid-template-columns: minmax(0, 1fr)
    }

    .mx-service-detail .bpo-section-nav>.bpo-wrap {
        gap: 24px
    }
}

/* Service stories share the Home and About editorial design. */
.mx-service-story .mx-about-banner h1 {
    max-width: 1000px;
    font-size: clamp(38px, 5vw, 72px);
    overflow-wrap: anywhere;
}

.mx-service-story .mx-about-banner p {
    max-width: 720px;
}

.mx-service-story .mx-about-hero {
    padding-top: 80px;
}

.mx-service-story .mx-about-hero-copy>p {
    max-width: 560px;
}

.mx-service-story .mx-about-hero .bpo-actions {
    flex-wrap: wrap;
    gap: 20px;
}

.mx-service-story .mx-about-hero-visual {
    height: 540px;
}

.mx-story-scope {
    background: #f2f7f3;
}

.mx-scope-slider { overflow: hidden; padding: 4px 2px; }
.mx-scope-slider .swiper-wrapper { align-items: stretch; }
.mx-scope-slider .mx-process-grid.swiper-wrapper { display: flex; gap: 0; }
.mx-scope-slider .swiper-slide { height: auto; box-sizing: border-box; }
.mx-scope-slider .mx-story-scope-card { height: auto; box-sizing: border-box; }
.mx-scope-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }
.mx-scope-pagination .swiper-pagination-bullet { width: 10px; height: 10px; padding: 0; margin: 0 !important; border: 0; border-radius: 50%; opacity: 1; background: #c9d9d1; transition: width .25s, background .25s; }
.mx-scope-pagination .swiper-pagination-bullet-active { width: 30px; border-radius: 20px; background: var(--bpo-green); }
.mx-scope-pagination button:focus-visible { outline: 2px solid var(--bpo-ink); outline-offset: 4px; }
@media(prefers-reduced-motion:reduce) { .mx-scope-pagination .swiper-pagination-bullet { transition: none; } }

.mx-story-scope-grid {
    display: grid;
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mx-story-scope-card {
    background: #fff;
    border: 1px solid #dce7df;
    border-radius: 18px;
    padding: 34px;
    transition: border-color .2s, box-shadow .2s;
}

.mx-story-scope-card:hover {
    border-color: #8fbea6;
    box-shadow: 0 12px 32px #253b2e08;
}

.mx-story-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

.mx-story-card-top>span {
    font-size: 11px;
    color: #819187;
}

.mx-story-card-top>i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #edf6f0;
    color: #238765;
    font-size: 20px;
}

.mx-story-scope-card h3 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.7px;
    margin: 0 0 15px;
    color: #3b414f;
}

.mx-story-scope-card p {
    font-size: 14px;
    margin-bottom: 0;
}

.mx-service-story .bpo-role-tags {
    margin-bottom: 30px;
}

.mx-service-detail.mx-service-story #workflow {
    background: #f2f7f3;
    color: #3b414f;
    border-radius: 0;
    margin: 0;
}

.mx-service-story .mx-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.mx-story-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.mx-story-outcome {
    background: #edf6f0;
    padding: 32px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mx-story-outcome:nth-child(3n + 2) {
    background: #dcecb8;
}

.mx-story-outcome:nth-child(3n) {
    background: #262c38;
    color: #fff;
}

.mx-story-outcome>span {
    font-size: 9px;
    letter-spacing: 1.3px;
    line-height: 1.8;
}

.mx-story-outcome>i {
    font-size: 35px;
    margin: 38px 0;
    color: #238765;
}

.mx-story-outcome h3 {
    color: inherit;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.6px;
    line-height: 1.25;
    margin: 0 0 15px;
}

.mx-story-outcome p {
    font-size: 14px;
    margin-bottom: 0;
}

.mx-story-outcome:nth-child(3n)>i {
    color: #85d6b5;
}

.mx-story-outcome:nth-child(3n) p {
    color: #c0d1c7;
}

.mx-story-example {
    background: #f2f7f3;
}

.mx-story-example .mx-statement {
    padding-top: 0;
    padding-bottom: 0;
}

.mx-story-example .mx-statement h2 {
    max-width: 950px;
    font-size: clamp(34px, 4vw, 60px);
}

.mx-story-example .mx-statement-bottom p {
    max-width: 800px;
}

.mx-story-example .mx-caption {
    margin-top: 28px;
}

.mx-story-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
}

.mx-story-related-grid>a {
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid #dce7df;
    padding: 24px 0;
    color: #3b414f;
    font-size: 14px;
    line-height: 1.5;
}

.mx-story-related-grid>a>i {
    color: #238765;
    width: 24px;
    flex-shrink: 0;
    font-size: 19px;
}

.mx-story-related-grid>a>b {
    margin-left: auto;
    color: #238765;
    font-size: 20px;
    font-weight: 400;
}

.mx-story-related-grid>a:hover {
    color: #238765;
    border-color: #238765;
}

@media(max-width:1000px) {

    .mx-story-outcome-grid,
    .mx-story-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mx-service-story .mx-about-hero-visual {
        height: 480px;
    }
}

@media(max-width:767px) {
    .mx-service-story .mx-about-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .mx-service-story .mx-about-hero-visual {
        height: 390px;
    }

    .mx-story-scope-grid,
    .mx-story-outcome-grid,
    .mx-story-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mx-story-scope-card,
    .mx-story-outcome {
        padding: 26px;
    }

    .mx-story-card-top {
        margin-bottom: 26px;
    }

    .mx-story-scope-card h3,
    .mx-story-outcome h3 {
        font-size: 23px;
    }

    .mx-story-outcome>i {
        margin: 28px 0;
    }
}

.mx-service-detail.mx-service-story #workflow .bpo-eyebrow {
    color: #406658;
}

.mx-service-detail.mx-service-story #workflow h2 {
    color: #3b414f;
}

.mx-service-detail.mx-service-story #workflow h2 em {
    color: #238765;
}

/* Homepage-led service experience, with one distinct photograph per service. */
.mx-service-home-hero {
    min-height: 760px;
}

.mx-service-home-hero>img.mx-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mx-service-home-hero .mx-hero-shade {
    background: linear-gradient(90deg, #17251ff0 0%, #17251fc9 48%, #17251f35 100%), linear-gradient(0deg, #14231de6, transparent 45%);
}

.mx-service-home-hero .mx-hero-content {
    padding-top: 42px;
    padding-bottom: 180px;
}

.mx-service-home-hero .mx-about-breadcrumb {
    flex-wrap: wrap;
    font-size: 10px;
    margin-bottom: 35px;
    color: #d1e1d7;
}

.mx-service-home-hero .mx-pill {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.7;
}

.mx-service-home-hero h1 {
    max-width: 880px;
    font-size: clamp(42px, 5.2vw, 78px);
    line-height: 1.06;
    overflow-wrap: anywhere;
}

.mx-service-home-hero .mx-hero-content>p {
    max-width: 620px;
}

.mx-service-home-hero .mx-hero-bottom strong {
    font-size: 25px;
}

.mx-service-team-board {
    padding: 38px;
    border-radius: 28px 85px 28px 28px;
    background: #edf5ef;
    border: 1px solid #dce7df;
}

.mx-service-team-board>.bpo-eyebrow {
    font-size: 10px;
}

.mx-service-team-hub {
    text-align: center;
    padding: 18px 14px 32px;
    border-bottom: 1px solid #c8dccf;
}

.mx-service-team-hub>i {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #4ebd94;
    color: #204c38;
    font-size: 32px;
    box-shadow: 0 0 0 12px #4ebd9415;
}

.mx-service-team-hub h3 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -.8px;
    font-weight: 500;
    color: #3b414f;
}

.mx-service-team-hub>span {
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #5a7967;
}

.mx-service-team-roles {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.mx-service-team-roles>div {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 17px;
    border: 1px solid #dce7df;
    background: #fff;
    border-radius: 12px;
}

.mx-service-team-roles span {
    font-size: 10px;
    color: #819187;
}

.mx-service-team-roles strong {
    font-size: 13px;
    font-weight: 500;
    color: #3b414f;
}

.mx-service-team-roles i {
    font-size: 20px;
    margin-left: auto;
    color: #238765;
    font-style: normal;
}

.mx-service-team-board>p {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 24px 0 0;
    font-size: 12px;
}

.mx-service-faq-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #dcecb8;
    color: #238765;
    font-size: 28px;
}

@media(max-width:1000px) {
    .mx-service-home-hero .mx-hero-bottom {
        gap: 32px;
    }

    .mx-service-home-hero .mx-hero-bottom strong {
        font-size: 20px;
    }

    .mx-service-team-board {
        padding: 28px;
    }
}

@media(max-width:767px) {
    .mx-service-home-hero {
        min-height: 0;
    }

    .mx-service-home-hero .mx-hero-content {
        padding-top: 30px;
        padding-bottom: 35px;
    }

    .mx-service-home-hero .mx-about-breadcrumb {
        margin-bottom: 30px;
        font-size: 9px;
        gap: 8px;
    }

    .mx-service-home-hero h1 {
        font-size: clamp(36px, 9vw, 52px);
        letter-spacing: -1.8px;
    }

    .mx-service-home-hero .mx-hero-content>p {
        font-size: 15px;
    }

    .mx-service-home-hero .mx-hero-bottom {
        position: relative;
        bottom: auto;
        padding: 24px 0;
        gap: 22px;
        flex-wrap: wrap;
    }

    .mx-service-home-hero .mx-scroll {
        margin-left: 0;
    }

    .mx-service-home-hero .mx-hero-bottom strong {
        font-size: 18px;
    }

    .mx-service-team-board {
        padding: 26px;
        border-top-right-radius: 55px;
    }

    .mx-service-team-hub h3 {
        font-size: 24px;
    }
}


/* Inner pages share the homepage floating header and keep clear text contrast. */
.bpo-site:not(.bpo-home) .bpo-header {
    background: #ffffffed;
    backdrop-filter: blur(18px);
    box-shadow: 0 5px 35px #1e222c12;
}

.bpo-site:not(.bpo-home) #smooth-content {
    padding-top: 112px !important;
}

@media(max-width:767px) {
    .bpo-site:not(.bpo-home) #smooth-content {
        padding-top: 90px !important;
    }
}

/* Policy documents use the shared inner-page visual system. */
.mx-policy-page .mx-about-banner h1 {
    font-size: clamp(38px, 5vw, 72px);
    max-width: 1000px;
}

.mx-policy-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.mx-policy-sidebar {
    position: sticky;
    top: 140px;
    display: grid;
    gap: 24px;
}

.mx-policy-toc {
    padding: 28px;
    background: #f1f7f3;
    border: 1px solid #dce7df;
    border-radius: 18px;
}

.mx-policy-toc[hidden] {
    display: none;
}

.mx-policy-toc .bpo-eyebrow {
    font-size: 9px;
    margin-bottom: 18px;
}

.mx-policy-toc h2 {
    font-size: 24px;
    letter-spacing: -.6px;
    margin-bottom: 20px;
}

.mx-policy-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 42vh;
    max-height: 33vh;
    overflow-y: auto;
}

.mx-policy-toc li+li {
    border-top: 1px solid #dce7df;
}

.mx-policy-toc a {
    display: block;
    padding: 12px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #53655e;
}

.mx-policy-toc a:hover {
    color: #238765;
}

.mx-policy-help {
    padding: 28px;
    border: 1px solid #dce7df;
    border-radius: 18px;
}

.mx-policy-help>i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: #dcecb8;
    color: #238765;
    font-size: 23px;
    border-radius: 50%;
    margin-bottom: 24px;
}

.mx-policy-help h2 {
    font-size: 26px;
    letter-spacing: -.8px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.mx-policy-help p {
    font-size: 14px;
}

.mx-policy-help a {
    font-size: 13px;
}

.mx-policy-document {
    min-width: 0;
    padding: 42px;
    border: 1px solid #dce7df;
    border-radius: 22px;
    box-shadow: 0 12px 45px #263e3005;
}

.mx-policy-document-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: .5px;
    color: #648070;
    padding-bottom: 26px;
    border-bottom: 1px solid #dce7df;
    margin-bottom: 30px;
}

.mx-policy-content {
    color: #53655e;
    font-size: 16px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.mx-policy-content p,
.mx-policy-content li {
    font-size: 16px;
    line-height: 1.9;
    color: #53655e;
}

.mx-policy-content h1,
.mx-policy-content h2,
.mx-policy-content h3,
.mx-policy-content h4 {
    color: #3b414f;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.7px;
    margin: 36px 0 18px;
    scroll-margin-top: 150px;
}

.mx-policy-content h1,
.mx-policy-content h2 {
    font-size: 29px;
}

.mx-policy-content h3 {
    font-size: 24px;
}

.mx-policy-content h4 {
    font-size: 20px;
}

.mx-policy-content> :first-child {
    margin-top: 0;
}

.mx-policy-content ul,
.mx-policy-content ol {
    padding-left: 24px;
    margin: 18px 0 26px;
}

.mx-policy-content li {
    padding-left: 5px;
    margin-bottom: 10px;
}

.mx-policy-content li::marker {
    color: #238765;
}

.mx-policy-content a {
    color: #238765;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mx-policy-content strong {
    color: #3b414f;
}

.mx-policy-content img {
    max-width: 100%;
    height: auto;
}

.mx-policy-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.mx-policy-content td,
.mx-policy-content th {
    padding: 14px;
    border: 1px solid #dce7df;
}

.mx-policy-next {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    border-top: 1px solid #dce7df;
    padding-top: 40px;
    padding-bottom: 65px;
}

.mx-policy-next h2 {
    font-size: 32px;
    margin: 0;
    letter-spacing: -1px;
}

.mx-policy-next .bpo-eyebrow {
    margin-bottom: 14px;
}

.mx-policy-next nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.mx-policy-next a {
    font-size: 14px;
    color: #238765;
}

@media(max-width:1000px) {
    .mx-policy-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 28px;
    }

    .mx-policy-document {
        padding: 30px;
    }
}

@media(max-width:767px) {
    .mx-policy-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .mx-policy-sidebar {
        position: static;
    }

    .mx-policy-help {
        display: none;
    }

    .mx-policy-toc {
        padding: 24px;
    }

    .mx-policy-toc ol {
        max-height: 230px;
    }

    .mx-policy-document {
        padding: 24px;
        border-radius: 18px;
    }

    .mx-policy-content p,
    .mx-policy-content li {
        font-size: 15px;
    }

    .mx-policy-content h1,
    .mx-policy-content h2 {
        font-size: 26px;
    }

    .mx-policy-next {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 45px;
    }
}

.mx-policy-content .content-para-number {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 18px;
}

.mx-policy-content .content-para-number h4 {
    margin: 0;
    font-size: 23px;
}

.mx-policy-content .content-para-number>strong {
    color: #238765;
    font-size: 15px;
}

.mx-policy-content .icon-list-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.mx-policy-content .icon-list-title>i {
    color: #238765;
    font-size: 11px;
}

.mx-policy-content .icon-list-title>p {
    margin-bottom: 0;
}

.mx-policy-content .blog-description {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Arrow-led buttons: the icon colour flows behind the label on hover. */
.mx-fa-arrow-up-right::before {
    display: inline-block;
    transform: rotate(-45deg);
}

.bpo-button:has(.fa-arrow-right) {
    isolation: isolate;
    padding: 10px 10px 10px 22px;
    gap: 16px;
    transition: color .35s, box-shadow .35s, transform .35s;
}

.bpo-button:has(.fa-arrow-right)::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    z-index: -1;
    background: #3b414f;
    border-radius: 100px;
    transition: width .3s cubic-bezier(.22, 1, .36, 1), height .3s cubic-bezier(.22, 1, .36, 1), left .3s cubic-bezier(.22, 1, .36, 1), right .3s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.bpo-button:has(.fa-arrow-right)>span:has(.fa-arrow-right) {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 19px;
    transform: none;
}

.bpo-button:has(.mx-btn-arrow) {
    padding: 10px 22px 10px 10px;
}

.bpo-button:has(.mx-btn-arrow)::before {
    left: 10px;
    right: auto;
}

.bpo-button:has(.fa-arrow-right):is(:hover, :focus-visible, .is-active) {
    color: #fff !important;
    background: #4ebd94;
}

.bpo-button:has(.fa-arrow-right):is(:hover, :focus-visible, .is-active)::before {
    width: 100%;
    height: 100%;
    right: 0;
}

.bpo-button:has(.mx-btn-arrow):is(:hover, :focus-visible)::before {
    left: 0;
    right: auto;
}

.bpo-button .fa-arrow-right {
    display: inline-block;
    transition: transform .35s;
}

.bpo-button:is(:hover, :focus-visible, .is-active) .fa-arrow-right {
    transform: translate(2px, -2px);
}

@media(prefers-reduced-motion:reduce) {

    .bpo-button:has(.fa-arrow-right)::before,
    .bpo-button .fa-arrow-right {
        transition: none;
    }
}

/* Two service areas share a balanced selector in the menu and directory. */
.mx-two-service-menu .mx-mega-panel {
    width: min(1280px, calc(100vw - 112px));
    top: calc(100% + 14px);
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    max-height: calc(100svh - 150px);
}
.mx-two-service-menu[open]::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 15px; }

.mx-two-service-menu .mx-mega-browser {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 0;
}

.mx-two-service-menu .mx-mega-tabs {
    display: flex;
    flex-direction: row;
    align-self: start;
    gap: 12px;
    padding: 12px;
    background: var(--bpo-soft);
    border: 0;
    border-radius: 13px;
}

.mx-two-service-menu .mx-mega-tabs button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 90px;
    padding: 15px;
    border: 1px solid #dce7e0;
    background: var(--bpo-soft);
}

.mx-two-service-menu .mx-mega-tabs button>span:first-of-type {
    min-width: 0;
    font-size: 16px;
    line-height: 1.35;
}

.mx-two-service-menu .mx-mega-tabs button small {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 7px;
}

.mx-two-service-menu .mx-mega-tabs button>i {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

.mx-two-service-menu .mx-mega-tabs button[aria-selected="true"] {
    background: var(--bpo-green);
    border-color: var(--bpo-green);
    color: var(--bpo-ink);
    box-shadow: none;
}

.mx-two-service-menu .mx-mega-tabs button[aria-selected="true"] small {
    color: var(--bpo-ink);
}

.mx-two-service-menu .mx-mega-tabs button[aria-selected="true"]>i {
    background: #fff;
    color: var(--bpo-ink);
    transform: none;
}

.mx-two-service-menu .mx-mega-tabs button[aria-selected="true"]>span:last-child {
    color: var(--bpo-ink);
}

.mx-two-service-menu .mx-mega-result-heading {
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 0 20px;
}
.mx-two-service-menu .mx-mega-result-heading>div { min-width: 0; }
.mx-two-service-menu .mx-mega-result-heading p { max-width: 590px; font-size: 12px; line-height: 1.7; }
.mx-two-service-menu .mx-mega-result-heading>a { background: var(--bpo-green); color: var(--bpo-ink); padding: 12px 16px; flex-shrink: 0; }
.mx-two-service-menu .mx-mega-link-image { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.mx-two-service-menu .mx-mega-link-title { flex: 1; font-size: 12px; font-weight: 500; line-height: 1.5; }

.mx-two-service-menu .mx-mega-result-heading h3 {
    font-size: 22px;
}

.mx-two-service-menu .mx-mega-service-panel ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 20px;
    max-height: 310px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b5dccc transparent;
    padding-right: 5px;
}

.mx-two-service-menu .mx-mega-service-panel li a {
    height: 100%;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    justify-content: flex-start;
    padding: 10px;
    border: 1px solid #edf1ee;
}
@media (max-width:1199px) {
    .mx-two-service-menu .mx-mega-panel { width: calc(100vw - 64px); }
    .mx-two-service-menu .mx-mega-service-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mx-two-service-menu .mx-mega-browser { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mx-two-service-menu .mx-mega-result-heading { flex-wrap: wrap; gap: 12px; }
    .mx-two-service-menu .mx-mega-tabs button>span:first-of-type { font-size: 14px; }
}

.mx-two-service-menu .mx-mega-service-panel li a:hover {
    background: var(--bpo-soft);
}

.mx-two-service-directory {
    scroll-margin-top: 110px;
}

.mx-directory-heading-row {
    display: grid;
    /* grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr); */
    grid-template-columns: minmax(0, 1.1fr) minmax(560px, .9fr);
    align-items: end;
    gap: 48px;
    margin-bottom: 34px;
}

.mx-directory-heading-row .bpo-section-heading {
    margin-bottom: 0;
}

.bpo-site .mx-directory-heading-row .bpo-section-heading>p {
    max-width: 520px;
    white-space: normal;
}

.mx-two-service-directory .mx-directory-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.mx-two-service-directory .mx-directory-tabs button {
    position: relative;
    overflow: visible;
    padding: 27px 24px;
    gap: 16px;
    min-width: 0;
    min-height: 142px;
    border-color: #cfe0d8;
    border-radius: 18px;
    box-shadow: 0 10px 28px #29483d0a;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    flex-direction: column;
    align-items: start;
}

.mx-two-service-directory .mx-directory-tabs button:hover {
    transform: translateY(-3px);
    border-color: #8fcab4;
    box-shadow: 0 16px 36px #29483d16;
}

.mx-two-service-directory .mx-directory-tabs button>i {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    height: 52px;
    background: var(--bpo-soft);
    border: 1px solid #d9e9e2;
    border-radius: 14px;
    font-size: 22px;
    aspect-ratio: 1;
}

.mx-directory-tab-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.mx-directory-tab-copy strong {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.4px;
}

.mx-directory-tab-copy>span {
    font-size: 12px;
    line-height: 1.5;
    color: #65766c;
}

.mx-two-service-directory .mx-directory-tabs button small {
    position: absolute;
    top: -14px;
    right: 16px;
    z-index: 2;
    font-size: 10px;
    line-height: 1.4;
    padding: 7px 12px;
    margin: 0;
    border: 1px solid #dce7e0;
    background: #fff;
    box-shadow: 0 7px 18px #29483d12;
    white-space: nowrap;
}

.mx-two-service-directory .mx-directory-tabs button[aria-selected="true"] {
    background: var(--bpo-green);
    border-color: var(--bpo-green);
    color: var(--bpo-ink);
    box-shadow: 0 14px 34px #23876524;
}

.mx-two-service-directory .mx-directory-tabs button[aria-selected="true"] .mx-directory-tab-copy>span {
    color: var(--bpo-ink);
}

.mx-two-service-directory .mx-directory-tabs button[aria-selected="true"]>i {
    background: white;
    color: var(--bpo-ink);
}

.mx-two-service-directory .mx-directory-tabs button[aria-selected="true"] small {
    background: white;
    color: var(--bpo-ink);
    border-color: #fff;
}

.mx-two-service-directory .mx-directory-intro {
    padding: 30px 0;
    gap: 25px;
}

.mx-two-service-directory .mx-directory-intro>a {
    display: inline-flex;
    align-items: center;
    padding: 13px 18px;
    border: 1px solid #cbded1;
    border-radius: 30px;
    white-space: normal;
    flex-shrink: 0;
    max-width: 300px;
}

.mx-two-service-directory .mx-directory-intro p {
    font-size: 14px;
}

@media(max-width:991px) {
    .mx-directory-heading-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .mx-two-service-directory .mx-directory-tabs button {
        padding: 20px;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .mx-two-service-directory .mx-directory-tabs button small {
        top: -11px;
        right: 16px;
        padding: 5px 10px;
    }
    .mx-two-service-directory .mx-directory-tab-copy {
        flex: 1 1 0;
    }

    .mx-directory-tab-copy strong {
        font-size: 17px;
    }
}

@media(max-width:600px) {
    .mx-two-service-directory .mx-directory-tabs {
        /* grid-template-columns: minmax(0, 1fr); */
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .mx-two-service-directory .mx-directory-tabs button {
        flex-wrap: nowrap;
        min-height: 116px;
    }

    .mx-two-service-directory .mx-directory-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .mx-two-service-directory .mx-directory-intro>a {
        max-width: 100%;
    }

    .mx-two-service-directory .mx-directory-tabs button small {
        top: -11px;
        right: 16px;
        padding: 5px 10px;
    }

    .mx-two-service-directory .mx-directory-tab-copy {
        flex: 1 1 0;
    }
}

@media (max-width: 900px) {
    .bpo-site .bpo-header .bpo-nav,
    .bpo-site .bpo-header .bpo-mobile-nav {
        position: static;
    }
    .bpo-site .bpo-mobile-nav>nav {
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        border-radius: 18px;
        max-height: calc(100svh - 120px);
        overflow-y: auto;
    }
    .bpo-site .bpo-mobile-nav nav a,
    .bpo-site .bpo-mobile-nav nav summary {
        font-weight: 500;
    }
    .mx-mobile-service-group>summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        cursor: pointer;
        padding: 12px;
        color: var(--bpo-ink);
        font-size: 14px;
    }
    .mx-mobile-service-group>summary::-webkit-details-marker { display: none; }
    .mx-mobile-service-group>summary>span { color: #238765; transition: transform .2s; }
    .mx-mobile-service-group[open]>summary>span { transform: rotate(45deg); }
    .mx-mobile-service-content { padding: 0 12px; }
    .mx-mobile-service-content>.mx-mobile-services { border-top: 0; }
    .mx-mobile-service-content>.mx-mobile-services>summary {
        padding: 12px;
        font-size: 14px;
        line-height: 1.7;
        color: var(--bpo-ink);
    }
    .mx-mobile-service-content>a { display: block; }
    .mx-mobile-service-group:not([open])>.mx-mobile-service-content { display: none; }
}

/* Let photographic heroes follow their content on tablets and phones. */
@media (max-width: 1024px) {
    .bpo-site .mx-hero {
        height: auto;
        min-height: 0;
        max-height: none;
        justify-content: flex-start;
    }
    .bpo-site .mx-hero .mx-hero-content {
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .bpo-site .mx-service-home-hero .mx-hero-content {
        padding-top: 40px;
        padding-bottom: 36px;
    }
    .bpo-site .mx-hero .mx-hero-bottom {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 0 auto;
        padding-top: 22px;
        padding-bottom: 24px;
        gap: 24px;
        flex-wrap: wrap;
    }
    .bpo-site .mx-service-home-hero .mx-about-breadcrumb {
        margin-bottom: 24px;
    }
    .bpo-site .mx-hero .mx-hero-bottom strong {
        white-space: normal;
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .bpo-site .mx-hero .mx-hero-content {
        padding-top: 110px;
        padding-bottom: 30px;
    }
    .bpo-site .mx-service-home-hero .mx-hero-content {
        padding-top: 30px;
    }
    .bpo-site .mx-hero .mx-hero-bottom {
        gap: 20px;
        padding-top: 20px;
        padding-bottom: 22px;
    }
    .bpo-site .mx-hero .mx-hero-bottom>div {
        min-width: 0;
        flex: 1 1 120px;
    }
    .bpo-site .mx-hero .mx-hero-bottom strong {
        font-size: 17px;
        letter-spacing: -.5px;
    }
}

/* White footer copy retains the original green accents. */
@media (min-width: 768px) and (max-width: 1024px) {
    .bpo-site .mx-footer .mx-footer-bottom>p:last-child {
        width: 100%;
        flex-basis: 100%;
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .bpo-site .mx-service-detail .mx-service-home-hero {
        min-height: 50vh!important;
    }
    .bpo-site .mx-footer .mx-footer-bottom>p {
        width: 100%;
        text-align: center;
    }
    .bpo-site .mx-footer .mx-footer-bottom>nav {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 510px) {
    .bpo-site .mx-service-detail .mx-service-home-hero {
        min-height: 60vh!important;
    }
}

.bpo-site .mx-footer :is(p, a, h3),
.bpo-site .mx-footer-social a>i,
.bpo-site .mx-footer-contact>a>i {
    color: #fff;
}
.bpo-site .mx-footer a:is(:hover, :focus-visible) {
    color: var(--bpo-green);
}
.bpo-site .mx-footer-social a:is(:hover, :focus-visible) {
    background: transparent;
    border-color: var(--bpo-green);
}
.bpo-site .mx-footer-social a:is(:hover, :focus-visible)>i {
    color: var(--bpo-green);
}

/* Keep the contact companion card alongside the form while scrolling. */
@media (min-width: 768px) {
    .mx-contact-side {
        position: sticky;
        top: 110px;
        align-self: start;
    }
}

/* Keep supporting copy directly beneath its section heading. */
.bpo-site .bpo-section-heading:has(> p) {
    display: block;
}

.bpo-site .bpo-section-heading:has(> p) h2 {
    margin-bottom: 0;
}

.bpo-site .bpo-section-heading:has(> p)>p {
    max-width: 640px;
    margin: 16px 0 0;
}

@media (max-width: 767px) {
    .bpo-site .bpo-section-heading:has(> p)>p {
        margin-top: 12px;
    }
}

/* Responsive statement panel: keep decoration away from the copy. */
@media (max-width: 1100px) {
    .mx-statement-panel {
        padding: 38px 34px;
    }

    .mx-statement-panel h2 br {
        display: none;
    }

    .mx-statement-panel h2>span,
    .mx-statement-panel h2>em {
        margin-left: .18em;
    }

    .mx-statement-panel::after {
        right: -150px;
        bottom: -190px;
        width: 300px;
        height: 300px;
        opacity: .55;
    }
    .mx-statement-panel::after {
        content: none;
    }

    .mx-statement-panel .mx-statement-bottom {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .mx-statement-panel {
        padding: 26px 22px;
        border-radius: 18px;
    }

    .mx-statement-panel::after {
        display: none;
    }

    .mx-statement-panel h2 {
        font-size: clamp(31px, 9.5vw, 38px);
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .mx-statement-panel .mx-statement-bottom {
        align-items: flex-end;
        gap: 14px;
        margin-top: 22px;
        padding-top: 18px;
    }

    .mx-statement-panel .mx-statement-bottom p {
        font-size: 13px;
        line-height: 1.7;
    }

    .mx-statement-panel .mx-circle-link {
        width: 42px;
        height: 42px;
    }
}

/* Compact site-wide vertical rhythm. */
.bpo-site .bpo-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.bpo-site .bpo-section-heading {
    margin-bottom: 28px;
}

.bpo-site .bpo-page-heading {
    padding-top: 50px;
    padding-bottom: 50px;
}

.bpo-site .bpo-detail-hero {
    padding-top: 48px;
    padding-bottom: 48px;
}

.bpo-site .mx-purpose-section {
    padding-top: 48px;
}

.bpo-site .mx-purpose-grid {
    gap: 58px;
}

.bpo-site .mx-purpose-principles {
    margin-top: 44px;
}

@media (max-width: 1100px) {
    .bpo-site .bpo-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .bpo-site .bpo-page-heading,
    .bpo-site .bpo-detail-hero {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}

@media (max-width: 767px) {
    .bpo-site .bpo-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .bpo-site .bpo-section-heading {
        margin-bottom: 22px;
    }

    .bpo-site .bpo-page-heading,
    .bpo-site .bpo-detail-hero {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .bpo-site .mx-purpose-section {
        padding-top: 34px;
    }

    .bpo-site .mx-purpose-grid {
        gap: 36px;
    }

    .bpo-site .mx-purpose-principles {
        margin-top: 32px;
    }
}

/* Mobile compact layout: reduce accumulated component spacing. */
@media (max-width: 767px) {
    .bpo-site .bpo-wrap {
        width: calc(100% - 24px);
    }

    .bpo-site .bpo-section {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .bpo-site .bpo-section-heading {
        margin-bottom: 16px;
    }

    .bpo-site .bpo-eyebrow {
        margin-bottom: 12px;
    }

    .bpo-site .bpo-section-heading:has(> p)>p {
        margin-top: 8px;
    }

    .bpo-site .bpo-page-heading,
    .bpo-site .bpo-detail-hero {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .bpo-site .mx-directory-heading-row {
        gap: 16px;
        margin-bottom: 18px;
    }

    .bpo-site .mx-two-service-directory .mx-directory-tabs {
        gap: 14px;
    }

    .bpo-site .mx-two-service-directory .mx-directory-tabs button {
        min-height: 100px;
        padding: 16px;
        gap: 12px;
        border-radius: 15px;
    }

    .bpo-site .mx-two-service-directory .mx-directory-tabs button>i {
        flex-basis: 46px;
        height: 46px;
    }

    .bpo-site .mx-two-service-directory .mx-directory-intro {
        padding: 18px 0;
        gap: 12px;
    }

    .bpo-site .mx-directory-grid,
    .bpo-site .mx-process-grid,
    .bpo-site .mx-about-values-grid,
    .bpo-site .bpo-service-grid,
    .bpo-site .bpo-steps {
        gap: 14px;
        margin-top: 18px;
    }

    .bpo-site .mx-purpose-section {
        padding-top: 26px;
    }

    .bpo-site .mx-purpose-grid {
        gap: 24px;
    }

    .bpo-site .mx-purpose-principles {
        margin-top: 22px;
        padding-top: 22px;
    }

    .bpo-site .bpo-header,
    .bpo-site .bpo-nav {
        min-height: 68px;
    }

    .bpo-site .bpo-mobile-nav nav {
        top: 68px;
    }
}

/* Shared FAQ behavior: keep both columns in view and scroll long question lists. */
@media (min-width: 768px) {
    .bpo-site .mx-faq-layout>.mx-faq-intro,
    .bpo-site .mx-faq-layout>.mx-faq-accordion {
        position: sticky;
        top: 108px;
        align-self: start;
    }

    .bpo-site .mx-faq-layout>.mx-faq-accordion {
        /* max-height: calc(100svh - 132px); */
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #7fc5aa transparent;
        padding-right: 8px;
    }

    .bpo-site .mx-faq-layout>.mx-faq-accordion::-webkit-scrollbar {
        width: 5px;
    }

    .bpo-site .mx-faq-layout>.mx-faq-accordion::-webkit-scrollbar-track {
        background: transparent;
    }

    .bpo-site .mx-faq-layout>.mx-faq-accordion::-webkit-scrollbar-thumb {
        background: #7fc5aa;
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .bpo-site .mx-faq-layout>.mx-faq-accordion {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* Service-detail heroes follow the compact inner-page hero scale. */
.bpo-site .mx-service-home-hero {
    min-height: 590px;
}

.bpo-site .mx-service-home-hero .mx-hero-content {
    padding-top: 28px;
    padding-bottom: 120px;
}

.bpo-site .mx-service-home-hero .mx-about-breadcrumb {
    margin-bottom: 18px;
}

.bpo-site .mx-service-home-hero h1 {
    font-size: clamp(42px, 4.5vw, 66px);
    margin-top: 18px;
    margin-bottom: 18px;
}

.bpo-site .mx-service-home-hero .mx-hero-content>p {
    font-size: 15px;
    line-height: 1.65;
}

.bpo-site .mx-service-home-hero .bpo-actions {
    margin-top: 20px;
}

.bpo-site .mx-service-home-hero .mx-hero-bottom {
    bottom: 20px;
    padding-top: 16px;
}

.bpo-site .mx-service-home-hero .mx-hero-bottom strong {
    font-size: 20px;
}

@media (max-width: 1024px) {
    .bpo-site .mx-service-home-hero {
        min-height: 0;
    }

    .bpo-site .mx-service-home-hero .mx-hero-content {
        padding-top: 24px;
        padding-bottom: 26px;
    }

    .bpo-site .mx-service-home-hero .mx-hero-bottom {
        padding-top: 15px;
        padding-bottom: 16px;
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .bpo-site .mx-service-home-hero .mx-hero-content {
        padding-top: 18px;
        padding-bottom: 20px;
    }

    .bpo-site .mx-service-home-hero .mx-about-breadcrumb {
        margin-bottom: 14px;
    }

    .bpo-site .mx-service-home-hero .mx-pill {
        padding: 6px 11px;
        font-size: 8px;
    }

    .bpo-site .mx-service-home-hero h1 {
        font-size: clamp(34px, 9vw, 44px);
        margin-top: 14px;
        margin-bottom: 12px;
    }

    .bpo-site .mx-service-home-hero .mx-hero-content>p {
        font-size: 13px;
        line-height: 1.55;
    }

    .bpo-site .mx-service-home-hero .bpo-actions {
        margin-top: 16px;
        gap: 10px;
    }

    .bpo-site .mx-service-home-hero .mx-hero-bottom {
        padding-top: 12px;
        padding-bottom: 12px;
        gap: 12px;
    }

    .bpo-site .mx-service-home-hero .mx-hero-bottom strong {
        font-size: 15px;
    }

    .bpo-site .mx-service-home-hero .mx-hero-bottom>div>span {
        font-size: 9px;
    }

    .bpo-site .mx-service-home-hero .mx-scroll {
        display: none;
    }
}

/* Tighter rhythm across every service-detail page. */
.bpo-site .mx-service-detail .mx-service-home-hero {
    min-height: 500px;
}

.bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-content {
    padding-bottom: 102px;
}

.bpo-site .mx-service-detail .bpo-section {
    padding-top: 36px;
    padding-bottom: 36px;
}

.bpo-site .mx-service-detail .bpo-section-heading {
    margin-bottom: 22px;
}

.bpo-site .mx-service-detail :is(.mx-process-grid, .mx-story-related-grid, .mx-story-scope-grid, .mx-story-outcome-grid) {
    gap: 18px;
}

.bpo-site .mx-service-detail .mx-scope-pagination {
    margin-top: 20px;
}

.bpo-site .mx-service-detail .mx-about-intro-strip {
    padding-top: 22px;
    padding-bottom: 22px;
}

.bpo-site .mx-service-detail .mx-story-example .mx-caption {
    margin-top: 18px;
}

@media (max-width: 1024px) {
    .bpo-site .mx-service-detail .mx-service-home-hero {
        min-height: 0;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-content {
        padding-bottom: 22px;
    }

    .bpo-site .mx-service-detail .bpo-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

@media (max-width: 767px) {
    .bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-content {
        padding-bottom: 16px;
    }

    .bpo-site .mx-service-detail .bpo-section {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .bpo-site .mx-service-detail .bpo-section-heading {
        margin-bottom: 14px;
    }

    .bpo-site .mx-service-detail :is(.mx-process-grid, .mx-story-related-grid, .mx-story-scope-grid, .mx-story-outcome-grid) {
        gap: 12px;
    }

    .bpo-site .mx-service-detail .mx-about-intro-strip {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Phone service hero matches the compact stacked-CTA reference. */
@media (max-width: 767px) {
    .bpo-site .mx-service-detail .mx-service-home-hero {
        width: calc(100% - 8px);
        margin: 10px auto 0;
        border-radius: 14px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .bpo-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        gap: 8px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .bpo-actions>a {
        width: auto;
        min-width: 154px;
        justify-content: flex-start;
        padding: 8px 12px;
        gap: 8px;
        font-size: 10px;
        line-height: 1.25;
        white-space: nowrap;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-btn-arrow {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 14px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-ghost-button>span {
        margin-left: auto;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-bottom {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 24px);
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* Tablet navigation and service heroes match the landscape card reference. */
@media (min-width: 768px) and (max-width: 1024px) {
    .bpo-site .bpo-header {
        top: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        min-height: 72px;
        border-radius: 40px;
    }

    .bpo-site .bpo-header .bpo-wrap {
        width: calc(100% - 48px);
    }

    .bpo-site .bpo-nav {
        min-height: 72px;
    }

    .bpo-site .bpo-nav>nav {
        display: none;
    }

    .bpo-site .bpo-mobile-nav {
        display: block;
        position: relative;
    }

    .bpo-site .bpo-mobile-nav>summary {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border: 1px solid #c9ded5;
        border-radius: 30px;
        color: var(--bpo-ink);
        background: #fff;
        cursor: pointer;
        list-style: none;
        font-size: 12px;
    }

    .bpo-site .bpo-mobile-nav>summary::-webkit-details-marker {
        display: none;
    }

    .bpo-site .bpo-mobile-nav>nav {
        position: absolute;
        top: calc(100% + 14px);
        right: 0;
        width: min(360px, calc(100vw - 48px));
        max-height: calc(100svh - 120px);
        overflow-y: auto;
        padding: 16px;
        border: 1px solid #dce8e3;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 45px #182a2320;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero {
        width: calc(100% - 20px);
        height: min(68vw, 520px);
        min-height: 460px;
        margin: 24px auto 0;
        border-radius: 22px;
        justify-content: center;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-content {
        padding-top: 34px;
        padding-bottom: 112px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero h1 {
        font-size: clamp(44px, 6vw, 62px);
        margin-top: 18px;
        margin-bottom: 14px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .bpo-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .bpo-actions>a {
        width: auto;
        padding: 10px 16px 10px 10px;
        white-space: nowrap;
        font-size: 12px;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-hero-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18px;
        width: calc(100% - 48px);
        padding-top: 16px;
        padding-bottom: 0;
        flex-wrap: nowrap;
    }

    .bpo-site .mx-service-detail .mx-service-home-hero .mx-scroll {
        display: flex;
    }
}