:root{--bg:#070708;--panel:#0b0b0d;--white:#f4f4f6;--muted:#b5b5bd;--subtle:#85858e;--line:#29292d;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.section-wrap{width:min(1340px,calc(100% - 100px));margin-inline:auto}.site-header{height:88px;padding:0 max(50px,calc((100% - 1370px)/2));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #ffffff0b;position:relative;z-index:20;background:#080809}.brand{display:flex;align-items:center;gap:27px;white-space:nowrap}.brand-mark{font:800 36px/.9 var(--display);letter-spacing:-5px;transform:skew(-8deg);text-shadow:0 1px 10px #ffffff22}.brand-name{font-size:12px;letter-spacing:5px}.brand-rule{width:84px;height:1px;background:#55555b;margin-left:-8px}.nav{display:flex;align-items:center;justify-self:center;gap:48px}.header-cta{justify-self:end}.nav>a:not(.button){font-size:13px;color:#d1d1d5;transition:color .2s}.nav>a:hover,.footer a:hover{color:#fff}.button{min-height:44px;padding:0 23px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-size:12px;font-weight:500;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-outline{border:1px solid #a0a0a7;background:transparent;color:white;min-width:146px}.button-outline:hover{background:#fff;color:#111}.menu-toggle{display:none}.hero{min-height:575px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}.hero:before{content:"";position:absolute;inset:0;background:#000;z-index:-3}
/* Glossy reference sphere: image supplied by the client. */
.orb{
  position:absolute;
  z-index:-1;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px, 100vw);
  aspect-ratio:1264 / 816;
  pointer-events:none;
  background:url("images/sphere-reference.jpg") center top / 100% 100% no-repeat;
  opacity:.98;
}

.hero-copy{width:min(700px,90%);text-align:center;z-index:2;margin-top:-12px}.eyebrow{margin:0;color:#d7d7dd;font-size:10px;letter-spacing:3.3px;font-weight:500}.hero .eyebrow i{font-style:normal;padding:0 10px;color:#aaa}.hero h1{font:500 clamp(54px,5vw,70px)/1.07 var(--display);letter-spacing:-3.8px;margin:30px 0 24px}.hero h1 span{background:linear-gradient(180deg,#fff 5%,#b7b7c1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-intro{font-size:15px;line-height:1.8;color:#c4c4cc;margin:0 auto;max-width:560px}.hero-actions{display:flex;align-items:center;justify-content:center;gap:35px;margin-top:28px}.button-silver{background:linear-gradient(135deg,#f0f0f2,#a7a7ae);color:#111;border:1px solid #d0d0d5}.button-silver:hover{background:#fff}.text-link{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid #74747c;padding-bottom:6px;font-size:12px;color:#eee}.text-link span{font-size:17px}.hero-services{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:min(890px,80%);display:flex;align-items:center;justify-content:space-between;gap:28px;font-size:9px;letter-spacing:2.5px;color:#c8c8cf;white-space:nowrap}.hero-services:before,.hero-services:after{content:"";height:1px;background:#6b6b72;flex:1}.hero-services i{height:25px;width:1px;background:#5d5d64}.solutions{display:grid;grid-template-columns:1.65fr repeat(3,1fr);padding-top:64px;padding-bottom:58px;gap:0;border-bottom:1px solid var(--line)}.solutions-intro{padding:0 55px 0 0}.eyebrow-line{display:inline-block;width:43px;height:1px;background:#aaa;margin:0 13px 3px 0}.solutions-intro h2,.services-heading h2{font:500 clamp(35px,3.2vw,47px)/1.13 var(--display);letter-spacing:-2px;margin:20px 0 18px}.solutions-intro>p:last-child,.services-heading>p{font-size:13px;line-height:1.75;color:var(--muted);max-width:360px;margin:0}.solution-card{padding:8px 30px 0 52px;border-left:1px solid var(--line);min-height:175px;transition:background .2s}.solution-card:hover{background:linear-gradient(90deg,#ffffff08,transparent)}.solution-icon{display:block;font-size:33px;font-weight:300;height:52px;color:#dedee4}.code-icon{font-size:25px;letter-spacing:-2px;padding-top:8px}.solution-card h3{font-size:18px;font-weight:500;margin:13px 0 14px}.solution-card p{font-size:12px;line-height:1.65;color:#b6b6bf;margin:0}.solution-arrow{display:block;font-size:22px;margin-top:16px;color:#e4e4e9}.services{padding-top:94px;padding-bottom:100px}.section-kicker{font-size:9px;letter-spacing:3px;color:#b8b8c0}.services-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:20px 0 42px}.services-heading h2{margin:0}.services-heading h2 span,.about-copy h2 span{color:#9b9ba5}.services-heading>p{max-width:400px;margin-bottom:5px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.service-card{padding:29px 30px 27px;min-height:270px;border-right:1px solid var(--line);transition:background .25s}.service-card:last-child{border-right:0}.service-card:hover{background:#111113}.service-number,.work-category{font-size:9px;letter-spacing:2px;color:#a9a9b2}.service-symbol{font-size:30px;margin-top:26px;color:#e3e3e8}.service-card h3{font:500 21px var(--display);margin:16px 0 12px}.service-card p,.work-card>p:last-child{font-size:12px;line-height:1.8;color:#aaaab3;max-width:330px}.service-card>a{display:inline-flex;gap:15px;margin-top:14px;font-size:11px;color:#eee}.about-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0c;padding:76px 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center}.about-visual{height:360px;position:relative;overflow:hidden;border:1px solid #2c2c31;background:radial-gradient(ellipse at 50% 44%,#29292e,#0b0b0d 65%)}.visual-label,.visual-foot{position:absolute;left:23px;font-size:8px;letter-spacing:2px;color:#a3a3ac;z-index:2}.visual-label{top:22px}.visual-foot{bottom:22px}.about-orb{position:absolute;width:240px;height:240px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 25%,#5c5c64,#17171b 50%,#050506 76%);border:1px solid #9d9da566;box-shadow:0 0 50px #fff0,inset -15px -15px 30px #000,inset 5px 5px 20px #ffffff28}.about-visual strong{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) skew(-8deg);font:800 68px var(--display);letter-spacing:-9px;text-shadow:0 0 18px #fff6}.about-copy h2{font:500 clamp(32px,3.3vw,46px)/1.17 var(--display);letter-spacing:-1.8px;margin:22px 0}.about-copy>p:not(.eyebrow){font-size:13px;line-height:1.85;color:#b8b8c0;max-width:550px}.about-copy .text-link{margin-top:15px}.about-stats{display:flex;gap:36px;border-top:1px solid var(--line);margin-top:35px;padding-top:22px}.about-stats div{display:flex;flex-direction:column;gap:7px}.about-stats strong{font:500 24px var(--display)}.about-stats span{font-size:10px;color:#9999a2}.work-section{padding-top:94px;padding-bottom:100px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.work-card{min-width:0}.work-visual{height:220px;position:relative;overflow:hidden;border:1px solid #303035;background:#101013}.ai-visual{background:radial-gradient(ellipse at center,#222228,#0b0b0d)}.ui-panel{position:absolute;inset:25px 30px;background:#111115;border:1px solid #37373f;padding:15px;box-shadow:0 15px 40px #0008}.ui-panel>span{font-size:7px;letter-spacing:1.7px;color:#a7a7b0}.ui-line{height:4px;width:58%;background:#393941;border-radius:3px;margin-top:12px}.ui-line.long{width:82%;margin-top:22px}.ui-line.short{width:35%;margin-top:17px}.ui-node-row{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:23px}.ui-node-row b{font-size:7px;letter-spacing:.8px;padding:9px 7px;border:1px solid #4c4c56;color:#c5c5cd;font-weight:500}.ui-node-row b.active-node{background:#dedee4;color:#101013;border-color:#dedee4}.ui-node-row i{font-style:normal;color:#aaa}.software-visual{background:linear-gradient(135deg,#1e2025,#080809)}.mock-browser{position:absolute;inset:20px 22px;background:#e9e9eb;color:#151519;padding:14px;transform:none;box-shadow:0 18px 40px rgba(0,0,0,.28)}.browser-top{display:flex;gap:4px;border-bottom:1px solid #c5c5ca;padding-bottom:9px}.browser-top i{height:5px;width:5px;background:#9a9aa1;border-radius:50%}.mock-title{font:500 28px/.9 var(--display);letter-spacing:-1.5px;margin-top:23px}.mock-title b{font-weight:800}.mock-shape{position:absolute;right:17px;top:44px;width:65px;height:65px;background:linear-gradient(140deg,#a8a8b2,#35353e)}.mock-lines{display:grid;gap:5px;width:45%;margin-top:17px}.mock-lines i{height:4px;background:#c7c7ce}.mock-lines i:nth-child(2){width:75%}.game-visual{background:linear-gradient(145deg,#22232a,#09090b)}.game-glow{position:absolute;right:40px;top:22px;width:85px;height:85px;border-radius:50%;background:#d5d5dc;opacity:.7;filter:blur(1px)}.game-mountain{position:absolute;bottom:-65px;width:0;height:0;border-left:180px solid transparent;border-right:180px solid transparent;border-bottom:190px solid #34343e}.m1{left:-30px}.m2{right:-80px;border-bottom-color:#1c1c23;border-left-width:150px;border-right-width:150px}.game-title{position:absolute;top:42px;left:30px;font:500 30px/.9 var(--display);letter-spacing:-1px}.game-title b{font-weight:800}.game-title small{display:block;font:700 7px var(--font);letter-spacing:2px;margin-top:12px}.work-category{margin:20px 0 8px}.work-card h3{font:500 19px var(--display);margin:0}.work-card>p:last-child{margin-top:8px}.portfolio-note{font-size:10px;color:#85858e;margin-top:28px}.contact-section{border-top:1px solid var(--line);background:radial-gradient(ellipse at 15% 100%,#1c1c21,#080809 60%);padding:85px 0}.contact-grid{display:grid;grid-template-columns:1fr .75fr;gap:100px}.contact-grid h2{font:500 clamp(52px,6vw,76px)/1.02 var(--display);letter-spacing:-3px;margin:22px 0}.contact-grid h2 span{color:#a6a6b0}.contact-grid>div>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#b3b3bc;max-width:400px}.contact-small{margin-top:50px;color:#92929b;font-size:9px;letter-spacing:1.5px;display:flex;gap:20px;align-items:center}.contact-small span{font-size:19px;color:#eee}.contact-form{display:flex;flex-direction:column}.contact-form label{font-size:10px;color:#c2c2ca;margin:0 0 8px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:#111114;border:1px solid #35353b;border-radius:4px;color:#fff;padding:13px;font:12px var(--font);margin-bottom:17px;outline:none;resize:vertical}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#bcbcc6}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#777780}.submit-button{align-self:flex-start}.form-note{font-size:9px;line-height:1.6;color:#888891;margin-top:12px}.footer{background:#070708}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:30px;padding-bottom:27px}.footer-top .brand-mark{font-size:29px}.footer-top .brand-name{font-size:9px;letter-spacing:3px}.footer-top>p{font-size:11px;color:#8e8e97}.footer-links{display:flex;gap:25px}.footer-links a,.footer-bottom{font-size:10px;color:#9999a2}.footer-bottom{border-top:1px solid var(--line);padding-top:17px;padding-bottom:17px;display:flex;justify-content:space-between;gap:15px}.footer-bottom a{color:#ddd}.footer-links a:hover,.footer-bottom a:hover{color:white}
@media(min-width:1450px){.hero{min-height:575px}}@media(max-width:900px){.section-wrap{width:calc(100% - 52px)}.site-header{padding-inline:26px}.nav{gap:24px}.brand{gap:17px}.brand-rule{display:none}.solutions{grid-template-columns:1.25fr repeat(3,1fr)}.solutions-intro{padding-right:25px}.solution-card{padding-left:25px;padding-right:15px}.about-grid{gap:40px}.contact-grid{gap:50px}}@media(max-width:640px){html{scroll-padding-top:70px}.section-wrap{width:calc(100% - 36px)}.site-header{height:72px;padding-inline:18px;display:flex;justify-content:space-between}.brand{gap:14px}.brand-mark{font-size:31px}.brand-name{font-size:10px;letter-spacing:3px}.header-cta{display:none}.menu-toggle{display:flex;flex-direction:column;gap:5px;border:1px solid #444;padding:11px;background:transparent;border-radius:50%;z-index:22}.menu-toggle span{display:block;width:17px;height:1px;background:white;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.nav{position:absolute;top:71px;left:0;right:0;background:#09090b;border-bottom:1px solid var(--line);padding:25px 20px;display:none;flex-direction:column;align-items:stretch;gap:23px}.nav.open{display:flex}.nav>a:not(.button){font-size:14px}.nav-cta{align-self:flex-start}.hero{min-height:590px}.orb{width:750px;top:30px;opacity:.95}.hero-copy{width:calc(100% - 30px);margin-top:-25px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero .eyebrow i{padding:0 5px}.hero h1{font-size:clamp(45px,11vw,63px);letter-spacing:-2.7px;margin:28px 0 20px}.hero-intro{font-size:13px;max-width:360px}.desktop-break{display:none}.hero-actions{flex-direction:column;gap:19px;margin-top:25px}.hero-services{width:calc(100% - 32px);bottom:23px;gap:10px;font-size:7px;letter-spacing:1px}.hero-services i{height:20px}.solutions{grid-template-columns:1fr;padding-top:55px;padding-bottom:35px}.solutions-intro{padding:0 0 28px}.solutions-intro h2,.services-heading h2{font-size:39px}.solution-card{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:0;padding:20px 5px;border-left:0;border-top:1px solid var(--line);min-height:120px}.solution-icon{grid-row:1/3;height:auto;font-size:27px}.solution-card h3{font-size:16px;margin:0 0 6px}.solution-card p{grid-column:2;font-size:11px}.solution-arrow{grid-column:3;grid-row:1/3;margin:0 12px;font-size:20px}.services,.work-section{padding-top:68px;padding-bottom:70px}.services-heading{display:block;margin:18px 0 28px}.services-heading>p{margin-top:18px}.services-grid{grid-template-columns:1fr}.service-card{border-right:0;border-bottom:1px solid var(--line);min-height:230px;padding:24px}.service-card:last-child{border-bottom:0}.service-symbol{margin-top:20px}.about-section{padding:48px 0}.about-grid{grid-template-columns:1fr;gap:32px}.about-visual{height:290px}.about-orb{width:200px;height:200px}.about-visual strong{font-size:57px}.about-copy h2{font-size:35px}.about-stats{gap:15px;justify-content:space-between}.about-stats strong{font-size:21px}.about-stats span{font-size:9px}.work-grid{grid-template-columns:1fr;gap:30px}.work-visual{height:230px}.contact-section{padding:62px 0}.contact-grid{grid-template-columns:1fr;gap:35px}.contact-grid h2{font-size:59px}.contact-small{margin-top:30px;font-size:8px}.footer-top{align-items:flex-start;flex-wrap:wrap}.footer-top>p{display:none}.footer-links{width:100%;flex-wrap:wrap;gap:18px}.footer-bottom{flex-wrap:wrap;font-size:9px}.footer-bottom span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

@media (min-width:641px) and (max-width:900px){.orb{width:1040px;max-width:none}}


/* SX Agency / cinematic About film — designed as an integrated visual, not a player. */
.about-video-container {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #050507;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 26px 75px rgba(0,0,0,.35);
}
.about-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* No player chrome, overlays, timer, or on-screen playback buttons. */
.about-video::-webkit-media-controls,
.about-video::-webkit-media-controls-enclosure,
.about-video::-webkit-media-controls-panel { display: none !important; }
@media (max-width: 640px) {
  .about-video-container { border-radius: 12px; }
}


/* SX premium About film — bigger, aligned closer to the left, with no player chrome.
   Deliberately scoped to the About section so the rest of the website is unchanged. */
.about-section { padding-block: 76px; }
.about-section .about-grid {
  width: min(1480px, calc(100% - 40px));
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
  gap: clamp(28px, 3.8vw, 68px);
  align-items: center;
}
.about-section .about-video-container {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  background: #050507;
  overflow: hidden;
}
.about-section .about-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  outline: 0;
  pointer-events: none;
}
/* Hide vendor video interfaces where supported; the MP4 also contains no progress graphic. */
.about-video::-webkit-media-controls,
.about-video::-webkit-media-controls-enclosure,
.about-video::-webkit-media-controls-panel,
.about-video::-webkit-media-controls-timeline { display: none !important; }
@media (max-width: 1020px) {
  .about-section .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-section .about-video-container { max-width: 920px; }
}
@media (max-width: 640px) {
  .about-section { padding-block: 52px; }
  .about-section .about-grid { width: calc(100% - 28px); gap: 30px; }
  .about-section .about-video-container { aspect-ratio: 4 / 3; border-radius: 10px; }
  .about-section .about-video { object-position: left center; }
}


/* V4 cinematic brand film: no motion transforms or transitions on the player. */
.about-section .about-video-container { transform: none; transition: none; }
.about-section .about-video { transform: none; transition: none; animation: none; }
@media(max-width:640px) {
  /* Show the full composition and all typography instead of cropping the film. */
  .about-section .about-video-container { aspect-ratio: 16 / 9; }
  .about-section .about-video { object-fit: contain; object-position: center; }
}


/* V5: premium editorial co-founders section, just below About. */
.founders-section {
  position: relative;
  background: #080809;
  border-bottom: 1px solid var(--line);
}
.founders-layout {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 7vw, 116px);
  align-items: center;
  padding-block: 82px 86px;
}
.founders-intro .eyebrow { color: #bbbbc3; }
.founders-intro .eyebrow-line { width: 28px; vertical-align: middle; margin-right: 9px; }
.founders-intro h2 {
  font: 500 clamp(34px, 3.5vw, 48px) / 1.13 var(--display);
  letter-spacing: -2px;
  margin: 24px 0 0;
}
.founders-intro h2 span { color: #9696a1; }
.founders-list { border-top: 1px solid #34343b; }
.founder-profile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 29px);
  padding: 29px 4px 29px 0;
  border-bottom: 1px solid #34343b;
}
.founder-monogram {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid #45454d;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 17%, #25252b, #111114 62%, #0b0b0d);
  color: #dedee5;
  font: 600 15px var(--display);
  letter-spacing: 1px;
}
.founder-info h3 {
  font: 500 clamp(21px, 2.05vw, 28px) / 1.2 var(--display);
  letter-spacing: -.8px;
  margin: 0 0 8px;
  color: #f4f4f6;
}
.founder-info p {
  margin: 0;
  color: #a6a6b0;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .2px;
}
.founder-separator { margin-inline: 5px; color: #666670; }
.founder-role {
  color: #bcbcc5;
  border: 1px solid #393940;
  border-radius: 100px;
  padding: 7px 12px;
  font: 600 10px var(--font);
  letter-spacing: 1.5px;
}
@media (max-width: 900px) {
  .founders-layout { grid-template-columns: 1fr; gap: 26px; padding-block: 65px; }
}
@media (max-width: 640px) {
  .founders-layout { padding-block: 57px 61px; }
  .founders-intro h2 { font-size: 37px; }
  .founder-profile { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 13px; padding-block: 21px; }
  .founder-monogram { width: 48px; height: 48px; font-size: 12px; }
  .founder-info h3 { font-size: clamp(18px, 5vw, 23px); }
  .founder-info p { font-size: 10px; }
  .founder-role { font-size: 9px; padding: 6px 8px; letter-spacing: 1px; }
}
@media (max-width: 350px) {
  .founder-profile { grid-template-columns: 42px minmax(0, 1fr); }
  .founder-monogram { width: 42px; height: 42px; }
  .founder-role { grid-column: 2; justify-self: start; }
}


/* V7: premium Apple-inspired custom service selector. */
.contact-form .service-select{position:relative;margin-bottom:17px}.service-select-trigger{position:relative;width:100%;min-height:54px;padding:0 54px 0 18px;border-radius:18px;border:1px solid #3b3b43;background:linear-gradient(180deg,rgba(23,24,28,.96),rgba(13,14,18,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 34px rgba(0,0,0,.28);color:#f1f1f4;font:500 13px var(--font);letter-spacing:.1px;display:flex;align-items:center;text-align:left;cursor:pointer;transition:border-color .22s,transform .22s,box-shadow .22s,background .22s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.service-select-trigger:hover{border-color:#555661;transform:translateY(-1px)}.service-select-trigger:focus-visible,.service-select.open .service-select-trigger{outline:none;border-color:#9fa3ad;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(255,255,255,.05),0 22px 40px rgba(0,0,0,.34)}.service-select-label{display:block;width:100%;padding-right:8px}.service-select[data-has-value="false"] .service-select-label{color:#8e8f98}.service-select-icon{position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:1.5px solid #d7d8de;border-bottom:1.5px solid #d7d8de;transform:rotate(45deg);opacity:.88;transition:transform .2s ease,opacity .2s ease}.service-select.open .service-select-icon{transform:rotate(225deg);opacity:1}.service-select-menu{position:absolute;left:0;right:0;top:calc(100% + 10px);display:none;padding:10px;border-radius:22px;border:1px solid #404149;background:linear-gradient(180deg,rgba(20,21,25,.98),rgba(10,11,14,.98));box-shadow:0 28px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:30}.service-select.open .service-select-menu{display:grid;gap:4px}.service-option{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#e6e7ec;padding:12px 14px;border-radius:14px;text-align:left;font:500 13px var(--font);letter-spacing:.1px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}.service-option:hover,.service-option:focus-visible,.service-option.is-selected{outline:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));color:#fff;transform:translateX(1px)}.service-select.invalid .service-select-trigger{border-color:#d0d1d8;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(255,255,255,.04),0 18px 36px rgba(0,0,0,.3)}@media(max-width:640px){.service-select-trigger{min-height:52px;border-radius:16px}.service-select-menu{border-radius:18px}}

/* V7: slight crop refinement to keep the About film focused and cleaner at the edges. */
.about-section .about-video{object-fit:cover;object-position:46% center;transform:scale(1.035)}@media(max-width:640px){.about-section .about-video{object-fit:cover;object-position:44% center;transform:scale(1.06)}}

/* V7.1: rebuilt About film has clean edges, so present it without extra cropping. */
.about-section .about-video{object-fit:cover;object-position:center;transform:none !important}
@media(max-width:640px){.about-section .about-video{object-fit:cover;object-position:center;transform:none !important}}


/* V9: crisp About film on every screen. Dedicated readable portrait film on phones. */
.about-section .about-video-mobile{display:none;}
@media (max-width:640px){
  .about-section .about-video-desktop{display:none;}
  .about-section .about-video-mobile{display:block;}
  .about-section .about-video-container{aspect-ratio:4/5;max-width:500px;margin-inline:auto;border-radius:16px;}
  .about-section .about-video{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none!important;}
}
/* Tablet gets spacious, legible grids rather than narrow desktop columns. */
@media (min-width:641px) and (max-width:1020px){
  .solutions{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .solutions-intro{grid-column:1/-1;padding:0 0 32px;}
  .solutions-intro>p:last-child{max-width:620px;}
  .solution-card{padding-inline:24px;min-height:190px;}
  .solution-card:first-of-type{border-left:0;}
  .contact-grid{grid-template-columns:1fr;gap:34px;}
  .contact-form{width:100%;max-width:690px;}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-section .about-grid{width:calc(100% - 52px);}
}
@media (max-width:640px){
  html{scroll-padding-top:76px;}
  body{font-size:15px;line-height:1.55;}
  .section-wrap{width:calc(100% - 40px);}
  .site-header{height:72px;padding-inline:20px;}
  .brand-name{font-size:10px;letter-spacing:2.3px;}
  .hero{min-height:620px;}
  .orb{width:680px;max-width:none;top:42px;left:50%;opacity:.86;}
  .hero-copy{width:calc(100% - 40px);margin-top:-28px;}
  .hero h1{font-size:clamp(43px,11.4vw,59px);line-height:1.06;letter-spacing:-2.4px;}
  .hero-intro{font-size:14px;line-height:1.7;max-width:330px;}
  .hero-actions{gap:22px;}
  .hero-actions .button{min-height:48px;padding-inline:24px;font-size:13px;}
  .hero-services{width:calc(100% - 32px);bottom:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 13px;line-height:1.7;white-space:normal;font-size:9px;letter-spacing:.7px;}
  .hero-services::before,.hero-services::after,.hero-services i{display:none;}
  .solutions{display:grid;grid-template-columns:minmax(0,1fr);padding-top:64px;padding-bottom:40px;}
  .solutions-intro h2,.services-heading h2{font-size:clamp(32px,9vw,40px);line-height:1.15;letter-spacing:-1.5px;}
  .solutions-intro>p:last-child,.services-heading>p{font-size:14px;line-height:1.75;max-width:100%;}
  .solution-card{grid-template-columns:43px minmax(0,1fr) 28px;padding-block:24px;}
  .solution-card h3{font-size:18px;}
  .solution-card p{font-size:13px;line-height:1.5;}
  .services,.work-section{padding-top:72px;padding-bottom:75px;}
  .services-grid,.work-grid{grid-template-columns:minmax(0,1fr);}
  .service-card{min-height:auto;padding:27px 24px 29px;}
  .service-card h3{font-size:22px;}
  .service-card p,.work-card>p:last-child{font-size:14px;line-height:1.7;max-width:none;}
  .service-card>a{font-size:13px;margin-top:18px;}
  .about-section{padding-block:58px;}
  .about-section .about-grid{width:calc(100% - 40px);grid-template-columns:minmax(0,1fr);gap:34px;}
  .about-copy h2{font-size:clamp(30px,8.4vw,39px);line-height:1.18;letter-spacing:-1.4px;}
  .about-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;max-width:none;}
  .about-stats{gap:8px;}
  .about-stats div{flex:1;min-width:0;}
  .about-stats span{font-size:10px;line-height:1.35;}
  .founders-layout{padding-block:63px;}
  .founder-info p{font-size:12px;line-height:1.55;}
  .founder-info h3{font-size:clamp(17px,5vw,23px);}
  .work-grid{gap:34px;}
  .work-visual{height:clamp(210px,62vw,270px);}
  .work-card h3{font-size:21px;}
  .work-category,.service-number{font-size:10px;}
  .portfolio-note{font-size:11px;line-height:1.6;}
  .contact-section{padding-block:74px;}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .contact-grid h2{font-size:clamp(45px,12vw,62px);}
  .contact-grid>div>p:not(.eyebrow){font-size:14px;line-height:1.75;}
  .contact-small{font-size:10px;letter-spacing:.8px;line-height:1.5;}
  .contact-form label{font-size:13px;margin-bottom:9px;}
  .contact-form input,.contact-form textarea{font-size:16px;min-height:49px;padding:14px;margin-bottom:19px;}
  .contact-form textarea{min-height:110px;}
  .service-select-trigger{font-size:15px;min-height:54px;padding-left:16px;}
  .service-option{font-size:15px;min-height:48px;padding:13px 15px;}
  .submit-button{min-height:49px;font-size:13px;}
  .form-note{font-size:11px;line-height:1.6;}
  .footer-top{padding-block:35px;gap:24px;}
  .footer-links{gap:14px 20px;}
  .footer-links a,.footer-bottom{font-size:11px;}
  .footer-bottom{line-height:1.6;}
}
@media (max-width:360px){
  .section-wrap{width:calc(100% - 32px);}
  .about-section .about-grid{width:calc(100% - 32px);}
  .hero h1{font-size:clamp(39px,11.5vw,44px);}
  .hero-copy{width:calc(100% - 32px);}
  .founder-profile{grid-template-columns:42px minmax(0,1fr);}
  .founder-role{grid-column:2;justify-self:start;}
  .founder-monogram{width:42px;height:42px;}
  .contact-grid h2{font-size:42px;}
  .hero-services{font-size:8px;}
}
@media (prefers-reduced-motion: reduce){
  .about-video{visibility:hidden;}
  .about-video-container{background-size:cover!important;background-position:center!important;}
}

@media (prefers-reduced-motion: reduce){
  .about-section .about-video-container{background-image:url("images/sx-about-video-poster.jpg");}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){
  .about-section .about-video-container{background-image:url("images/sx-about-video-mobile-poster.jpg");}
}


/* V10 / Premium line icons: intentionally monochrome, never platform emoji. */
.solution-icon, .service-symbol{color:#d8d8e0}
.solution-icon svg, .service-symbol svg{
  display:block;width:31px;height:31px;fill:none;
  stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;
}
.solution-icon svg circle,.service-symbol svg circle {fill:none}
.solution-card:hover .solution-icon svg,.service-card:hover .service-symbol svg{color:#fff}
.service-symbol svg{width:32px;height:32px}
.text-link span,.submit-button span,.service-card>a span,.header-cta span,
.hero-actions .button span,.nav-mobile-contact span {
  font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;
  font-size:17px;line-height:1;display:inline-block;color:inherit;
}
.nav-intro,.nav-footer,.nav-mobile-contact,.mobile-nav-backdrop{display:none}

/* V10 / Polished, Apple-inspired off-canvas phone navigation. */
@media (max-width:1180px){
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(8,8,9,.94);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .site-header .brand{position:relative;z-index:20}
  .menu-toggle{
    position:relative;z-index:34;width:44px;height:44px;
    padding:0;display:flex;align-items:center;justify-content:center;
    gap:6px;border:0;border-radius:12px;
    background:transparent;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle span{display:block;flex-shrink:0;width:21px;height:1.5px;background:#f3f3f6;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .menu-toggle:focus-visible{outline:2px solid #d1d1d8;outline-offset:2px}
  .mobile-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:30;
    background:rgba(0,0,0,.65);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease,visibility .35s ease;
  }
  body.nav-open .mobile-nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .site-header .nav{
    display:flex;position:fixed;inset:0 0 0 auto;z-index:32;
    width:min(440px,90vw);height:100vh;height:100dvh;
    padding:clamp(98px,15vh,142px) clamp(30px,7vw,50px) 32px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;overflow-y:auto;overscroll-behavior:contain;
    border:0;border-left:1px solid rgba(255,255,255,.12);
    background:linear-gradient(156deg,#18181c 0%,#0e0e11 52%,#080809 100%);
    box-shadow:-24px 0 80px rgba(0,0,0,.38);
    transform:translate3d(105%,0,0);opacity:.99;visibility:hidden;pointer-events:none;
    transition:transform .44s cubic-bezier(.22,.78,.18,1),visibility .44s;
    -webkit-overflow-scrolling:touch;
  }
  .site-header .nav.open{display:flex;transform:translate3d(0,0,0);visibility:visible;pointer-events:auto}
  .site-header .nav-intro{display:block;margin:0 0 22px;color:#8f909b;font-size:10px;letter-spacing:2.7px;font-weight:600}
  .site-header .nav>a:not(.button){
    display:flex;align-items:center;justify-content:space-between;
    padding:17px 0 21px;border-bottom:1px solid rgba(255,255,255,.10);
    font:500 clamp(28px,7.5vw,37px)/1.15 var(--display);
    letter-spacing:-1.25px;color:#f4f4f7;text-decoration:none;
    transition:color .2s,padding-left .2s;
  }
  .site-header .nav>a:not(.button):hover,.site-header .nav>a:not(.button):focus-visible{color:#fff;padding-left:5px;outline:none}
  .site-header .nav .nav-mobile-contact{display:flex;margin-top:15px;border-bottom:0!important;color:#bfc0c8!important;font-size:23px!important}
  .site-header .nav .nav-mobile-contact span{font-size:24px}
  .site-header .nav-footer{display:block;margin:auto 0 0;padding-top:34px;font-size:9px;letter-spacing:1.9px;color:#777882;line-height:1.7}
  .site-header .nav-footer span{padding-inline:4px}
  body.nav-open{overflow:hidden;touch-action:pan-y}
  .solution-icon{width:43px;display:flex;align-items:center}
  .solution-icon svg{width:28px;height:28px}
  .service-symbol svg{width:30px;height:30px}
  .hero-actions .text-link{gap:13px}
  .hero-actions .text-link span,.submit-button span{font-size:18px}
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav,.mobile-nav-backdrop,.menu-toggle span{transition:none!important}
}

/* Guard the viewport against the off-canvas drawer when closed. */
@media (max-width:640px){
  html{overflow-x:clip}
  .site-header{background:#09090b;-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* V11 — SX Leadership biographies: editorial tabs, accessible on all screens. */
.founders-container{padding-block:clamp(74px,7.5vw,110px) clamp(80px,8vw,120px)}
.founders-layout{padding-block:0;align-items:start;gap:clamp(40px,6vw,95px);margin-bottom:45px}
.founders-subtitle{font-size:13px;line-height:1.8;color:#aaaab3;max-width:345px;margin:22px 0 0}
.founders-list{width:100%}
button.founder-profile{width:100%;appearance:none;-webkit-appearance:none;border:0;border-bottom:1px solid #34343b;background:transparent;color:inherit;text-align:left;cursor:pointer;font-family:var(--font);transition:background .2s ease,padding .2s ease;position:relative}
button.founder-profile:hover{background:rgba(255,255,255,.025)}
button.founder-profile:focus-visible{outline:2px solid #c5c5ce;outline-offset:-3px}
button.founder-profile.is-selected{background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 75%);padding-left:14px;border-bottom-color:#55555f}
.founder-info{display:block;min-width:0}
.founder-info .founder-name{display:block;font:500 clamp(21px,2.05vw,28px)/1.2 var(--display);letter-spacing:-.8px;color:#f4f4f6;margin-bottom:7px}
.founder-info .founder-position{display:block;color:#aaaab4;font-size:11px;line-height:1.55;letter-spacing:.1px}
.founder-view-story{display:inline-flex;gap:12px;align-items:center;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#a9a9b3;margin-top:12px}
.founder-view-story span{font-size:14px;font-weight:400}
.founder-profile.is-selected .founder-view-story{color:#f3f3f6}
.founder-profile.is-selected .founder-monogram{border-color:#b2b2bd;background:radial-gradient(circle at 25% 15%,#303039,#0d0d10 65%)}
.founder-panels{border:1px solid #303036;background:linear-gradient(120deg,#131316,#0a0a0c 55%);min-width:0;box-shadow:0 30px 65px rgba(0,0,0,.12)}
.founder-story{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.55fr);min-width:0}
.founder-story[hidden]{display:none!important}
.founder-story-aside{min-height:100%;display:flex;flex-direction:column;padding:28px;border-right:1px solid #313138;background:radial-gradient(ellipse at 60% 35%,#26262e 0%,#121216 46%,#09090b 85%);overflow:hidden}
.founder-aside-header,.founder-aside-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#a1a1ac;font-size:8px;font-weight:600;letter-spacing:1.9px}
.founder-aside-foot{margin-top:auto;color:#9898a3}
.founder-art{position:relative;display:grid;place-items:center;min-height:380px;flex:1;isolation:isolate}
.founder-art:before{content:"";position:absolute;width:min(77%,270px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 27% 20%,#55555e 0%,#24242c 29%,#0b0b10 65%,#050506 100%);box-shadow:inset -20px -20px 45px #0009,0 0 55px #ffffff0b}
.founder-art:after{content:"";position:absolute;width:min(98%,350px);aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;z-index:-1}
.founder-art-grid{position:absolute;inset:6% -60%;opacity:.2;background-image:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px);background-size:45px 45px;transform:rotate(-24deg);mask-image:radial-gradient(ellipse at center,#000,transparent 65%)}
.founder-art-initials{position:relative;color:#f3f3f9;font:500 clamp(64px,7.5vw,117px)/1 var(--display);letter-spacing:-.07em;text-shadow:0 10px 40px #0008}
.founder-art-rule{position:absolute;bottom:19%;height:1px;width:55%;background:linear-gradient(90deg,transparent,#82828b,transparent)}
.founder-story-content{min-width:0;padding:clamp(32px,4.2vw,64px) clamp(26px,5.5vw,78px) clamp(38px,4vw,62px)}
.founder-story-eyebrow{margin:0 0 22px;font:600 9px var(--font);letter-spacing:2.4px;color:#a5a5af}
.founder-story-counter{color:#6c6c75}
.founder-story-content h3{font:500 clamp(31px,3.8vw,52px)/1.14 var(--display);letter-spacing:-1.9px;margin:0 0 8px}
.founder-story-title{color:#c6c6ce;font:500 13px/1.6 var(--font);margin:0}
.founder-story-title span{color:#777781;margin:0 5px}
.founder-story-rule{height:1px;width:100%;background:linear-gradient(90deg,#80808d,rgba(255,255,255,.08));margin:27px 0 29px}
.founder-story-prose{max-width:680px}
.founder-story-prose p{margin:0 0 20px;color:#b8b8c1;font:400 13.5px/1.88 var(--font);letter-spacing:.04px}
.founder-story-prose p.founder-lead{color:#ededf1;font-size:14.5px;line-height:1.8}
.founder-statement{margin:30px 0 26px;padding:23px 0 23px 26px;border-left:2px solid #c2c2ca;color:#f0f0f3;font:500 clamp(16px,1.6vw,20px)/1.65 var(--display);letter-spacing:-.3px}
.founder-contact-link{display:inline-flex;align-items:center;gap:13px;padding-bottom:7px;border-bottom:1px solid #74747d;color:#ededf0;font-size:12px;margin-top:14px}
.founder-contact-link span{font-size:17px}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px 24px;margin-top:23px}
.about-copy .about-actions .text-link{margin-top:0}
.about-secondary-link{font-size:11px;color:#aaaab3;display:inline-flex;gap:8px;align-items:center;transition:color .2s}
.about-secondary-link:hover{color:#fff}
@media(min-width:641px) and (max-width:1040px){
 .site-header .nav{gap:clamp(13px,2.4vw,28px)}
 .brand-name{letter-spacing:3px}
 .founder-story{grid-template-columns:minmax(210px,.67fr) minmax(0,1.6fr)}
 .founder-story-aside{padding:20px}
 .founder-story-content{padding:34px}
 .founder-art{min-height:310px}
}
@media(max-width:900px){
 .founders-layout{grid-template-columns:1fr;gap:26px;padding:0;margin-bottom:32px}
 .founders-subtitle{max-width:610px}
}
@media(max-width:640px){
 .founders-container{padding-block:64px 76px}
 .founders-intro h2{font-size:clamp(35px,9vw,42px);line-height:1.15}
 .founders-subtitle{font-size:13px;margin-top:15px}
 .founders-layout{gap:30px;margin-bottom:27px}
 button.founder-profile{grid-template-columns:46px minmax(0,1fr) auto;gap:12px;padding:19px 2px 19px 0}
 button.founder-profile.is-selected{padding-left:8px}
 .founder-profile .founder-monogram{width:46px;height:46px;font-size:12px}
 .founder-info .founder-name{font-size:clamp(18px,5.1vw,22px);margin-bottom:6px}
 .founder-info .founder-position{font-size:11px;line-height:1.4}
 .founder-role{font-size:9px;padding:6px 8px}
 .founder-view-story{font-size:8px;letter-spacing:1.1px;margin-top:9px}
 .founder-story{grid-template-columns:minmax(0,1fr)}
 .founder-story-aside{padding:18px 19px;border-right:0;border-bottom:1px solid #35353d}
 .founder-art{min-height:170px;flex:0}
 .founder-art:before{width:155px}
 .founder-art:after{width:188px}
 .founder-art-initials{font-size:65px}
 .founder-art-rule{bottom:14%}
 .founder-aside-header,.founder-aside-foot{font-size:8px}
 .founder-story-content{padding:32px 23px 38px}
 .founder-story-content h3{font-size:clamp(30px,8.1vw,39px);letter-spacing:-1.3px}
 .founder-story-title{font-size:12px}
 .founder-story-rule{margin:24px 0}
 .founder-story-prose p{font-size:13px;line-height:1.82;margin-bottom:20px}
 .founder-story-prose p.founder-lead{font-size:14px;line-height:1.82}
 .founder-statement{font-size:17px;margin:25px 0 20px;padding:15px 0 15px 18px}
 .about-actions{align-items:flex-start;flex-direction:column;gap:17px}
}
@media(max-width:360px){
 button.founder-profile,button.founder-profile.is-selected{grid-template-columns:40px minmax(0,1fr);padding-inline:5px;gap:11px}
 .founder-profile .founder-monogram{width:40px;height:40px}
 .founder-profile .founder-role{grid-column:2;justify-self:start;margin-top:0}
 .founder-story-content{padding:29px 18px 32px}
}


/* V12.1: founder portrait integration for Zaid. */
/* The portrait MUST be a single clipped image, not an overlay over the old initials. */
.founder-profile .founder-monogram.founder-photo-thumb{
  display:block;position:relative;isolation:isolate;box-sizing:border-box;
  aspect-ratio:1;min-width:0;min-height:0;flex-shrink:0;
  overflow:hidden;border-radius:50%;padding:0;margin:0;
  border:1px solid #8d8d98;background:#101014;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.24);
  line-height:0;
}
.founder-profile.is-selected .founder-monogram.founder-photo-thumb{background:#101014;border-color:#b2b2bd}
.founder-profile .founder-photo-thumb img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 50%;border-radius:50%;
}

.founder-art-photo:before{opacity:.72}
.founder-art-portrait-wrap{position:relative;width:min(77%,270px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 22px 55px rgba(0,0,0,.42);background:radial-gradient(circle at 50% 30%,#313139,#0b0b0e 78%)}
.founder-art-portrait{width:100%;height:100%;display:block;object-fit:cover;object-position:center 20%;transform:scale(1.04)}
.founder-art-photo .founder-art-rule{z-index:2}
@media (max-width: 820px){
  .founder-art-portrait-wrap{width:155px}
}
@media (max-width: 520px){
  .founder-photo-thumb img{object-position:center 16%}
  .founder-art-portrait-wrap{width:150px}
}


/* V12.3: James portrait integration */
.founder-profile .founder-photo-thumb-james img{object-position:center 14%;transform:scale(1.18)}
.founder-art-photo-james .founder-art-portrait{object-position:center 14%;transform:scale(1.08)}
@media (max-width: 520px){
  .founder-profile .founder-photo-thumb-james img{object-position:center 12%;transform:scale(1.16)}
  .founder-art-photo-james .founder-art-portrait{object-position:center 13%;transform:scale(1.06)}
}


/* V12.4: founder selector alignment fix.
   Keep the selected state visually highlighted without shifting the grid,
   so James and Zaid thumbnails/text align perfectly. */
button.founder-profile{
  padding-left:0;
}
button.founder-profile.is-selected{
  padding-left:0;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 48%,transparent 78%);
}
@media(max-width:640px){
  button.founder-profile.is-selected{
    padding-left:0;
  }
}
@media(max-width:360px){
  button.founder-profile,button.founder-profile.is-selected{
    padding-left:5px;
  }
}


/* SX Agency multi-page architecture — inherits original V12.4 design system */
body.multipage{min-height:100vh;display:flex;flex-direction:column}
body.multipage main{flex:1}
.site-header .nav{gap:clamp(15px,2.4vw,33px)}
.site-header .brand-rule{width:38px}
.site-header .nav .nav-current{color:#fff!important;position:relative}
@media(min-width:1181px){.site-header .nav .nav-current:after{content:"";position:absolute;bottom:-16px;left:0;right:0;height:1px;background:#a9a9b3}.header-cta.on-contact{border-color:#e7e7ec}}
.interior-hero{position:relative;min-height:350px;border-bottom:1px solid var(--line);display:flex;align-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 58% 140% at 88% 5%,rgba(73,73,82,.17),transparent 70%),#09090b}
.interior-halo{position:absolute;z-index:-1;width:min(560px,55vw);height:520px;right:3%;top:-310px;border-radius:50%;background:radial-gradient(circle at 40% 50%,#27272c 0,#0c0c0e 57%,#050506 80%);box-shadow:0 0 100px #ffffff0a,0 0 0 1px #ffffff0b;pointer-events:none}
.interior-hero-inner{padding-block:46px 58px;width:min(1280px,calc(100% - 100px))}
.interior-breadcrumb{display:flex;align-items:center;gap:12px;color:#8e8e98;font-size:9px;letter-spacing:1.8px;margin-bottom:43px}
.interior-breadcrumb .bread-line{width:22px;height:1px;background:#55555e}
.interior-hero .eyebrow{color:#b7b7c1}
.interior-hero h1{font:500 clamp(42px,5vw,66px)/1.11 var(--display);letter-spacing:-2.8px;margin:20px 0 16px;max-width:900px}
.interior-hero h1 span{color:#9999a5}
.interior-deck{font-size:14px;line-height:1.75;color:#b7b7c0;max-width:570px;margin:0}
.page-solutions .solutions{padding-block:78px 85px;min-height:340px}
.page-services .services,.page-work .work-section{padding-block:65px 88px}
.page-services .services>.section-kicker,.page-work .work-section>.section-kicker{display:none}
.page-services .services>.services-heading,.page-work .work-section>.services-heading{margin-top:0}
.page-about .about-section{border-top:0}
.page-contact .contact-section{border-top:0;padding-block:86px 105px}
.page-contact .contact-grid>div>h2{display:none}
.page-contact .contact-grid>div>.eyebrow{display:none}
.page-contact .contact-grid>div>p:not(.eyebrow){font-size:16px;max-width:435px;margin-top:8px}
.next-page-section{margin-block:0 70px;border:1px solid #303036;background:linear-gradient(120deg,#141417,#09090b);padding:35px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.next-page-section h2{font:500 clamp(23px,2.4vw,36px)/1.17 var(--display);letter-spacing:-1px;margin:13px 0 10px}
.next-page-section p:not(.eyebrow){font-size:12px;line-height:1.75;color:#aaaab3;margin:0}
.next-page-section .button{flex-shrink:0}
.home-directory{padding-block:75px 80px;border-bottom:1px solid var(--line)}
.home-directory-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:12px 40px;margin-bottom:32px}
.home-directory-heading>.eyebrow{grid-column:1 / -1}
.home-directory-heading h2{font:500 clamp(36px,3.8vw,52px)/1.15 var(--display);letter-spacing:-2px;margin:0}
.home-directory-heading h2 span{color:#96969f}
.home-directory-heading>p:last-child{justify-self:end;max-width:400px;color:#aaaab3;font-size:13px;line-height:1.7}
.home-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.directory-card{display:flex;flex-direction:column;min-height:220px;padding:27px 26px;border:1px solid #2d2d34;background:linear-gradient(140deg,#131317,#0a0a0c);transition:border-color .22s,background .22s,transform .22s}
.directory-card:hover{border-color:#888891;background:#18181c;transform:translateY(-3px)}
.directory-card>span{color:#9e9ea8;font-size:10px;letter-spacing:1.7px}
.directory-card h3{font:500 22px var(--display);letter-spacing:-.65px;margin:30px 0 8px}
.directory-card p{font-size:12px;line-height:1.65;color:#a6a6b0;max-width:230px;margin:0}
.directory-card b{align-self:end;margin-top:auto;font:400 24px var(--font);color:#e5e5eb}
.home-closer{text-align:center;background:radial-gradient(ellipse at 50% 100%,#202026,#09090a 64%);padding-block:75px 85px}
.home-closer h2{font:500 clamp(28px,3.5vw,46px)/1.25 var(--display);letter-spacing:-1.5px;margin:20px auto 27px}
.home-closer .text-link{justify-content:center}
@media(max-width:1180px){
 .site-header{display:flex;justify-content:space-between;align-items:center;padding-inline:26px}
 .site-header .header-cta{display:none}
 .site-header .menu-toggle{display:flex}
}
@media(min-width:641px) and (max-width:1180px){
 .site-header .nav{display:none}
}
@media(max-width:900px){.interior-hero-inner{width:calc(100% - 52px)}.home-directory-heading>p:last-child{max-width:280px}}
@media(max-width:640px){
 .interior-hero{min-height:320px}.interior-hero-inner{padding-block:33px 52px;width:calc(100% - 36px)}
 .interior-breadcrumb{margin-bottom:39px}.interior-halo{width:390px;height:390px;top:-260px;right:-170px}
 .interior-hero h1{font-size:clamp(39px,11vw,52px);letter-spacing:-1.9px}.interior-deck{font-size:13px}
 .home-directory{padding-block:50px 60px}.home-directory-heading{display:block}.home-directory-heading h2{margin-top:20px}
 .home-directory-heading>p:last-child{margin-top:16px;max-width:350px}
 .home-directory-grid{grid-template-columns:1fr;gap:10px}.directory-card{min-height:150px;padding:22px 20px}
 .directory-card h3{margin:18px 0 8px}.directory-card b{margin-top:-10px}
 .next-page-section{margin-bottom:55px;padding:29px 24px;align-items:flex-start;flex-direction:column}
 .page-solutions .solutions{padding-block:48px}.page-contact .contact-section{padding-block:53px 70px}
 .home-closer{padding-block:60px 70px}
}

@media(min-width:641px) and (max-width:1180px){.site-header .nav{display:flex}.site-header .menu-toggle{margin-left:auto}.site-header .brand{z-index:35}}


/* SX Agency socials — monochrome across all six pages */
.footer-social-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px;border-top:1px solid var(--line)}
.footer-social-heading,.contact-social-heading{color:#94949e;font-size:10px;letter-spacing:2px;font-weight:600}
.social-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;gap:9px;min-height:43px;padding:7px 14px;border:1px solid #35353b;border-radius:100px;color:#bcbcc5;font-size:11px;letter-spacing:.15px;transition:color .2s,border-color .2s,background .2s,transform .2s}
.social-link:hover,.social-link:focus-visible{background:#202025;border-color:#777780;color:white;transform:translateY(-2px)}
.social-icon{width:19px;height:19px;display:inline-flex;flex:0 0 19px;align-items:center;justify-content:center}
.social-icon svg{width:19px;height:19px;display:block}
.social-link:focus-visible,.contact-social-link:focus-visible{outline:2px solid #b7b7c1;outline-offset:3px}
.contact-social{margin-top:46px;max-width:435px}
.contact-social-heading{display:flex;align-items:center;gap:15px;margin:0 0 15px;letter-spacing:2px}
.contact-social-heading span{font-size:18px;color:#d9d9e1}
.contact-social-links{display:grid;grid-template-columns:1fr;gap:8px}
.contact-social-link{display:flex;align-items:center;gap:15px;padding:15px 18px;border:1px solid #303037;border-radius:12px;background:linear-gradient(115deg,#161619,#0d0d0f);color:#dddde4;transition:transform .2s,border-color .2s,background .2s}
.contact-social-link:hover{transform:translateX(3px);border-color:#777780;background:#202025;color:white}
.contact-social-link .social-icon{width:24px;height:24px;flex-basis:24px}
.contact-social-link .social-icon svg{width:21px;height:21px}
.contact-social-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.contact-social-name strong{font-size:13px;letter-spacing:.1px;font-weight:600}
.contact-social-name small{font-size:11px;color:#93939e}
.contact-social-arrow{margin-left:auto;color:#a6a6af;font-size:17px}
@media(max-width:900px){.footer-social-row{align-items:flex-start;flex-direction:column;gap:14px}.social-links{gap:9px}}
@media(max-width:640px){.footer-social-row{padding-block:21px;gap:16px}.footer-social-heading,.contact-social-heading{font-size:9px;letter-spacing:1.7px}.social-links{width:100%;gap:8px}.social-link{padding:8px 12px;min-height:43px;font-size:11px}.contact-social{margin-top:34px}.contact-social-link{padding:14px 16px}}
@media(max-width:360px){.social-link{padding:8px 9px;gap:6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.social-link:hover,.contact-social-link:hover{transform:none}}

/* Contact-form delivery feedback. Subtle SX colour accents maintain the dark aesthetic. */
.form-note[data-state="sending"]{color:#d3d3da}
.form-note[data-state="success"]{color:#a9d9bf}
.form-note[data-state="error"]{color:#f0b7b7}
.contact-form .submit-button:disabled{opacity:.67;cursor:wait;pointer-events:none}

/* Founder emails: accessible direct contact details, aligned to SX Agency's monochrome system. */
.founder-contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-top:21px}
.founder-contact-actions .founder-contact-link{margin-top:0}
.founder-direct-email{display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px;max-width:100%;color:#e8e8ec;text-decoration:none;border-left:2px solid #707078;padding:8px 0 8px 15px;transition:border-color .2s,color .2s}
.founder-direct-email:hover,.founder-direct-email:focus-visible{color:#fff;border-left-color:#fff}
.founder-email-label{font-size:9px;letter-spacing:1.8px;color:#9696a0;font-weight:600;flex-basis:100%}
.founder-email-address{font-size:clamp(12px,1.2vw,14px);overflow-wrap:anywhere}
.founder-email-arrow{font-size:15px;color:#bcbcc5}
/* Direct contact options remain separate from the automatic enquiry form. */
.contact-direct{margin-top:40px;max-width:435px}
.contact-direct-heading{display:flex;align-items:center;gap:15px;font-size:10px;letter-spacing:2px;color:#b3b3be;margin:0 0 14px}
.contact-direct-heading span{font-size:17px;color:#d9d9e1}
.contact-general-email{display:flex;flex-direction:column;gap:6px;padding:14px 18px;background:#161619;border:1px solid #36363e;border-radius:10px;color:#ededf2;transition:border-color .2s}
.contact-general-email span{font-size:9px;letter-spacing:1.4px;color:#a1a1ab}
.contact-general-email strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.contact-direct-list{display:flex;flex-direction:column;margin-top:9px;gap:9px}
.contact-direct-person{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 14px;padding:14px 16px;color:#e2e2e7;background:linear-gradient(115deg,#151518,#0d0d0f);border:1px solid #303037;border-radius:10px;transition:border-color .2s,background .2s}
.contact-direct-person:hover,.contact-general-email:hover,.contact-direct-person:focus-visible,.contact-general-email:focus-visible{border-color:#85858e;background:#202025}
.contact-direct-person>span:first-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.contact-direct-person strong{font-size:12px;font-weight:600}
.contact-direct-person small{font-size:10px;color:#9898a3}
.contact-direct-address{font-size:11px;color:#b9b9c3;overflow-wrap:anywhere}
.contact-direct-arrow{font-size:16px;color:#a6a6af}
@media(max-width:900px){.contact-direct-person{grid-template-columns:minmax(0,1fr) auto}.contact-direct-address{grid-column:1;grid-row:2}.contact-direct-arrow{grid-column:2;grid-row:1/span 2}}
@media(max-width:640px){.contact-direct{margin-top:30px}.contact-direct-person{padding:14px 15px}.founder-contact-actions{gap:14px}.founder-direct-email{padding-left:12px}}


/* SX sphere lighting — additive transparent layer only. The original JPEG,
   orb geometry, layout, stacking, and all other site styles are unchanged. */
.page-home .orb > .orb-lighting {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .orb > .orb-lighting { display: none; }
}

/* GPU-independent fallback, shown only if WebGL cannot initialize.
   The light revolves behind the same fixed analytical silhouette. */
.page-home .orb > .orb-lighting-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 40.2% 62.2% at 49.2% 62.2%, #000 0 94%, transparent 99%);
  mask-image: radial-gradient(ellipse 40.2% 62.2% at 49.2% 62.2%, #000 0 94%, transparent 99%);
}
.page-home .orb-lighting-fallback::before,
.page-home .orb-lighting-fallback::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  animation: sx-sphere-softbox-orbit 23s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.page-home .orb-lighting-fallback::before {
  background: radial-gradient(ellipse 24% 34% at 72% 29%,
    rgba(248, 249, 255, .19) 0%, rgba(232, 236, 246, .072) 30%,
    rgba(217, 223, 238, .026) 56%, transparent 80%);
}
.page-home .orb-lighting-fallback::after {
  background: radial-gradient(ellipse 15% 21% at 74% 28%,
    rgba(255, 255, 255, .115), rgba(240, 244, 255, .028) 50%, transparent 82%);
}
.page-home .orb.orb-webgl-ready > .orb-lighting-fallback { display: none; }
@keyframes sx-sphere-softbox-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-home .orb > .orb-lighting-fallback { display: none; }
}

.page-home .orb.orb-lighting-playing .orb-lighting-fallback::before,
.page-home .orb.orb-lighting-playing .orb-lighting-fallback::after {
  animation-play-state: running;
}

/* ================================================================
   SX AGENCY / PREMIUM MOTION — additive, asset-safe and responsive.
   None of these rules alters content, type scale, positioning or copy.
   ================================================================ */

/* Refined sticky desktop masthead; tablet and phone were already sticky. */
@media (min-width:1181px) {
  .sx-premium-enabled .site-header { position:sticky; top:0; }
}
.sx-premium-enabled .site-header {
  transition: background-color .38s ease, border-color .38s ease, box-shadow .38s ease, -webkit-backdrop-filter .38s ease, backdrop-filter .38s ease;
}
.sx-premium-enabled .site-header.sx-header-scrolled {
  background: rgba(10,10,12,.90);
  -webkit-backdrop-filter: blur(19px) saturate(115%);
  backdrop-filter: blur(19px) saturate(115%);
  border-bottom-color: rgba(230,230,240,.13);
  box-shadow: 0 14px 36px rgba(0,0,0,.21), 0 1px 0 rgba(255,255,255,.025);
}
/* Keep the navigation drawer above header-effects on mobile and tablet. */
@media (max-width:1180px) {
  .sx-premium-enabled .site-header.sx-header-scrolled {z-index:50;}
}

/* Phase 2: silver hover softbox and precise border illumination. */
@media (hover:hover) and (pointer:fine) {
  .sx-premium-enabled .directory-card,
  .sx-premium-enabled .service-card,
  .sx-premium-enabled .solution-card,
  .sx-premium-enabled .work-card {
    position:relative;
    isolation:isolate;
  }
  .sx-premium-enabled .directory-card::after,
  .sx-premium-enabled .service-card::after,
  .sx-premium-enabled .solution-card::after,
  .sx-premium-enabled .work-card::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0;
    border-radius:inherit;
    background: radial-gradient(290px circle at var(--sx-light-x,50%) var(--sx-light-y,45%), rgba(245,245,255,.095), rgba(225,225,240,.027) 43%, transparent 76%);
    transition:opacity .40s ease;
  }
  .sx-premium-enabled .directory-card:hover::after,
  .sx-premium-enabled .directory-card:focus-visible::after,
  .sx-premium-enabled .service-card:hover::after,
  .sx-premium-enabled .service-card:focus-within::after,
  .sx-premium-enabled .solution-card:hover::after,
  .sx-premium-enabled .solution-card:focus-within::after,
  .sx-premium-enabled .work-card:hover::after,
  .sx-premium-enabled .work-card:focus-within::after { opacity:1; }
  .sx-premium-enabled .directory-card:hover,
  .sx-premium-enabled .directory-card:focus-visible {
    border-color: rgba(205,205,218,.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 15px 35px rgba(0,0,0,.21);
  }
  .sx-premium-enabled .service-card {
    transition: background-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.19,1,.22,1);
  }
  .sx-premium-enabled .service-card:hover,
  .sx-premium-enabled .service-card:focus-within {
    background-color:rgba(255,255,255,.027);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  }
  .sx-premium-enabled .work-card .work-visual {
    transition:filter .48s ease, border-color .38s ease;
  }
  .sx-premium-enabled .work-card:hover .work-visual {
    filter:brightness(1.09);
    border-color:#5f5f67;
  }
  /* Buttons retain the original shape, size and base palette. */
  .sx-premium-enabled .button:not(:disabled) {
    transition:background .28s ease, border-color .28s ease, box-shadow .3s ease, color .28s ease;
  }
  .sx-premium-enabled .button-silver:hover,
  .sx-premium-enabled .button-silver:focus-visible {
    box-shadow:0 8px 28px rgba(232,232,245,.17);
  }
  .sx-premium-enabled .button-outline:hover,
  .sx-premium-enabled .button-outline:focus-visible {
    box-shadow:inset 0 0 0 1px rgba(244,244,248,.13);
  }
  .sx-premium-enabled .button > span,
  .sx-premium-enabled .text-link > span,
  .sx-premium-enabled .service-card a > span,
  .sx-premium-enabled .directory-card > b,
  .sx-premium-enabled .founder-contact-link > span {
    display:inline-block;
    transition: transform .32s cubic-bezier(.19,1,.22,1);
  }
  .sx-premium-enabled .button:hover > span,
  .sx-premium-enabled .button:focus-visible > span,
  .sx-premium-enabled .text-link:hover > span,
  .sx-premium-enabled .text-link:focus-visible > span,
  .sx-premium-enabled .service-card a:hover > span,
  .sx-premium-enabled .service-card a:focus-visible > span,
  .sx-premium-enabled .directory-card:hover > b,
  .sx-premium-enabled .directory-card:focus-visible > b,
  .sx-premium-enabled .founder-contact-link:hover > span,
  .sx-premium-enabled .founder-contact-link:focus-visible > span {
    transform: translate3d(4px,0,0);
  }
}

/* OS reduced-motion control always wins; static content remains fully visible. */
@media (prefers-reduced-motion:reduce) {
  .sx-premium-enabled .site-header,
  .sx-premium-enabled .directory-card::after,
  .sx-premium-enabled .service-card::after,
  .sx-premium-enabled .solution-card::after,
  .sx-premium-enabled .work-card::after { transition:none!important; }
}


/* =====================================================================
   SX / LIQUID GLASS — floating, translucent CTA material.
   Only previously marked .sx-glass-cta elements are affected. No sizing
   or layout changes elsewhere. Works without JavaScript; pointer-interactive
   highlights and a brief touch rebound are progressive enhancements.
   ===================================================================== */
html .sx-glass-cta {
  --sx-liquid-x: 23%;
  --sx-liquid-y: 0%;
  --sx-liquid-intensity: 0;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 20px;
  min-height: 50px;
  padding: 7px 7px 7px 19px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(218, 225, 238, .36);
  border-bottom-color: rgba(145, 152, 168, .39);
  color: #f7f8fc;
  background: linear-gradient(165deg,
     rgba(94, 101, 116, .29) 0%,
     rgba(54, 59, 71, .24) 15%,
     rgba(18, 20, 27, .49) 50%,
     rgba(12, 14, 21, .63) 85%,
     rgba(34, 39, 51, .26) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .47),
    inset 1px 0 0 rgba(243, 246, 255, .11),
    inset 0 -1px 0 rgba(203, 215, 239, .16),
    0 1px 0 rgba(255,255,255,.055),
    0 9px 23px rgba(0,0,0,.30),
    0 18px 38px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(20px) saturate(115%) brightness(1.045);
  backdrop-filter: blur(20px) saturate(115%) brightness(1.045);
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.44);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform .35s cubic-bezier(.21,.75,.3,1),
    border-color .30s ease,
    box-shadow .36s ease,
    background .36s ease;
}
/* A translucent top meniscus, liquid lens and subtle bottom curvature. */
html .sx-glass-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 126% at var(--sx-liquid-x) var(--sx-liquid-y),
      rgba(255,255,255,calc(.10 + var(--sx-liquid-intensity) * .20)),
      rgba(225,235,255,.06) 38%, transparent 80%),
    linear-gradient(180deg,
      rgba(255,255,255,.26) 0%,
      rgba(245,247,255,.08) 5%,
      rgba(255,255,255,0) 27%,
      rgba(255,255,255,.022) 46%,
      rgba(251,253,255,.04) 50%,
      rgba(255,255,255,0) 65%,
      rgba(219,230,255,.08) 94%,
      rgba(242,247,255,.17) 100%);
  box-shadow: inset 0 8px 13px -13px rgba(255,255,255,.95);
  opacity: 1;
  transition: opacity .32s ease;
}
/* Moving specular reflection; only sweeps when hovered, not looping. */
html .sx-glass-cta::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: -50%;
  bottom: -50%;
  left: -60%;
  width: 42%;
  background: linear-gradient(105deg,
     transparent 0%, rgba(255,255,255,.015) 20%,
     rgba(249,252,255,.24) 48%,
     rgba(245,248,255,.09) 56%, transparent 90%);
  filter: blur(8px);
  transform: skewX(-23deg) translate3d(0,0,0);
  opacity: 0;
}
/* Glass arrow chamber: optically curved bubble, not a hard silver ring. */
html .sx-glass-cta > .sx-cta-arrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  min-width: 33px;
  min-height: 33px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(246,248,255,.48);
  background:
    radial-gradient(ellipse 75% 50% at 28% 7%, rgba(255,255,255,.23), transparent 78%),
    linear-gradient(160deg, rgba(140,150,168,.18), rgba(16,19,27,.42) 55%, rgba(4,7,12,.30));
  color: #f8faff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.36),
    inset 0 -2px 7px rgba(0,0,0,.42),
    inset 2px 0 4px rgba(255,255,255,.035),
    0 2px 7px rgba(0,0,0,.27);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  transform: translate3d(0,0,0) scale(1);
  transition:
    transform .36s cubic-bezier(.18,.75,.33,1.24),
    border-color .28s ease,
    box-shadow .30s ease,
    background .30s ease;
}
html .sx-glass-cta > .sx-cta-arrow::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 1px 2px auto 2px;
  height: 42%;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent);
  opacity: .70;
}
html .sx-glass-cta > .sx-cta-arrow::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 3px;
  border-radius: inherit;
  box-shadow: inset 0 -2px 3px rgba(242,247,255,.10);
}
html .sx-glass-cta > .sx-cta-arrow svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.24));
}
/* The second hero action has a slightly darker, quieter glass fill. */
html .page-home .hero-actions > .sx-glass-cta:nth-child(2) {
  background: linear-gradient(165deg,
    rgba(72,78,93,.22), rgba(26,29,38,.39) 33%,
    rgba(8,10,16,.59) 82%, rgba(29,34,43,.22));
  border-color: rgba(202,211,228,.29);
  border-bottom-color: rgba(141,151,168,.31);
}
/* Refraction brightens towards the mouse; only the light moves, not the pill. */
@media (hover: hover) and (pointer: fine) {
  html .sx-glass-cta:hover:not(:disabled),
  html .sx-glass-cta:focus-visible:not(:disabled),
  html.sx-premium-enabled .sx-glass-cta:hover:not(:disabled),
  html.sx-premium-enabled .button-silver.sx-glass-cta:hover:not(:disabled),
  html.sx-premium-enabled .button-outline.sx-glass-cta:hover:not(:disabled) {
    color: #fff;
    transform: translate3d(0,-2px,0) scale(1.008);
    background: linear-gradient(165deg,
      rgba(125,133,154,.34), rgba(63,71,87,.25) 24%,
      rgba(19,21,30,.51) 62%, rgba(12,14,21,.64));
    border-color: rgba(246,249,255,.66);
    border-bottom-color: rgba(167,179,199,.43);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.64),
      inset 0 -1px 0 rgba(223,231,255,.18),
      0 12px 26px rgba(0,0,0,.36),
      0 0 21px rgba(239,246,255,.075);
  }
  html .page-home .hero-actions > .sx-glass-cta:nth-child(2):hover {
    background: linear-gradient(165deg,
       rgba(102,111,130,.29), rgba(31,36,46,.39) 35%, rgba(10,12,19,.63));
  }
  html .sx-glass-cta:hover::after,
  html .sx-glass-cta:focus-visible::after {
    animation: sx-liquid-glint .72s cubic-bezier(.18,.67,.34,1) both;
  }
  html .sx-glass-cta:hover > .sx-cta-arrow,
  html .sx-glass-cta:focus-visible > .sx-cta-arrow,
  html.sx-premium-enabled .sx-glass-cta:hover > .sx-cta-arrow {
    transform: translate3d(1px,-1px,0) scale(1.06);
    border-color: rgba(255,255,255,.74);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.46),
      inset 0 -2px 8px rgba(0,0,0,.32),
      0 0 10px rgba(246,250,255,.14);
  }
}
@keyframes sx-liquid-glint {
  0% { left:-58%;opacity:0; }
  15% { opacity:.67; }
  82% { opacity:.53; }
  100% { left:120%;opacity:0; }
}
/* Press makes the capsule compress like a soft optical surface. */
html .sx-glass-cta.sx-liquid-pressed:not(:disabled),
html.sx-premium-enabled .sx-glass-cta.sx-liquid-pressed:not(:disabled) {
  transform: translate3d(0,0,0) scale(.975);
  transition-duration: .11s;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.32),
    inset 0 1px 2px rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.23);
}
html .sx-glass-cta.sx-liquid-pressed > .sx-cta-arrow,
html.sx-premium-enabled .sx-glass-cta.sx-liquid-pressed > .sx-cta-arrow {
  transform: scale(.91);
  transition-duration: .10s;
}
/* Rebound and bubble-pop after a click/tap; no cartoon bounce. */
html .sx-glass-cta.sx-liquid-released:not(:disabled) {
  animation: sx-liquid-surface-return .37s cubic-bezier(.2,.8,.32,1) both;
}
html .sx-glass-cta.sx-liquid-released > .sx-cta-arrow {
  animation: sx-liquid-bubble-pop .38s cubic-bezier(.16,.72,.3,1) both;
}
@keyframes sx-liquid-surface-return {
  0% {transform:translate3d(0,0,0) scale(.975)}
  45% {transform:translate3d(0,-2px,0) scale(1.009)}
  100% {transform:translate3d(0,0,0) scale(1)}
}
@keyframes sx-liquid-bubble-pop {
  0% {transform:scale(.91)}
  42% {transform:scale(1.12)}
  71% {transform:scale(.985)}
  100% {transform:scale(1)}
}
/* Subdued circular wave from pointer contact, drawn entirely inside pill. */
html .sx-glass-cta > .sx-liquid-ripple {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 14px;
  height: 14px;
  left: var(--sx-ripple-x, 50%);
  top: var(--sx-ripple-y, 50%);
  border-radius: 50%;
  border: 1px solid rgba(246,250,255,.38);
  background: radial-gradient(circle, rgba(246,250,255,.18), rgba(228,239,255,.04) 45%, transparent 72%);
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  animation: sx-liquid-touch-wave .43s ease-out both;
}
@keyframes sx-liquid-touch-wave {
  0% {transform:translate(-50%,-50%) scale(.2);opacity:.7;}
  100% {transform:translate(-50%,-50%) scale(11);opacity:0;}
}
html .sx-glass-cta:focus-visible {
  outline:2px solid rgba(246,249,255,.96);
  outline-offset:4px;
}
html .sx-glass-cta:disabled {opacity:.65;cursor:wait;}
/* Keep button geometry as in the previous deploy, including the masthead. */
html .page-home .hero-actions > .sx-glass-cta {
  min-height:50px;
  padding:7px 7px 7px 19px;
  margin:0;
  font-size:12px;
  border-bottom-width:1px;
}
html .sx-glass-cta.header-cta {min-height:44px;padding:5px 6px 5px 17px;gap:19px;}
html .sx-glass-cta.header-cta > .sx-cta-arrow {width:29px;height:29px;min-width:29px;min-height:29px;}
html .contact-form .sx-glass-cta.submit-button {border-radius:999px;}
@media (max-width:1180px) {
  html .site-header .header-cta.sx-glass-cta {display:none;}
}
@media (max-width:640px) {
  html .page-home .hero-actions > .sx-glass-cta {
    width:min(262px,calc(100vw - 40px));
    justify-content:space-between;
  }
  html .page-home .hero-actions {gap:13px;}
}
@media (hover: none) {
  html .sx-glass-cta::after {display:none;}
}
@media (prefers-reduced-motion:reduce) {
  html .sx-glass-cta, html .sx-glass-cta::before,
  html .sx-glass-cta::after, html .sx-glass-cta > .sx-cta-arrow,
  html .sx-glass-cta > .sx-liquid-ripple,
  html.sx-premium-enabled .sx-glass-cta {
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  html .sx-glass-cta > .sx-liquid-ripple {display:none;}
}


/* V12 / Liquid-glass desktop navigation bar inspired by SX mockup. */
@media (min-width:1181px){
  .site-header{
    position:sticky;top:14px;z-index:60;
    width:min(1540px, calc(100% - 44px));
    margin:14px auto 0;
    padding:0 18px 0 16px;
    height:92px;
    grid-template-columns:auto 1fr auto;
    gap:22px;
    border:1px solid rgba(232,236,247,.17);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(20,21,26,.80) 0%, rgba(8,8,10,.90) 68%, rgba(6,6,8,.93) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 14px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.03);
    overflow:hidden;
  }
  .site-header::before{
    content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 130% at 0% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 18%, transparent 36%),
               linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 32%);
    opacity:.85;
  }
  .site-header::after{
    content:"";position:absolute;left:22px;right:22px;bottom:1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 82%, transparent 100%);
  }
  .site-header.sx-header-scrolled{
    background:linear-gradient(180deg, rgba(18,19,24,.88) 0%, rgba(7,8,10,.94) 100%);
    box-shadow:0 18px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(255,255,255,.04);
  }
  .site-header .brand{position:relative;z-index:2;gap:18px;padding-left:10px}
  .site-header .brand-mark{font-size:36px;letter-spacing:-4.8px}
  .site-header .brand-name{font-size:12px;letter-spacing:5px;color:#f0f1f4}
  .site-header .brand-rule{display:block;width:54px;height:1px;margin-left:2px;background:linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08));}
  .site-header .nav{
    position:relative;z-index:2;justify-self:center;display:flex;align-items:center;justify-content:center;
    gap:6px;
  }
  .site-header .nav > a:not(.button){
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    min-height:54px;padding:0 20px;border-radius:999px;
    color:rgba(228,230,236,.88);font-size:13px;font-weight:500;letter-spacing:.12px;
    transition:color .28s ease, transform .28s ease, text-shadow .28s ease;
    isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent;
  }
  .site-header .nav > a:not(.button)::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    border:1px solid rgba(225,229,239,.16);
    background:radial-gradient(circle at var(--sx-nav-x, 50%) var(--sx-nav-y, 50%), rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,.02) 46%, rgba(255,255,255,0) 70%),
               linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 32%, rgba(255,255,255,.045) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.16);
    opacity:0;transform:scale(.965);transition:opacity .30s ease, transform .34s cubic-bezier(.19,1,.22,1), border-color .3s ease;
  }
  .site-header .nav > a:not(.button)::after{
    content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%) scaleX(.65);transform-origin:center;
    width:42px;height:1.6px;border-radius:999px;pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.82), rgba(255,255,255,0));
    opacity:0;transition:opacity .30s ease, transform .34s cubic-bezier(.19,1,.22,1);
  }
  .site-header .nav > a:not(.button):hover,
  .site-header .nav > a:not(.button):focus-visible{color:#fff;transform:translateY(-1px);text-shadow:0 0 14px rgba(255,255,255,.10);outline:none}
  .site-header .nav > a:not(.button):hover::before,
  .site-header .nav > a:not(.button):focus-visible::before{opacity:.88;transform:scale(1)}
  .site-header .nav > a:not(.button):hover::after,
  .site-header .nav > a:not(.button):focus-visible::after{opacity:.65;transform:translateX(-50%) scaleX(.95)}
  .site-header .nav > a.nav-current,
  .site-header .nav > a[aria-current="page"]{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.18)}
  .site-header .nav > a.nav-current::before,
  .site-header .nav > a[aria-current="page"]::before{
    opacity:1;transform:scale(1);
    border-color:rgba(236,240,247,.20);
    background:radial-gradient(circle at var(--sx-nav-x, 50%) 22%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,.022) 48%, rgba(255,255,255,0) 72%),
               linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 34%, rgba(255,255,255,.07) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), 0 16px 26px rgba(0,0,0,.20), 0 0 18px rgba(255,255,255,.05);
  }
  .site-header .nav > a.nav-current::after,
  .site-header .nav > a[aria-current="page"]::after{opacity:1;transform:translateX(-50%) scaleX(1.05)}
  .site-header .header-cta{position:relative;z-index:2;justify-self:end;min-width:198px}
  .site-header .header-cta::before{
    content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%);width:1px;height:54px;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.20), rgba(255,255,255,0));
  }
}

@media (max-width:1180px){
  .site-header{z-index:60}
}


/* V12.1 — Header scrolls away with the page on all screen sizes.
   Preserve the existing glass look, nav layout, and mobile drawer behavior.
   This overrides the previous sticky positioning only. */
.site-header,
.sx-premium-enabled .site-header {
  position: relative;
  top: auto;
}


/* SX Agency — CONTACT liquid glass. Isolated to the controls circled by client.
   Glass materials and press feedback are paint-only; original layout, actions,
   service values and form submission code remain untouched. */
.page-contact .contact-general-email,
.page-contact .contact-direct-person,
.page-contact .contact-social-link,
.page-contact .service-select-trigger {
  --sx-contact-x: 22%; --sx-contact-y: 0%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(220,226,239,.27);
  border-radius:16px;
  color:#f2f2f6;
  background:
    radial-gradient(ellipse 110% 145% at var(--sx-contact-x) var(--sx-contact-y), rgba(226,231,244,.115),transparent 54%),
    linear-gradient(170deg,rgba(46,48,57,.39) 0%,rgba(18,19,24,.68) 40%,rgba(10,11,15,.82) 100%);
  -webkit-backdrop-filter:blur(23px) saturate(135%);
  backdrop-filter:blur(23px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.055),
    inset 1px 0 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.28),
    0 1px 14px rgba(255,255,255,.015);
  transition:
    transform .36s cubic-bezier(.2,.78,.18,1),
    border-color .3s ease,background .3s ease,box-shadow .34s ease;
  -webkit-tap-highlight-color:transparent;
  transform-origin:center;
}
.page-contact .contact-general-email::before,
.page-contact .contact-direct-person::before,
.page-contact .contact-social-link::before,
.page-contact .service-select-trigger::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse 40% 28% at var(--sx-contact-x) 0%, rgba(255,255,255,.30),transparent 100%),
    linear-gradient(178deg,rgba(255,255,255,.10),transparent 23%,transparent 71%,rgba(255,255,255,.028)),
    linear-gradient(105deg,transparent 5%,rgba(255,255,255,.04) 48%,transparent 70%);
  opacity:.58;
  transition:opacity .4s ease;
}
.page-contact .contact-general-email > *,
.page-contact .contact-direct-person > *,
.page-contact .contact-social-link > *,
.page-contact .service-select-trigger > * { position:relative;z-index:1; }
@media (hover:hover) and (pointer:fine){
  .page-contact .contact-general-email:hover,
  .page-contact .contact-direct-person:hover,
  .page-contact .contact-social-link:hover,
  .page-contact .service-select-trigger:hover {
    transform:translateY(-2px) scale(1.004);
    border-color:rgba(244,247,255,.51);
    background:
      radial-gradient(ellipse 110% 145% at var(--sx-contact-x) var(--sx-contact-y), rgba(242,246,255,.185),transparent 54%),
      linear-gradient(167deg,rgba(48,51,61,.49),rgba(16,17,22,.72) 47%,rgba(9,10,14,.84));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.075),
      0 16px 38px rgba(0,0,0,.34),0 0 26px rgba(220,230,255,.045);
  }
  .page-contact .contact-general-email:hover::before,
  .page-contact .contact-direct-person:hover::before,
  .page-contact .contact-social-link:hover::before,
  .page-contact .service-select-trigger:hover::before{opacity:1}
}
.page-contact .contact-general-email:focus-visible,
.page-contact .contact-direct-person:focus-visible,
.page-contact .contact-social-link:focus-visible,
.page-contact .service-select-trigger:focus-visible {
  outline:2px solid rgba(238,242,250,.78);outline-offset:3px;
}
.page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger):active,
.page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger).sx-contact-pressed {
  transform:translateY(1px) scale(.989);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14),0 5px 16px rgba(0,0,0,.25);
}
.page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger).sx-contact-released {
  animation:sx-contact-soft-rebound .36s cubic-bezier(.18,.8,.22,1) both;
}
@keyframes sx-contact-soft-rebound { 0%{transform:scale(.986)} 58%{transform:scale(1.012)} 100%{transform:scale(1)} }
.page-contact .sx-contact-ripple {
  position:absolute!important;z-index:0!important;left:var(--sx-rx);top:var(--sx-ry);
  height:15px;width:15px;border:1px solid rgba(248,250,255,.30);border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(.1);
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);
  animation:sx-contact-glass-ripple .55s cubic-bezier(.1,.6,.24,1) forwards;
}
@keyframes sx-contact-glass-ripple{from{opacity:.60;transform:translate(-50%,-50%) scale(.1)}to{opacity:0;transform:translate(-50%,-50%) scale(14)}}

/* Existing team-card proportions are retained. Integrate a glass arrow chamber. */
.page-contact .contact-general-email {padding-right:60px;min-height:65px;justify-content:center}
.page-contact .contact-general-email::after {
  content:"";position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:2;
  width:31px;height:31px;display:grid;place-items:center;border-radius:50%;
  font:400 17px/1 Arial,sans-serif;color:#f6f7fa;
  background:radial-gradient(circle at 24% 14%,rgba(255,255,255,.17),transparent 45%),linear-gradient(165deg,rgba(56,59,68,.58),rgba(7,8,12,.86));
  border:1px solid rgba(230,235,246,.37);box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.36);
  transition:transform .32s cubic-bezier(.18,.8,.2,1),box-shadow .3s ease;
}
.page-contact .contact-direct-person {min-height:65px}
.page-contact .contact-direct-arrow,.page-contact .contact-social-arrow {
  width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border-radius:50%;
  font:400 17px/1 Arial,sans-serif;color:#f0f1f6;
  border:1px solid rgba(230,235,246,.31);
  background:radial-gradient(circle at 26% 8%,rgba(255,255,255,.18),transparent 53%),linear-gradient(170deg,rgba(50,52,62,.59),rgba(7,8,11,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -2px 8px rgba(0,0,0,.29);
  transition:transform .33s cubic-bezier(.19,1,.22,1),border-color .28s,box-shadow .3s;
}
.page-contact .contact-direct-arrow {margin-left:0;justify-self:end}
.page-contact .contact-social-link {min-height:66px}
.page-contact .contact-social-link .social-icon {color:#eef0f5;transition:filter .3s ease, transform .34s cubic-bezier(.19,1,.22,1)}
.page-contact .contact-social-link:hover .social-icon {transform:scale(1.04);filter:drop-shadow(0 0 7px rgba(235,239,250,.17))}
.page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link):hover :is(.contact-direct-arrow,.contact-social-arrow){
  transform:scale(1.085);border-color:rgba(246,248,255,.57);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(255,255,255,.06);
}
.page-contact .contact-general-email:hover::after{transform:translateY(-50%) scale(1.085);box-shadow:inset 0 1px 1px rgba(255,255,255,.34),0 0 13px rgba(255,255,255,.07)}
.page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link).sx-contact-pressed :is(.contact-direct-arrow,.contact-social-arrow){transform:scale(.90)}
.page-contact .contact-general-email.sx-contact-pressed::after{transform:translateY(-50%) scale(.90)}

/* Service selector: a larger smoked-glass surface with a controlled interior. */
.page-contact .service-select{z-index:auto}
.page-contact .service-select.open{z-index:40}
.page-contact .service-select-trigger {min-height:56px;border-radius:17px;padding-right:58px}
.page-contact .service-select-label{font-weight:500}
.page-contact .service-select-icon {
  position:absolute;
  top:50%;right:15px;margin:0;
  width:31px;height:31px;
  display:grid;place-items:center;
  color:rgba(242,245,250,.96);
  transform:translateY(-50%) rotate(0deg);
  border:1px solid rgba(232,236,246,.32);border-radius:50%;
  background:radial-gradient(circle at 24% 10%,rgba(255,255,255,.17),transparent 58%),linear-gradient(165deg,rgba(45,47,56,.66),rgba(8,9,13,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -2px 9px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.19,1,.22,1),border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.page-contact .service-select-icon svg{display:block;width:14px;height:14px;transform:translateY(0.5px)}
.page-contact .service-select-icon path{stroke:currentColor}
.page-contact .service-select.open .service-select-icon{transform:translateY(-50%) rotate(180deg);border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 9px rgba(0,0,0,.3),0 0 14px rgba(255,255,255,.045)}
.page-contact .service-select-menu{
  padding:10px;gap:5px;border-radius:21px;
  border:1px solid rgba(224,230,242,.34);
  background:radial-gradient(ellipse 100% 90% at 20% 0%,rgba(73,75,88,.25),transparent 68%),linear-gradient(165deg,rgba(33,35,43,.96),rgba(10,11,16,.97));
  -webkit-backdrop-filter:blur(28px) saturate(125%);backdrop-filter:blur(28px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 24px 64px rgba(0,0,0,.53),0 0 38px rgba(255,255,255,.025);
  animation:sx-contact-menu-in .28s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes sx-contact-menu-in{from{opacity:.1;transform:translateY(-5px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}
.page-contact .service-option {
  position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;
  border-radius:13px;min-height:45px;display:flex;align-items:center;
  padding:12px 17px;transition:transform .25s cubic-bezier(.19,1,.22,1),background .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.page-contact .service-option:hover,
.page-contact .service-option:focus-visible,
.page-contact .service-option.is-selected {
  outline:none;transform:translateX(2px);
  border-color:rgba(236,240,250,.26);
  background:radial-gradient(ellipse 110% 120% at 20% 0%,rgba(245,248,255,.14),transparent 67%),linear-gradient(180deg,rgba(246,249,255,.085),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 9px 20px rgba(0,0,0,.15);
}
.page-contact .service-option:focus-visible {outline:2px solid rgba(242,245,255,.65);outline-offset:-2px}
.page-contact .service-option:active {transform:translateX(2px) scale(.988)}
.page-contact .service-option.is-selected::after{content:"✓";margin-left:auto;font:500 14px Arial,sans-serif;color:#f4f5f9}
@media (max-width:900px){
  .page-contact .contact-direct-person {grid-template-columns:minmax(0,1fr) auto}
  .page-contact .contact-direct-address {grid-column:1;grid-row:2}
  .page-contact .contact-direct-arrow {grid-column:2;grid-row:1/span 2}
}
@media (max-width:640px){
  .page-contact .contact-general-email {padding-right:55px}
  .page-contact .contact-social-link {padding:14px 16px}
  .page-contact .service-select-trigger{min-height:54px}
  .page-contact .service-option{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger,.service-option),
  .page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger)::before,
  .page-contact :is(.contact-general-email,.contact-direct-person,.contact-social-link,.service-select-trigger)::after,
  .page-contact :is(.contact-direct-arrow,.contact-social-arrow,.service-select-icon){transition:none!important;animation:none!important}
  .page-contact .service-select-icon{transform:translateY(-50%) rotate(0deg)!important}
  .page-contact .service-select.open .service-select-icon{transform:translateY(-50%) rotate(180deg)!important}
  .page-contact .contact-general-email::after{transform:translateY(-50%)!important}
  .page-contact .service-select-menu{animation:none!important}
  .page-contact .sx-contact-ripple {display:none!important}
}


/* V14 / Liquid-glass discovery cards on the homepage. */
.home-directory-grid{gap:16px}
.directory-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:28px;
  min-height:236px;
  padding:29px 26px 24px;
  border:1px solid rgba(214,218,229,.18);
  background:linear-gradient(180deg, rgba(19,20,26,.82) 0%, rgba(10,10,14,.88) 48%, rgba(8,8,11,.94) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 18px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(255,255,255,.03);
  transition:border-color .34s ease, transform .34s cubic-bezier(.19,1,.22,1), box-shadow .34s ease, background .34s ease;
}
.directory-card::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(115% 90% at 100% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.045) 16%, rgba(255,255,255,0) 42%),
    radial-gradient(90% 85% at 0% 100%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 42%),
    linear-gradient(146deg, rgba(255,255,255,.035), rgba(255,255,255,0) 32%);
  opacity:.95;
}
.directory-card > *{position:relative;z-index:2}
.directory-card>span{color:#b6b8c1;font-size:10px;letter-spacing:2.3px}
.directory-card h3{font:500 24px/1.18 var(--display);letter-spacing:-.85px;margin:32px 0 12px;color:#fbfbfe}
.directory-card p{font-size:12.5px;line-height:1.68;color:#c2c4cc;max-width:255px;margin:0}
.directory-card b{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-end;margin-top:auto;
  width:48px;height:48px;border-radius:50%;
  font:400 30px/1 var(--font);color:#f5f6fb;
  border:1px solid rgba(224,228,238,.32);
  background:linear-gradient(180deg, rgba(36,39,48,.50), rgba(12,13,18,.76));
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
  transform:translateZ(0);
}
.directory-card b::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.36), rgba(255,255,255,.09) 26%, rgba(255,255,255,0) 50%);
}
@media (hover:hover) and (pointer:fine){
  .directory-card:hover,
  .directory-card:focus-visible{
    transform:translateY(-5px);
    border-color:rgba(236,239,247,.34);
    background:linear-gradient(180deg, rgba(21,23,28,.84) 0%, rgba(10,11,15,.90) 48%, rgba(8,8,11,.96) 100%);
    box-shadow:0 24px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.02);
  }
  .directory-card:hover b,
  .directory-card:focus-visible b{
    transform:translate3d(3px,-1px,0) scale(1.03);
    border-color:rgba(236,239,247,.42);
    box-shadow:0 14px 28px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.05), 0 0 18px rgba(255,255,255,.05);
  }
}
/* Override the generic premium-motion arrow shift for discovery cards. */
.sx-premium-enabled .directory-card > b{transition:transform .34s cubic-bezier(.19,1,.22,1), border-color .34s ease, box-shadow .34s ease}
.sx-premium-enabled .directory-card:hover > b,
.sx-premium-enabled .directory-card:focus-visible > b{transform:translate3d(3px,-1px,0) scale(1.03)}

@media(max-width:640px){
  .home-directory-grid{gap:12px}
  .directory-card{min-height:176px;padding:24px 20px 20px;border-radius:24px}
  .directory-card h3{margin:20px 0 10px;font-size:21px}
  .directory-card p{max-width:260px}
  .directory-card b{width:44px;height:44px;font-size:27px}
}


/* V14.1 - Align all three discovery arrow bubbles exactly.
   Position relative to each card, not relative to variable text height;
   identical SVG geometry replaces uneven font arrow glyph metrics. */
.home-directory .directory-card{position:relative;padding-bottom:75px;}
.home-directory .directory-card > b{
  position:absolute;right:24px;bottom:22px;left:auto;top:auto;
  display:grid;place-items:center;box-sizing:border-box;
  width:48px;height:48px;margin:0;padding:0;flex-shrink:0;
  line-height:0;font-size:0;
}
.home-directory .directory-card > b svg{
  display:block;width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  transform:none;flex:none;pointer-events:none;
}
@media(max-width:640px){
  .home-directory .directory-card{padding-bottom:75px;}
  .home-directory .directory-card > b{right:20px;bottom:20px;width:44px;height:44px;}
}
/* Glass hover grows about its own centre instead of shifting the indicator. */
.sx-premium-enabled .home-directory .directory-card:hover > b,
.sx-premium-enabled .home-directory .directory-card:focus-visible > b{transform:scale(1.035);}
@media(prefers-reduced-motion:reduce){
  .home-directory .directory-card > b{transition:none!important;transform:none!important;}
}


/* V15 / A SINGLE travelling liquid-glass highlight shared by desktop links.
   No other element or mobile menu appearance changes. Without JS the prior
   static active/hover styling still works. */
@media (min-width:1181px) {
  .site-header .nav.sx-nav-single-bubble {
    position:relative;
    isolation:isolate;
  }
  .site-header .nav.sx-nav-single-bubble > .sx-nav-indicator {
    position:absolute;
    top:0;left:0;z-index:0;
    width:70px;height:54px;
    border:1px solid rgba(235,239,248,.29);
    border-radius:999px;
    pointer-events:none;
    will-change:transform,width;
    overflow:hidden;
    background:
      radial-gradient(ellipse 100% 110% at var(--sx-bubble-light-x,36%) 5%,rgba(250,251,255,.25) 0%,rgba(240,244,253,.085) 36%,transparent 76%),
      linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 39%,rgba(255,255,255,.075));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      inset 0 -1px 0 rgba(255,255,255,.07),
      0 13px 23px rgba(0,0,0,.24),
      0 0 18px rgba(233,238,249,.065);
    transition:
      transform .48s cubic-bezier(.19,1,.22,1),
      width .46s cubic-bezier(.19,1,.22,1),
      height .46s cubic-bezier(.19,1,.22,1),
      box-shadow .25s ease;
  }
  .site-header .nav.sx-nav-single-bubble > .sx-nav-indicator::before {
    content:"";
    position:absolute;
    left:11%;right:11%;top:0;
    height:1.5px;
    border-radius:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.67),transparent);
  }
  .site-header .nav.sx-nav-single-bubble > .sx-nav-indicator::after {
    content:"";
    position:absolute;
    left:50%;bottom:10px;
    transform:translateX(-50%);
    width:42px;max-width:63%;height:1.5px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
    box-shadow:0 0 6px rgba(255,255,255,.20);
  }
  /* Disable every individual glass outline and underline when shared
     indicator is ready. This guarantees Home + Work never show two bubbles. */
  .site-header .nav.sx-nav-single-bubble > a:not(.button) {
    position:relative;z-index:1;
    isolation:auto;
    overflow:visible;
    text-shadow:none;
  }
  .site-header .nav.sx-nav-single-bubble > a:not(.button)::before,
  .site-header .nav.sx-nav-single-bubble > a:not(.button)::after {
    content:none!important;
    display:none!important;
  }
  .site-header .nav.sx-nav-single-bubble > a[aria-current="page"],
  .site-header .nav.sx-nav-single-bubble > a.nav-current {
    color:rgba(228,230,236,.88);
    text-shadow:none;
  }
  .site-header .nav.sx-nav-single-bubble > a.sx-nav-lit {
    color:#fff;
    text-shadow:0 0 12px rgba(255,255,255,.13);
  }
  .site-header .nav.sx-nav-single-bubble > a:focus-visible {
    outline:2px solid rgba(255,255,255,.67);
    outline-offset:4px;
  }
}
@media (max-width:1180px) {
  .site-header .nav > .sx-nav-indicator {display:none!important}
}
@media (prefers-reduced-motion:reduce) {
  .site-header .nav > .sx-nav-indicator {transition:none!important;will-change:auto!important}
  .site-header .nav.sx-nav-single-bubble > a {transition:none!important}
}


/* SX / Work showcase — approved monochrome editorial three-card artwork.
   All other page components, interactivity and contact functionality unchanged. */
.page-work .sx-showcase-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.7vw,24px);
  align-items:start;
}
.page-work .sx-showcase-card {
  position:relative;min-width:0;isolation:isolate;
}
.page-work .sx-showcase-visual {
  width:100%;height:auto;aspect-ratio:500/413;
  min-height:0;overflow:hidden;
  border-radius:9px;
  background:#0b0c10;
  border:1px solid rgba(235,237,245,.17);
  box-shadow:0 22px 48px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .52s cubic-bezier(.19,1,.22,1),box-shadow .44s ease,border-color .44s ease;
}
.page-work .sx-showcase-visual img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:8px;
  transform:translateZ(0);
}
.page-work .sx-showcase-card .work-category{
  margin:24px 0 14px;
  color:#b5b5c0;
  font-size:10px;line-height:1.2;letter-spacing:2.4px;
}
.page-work .sx-showcase-meta{
  display:grid;grid-template-columns:minmax(0,1fr) 52px;
  align-items:start;column-gap:20px;
  min-height:124px;
}
.page-work .sx-showcase-copy{min-width:0}
.page-work .sx-showcase-copy h3{
  font:500 clamp(20px,1.75vw,25px)/1.24 var(--display);
  letter-spacing:-.5px;margin:0 0 12px;color:#f6f6f8;
}
.page-work .sx-showcase-copy p{
  color:#b5b5bf;font:400 13px/1.7 var(--font);
  margin:0;max-width:340px;
}
.page-work .sx-work-arrow {
  display:grid;place-items:center;
  width:50px;height:50px;margin-top:0;
  color:#f4f4f9;border-radius:50%;
  border:1px solid rgba(223,228,241,.40);
  background:radial-gradient(circle at 28% 14%,rgba(255,255,255,.15),transparent 54%),linear-gradient(170deg,#22242c,#0b0d11 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -2px 8px rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.23);
  pointer-events:none;
  transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .4s,box-shadow .4s;
}
.page-work .sx-work-arrow svg{display:block;transform:translateX(0)}
@media(hover:hover) and (pointer:fine){
  .page-work .sx-showcase-card:hover .sx-showcase-visual{
    transform:translateY(-3px);border-color:rgba(235,239,248,.38);
    box-shadow:0 28px 56px rgba(0,0,0,.37),0 0 26px rgba(230,235,250,.035);
  }
  .page-work .sx-showcase-card:hover .sx-work-arrow{
    transform:translateX(3px);border-color:rgba(245,248,255,.58);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 18px rgba(255,255,255,.07);
  }
}
@media (min-width:641px) and (max-width:1020px){
  .page-work .sx-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:42px}
  .page-work .sx-showcase-meta{min-height:140px}
}
@media (max-width:640px){
  .page-work .sx-showcase-grid{grid-template-columns:minmax(0,1fr);gap:39px}
  .page-work .sx-showcase-visual{height:auto;aspect-ratio:500/413;min-height:0}
  .page-work .sx-showcase-card .work-category{margin:17px 0 12px;font-size:9px}
  .page-work .sx-showcase-meta{grid-template-columns:minmax(0,1fr) 46px;gap:12px;min-height:0}
  .page-work .sx-showcase-copy h3{font-size:22px;margin:0 0 10px}
  .page-work .sx-showcase-copy p{font-size:13px;line-height:1.65;max-width:280px}
  .page-work .sx-work-arrow{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .page-work .sx-showcase-visual,.page-work .sx-work-arrow{transition:none!important;transform:none!important}
}


/* V16 / Work gallery precision alignment.
   Keep original artworks and site content intact. Equal-width grid tracks,
   equal image aspect ratios, and one shared caption/bubble baseline. */
.page-work .sx-showcase-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  row-gap:44px;
  align-items:stretch;
}
.page-work .sx-showcase-grid > .sx-showcase-card {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  align-content:start;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
.page-work .sx-showcase-card > .sx-showcase-visual {
  display:block;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  aspect-ratio:500 / 413;
  border-radius:9px;
  overflow:hidden;
}
.page-work .sx-showcase-visual > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.page-work .sx-showcase-card > .work-category {
  display:block;
  margin:20px 0 12px;
  padding:0;
  line-height:1.4;
  min-height:14px;
}
.page-work .sx-showcase-card > .sx-showcase-meta {
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px;
  column-gap:18px;
  align-items:start;
  width:100%;
  min-width:0;
  min-height:125px;
  margin:0;
  padding:0;
}
.page-work .sx-showcase-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.page-work .sx-showcase-copy > h3 {
  margin:0 0 11px;
  padding:0;
  line-height:1.24;
}
.page-work .sx-showcase-copy > p {
  margin:0;
  padding:0;
  max-width:100%;
}
.page-work .sx-work-arrow {
  display:grid;
  place-items:center;
  justify-self:end;
  align-self:start;
  margin:0;
  width:50px;
  height:50px;
}
@media (min-width:641px) and (max-width:1020px) {
  .page-work .sx-showcase-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:22px;
    row-gap:42px;
  }
  .page-work .sx-showcase-card > .sx-showcase-meta { min-height:132px; }
}
@media (max-width:640px) {
  .page-work .sx-showcase-grid {
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:36px;
  }
  .page-work .sx-showcase-card > .work-category { margin:17px 0 11px; }
  .page-work .sx-showcase-card > .sx-showcase-meta {
    grid-template-columns:minmax(0,1fr) 44px;
    column-gap:15px;
    min-height:100px;
  }
  .page-work .sx-work-arrow { width:44px; height:44px; }
}
/* Keep card edges aligned even while hovering an individual project. */
@media (hover:hover) and (pointer:fine) {
  .page-work .sx-showcase-card:hover .sx-showcase-visual,
  .page-work .sx-showcase-card:focus-within .sx-showcase-visual {
    transform:none;
  }
}


/* V17 / SX Work gallery — optical and geometric precision pass.
   The prior build aligned *box coordinates*, but source artwork contained
   unequal baked-in matte frames. Source visuals are now normalized so every
   card has one uniform external glass frame and one consistent inner inset. */
.page-work .sx-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.15vw,32px);
  align-items:stretch;
}
.page-work .sx-showcase-grid>.sx-showcase-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  align-content:start;
  min-width:0;
  padding:0;margin:0;
  position:relative;
}
.page-work .sx-showcase-card>.sx-showcase-visual{
  box-sizing:border-box;
  position:relative;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  padding:10px;
  margin:0;
  overflow:hidden;
  aspect-ratio:500/413;
  border-radius:17px;
  background:linear-gradient(148deg,#202127,#08090e 51%,#111217);
  border:1px solid rgba(219,224,237,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.25);
  transition:box-shadow .32s ease,border-color .32s ease;
  transform:none!important;
}
.page-work .sx-showcase-visual>img{
  display:block;
  width:100%;height:100%;
  min-width:0;min-height:0;
  border-radius:10px;
  object-fit:cover;
  object-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.13);
  transform:none;
}
.page-work .sx-showcase-card>.work-category{
  box-sizing:border-box;
  display:block;
  width:100%;min-height:16px;
  padding:0 11px;
  margin:22px 0 12px;
  color:#b6b8c1;
  font-size:9px;
  letter-spacing:2.2px;
  line-height:16px;
}
.page-work .sx-showcase-card>.sx-showcase-meta{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  align-items:start;
  gap:16px;
  min-width:0;
  width:100%;
  min-height:115px;
  margin:0;
  padding:0 11px;
}
.page-work .sx-showcase-copy{min-width:0;max-width:100%;display:flex;flex-direction:column}
.page-work .sx-showcase-copy>h3{
  font:500 clamp(19px,1.5vw,23px)/1.24 var(--display);
  letter-spacing:-.42px;
  margin:0 0 10px;padding:0;
  color:#f5f5f8;
}
.page-work .sx-showcase-copy>p{
  margin:0;padding:0;
  font:400 12.5px/1.7 var(--font);
  color:#b6b8c2;
  width:100%;max-width:100%;
  overflow-wrap:break-word;
}
.page-work .sx-work-arrow{
  display:grid;place-items:center;
  width:48px;height:48px;
  margin:0;
  padding:0;
  justify-self:end;
  align-self:start;
  transform:none;
}
@media(hover:hover) and (pointer:fine){
  .page-work .sx-showcase-card:hover>.sx-showcase-visual,
  .page-work .sx-showcase-card:focus-within>.sx-showcase-visual{
    transform:none!important;
    border-color:rgba(235,239,249,.54);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 21px 44px rgba(0,0,0,.29);
  }
  .page-work .sx-showcase-card:hover .sx-work-arrow{
    transform:translateX(2px);
  }
}
@media(min-width:641px) and (max-width:1020px){
  .page-work .sx-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:38px;column-gap:24px}
  .page-work .sx-showcase-card>.sx-showcase-meta{min-height:123px}
}
@media(max-width:640px){
  .page-work .sx-showcase-grid{grid-template-columns:minmax(0,1fr);row-gap:35px;column-gap:0}
  .page-work .sx-showcase-card>.sx-showcase-visual{padding:8px;border-radius:14px}
  .page-work .sx-showcase-visual>img{border-radius:8px}
  .page-work .sx-showcase-card>.work-category{margin:17px 0 10px;padding:0 8px}
  .page-work .sx-showcase-card>.sx-showcase-meta{grid-template-columns:minmax(0,1fr) 44px;gap:12px;min-height:0;padding:0 8px}
  .page-work .sx-showcase-copy>h3{font-size:21px}
  .page-work .sx-showcase-copy>p{font-size:13px}
  .page-work .sx-work-arrow{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .page-work .sx-showcase-card>.sx-showcase-visual,.page-work .sx-work-arrow{transition:none!important;transform:none!important}
}

/* The existing off-canvas drawer is translated beyond the mobile viewport;
   clip only the Work page's horizontal paint overflow while retaining the
   drawer's ability to slide in when opened. */
@media(max-width:1180px){
  body.page-work{overflow-x:clip}
}
@media (min-width:641px) and (max-width:1180px){
  html:has(body.page-work){overflow-x:clip}
}


/* V18 — SX Agency discovery showcase, reproduced as genuine interactive
   web cards from the approved artwork. Only this homepage section changes. */
.page-home .home-directory-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(15px,1.5vw,22px);
  align-items:stretch;
}
.page-home .home-directory .directory-card {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:clamp(350px,30vw,415px);
  min-height:0;
  margin:0;
  padding:29px 27px 78px;
  box-sizing:border-box;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(95% 75% at 92% 1%,rgba(166,169,178,.17),transparent 57%),
    linear-gradient(157deg,#16171a 0%,#0c0d10 37%,#060709 100%);
  border:1px solid rgba(224,227,234,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.04), 0 17px 35px rgba(0,0,0,.23);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  transform:none;
  transition:border-color .3s ease,box-shadow .34s ease,transform .34s cubic-bezier(.19,1,.22,1);
}
.page-home .home-directory .directory-card::before {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 90% 70% at var(--sx-light-x,86%) var(--sx-light-y,3%),rgba(239,242,250,.12),transparent 64%),
    linear-gradient(175deg,rgba(255,255,255,.08),transparent 17%,transparent 82%,rgba(255,255,255,.025));
  opacity:.68;
  transition:opacity .36s ease;
}
.page-home .home-directory .directory-card > span:first-child,
.page-home .home-directory .directory-card > h3,
.page-home .home-directory .directory-card > p {
  position:relative;
  z-index:3;
}
.page-home .home-directory .directory-card > span:first-child {
  display:block;
  flex:0 0 auto;
  font-size:10px;
  line-height:1.5;
  letter-spacing:2.5px;
  color:#c0c1c9;
}
.page-home .home-directory .directory-card > h3 {
  font:500 clamp(21px,1.78vw,27px)/1.18 var(--display);
  letter-spacing:-.85px;
  color:#f8f8fb;
  margin:29px 0 12px;
}
.page-home .home-directory .directory-card > p {
  max-width:295px;
  font:400 12.5px/1.65 var(--font);
  color:#bdbfc7;
  margin:0;
}
.page-home .home-directory .directory-card > .sx-discovery-art {
  position:absolute;
  z-index:2;
  left:0;
  bottom:10px;
  width:100%;
  height:59%;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center bottom;
  opacity:.94;
  transform:translate3d(0,0,0);
  filter:saturate(.73);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 21%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 21%,#000 92%,transparent 100%);
  transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .5s ease,filter .5s ease;
}
.page-home .home-directory .directory-card > .sx-art-network {background-image:url('images/sx-discover-network.webp')}
.page-home .home-directory .directory-card > .sx-art-interfaces {background-image:url('images/sx-discover-crm-2026.webp')}
.page-home .home-directory .directory-card > .sx-art-sx {background-image:url('images/sx-discover-sx.webp');height:54%;bottom:15px}
.page-home .home-directory .directory-card > b {
  position:absolute;
  z-index:4;
  right:22px;
  bottom:21px;
  top:auto;left:auto;
  display:grid;place-items:center;
  width:47px;height:47px;
  margin:0;
  padding:0;
  border:1px solid rgba(230,233,240,.46);
  border-radius:50%;
  background:radial-gradient(circle at 30% 15%,rgba(255,255,255,.19),transparent 52%),linear-gradient(155deg,rgba(31,33,39,.83),rgba(7,8,11,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.33);
  transform:none;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.19,1,.22,1);
}
.page-home .home-directory .directory-card > b svg {width:19px;height:19px;display:block;transform:none;}
@media(hover:hover) and (pointer:fine){
  .page-home .home-directory .directory-card:hover,
  .page-home .home-directory .directory-card:focus-visible {
    transform:translateY(-3px);
    border-color:rgba(248,250,255,.56);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 22px 48px rgba(0,0,0,.3),0 0 22px rgba(255,255,255,.03);
  }
  .page-home .home-directory .directory-card:hover::before,
  .page-home .home-directory .directory-card:focus-visible::before {opacity:1}
  .page-home .home-directory .directory-card:hover > .sx-discovery-art,
  .page-home .home-directory .directory-card:focus-visible > .sx-discovery-art {
    transform:translate3d(0,-3px,0) scale(1.013);
    opacity:1;
    filter:saturate(.88) brightness(1.085);
  }
  .sx-premium-enabled .page-home .home-directory .directory-card:hover > b,
  .sx-premium-enabled .page-home .home-directory .directory-card:focus-visible > b {
    transform:scale(1.045);
    border-color:rgba(255,255,255,.7);
  }
}
@media(min-width:641px) and (max-width:1020px){
  .page-home .home-directory-grid {gap:14px}
  .page-home .home-directory .directory-card {height:345px;padding:24px 20px 70px;border-radius:20px}
  .page-home .home-directory .directory-card > h3 {font-size:21px;margin:23px 0 9px}
  .page-home .home-directory .directory-card > p{font-size:11.5px}
  .page-home .home-directory .directory-card > .sx-discovery-art{height:57%}
  .page-home .home-directory .directory-card > b{width:42px;height:42px;right:17px;bottom:17px}
}
@media(max-width:640px){
  .page-home .home-directory-grid{grid-template-columns:minmax(0,1fr);gap:15px}
  .page-home .home-directory .directory-card{height:340px;padding:24px 23px 73px;border-radius:20px}
  .page-home .home-directory .directory-card > h3{font-size:23px;margin:26px 0 10px}
  .page-home .home-directory .directory-card > p{font-size:12.5px;max-width:270px}
  .page-home .home-directory .directory-card > .sx-discovery-art{height:62%;bottom:10px}
  .page-home .home-directory .directory-card > .sx-art-sx{height:57%}
  .page-home .home-directory .directory-card > b{width:45px;height:45px;right:19px;bottom:19px}
}
@media(max-width:360px){
  .page-home .home-directory .directory-card{height:316px;padding:20px 19px 67px}
  .page-home .home-directory .directory-card > h3{font-size:21px;margin:23px 0 10px}
  .page-home .home-directory .directory-card > p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .page-home .home-directory .directory-card,
  .page-home .home-directory .directory-card > .sx-discovery-art,
  .page-home .home-directory .directory-card > b {transition:none!important;transform:none!important}
}

/* Keep the existing off-canvas mobile/tablet drawer from creating a phantom
   horizontal scroll area while closed; it still opens inside the viewport. */
@media(max-width:1180px){
  html,body{overflow-x:clip}
}


/* SX Agency V16: remove platform-dependent emoji arrows on contact cards.
   All contact arrows are vector line icons that remain monochrome on iOS. */
.page-contact .contact-general-email::after{content:none!important;display:none!important;}
.page-contact .contact-general-email > .contact-general-arrow,
.page-contact .contact-direct-arrow,
.page-contact .contact-social-arrow {
  width:31px;height:31px;min-width:31px;min-height:31px;
  border-radius:50%;
  display:grid;place-items:center;
  color:#f2f4f9;
  border:1px solid rgba(230,235,246,.34);
  background:radial-gradient(circle at 24% 12%,rgba(255,255,255,.18),transparent 53%),
    linear-gradient(166deg,rgba(51,53,63,.61),rgba(7,8,12,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -2px 8px rgba(0,0,0,.3);
  font-size:0;line-height:0;letter-spacing:0;
  flex-shrink:0;
}
.page-contact .contact-general-email > .contact-general-arrow {
  position:absolute;right:15px;top:50%;z-index:2;
  transform:translateY(-50%);
  transition:transform .32s cubic-bezier(.18,.8,.2,1),border-color .3s,box-shadow .3s;
}
.page-contact :is(.contact-general-arrow,.contact-direct-arrow,.contact-social-arrow) svg {
  display:block;width:17px;height:17px;
  overflow:visible;stroke:currentColor;fill:none;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .page-contact .contact-general-email:hover > .contact-general-arrow,
  .page-contact .contact-general-email:focus-visible > .contact-general-arrow {
    transform:translateY(-50%) scale(1.085);
    border-color:rgba(246,248,255,.57);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(255,255,255,.06);
  }
}
.page-contact .contact-general-email.sx-contact-pressed > .contact-general-arrow {
  transform:translateY(-50%) scale(.90);
}
@media (prefers-reduced-motion:reduce){
  .page-contact .contact-general-email > .contact-general-arrow{transition:none!important;}
}
/* SX AGENCY / Custom CRM integration — additive, namespaced styles.
   Original branding, hero, nav, discovery, animations and form stay unchanged. */
.sx-crm-section{margin-top:0}
.sx-crm-section-heading{margin-bottom:38px}
.sx-crm-home{padding-block:90px 106px;border-bottom:1px solid var(--line)}
.sx-crm-home-title-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:45px;margin-top:23px}
.sx-crm-home-title-row h2,.sx-crm-intro-section h2,.sx-crm-block-heading h2,.sx-crm-internal-copy h2,.sx-crm-final-cta h2{font:500 clamp(36px,3.7vw,56px)/1.13 var(--display);letter-spacing:-2.5px;margin:0;color:#f5f5f7}
.sx-crm-home-title-row h2 span,.sx-crm-intro-section h2 span,.sx-crm-block-heading h2 span,.sx-crm-internal-copy h2 span,.sx-crm-final-cta h2 span{color:#9c9da7}
.sx-crm-home-title-row>p,.sx-crm-intro-section>p{justify-self:end;max-width:405px;color:#b7b8c2;font-size:13px;line-height:1.85;margin:0 0 4px}
.sx-crm-home-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:30px;min-height:480px;padding:52px 35px 49px 56px;border:1px solid rgba(218,224,239,.17);border-radius:28px;background:radial-gradient(ellipse 82% 90% at 102% 18%,rgba(108,115,131,.16),transparent 65%),linear-gradient(145deg,#131418 0%,#08090d 65%,#0b0c11 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.105),0 22px 55px #0005}
.sx-crm-home-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 48% 5% at 94% 0%,rgba(255,255,255,.17),transparent),linear-gradient(125deg,rgba(255,255,255,.024),transparent 42%)}
.sx-crm-home-content{position:relative;z-index:2;min-width:0}
.sx-crm-eyebrow{font-size:10px;letter-spacing:2.4px;color:#aaaeb9;font-weight:600;margin:0 0 32px}
.sx-crm-home-content h3{font:500 clamp(35px,3.1vw,49px)/1.13 var(--display);letter-spacing:-2px;margin:0 0 19px;color:#f7f7f9}
.sx-crm-home-content h3 span{color:#a2a3ac}
.sx-crm-home-content>p:not(.sx-crm-eyebrow){font-size:13px;line-height:1.85;color:#bdbfc9;max-width:410px;margin:0 0 25px}
.sx-crm-home-bullets{display:flex;flex-wrap:wrap;gap:8px;max-width:440px;margin-bottom:26px}
.sx-crm-home-bullets span{font-size:10px;color:#d6d7df;padding:9px 11px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);border-radius:50px}
.sx-crm-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sx-crm-actions .sx-glass-cta{min-width:0;white-space:nowrap}
.sx-crm-home-content>small{display:block;color:#81838d;font-size:10px;line-height:1.6;margin-top:22px}
.sx-crm-home-visual{position:relative;min-width:0;z-index:1;perspective:1200px}
.sx-crm-home-visual::after,.sx-crm-page-hero-visual::after{content:"";position:absolute;z-index:-1;inset:15% 4% 5%;border-radius:50%;background:rgba(154,160,191,.10);filter:blur(55px);pointer-events:none}
/* Reusable CRM UI mock: original CSS dashboard, deliberately sample data only. */
.sx-crm-dashboard{--crm-line:rgba(205,213,232,.13);position:relative;width:100%;min-width:0;max-width:730px;margin:auto;color:#e7e9ef;border-radius:15px;overflow:hidden;border:1px solid rgba(222,227,240,.30);background:linear-gradient(150deg,#181b22,#0b0e14 64%);box-shadow:0 34px 70px #000b,0 0 0 5px #ffffff08,inset 0 1px 0 #ffffff1d;transform:translateZ(0);font-family:var(--font)}
.sx-crm-dashbar{height:48px;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--crm-line);background:linear-gradient(180deg,#242731,#13161c)}
.sx-crm-dashmark{font:800 21px/1 var(--display);letter-spacing:-2.6px;flex-shrink:0;color:#f3f4f8}
.sx-crm-mark-muted{font:500 9px/1 var(--font);letter-spacing:1.2px;color:#a2a5b0;margin-left:3px}
.sx-crm-dash-search{display:flex;align-items:center;padding:0 12px;max-width:260px;width:65%;height:26px;border:1px solid #ffffff17;border-radius:6px;background:#ffffff08;color:#7c8291;font-size:10px;margin-left:auto}
.sx-crm-dash-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:100%;border:1px solid #ffffff40;font-size:8px;font-weight:600;background:#262a34}
.sx-crm-dashbody{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:319px}
.sx-crm-sidebar{display:flex;flex-direction:column;gap:7px;padding:19px 9px;border-right:1px solid var(--crm-line);background:rgba(8,9,14,.72)}
.sx-crm-sidebar>div{display:flex;gap:7px;align-items:center;white-space:nowrap;color:#8e919e;font-size:10px;padding:10px 8px;border-radius:5px}
.sx-crm-sidebar>div.is-current{color:#f3f3f7;background:rgba(208,212,228,.09)}
.sx-crm-sidebar-foot{margin-top:auto;text-align:center;font-size:7px;letter-spacing:1px;color:#606471}
.sx-crm-dashmain{padding:21px 21px 22px;min-width:0}
.sx-crm-dashhead{display:flex;align-items:start;justify-content:space-between;gap:12px}
.sx-crm-dash-kicker{display:block;font-size:8px;letter-spacing:1.5px;color:#888d9e;margin-bottom:5px}
.sx-crm-dashhead strong{font:600 21px/1.2 var(--display);letter-spacing:-.8px;color:#f6f6f9}
.sx-crm-dashhead p{font-size:10px;color:#8f95a2;margin:6px 0 0;line-height:1.55}
.sx-crm-dash-live{font-size:8px;letter-spacing:.8px;border:1px solid #ffffff24;color:#b9bdc7;padding:6px;border-radius:20px;white-space:nowrap}
.sx-crm-statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:21px}
.sx-crm-statrow>div{min-width:0;border-radius:8px;border:1px solid #ffffff1d;background:linear-gradient(150deg,#252933,#161a22);padding:12px 12px 11px;box-shadow:inset 0 1px 0 #ffffff0f}
.sx-crm-statrow span,.sx-crm-statrow small{display:block;color:#9ca2b0;font-size:9px;white-space:nowrap}
.sx-crm-statrow strong{display:block;font:600 24px/1.1 var(--display);color:#f5f6f9;margin:10px 0 5px}
.sx-crm-statrow small{font-size:8px;color:#858a99}
.sx-crm-panel{margin-top:15px;border-radius:9px;border:1px solid #ffffff1a;background:#0d1017;overflow:hidden}
.sx-crm-paneltop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #ffffff14}
.sx-crm-paneltop span{font-size:9px;font-weight:600;letter-spacing:1.4px;color:#cad0dc}
.sx-crm-paneltop small{color:#868b99;font-size:8px}
.sx-crm-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:9px}
.sx-crm-lane{min-width:0}
.sx-crm-lane>span{display:flex;justify-content:space-between;gap:5px;color:#8f95a6;font-size:8px;letter-spacing:.6px;margin:2px 0 8px}
.sx-crm-lane i{font-style:normal;color:#e5e5ed}
.sx-crm-lead{border:1px solid #ffffff1b;border-radius:5px;background:#1a1e27;padding:10px 8px;margin-bottom:6px;color:#d1d4df;font-size:9px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-crm-lead small{display:block;margin-top:6px;color:#818897;font-size:8px}
/* Services: four core pillars as a balanced 2×2 system, retained original card text. */
.page-services .services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0}
.page-services .services-grid>.service-card{min-height:260px;min-width:0;padding:32px;border:1px solid rgba(229,234,248,.16);border-radius:19px;background:linear-gradient(145deg,#18191e,#090a0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.065);transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.page-services .services-grid>.service-card:hover{border-color:rgba(245,247,252,.35);background:linear-gradient(145deg,#1f2128,#090a0d);transform:translateY(-2px);box-shadow:0 15px 35px #0004,inset 0 1px 0 #ffffff14}
.page-services .services-grid>.service-card .service-symbol{margin-top:24px}
.page-services .services-grid>.service-card h3{margin:16px 0 11px}
.page-services .services-grid>.service-card p{max-width:490px}
.page-services .services-grid>.sx-crm-service-card{border-color:rgba(211,218,240,.28);background:radial-gradient(circle at 95% 0%,#ffffff0d,transparent 45%),linear-gradient(140deg,#1a1c23,#0a0b0f)}
/* Work: CRM is a separate featured internal project, existing 3 works intact. */
.sx-crm-work-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;margin:4px 0 43px;padding:32px 32px 32px 43px;border:1px solid rgba(229,235,248,.2);border-radius:21px;background:radial-gradient(ellipse 85% 100% at 100% 0%,rgba(88,94,110,.12),transparent 70%),linear-gradient(145deg,#14161a,#08090c);box-shadow:inset 0 1px 0 #ffffff12;overflow:hidden}
.sx-crm-work-copy{min-width:0}
.sx-crm-work-copy .eyebrow{font-size:9px;letter-spacing:1.8px;color:#bfc0cb}
.sx-crm-work-copy h3{font:500 clamp(26px,3vw,41px)/1.14 var(--display);letter-spacing:-1.5px;margin:25px 0 17px}
.sx-crm-work-tag{display:inline-block;vertical-align:middle;font:500 9px var(--font);letter-spacing:1px;color:#c1c3cf;border:1px solid #ffffff2b;border-radius:30px;padding:8px 10px;margin-left:13px;white-space:nowrap}
.sx-crm-work-copy>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#b6b7c2;max-width:385px}
.sx-crm-work-copy .sx-crm-work-qualifier{font-size:10px!important;color:#8b8d99!important;margin-top:20px}
.sx-crm-inline-link{display:inline-flex;align-items:center;gap:14px;color:#f5f5f7;font-size:12px;margin-top:18px;border-bottom:1px solid #ffffff42;padding-bottom:8px}
.sx-crm-inline-link .sx-cta-arrow{width:27px;height:27px;min-width:27px;display:grid;place-items:center;border:1px solid #ffffff3c;border-radius:50%;background:#ffffff0b}
.sx-crm-work-screen{min-width:0;max-width:640px;width:100%;justify-self:end}
.sx-crm-dashboard-mini{max-width:100%;box-shadow:0 25px 55px #0009;}
.sx-crm-dashboard-mini .sx-crm-dashbody{min-height:0}
.sx-crm-dashboard-mini .sx-crm-sidebar{padding-top:10px}
.sx-crm-dashboard-mini .sx-crm-dashmain{padding:14px}
.sx-crm-dashboard-mini .sx-crm-panel{margin-top:10px}
.sx-crm-dashboard-mini .sx-crm-statrow{margin-top:11px}
.sx-crm-dashboard-mini .sx-crm-statrow>div{padding:8px}
.sx-crm-dashboard-mini .sx-crm-statrow strong{font-size:19px}
.sx-crm-dashboard-mini .sx-crm-lane .sx-crm-lead{padding:7px}
/* CRM page: same typography, obisidian and liquid-glass motif, no synthetic testimonials. */
.sx-crm-page-main{overflow:clip}
.sx-crm-page-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 65% 70% at 92% 5%,rgba(67,73,89,.17),transparent 77%),#08080a;border-bottom:1px solid var(--line)}
.sx-crm-page-hero-inner{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);gap:36px;align-items:center;min-height:640px;padding-block:90px}
.sx-crm-page-copy{position:relative;z-index:2;min-width:0}
.sx-crm-page-copy>.eyebrow{margin-top:52px;color:#b9bbc4}
.sx-crm-page-copy h1{font:500 clamp(48px,4.7vw,74px)/1.08 var(--display);letter-spacing:-3.6px;margin:23px 0 24px;color:#f8f8fa}
.sx-crm-page-copy h1 span{color:#9ea0aa}
.sx-crm-page-copy>p:not(.eyebrow){max-width:490px;font-size:14px;line-height:1.9;color:#b4b6c1;margin:0 0 31px}
.sx-crm-hero-note{display:block;font-size:10px;color:#858793;margin-top:25px}
.sx-crm-page-hero-visual{position:relative;min-width:0;z-index:1}
.sx-crm-page-hero-visual .sx-crm-dashboard{transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);transform-origin:center;box-shadow:0 30px 90px #000b,0 0 0 5px #ffffff08}
.sx-crm-visual-caption{text-align:center;color:#777b87;font-size:9px;letter-spacing:1px;margin-top:23px}
.sx-crm-visual-caption span{padding-inline:6px}
.sx-crm-intro-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);align-items:end;gap:50px;padding-block:92px 100px;border-bottom:1px solid var(--line)}
.sx-crm-intro-section h2{margin-top:23px}
.sx-crm-block-heading{margin-bottom:36px}
.sx-crm-block-heading h2{margin-top:20px}
.sx-crm-capabilities{padding-block:95px 108px;border-bottom:1px solid var(--line)}
.sx-crm-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.sx-crm-feature{min-width:0;min-height:226px;padding:28px;border:1px solid #ffffff25;border-radius:18px;background:radial-gradient(ellipse 90% 90% at 100% 0%,#ffffff0c,transparent),linear-gradient(150deg,#15161b,#090a0d);box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color .3s,transform .3s,box-shadow .3s}
.sx-crm-feature:hover{border-color:#ffffff63;transform:translateY(-3px);box-shadow:0 12px 32px #0004}
.sx-crm-feature-top{display:flex;justify-content:space-between;align-items:start;color:#9e9faa;font-size:9px;letter-spacing:1.8px}
.sx-crm-feature-top svg{width:31px;height:31px;color:#d8d9e2}
.sx-crm-feature h3{font:500 22px var(--display);letter-spacing:-.65px;margin:35px 0 12px}
.sx-crm-feature p{font-size:12px;line-height:1.75;color:#aeb0ba;max-width:320px;margin:0}
.sx-crm-process{padding-block:92px 100px;border-bottom:1px solid var(--line)}
.sx-crm-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #ffffff26}
.sx-crm-process-grid>article{padding:26px 23px 4px 0;margin-right:25px;border-right:1px solid #ffffff20}
.sx-crm-process-grid>article:last-child{border-right:0;margin-right:0}
.sx-crm-process-grid span{font-size:9px;letter-spacing:1.5px;color:#9497a3}
.sx-crm-process-grid h3{font:500 17px var(--display);letter-spacing:-.5px;margin:21px 0 12px}
.sx-crm-process-grid p{font-size:12px;line-height:1.8;color:#aeb0bc}
.sx-crm-internal-section{display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:60px;padding-block:95px 108px;border-bottom:1px solid var(--line)}
.sx-crm-internal-copy h2{margin-top:22px}
.sx-crm-internal-copy>p:not(.eyebrow){font-size:13px;color:#b1b3be;line-height:1.9;max-width:500px;margin:22px 0 7px}
.sx-crm-internal-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-height:330px;border:1px solid #ffffff26;border-radius:20px;background:radial-gradient(circle at 50% 40%,#30313a,#111116 45%,#08080a 80%);isolation:isolate}
.sx-crm-art-ring{position:absolute;inset:12% 25%;border-radius:50%;transform:rotate(-25deg) scaleX(1.35);border:1px solid #ffffff4f;box-shadow:0 0 40px #ffffff11,inset 0 0 25px #ffffff11}
.sx-crm-art-mark{position:relative;color:#dddfe5;font:800 clamp(78px,8vw,145px) var(--display);font-style:italic;letter-spacing:-.19em;padding-right:.2em;filter:drop-shadow(0 2px 18px #ffffff55)}
.sx-crm-internal-art>p{position:absolute;bottom:30px;color:#a5a6b1;letter-spacing:3px;font-size:9px}
.sx-crm-final-cta{text-align:center;padding-block:100px 120px}
.sx-crm-final-cta h2{margin-top:22px}
.sx-crm-final-cta>p:not(.eyebrow){color:#adb0bd;font-size:13px;line-height:1.8;max-width:500px;margin:22px auto 26px}
/* Responsive layouts, no changes to existing mobile navigation. */
@media(max-width:1180px){
.sx-crm-home-stage{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);padding:40px 26px;gap:22px}
.sx-crm-home-content h3{font-size:37px}
.sx-crm-home-content .sx-crm-actions{gap:8px}
.sx-crm-home-content .sx-crm-actions a{font-size:11px}
.sx-crm-dashbody{grid-template-columns:84px minmax(0,1fr)}
.sx-crm-sidebar>div{font-size:9px;padding:8px 2px}
.sx-crm-dashmain{padding:15px}
.sx-crm-page-hero-inner{gap:20px}
.sx-crm-page-copy h1{font-size:clamp(44px,4.9vw,64px)}
}
@media(max-width:900px){
.sx-crm-home-title-row,.sx-crm-intro-section{grid-template-columns:1fr;gap:20px}
.sx-crm-home-title-row>p,.sx-crm-intro-section>p{justify-self:start}
.sx-crm-home-stage,.sx-crm-page-hero-inner,.sx-crm-work-feature{grid-template-columns:1fr}
.sx-crm-home-stage{padding:36px;gap:37px}
.sx-crm-home-content h3{font-size:44px}
.sx-crm-home-visual{width:100%;max-width:640px;margin:auto}
.sx-crm-page-hero-inner{padding-block:75px 85px;gap:55px}
.sx-crm-page-copy>.eyebrow{margin-top:42px}
.sx-crm-page-hero-visual{width:100%;max-width:680px;margin:auto}
.sx-crm-work-feature{gap:32px}
.sx-crm-work-screen{justify-self:center;max-width:680px}
.sx-crm-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-crm-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.sx-crm-process-grid>article:nth-child(2){border-right:none}
.sx-crm-internal-section{gap:28px}
}
@media(max-width:640px){
.sx-crm-home{padding-block:63px 70px}
.sx-crm-home-title-row h2,.sx-crm-intro-section h2,.sx-crm-block-heading h2,.sx-crm-internal-copy h2,.sx-crm-final-cta h2{font-size:clamp(32px,9vw,42px);letter-spacing:-1.7px}
.sx-crm-home-stage{padding:28px 17px 25px;gap:29px;border-radius:20px}
.sx-crm-home-content h3{font-size:35px;letter-spacing:-1.6px}
.sx-crm-home-content>p:not(.sx-crm-eyebrow){font-size:12px}
.sx-crm-eyebrow{margin-bottom:19px}
.sx-crm-home-content>small{font-size:9px}
.sx-crm-actions{gap:9px}
.sx-crm-actions .sx-glass-cta{width:100%;justify-content:space-between;font-size:12px}
.sx-crm-dashboard{border-radius:11px}
.sx-crm-dashbar{height:35px;padding:0 10px;gap:8px}
.sx-crm-dashmark{font-size:17px}
.sx-crm-dash-search{font-size:7px;height:22px;max-width:140px}
.sx-crm-dash-avatar{width:21px;height:21px;font-size:7px}
.sx-crm-dashbody{grid-template-columns:42px minmax(0,1fr);min-height:0}
.sx-crm-sidebar{padding:10px 4px;gap:4px;align-items:center}
.sx-crm-sidebar>div{font-size:12px;padding:6px;width:29px;height:29px;justify-content:center}
.sx-crm-sidebar>div span,.sx-crm-sidebar-foot{display:none}
.sx-crm-dashmain{padding:11px}
.sx-crm-dashhead strong{font-size:16px}
.sx-crm-dashhead p{font-size:8px}
.sx-crm-dash-kicker{font-size:7px}
.sx-crm-dash-live{font-size:6px;padding:5px 4px}
.sx-crm-statrow{gap:5px;margin-top:10px}
.sx-crm-statrow>div{padding:7px 6px}
.sx-crm-statrow span{font-size:7px}
.sx-crm-statrow strong{font-size:17px;margin:5px 0 3px}
.sx-crm-statrow small{font-size:6px}
.sx-crm-panel{margin-top:9px}
.sx-crm-paneltop{padding:8px}
.sx-crm-paneltop span{font-size:7px}
.sx-crm-paneltop small{font-size:7px}
.sx-crm-kanban{gap:4px;padding:5px}
.sx-crm-lane>span{font-size:6px;letter-spacing:0;gap:2px}
.sx-crm-lead{font-size:7px;padding:5px 3px}
.sx-crm-lead small{font-size:6px;white-space:normal}
.sx-crm-page-hero-inner{padding-block:48px 67px;gap:42px}
.sx-crm-page-copy>.eyebrow{margin-top:32px}
.sx-crm-page-copy h1{font-size:clamp(42px,11.5vw,58px);letter-spacing:-2.3px}
.sx-crm-page-copy>p:not(.eyebrow){font-size:13px}
.sx-crm-page-hero-visual .sx-crm-dashboard{transform:none}
.sx-crm-visual-caption{font-size:7px}
.sx-crm-intro-section{padding-block:70px 75px}
.sx-crm-capabilities{padding-block:75px 80px}
.sx-crm-feature-grid{grid-template-columns:1fr;gap:11px}
.sx-crm-feature{min-height:185px;padding:23px}
.sx-crm-feature h3{margin:24px 0 10px}
.page-services .services-grid{grid-template-columns:1fr;gap:12px}
.page-services .services-grid>.service-card{min-height:0;padding:25px}
.sx-crm-work-feature{padding:26px 17px 25px;gap:29px}
.sx-crm-work-copy h3{font-size:29px}
.sx-crm-work-tag{font-size:8px;padding:6px 8px}
.sx-crm-process{padding-block:75px}
.sx-crm-process-grid{grid-template-columns:1fr;gap:0}
.sx-crm-process-grid>article{border-right:0;border-bottom:1px solid #ffffff1b;margin-right:0;padding:22px 0 14px}
.sx-crm-process-grid>article:last-child{border-bottom:0}
.sx-crm-internal-section{grid-template-columns:1fr;padding-block:75px;gap:35px}
.sx-crm-internal-art{min-height:260px}
.sx-crm-final-cta{padding-block:82px 90px}
}
@media(max-width:355px){.sx-crm-home-stage{padding-inline:13px}.sx-crm-dash-search{max-width:96px}.sx-crm-dashmain{padding:8px}.sx-crm-lead{font-size:6px}.sx-crm-lane>span{font-size:5px}.sx-crm-dash-live{font-size:5px}}
@media(prefers-reduced-motion:reduce){.sx-crm-feature,.page-services .services-grid>.service-card{transition:none!important;transform:none!important}}
@media(hover:hover) and (pointer:fine){
.sx-crm-home-stage::after,.sx-crm-work-feature::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(370px circle at var(--sx-crm-x,70%) var(--sx-crm-y,15%),rgba(244,245,255,.065),transparent 78%);opacity:.85;z-index:0}
.sx-crm-work-feature{position:relative;isolation:isolate}
.sx-crm-work-feature>.sx-crm-work-copy,.sx-crm-work-feature>.sx-crm-work-screen{position:relative;z-index:1}
}


/* V17 — SX CRM-influenced product illustration. Visual preview only, no CRM data or authentication. */
.sx-crm-dashboard-v2{
 --crm-line:rgba(210,221,240,.15); max-width:800px; isolation:isolate;
 background:radial-gradient(ellipse 70% 70% at 79% 6%,rgba(65,75,97,.24),transparent 70%),#080a0f;
 border:1px solid rgba(222,231,249,.29); border-radius:18px;
 box-shadow:0 30px 72px rgba(0,0,0,.64),0 0 0 5px rgba(255,255,255,.022),inset 0 1px 0 rgba(255,255,255,.15);
}
.sx-crm-dashboard-v2 .sx-crm-v2-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 12% 12%,rgba(255,255,255,.65) 99%,transparent),radial-gradient(1px 1px at 84% 18%,rgba(255,255,255,.65) 99%,transparent),radial-gradient(1px 1px at 53% 64%,rgba(255,255,255,.42) 99%,transparent),radial-gradient(1px 1px at 76% 83%,rgba(255,255,255,.34) 99%,transparent),radial-gradient(1px 1px at 33% 30%,rgba(255,255,255,.4) 99%,transparent),radial-gradient(ellipse 58% 70% at 76% 5%,rgba(117,130,159,.16),transparent 80%)}
.sx-crm-v2-sphere{position:absolute;right:-20%;top:-52%;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 42% 24%,rgba(240,243,254,.25),rgba(178,186,205,.035) 24%,rgba(8,11,18,.85) 48%,#05070b 70%),linear-gradient(145deg,rgba(255,255,255,.36),transparent 40%);box-shadow:inset 2px 3px 3px rgba(255,255,255,.6),inset -18px -28px 60px #000,0 0 75px rgba(215,223,246,.14);transform:rotate(-20deg)}
.sx-crm-v2-sphere::before{content:"";position:absolute;inset:1%;border-radius:50%;border-top:1.5px solid rgba(244,248,255,.8);transform:rotate(-26deg);filter:blur(.2px)}
.sx-crm-dashboard-v2 .sx-crm-dashbar{position:relative;z-index:1;height:47px;padding-inline:15px;background:linear-gradient(180deg,rgba(43,47,59,.8),rgba(9,11,18,.68));border-bottom:1px solid rgba(240,245,255,.15);backdrop-filter:blur(20px)}
.sx-crm-dashboard-v2 .sx-crm-dashmark{font-size:24px;font-style:italic;letter-spacing:-3.6px;text-shadow:0 0 18px rgba(255,255,255,.2)}
.sx-crm-dashboard-v2 .sx-crm-mark-muted{font-style:normal;font-size:8px;letter-spacing:1.5px;color:#b5b9c5;margin-left:7px}
.sx-crm-dashboard-v2 .sx-crm-dash-search{height:28px;width:42%;max-width:275px;margin-left:auto;border-radius:10px;background:rgba(5,7,12,.58);border:1px solid rgba(226,236,255,.18);color:#8c93a3;gap:8px;font-size:9px;white-space:nowrap}
.sx-crm-dashboard-v2 .sx-crm-dash-search svg{width:13px;height:13px;flex:none}
.sx-crm-v2-status{width:6px;height:6px;border-radius:50%;background:#b9c3d4;box-shadow:0 0 12px rgba(221,229,241,.45)}
.sx-crm-dashboard-v2 .sx-crm-dash-avatar{background:radial-gradient(circle at 30% 25%,#a2a9bb,#1b2030 35%,#0b0d14 74%);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 12px rgba(255,255,255,.12);font-size:8px}
.sx-crm-dashboard-v2 .sx-crm-dashbody{position:relative;z-index:1;min-height:380px;grid-template-columns:117px minmax(0,1fr)}
.sx-crm-dashboard-v2 .sx-crm-sidebar{background:linear-gradient(180deg,rgba(9,12,18,.78),rgba(3,5,10,.88));border-right:1px solid rgba(220,229,246,.15);padding:15px 8px;gap:5px;backdrop-filter:blur(14px)}
.sx-crm-v2-sidebar-heading{font-size:7px;letter-spacing:2px;color:#697283;padding:0 8px 8px}
.sx-crm-dashboard-v2 .sx-crm-sidebar>div:not(.sx-crm-v2-sidebar-heading){font-size:9px;gap:9px;padding:9px 8px;border-radius:8px;color:#9a9fad}
.sx-crm-dashboard-v2 .sx-crm-sidebar svg{width:13px;height:13px;flex:0 0 13px;color:#aeb6c6}
.sx-crm-dashboard-v2 .sx-crm-sidebar>div.is-current{background:linear-gradient(110deg,rgba(184,194,217,.22),rgba(111,125,152,.07));color:#f4f6fc;box-shadow:inset 0 1px 0 rgba(255,255,255,.17);border:1px solid rgba(229,236,249,.08)}
.sx-crm-dashboard-v2 .sx-crm-sidebar-foot{display:flex;align-items:center;justify-content:center;gap:7px;font-size:7px;color:#8b94a4}
.sx-crm-dashboard-v2 .sx-crm-sidebar-foot svg{width:12px;height:12px}
.sx-crm-dashboard-v2 .sx-crm-dashmain{min-width:0;padding:18px 17px 19px}
.sx-crm-dashboard-v2 .sx-crm-dash-kicker{font-size:7px;letter-spacing:1.4px;color:#a8adbd}
.sx-crm-dashboard-v2 .sx-crm-dashhead strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.75px;margin-top:2px}
.sx-crm-dashboard-v2 .sx-crm-dashhead p{margin-top:4px;font-size:9px;color:#a5aab8}
.sx-crm-dashboard-v2 .sx-crm-dash-live{font-size:7px;letter-spacing:1.1px;padding:7px 8px;color:#c8d0df;background:rgba(15,18,25,.65);border:1px solid rgba(235,241,255,.25)}
.sx-crm-dashboard-v2 .sx-crm-statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:17px}
.sx-crm-v2-stat{position:relative;overflow:hidden;min-width:0;min-height:82px;padding:10px 11px;border:1px solid rgba(226,235,252,.2);border-radius:12px;background:linear-gradient(140deg,rgba(31,36,47,.84),rgba(9,12,20,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(13px)}
.sx-crm-v2-stat-label{display:flex;align-items:center;justify-content:space-between;color:#b8bfcd;font-size:8px;white-space:nowrap}.sx-crm-v2-stat-label span{color:#afb4c1;letter-spacing:1.5px}
.sx-crm-v2-stat strong{display:block;color:#fff;font:600 25px/1.1 var(--display);margin:9px 0 5px;letter-spacing:-.9px}
.sx-crm-v2-stat-note{display:flex;gap:4px;align-items:center;color:#aeb6c7;font-size:8px}.sx-crm-v2-stat-note svg{width:10px;height:10px}
.sx-crm-v2-spark{position:absolute;right:7px;bottom:11px;width:42%;height:34px;opacity:.9}
.sx-crm-v2-overview{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr);gap:8px;margin-top:9px}
.sx-crm-dashboard-v2 .sx-crm-panel{margin-top:0;min-width:0;background:linear-gradient(148deg,rgba(20,24,34,.79),rgba(6,8,14,.87));border:1px solid rgba(223,232,250,.15);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.055);backdrop-filter:blur(12px)}
.sx-crm-dashboard-v2 .sx-crm-paneltop{padding:10px 10px 8px;border-bottom-color:rgba(255,255,255,.10)}
.sx-crm-dashboard-v2 .sx-crm-paneltop span{font-size:8px;letter-spacing:1.2px}.sx-crm-dashboard-v2 .sx-crm-paneltop small{font-size:7px;white-space:nowrap}
.sx-crm-v2-chartwrap{padding:8px 10px 0;height:116px}
.sx-crm-v2-chart{display:block;width:100%;height:100%}
.sx-crm-v2-months{display:flex;justify-content:space-between;padding:0 12px 11px;color:#818a9b;font-size:7px;letter-spacing:.5px}
.sx-crm-v2-pipe-body{display:flex;align-items:center;justify-content:center;gap:11px;min-height:134px;padding:13px 9px}
.sx-crm-v2-donut{position:relative;width:84px;aspect-ratio:1;flex:none;border-radius:50%;background:conic-gradient(#dfe5ef 0 42%,#8993a5 42% 75%,#424d60 75% 100%);box-shadow:0 0 22px rgba(220,231,255,.09)}
.sx-crm-v2-donut::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#0c1018}
.sx-crm-v2-donut>span{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 23px var(--display);color:#fff;line-height:1}
.sx-crm-v2-donut small{font:500 7px var(--font);letter-spacing:.9px;color:#8d97a8;margin-top:4px}
.sx-crm-v2-legend{flex:1;min-width:0}.sx-crm-v2-legend>div{display:flex;align-items:center;gap:5px;font-size:8px;color:#c2c8d4;white-space:nowrap;margin-bottom:7px}.sx-crm-v2-legend i{width:6px;height:6px;border-radius:50%;background:#e1e5ee;flex:none}.sx-crm-v2-legend>div:nth-child(2) i{background:#8f9aab}.sx-crm-v2-legend>div:nth-child(3) i{background:#4d596d}.sx-crm-v2-legend b{font-weight:500;color:#fff;margin-left:auto}
.sx-crm-v2-activity{margin-top:9px!important}
.sx-crm-v2-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:4px 8px 7px}
.sx-crm-v2-events>div{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 6px}
.sx-crm-v2-events>div+div{border-left:1px solid rgba(230,237,252,.10)}
.sx-crm-v2-event-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1px solid rgba(226,235,250,.20);background:linear-gradient(145deg,rgba(150,157,171,.2),rgba(12,16,24,.4));border-radius:50%;font-size:14px;color:#fff}
.sx-crm-v2-events>div>span:nth-child(2){font-size:9px;color:#dce2ed;min-width:0}.sx-crm-v2-events small{display:block;font-size:7px;color:#8c96a6;margin-top:4px}
.sx-crm-v2-events em{font-style:normal;color:#8c96a6;font-size:7px;white-space:nowrap;margin-left:auto}

/* This small Work-page instance remains recognizable without overwhelming portfolio content. */
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-dashbody{min-height:0}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-dashmain{padding:11px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-statrow{margin-top:9px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-stat{min-height:70px;padding:8px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-stat strong{font-size:18px;margin:5px 0}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-chartwrap{height:76px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-pipe-body{min-height:94px;padding:7px;gap:7px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-donut{width:59px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-donut::after{inset:9px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-donut>span{font-size:17px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-donut small{font-size:6px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-events>div{padding:5px}
/* On small phones, keep the interface a recognizable miniature rather than stacking panels vertically. */
@media(max-width:1180px){
.sx-crm-dashboard-v2 .sx-crm-dashbody{grid-template-columns:92px minmax(0,1fr)}
.sx-crm-dashboard-v2 .sx-crm-sidebar>div:not(.sx-crm-v2-sidebar-heading){font-size:8px;padding:8px 6px;gap:6px}
.sx-crm-dashboard-v2 .sx-crm-dashmain{padding:12px}
.sx-crm-v2-donut{width:68px}.sx-crm-v2-donut::after{inset:10px}
.sx-crm-v2-legend>div{font-size:7px}
}
@media(max-width:640px){
.sx-crm-dashboard-v2 .sx-crm-dashbar{height:37px;padding:0 9px}
.sx-crm-dashboard-v2 .sx-crm-dash-search{width:48%;font-size:7px;height:23px;padding:0 7px;gap:5px}
.sx-crm-dashboard-v2 .sx-crm-dash-search svg{width:11px;height:11px}
.sx-crm-dashboard-v2 .sx-crm-dashbody{grid-template-columns:37px minmax(0,1fr)}
.sx-crm-dashboard-v2 .sx-crm-sidebar{align-items:center;padding:9px 3px;gap:4px}
.sx-crm-dashboard-v2 .sx-crm-v2-sidebar-heading,.sx-crm-dashboard-v2 .sx-crm-sidebar-foot{display:none}
.sx-crm-dashboard-v2 .sx-crm-sidebar>div:not(.sx-crm-v2-sidebar-heading){padding:6px;justify-content:center;width:28px;height:28px}
.sx-crm-dashboard-v2 .sx-crm-sidebar>div span{display:none}
.sx-crm-dashboard-v2 .sx-crm-sidebar svg{width:14px;height:14px;flex:0 0 14px}
.sx-crm-dashboard-v2 .sx-crm-dashmain{padding:10px 8px}
.sx-crm-dashboard-v2 .sx-crm-dashhead strong{font-size:16px}
.sx-crm-dashboard-v2 .sx-crm-dashhead p{font-size:7px}
.sx-crm-dashboard-v2 .sx-crm-dash-kicker{font-size:6px}
.sx-crm-dashboard-v2 .sx-crm-dash-live{font-size:5.5px;padding:5px 4px}
.sx-crm-dashboard-v2 .sx-crm-statrow{gap:4px;margin-top:10px}
.sx-crm-v2-stat{min-height:61px;padding:7px 5px;border-radius:7px}
.sx-crm-v2-stat-label{font-size:6px}.sx-crm-v2-stat-label span{display:none}
.sx-crm-v2-stat strong{font-size:17px;margin:6px 0 3px}
.sx-crm-v2-stat-note{font-size:6px}.sx-crm-v2-stat-note svg{display:none}
.sx-crm-v2-spark{width:39%;height:21px;right:4px;bottom:9px}
.sx-crm-v2-overview{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:4px;margin-top:6px}
.sx-crm-dashboard-v2 .sx-crm-panel{border-radius:8px}
.sx-crm-dashboard-v2 .sx-crm-paneltop{padding:7px 6px 6px}
.sx-crm-dashboard-v2 .sx-crm-paneltop span{font-size:6px;letter-spacing:.3px}
.sx-crm-dashboard-v2 .sx-crm-paneltop small{display:none}
.sx-crm-v2-chartwrap{height:67px;padding:6px 5px 0}
.sx-crm-v2-months{font-size:5px;padding:0 6px 5px}
.sx-crm-v2-pipe-body{min-height:70px;gap:3px;padding:4px 3px}
.sx-crm-v2-donut{width:38px}.sx-crm-v2-donut::after{inset:6px}
.sx-crm-v2-donut>span{font-size:13px}.sx-crm-v2-donut small{font-size:4px;margin-top:2px}
.sx-crm-v2-legend>div{font-size:5px;gap:3px;margin-bottom:4px}.sx-crm-v2-legend i{width:4px;height:4px}
.sx-crm-v2-activity{margin-top:6px!important}
.sx-crm-v2-events{padding:3px 4px;gap:0}
.sx-crm-v2-events>div{padding:5px 3px;gap:4px}
.sx-crm-v2-event-icon{flex-basis:17px;width:17px;height:17px;font-size:10px}
.sx-crm-v2-events>div>span:nth-child(2){font-size:6px}.sx-crm-v2-events small{font-size:5px;margin-top:2px}.sx-crm-v2-events em{display:none}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-chartwrap{height:67px}
.sx-crm-dashboard-mini.sx-crm-dashboard-v2 .sx-crm-v2-pipe-body{min-height:70px}
}


/* V20 — replace the blurry 2024 discovery artwork with a detailed 2026 ZAR
   SX CRM visual. Scoped exclusively to the middle Services discovery card.
   All card text, clickable links, hover lighting, and responsive structure stay intact. */
.page-home .home-directory .directory-card > .sx-art-interfaces {
  background-image:url('images/sx-discover-crm-2026.webp');
  background-size:cover;
  background-position:50% 44%;
  height:59%;
  bottom:0;
  opacity:.96;
  filter:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%);
}
@media(min-width:641px) and (max-width:1020px){
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:57%;background-position:49% 44%}
}
@media(max-width:640px){
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:62%;background-position:50% 44%}
}
@media(hover:hover) and (pointer:fine){
  .page-home .home-directory .directory-card:hover > .sx-art-interfaces,
  .page-home .home-directory .directory-card:focus-visible > .sx-art-interfaces{
    filter:brightness(1.08);
  }
}


/* V21 — crisp native SX CRM miniature for the middle Services discovery card.
   All UI elements are painted by the browser (not a downscaled screenshot).
   Other cards and their typography, arrows, links and hover effects are unchanged. */
.page-home .home-directory .directory-card > .sx-art-interfaces {
  background-image:none;
  background:radial-gradient(ellipse 73% 98% at 80% 60%,rgba(137,148,166,.12),transparent 75%);
  width:100%; height:61%; bottom:0;
  overflow:hidden; opacity:1; filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 96%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 96%);
  transform:none;
  font-family:var(--font),Arial,sans-serif;
  text-align:left;
}
.page-home .home-directory .directory-card > .sx-art-interfaces * {box-sizing:border-box}
.sx-art-interfaces .sx-mini-crm-back{
  position:absolute;border:1px solid rgba(228,234,244,.27);
  border-radius:13px 13px 0 0;
  background:linear-gradient(140deg,rgba(37,40,49,.48),rgba(7,8,12,.82));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 2px 13px rgba(0,0,0,.35);
}
.sx-art-interfaces .sx-mini-crm-back-one{top:15%;left:16%;right:4%;bottom:-20%;transform:translate(11px,-7px) rotate(-4deg);opacity:.58}
.sx-art-interfaces .sx-mini-crm-back-two{top:20%;left:11%;right:4%;bottom:-20%;transform:translate(5px,-3px) rotate(-2deg);opacity:.66}
.sx-art-interfaces .sx-mini-crm-screen {
  position:absolute;left:3%;right:4%;top:26%;height:87%;
  border:1px solid rgba(227,233,244,.45);
  border-radius:11px 11px 0 0;
  overflow:hidden;
  color:#f4f6fa;
  background:linear-gradient(160deg,rgba(17,20,27,.99),rgba(5,7,11,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 0 20px rgba(231,240,255,.08),0 16px 36px #000;
}
.sx-mini-crm-topbar{height:22px;padding:0 8px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(236,241,250,.13);background:linear-gradient(180deg,#252831,#14161c)}
.sx-mini-brand{font-weight:800;letter-spacing:-.9px;font-size:12px;white-space:nowrap}
.sx-mini-brand span{font-size:6px;font-weight:600;letter-spacing:.4px;color:#9da2ae}
.sx-mini-search{margin-left:auto;height:12px;width:40%;max-width:140px;border:1px solid #424653;background:#14161c;border-radius:4px;color:#818895;font-size:6px;display:flex;align-items:center;gap:4px;padding:0 5px;white-space:nowrap;overflow:hidden}
.sx-mini-magnifier{display:inline-block;width:5px;height:5px;border:1px solid #a8b0bf;border-radius:50%;flex:0 0 auto}
.sx-mini-period{font-size:6px;color:#e6e8ef;background:#1f222a;border:1px solid #464b57;border-radius:4px;padding:2px 4px;white-space:nowrap}
.sx-mini-crm-body{display:grid;grid-template-columns:23% 77%;height:calc(100% - 22px)}
.sx-mini-crm-rail{padding:7px 4px;display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(230,235,246,.14);background:linear-gradient(160deg,#11141b,#090b11)}
.sx-mini-crm-rail>span{display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:6.5px;color:#b5bac4;padding:5px 3px;border-radius:4px}
.sx-mini-crm-rail>span.sx-mini-nav-active{background:linear-gradient(135deg,#333842,#242832);color:white}
.sx-mini-ico{font-size:9px;min-width:9px;line-height:1;color:#d6dbe3;text-align:center}
.sx-mini-crm-main{min-width:0;padding:8px 9px 0;background:radial-gradient(ellipse 90% 95% at 89% 0%,rgba(106,116,134,.11),transparent 90%),#0b0d12}
.sx-mini-headline{display:flex;flex-direction:column;gap:2px;white-space:nowrap;min-width:0}
.sx-mini-headline span{font-size:6px;color:#9198a5;letter-spacing:1px}
.sx-mini-headline strong{font-size:12px;line-height:1.1;font-weight:600;letter-spacing:-.3px}
.sx-mini-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px}
.sx-mini-metrics>div{min-width:0;padding:5px 5px 4px;display:flex;flex-direction:column;gap:2px;white-space:nowrap;border:1px solid #363b47;border-radius:6px;background:linear-gradient(135deg,#20242d,#13161c);box-shadow:inset 0 1px rgba(255,255,255,.045)}
.sx-mini-metrics span{font-size:6px;color:#b0b5c0;text-overflow:ellipsis;overflow:hidden}
.sx-mini-metrics b{font-size:11px;line-height:1.2;color:#f4f5f7;font-weight:600;letter-spacing:-.2px}
.sx-mini-metrics em{font-style:normal;font-size:6px;color:#a6d1b4}
.sx-mini-chart{margin-top:6px;padding:6px 6px 1px;background:#10131a;border:1px solid #303642;border-radius:6px;height:66px;overflow:hidden}
.sx-mini-chart-title{display:flex;justify-content:space-between;align-items:center;gap:5px;white-space:nowrap}
.sx-mini-chart-title strong{font-size:7px;font-weight:600;letter-spacing:0}
.sx-mini-chart-title span{font-size:5px;color:#9ba4b0;letter-spacing:.35px}
.sx-mini-chart svg{display:block;width:100%;height:49px;margin-top:1px;overflow:visible}
@media(min-width:1021px){
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:65%;}
  .sx-art-interfaces .sx-mini-crm-screen{top:27%;height:82%}
}
@media(max-width:640px){
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:64%;}
  .sx-art-interfaces .sx-mini-crm-screen{top:24%;height:87%}
}
@media (hover:hover) and (pointer:fine){
  .page-home .home-directory .directory-card:hover > .sx-art-interfaces,
  .page-home .home-directory .directory-card:focus-visible > .sx-art-interfaces{filter:brightness(1.07)}
}

/* Isolate the live CRM metric figures from the site's circular arrow styles. */
.page-home .home-directory .directory-card .sx-mini-metrics b {
  position:static; display:block; width:auto; height:auto; min-height:0;
  margin:0; padding:0; border:0; border-radius:0; background:none;
  box-shadow:none; transform:none; font:600 11.5px/1.18 var(--font);
  letter-spacing:-.2px; color:#f5f6f8; text-align:left; flex:none;
}
.page-home .home-directory .directory-card .sx-mini-metrics b::before {content:none;display:none}


/* V22 / Return to a cinematic, deeply layered SX CRM Services card.
   The dashboard is an SVG graphic—not low-resolution raster or miniature text.
   It scales cleanly with screen density and keeps the card layout unchanged. */
.page-home .home-directory .directory-card > .sx-art-interfaces {
  width:100%;height:64%;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse 98% 92% at 82% 38%, rgba(203,215,237,.12), transparent 68%),url('images/sx-crm-discovery-cinematic.svg');
  background-size:100% 100%, 100% 100%;
  background-position:center,center bottom;
  background-repeat:no-repeat;
  overflow:hidden;opacity:.98;filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 96%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 96%);
  transform:translateZ(0);
  transition:opacity .45s ease,filter .45s ease,transform .6s cubic-bezier(.19,1,.22,1);
}
@media(hover:hover) and (pointer:fine){
  .page-home .home-directory .directory-card:hover > .sx-art-interfaces,
  .page-home .home-directory .directory-card:focus-visible > .sx-art-interfaces {
    opacity:1; filter:brightness(1.09) contrast(1.035);
    transform:translate3d(0,-3px,0) scale(1.016);
  }
}
@media(min-width:1021px){.page-home .home-directory .directory-card > .sx-art-interfaces{height:65%;}}
@media(max-width:640px){.page-home .home-directory .directory-card > .sx-art-interfaces{height:64%;}}
@media(prefers-reduced-motion:reduce){.page-home .home-directory .directory-card > .sx-art-interfaces{transition:none!important;transform:none!important}}


/* V23 — approved three-card cinematic glass presentation.
   Live HTML carries all copy/links/icons. Reference art only supplies the
   monochrome 3D objects and reflections (old baked-in arrow erased). */
.page-home .home-directory .directory-card{
  --sx-light-x:88%;--sx-light-y:0%;
  height:clamp(375px,31.5vw,466px);
  padding:30px 27px 82px;
  border-radius:23px;
  border:1px solid rgba(231,234,242,.49);
  background:
    radial-gradient(90% 60% at 90% 3%,rgba(157,162,176,.085),transparent 63%),
    linear-gradient(152deg,#111215 0%,#0a0a0e 49%,#050507 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 22px 45px rgba(0,0,0,.31),
    0 0 15px rgba(255,255,255,.025);
}
.page-home .home-directory .directory-card::before{
  z-index:1;
  background:
    radial-gradient(ellipse 53% 17% at 92% 0%,rgba(255,255,255,.37),transparent 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 20%,transparent 74%,rgba(255,255,255,.04));
  opacity:.66;
}
.page-home .home-directory .directory-card::after{
  content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(ellipse 20% 2% at 95% 0%,rgba(255,255,255,.78),transparent 100%),
    linear-gradient(0deg,rgba(239,244,255,.09),transparent 5%,transparent 95%,rgba(255,255,255,.07));
}
.page-home .home-directory .directory-card > span:first-child{
  color:#d2d2da;letter-spacing:3px;font-size:10px;
}
.page-home .home-directory .directory-card > h3{
  margin:29px 0 12px;
  font:500 clamp(23px,1.85vw,29px)/1.2 var(--display);
  letter-spacing:-.85px;
}
.page-home .home-directory .directory-card > p{
  font:400 13px/1.65 var(--font);color:#bfc0c8;max-width:310px;
}
.page-home .home-directory .directory-card > .sx-discovery-art,
.page-home .home-directory .directory-card > .sx-art-interfaces{
  position:absolute; z-index:2;left:0;right:0;bottom:0;
  width:100%;height:80%;pointer-events:none;
  background-repeat:no-repeat;background-position:center bottom;
  background-size:100% 100%;background-color:transparent;
  opacity:1;filter:none;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
  transform:translateZ(0);
  transition:transform .6s cubic-bezier(.19,1,.22,1),filter .5s ease;
}
.page-home .home-directory .directory-card > .sx-art-network{background-image:url('images/sx-approved-solutions.webp')}
.page-home .home-directory .directory-card > .sx-art-interfaces{background-image:url('images/sx-approved-services.webp')}
.page-home .home-directory .directory-card > .sx-art-sx{background-image:url('images/sx-approved-about.webp')}
.page-home .home-directory .directory-card > b{
  z-index:5;right:19px;bottom:19px;
  width:46px;height:46px;
  border:1px solid rgba(246,247,251,.56);
  background:radial-gradient(circle at 33% 22%,rgba(241,244,251,.17),transparent 50%),linear-gradient(152deg,rgba(32,33,38,.72),rgba(2,3,6,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 8px 15px rgba(0,0,0,.40);
}
@media (hover:hover) and (pointer:fine){
  .page-home .home-directory .directory-card:hover,
  .page-home .home-directory .directory-card:focus-visible{
    border-color:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 23px 48px rgba(0,0,0,.39),0 0 17px rgba(255,255,255,.045);
  }
  .page-home .home-directory .directory-card:hover > .sx-discovery-art,
  .page-home .home-directory .directory-card:focus-visible > .sx-discovery-art,
  .page-home .home-directory .directory-card:hover > .sx-art-interfaces,
  .page-home .home-directory .directory-card:focus-visible > .sx-art-interfaces{
    transform:translate3d(0,-2px,0) scale(1.009);filter:brightness(1.06);
  }
}
@media(min-width:641px) and (max-width:1020px){
  .page-home .home-directory .directory-card{height:365px;padding:23px 18px 65px;border-radius:19px}
  .page-home .home-directory .directory-card > h3{font-size:21px;margin:23px 0 10px}
  .page-home .home-directory .directory-card > p{font-size:11.4px}
  .page-home .home-directory .directory-card > .sx-discovery-art,
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:78%}
  .page-home .home-directory .directory-card > b{right:15px;bottom:15px;width:42px;height:42px}
}
@media(max-width:640px){
  .page-home .home-directory .directory-card{height:360px;padding:24px 22px 71px;border-radius:20px}
  .page-home .home-directory .directory-card > h3{font-size:23px;margin:26px 0 11px}
  .page-home .home-directory .directory-card > p{font-size:12.5px;max-width:280px}
  .page-home .home-directory .directory-card > .sx-discovery-art,
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:78%}
  .page-home .home-directory .directory-card > b{right:17px;bottom:18px;width:45px;height:45px}
}
@media(max-width:360px){
  .page-home .home-directory .directory-card{height:325px;padding:20px 18px 65px}
  .page-home .home-directory .directory-card > .sx-discovery-art,
  .page-home .home-directory .directory-card > .sx-art-interfaces{height:78%}
}
@media(prefers-reduced-motion:reduce){
  .page-home .home-directory .directory-card,
  .page-home .home-directory .directory-card > .sx-discovery-art{transition:none!important;transform:none!important}
}


/* SX Agency / cinematic CRM showroom — homepage ONLY, no global page changes */
.page-home .sx-crm-home.sx-crm-cinematic{position:relative;isolation:isolate;width:min(1580px,calc(100% - 56px));max-width:none;padding:90px 0 105px;margin:0 auto;border-bottom:1px solid rgba(255,255,255,.10)}
.page-home .sx-crm-cinematic::before{content:"";position:absolute;z-index:-3;pointer-events:none;left:50%;top:0;bottom:0;width:100vw;transform:translateX(-50%);background:linear-gradient(90deg,#020307 0%,rgba(2,3,7,.50) 58%,rgba(2,3,7,.06) 100%),url('images/sx-crm-cinematic-space.webp') center center/cover no-repeat}
.page-home .sx-crm-cinematic .sx-crm-section-heading{position:relative;z-index:2;padding:0 clamp(20px,2.2vw,35px);margin-bottom:8px}
.page-home .sx-crm-cinematic .sx-crm-home-title-row{grid-template-columns:minmax(0,1.4fr) minmax(0,.68fr);gap:60px;align-items:center;margin-top:26px}
.page-home .sx-crm-cinematic .sx-crm-home-title-row h2{font-size:clamp(44px,4.3vw,66px);line-height:1.09;letter-spacing:-3.3px}
.page-home .sx-crm-cinematic .sx-crm-home-title-row>p{max-width:360px;margin:0 30px 0 0;color:#d0d1d8;text-shadow:0 2px 10px #000}
.page-home .sx-crm-cinematic .sx-crm-home-stage{position:relative;isolation:isolate;overflow:visible;display:grid;grid-template-columns:minmax(0,.39fr) minmax(0,.61fr);align-items:center;min-height:610px;gap:0;padding:34px 6px 16px clamp(20px,2.2vw,35px);margin-top:12px;border:0;border-radius:0;background:transparent;box-shadow:none}
.page-home .sx-crm-cinematic .sx-crm-home-stage::before,.page-home .sx-crm-cinematic .sx-crm-home-stage::after{display:none}
.page-home .sx-crm-cinematic .sx-cine-environment{position:absolute;z-index:-1;inset:-340px -8% -98px 16%;pointer-events:none;overflow:visible}
.page-home .sx-crm-cinematic .sx-cine-orb{position:absolute;top:0;right:-5%;width:min(85%,1190px);aspect-ratio:1.5;background:url('images/sphere-reference.jpg') top center/contain no-repeat;mix-blend-mode:screen;opacity:.76;filter:contrast(1.12) brightness(.9);mask-image:linear-gradient(to bottom,black 0%,black 62%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 62%,transparent 95%)}
.page-home .sx-crm-cinematic .sx-cine-ground{position:absolute;bottom:-3%;left:0;right:0;height:22%;background:radial-gradient(ellipse 60% 25% at 70% 45%,rgba(174,185,211,.26),transparent 78%),linear-gradient(0deg,#000b,transparent);filter:blur(17px)}
.page-home .sx-crm-cinematic .sx-crm-home-content{padding:35px 10px 50px 0;align-self:center}
.page-home .sx-crm-cinematic .sx-crm-eyebrow{font-size:10px;letter-spacing:2.5px;margin-bottom:32px;color:#c1c4d0;text-shadow:0 2px 10px #000}
.page-home .sx-crm-cinematic .sx-crm-home-content h3{font-size:clamp(37px,3.4vw,53px);letter-spacing:-2.3px;margin-bottom:20px}
.page-home .sx-crm-cinematic .sx-crm-home-content>p:not(.sx-crm-eyebrow){max-width:425px;color:#cdd0d9;font-size:13px;text-shadow:0 2px 8px #000}
.page-home .sx-crm-cinematic .sx-crm-home-bullets span{padding:9px 12px;border-color:rgba(244,247,255,.17);background:rgba(10,13,18,.63);backdrop-filter:blur(12px)}
.page-home .sx-crm-cinematic .sx-crm-actions{gap:11px}
.page-home .sx-crm-cinematic .sx-crm-home-content>small{color:#aaaeba;font-size:10px}
.page-home .sx-crm-cinematic .sx-crm-home-visual{z-index:2;width:100%;max-width:none;min-width:0;margin:0;perspective:1300px;transform:translateX(0)}
.page-home .sx-crm-cinematic .sx-crm-home-visual::after{inset:25% 3% 2%;background:rgba(176,196,222,.20);filter:blur(80px)}
.page-home .sx-crm-cinematic .sx-cine-dashboard{color:#ecedf3;position:relative;overflow:hidden;width:100%;min-width:0;max-width:none;transform:perspective(1600px) rotateY(-4deg) rotateX(1deg);transform-origin:80% 50%;border-radius:21px;border:1px solid rgba(239,244,255,.55);background:linear-gradient(140deg,rgba(21,26,37,.96),rgba(4,7,13,.97) 62%);box-shadow:0 37px 90px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.22),-6px 0 28px rgba(220,231,255,.065);-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);font-family:var(--font)}
.page-home .sx-crm-cinematic .sx-cine-dashboard::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(129deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 64%,rgba(255,255,255,.015));border-radius:inherit}
.page-home .sx-crm-cinematic .sx-cine-topbar{height:55px;display:flex;align-items:center;gap:20px;padding:0 18px;border-bottom:1px solid rgba(235,240,252,.22);background:linear-gradient(170deg,rgba(45,50,64,.64),rgba(8,12,20,.64))}
.page-home .sx-crm-cinematic .sx-cine-topbrand{font:800 27px/1 var(--display);letter-spacing:-3px;white-space:nowrap;color:#fff;text-shadow:0 0 16px #ffffff40}
.page-home .sx-crm-cinematic .sx-cine-topbrand span{font:500 10px var(--font);letter-spacing:2px;color:#a9afbd}
.page-home .sx-crm-cinematic .sx-cine-search{color:#838c9b;border:1px solid #ffffff21;border-radius:100px;padding:8px 15px;width:46%;max-width:330px;margin-left:auto;font-size:10px;background:rgba(4,7,13,.47);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-home .sx-crm-cinematic .sx-cine-topicons{display:flex;align-items:center;gap:15px;color:#c6cbd5}
.page-home .sx-crm-cinematic .sx-cine-topicons b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #ffffff44;font-size:10px;background:radial-gradient(circle at 28% 16%,#b6beca,#252a34 40%,#050608)}
.page-home .sx-crm-cinematic .sx-cine-shell{display:grid;grid-template-columns:130px minmax(0,1fr);min-height:500px}
.page-home .sx-crm-cinematic .sx-cine-sidebar{display:flex;flex-direction:column;gap:4px;padding:20px 11px 13px;background:linear-gradient(180deg,rgba(6,10,17,.94),rgba(1,3,7,.94));border-right:1px solid rgba(238,245,255,.19)}
.page-home .sx-crm-cinematic .sx-cine-sidebar>div:not(.sx-cine-profile){display:flex;align-items:center;gap:9px;color:#a9b0bf;font-size:10px;white-space:nowrap;border:1px solid transparent;border-radius:8px;padding:9px 8px}
.page-home .sx-crm-cinematic .sx-cine-sidebar>div.current{color:white!important;background:linear-gradient(120deg,#a4acbb44,#ffffff09);border-color:#ffffff25;box-shadow:inset 0 1px 0 #ffffff2b}
.page-home .sx-crm-cinematic .sx-cine-sidebar i{font-style:normal;font-size:14px;width:16px;color:#bfc5d1}
.page-home .sx-crm-cinematic .sx-cine-profile{margin-top:auto;font-size:9px;color:#f0f2f7;display:flex;gap:9px;align-items:center}
.page-home .sx-crm-cinematic .sx-cine-profile>span{font-size:8px;line-height:1.5;color:#9fa6b3}
.page-home .sx-crm-cinematic .sx-cine-content{padding:21px 17px 17px;min-width:0}
.page-home .sx-crm-cinematic .sx-cine-welcome{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.page-home .sx-crm-cinematic .sx-cine-welcome small{font-size:8px;color:#aeb5c4;letter-spacing:1.9px}
.page-home .sx-crm-cinematic .sx-cine-welcome h4{margin:4px 0 2px;font:600 23px/1.1 var(--display);letter-spacing:-.75px;color:#fff}
.page-home .sx-crm-cinematic .sx-cine-welcome p{margin:0;color:#a9afbc;font-size:9px}
.page-home .sx-crm-cinematic .sx-cine-date{border:1px solid #ffffff2f;background:#0c1018ba;padding:9px 13px;border-radius:100px;color:#e0e4ef;font-size:10px;white-space:nowrap}
.page-home .sx-crm-cinematic .sx-cine-date i{font-style:normal;margin-left:10px}
.page-home .sx-crm-cinematic .sx-cine-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.page-home .sx-crm-cinematic .sx-cine-stat{position:relative;min-width:0;overflow:hidden;min-height:92px;padding:12px 10px 11px;border:1px solid #ffffff31;border-radius:10px;background:linear-gradient(135deg,rgba(68,74,88,.32),rgba(7,10,15,.62));box-shadow:inset 0 1px 0 #ffffff12}
.page-home .sx-crm-cinematic .sx-cine-stat span,.page-home .sx-crm-cinematic .sx-cine-stat small{display:block;white-space:nowrap}
.page-home .sx-crm-cinematic .sx-cine-stat span{font-size:9px;color:#b9beca}
.page-home .sx-crm-cinematic .sx-cine-stat strong{display:block;color:#fff;font:600 clamp(13px,1.45vw,21px)/1.2 var(--display);letter-spacing:-.5px;margin:10px 0 5px}
.page-home .sx-crm-cinematic .sx-cine-stat small{color:#a4d1b5;font-size:9px}
.page-home .sx-crm-cinematic .sx-cine-stat svg{position:absolute;right:6px;bottom:8px;width:46%;height:29px;opacity:.85;overflow:visible}
.page-home .sx-crm-cinematic .sx-cine-stat svg path{stroke:#e2e7ee;stroke-width:1.6;fill:none}
.page-home .sx-crm-cinematic .sx-cine-mid{display:grid;grid-template-columns:1.02fr 1fr;gap:8px;margin-top:9px}
.page-home .sx-crm-cinematic .sx-cine-widget{min-width:0;overflow:hidden;border:1px solid #ffffff2a;border-radius:10px;background:linear-gradient(135deg,rgba(19,24,33,.83),rgba(5,8,13,.82));box-shadow:inset 0 1px 0 #ffffff10}
.page-home .sx-crm-cinematic .sx-cine-widget header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:11px 11px 9px}
.page-home .sx-crm-cinematic .sx-cine-widget header strong{font-size:10px;font-weight:600;color:#f0f3f9}
.page-home .sx-crm-cinematic .sx-cine-widget header small{color:#929cab;font-size:8px;white-space:nowrap}
.page-home .sx-crm-cinematic .sx-cine-lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0 8px 9px}
.page-home .sx-crm-cinematic .sx-cine-lane{min-width:0;min-height:138px;position:relative;overflow:hidden;background:linear-gradient(145deg,#30374466,#080b11b3);border:1px solid #ffffff20;border-radius:6px;padding:8px 5px}
.page-home .sx-crm-cinematic .sx-cine-lane span{display:block;color:#b5becb;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-home .sx-crm-cinematic .sx-cine-lane strong{display:block;color:#fafbff;font-size:16px;font-weight:600;margin-top:7px}
.page-home .sx-crm-cinematic .sx-cine-lane small{font-size:6.5px;color:#aeb6c5;white-space:nowrap}
.page-home .sx-crm-cinematic .sx-cine-won{border-color:rgba(111,191,157,.5);background:linear-gradient(145deg,#254f4247,#0a1914b3)}
.page-home .sx-crm-cinematic .sx-cine-mini-bars{position:absolute;bottom:5px;left:4px;right:4px;height:43px;display:flex;align-items:end;gap:2px}
.page-home .sx-crm-cinematic .sx-cine-mini-bars b{flex:1;background:linear-gradient(180deg,#a6b0bd77,#4b556477);border-radius:2px 2px 0 0}
.page-home .sx-crm-cinematic .sx-cine-won .sx-cine-mini-bars b{background:linear-gradient(180deg,#87e1b6ad,#1d5e4999)}
.page-home .sx-crm-cinematic .sx-cine-revenue{display:flex;flex-direction:column}
.page-home .sx-crm-cinematic .sx-cine-chart{height:138px;padding:6px 12px 0}
.page-home .sx-crm-cinematic .sx-cine-chart svg{width:100%;height:100%;display:block}
.page-home .sx-crm-cinematic .sx-cine-chart-grid{stroke:rgba(226,235,251,.15);stroke-dasharray:3 5;stroke-width:.7;fill:none}
.page-home .sx-crm-cinematic .sx-cine-chart-line{stroke:#e8eef8;stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.page-home .sx-crm-cinematic .sx-cine-months{display:flex;justify-content:space-around;padding:2px 7px 8px;gap:2px}
.page-home .sx-crm-cinematic .sx-cine-months span{font-size:6.7px;color:#8e98a7}
.page-home .sx-crm-cinematic .sx-cine-bottom{display:grid;grid-template-columns:1.06fr 1.02fr .8fr;gap:8px;margin-top:9px}
.page-home .sx-crm-cinematic .sx-cine-bottom .sx-cine-widget{min-height:131px}
.page-home .sx-crm-cinematic .sx-cine-bottom p{border-top:1px solid #ffffff10;padding:7px 10px;margin:0;font-size:8.2px;color:#b4bccb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-home .sx-crm-cinematic .sx-cine-bottom p b{font-weight:400;color:#cbd2dc}
.page-home .sx-crm-cinematic .sx-cine-bottom p em{float:right;color:#7f8a99;font-style:normal;font-size:7.5px}
.page-home .sx-crm-cinematic .sx-cine-locations p{display:flex;align-items:center;gap:5px;font-size:7.4px;justify-content:space-between}
.page-home .sx-crm-cinematic .sx-cine-locations p span{display:inline-block;max-width:47%;height:4px;background:linear-gradient(90deg,#f1f3fa,#677384);border-radius:10px;margin-left:auto}
/* On constrained screens the background remains cinematic, but the information is readable. */
@media(max-width:1250px){
 .page-home .sx-crm-cinematic .sx-crm-home-stage{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);padding-left:15px}
 .page-home .sx-crm-cinematic .sx-cine-shell{grid-template-columns:105px minmax(0,1fr)}
 .page-home .sx-crm-cinematic .sx-cine-sidebar>div:not(.sx-cine-profile){padding:8px 5px;font-size:8px}
 .page-home .sx-crm-cinematic .sx-cine-lane small{display:none}
 .page-home .sx-crm-cinematic .sx-cine-lane{min-height:125px}
}
@media(max-width:1000px){
 .page-home .sx-crm-home.sx-crm-cinematic{width:min(920px,calc(100% - 36px));padding-block:65px 80px}
 .page-home .sx-crm-cinematic .sx-crm-home-title-row{grid-template-columns:1fr;gap:20px}
 .page-home .sx-crm-cinematic .sx-crm-home-title-row>p{justify-self:start;margin:0}
 .page-home .sx-crm-cinematic .sx-crm-home-stage{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:30px 10px 16px;gap:36px}
 .page-home .sx-crm-cinematic .sx-cine-environment{inset:-290px -4% -10% 7%}
 .page-home .sx-crm-cinematic .sx-cine-orb{right:-12%;top:0;width:95%;opacity:.6}
 .page-home .sx-crm-cinematic .sx-crm-home-content{padding:20px 12px 0;max-width:600px}
 .page-home .sx-crm-cinematic .sx-crm-home-visual{width:min(100%,820px);margin:0 auto}
 .page-home .sx-crm-cinematic .sx-cine-dashboard{transform:none}
}
@media(max-width:640px){
 .page-home .sx-crm-home.sx-crm-cinematic{width:calc(100% - 26px);padding:52px 0 55px}
 .page-home .sx-crm-cinematic .sx-crm-section-heading{padding:0 8px}
 .page-home .sx-crm-cinematic .sx-crm-home-title-row h2{font-size:clamp(33px,9vw,43px);line-height:1.14;letter-spacing:-1.8px}
 .page-home .sx-crm-cinematic .sx-crm-home-title-row>p{font-size:12px}
 .page-home .sx-crm-cinematic .sx-crm-home-stage{padding:30px 0 0;gap:31px}
 .page-home .sx-crm-cinematic .sx-crm-home-content{padding:0 8px}
 .page-home .sx-crm-cinematic .sx-crm-eyebrow{font-size:9px;margin-bottom:17px}
 .page-home .sx-crm-cinematic .sx-crm-home-content h3{font-size:35px;letter-spacing:-1.4px}
 .page-home .sx-crm-cinematic .sx-cine-environment{inset:-70px -15% -10% 0}
 .page-home .sx-crm-cinematic .sx-cine-orb{width:115%;opacity:.31;right:-38%;top:-5%}
 .page-home .sx-crm-cinematic .sx-crm-home-visual{width:100%}
 .page-home .sx-crm-cinematic .sx-cine-dashboard{border-radius:13px}
 .page-home .sx-crm-cinematic .sx-cine-topbar{height:39px;padding:0 9px;gap:6px}
 .page-home .sx-crm-cinematic .sx-cine-topbrand{font-size:19px}
 .page-home .sx-crm-cinematic .sx-cine-topbrand span{font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-search{font-size:7px;padding:6px;max-width:142px}
 .page-home .sx-crm-cinematic .sx-cine-topicons{gap:5px;font-size:10px}
 .page-home .sx-crm-cinematic .sx-cine-topicons b{width:20px;height:20px;font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-shell{grid-template-columns:38px minmax(0,1fr);min-height:0}
 .page-home .sx-crm-cinematic .sx-cine-sidebar{padding:8px 2px;align-items:center}
 .page-home .sx-crm-cinematic .sx-cine-sidebar>div:not(.sx-cine-profile){width:28px;height:28px;justify-content:center;padding:4px;border-radius:7px}
 .page-home .sx-crm-cinematic .sx-cine-sidebar>div:not(.sx-cine-profile)>span,.page-home .sx-crm-cinematic .sx-cine-profile{display:none}
 .page-home .sx-crm-cinematic .sx-cine-sidebar i{width:auto;font-size:13px}
 .page-home .sx-crm-cinematic .sx-cine-content{padding:9px 7px 11px}
 .page-home .sx-crm-cinematic .sx-cine-welcome{margin-bottom:9px}
 .page-home .sx-crm-cinematic .sx-cine-welcome h4{font-size:16px}
 .page-home .sx-crm-cinematic .sx-cine-welcome small{font-size:6px}
 .page-home .sx-crm-cinematic .sx-cine-welcome p{font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-date{font-size:7px;padding:5px 7px}
 .page-home .sx-crm-cinematic .sx-cine-date i{margin-left:2px}
 .page-home .sx-crm-cinematic .sx-cine-stats{gap:4px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-home .sx-crm-cinematic .sx-cine-stat{min-height:61px;padding:7px}
 .page-home .sx-crm-cinematic .sx-cine-stat span{font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-stat strong{font-size:17px;margin:4px 0 2px}
 .page-home .sx-crm-cinematic .sx-cine-stat small{font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-stat svg{height:19px;width:38%}
 .page-home .sx-crm-cinematic .sx-cine-mid{grid-template-columns:1fr}
 .page-home .sx-crm-cinematic .sx-cine-lane{min-height:102px;padding:6px 4px}
 .page-home .sx-crm-cinematic .sx-cine-lane span{font-size:7px}
 .page-home .sx-crm-cinematic .sx-cine-lane strong{font-size:15px}
 .page-home .sx-crm-cinematic .sx-cine-lane small{display:block;font-size:6px}
 .page-home .sx-crm-cinematic .sx-cine-mini-bars{height:30px}
 .page-home .sx-crm-cinematic .sx-cine-chart{height:145px}
 .page-home .sx-crm-cinematic .sx-cine-bottom{grid-template-columns:1fr 1fr}
 .page-home .sx-crm-cinematic .sx-cine-locations{grid-column:1/-1}
 .page-home .sx-crm-cinematic .sx-cine-bottom .sx-cine-widget{min-height:105px}
 .page-home .sx-crm-cinematic .sx-cine-widget header{padding:8px 7px}
 .page-home .sx-crm-cinematic .sx-cine-widget header strong{font-size:9px}
 .page-home .sx-crm-cinematic .sx-cine-bottom p{font-size:7px;padding:6px 7px}
 .page-home .sx-crm-cinematic .sx-cine-bottom p em{display:none}
}
@media(max-width:355px){
 .page-home .sx-crm-cinematic .sx-cine-lane small{display:none}
 .page-home .sx-crm-cinematic .sx-cine-stat strong{font-size:15px}
 .page-home .sx-crm-cinematic .sx-cine-bottom p{font-size:6px}
}
@media(prefers-reduced-motion:reduce){.page-home .sx-crm-cinematic *{animation:none!important;transition:none!important}}
/* Decorative overflow fix: orbit never widens the viewport. */
@media (min-width:1001px){
 .page-home .sx-crm-cinematic .sx-cine-environment{right:0;overflow:hidden}
 .page-home .sx-crm-cinematic .sx-cine-orb{right:0}
}

/* Ground reflections inspired by the approved cinematic CRM composition. */
.page-home .sx-crm-cinematic::after{content:"";position:absolute;z-index:-2;left:50%;bottom:0;transform:translateX(-50%);width:100vw;height:125px;pointer-events:none;background:url('images/sx-crm-stone-reflection.webp') center bottom/100% 125px no-repeat;opacity:.59;-webkit-mask-image:linear-gradient(to bottom,transparent,black 42%,black 88%,transparent);mask-image:linear-gradient(to bottom,transparent,black 42%,black 88%,transparent)}
@media(max-width:640px){.page-home .sx-crm-cinematic::after{height:75px;background-size:auto 75px;opacity:.40}}


/* EXACT SX Agency approved CRM concept: pixel-perfect desktop artwork.
   The approved reference is rendered without recreating or repositioning any of
   its chrome sphere, lighting, copy, panels or statistics.  Functional HTML
   links sit precisely over the two visual CTA controls.  Responsive layouts
   retain the prior accessible HTML presentation under 1240px. */
.page-home #crm-systems.sx-crm-exact { position:relative; width:100%; max-width:none; }
.page-home #crm-systems.sx-crm-exact .sx-exact-desktop { display:none; }
.page-home #crm-systems.sx-crm-exact .sx-exact-screenreader { 
  position:absolute!important; width:1px!important; height:1px!important;
  margin:-1px!important; padding:0!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important;
  border:0!important;
}
@media(min-width:1240px){
  .page-home #crm-systems.sx-crm-exact {
    box-sizing:border-box!important;
    padding:0!important;
    width:100vw!important;
    max-width:none!important;
    margin:0 0 0 calc(50% - 50vw)!important;
    border:0!important;
    overflow:hidden!important;
    isolation:isolate;
    background:#020305;
  }
  .page-home #crm-systems.sx-crm-exact::before,
  .page-home #crm-systems.sx-crm-exact::after { display:none!important; }
  .page-home #crm-systems.sx-crm-exact > .sx-crm-section-heading,
  .page-home #crm-systems.sx-crm-exact > .sx-crm-home-stage { display:none!important; }
  .page-home #crm-systems.sx-crm-exact > .sx-exact-desktop { display:block;position:relative;width:100%;max-width:none;aspect-ratio:1672/941;margin:0!important;padding:0!important; }
  .page-home #crm-systems.sx-crm-exact .sx-exact-art { display:block;width:100%;height:100%;object-fit:fill;margin:0!important;border:0!important;max-width:none; }
  .page-home #crm-systems.sx-crm-exact .sx-exact-hotspot { position:absolute;display:block;z-index:2;border-radius:100px;background:transparent;
    -webkit-tap-highlight-color:transparent; cursor:pointer; transition:box-shadow .25s ease,background .25s ease; }
  .page-home #crm-systems.sx-crm-exact .sx-exact-hotspot-explore { left:7.65%;top:71.02%;width:13.65%;height:6.30%; }
  .page-home #crm-systems.sx-crm-exact .sx-exact-hotspot-discuss { left:21.55%;top:71.02%;width:12.45%;height:6.30%; }
  .page-home #crm-systems.sx-crm-exact .sx-exact-hotspot:hover { background:rgba(240,245,255,.035);box-shadow:inset 0 0 0 1px rgba(240,245,255,.35),0 0 20px rgba(210,230,255,.13); }
  .page-home #crm-systems.sx-crm-exact .sx-exact-hotspot:focus-visible {outline:3px solid #ffffff;outline-offset:3px;box-shadow:0 0 0 5px rgba(0,0,0,.75); }
}
@media(max-width:1239.98px){
  .page-home #crm-systems.sx-crm-exact > .sx-exact-desktop { display:none!important; }
}

/* 2026-10-28: Cross-platform monochrome arrows. Never rely on glyph emoji rendering. */
.sx-vector-arrow{display:inline-block;vertical-align:-.16em;flex:none;stroke:currentColor;fill:none;pointer-events:none;overflow:visible;transform:none;}
.sx-vector-arrow path{stroke:currentColor;fill:none;}
.pcrm-metric small .sx-vector-arrow{width:12px;height:12px;vertical-align:-.16em;margin-right:3px;stroke-width:1.8;}
.pcrm-visual-hint .sx-vector-arrow{width:13px;height:13px;vertical-align:-.18em;}
.solution-arrow .sx-vector-arrow{width:21px;height:21px;vertical-align:middle;}
.founder-view-story .sx-vector-arrow,.founder-email-arrow .sx-vector-arrow{width:14px;height:14px;vertical-align:middle;}
.sx-crm-v2-event-icon .sx-vector-arrow{width:13px;height:13px;vertical-align:middle;}
.footer-bottom .sx-vector-arrow{width:13px;height:13px;vertical-align:-.12em;margin-left:3px;}


/* SX Agency 2026-11-01 — precise footer brand-line alignment.
   Keep the brand left and nav right, while centring the tagline on the
   viewport/content-column midpoint rather than the space between siblings. */
@media (min-width: 1120px) {
  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 22px;
    align-items: center;
  }
  .footer-top > .brand { justify-self: start; }
  .footer-top > p {
    justify-self: center;
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }
  .footer-top > .footer-links {
    justify-self: end;
    justify-content: flex-end;
  }
}
/* On medium widths, prevent the navigation from colliding with the tagline. */
@media (min-width: 641px) and (max-width: 1119px) {
  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 16px;
    align-items: center;
  }
  .footer-top > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .footer-top > .footer-links {
    grid-column: 2; grid-row: 1; justify-self: end;
    justify-content: flex-end; flex-wrap: wrap;
  }
  .footer-top > p {
    grid-column: 1 / -1; grid-row: 2; justify-self: center;
    margin: 0; text-align: center;
  }
}