:root{
  --bg:#FFFFFF;--surface:#F1F3F9;--fg:#0B2347;--muted:#5A6274;--line:#D6DBE6;
  --accent:#FF8A00;--accent2:#FF2E00;--radius:14px;--btn-ink:#0B2347;
  --hair:1px solid var(--line);--geo-light:#FFFFFF;
  --grain-op:0.025;--grain-blend:multiply;
  --font-display:"Archivo Expanded","Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --disp-w:800;
  --maxw:1440px;--gut:clamp(20px,5vw,80px);
  --fs-hero:clamp(2.75rem, 0.6rem + 10.4vw, 10rem);
  --fs-big:clamp(2rem, 1rem + 5vw, 5.2rem);
  --fs-h2:clamp(1.8rem, 1rem + 3.6vw, 4rem);
  --e-out:cubic-bezier(.16,1,.3,1);--e-inout:cubic-bezier(.76,0,.24,1);--e-prel:cubic-bezier(.83,0,.17,1);--e-spring:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.sx-smooth{scrollbar-gutter:stable}
.sx-smooth #sx-scroll{position:fixed;top:0;left:0;width:100%;will-change:transform}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:clamp(15px,1vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","cv01";text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--bg)}
.sx-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sx-section{position:relative;isolation:isolate;background:var(--bg);padding:clamp(72px,11vw,160px) 0}
.sx-section + .sx-section{border-top:var(--hair)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--disp-w);line-height:.98;letter-spacing:-.025em}
p{max-width:62ch}
.sx-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.sx-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sx-shead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(36px,5vw,64px);padding-bottom:18px;border-bottom:var(--hair)}
.sx-shead__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* buttons */
.sx-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:calc(var(--radius) + 40px);border:1px solid var(--fg);font-family:var(--font-body);font-weight:600;font-size:15px;position:relative;overflow:hidden;transition:color .4s}
.sx-btn span{position:relative;z-index:1}
.sx-btn::after{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);border-radius:50% 50% 0 0;transition:transform .5s var(--e-out)}
.sx-btn:hover{color:var(--bg)} .sx-btn:hover::after{transform:translateY(0);border-radius:0}
.sx-btn--accent{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.sx-btn--accent::after{background:var(--fg)}
.sx-btn--accent:hover{color:var(--bg)}

/* nav */
.sx-nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gut);color:var(--fg);transition:transform .55s var(--e-out),background .45s var(--e-out),padding .45s var(--e-out),backdrop-filter .45s,border-color .45s}
.sx-nav--invert{mix-blend-mode:difference;color:#fff;border-bottom:1px solid transparent}
.sx-nav.is-hidden{transform:translateY(-105%)}
/* smart glass — appears once scrolled / when the bar reappears */
.sx-nav.is-scrolled{padding:14px var(--gut);mix-blend-mode:normal;color:var(--fg);background:color-mix(in oklab,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid color-mix(in oklab,var(--fg) 10%,transparent)}
.sx-nav.is-open{mix-blend-mode:normal;color:var(--fg);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.sx-nav__brand{font-family:var(--font-display);font-weight:var(--disp-w);font-size:20px;letter-spacing:-.02em;position:relative;z-index:3}
.sx-nav__right{display:flex;align-items:center;gap:18px;position:relative;z-index:3}
.sx-nav__cta{display:inline-block;border:1px solid currentColor;border-radius:40px;padding:9px 18px;font-size:13px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.sx-nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
/* menu toggle */
.sx-nav__toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;color:inherit;padding:6px 2px;-webkit-tap-highlight-color:transparent}
.sx-nav__toggle-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.sx-burger{display:none;position:relative;width:28px;height:12px}
.sx-burger i{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .45s var(--e-out),opacity .25s}
.sx-burger i:nth-child(1){top:0}
.sx-burger i:nth-child(2){top:5px}
.sx-burger i:nth-child(3){top:10px}
.sx-nav.is-open .sx-burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sx-nav.is-open .sx-burger i:nth-child(2){opacity:0;transform:scaleX(.1)}
.sx-nav.is-open .sx-burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* fullscreen overlay */
.sx-menu{position:fixed;inset:0;z-index:1;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,16vh,180px) var(--gut) clamp(40px,7vh,88px);opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .75s var(--e-inout),opacity .35s ease,visibility 0s linear .75s}
.sx-grain .sx-menu::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px;opacity:var(--grain-op,.05);mix-blend-mode:var(--grain-blend,soft-light);pointer-events:none}
.sx-nav.is-open .sx-menu{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);pointer-events:auto;transition:clip-path .8s var(--e-inout),opacity .3s ease}
.sx-menu__list{list-style:none;display:flex;flex-direction:column;gap:clamp(2px,1vh,12px);position:relative;z-index:1}
.sx-menu__item{overflow:hidden}
.sx-menu__list a{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(2.4rem,8vw,6rem);line-height:1.06;letter-spacing:-.03em;color:var(--fg);opacity:0;transform:translateY(46px);transition:opacity .6s var(--e-out),transform .75s var(--e-out),color .3s}
.sx-nav.is-open .sx-menu__list a{opacity:1;transform:none;transition-delay:calc(.14s + var(--i) * .07s)}
.sx-menu__list a:hover,.sx-menu__list a.is-active{color:var(--accent)}
.sx-menu__ln{font-family:var(--font-mono);font-size:clamp(.8rem,1vw,1rem);color:var(--muted);font-weight:400}
.sx-menu__lt{position:relative}
.sx-menu__lt::after{content:"";position:absolute;left:0;bottom:.04em;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.sx-menu__list a:hover .sx-menu__lt::after{transform:scaleX(1);transform-origin:left}
.sx-menu__foot{margin-top:clamp(30px,6vh,64px);display:flex;gap:24px;flex-wrap:wrap;position:relative;z-index:1;opacity:0;transform:translateY(22px);transition:opacity .5s var(--e-out) .36s,transform .6s var(--e-out) .36s}
.sx-nav.is-open .sx-menu__foot{opacity:1;transform:none}
.sx-menu__foot a{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .3s,border-color .3s}
.sx-menu__foot a:hover{color:var(--accent);border-color:var(--accent)}

/* progress */
.sx-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:950;pointer-events:none}

/* hero */
.sx-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 90px;overflow:hidden}
.sx-hero__media{position:absolute;inset:-5% 0 0;z-index:-2;width:100%;height:110%}
.sx-hero__media--grad{background:
  radial-gradient(120% 90% at 80% 10%, color-mix(in oklab,var(--accent) 34%,transparent), transparent 55%),
  radial-gradient(90% 90% at 10% 90%, color-mix(in oklab,var(--accent2) 30%,transparent), transparent 55%),var(--surface)}
.sx-hero.has-media .sx-hero__media{inset:-5% 0 0}
.sx-hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--bg)}
.sx-hero__inner{width:100%;max-width:var(--maxw)}
.sx-hero__head{font-size:var(--fs-hero);line-height:1.0;letter-spacing:-.035em;margin:0}
.sx-hline{display:block;overflow:visible}
.sx-hero__lead{margin-top:34px;font-size:clamp(17px,1.5vw,22px);max-width:46ch;color:var(--muted)}
.sx-hero__meta{display:flex;gap:40px;margin-top:40px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sx-hero__cue{position:absolute;bottom:34px;left:var(--gut);display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sx-hero__cue i{width:26px;height:26px;border:1px solid currentColor;border-radius:50%;position:relative}
.sx-hero__cue i::after{content:"↓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:sx-bob 1.8s ease-in-out infinite}
@keyframes sx-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
/* hero: centred text option */
.sx-hero--center .sx-hero__inner{text-align:center}
.sx-hero--center .sx-hero__lead{margin-left:auto;margin-right:auto}
.sx-hero--center .sx-hero__meta{justify-content:center}
.sx-hero--center .sx-hero__cue{left:0;right:0;margin-inline:auto;width:fit-content}

/* marquee */
.sx-mq{padding:clamp(26px,4vw,52px) 0;overflow:hidden;border-top:var(--hair);border-bottom:var(--hair)}
.sx-mq__track{display:flex;width:max-content;animation:sx-mq var(--mq-dur,32s) linear infinite}
.sx-mq__track[data-dir="ltr"]{animation-direction:reverse}
.sx-mq__track[data-pause]:hover{animation-play-state:paused}
.sx-mq__group{display:flex;align-items:center;flex-shrink:0}
.sx-mq__item,.sx-mq__sep{font-family:var(--font-display);font-weight:var(--disp-w);white-space:nowrap;padding:0 .35em;letter-spacing:-.02em}
.sx-mq__sep{color:var(--accent)}
.sx-mq--md .sx-mq__track{font-size:clamp(1.3rem,3vw,2.2rem)}
.sx-mq--lg .sx-mq__track{font-size:clamp(2rem,6vw,4.4rem)}
.sx-mq--xl .sx-mq__track{font-size:clamp(3rem,10vw,8rem)}
@keyframes sx-mq{to{transform:translateX(-50%)}}

/* about */
.sx-about__statement{font-family:var(--font-display);font-weight:var(--disp-w);font-size:var(--fs-big);line-height:1.08;letter-spacing:-.025em;max-width:none;margin:26px 0 0}
.sx-hl{color:var(--accent)}
.sx-about__link{display:inline-block;margin-top:44px;font-size:15px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:3px}

/* work grid */
.sx-work__grid{display:grid;gap:clamp(28px,4vw,56px)}
.sx-work.cols-2 .sx-work__grid{grid-template-columns:repeat(2,1fr)}
.sx-work.cols-3 .sx-work__grid{grid-template-columns:repeat(3,1fr)}
.sx-work__card{display:block}
.sx-work__media{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.sx-work__media .sx-media{position:absolute;inset:0;height:100%;transition:transform .9s var(--e-out)}
.sx-work__card:hover .sx-media{transform:scale(1.05)}
.sx-work__idx{position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:12px;color:transparent;mix-blend-mode:difference;z-index:3;letter-spacing:.05em}
.sx-work__meta{display:flex;flex-direction:column;gap:5px;margin-top:18px}
.sx-work__t{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.sx-work__t h3{font-size:clamp(1.3rem,2.2vw,1.9rem);transition:color .3s}
.sx-work__card:hover .sx-work__t h3{color:var(--accent)}
.sx-work__yr{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.sx-work__tags{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sx-work__media::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:transparent;transform:scaleX(0);transform-origin:left;z-index:4;transition:transform .5s var(--e-out)}
.sx-work__card:hover .sx-work__media::before{transform:scaleX(1)}

/* horizontal */
.sx-hgal{padding:0;border:none}
.sx-hgal__stage{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
.sx-hgal__top{position:absolute;top:36px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center;z-index:2}
.sx-hgal__count{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.sx-hgal__count b{color:var(--fg)}
.sx-hgal__track{display:flex;gap:clamp(20px,3vw,46px);padding:0 var(--gut);will-change:transform}
.sx-hpanel{flex:0 0 var(--pw,60vw);max-width:680px}
.sx-hpanel a{display:block}
.sx-hpanel__media{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.sx-hpanel__media .sx-media{height:100%}
.sx-hpanel__meta{display:flex;align-items:baseline;gap:16px;margin-top:20px}
.sx-hpanel__n{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.sx-hpanel__meta h3{font-size:clamp(1.4rem,2.4vw,2.1rem)}
.sx-hpanel__meta p{color:var(--muted);font-size:15px}
.sx-hgal__bar{position:absolute;bottom:34px;left:var(--gut);right:var(--gut);height:2px;background:var(--line)}
.sx-hgal__bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
@media(max-width:759px){.sx-hgal__stage{height:auto;padding:64px 0}.sx-hgal__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.sx-hpanel{flex-basis:82vw;scroll-snap-align:center}.sx-hgal__bar{display:none}}

/* services */
.sx-serv__list{border-top:var(--hair)}
.sx-serv__item{display:flex;align-items:flex-start;gap:clamp(16px,3vw,48px);padding:clamp(22px,3vw,40px) 0;border-bottom:var(--hair);position:relative;transition:padding-left .4s var(--e-out)}
.sx-serv__item:hover{padding-left:16px}
.sx-serv__n{font-family:var(--font-mono);font-size:13px;color:var(--muted);padding-top:.5em;flex-shrink:0}
.sx-serv__main{flex:1}
.sx-serv__item h3{font-size:clamp(1.8rem,4.2vw,3.4rem);transition:color .4s;line-height:1}
.sx-serv__item:hover h3{color:var(--accent)}
.sx-serv__body{overflow:hidden;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--e-out),opacity .45s,margin-top .45s}
.sx-serv__body>*{min-height:0}
.sx-serv__item:hover .sx-serv__body{grid-template-rows:1fr;opacity:1;margin-top:14px}
.sx-serv__body p{color:var(--muted);max-width:52ch}
.sx-serv__tags{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--accent);text-transform:uppercase}
.sx-serv__arr{font-size:1.6rem;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s;align-self:center}
.sx-serv__item:hover .sx-serv__arr{opacity:1;transform:none;color:var(--accent)}

/* process */
.sx-proc__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,6vw,90px)}
.sx-proc__aside{position:sticky;top:120px;align-self:start}
.sx-proc__head{font-size:var(--fs-h2)}
.sx-proc__line{margin-top:28px;height:3px;background:var(--line);max-width:200px}
.sx-proc__line i{display:block;height:100%;background:var(--accent);width:40%}
.sx-proc__steps{display:flex;flex-direction:column;gap:2px}
.sx-proc__step{display:flex;gap:22px;padding:clamp(22px,3vw,38px) 0;border-top:var(--hair)}
.sx-proc__step:first-child{border-top:none}
.sx-proc__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);padding-top:.4em}
.sx-proc__step h3{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:10px}
.sx-proc__step p{color:var(--muted)}
@media(max-width:820px){.sx-proc__grid{grid-template-columns:1fr}.sx-proc__aside{position:static}}

/* stats */
.sx-stats__grid{display:grid;gap:clamp(24px,3vw,40px)}
.sx-stats.cols-2 .sx-stats__grid{grid-template-columns:repeat(2,1fr)}
.sx-stats.cols-3 .sx-stats__grid{grid-template-columns:repeat(3,1fr)}
.sx-stats.cols-4 .sx-stats__grid{grid-template-columns:repeat(4,1fr)}
.sx-stat{border-top:2px solid var(--fg);padding-top:18px}
.sx-stat__num{display:block;font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(2.6rem,6vw,5rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sx-stat__num em{font-style:normal}
.sx-stat__label{display:block;margin-top:12px;color:var(--muted);font-size:14px;max-width:22ch}
@media(max-width:680px){.sx-stats.cols-3 .sx-stats__grid,.sx-stats.cols-4 .sx-stats__grid{grid-template-columns:repeat(2,1fr)}}

/* quote */
.sx-quote{text-align:center;overflow:hidden}
.sx-quote__mark{position:absolute;top:-.1em;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:min(40vw,420px);line-height:1;color:var(--accent);opacity:.12;z-index:-1;pointer-events:none}
.sx-quote__text{font-family:var(--font-display);font-weight:var(--disp-w);font-size:var(--fs-big);line-height:1.1;letter-spacing:-.02em;max-width:18ch;margin:0 auto}
.sx-quote__by{margin-top:40px;font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.sx-quote__by b{color:var(--fg)} .sx-quote__by span{color:var(--muted);margin-left:10px}

/* team */
.sx-team__grid{display:grid;gap:clamp(20px,2.5vw,36px)}
.sx-team.cols-2 .sx-team__grid{grid-template-columns:repeat(2,1fr)}
.sx-team.cols-3 .sx-team__grid{grid-template-columns:repeat(3,1fr)}
.sx-team.cols-4 .sx-team__grid{grid-template-columns:repeat(4,1fr)}
.sx-team__card{overflow:hidden}
.sx-team__ph{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.sx-team__ph .sx-media{height:100%;transition:transform .8s var(--e-out)}
.sx-team.is-gray .sx-team__ph img{filter:grayscale(1) contrast(1.02);transition:filter .6s,transform .8s var(--e-out)}
.sx-team__card:hover .sx-media{transform:scale(1.05)}
.sx-team.is-gray .sx-team__card:hover img{filter:none}
.sx-team__card figcaption{margin-top:16px;display:flex;flex-direction:column;gap:3px}
.sx-team__card figcaption b{font-size:1.1rem;font-weight:600}
.sx-team__card figcaption span{color:var(--muted);font-size:13px}
@media(max-width:680px){.sx-team.cols-3 .sx-team__grid,.sx-team.cols-4 .sx-team__grid{grid-template-columns:repeat(2,1fr)}}

/* showcase */
.sx-show{padding:0;border:none;height:var(--h,90vh);overflow:hidden}
.sx-show__frame{position:absolute;inset:0;overflow:hidden}
.sx-show__inner{position:absolute;inset:-12% 0;height:124%}
.sx-show__media{height:100%}
.sx-show__over{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:clamp(28px,5vw,80px);color:#fff;mix-blend-mode:difference}
.sx-show__over span{font-family:var(--font-display);font-weight:var(--disp-w);font-size:var(--fs-h2);line-height:1;max-width:16ch;letter-spacing:-.02em}
.sx-show__cap{position:absolute;top:clamp(24px,4vw,48px);right:clamp(24px,4vw,48px);z-index:2;font-family:var(--font-mono);font-size:12px;color:#fff;mix-blend-mode:difference;letter-spacing:.06em;text-transform:uppercase}

/* project hero (portfolio) */
.sx-wrap-wide{width:100%;max-width:1680px;margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.sx-phero{padding-top:clamp(120px,19vh,230px)}
.sx-phero__head{margin-bottom:clamp(26px,4vw,52px)}
.sx-phero__title{font-size:var(--fs-hero);line-height:1.0;letter-spacing:-.035em;max-width:16ch}
.sx-phero__media{position:relative;width:100%;height:clamp(52vh,68vh,88vh);overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.sx-phero__inner{position:absolute;inset:-10% 0;height:120%}
.sx-phero__img{height:100%}
.sx-phero__body{margin-top:clamp(36px,5vw,72px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.sx-phero__desc{font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1.22;letter-spacing:-.015em;max-width:24ch}
.sx-phero__meta{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(24px,3vw,44px)}
.sx-phero__m dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sx-phero__m dd{font-size:15px}
.sx-phero__live{grid-column:1/-1;display:inline-block;width:fit-content;font-weight:600;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:6px}
@media(max-width:820px){.sx-phero__body{grid-template-columns:1fr;gap:34px}.sx-phero__meta{max-width:440px}}

/* ways to partner (tiers) */
.sx-partner__head{font-family:var(--font-display);font-weight:var(--disp-w);font-size:var(--fs-big);line-height:1.0;letter-spacing:-.03em;margin:16px 0 clamp(40px,6vw,84px);max-width:16ch}
.sx-partner__list{border-top:var(--hair)}
.sx-tier{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,56px);padding:clamp(32px,4.5vw,64px) 0;border-bottom:var(--hair);align-items:start}
.sx-tier__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);padding-top:.5em}
.sx-tier__title{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;margin-bottom:16px;letter-spacing:-.02em}
.sx-tier__desc{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.4;color:var(--fg);max-width:48ch;margin-bottom:clamp(22px,2.6vw,38px)}
.sx-tier__rows{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(24px,4vw,64px)}
.sx-tier__row dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.sx-tier__row dd{font-size:15px;line-height:1.5;color:var(--fg);max-width:42ch}
@media(max-width:680px){.sx-tier{grid-template-columns:1fr;gap:8px}.sx-tier__rows{grid-template-columns:1fr}}

/* project gallery: 1 large row · 2 medium row, repeating */
.sx-gal__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.9vw,42px)}
.sx-gal__item{margin:0;position:relative;min-width:0;border-radius:calc(var(--radius) * 1.4);background:var(--surface)}
.sx-gal__item--large,.sx-gal__item--solo{grid-column:1 / -1}
.sx-gal__btn{display:block;width:100%;height:100%;padding:0;border:0;margin:0;background:none;color:inherit;font:inherit;border-radius:inherit;cursor:zoom-in}
.sx-gal__btn:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.sx-gal__media{display:block;position:relative;width:100%;height:100%;aspect-ratio:var(--ar,16/9);overflow:hidden;border-radius:inherit;isolation:isolate}
.sx-gal__media .sx-media{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s var(--e-out)}
.sx-gal__media.is-natural{aspect-ratio:auto}
.sx-gal__media.is-natural .sx-media{position:relative;inset:auto}
.sx-gal__media.is-natural .sx-media img{display:block;height:100%;aspect-ratio:auto var(--ar,16/9)}
@media (hover:hover){.sx-gal__btn:hover .sx-media{transform:scale(1.03)}}
.sx-gal__btn:focus-visible .sx-media{transform:scale(1.03)}
@media(max-width:767px){.sx-gal__grid{grid-template-columns:1fr;gap:24px}.sx-gal__item--large,.sx-gal__item--solo{grid-column:auto}}

/* gallery viewer — --lb-top is the room kept above + below the stage, --lb-cap the measured caption (set by the runtime) */
.sx-lb{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;opacity:0;visibility:hidden;touch-action:pan-y pinch-zoom;--lb-top:160px;transition:opacity .4s var(--e-out),visibility 0s linear .4s}
.sx-lb[hidden]{display:none}
.sx-lb.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--e-out)}
.sx-lb__overlay{position:absolute;inset:0;background:rgba(100,100,102,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out}
.sx-lb[data-bg="dark"] .sx-lb__overlay{background:rgba(12,12,14,.9)}
.sx-lb[data-bg="theme"] .sx-lb__overlay{background:color-mix(in srgb,var(--bg) 93%,transparent)}
.sx-lb__stage{position:relative;width:min(1100px,90vw)}
.sx-lb__fig{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.97);transition:transform .45s var(--e-out)}
.sx-lb.is-open .sx-lb__fig{transform:none}
.sx-lb__frame{position:relative;width:100%}
.sx-lb__pic{width:100%}
.sx-lb__pic > *{transition:opacity .25s}
.sx-lb__pic.is-wait > *{opacity:.35}
.sx-lb__pic img{display:block;margin:0 auto;max-width:100%;max-height:calc(100vh - var(--lb-top) - var(--lb-cap,38px));max-height:calc(100dvh - var(--lb-top) - var(--lb-cap,38px));width:auto;height:auto;border-radius:calc(var(--radius) * 1.4)}
.sx-lb__pic img.is-in{animation:sx-lb-in .3s var(--e-out)}
@keyframes sx-lb-in{from{opacity:0}}
.sx-lb__pic .sx-lb__ph{display:block;position:relative;margin:0 auto;width:min(100%, calc((100vh - var(--lb-top) - var(--lb-cap,38px)) * 1.6));width:min(100%, calc((100dvh - var(--lb-top) - var(--lb-cap,38px)) * 1.6));height:auto;aspect-ratio:16/10;border-radius:calc(var(--radius) * 1.4)}
.sx-lb__cap{display:flex;gap:4px 16px;align-items:baseline;justify-content:center;flex-wrap:wrap;color:#fff;text-align:center;max-width:100%}
.sx-lb__cap[hidden]{display:none}
.sx-lb__count{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}
.sx-lb__text{font-size:15px;line-height:1.45;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sx-lb__arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:60px;height:60px;border:0;padding:0;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s}
.sx-lb__arrow:hover{background:rgba(255,255,255,.34)}
.sx-lb__arrow--prev{left:-84px}.sx-lb__arrow--next{right:-84px}
.sx-lb.is-single .sx-lb__arrow,.sx-lb.is-single .sx-lb__count{display:none}
.sx-lb__close{position:absolute;z-index:2;top:-68px;right:0;width:48px;height:48px;border:0;padding:0;border-radius:999px;display:grid;place-items:center;background:#fff;color:#111;cursor:pointer;transition:transform .35s var(--e-out)}
.sx-lb__close:hover{transform:rotate(90deg)}
.sx-lb__arrow svg,.sx-lb__close svg{width:22px;height:22px}
.sx-lb[data-bg="theme"] .sx-lb__cap{color:var(--fg)}
.sx-lb[data-bg="theme"] .sx-lb__arrow{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.sx-lb[data-bg="theme"] .sx-lb__arrow:hover{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.sx-lb[data-bg="theme"] .sx-lb__close{background:var(--fg);color:var(--bg)}
/* focus ring that does not depend on the accent: white with a dark inner band (theme colours on the theme backdrop) */
.sx-lb button:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px rgba(0,0,0,.6)}
.sx-lb[data-bg="theme"] button:focus-visible{outline-color:var(--fg);box-shadow:0 0 0 3px var(--bg)}
.sx-lb__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px}
@media(max-width:1320px){.sx-lb__arrow--prev{left:12px}.sx-lb__arrow--next{right:12px}
 .sx-lb .sx-lb__arrow,.sx-lb[data-bg="theme"] .sx-lb__arrow{background:rgba(16,16,18,.55);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
 .sx-lb .sx-lb__arrow:hover,.sx-lb[data-bg="theme"] .sx-lb__arrow:hover{background:rgba(16,16,18,.72)}}
@media(max-width:767px){.sx-lb{--lb-top:140px}.sx-lb__stage{width:94vw}.sx-lb__arrow{width:46px;height:46px}.sx-lb__close{position:fixed;top:14px;right:14px}.sx-lb__text{-webkit-line-clamp:6}}
@media(max-height:560px){.sx-lb{--lb-top:64px}.sx-lb__fig{gap:8px}.sx-lb__close{position:fixed;top:10px;right:10px;width:42px;height:42px}.sx-lb__text{-webkit-line-clamp:2}}
/* while the viewer is open the custom cursor steps aside for the native one (it blends into the grey backdrop) */
html.sx-lb-open .sx-cursor{opacity:0}
html.sx-has-cursor.sx-lb-open .sx-lb,html.sx-has-cursor.sx-lb-open .sx-lb *{cursor:default!important}
html.sx-has-cursor.sx-lb-open .sx-lb__overlay{cursor:zoom-out!important}
html.sx-has-cursor.sx-lb-open .sx-lb button,html.sx-has-cursor.sx-lb-open .sx-lb button *{cursor:pointer!important}
/* page scroll lock (menu, viewer, preloader): the scrollbar's width is padded back so the page doesn't shift */
html.sx-locked body{overflow:hidden;padding-right:var(--sx-sbw,0px)}
html.sx-locked .sx-nav:not(.is-open),html.sx-locked .sx-progress{width:calc(100% - var(--sx-sbw,0px))}

/* cta */
.sx-cta{text-align:center;overflow:hidden}
.sx-cta__head{font-family:var(--font-display);font-weight:var(--disp-w);font-size:var(--fs-big);line-height:1.02;letter-spacing:-.03em;max-width:16ch;margin:0 auto}
.sx-cta__row{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(36px,5vw,60px)}
.sx-cta__sec{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px}

/* footer */
.sx-footer{padding:clamp(60px,8vw,110px) 0 36px;border-top:var(--hair)}
.sx-footer__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:clamp(40px,6vw,80px)}
.sx-footer__mail{font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(1.6rem,4vw,3rem);letter-spacing:-.02em;border-bottom:2px solid var(--line);padding-bottom:6px;transition:border-color .3s}
.sx-footer__mail:hover{border-color:var(--accent)}
.sx-footer__contact p{color:var(--muted);margin-top:16px;font-size:14px}
.sx-footer__social{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
.sx-footer__social a{font-size:15px;position:relative}
.sx-footer__social a::after{content:"↗";margin-left:6px;opacity:.5}
.sx-footer__mark{line-height:.8;margin:10px 0 40px;overflow:hidden}
.sx-footer__mark:not(.sx-footer__mark--logo) > span{font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(4rem,24vw,22rem);letter-spacing:-.04em;display:block;white-space:nowrap}
.sx-footer__brand{display:inline-flex;align-items:center;margin-bottom:clamp(34px,5vw,60px);font-family:var(--font-display);font-weight:var(--disp-w);font-size:22px;letter-spacing:-.02em;color:var(--fg)}
.sx-footer__mark--logo .sx-logo--mono{font-size:clamp(2.4rem,9.5vw,9rem);gap:.34em}
.sx-footer__mark--logo .sx-logo--mono .sx-logo__word{letter-spacing:-.02em;white-space:nowrap}
.sx-footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:var(--hair);font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sx-footer__top-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
@media(max-width:620px){.sx-footer__social{align-items:flex-start;text-align:left}}

/* media / duotone */
.sx-media{position:relative;overflow:hidden;width:100%;height:100%;border-radius:inherit;background:
  linear-gradient(135deg, color-mix(in oklab,var(--accent) 65%,var(--surface)), color-mix(in oklab,var(--accent2) 55%,var(--surface)))}
.sx-media::after{content:attr(data-mono);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(2rem,6vw,4.5rem);color:color-mix(in oklab,var(--bg) 42%,transparent);letter-spacing:-.04em;z-index:0}
.sx-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--e-out)}
.sx-media img.is-loaded{opacity:1}
.sx-media.is-empty img{display:none}

/* button style: lift & outline (filled pill → outline in accent-2, rises over a hard shadow) */
.sx-btn-lift .sx-btn{position:relative;top:0;border-width:3px;border-radius:14px;padding:15px 34px;transition:top .4s var(--e-out),box-shadow .4s var(--e-out),background-color .4s,color .4s,border-color .4s}
.sx-btn-lift .sx-btn::after{display:none}
.sx-btn-lift .sx-btn:hover{top:-10px;background-color:transparent;border-color:var(--accent2);color:var(--accent2);box-shadow:0 8px 0 color-mix(in oklab,var(--fg) 22%,transparent)}
.sx-btn-lift .sx-nav__cta{position:relative;top:0;border-width:3px;border-radius:12px;background:var(--accent);border-color:var(--accent);color:var(--btn-ink);transition:top .35s var(--e-out),box-shadow .35s var(--e-out),background-color .35s,color .35s,border-color .35s}
.sx-btn-lift .sx-nav__cta:hover{top:-4px;background:transparent;border-color:var(--accent2);color:var(--accent2);box-shadow:0 4px 0 color-mix(in oklab,var(--fg) 22%,transparent)}
.sx-btn-lift .sx-about__link,.sx-btn-lift .sx-phero__live,.sx-btn-lift .sx-cta__sec,.sx-btn-lift .sx-menu__foot a{position:relative;top:0;transition:top .4s var(--e-out),opacity .4s,color .4s,border-color .4s}
.sx-btn-lift .sx-about__link:hover,.sx-btn-lift .sx-phero__live:hover,.sx-btn-lift .sx-cta__sec:hover,.sx-btn-lift .sx-menu__foot a:hover{top:-5px;opacity:.55}

/* logo: wordmark / capsule monogram / image */
.sx-logo{display:inline-flex;align-items:center;gap:.48em;line-height:1}
.sx-mark{width:1.55em;height:1.55em;display:block;overflow:visible;flex:0 0 auto}
.sx-mark path{fill:none;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.sx-mark__b{stroke:var(--accent2)}
.sx-mark__a{stroke:var(--accent)}
.sx-logo--mono .sx-logo__word{font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.sx-logo--only .sx-mark{width:1.9em;height:1.9em}
.sx-logo__img{display:block;height:30px;width:auto;max-width:200px;object-fit:contain}
.sx-logo--svg{display:inline-flex;align-items:center;color:inherit;line-height:0;letter-spacing:normal;word-spacing:normal;text-transform:none;font-style:normal;font-size:16px}
.sx-logo--svg svg{display:block;height:var(--logo-h,30px);width:calc(var(--logo-h,30px) * var(--logo-r,4));max-width:min(260px,52vw);overflow:visible}
.sx-footer__mark--logo{line-height:0;margin:28px 0 46px;overflow:visible}
.sx-footer__mark--logo .sx-logo--svg{--logo-h:clamp(4.5rem,18vw,16rem)}
.sx-footer__mark--logo .sx-logo--svg svg{max-width:100%}
.sx-footer__mark--logo .sx-logo__img{height:clamp(4.5rem,18vw,16rem);max-width:100%}

/* FAQ accordion: chevron badge on the left, tinted row hover, tinted answer panel */
.sx-faq__grid{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(30px,6vw,96px);align-items:start}
.sx-faq__aside{position:sticky;top:120px}
.sx-faq__head{font-size:var(--fs-h2);margin:14px 0 18px}
.sx-faq__intro{color:var(--muted);max-width:34ch}
.sx-faq__list{border-top:1px solid color-mix(in oklab,var(--fg) 28%,transparent)}
.sx-faq__item{border-bottom:1px solid color-mix(in oklab,var(--fg) 28%,transparent);padding:6px 0}
.sx-faq__q{margin:0;font:inherit;letter-spacing:0;line-height:inherit}
.sx-faq__btn{width:100%;display:flex;align-items:center;gap:18px;text-align:left;padding:16px 14px;border-radius:calc(var(--radius) * .7);font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.3;color:var(--fg);transition:background-color .3s}
.sx-faq__btn:hover,.sx-faq__btn:focus-visible{background:var(--surface)}
.sx-faq__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sx-faq__icon{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--accent) 16%,transparent);transition:transform .5s var(--e-out),background-color .3s}
.sx-faq__icon::before{content:"";width:8px;height:8px;border-right:2.5px solid var(--accent2);border-bottom:2.5px solid var(--accent2);transform:translateY(-2px) rotate(45deg);transition:border-color .3s}
.sx-faq__item.is-open .sx-faq__icon{transform:rotate(180deg);background:var(--accent)}
.sx-faq__item.is-open .sx-faq__icon::before{border-color:var(--btn-ink)}
.sx-faq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--e-out)}
.sx-faq--js .sx-faq__item:not(.is-open) .sx-faq__a{grid-template-rows:0fr}
.sx-faq__ai{overflow:hidden;min-height:0}
.sx-faq__ai p{margin:6px 0 12px;padding:16px 18px 16px 62px;background:var(--surface);border-radius:calc(var(--radius) * .7);color:var(--fg);max-width:none;font-size:clamp(15px,1.1vw,17px);line-height:1.7;transition:opacity .45s .05s,transform .55s var(--e-out)}
.sx-faq--js .sx-faq__item:not(.is-open) .sx-faq__ai p{opacity:0;transform:translateY(-8px)}
@media(max-width:820px){.sx-faq__grid{grid-template-columns:1fr}.sx-faq__aside{position:static}.sx-faq__ai p{padding-left:18px}}

/* Lottie cards: looping icon + bold title + copy on a soft rounded panel */
.sx-lcards__panel{background:var(--surface);border-radius:calc(var(--radius) * 1.7 + 6px);padding:clamp(44px,6.5vw,96px) clamp(18px,4vw,64px);text-align:center;position:relative;overflow:hidden}
.sx-lcards__panel.is-plain{background:transparent;padding-left:0;padding-right:0}
.sx-lcards__title{font-size:var(--fs-h2);max-width:18ch;margin:0 auto}
.sx-lcards__sub{color:var(--muted);margin:16px auto 0;max-width:44ch;font-size:clamp(1rem,1.4vw,1.25rem)}
.sx-lcards__grid{display:grid;gap:clamp(22px,3.4vw,46px) clamp(10px,2vw,26px);margin-top:clamp(36px,5vw,66px)}
.sx-lcards.cols-3 .sx-lcards__grid{grid-template-columns:repeat(3,1fr)}
.sx-lcards.cols-2 .sx-lcards__grid{grid-template-columns:repeat(2,1fr)}
.sx-lcard{padding:clamp(14px,2vw,26px) clamp(10px,1.6vw,22px);border-radius:var(--radius);transition:background-color .4s,transform .55s var(--e-out)}
.sx-lcard:hover{background:color-mix(in oklab,var(--bg) 60%,transparent);transform:translateY(-4px)}
.sx-lcard__anim{position:relative;width:78px;height:78px;margin:0 auto 18px}
.sx-lcard__anim>svg{width:100%;height:100%;display:block;overflow:visible}
.sx-lcard__anim .sx-lottie{position:absolute;inset:0}
.sx-lcard__anim .sx-lottie svg{width:100%!important;height:100%!important}
.sx-lcard__anim.has-lottie>.sx-li{opacity:0}
.sx-lcard__t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.08rem,1.6vw,1.38rem);line-height:1.25;letter-spacing:-.01em;margin:0 0 8px}
.sx-lcard__p{color:var(--muted);font-size:15px;line-height:1.55;margin:0 auto;max-width:30ch}
@media(max-width:900px){.sx-lcards.cols-3 .sx-lcards__grid,.sx-lcards.cols-2 .sx-lcards__grid{grid-template-columns:1fr}}

/* WebGPU canvas hosts (CSS gradient underneath is the fallback) */
.sx-gpu-host{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sx-gpu-host--soft{background:radial-gradient(70% 90% at 50% 100%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),radial-gradient(60% 70% at 85% 10%,color-mix(in oklab,var(--accent2) 16%,transparent),transparent 70%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.sx-gpu-host--soft canvas[data-gpu].gpu-on{opacity:.7}
canvas[data-gpu]{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--e-out)}
canvas[data-gpu].gpu-on{opacity:1}
canvas[data-gpu].gpu-off{display:none}
/* Animated CSS fallback under every WebGPU canvas, so browsers/profiles without WebGPU still get motion.
   Hidden (and its animation stopped) as soon as the GPU canvas is live. */
.sx-gpu-host::before,.sx-gpu-host::after{content:"";position:absolute;z-index:0;width:72%;aspect-ratio:1;border-radius:50%;pointer-events:none}
.sx-gpu-host::before{left:-12%;top:-26%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 42%,transparent),transparent);animation:sx-gpu-fb1 21s ease-in-out infinite alternate}
.sx-gpu-host::after{right:-16%;bottom:-30%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent2) 36%,transparent),transparent);animation:sx-gpu-fb2 27s ease-in-out infinite alternate}
.sx-gpu-host canvas[data-gpu]{z-index:1}
.sx-gpu-host:has(> canvas.gpu-on)::before,.sx-gpu-host:has(> canvas.gpu-on)::after{animation:none;opacity:0}
@keyframes sx-gpu-fb1{to{transform:translate(34%,22%) scale(1.18)}}
@keyframes sx-gpu-fb2{to{transform:translate(-30%,-18%) scale(.88)}}
@media (prefers-reduced-motion: reduce){.sx-gpu-host::before,.sx-gpu-host::after{animation:none!important}}

/* hero: geometric motion (element animation — transform/opacity only, runs on the compositor) */
.sx-geo{container-type:size;overflow:hidden;background:var(--surface)}
.sx-geo::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px;opacity:.2;mix-blend-mode:var(--grain-blend,multiply);pointer-events:none}
.sx-geo__el{position:absolute;display:block;left:var(--x);top:var(--y);width:calc(var(--w) * 1cqmax);aspect-ratio:1;pointer-events:none}
@container (orientation: portrait){.sx-geo__el{left:var(--px,var(--x));top:var(--py,var(--y))}}
.sx-geo svg{display:block;overflow:visible}
.sx-geo__wavecircle,.sx-geo__hatch{border-radius:50%;overflow:hidden}
.sx-geo__wavecircle svg{position:absolute;top:0;left:-60.34%;width:220.69%;height:100%;fill:none;stroke:var(--geo-light);stroke-width:5;stroke-linecap:round;animation:sx-geo-flowl 6s linear infinite}
.sx-geo__el.is-c{margin-left:calc(var(--w) * -.5cqmax);margin-top:calc(var(--h,var(--w)) * -.5cqmax)}
.sx-geo__hatch svg{position:absolute;left:-18.87%;top:-18.87%;width:137.74%;height:137.74%;stroke:color-mix(in oklab,var(--accent) 55%,var(--accent2));stroke-width:3;stroke-linecap:round;animation:sx-geo-hatch 6s linear infinite}
.sx-geo__waves{aspect-ratio:auto;height:calc(var(--h) * 1cqmax);overflow:hidden}
.sx-geo__waves svg{position:absolute;top:0;left:-42.8%;width:185.6%;height:100%;fill:none;stroke-width:3.5;stroke-linecap:round;animation:sx-geo-flowr 6s linear infinite}
.sx-geo__waves .a{stroke:var(--accent)}.sx-geo__waves .b{stroke:var(--accent2)}
.sx-geo__plus svg{width:100%;height:100%}
.sx-geo__plus--a{color:var(--accent);animation:sx-geo-wobble 6s ease-in-out infinite}
.sx-geo__plus--b{color:var(--accent2);animation:sx-geo-turn 6s cubic-bezier(.65,0,.35,1) infinite}
.sx-geo__plus--o{color:var(--geo-light);animation:sx-geo-spring 6s ease-in-out infinite}
/* ring + dot share one measured path; the dot trails by 0.67s */
.sx-geo__drift{border-radius:50%;animation:sx-geo-drift 6s linear infinite}
.sx-geo__ring{border:calc(.18 * 1cqmax) solid var(--accent2)}
.sx-geo__dot{background:var(--accent);animation-delay:-5.33s}
/* capsules slide along a -22° axis at constant speed, crossing mid-loop */
.sx-geo__cap{aspect-ratio:auto;height:calc(var(--h) * 1cqmax);border-radius:999px;rotate:-22deg}
.sx-geo__cap--w{background:var(--geo-light);animation:sx-geo-capw 6s linear infinite}
.sx-geo__cap--r{background:linear-gradient(90deg,color-mix(in oklab,var(--accent2) 70%,transparent),var(--accent2) 22%);animation:sx-geo-capr 6s linear infinite}
.sx-geo__cap--g{background:color-mix(in oklab,var(--accent2) 42%,transparent);animation:sx-geo-capr 6s linear infinite;animation-delay:-5.52s}
.sx-geo.is-paused *{animation-play-state:paused!important}
@keyframes sx-geo-flowl{to{transform:translateX(-13.67%)}}
@keyframes sx-geo-flowr{to{transform:translateX(11.53%)}}
@keyframes sx-geo-hatch{to{transform:translate(3.07%,-3.07%)}}
@keyframes sx-geo-wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes sx-geo-turn{0%,50%{transform:rotate(0)}100%{transform:rotate(90deg)}}
@keyframes sx-geo-spring{0%,100%{transform:rotate(0)}45%{transform:rotate(45deg)}70%{transform:rotate(15deg)}}
@keyframes sx-geo-drift{0%{transform:translate(-2.71cqmax,0)}5.83%{transform:translate(0,0)}10.83%{transform:translate(2.45cqmax,.21cqmax)}16.33%{transform:translate(5.16cqmax,.21cqmax)}22%{transform:translate(7.81cqmax,-.1cqmax)}27.5%{transform:translate(10.52cqmax,-.89cqmax)}33.17%{transform:translate(13.02cqmax,-1.93cqmax)}38.67%{transform:translate(15.42cqmax,-3.39cqmax)}44.17%{transform:translate(17.55cqmax,-5cqmax)}49.83%{transform:translate(19.38cqmax,-6.98cqmax)}55.33%{transform:translate(20.99cqmax,-9.22cqmax)}60.83%{transform:translate(22.24cqmax,-11.67cqmax)}66.5%{transform:translate(23.13cqmax,-14.11cqmax)}72%{transform:translate(23.8cqmax,-16.72cqmax)}77.67%{transform:translate(24.01cqmax,-19.48cqmax)}83.33%,100%{transform:translate(24.01cqmax,-22.08cqmax)}}
@keyframes sx-geo-capw{0%,18.33%{translate:0 0}91.67%,100%{translate:-61.2cqmax 24.95cqmax}}
@keyframes sx-geo-capr{0%,25%{translate:0 0;opacity:1}58.33%{opacity:1}70%{opacity:0}71.67%,100%{translate:26.25cqmax -10.57cqmax;opacity:0}}
@media (prefers-reduced-motion: reduce){
 .sx-geo *{animation-duration:6s!important;animation-iteration-count:infinite!important;animation-delay:-3s!important;animation-play-state:paused!important}
 .sx-geo .sx-geo__dot{animation-delay:-2.33s!important}
 .sx-geo .sx-geo__cap--g{animation-delay:-2.52s!important}
}

/* animated line icons */
/* sx-li: looping animated line icons (inline SVG + CSS, no dependencies).
   Colours: the SVGs paint with var(--accent) and var(--accent2); set both on any ancestor.
   Playback: paused inside any [data-reveal] container until an ancestor gets .is-visible;
   runs immediately when the svg sits outside every [data-reveal]; .is-playing on the svg always runs it.
   Reduced motion: every animation is removed and each icon rests fully drawn.
   All choreography lives inside the keyframes (no animation-delay is used), so a single
   negative animation-delay on every .sx-li * scrubs an icon to an exact frame. */
.sx-li{display:block;width:100%;height:100%;overflow:visible}
.sx-li *{transform-box:fill-box;transform-origin:center;animation-duration:3s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;animation-play-state:paused}
.is-visible .sx-li *,.sx-li.is-playing *{animation-play-state:running}
.sx-li:not([data-reveal] *) *{animation-play-state:running}
.sx-li .sx-li__draw{stroke-dasharray:100 150}

/* infinity: a comet dash runs the loop over a soft track */
.sx-li--infinity *{animation-duration:3.2s}
.sx-li--infinity .sx-li__run{animation-name:sx-li-inf-run;animation-timing-function:linear}
@keyframes sx-li-inf-run{0%{stroke-dasharray:34 66;stroke-dashoffset:0}100%{stroke-dasharray:34 66;stroke-dashoffset:-100}}

/* clock: minute hand sweeps a full turn and springs to rest, hour hand advances in step, face ticks */
.sx-li--clock *{animation-duration:3s}
.sx-li--clock .sx-li__hand{transform-box:view-box;transform-origin:32px 32px}
.sx-li--clock .sx-li__min{animation-name:sx-li-clock-min}
.sx-li--clock .sx-li__hr{animation-name:sx-li-clock-hr;animation-duration:36s}
.sx-li--clock .sx-li__face{animation-name:sx-li-clock-face}
@keyframes sx-li-clock-min{0%,24%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}76%{transform:rotate(374deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}86%{transform:rotate(357deg)}94%,100%{transform:rotate(360deg)}}
@keyframes sx-li-clock-hr{0%{transform:rotate(0deg)}2%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}6.333%{transform:rotate(30deg)}10.333%{transform:rotate(30deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}14.667%{transform:rotate(60deg)}18.667%{transform:rotate(60deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}23%{transform:rotate(90deg)}27%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}31.333%{transform:rotate(120deg)}35.333%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}39.667%{transform:rotate(150deg)}43.667%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}48%{transform:rotate(180deg)}52%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}56.333%{transform:rotate(210deg)}60.333%{transform:rotate(210deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}64.667%{transform:rotate(240deg)}68.667%{transform:rotate(240deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}73%{transform:rotate(270deg)}77%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}81.333%{transform:rotate(300deg)}85.333%{transform:rotate(300deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}89.667%{transform:rotate(330deg)}93.667%{transform:rotate(330deg);animation-timing-function:cubic-bezier(.65,0,.3,1)}98%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes sx-li-clock-face{0%,72%{transform:scale(1)}80%{transform:scale(1.045)}90%,100%{transform:scale(1)}}

/* heart: lub-dub double beat with a ripple, then rest */
.sx-li--heart *{animation-duration:2.8s}
.sx-li--heart .sx-li__beat{animation-name:sx-li-heart-beat}
.sx-li--heart .sx-li__ripple{opacity:0;animation-name:sx-li-heart-ripple;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes sx-li-heart-beat{0%{transform:scale(1)}4%{transform:scale(.95)}12%{transform:scale(1.14)}20%{transform:scale(.97)}27%{transform:scale(1.1)}38%,100%{transform:scale(1)}}
@keyframes sx-li-heart-ripple{0%,11%{opacity:0;transform:scale(1.12)}12%{opacity:.5;transform:scale(1.14)}46%,100%{opacity:0;transform:scale(1.25)}}

/* spark: main star winds up and turns a quarter, mini star twinkles, dot pops */
.sx-li--spark *{animation-duration:2.8s}
.sx-li--spark .sx-li__star{animation-name:sx-li-spark-star}
.sx-li--spark .sx-li__mini{animation-name:sx-li-spark-mini}
.sx-li--spark .sx-li__dot{animation-name:sx-li-spark-dot}
@keyframes sx-li-spark-star{0%{transform:rotate(0deg) scale(1)}10%{transform:rotate(-10deg) scale(.9);animation-timing-function:cubic-bezier(.5,0,.2,1)}36%{transform:rotate(97deg) scale(1.06)}48%{transform:rotate(89deg) scale(.98)}58%,100%{transform:rotate(90deg) scale(1)}}
@keyframes sx-li-spark-mini{0%,28%{transform:rotate(0deg) scale(1)}38%{transform:rotate(45deg) scale(.4)}50%{transform:rotate(90deg) scale(1.18)}60%,100%{transform:rotate(90deg) scale(1)}}
@keyframes sx-li-spark-dot{0%,42%{transform:scale(1)}50%{transform:scale(.3)}60%{transform:scale(1.35)}70%,100%{transform:scale(1)}}

/* check: ring draws, tick draws, badge pops, holds, then both trim away */
.sx-li--check *{animation-duration:3s}
.sx-li--check .sx-li__ring{animation-name:sx-li-check-ring}
.sx-li--check .sx-li__tick{animation-name:sx-li-check-tick}
.sx-li--check .sx-li__pop{animation-name:sx-li-check-pop}
@keyframes sx-li-check-ring{0%{stroke-dashoffset:105}30%,80%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.75,.3)}94%,100%{stroke-dashoffset:-105}}
@keyframes sx-li-check-tick{0%,24%{stroke-dashoffset:105;animation-timing-function:cubic-bezier(.33,1,.68,1)}44%,78%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.75,.3)}90%,100%{stroke-dashoffset:-105}}
@keyframes sx-li-check-pop{0%,40%{transform:scale(1)}48%{transform:scale(1.07)}56%{transform:scale(.985)}64%,100%{transform:scale(1)}}

/* coin: crouch, hop, two half-turns in the air, squash on landing, glint */
.sx-li--coin *{animation-duration:3s}
.sx-li--coin .sx-li__hop{transform-origin:50% 100%;animation-name:sx-li-coin-hop}
.sx-li--coin .sx-li__face{animation-name:sx-li-coin-face}
.sx-li--coin .sx-li__sym{animation-name:sx-li-coin-sym,sx-li-coin-symfade}
.sx-li--coin .sx-li__shadow{animation-name:sx-li-coin-shadow}
.sx-li--coin .sx-li__glint{animation-name:sx-li-coin-glint}
@keyframes sx-li-coin-hop{0%,6%{transform:translateY(0) scale(1)}12%{transform:translateY(0) scale(1.06,.92);animation-timing-function:cubic-bezier(.33,1,.68,1)}19%{transform:translateY(-4px) scale(.97,1.04)}27%{transform:translateY(-6px) scale(1);animation-timing-function:cubic-bezier(.32,0,.67,0)}40%{transform:translateY(0) scale(1)}44%{transform:translateY(0) scale(1.06,.93)}52%{transform:translateY(0) scale(.99,1.02)}58%,100%{transform:translateY(0) scale(1)}}
@keyframes sx-li-coin-face{0%,14%{rx:18px;animation-timing-function:cubic-bezier(.12,0,.39,0)}21%{rx:3.5px;animation-timing-function:cubic-bezier(.61,1,.88,1)}28%{rx:18px;animation-timing-function:cubic-bezier(.12,0,.39,0)}35%{rx:3.5px;animation-timing-function:cubic-bezier(.61,1,.88,1)}42%,100%{rx:18px}}
@keyframes sx-li-coin-sym{0%,14%{transform:scaleX(1);animation-timing-function:cubic-bezier(.12,0,.39,0)}21%{transform:scaleX(.19);animation-timing-function:cubic-bezier(.61,1,.88,1)}28%{transform:scaleX(1);animation-timing-function:cubic-bezier(.12,0,.39,0)}35%{transform:scaleX(.19);animation-timing-function:cubic-bezier(.61,1,.88,1)}42%,100%{transform:scaleX(1)}}
@keyframes sx-li-coin-symfade{0%,16%{opacity:1}21%{opacity:.45}26%,30%{opacity:1}35%{opacity:.45}40%,100%{opacity:1}}
@keyframes sx-li-coin-shadow{0%,12%{transform:scaleX(1);opacity:1}27%{transform:scaleX(.6);opacity:.5}40%{transform:scaleX(1);opacity:1}44%{transform:scaleX(1.08)}52%,100%{transform:scaleX(1);opacity:1}}
@keyframes sx-li-coin-glint{0%,46%{transform:scale(0) rotate(0deg);opacity:0}54%{transform:scale(1.15) rotate(45deg);opacity:1}62%{transform:scale(1) rotate(90deg);opacity:1}74%,100%{transform:scale(0) rotate(135deg);opacity:0}}

/* chat: three dots type in a wave, twice per loop */
.sx-li--chat *{animation-duration:2.4s}
.sx-li--chat .sx-li__d1{animation-name:sx-li-chat-d1}
.sx-li--chat .sx-li__d2{animation-name:sx-li-chat-d2}
.sx-li--chat .sx-li__d3{animation-name:sx-li-chat-d3}
@keyframes sx-li-chat-d1{0%,20%,50%,70%,100%{transform:translateY(0);opacity:.45}10%,60%{transform:translateY(-4.5px);opacity:1}}
@keyframes sx-li-chat-d2{0%,8%,28%,58%,78%,100%{transform:translateY(0);opacity:.45}18%,68%{transform:translateY(-4.5px);opacity:1}}
@keyframes sx-li-chat-d3{0%,16%,36%,66%,86%,100%{transform:translateY(0);opacity:.45}26%,76%{transform:translateY(-4.5px);opacity:1}}

/* bolt: outline strikes on, flashes twice, sparks shoot out, holds, trims away */
.sx-li--bolt *{animation-duration:2.6s}
.sx-li--bolt .sx-li__bolt{animation-name:sx-li-bolt-draw}
.sx-li--bolt .sx-li__flash{opacity:0;animation-name:sx-li-bolt-flash}
.sx-li--bolt .sx-li__pop{animation-name:sx-li-bolt-pop}
.sx-li--bolt .sx-li__zap{animation-name:sx-li-bolt-zap}
@keyframes sx-li-bolt-draw{0%{stroke-dashoffset:105;animation-timing-function:cubic-bezier(.45,0,.2,1)}24%,80%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.75,.3)}94%,100%{stroke-dashoffset:-105}}
@keyframes sx-li-bolt-flash{0%,22%{opacity:0}26%{opacity:1}31%{opacity:.25}35%{opacity:.9}52%,100%{opacity:0}}
@keyframes sx-li-bolt-pop{0%,22%{transform:scale(1)}28%{transform:scale(1.07)}36%{transform:scale(.98)}44%,100%{transform:scale(1)}}
@keyframes sx-li-bolt-zap{0%,24%{stroke-dashoffset:105;animation-timing-function:cubic-bezier(.33,1,.68,1)}32%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.32,0,.67,0)}44%,100%{stroke-dashoffset:-105}}

/* layers: the stack fans apart, floats, then snaps back together */
.sx-li--layers *{animation-duration:2.8s}
.sx-li--layers .sx-li__l1{animation-name:sx-li-layers-1}
.sx-li--layers .sx-li__l2{animation-name:sx-li-layers-2}
.sx-li--layers .sx-li__l3{animation-name:sx-li-layers-3}
@keyframes sx-li-layers-1{0%,8%{transform:translateY(0)}32%{transform:translateY(-6px)}56%{transform:translateY(-5.2px)}70%{transform:translateY(1.4px)}80%,100%{transform:translateY(0)}}
@keyframes sx-li-layers-2{0%,12%{transform:translateY(0)}34%{transform:translateY(-.4px)}58%{transform:translateY(0)}72%{transform:translateY(.5px)}82%,100%{transform:translateY(0)}}
@keyframes sx-li-layers-3{0%,10%{transform:translateY(0)}34%{transform:translateY(6px)}58%{transform:translateY(5.2px)}72%{transform:translateY(-1.4px)}82%,100%{transform:translateY(0)}}

/* rocket: hovers with a gentle sway, flame flickers, speed lines stream past */
.sx-li--rocket *{animation-duration:2.4s}
.sx-li--rocket .sx-li__bob{animation-name:sx-li-rocket-bob;animation-timing-function:cubic-bezier(.37,0,.63,1)}
.sx-li--rocket .sx-li__flame{transform-origin:50% 0;animation-name:sx-li-rocket-flame;animation-timing-function:cubic-bezier(.37,0,.63,1)}
.sx-li--rocket .sx-li__s1{animation-name:sx-li-rocket-s1;animation-timing-function:linear}
.sx-li--rocket .sx-li__s2{animation-name:sx-li-rocket-s2;animation-timing-function:linear}
@keyframes sx-li-rocket-bob{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-1.6px) rotate(2deg)}50%{transform:translateY(-2.6px) rotate(0deg)}75%{transform:translateY(-1px) rotate(-2deg)}}
@keyframes sx-li-rocket-flame{0%,100%{transform:scale(1,1)}10%{transform:scale(.9,.72)}20%{transform:scale(1.04,1.08)}32%{transform:scale(.92,.78)}44%{transform:scale(1,1.1)}56%{transform:scale(.9,.74)}68%{transform:scale(1.04,1.05)}80%{transform:scale(.94,.8)}90%{transform:scale(1,1.06)}}
@keyframes sx-li-rocket-s1{0%{transform:translateY(-4px);opacity:0}12%,46%{opacity:1}60%,100%{transform:translateY(16px);opacity:0}}
@keyframes sx-li-rocket-s2{0%{transform:translateY(12.667px);opacity:.714}10%{transform:translateY(16px);opacity:0}50%{transform:translateY(-4px);opacity:0}62%,96%{opacity:1}100%{transform:translateY(12.667px);opacity:.714}}

/* globe: two meridian rings turn about the axis */
.sx-li--globe *{animation-duration:3.2s}
.sx-li--globe .sx-li__ma{animation-name:sx-li-globe-ma}
.sx-li--globe .sx-li__mb{animation-name:sx-li-globe-mb}
@keyframes sx-li-globe-ma{0%{rx:22px;animation-timing-function:cubic-bezier(.12,0,.39,0)}50%{rx:.01px;animation-timing-function:cubic-bezier(.61,1,.88,1)}100%{rx:22px}}
@keyframes sx-li-globe-mb{0%{rx:.01px;animation-timing-function:cubic-bezier(.61,1,.88,1)}50%{rx:22px;animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{rx:.01px}}

/* pencil: tip rides the wave while the squiggle inks on, lifts, glides back, ink fades */
.sx-li--pencil *{animation-duration:3s}
.sx-li--pencil .sx-li__px{animation-name:sx-li-pencil-x}
.sx-li--pencil .sx-li__py{animation-name:sx-li-pencil-y}
.sx-li--pencil .sx-li__ink{animation-name:sx-li-pencil-ink;animation-timing-function:linear}
@keyframes sx-li-pencil-x{0%{transform:translateX(-18px);animation-timing-function:linear}55%,64%{transform:translateX(0)}86%,100%{transform:translateX(-18px)}}
@keyframes sx-li-pencil-y{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}9.167%{transform:translateY(-3.5px);animation-timing-function:cubic-bezier(.37,0,.63,1)}27.5%{transform:translateY(3.5px);animation-timing-function:cubic-bezier(.37,0,.63,1)}45.833%{transform:translateY(-3.5px);animation-timing-function:cubic-bezier(.12,0,.39,0)}55%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,1,.68,1)}61%,86%{transform:translateY(-3px)}93%,100%{transform:translateY(0)}}
@keyframes sx-li-pencil-ink{0%{stroke-dashoffset:100;opacity:1}9.167%{stroke-dashoffset:83.333}18.333%{stroke-dashoffset:66.667}27.5%{stroke-dashoffset:50}36.667%{stroke-dashoffset:33.333}45.833%{stroke-dashoffset:16.667}55%,64%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:0}}

/* engines without CSS geometry properties (rx): approximate the coin flip and globe turn with transforms */
@supports not (rx:1px){.sx-li--coin .sx-li__face{animation-name:sx-li-coin-sym}.sx-li--globe .sx-li__ma{animation-name:sx-li-globe-fa}.sx-li--globe .sx-li__mb{animation-name:sx-li-globe-fb}}
@keyframes sx-li-globe-fa{0%{transform:scaleX(1);animation-timing-function:cubic-bezier(.12,0,.39,0)}50%{transform:scaleX(.03);animation-timing-function:cubic-bezier(.61,1,.88,1)}100%{transform:scaleX(1)}}
@keyframes sx-li-globe-fb{0%{transform:scaleX(.05);animation-timing-function:cubic-bezier(.61,1,.88,1)}50%{transform:scaleX(1);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:scaleX(.05)}}

@media (prefers-reduced-motion:reduce){.sx-li *{animation:none!important}}

/* custom cursor */
html.sx-has-cursor,html.sx-has-cursor *{cursor:none!important}
.sx-cursor{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;mix-blend-mode:difference}
.sx-cursor__dot{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;background:#fff;transition:opacity .3s}
.sx-cursor__ring{position:absolute;top:0;left:0;width:38px;height:38px;border:1px solid #fff;border-radius:50%;transition:width .35s var(--e-out),height .35s var(--e-out),background .35s}
.sx-cursor.is-hover .sx-cursor__ring{width:74px;height:74px;background:rgba(255,255,255,.1)}
.sx-cursor.is-hover .sx-cursor__dot{opacity:0}
.sx-cursor__label{position:absolute;top:0;left:0;color:#fff;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .25s}
.sx-cursor.has-label .sx-cursor__label{opacity:1}

/* peek preview */
.sx-peek{position:fixed;top:0;left:0;width:300px;height:380px;z-index:9000;pointer-events:none;border-radius:var(--radius);overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--e-out);background:var(--surface);margin:0}
.sx-peek.is-on{clip-path:inset(0 0 0 0)}
.sx-peek img{width:100%;height:100%;object-fit:cover}

/* grain */
.sx-grain body::after{content:"";position:fixed;inset:0;z-index:9500;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px;opacity:var(--grain-op,.05);mix-blend-mode:var(--grain-blend,soft-light)}

/* preloader */
.sx-preloader{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:transparent}
.sx-preloader__cols{position:absolute;inset:0;display:flex;z-index:0}
.sx-preloader__cols span{flex:1;background:var(--bg);transform:translateY(0);transition:transform .9s var(--e-prel)}
.sx-preloader.is-done{pointer-events:none}
.sx-preloader.is-done .sx-preloader__cols span{transform:translateY(-101%)}
.sx-preloader.is-done .sx-preloader__cols span:nth-child(2){transition-delay:.07s}
.sx-preloader.is-done .sx-preloader__cols span:nth-child(3){transition-delay:.14s}
.sx-preloader.is-done .sx-preloader__cols span:nth-child(4){transition-delay:.21s}
.sx-preloader__num{position:relative;z-index:1;font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(4rem,14vw,12rem);color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.04em;transition:opacity .4s}
.sx-preloader.is-done .sx-preloader__num{opacity:0}

/* reveal / split */
[data-reveal]{opacity:0;transform:translateY(42px);transition:opacity .9s var(--e-out),transform .9s var(--e-out);will-change:opacity,transform}
[data-reveal].is-visible{opacity:1;transform:none}
/* Clip/mask wipes: the hidden state is opacity:0 (never clip-path) because Chrome's
   IntersectionObserver treats an element clipped by its own clip-path as zero-area and never
   reports it — the wipe only runs as an animation once the element is revealed. */
[data-reveal="clip-up"],[data-reveal="mask-img"]{opacity:0;transform:none;transition:none;will-change:auto}
[data-reveal="clip-up"].is-visible{opacity:1;animation:sx-wipe-up 1.05s var(--e-inout) backwards}
[data-reveal="mask-img"].is-visible{opacity:1;animation:sx-wipe-up 1.1s var(--e-inout) backwards}
@keyframes sx-wipe-up{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.sx-split{display:inline}
.sx-split .sx-mask{display:inline-block;overflow:hidden;vertical-align:top;line-height:1;margin-bottom:-.22em}
.sx-split .sx-inner{display:inline-block;line-height:1;transform:translateY(110%);transition:transform .8s var(--e-out);padding-bottom:.22em}
.sx-split.is-visible .sx-inner{transform:translateY(0)}

/* responsive */
@media(max-width:900px){
 .sx-work.cols-3 .sx-work__grid,.sx-work.cols-2 .sx-work__grid{grid-template-columns:1fr}
 .sx-hero__cue{display:none}
}
@media(max-width:760px){
 .sx-nav__toggle-label{display:none}
 .sx-burger{display:block}
 .sx-nav__cta{display:none}
}
@media(max-width:560px){
 :root{--gut:20px}
 .sx-footer__top{flex-direction:column}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
 *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 [data-reveal],[data-reveal].is-visible{opacity:1!important;transform:none!important;clip-path:none!important}
 [data-reveal="mask-img"] img{transform:none!important}
 .sx-split .sx-inner{transform:none!important}
 .sx-hero__cue i::after{animation:none!important}
 .sx-mq__track{animation:none!important}
}

/* testimonials slider */
.sx-tsl__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(34px,5vw,60px)}
.sx-tsl__title{font-size:var(--fs-h2)}
.sx-tsl__viewport{overflow:hidden;border-radius:calc(var(--radius) * 1.7 + 6px)}
.sx-tsl__viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sx-tsl__track{list-style:none;display:flex;flex-wrap:nowrap;margin:0;padding:0;transition:transform .7s var(--e-inout);will-change:transform}
.sx-tsl__slide{flex:0 0 100%;min-width:0;display:flex}
.sx-tsl__card{position:relative;width:100%;min-height:clamp(258px,33vw,356px);display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,3vw,38px);background:var(--surface);border-radius:calc(var(--radius) * 1.7 + 6px);padding:clamp(34px,5.5vw,76px);overflow:hidden}
.sx-tsl__card::before{content:"\201C";position:absolute;top:-.1em;right:.12em;font-family:var(--font-display);font-weight:var(--disp-w);font-size:min(30vw,300px);line-height:1;color:var(--accent);opacity:.12;pointer-events:none;z-index:0}
.sx-tsl__quote{position:relative;z-index:1;margin:0;font-family:var(--font-display);font-weight:var(--disp-w);font-size:clamp(1.3rem,2.5vw,2.15rem);line-height:1.2;letter-spacing:-.02em;max-width:50ch;color:var(--fg)}
.sx-tsl__by{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.sx-tsl__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.sx-tsl__who b{font-size:1.02rem;font-weight:600;color:var(--fg)}
.sx-tsl__who span{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sx-tsl__controls{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,30px);margin-top:clamp(26px,4vw,46px)}
.sx-tsl__arrow{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--fg);background:var(--bg);transition:background-color .3s,border-color .3s,color .3s,transform .3s var(--e-out)}
@media(hover:hover){.sx-tsl__arrow:hover{background:var(--accent);border-color:var(--accent);color:var(--btn-ink);transform:translateY(-3px)}}
.sx-tsl__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sx-tsl__arrow svg{width:20px;height:20px}
.sx-tsl__dots{display:flex;align-items:center;gap:10px}
.sx-tsl__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background-color .3s,transform .3s var(--e-out)}
.sx-tsl__dot.is-active{background:var(--accent);transform:scale(1.35)}
.sx-tsl__dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:620px){.sx-tsl__card{padding:30px 24px;min-height:0}.sx-tsl__arrow{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.sx-tsl__track{transition:none}}