: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-interfaces.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;}
}