/* The exact Matrix #who composition, with P2P's content and shared container. */
#work .mx-services-heading,#work .mx-services-body{display:grid;grid-template-columns:1.05fr 1.4fr;column-gap:clamp(28px,5vw,90px);align-items:start}
#work .mx-services-heading{align-items:center;margin-bottom:38px}
#work .mx-services-heading .mx-eyebrow{margin-bottom:14px}
#work .mx-services-heading h2{font-size:var(--p2p-type-split);font-weight:600;line-height:var(--p2p-leading-split);letter-spacing:-.06em;max-width:18ch;text-wrap:balance}
#work .mx-services-heading>p{padding-left:76px;font-size:var(--p2p-type-lead);line-height:var(--p2p-leading-copy);max-width:none}
#work .mx-services-media{position:relative;aspect-ratio:5/4;width:100%;overflow:hidden;overflow:clip;border-radius:16px;background:#e8ece8;touch-action:pan-y}
#work .mx-service-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;visibility:hidden;transition:none;pointer-events:none}
#work .mx-service-image.is-active{opacity:1;visibility:visible}
#work #mx-service-image-1{object-position:0% 50%;transform:scale(1.15);transform-origin:left center}
#work #mx-service-image-2{object-position:45% 42%}
#products .product-row__page-link{margin:0 0 26px;padding-top:24px}
#products .product-row__page-link a{display:inline-flex;align-items:center;gap:18px;padding:11px 19px;border:1px solid #c9d4ca;border-radius:999px;font-size:14px;font-weight:600;line-height:1.5;color:#171b18}
#products .product-row__page-link a:hover{background:#38af4a;border-color:#38af4a}
#work .mx-service-list{display:block}
#work .mx-service{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;gap:30px;align-items:center;border-top:1px solid var(--mx-line);padding:18px 0}
#work .mx-service:first-child{border-top:1px solid var(--mx-line);padding-top:18px}
#work .mx-service:last-child{border-bottom:1px solid var(--mx-line)}
#work .mx-service .mx-icon{width:42px;height:42px;stroke-width:.7;color:#7d8980;transition:color .2s}
#work .mx-service h3{font-size:var(--p2p-type-feature);line-height:var(--p2p-leading-heading);letter-spacing:-.025em;margin-bottom:4px;color:#69736b}
#work .mx-service p{font-size:var(--p2p-type-compact);line-height:var(--p2p-leading-compact);max-width:42ch;color:#78817a}
#work .mx-service>.mx-arrow{display:block;font-size:21px;margin:0;padding:0;color:#7d8980}
#work .mx-service:is(.is-active,:hover,:focus-visible) h3{color:#171b18}
#work .mx-service:is(.is-active,:hover,:focus-visible) .mx-icon{color:#278837}
#work .mx-service:is(.is-active,:hover,:focus-visible) p{color:#59635c}
#work .mx-service:is(.is-active,:hover,:focus-visible)>.mx-arrow{color:#278837;transform:translateX(3px)}
#work .mx-service-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:0;padding:5px 7px;background:#fff;border-radius:999px;box-shadow:0 3px 14px #0002;z-index:1}
#work .mx-service-dots button{position:relative;display:block;width:20px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%}
#work .mx-service-dots button::before{content:'';position:absolute;left:6px;top:7px;width:8px;height:8px;border-radius:50%;background:#b8c2ba;transition:background .2s}
#work .mx-service-dots button[aria-pressed="true"]::before{background:#278837}
#work .mx-service-dots button:hover::before{background:#171b18}
#work .mx-service-dots button:focus-visible{outline:2px solid #278837;outline-offset:0}
@media(max-width:1199px){
 #work .mx-services-heading>p{padding-left:60px}
 #work .mx-service{grid-template-columns:36px minmax(0,1fr) 18px;gap:24px;padding:16px 0}
 #work .mx-service:first-child{padding-top:16px}
 #work .mx-service .mx-icon{width:34px;height:34px}
 #work .mx-service p{font-size:var(--p2p-type-compact);line-height:var(--p2p-leading-compact)}
}
@media(max-width:900px){
 #work .mx-services-heading,#work .mx-services-body{grid-template-columns:minmax(0,1fr);gap:28px}
 #work .mx-services-heading{margin-bottom:30px}
 #work .mx-services-heading h2{font-size:var(--p2p-type-split);max-width:21ch;line-height:var(--p2p-leading-split)}
 #work .mx-services-heading>p{padding-left:0;max-width:60ch}
 #work .mx-services-media{aspect-ratio:5/3}
 #work .mx-service{grid-template-columns:42px minmax(0,1fr) 20px;gap:24px;padding:21px 0}
 #work .mx-service:first-child{padding-top:21px}
 #work .mx-service .mx-icon{width:36px;height:36px}
 #work .mx-service p{max-width:54ch}
}
@media(max-width:575px){
 #work .mx-services-heading h2{font-size:var(--p2p-type-split);max-width:18ch;line-height:var(--p2p-leading-split)}
 #work .mx-services-heading>p{font-size:var(--p2p-type-lead);line-height:var(--p2p-leading-copy)}
 #work .mx-services-media{aspect-ratio:5/4}
 #work .mx-service{grid-template-columns:30px minmax(0,1fr) 16px;gap:16px}
 #work .mx-service .mx-icon{width:29px;height:29px}
 #work .mx-service h3{font-size:var(--p2p-type-feature);line-height:var(--p2p-leading-heading)}
 #work .mx-service p{font-size:var(--p2p-type-compact);line-height:var(--p2p-leading-compact)}
 #work .mx-service>.mx-arrow{font-size:18px}
}
@media(prefers-reduced-motion:reduce){#work .mx-service-image,#work .mx-service .mx-icon,#work .mx-service-dots button::before{transition:none}}
