/* AI Success Stories — case-book slides (after reference: visual slide + statement slide per project) */
.sx{--rose:#F92F64;--violet:#A24BFF;background:#fff;padding:clamp(88px,9vw,136px) 0 0;font-family:'Figtree',system-ui,sans-serif;color:#0B0C0E;}
.sx .wrap{max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box;}
.sx-head{margin-bottom:clamp(56px,6vw,96px);}
.sx-eye{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);}
.sx-eye i{width:6px;height:6px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px rgba(249,47,100,.16);}
.sx-h{margin:20px 0 24px;max-width:15ch;font-size:clamp(34px,3.9vw,56px);font-weight:500;line-height:1.06;letter-spacing:-0.035em;text-wrap:balance;}
.sx-lead{margin:0;max-width:76ch;font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:#5F636B;}

.sx-case{position:relative;}
.sx-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sx-slide{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh + 120px);min-height:560px;overflow:hidden;}

/* ---------- visual slide · web (laptop + phone on brand shapes) ---------- */
.sx-vis-web{background:#fff;}
.sx-glyph{position:absolute;left:-2%;bottom:-24%;font-size:clamp(420px,58vw,1100px);font-weight:800;line-height:.8;letter-spacing:-0.08em;color:var(--hue);pointer-events:none;}
.sx-dash{position:absolute;left:0;top:14%;width:26%;height:24%;}
.sx-star{position:absolute;pointer-events:none;}
.sx-star.s1{right:20%;top:4%;width:8%;transform:rotate(-12deg);}
.sx-star.s2{left:17%;top:58%;width:8%;transform:rotate(10deg);}
.sx-star.s3{right:16%;top:38%;width:4.4%;}
.sx-star.s4{right:10%;bottom:6%;width:6.4%;transform:rotate(18deg);}
.sx-stage{position:absolute;left:23%;right:13%;top:9%;bottom:8%;}
.sx-vis-web .d-main{position:absolute;left:0;top:0;width:82%;filter:drop-shadow(0 40px 60px rgba(11,12,14,.22));}
.sx-vis-web .d-side{position:absolute;right:0;bottom:0;width:17%;filter:drop-shadow(0 30px 40px rgba(11,12,14,.28));}
.sx-brandtag{position:absolute;left:4.6%;top:6%;display:flex;align-items:center;}
.sx-brandtag .sx-logo{height:clamp(26px,2.4vw,40px);width:auto;}
.sx-word{display:flex;flex-direction:column;font-size:clamp(20px,1.9vw,30px);font-weight:700;letter-spacing:-0.03em;color:var(--hue);line-height:1;}
.sx-word small{font-size:.42em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;color:#5F636B;}

/* ---------- visual slide · mobile (phone wall + brand panel) ---------- */
.sx-vis-mob{background:#F3F6FA;display:grid;grid-template-columns:52.2% 1fr;gap:2.4%;padding:3.7% 6.4% 3.7% 4.2%;box-sizing:border-box;}
.sx-wall{position:relative;overflow:hidden;background:#D9DCDF;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px),radial-gradient(rgba(0,0,0,.06) 1px,transparent 1.6px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px;}
.sx-col{position:absolute;left:6%;top:-18%;bottom:-18%;width:39%;display:flex;flex-direction:column;justify-content:space-between;}
.sx-col .sx-dev{width:100%;}
.sx-wall .d-c{position:absolute;left:49%;top:8%;width:39%;filter:drop-shadow(0 30px 40px rgba(11,12,14,.3));}
.sx-col .sx-dev{filter:drop-shadow(0 24px 34px rgba(11,12,14,.24));}
.sx-brandpanel{position:relative;overflow:hidden;background-size:cover;background-position:center;display:grid;place-items:center;}
.sx-tint{position:absolute;inset:0;background:var(--hue);mix-blend-mode:multiply;opacity:.92;}
.sx-brandpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(201,164,92,.18),transparent 55%);}
.sx-brandpanel .sx-logo{position:relative;z-index:1;width:min(38%,260px);height:auto;}
.sx-logo.inv{filter:brightness(0) invert(1);}

/* ---------- devices ---------- */
.sx-dev{position:relative;}
.sx-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.sx-scr{position:absolute;overflow:hidden;z-index:1;background:#0B0C0E;}
.sx-sb{position:absolute;left:0;right:0;top:0;height:5.4%;display:flex;align-items:center;justify-content:space-between;padding:0 9%;font-size:clamp(5px,.55vw,9px);font-weight:600;color:inherit;z-index:3;}
.sx-sb i{width:14%;height:34%;border-radius:2px;border:1px solid currentColor;opacity:.7;}

/* screens */
.ui{position:absolute;inset:0;font-size:clamp(4px,.52vw,9.5px);line-height:1.3;}
.ui-web{background:#fff;color:#0B0C0E;display:flex;flex-direction:column;}
.uw-top{display:flex;align-items:center;gap:4%;padding:2.2% 3%;border-bottom:1px solid rgba(11,12,14,.08);}
.uw-top b{font-weight:800;font-size:1.25em;letter-spacing:-0.02em;color:var(--hue);display:flex;gap:.4em;align-items:baseline;}
.uw-top b span{font-weight:500;color:#5F636B;font-size:.8em;}
.uw-top nav{display:flex;gap:1.6em;margin-left:auto;color:#5F636B;}
.uw-top nav i{font-style:normal;}
.uw-top nav i.on{color:#0B0C0E;font-weight:700;}
.uw-top em{font-style:normal;font-weight:700;color:#fff;background:var(--hue);padding:.6em 1.2em;border-radius:99px;}
.uw-body{flex:1;display:grid;grid-template-columns:1.7fr 1fr;gap:3%;padding:3%;background:#F6F7F8;}
.uw-l,.uw-r{background:#fff;border-radius:.9em;padding:4% 5%;box-shadow:0 1px 0 rgba(11,12,14,.05);}
.ui h6{margin:0 0 .9em;font-size:.9em;font-weight:700;color:#5F636B;letter-spacing:.02em;}
.uw-big{display:block;font-size:2.8em;font-weight:800;letter-spacing:-0.03em;margin-bottom:.4em;}
.uw-bars{display:flex;align-items:flex-end;gap:5%;height:22%;margin-bottom:1.4em;}
.uw-bars i{flex:1;border-radius:.3em .3em 0 0;background:linear-gradient(180deg,var(--hue2),var(--hue));}
.uw-r p,.up-card p,.tan-hold p{display:flex;justify-content:space-between;margin:.55em 0;color:#5F636B;}
.uw-r p b,.up-card p b,.tan-hold p b{color:#0B0C0E;}
.neg{color:#E0204F!important;}.pos{color:#0F8A5F!important;}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:3%;height:84%;}
.bio-grid span,.up-img{position:relative;border-radius:.6em;background-size:cover;background-position:center;overflow:hidden;}
.bio-grid u,.up-img u{position:absolute;border:2px solid #6FD1C4;border-radius:.3em;box-shadow:0 0 0 1px rgba(0,0,0,.2);}
.bio-grid u.bad,.up-img u.bad{border-color:#F92F64;}
.bio-grid s,.up-img s{position:absolute;left:6%;bottom:6%;text-decoration:none;font-weight:700;color:#fff;background:#14524F;padding:.3em .7em;border-radius:.4em;}
.bio-grid s.bad,.up-img s.bad{background:#F92F64;}
.zr{display:flex;align-items:center;gap:4%;padding:3.4% 0;border-bottom:1px solid rgba(11,12,14,.06);}
.zr img{width:9%;aspect-ratio:1;border-radius:50%;object-fit:cover;}
.zr span{flex:1;display:flex;flex-direction:column;}
.zr span i{font-style:normal;color:#5F636B;}
.zr em{font-style:normal;font-weight:700;padding:.35em .9em;border-radius:99px;}
.zr em.ok{background:#E8F7EF;color:#0F8A5F;}.zr em.warn{background:#FDEBEF;color:#E0204F;}

.ui-ph{background:#fff;color:#0B0C0E;padding:16% 7% 8%;box-sizing:border-box;display:flex;flex-direction:column;gap:4%;font-size:clamp(5px,.62vw,10.5px);}
.up-h{display:flex;justify-content:space-between;align-items:baseline;}
.up-h b{font-size:1.9em;font-weight:800;letter-spacing:-0.03em;}
.up-h em{font-style:normal;font-weight:700;color:var(--hue);}
.up-img{height:34%;}
.up-card{background:#F4F5F7;border-radius:1.2em;padding:6%;}
.up-btn{margin-top:auto;text-align:center;font-weight:700;color:#fff;background:var(--hue);padding:1em;border-radius:99px;}
.up-btn.gold{background:#C9A45C;color:#0F3B35;}
.ui-tan{background:#0F3B35;color:#fff;}
.ui-tan .up-h em{color:#C9A45C;}
.ui-tan.light{background:#F7F4EC;color:#0F3B35;}
.tan-val span{display:block;opacity:.7;}
.tan-val b{display:block;font-size:2.5em;font-weight:800;letter-spacing:-0.03em;}
.tan-val i{font-style:normal;color:#C9A45C;font-weight:700;}
.tan-line{width:100%;height:20%;}
.tan-hold p{color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.55em;}
.tan-hold p b{color:#fff;}
.tan-op{height:26%;border-radius:1.2em;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:6%;color:#fff;}
.tan-op::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,59,53,.9),rgba(15,59,53,.1));}
.tan-op span,.tan-op b{position:relative;}
.tan-op b{font-size:1.4em;}
.tan-dial{position:relative;text-align:center;}
.tan-dial svg{width:80%;}
.tan-dial b{display:block;font-size:1.9em;font-weight:800;margin-top:-4%;}
.tan-dial span{opacity:.7;}
.zg-route{display:flex;align-items:center;gap:6%;justify-content:center;padding:6% 0;}
.zg-route b{font-size:2.2em;font-weight:800;letter-spacing:-0.02em;}
.zg-route i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--hue) 0 6px,transparent 6px 11px);}
.zg-chain{display:flex;gap:3%;}
.zg-chain span{flex:1;text-align:center;padding:.6em 0;border-radius:99px;background:#F4F5F7;color:#5F636B;font-weight:600;}
.zg-chain span.ok{background:#E8F7EF;color:#0F8A5F;}

/* ---------- statement slide ---------- */
.sx-text{background:var(--bg);color:var(--ink);padding:0 5.2%;box-sizing:border-box;display:flex;flex-direction:column;}
.sx-tgrid{flex:1;display:grid;grid-template-columns:40% 1fr;gap:9%;align-items:center;}
.sx-stmt{margin:0;font-size:clamp(30px,3.15vw,60px);font-weight:500;line-height:1.02;letter-spacing:-0.025em;text-wrap:balance;}
.sx-stmt em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-0.01em;font-size:1.08em;}
.sx-copy p{margin:0;font-size:clamp(15px,1.25vw,22px);line-height:1.62;}
.sx-copy h4{margin:clamp(22px,2.4vw,40px) 0 12px;font-family:'Space Grotesk',ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.75;}
.sx-copy ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.sx-copy li{font-size:clamp(12.5px,.9vw,14px);font-weight:500;padding:7px 14px;border-radius:99px;border:1px solid currentColor;opacity:.92;}
.sx-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-top:1px solid currentColor;padding:clamp(18px,1.7vw,30px) 0 clamp(26px,2.6vw,46px);font-size:clamp(13px,1.2vw,22px);font-weight:600;text-transform:uppercase;letter-spacing:.01em;}
.sx-foot span:nth-child(2){text-align:center;}
.sx-foot .sx-sig{text-align:right;}
.sx-sig em{font-family:'Instrument Serif',Georgia,serif;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.02em;}
.sx-text.dark .sx-foot{border-top-color:rgba(255,255,255,.55);}
.sx-text:not(.dark) .sx-copy li{border-color:rgba(20,82,79,.35);}

@media(max-width:900px){
  .sx .wrap{padding:0 20px;}
  .sx-slide{aspect-ratio:auto;min-height:0;max-height:none;}
  .sx-vis{aspect-ratio:4/3!important;}
  .sx-vis-mob{grid-template-columns:1fr;padding:4%;}
  .sx-brandpanel{display:none;}
  .sx-text{padding:56px 20px 0;}
  .sx-tgrid{grid-template-columns:1fr;gap:28px;}
  .sx-foot{grid-template-columns:1fr;gap:6px;margin-top:40px;}
  .sx-foot span,.sx-foot .sx-sig{text-align:left;}
}

/* ============ zig-zag horizontal case scroll ============ */
#work.wdi-showcase,
#work.wdi-showcase .sx-hz,
#work.wdi-showcase .sx-pin{
  content-visibility:visible!important;
  contain:none!important;
  contain-intrinsic-size:none!important;
}
#work.wdi-showcase .sx-hz{height:calc(250vh - 74px)!important;}
#work.wdi-showcase .sx-pin{position:sticky!important;top:74px!important;height:calc(100vh - 74px)!important;overflow:hidden!important;}
#work.wdi-showcase .sx-track{display:flex!important;width:200%!important;height:100%!important;will-change:transform;}
#work.wdi-showcase .sx-hz.sx-rev .sx-track{flex-direction:row-reverse;transform:translate3d(-50%,0,0);}
#work.wdi-showcase .sx-hz .sx-slide{flex:0 0 50%!important;width:50%!important;height:100%!important;aspect-ratio:auto;min-height:0;max-height:none;}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  #work.wdi-showcase .sx-hz{height:auto!important;}
  #work.wdi-showcase .sx-pin{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;}
  #work.wdi-showcase .sx-track,#work.wdi-showcase .sx-hz.sx-rev .sx-track{display:block!important;width:100%!important;height:auto!important;transform:none!important;}
  #work.wdi-showcase .sx-hz .sx-slide{width:100%!important;height:auto!important;}
}

/* Portfolio · Project Explorer — case-book reused from AI ML Solutions, with real app screenshots */
#work.wdi-showcase .amp{background:linear-gradient(90deg,#F92F64,#A24BFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
#work.wdi-showcase .sx-h{max-width:18ch;}
#work.wdi-showcase .sx-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
/* trio stage: phones on brand shapes (web-slide composition, phones only) */
.sx-vis-trio{background:#fff;}
.sx-trio{position:absolute;inset:0;}
.sx-trio .sx-dev{position:absolute;width:auto;}
.sx-trio .d-l{height:70%;left:33%;top:19%;z-index:1;filter:drop-shadow(0 28px 38px rgba(11,12,14,.26));}
.sx-trio .d-m{height:84%;left:47%;top:7%;z-index:3;filter:drop-shadow(0 40px 60px rgba(11,12,14,.3));}
.sx-trio .d-r{height:70%;left:63.5%;top:23%;z-index:2;filter:drop-shadow(0 28px 38px rgba(11,12,14,.26));}
.duo .sx-trio .d-m{left:40%;}
.duo .sx-trio .d-r{height:76%;left:58.5%;top:17%;}
.sx-vis-trio .sx-brandtag .sx-logo{height:clamp(30px,2.8vw,46px);}
.sx-vis-trio .sx-word{color:var(--hue);}
.sx-chip{position:absolute;left:4.6%;top:30%;z-index:4;max-width:21%;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 44px rgba(11,12,14,.12);}
.sx-chip span{display:block;font-family:'Space Grotesk',ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hue);}
.sx-chip b{display:block;margin-top:8px;font-size:clamp(17px,1.5vw,24px);font-weight:600;line-height:1.15;letter-spacing:-0.02em;color:#0B0C0E;}
/* wall brand panel: text wordmark fallback + hue-matched sheen */
.sx-word.inv{position:relative;z-index:1;color:#fff;font-size:clamp(34px,3.6vw,60px);}
#work.wdi-showcase .sx-brandpanel::after{background:linear-gradient(160deg,color-mix(in srgb,var(--hue2) 22%,transparent),transparent 55%);}
/* statement slide extras */
.sx-text:not(.dark) .sx-copy li{border-color:color-mix(in srgb,currentColor 35%,transparent)!important;}
.sx-req{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,2.2vw,34px);padding:13px 22px;border-radius:99px;
  font-size:15px;font-weight:600;text-decoration:none;color:var(--bg);background:var(--ink);transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s;}
.sx-req span{transition:transform .3s;}
.sx-req:hover{background:#F92F64;color:#fff;transform:translateY(-2px);}
.sx-req:hover span{transform:translateX(4px);}
@media(max-width:900px){.sx-chip{display:none;}.sx-trio .d-l{left:6%;}.sx-trio .d-m{left:30%;}.sx-trio .d-r{left:56%;}.duo .sx-trio .d-m{left:18%;}.duo .sx-trio .d-r{left:50%;}}

/* Cheers to the Season — own navy/gold identity */
.sx-logo-badge{height:clamp(64px,6vw,96px)!important;width:auto;border-radius:50%;box-shadow:0 10px 26px rgba(11,34,80,.25);}
.sx-cheers .sx-stmt em{color:#F0B92C;}
.sx-cheers .sx-req{background:#F0B92C;color:#0B2250;}
.sx-cheers .sx-req:hover{background:#fff;color:#0B2250;}

/* narrow desktops: let the statement slide grow so its footer is never clipped */
@media(max-width:1100px){#work.wdi-showcase .sx-slide.sx-text{min-height:0!important;}
  #work.wdi-showcase .sx-tgrid{gap:22px;}#work.wdi-showcase .sx-copy li{font-size:12.5px;}}

/* Satva Connect — award seal */
.sx-award{position:absolute;left:4.6%;bottom:9%;z-index:4;width:clamp(120px,10.5vw,160px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;text-align:center;gap:4px;background:#0B0C0E;color:#fff;
  box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(224,101,31,.45),0 22px 44px rgba(11,12,14,.22);}
.sx-award-k{font-family:'Space Grotesk',ui-monospace,monospace;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#FFB27A;}
.sx-award b{font-size:clamp(13px,1.15vw,17px);font-weight:600;line-height:1.1;letter-spacing:-0.01em;}
.sx-award-y{font-size:9.5px;letter-spacing:.06em;color:rgba(255,255,255,.62);}
@media(max-width:900px){.sx-award{display:none;}}

section#work.wdi-showcase{background:#fff!important;background-color:#fff!important;color:#0B0C0E!important;}
#work.wdi-showcase .sx-h{color:#0B0C0E!important;}
#work.wdi-showcase .sx-lead{color:#5F636B!important;}
#work.wdi-showcase .sx-text{color:var(--ink)!important;}
#work.wdi-showcase .sx-text .sx-stmt{color:inherit!important;}