/* Softliro Live Demos gallery — every rule is scoped under .slg so it can't affect the WordPress theme.
   Brand: Ink #0E1113 · Surface #121617 · Bone #F2EFE9 · Slate #8C8F8A · Liro Violet #5240FF · Signal Lime #C6F24E */
.slg{--ink:#0E1113;--surface:#121617;--surface-2:#161B1D;--bone:#F2EFE9;--slate:#8C8F8A;--violet:#5240FF;--violet-ink:#8E83FF;--lime:#C6F24E;--rule:rgba(242,239,233,.10);--rule-2:rgba(242,239,233,.18);
--fd:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;--fb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--r:4px;
color:var(--bone);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;padding:96px 0 120px;max-width:1440px;margin:0 auto}
.slg *,.slg *::before,.slg *::after{box-sizing:border-box}
.slg [hidden]{display:none!important}
.slg h1,.slg h2,.slg h3{font-family:var(--fd);margin:0;padding:0;font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--bone);text-transform:none;border:0;background:none}
.slg p{margin:0}.slg ul{margin:0;padding:0;list-style:none}.slg li{margin:0}
.slg img{max-width:100%;display:block;border:0}
.slg a{color:inherit;text-decoration:none}
.slg button{font:inherit}
.slg :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.slg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.slg{padding:64px 0 80px}}

/* heading */
.slg-head{max-width:880px;margin-bottom:48px}
.slg-pill{display:inline-flex;align-items:center;gap:10px;font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:rgba(11,14,15,.6);border:1px solid var(--rule-2);padding:7px 14px;border-radius:999px;margin-bottom:24px!important}
.slg-pill i{width:6px;height:6px;border-radius:50%;background:var(--violet)}
.slg .slg-h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.05em}
.slg-light{display:block;font-weight:300}
.slg-bold{display:block;font-weight:800}
.slg-bold em{color:var(--lime);font-style:italic}
.slg-intro{margin-top:24px!important;color:rgba(242,239,233,.72);max-width:34em}
.slg-eyebrow{font:500 13px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:12px!important}

/* filters */
.slg-filters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;margin-bottom:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.slg-filters>*{min-width:0}
.slg-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.slg-chips::-webkit-scrollbar{display:none}
@media(min-width:900px){.slg-chips{flex-wrap:wrap;overflow:visible}}
.slg-chip{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;border-radius:var(--r);border:1px solid var(--rule-2);background:transparent;color:var(--bone);font:500 15px/1 var(--fb);cursor:pointer;transition:border-color .2s,background .2s}
.slg-chip:hover{border-color:var(--bone)}
.slg-chip em{font:500 11px/1 var(--fm);font-style:normal;color:var(--slate);letter-spacing:.06em}
.slg-chip[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}.slg-chip[aria-pressed=true] em{color:#4A4D49}
.slg-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.slg-seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r);padding:3px;gap:2px;max-width:100%}
.slg-seg button{min-height:38px;padding:0 14px;border:0;border-radius:2px;background:none;color:var(--slate);font:500 12px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.slg-seg button:hover{color:var(--bone)}.slg-seg button[aria-pressed=true]{background:var(--surface-2);color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule-2)}
.slg-search{position:relative;flex:1 1 220px;max-width:340px;display:flex;align-items:center;color:var(--slate);margin:0}
.slg-search svg{position:absolute;left:14px}
.slg .slg-search input{width:100%;height:44px;min-height:44px;margin:0;padding:0 14px 0 40px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);color:var(--bone);font:400 16px/1 var(--fb);box-shadow:none}
.slg .slg-search input::placeholder{color:var(--slate)}.slg .slg-search input:focus{border-color:var(--bone);outline:none}
.slg-count{margin-left:auto!important;font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
@media(max-width:640px){.slg-search{max-width:none;flex-basis:100%}.slg-count{margin-left:0!important}.slg-seg{display:flex;width:100%}.slg-seg button{flex:1;padding:0 6px;font-size:11px;letter-spacing:.04em}}

/* cards — Softliro "Selected work" pattern */
.slg-grid{display:grid;gap:24px}
@media(min-width:900px){.slg-grid{grid-template-columns:1fr 1fr}}
.slg-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:border-color .25s;animation:slg-fade .35s ease both}
.slg-card:hover{border-color:var(--rule-2)}
@keyframes slg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slg-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--brand)}
.slg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,17,19,.35))}
.slg-shot{position:absolute;left:6%;top:9%;width:78%;border-radius:6px 6px 0 0;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.slg-shot img{width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.slg-phone{position:absolute;right:5%;top:22%;width:21%;border-radius:14px;padding:4px;background:#0B0D0E;box-shadow:0 24px 40px -14px rgba(0,0,0,.6);z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.slg-phone img{border-radius:10px;width:100%;height:auto;aspect-ratio:390/760;object-fit:cover;object-position:top}
.slg-card:hover .slg-shot{transform:translateY(-6px)}.slg-card:hover .slg-phone{transform:translateY(-12px)}
.slg-live{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;background:rgba(14,17,19,.82);color:var(--bone);border:1px solid var(--rule-2);padding:7px 10px;border-radius:999px}
.slg-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.2)}
.slg-body{display:flex;flex-direction:column;flex:1;padding:28px}
.slg-ind{font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:12px!important}
.slg-body h3{font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.03em;margin-bottom:12px}
.slg-body h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.slg-desc{color:rgba(242,239,233,.68);max-width:34em}
.slg-pal{display:flex;gap:6px;margin-top:18px!important}.slg-pal li{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,239,233,.2)}
.slg-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.slg-desc+.slg-foot,.slg-pal+.slg-foot{margin-top:24px}
.slg .slg-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 13px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--violet-ink)}
.slg .slg-link:hover{color:var(--bone)}.slg-link span{transition:transform .2s}.slg-link:hover span{transform:translateX(4px)}
.slg-tags{display:flex;flex-wrap:wrap;gap:6px}.slg-tags li{font:400 11px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);border:1px solid var(--rule-2);border-radius:2px;padding:7px 8px}
@media(min-width:900px){
.slg-card.is-wide{grid-column:1/-1;flex-direction:row}
.slg-card.is-wide .slg-media{flex:0 0 50%;aspect-ratio:auto;min-height:420px}
.slg-card.is-wide .slg-body{padding:40px}
.slg-card.is-wide h3{font-size:clamp(1.8rem,2.8vw,2.4rem)}
}
.slg-empty{border:1px dashed var(--rule-2);border-radius:var(--r);padding:56px 24px;text-align:center}
.slg-empty h2{font-size:1.8rem;font-weight:300;margin-bottom:10px}.slg-empty p:not(.slg-eyebrow){color:var(--slate);margin-bottom:20px!important}
.slg-btn{display:inline-flex;align-items:center;min-height:46px;padding:12px 26px;border-radius:var(--r);border:1px solid var(--rule-2);background:transparent;color:var(--bone);font:500 16px/1.4 var(--fb);cursor:pointer}.slg-btn:hover{border-color:var(--bone)}
@media(prefers-reduced-motion:reduce){.slg *{animation:none!important;transition:none!important}}