/* SX AGENCY / SERVICES RECONSTRUCTION — scoped to the Services page */ html:has(body.sx-services-reimagined){overflow-x:clip;scroll-behavior:smooth} body.sx-services-reimagined{--sxs-text:#f5f6f8;--sxs-silver:#9fa1af;--sxs-surface:#030508;background:#020304;color:#f5f6f8;overflow-x:clip;font-family:"DM Sans",Arial,sans-serif;min-height:100vh} body.sx-services-reimagined *,body.sx-services-reimagined *::before,body.sx-services-reimagined *::after{box-sizing:border-box} body.sx-services-reimagined>main{display:block;flex:none;background:#020304} body.sx-services-reimagined .site-header{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:calc(100% - 50px);max-width:1500px;height:54px;z-index:100;border:1px solid rgba(196,203,218,.3);border-radius:100px;background:linear-gradient(180deg,rgba(26,30,38,.9),rgba(3,4,7,.96) 62%);box-shadow:0 1px 9px #fff1,inset 0 2px 7px #ffffff1d,0 10px 28px #000a;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:0 15px;display:flex;justify-content:space-between;align-items:center} body.sx-services-reimagined .site-header .brand{flex:0 0 auto;gap:10px;white-space:nowrap}body.sx-services-reimagined .site-header .brand-mark{font-size:24px;font-weight:900;letter-spacing:-3px}body.sx-services-reimagined .site-header .brand-name{font-size:8px;letter-spacing:4px}body.sx-services-reimagined .site-header .brand-rule{width:36px;opacity:.55} body.sx-services-reimagined .site-header .nav{position:static;display:flex;align-items:center;gap:clamp(12px,2vw,28px);background:none;border:0;box-shadow:none;padding:0;transform:none;flex-direction:row} body.sx-services-reimagined .site-header .nav>a{font-size:10px;letter-spacing:0;font-weight:500;padding:11px 0;color:#f3f3f6;text-decoration:none;white-space:nowrap} body.sx-services-reimagined .site-header .nav>a.nav-current{padding:11px 17px;background:linear-gradient(160deg,#ffffff3b,#ffffff04 54%,#ffffff19);border:1px solid #ffffff6b;border-radius:32px;box-shadow:inset 0 1px 8px #ffffff29,0 0 11px #ffffff32;color:#fff} body.sx-services-reimagined .site-header .nav>a:hover{color:#fff} body.sx-services-reimagined .site-header .nav-intro,body.sx-services-reimagined .site-header .nav-footer{display:none} body.sx-services-reimagined .site-header .header-cta{margin:0;height:33px;min-height:33px;padding:2px 3px 2px 15px;border:1px solid #cfd3e085;font-size:10px;font-weight:600;min-width:130px;border-radius:80px;background:#080b11;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:inset 0 1px 7px #ffffff19} body.sx-services-reimagined .site-header .header-cta .sx-cta-arrow{height:27px;width:27px;display:grid;place-items:center;border:1px solid #ccd0dd82;border-radius:100px;background:#101318;box-shadow:0 0 6px #ffffff33}body.sx-services-reimagined .site-header .menu-toggle{display:none} .sxs-hero{height:503px;position:relative;isolation:isolate;overflow:hidden;background:#030407} .sxs-hero-art{position:absolute;inset:0;z-index:-3;background:url("assets/services-cosmic-landscape.webp") center center/cover no-repeat;filter:contrast(1.03) brightness(.87)} .sxs-space-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#010204ca 0%,#01020453 36%,transparent 53%,#00000017 100%),linear-gradient(to bottom,rgba(0,0,0,.13),transparent 32%,rgba(0,0,0,.2) 90%)} .sxs-distant-stars{position:absolute;inset:0;pointer-events:none;z-index:-1}.sxs-distant-stars i{position:absolute;display:block;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #ffffff54;animation:sxs-twinkle 7s ease-in-out infinite}.sxs-distant-stars i:nth-child(1){left:27%;top:16%}.sxs-distant-stars i:nth-child(2){left:36%;top:8%;animation-delay:-3s}.sxs-distant-stars i:nth-child(3){left:20%;top:29%;animation-delay:-1.7s}.sxs-distant-stars i:nth-child(4){left:57%;top:13%;animation-delay:-5s}.sxs-distant-stars i:nth-child(5){left:15%;top:5%;animation-delay:-4s} .sxs-hero-inner{position:relative;width:calc(100% - 126px);max-width:1410px;margin:0 auto;height:100%} .sxs-hero-copy{position:absolute;left:0;top:149px;width:45%;z-index:2}.sxs-eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.31em;color:#eef0f5;font-weight:600;white-space:nowrap}.sxs-line{height:1px;width:32px;background:#ccd1de;opacity:.8}.sxs-hero-copy h1{font-size:clamp(37px,4.2vw,62px);line-height:1.12;letter-spacing:-.057em;font-weight:650;white-space:nowrap;margin:14px 0 15px}.sxs-hero-copy h1 span{background:linear-gradient(100deg,#d7d8e0,#9698a8);background-clip:text;-webkit-background-clip:text;color:transparent}.sxs-hero-copy>p{font-size:clamp(12px,1.38vw,17px);line-height:1.48;color:#bec0c8;max-width:365px;margin:0} .sxs-hero-actions{display:flex;align-items:center;gap:17px;margin-top:25px}.sxs-pill{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:21px;min-height:42px;border-radius:999px;border:1px solid rgba(248,249,254,.75);padding:4px 6px 4px 16px;color:#fff;font-size:11px;font-weight:650;letter-spacing:-.025em;background:linear-gradient(155deg,#2a2d3782,#020408dd 50%,#131824c7);box-shadow:inset 0 2px 6px #ffffff2e,inset 0 -2px 4px #ffffff0f,0 0 12px #ffffff2d,0 6px 25px #0008;text-decoration:none;white-space:nowrap;transition:transform .35s ease,border-color .35s,box-shadow .35s}.sxs-pill:hover,.sxs-pill:focus-visible{color:#fff;transform:translateY(-2px);border-color:#fff;box-shadow:inset 0 2px 7px #ffffff44,0 0 16px #ffffff54,0 8px 25px #0009}.sxs-pill-arrow{display:grid;place-items:center;border-radius:50%;border:1px solid #dfe4f0a8;width:32px;height:32px;flex:none;background:#070a11a8;box-shadow:inset 0 1px 4px #ffffff20;transition:transform .35s}.sxs-pill-arrow svg{width:18px;height:18px}.sxs-pill:hover .sxs-pill-arrow{transform:translateX(3px)} /* Perspective software dashboard: all elements are live DOM content, not a bitmap. */ /* Service cards */ .sxs-services-wrap{position:relative;padding-top:0;background:#030406;scroll-margin-top:20px}.sxs-service-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:calc(100% - 64px);max-width:1410px;margin:0 auto} .sxs-service-card{position:relative;isolation:isolate;overflow:hidden;height:300px;border-radius:11px;border:1px solid rgba(201,210,225,.43);background:linear-gradient(125deg,#090e15ed,#030507f4 65%,#0a0c12e5);box-shadow:inset 0 1px 8px #fff1,0 13px 23px #0009;transition:border-color .35s,box-shadow .35s;min-width:0}.sxs-service-card:hover{border-color:#ffffffa8;box-shadow:inset 0 1px 12px #fff2,0 13px 28px #000c,0 0 20px #ffffff14}.sxs-service-card::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(230px circle at var(--mouse-x,75%) var(--mouse-y,35%),#ffffff0d,transparent 70%);opacity:0;transition:opacity .3s}.sxs-service-card:hover::after{opacity:1}.sxs-card-glint{position:absolute;right:8%;top:0;width:30%;height:1px;background:linear-gradient(90deg,transparent,#f9faff78,transparent);box-shadow:0 0 14px #fff3;z-index:3} .sxs-card-copy{position:relative;z-index:3;padding:20px 0 20px 24px;width:55%;height:100%;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}.sxs-card-copy a{pointer-events:auto}.sxs-icon-box{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;color:#f9fbff;background:linear-gradient(140deg,#5c657247,#030508 75%);border:1px solid #f0f2fa8a;box-shadow:inset 0 2px 5px #ffffff3a,0 0 13px #ffffff25;flex:none}.sxs-icon-box svg{width:27px;height:27px;filter:drop-shadow(0 0 3px #ffffff54)}.sxs-card-copy h2{font-size:20px;font-weight:650;line-height:1.16;letter-spacing:-.046em;margin:11px 0 6px;color:#f8f8fa;white-space:nowrap}.sxs-card-copy p{font-size:11.1px;line-height:1.4;margin:0;color:#afb4be;max-width:225px}.sxs-card-copy ul{padding:0;margin:auto 0 11px;list-style:none;display:grid;gap:5px}.sxs-card-copy li{font-size:10.4px;white-space:nowrap;color:#bfc3cb;letter-spacing:-.02em}.sxs-card-copy li span{font-size:15px;margin-right:6px;color:#eee}.sxs-small-pill{min-height:37px;height:37px;padding:3px 4px 3px 13px;gap:17px;font-size:10px}.sxs-small-pill .sxs-pill-arrow{width:29px;height:29px}.sxs-small-pill .sxs-pill-arrow svg{width:16px;height:16px} .sxs-card-illustration{position:absolute;z-index:1;top:0;bottom:0;right:0;width:57%;overflow:visible;pointer-events:none;transform-style:preserve-3d;perspective:900px}.sxs-card-illustration img{position:absolute;top:6px;right:-2px;width:100%;height:94%;object-fit:contain;filter:drop-shadow(0 0 12px #d7e3ff24);transform:rotateY(-5deg) rotateX(2deg);animation:sxs-visual-drift 11s ease-in-out infinite;will-change:transform}.sxs-software .sxs-card-illustration img{animation-duration:13s;animation-delay:-3s}.sxs-strategy .sxs-card-illustration img{animation-duration:17s;animation-delay:-6s}.sxs-crm-systems .sxs-card-illustration img{animation-duration:12s;animation-delay:-9s}.sxs-visual-reflection{position:absolute;width:4px;height:4px;top:22%;left:63%;border-radius:50%;background:white;box-shadow:0 0 8px 3px #ffffffb7,0 0 20px 8px #ffffff39;animation:sxs-sparkle 9s ease-in-out infinite}.sxs-light-particle{position:absolute;width:3px;height:3px;top:76%;left:13%;border-radius:50%;background:#fff;box-shadow:0 0 9px 3px #fff7;animation:sxs-sparkle 7s ease-in-out infinite -3s} /* Panoramic closing banner */ .sxs-cta-wrap{padding:24px 0 25px;background:#020304}.sxs-cta-panel{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 72px);max-width:1410px;min-height:194px;margin:0 auto;border:1px solid #e7e9f3b0;border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:24px 42px 25px 34px;background:#080b0e;box-shadow:inset 0 1px 9px #ffffff1c,0 0 22px #ffffff24}.sxs-cta-landscape{position:absolute;inset:0;z-index:-2;background:url("assets/cta-landscape.webp") center 62%/cover no-repeat;filter:brightness(.92) contrast(1.15)}.sxs-cta-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#030406cc,#03040633 58%,#0203048a)}.sxs-corner-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 1px 1px 4px #ffffff22;border-radius:inherit}.sxs-corner-glow::before,.sxs-corner-glow::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px #fff,0 0 20px 6px #fff8}.sxs-corner-glow::before{left:0;bottom:0}.sxs-corner-glow::after{right:0;top:0}.sxs-cta-copy{position:relative;z-index:1}.sxs-cta-eyebrow{font-size:10px;font-weight:600;letter-spacing:.35em;color:#eef1f5;margin:0 0 9px}.sxs-cta-copy h2{font-size:clamp(30px,3.5vw,47px);font-weight:650;line-height:1.1;letter-spacing:-.05em;margin:0 0 9px}.sxs-cta-copy>p:last-child{font-size:11.5px;line-height:1.5;color:#c7c9d0;margin:0}.sxs-cta-button{position:relative;z-index:1;min-height:48px;padding-left:18px;gap:26px;font-size:13px}.sxs-cta-button .sxs-pill-arrow{height:35px;width:35px} /* Keep original shared footer but visually tune the Services instance. */ body.sx-services-reimagined .footer{background:linear-gradient(180deg,#040506,#010203);border-top:0;padding:0 0 12px}body.sx-services-reimagined .footer .section-wrap{max-width:1410px;width:calc(100% - 78px)}body.sx-services-reimagined .footer-top{display:grid;grid-template-columns:1fr 1fr 1.5fr;align-items:center;gap:14px;padding:15px 0 16px;min-height:64px}body.sx-services-reimagined .footer-top .brand-mark{font-size:23px;letter-spacing:-3px}body.sx-services-reimagined .footer-top .brand-name{font-size:8px;letter-spacing:3.5px}body.sx-services-reimagined .footer-top>p{font-size:10px;text-align:center;color:#a0a4ae;margin:0;display:block}body.sx-services-reimagined .footer-links{justify-content:flex-end;gap:clamp(10px,1.7vw,25px);display:flex;flex-wrap:nowrap}body.sx-services-reimagined .footer-links a{font-size:9.5px;white-space:nowrap}body.sx-services-reimagined .footer-social-row{padding:8px 0;border-color:#ffffff24;min-height:43px}body.sx-services-reimagined .footer-social-heading{font-size:8px;letter-spacing:2.4px}body.sx-services-reimagined .social-links{gap:8px}body.sx-services-reimagined .social-link{min-height:27px;padding:4px 12px;font-size:9px;gap:8px}body.sx-services-reimagined .social-link .social-icon svg{width:14px;height:14px}body.sx-services-reimagined .footer-bottom{padding:9px 0 0;min-height:21px;font-size:8px;color:#80848d;display:flex;justify-content:space-between}body.sx-services-reimagined .footer-bottom>a{display:none}body.sx-services-reimagined .footer-bottom span:nth-child(2){display:block;margin:auto} /* Anchor, navigation and responsive */ @keyframes sxs-dash-enter{0%{opacity:0;transform:translateY(15px) rotateY(-10deg) rotateX(2deg) rotateZ(-1.5deg)}100%{opacity:1;transform:translateY(0) rotateY(-7deg) rotateX(1.7deg) rotateZ(-1.2deg)}}@keyframes sxs-visual-drift{0%,100%{transform:rotateY(-7deg) rotateX(2deg) rotateZ(-1.5deg)}50%{transform:rotateY(7deg) rotateX(-4deg) rotateZ(1.2deg)}}@keyframes sxs-sparkle{0%,100%{opacity:.28;transform:scale(.7)}45%{opacity:1;transform:scale(1.2)}70%{opacity:.4}}@keyframes sxs-twinkle{0%,100%{opacity:.18}50%{opacity:.8}}@keyframes sxs-bar-in{from{transform:scaleY(.25);opacity:.3}to{transform:scaleY(1);opacity:1}} @media(min-width:1250px){.sxs-hero{height:clamp(570px,37vw,675px)}.sxs-hero-inner{width:calc(100% - 126px)}.sxs-hero-copy{top:27%}.sxs-service-card{height:clamp(350px,28vw,410px)}.sxs-card-copy{padding:28px 0 25px 31px}.sxs-card-copy h2{font-size:25px;margin-top:16px}.sxs-card-copy p{font-size:13px;max-width:255px}.sxs-card-copy li{font-size:12px}.sxs-icon-box{height:56px;width:56px}.sxs-cta-panel{min-height:225px}} @media(max-width:1000px){body.sx-services-reimagined .site-header{height:60px;top:12px;width:calc(100% - 36px)}body.sx-services-reimagined .site-header .nav:not(.open){display:none!important}body.sx-services-reimagined .site-header .menu-toggle{display:flex;position:relative;right:0}body.sx-services-reimagined .site-header .nav.open{display:flex!important;position:absolute!important;top:calc(100% + 10px);left:0;right:0;width:100%;padding:23px;max-height:78vh;overflow-y:auto;background:#090b10f5;border:1px solid #ffffff44;border-radius:20px;box-shadow:0 20px 40px #000e;flex-direction:column;align-items:stretch;gap:9px;transform:none!important;z-index:120}body.sx-services-reimagined .site-header .nav.open>a{font-size:14px;padding:11px 14px}body.sx-services-reimagined .site-header .header-cta{margin-left:auto;margin-right:12px}body.sx-services-reimagined .site-header .nav.open .nav-intro,body.sx-services-reimagined .site-header .nav.open .nav-footer{display:block}.sxs-hero-inner{width:calc(100% - 80px)}.sxs-hero-copy h1{font-size:clamp(36px,4.4vw,48px)}} @media(max-width:760px){.sxs-hero{height:auto;min-height:810px}.sxs-hero-art{background-size:auto 74%;background-position:center top}.sxs-space-shade{background:linear-gradient(180deg,#020304a8 0%,#0102036e 38%,#02030499 72%,#020304 100%)}.sxs-hero-inner{width:calc(100% - 42px);height:810px;display:flex;flex-direction:column}.sxs-hero-copy{position:relative;left:auto;top:126px;width:100%;z-index:2}.sxs-hero-copy h1{font-size:clamp(34px,7.7vw,51px);white-space:normal}.sxs-hero-copy>p{font-size:14px;max-width:430px}.sxs-services-wrap{padding-top:0}.sxs-service-grid{grid-template-columns:1fr;width:calc(100% - 36px);gap:15px}.sxs-service-card{height:340px}.sxs-card-copy{padding:23px 0 22px 25px}.sxs-card-copy p{font-size:12px}.sxs-card-illustration{width:54%}.sxs-card-illustration img{max-height:340px}.sxs-cta-wrap{padding:20px 0}.sxs-cta-panel{width:calc(100% - 36px);min-height:270px;padding:28px 24px;align-items:flex-start;flex-direction:column;justify-content:space-between;gap:20px}.sxs-cta-copy h2{font-size:37px}.sxs-cta-button{min-height:45px}body.sx-services-reimagined .footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:27px 0}body.sx-services-reimagined .footer-top>p{text-align:left}body.sx-services-reimagined .footer-links{justify-content:flex-start;flex-wrap:wrap;gap:14px}body.sx-services-reimagined .footer-links a{font-size:11px}body.sx-services-reimagined .footer-social-row{flex-direction:column;align-items:flex-start;gap:15px;padding:14px 0}body.sx-services-reimagined .footer-bottom{gap:18px;flex-wrap:wrap}} @media(max-width:460px){body.sx-services-reimagined .site-header{height:56px;width:calc(100% - 24px);padding:0 12px}body.sx-services-reimagined .site-header .brand-rule{display:none}body.sx-services-reimagined .site-header .brand-name{font-size:7px;letter-spacing:2.5px}body.sx-services-reimagined .site-header .header-cta{min-width:105px;font-size:9px;padding-left:9px;margin-right:8px}body.sx-services-reimagined .site-header .header-cta .sx-cta-arrow{width:25px;height:25px}.sxs-hero{min-height:785px}.sxs-hero-inner{height:785px}.sxs-hero-copy{top:114px}.sxs-hero-copy h1{font-size:clamp(34px,8.4vw,43px);margin-top:20px}.sxs-eyebrow{font-size:9px}.sxs-hero-actions{gap:9px;flex-wrap:wrap}.sxs-hero-actions .sxs-pill{font-size:10px;gap:10px;padding-left:11px;min-height:40px}.sxs-hero-actions .sxs-pill-arrow{height:29px;width:29px}.sxs-service-card{height:352px}.sxs-card-copy{padding-left:19px;width:59%}.sxs-card-copy h2{font-size:19px;white-space:normal}.sxs-card-copy p{font-size:11px;line-height:1.45}.sxs-card-copy li{font-size:9.5px;white-space:normal}.sxs-card-illustration{width:58%;top:20px}.sxs-card-illustration img{object-fit:contain}.sxs-service-card .sxs-small-pill{font-size:9.5px;gap:8px}.sxs-cta-copy h2{font-size:34px}body.sx-services-reimagined .footer .section-wrap{width:calc(100% - 40px)}body.sx-services-reimagined .footer-bottom span:nth-child(2){margin:0}} @media(prefers-reduced-motion:reduce){body.sx-services-reimagined *,body.sx-services-reimagined *::before,body.sx-services-reimagined *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ================================================================ SX SERVICES — REFERENCE QA / CORRECTIONS (2026-10-28) Scoped to Services only; never modify the shared Solutions / CRM UI. ================================================================ */ /* The global travelling nav bubble is absolutely positioned. The original Services override had position:static on its nav, causing that bubble to render over the SX logo as a separate ghost capsule. */ body.sx-services-reimagined .site-header .nav.sx-nav-single-bubble{ position:relative!important; isolation:isolate; } @media (min-width:1181px){ body.sx-services-reimagined .site-header .nav.sx-nav-single-bubble > a.nav-current, body.sx-services-reimagined .site-header .nav.sx-nav-single-bubble > a[aria-current="page"]{ background:transparent; border-color:transparent; box-shadow:none; } body.sx-services-reimagined .site-header .nav.sx-nav-single-bubble > .sx-nav-indicator{ top:0; left:0; display:block; } } /* Restore visible navigation in the previously broken 1001–1180 range. Use the desktop row where space allows and the mobile drawer below 901px. */ @media (min-width:901px) and (max-width:1180px){ body.sx-services-reimagined .site-header .nav:not(.open), body.sx-services-reimagined .site-header .nav{ display:flex!important; position:relative!important; visibility:visible!important; opacity:1!important; transform:none!important; pointer-events:auto!important; max-height:none!important; overflow:visible!important; width:auto!important; flex-direction:row!important; gap:clamp(9px,1.4vw,18px)!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; } body.sx-services-reimagined .site-header .menu-toggle{display:none!important} body.sx-services-reimagined .site-header .nav>a:not(.button){ font-size:clamp(9px,.9vw,10px)!important; padding:9px 0!important; min-height:35px; white-space:nowrap; } body.sx-services-reimagined .site-header .nav>a.nav-current{ padding:9px 12px!important; border-radius:999px; border:1px solid rgba(255,255,255,.44); } body.sx-services-reimagined .site-header .brand-rule{display:none} body.sx-services-reimagined .site-header .brand{gap:7px} body.sx-services-reimagined .site-header .header-cta{margin-left:0;margin-right:0;min-width:110px} } @media (min-width:761px) and (max-width:900px){ body.sx-services-reimagined .site-header .nav:not(.open){display:none!important} body.sx-services-reimagined .site-header .menu-toggle{display:flex!important;position:relative;right:0} body.sx-services-reimagined .site-header .nav.open{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} } /* Match the screenshot's luminous but restrained space atmosphere. Increase planetary rim visibility without brightly lighting the content. */ .sxs-hero-art{filter:contrast(1.065) brightness(.97)} .sxs-space-shade{ background: linear-gradient(90deg,rgba(1,2,4,.66) 0%,rgba(1,2,4,.21) 33%,transparent 55%,rgba(0,0,0,.04) 100%), linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.16) 95%); } /* Protect text from the decorative image layers and avoid accidental chrome illumination crossing the headings. */ .sxs-card-copy{z-index:4} .sxs-card-illustration{z-index:2} .sxs-card-illustration img{backface-visibility:hidden} /* The reference calls for compact readable glass cards on the two-column desktop grid; images retain their own half of each card. */ @media (min-width:901px){ .sxs-card-copy{width:53%} .sxs-card-copy p{max-width:95%} .sxs-card-illustration{width:53%} .sxs-card-copy li{white-space:normal} } /* Two columns at 820px make the service description and orbit artwork collide. Convert to well-composed horizontal feature cards for tablets. */ @media (min-width:761px) and (max-width:900px){ .sxs-service-grid{grid-template-columns:1fr;max-width:760px;gap:17px;width:calc(100% - 64px)} .sxs-service-card{height:340px} .sxs-card-copy{width:54%;padding:23px 0 23px 28px} .sxs-card-copy h2{font-size:24px;white-space:normal} .sxs-card-copy p{font-size:13px;max-width:330px} .sxs-card-copy li{font-size:12px;white-space:normal} .sxs-card-illustration{width:49%} .sxs-card-illustration img{height:98%;top:1%} } /* Mobile: individual artboards, NOT images overlaid on the descriptions. Each card now has a clear copy zone, visual zone and action zone. */ @media (max-width:760px){ .sxs-service-card{height:502px!important;min-height:502px!important} .sxs-card-copy{width:100%!important;height:100%;padding:22px 22px 22px!important;display:block} .sxs-icon-box{width:47px;height:47px} .sxs-card-copy h2{font-size:21px!important;margin:12px 0 7px!important;white-space:normal!important} .sxs-card-copy p{font-size:12px!important;line-height:1.5!important;max-width:100%!important;padding-right:0;white-space:normal} .sxs-card-illustration{top:165px!important;left:8%!important;right:auto!important;bottom:auto!important;width:84%!important;height:203px!important;overflow:hidden!important;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .sxs-card-illustration img{width:100%!important;height:100%!important;top:0!important;right:0!important;object-fit:contain!important} .sxs-card-copy ul{position:absolute;bottom:68px;left:22px;right:20px;margin:0;gap:5px} .sxs-card-copy li{font-size:11px!important;line-height:1.3;white-space:normal!important} .sxs-card-copy .sxs-small-pill{position:absolute;bottom:19px;left:22px;margin:0;font-size:11px} .sxs-card-illustration .sxs-light-particle{display:none} } @media (max-width:460px){ .sxs-service-card{height:512px!important;min-height:512px!important} .sxs-card-copy{padding:19px 19px 19px!important} .sxs-card-copy h2{font-size:20px!important} .sxs-card-copy p{font-size:11.5px!important;max-width:100%!important} .sxs-card-illustration{top:162px!important;height:218px!important;width:92%!important;left:4%!important} .sxs-card-copy ul{left:19px;bottom:66px} .sxs-card-copy .sxs-small-pill{left:19px;bottom:16px} } /* Breakpoint reset: the site's shared mobile drawer uses fixed positioning and a 100vh height. These properties must be explicitly cleared when a Services-page navigation row is restored in the 901–1180px range. */ @media (min-width:901px) and (max-width:1180px){ body.sx-services-reimagined .site-header .nav, body.sx-services-reimagined .site-header .nav:not(.open){ top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; inset:auto!important; height:auto!important; min-height:0!important; align-self:center!important; align-items:center!important; justify-content:center!important; overflow:visible!important; flex:0 1 auto; transition:none!important; } } /* Atmospheric star detail sampled from the artwork-only sky of the approved reference, isolated from all text and interface elements. */ .sxs-nebula-detail{ position:absolute;pointer-events:none;z-index:-1; top:clamp(64px,6vw,98px);left:clamp(150px,20vw,350px); width:clamp(235px,25vw,440px);height:clamp(100px,12vw,177px); background:url("assets/services-nebula.webp") center/100% 100% no-repeat; opacity:.85;mix-blend-mode:screen; } @media(max-width:760px){.sxs-nebula-detail{left:23%;top:40px;width:75%;height:160px;opacity:.55}}