/* SSF Global visual system */
.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: 112px;
    padding-bottom: 112px
}

.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 {
    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 {
    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;
    transition: color .2s
}

.bpo-nav nav>a:not(.bpo-button):hover,
.mx-nav-service>a:hover {
    color: #2e906c
}

.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-home .bpo-header {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    background: transparent;
    box-shadow: none;
    border-radius: 18px;
    z-index: 100
}

.bpo-home .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-home .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-home .is-scrolled .bpo-wrap {
    width: calc(100% - 56px)
}

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

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

@media (prefers-reduced-motion: reduce) {
    .bpo-home .bpo-header,
    .bpo-home .bpo-header .bpo-wrap {
        transition: none
    }
}

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

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

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

.mx-hero {
    margin: 16px 16px 0;
    border-radius: 28px;
    min-height: 850px;
    height: calc(100svh - 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: #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: 36px;
    animation: mx-ticker 42s linear infinite
}

.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 h2 {
    max-width: 1120px;
    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1.18;
    letter-spacing: -2.7px
}

.mx-statement h2>span {
    /* color: #87917e */
}

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

.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-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 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-home .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: 85px;
        padding-bottom: 85px
    }

    .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: 65px;
        padding-bottom: 65px
    }

    .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-home .bpo-header {
        top: 10px;
        left: 10px;
        right: 10px;
        border-radius: 16px
    }

    .bpo-home .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>div {
        gap: 25px
    }

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

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

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

    .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: 87%
    }

    .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; }
.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; }
.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; color: #87a89c; letter-spacing: 1.1px; margin-bottom: 6px; }
.mx-footer-contact > a { transition: color .25s; }
.mx-footer-contact > a:hover { color: #4ebd94; }
.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: 10px; color: #8aa79c; line-height: 1.8; }
.mx-footer-bottom nav { display: flex; gap: 22px; }
.mx-footer-bottom a { font-size: 10px; color: #aac9be; transition: color .25s; }
.mx-footer-bottom a:hover { color: #4ebd94; }
.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 { 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; font-size: 14px; }
.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; }
.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; } }