/* Tambahan untuk versi statis */
.brand-descriptor{display:none!important}
.marquee-track{will-change:transform}
.project-list .project-feature{margin-bottom:64px}
.project-list .project-preview img{aspect-ratio:16/10;object-fit:cover}
.project-sub{margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.project-sub li{border-top:1px solid var(--line);padding:9px 0}
.project-summary .project-stack b{font-weight:600;color:var(--foreground)}
.clients{border-top:1px solid var(--line);padding-block:72px}
.client-list{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.client-list li{border:1px solid var(--line);border-radius:3px;padding:10px 14px;font-size:13px;font-weight:550;transition:border-color .24s,color .24s}
.client-list li:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Work rail (sideways scroll) ---------- */
.work-section{padding-bottom:88px}
.work-rail-wrap{position:relative}
.work-rail-wrap:after{content:"";position:absolute;top:0;bottom:22px;right:0;width:72px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--background));z-index:2}
.work-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.work-hint{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.work-hint:before{content:"";width:28px;height:1px;background:currentColor}
.work-nav{display:flex;align-items:center;gap:8px}
.work-counter{font-size:12px;font-weight:650;letter-spacing:.1em;margin-right:8px;font-variant-numeric:tabular-nums}
.work-btn{border:1px solid var(--line);font-size:17px;background:var(--background);transition:all .24s}
.work-btn:hover{background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.work-rail{display:flex;align-items:stretch;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 28px;cursor:grab;overscroll-behavior-x:contain;outline-offset:6px}
.work-rail::-webkit-scrollbar{display:none}
.work-rail.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.work-slide{flex:0 0 min(88vw,540px);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);position:relative;opacity:.5;transform:scale(.965);transform-origin:left top;transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .4s,border-color .24s}
.work-slide:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c,var(--accent));z-index:3}
.work-slide.is-active{opacity:1;transform:none;box-shadow:0 28px 60px -34px color-mix(in oklab,var(--c,var(--accent)) 55%,transparent)}
.work-slide:hover{opacity:1}
.work-shot{position:relative;display:block;width:100%;padding:0;border:0;background:var(--background);cursor:zoom-in;overflow:hidden;text-align:left}
.work-shot:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,color-mix(in oklab,var(--foreground) 14%,transparent));pointer-events:none;opacity:.7}
.work-bar{display:flex;gap:6px;padding:10px 14px;background:color-mix(in oklab,var(--foreground) 6%,var(--background));border-bottom:1px solid var(--line)}
.work-bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in oklab,var(--foreground) 20%,transparent)}
.work-bar i:first-child{background:#ff6b63}.work-bar i:nth-child(2){background:#ffc545}.work-bar i:nth-child(3){background:#2fd058}
.work-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .8s var(--ease);-webkit-user-drag:none}
.work-shot:hover img{transform:scale(1.04)}
.work-count{position:absolute;right:12px;bottom:12px;z-index:2;padding:5px 11px;border-radius:99px;background:color-mix(in oklab,var(--background) 88%,transparent);backdrop-filter:blur(8px);font-size:11px;font-weight:650;border:1px solid var(--line)}
.work-count:after{content:" screens"}
.work-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.work-top{display:flex;align-items:center;gap:12px}
.work-num{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--c,var(--accent));font-variant-numeric:tabular-nums}
.work-num:after{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-left:10px;opacity:.6}
.work-meta{font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.work-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:11px;font-weight:650;color:var(--muted);background:var(--background)}
.work-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.work-status.is-live{color:#0a7a3d;border-color:color-mix(in oklab,#0a7a3d 35%,var(--line))}
.work-status.is-live:before{background:#16a34a;opacity:1;box-shadow:0 0 0 3px color-mix(in oklab,#16a34a 22%,transparent)}
.dark .work-status.is-live{color:#5ee28d}
.work-body h3{margin-top:16px;font-size:26px;letter-spacing:-.035em}
.work-sub{margin-top:5px;font-size:13px;font-weight:650;color:var(--c,var(--accent))}
.work-descwrap{margin-top:14px}
.work-desc{font-size:14px;line-height:1.8;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.work-descwrap.is-open .work-desc{display:block;-webkit-line-clamp:unset;overflow:visible}
.work-toggle{margin-top:8px;padding:0;border:0;background:none;font:650 12px/1.4 inherit;font-family:inherit;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.work-toggle[hidden]{display:none}
.work-toggle:after{content:"↓";transition:transform .24s}
.work-toggle[aria-expanded=true]:after{transform:rotate(180deg)}
.work-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.work-chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.work-chips li{border-radius:99px;padding:5px 12px;font-size:11px;font-weight:600;background:color-mix(in oklab,var(--c,var(--accent)) 9%,var(--background));border:1px solid color-mix(in oklab,var(--c,var(--accent)) 22%,var(--line))}
.work-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 0;padding:0}
.work-stats>div{padding:12px 12px 11px;border:1px solid var(--line);border-radius:8px;background:var(--background)}
.work-stats dt{font-size:18px;font-weight:700;letter-spacing:-.03em}
.work-stats dd{margin:3px 0 0;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.35}
.work-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:auto;padding-top:24px}
.work-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.work-progress span{display:block;height:100%;background:var(--accent);border-radius:3px;transform-origin:0;transform:scaleX(.1);transition:transform .25s}
.work-more{display:flex;justify-content:center;margin-top:48px}
/* show all */
.work-all{margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.work-all[hidden]{display:none}
.work-all-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.work-all-head h2 span{color:var(--muted);font-weight:450}
.work-pills{display:flex;flex-wrap:wrap;gap:8px}
.work-pill{border:1px solid var(--line);background:none;color:var(--foreground);border-radius:99px;padding:9px 16px;font:600 12px/1 inherit;font-family:inherit;cursor:pointer;transition:all .24s}
.work-pill:hover{border-color:var(--accent);color:var(--accent)}
.work-pill.is-on{background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;position:relative;transition:transform .3s var(--ease),border-color .24s,box-shadow .3s}
.work-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c,var(--accent));z-index:3}
.work-card[hidden]{display:none}
.work-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c,var(--accent)) 50%,var(--line));box-shadow:0 22px 44px -30px color-mix(in oklab,var(--c,var(--accent)) 60%,transparent)}
.work-card .work-body{padding:20px 20px 22px}
.work-card h3{margin-top:12px;font-size:20px}
.work-card .work-desc{-webkit-line-clamp:3;font-size:13px}
.work-card .work-chips{margin-top:14px}
.work-card .work-actions{padding-top:18px}
.work-card .work-actions .button{min-height:44px;padding:12px 18px}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:color-mix(in oklab,#06121c 92%,transparent);padding:48px 72px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lightbox img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:3px;background:#fff}
.lightbox figcaption{color:#c4d8e6;font-size:13px;text-align:center}
.lb-close,.lb-nav{position:absolute;border:1px solid #ffffff33;background:#ffffff14;color:#fff;border-radius:50%;width:46px;height:46px;font-size:22px;cursor:pointer}
.lb-close{top:20px;right:20px}.lb-nav{top:50%;transform:translateY(-50%)}.lb-prev{left:20px}.lb-next{right:20px}
.lb-nav[hidden]{display:none}
.lb-close:hover,.lb-nav:hover{background:#ffffff2b}
@media (max-width:1100px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}.work-hint{display:none}.work-controls{justify-content:flex-end}.lightbox{padding:60px 16px}.lb-nav{top:auto;bottom:16px;transform:none}.work-slide{flex-basis:86vw}.work-stats dt{font-size:15px}.work-body{padding:20px}.work-stats{grid-template-columns:repeat(2,1fr)}.work-rail-wrap:after{width:32px}}
.work-group+.work-group{margin-top:72px}
.work-group-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px;padding-top:28px;border-top:1px solid var(--line)}
.work-group-head h3{font-size:clamp(22px,2.2vw,30px)}
.work-group-head p{font-size:13px;color:var(--muted)}
.work-group:first-child .work-group-head{border-top:0;padding-top:0}

/* ---------- About: team + contact ---------- */
.about-since{font-size:13px!important;font-weight:600;letter-spacing:.08em;color:var(--foreground)!important;margin-top:36px}
.about-statement .large-prose h2.accent-text{font-size:clamp(44px,6vw,88px);letter-spacing:-.05em;margin-bottom:28px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:32px 20px 28px;text-align:center;transition:transform .3s var(--ease),border-color .24s}
.team-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.team-card img{width:128px;height:128px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;border:3px solid var(--background);box-shadow:0 0 0 1px var(--line)}
.team-card h3{font-size:17px;color:var(--accent)}
.team-card p{margin-top:6px;font-size:12px;color:var(--muted)}
.about-contact{background:var(--background)}
.contact-list{margin:0;display:grid;gap:0}
.contact-list>div{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.contact-list>div:last-child{border-bottom:1px solid var(--line)}
.contact-list dt{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:650;color:var(--muted)}
.contact-list dd{margin:0;font-size:15px;line-height:1.8}
.contact-list a:hover{color:var(--accent)}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}.contact-list>div{grid-template-columns:1fr;gap:6px}}

/* ---------- Our clients: logo wall, three drifting rows (driven by the shared marquee loop in app.js) ---------- */
.clients-band{padding-block:92px 100px;overflow:hidden;position:relative}
.clients-band:before{content:"";position:absolute;inset:-20% -10% auto auto;width:min(720px,70vw);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 13%,transparent),transparent);filter:blur(10px);opacity:.9}
.clients-head{position:relative;display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:52px}
.clients-head h2{margin:0}
.clients-head .eyebrow{margin-bottom:20px}
.clients-side{display:grid;gap:22px;justify-items:end;text-align:right}
.clients-side>p:first-child{max-width:360px;margin:0;text-wrap:balance;font-size:14px;line-height:1.75;color:var(--muted)}
.clients-count{display:flex;align-items:baseline;gap:12px;margin:0;padding-top:18px;border-top:1px solid var(--line)}
.clients-count strong{font-size:clamp(44px,5.2vw,68px);font-weight:620;letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--foreground)}
.clients-count span{max-width:11.5em;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--muted);text-align:left}
.client-wall{--panel:#fff;--ink:#12304a;position:relative;border:1px solid color-mix(in oklab,var(--line) 75%,#fff);border-radius:28px;padding-block:18px;background:var(--panel);box-shadow:0 30px 60px -40px rgba(8,57,94,.4);overflow:hidden}
.dark .client-wall{--panel:#f1f6fa;border-color:#fff2;box-shadow:0 30px 70px -36px #000a}
.client-marquee{position:relative;display:grid;gap:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.client-row{display:flex;overflow:clip}
.client-track{display:flex;flex:none;will-change:transform}
.client-set{display:flex;margin:0;padding:0;list-style:none}
.client-tile{flex:none;display:grid;place-items:center;width:190px;height:116px;padding-inline:20px;transition:transform .45s var(--motion-ease),opacity .35s,filter .35s}
.client-tile img{display:block;width:auto;height:auto;max-width:150px;max-height:84px;object-fit:contain;-webkit-user-drag:none;user-select:none;transition:transform .55s var(--motion-ease),filter .35s}
.client-name{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.25;text-align:center;color:var(--ink)}
.client-row:hover .client-tile:not(:hover){opacity:.35;filter:grayscale(.8)}
.client-tile:hover img{transform:scale(1.14)}
/* entrance: logos fade up in a soft wave once the wall scrolls into view */
[data-reveal=armed] .client-wall .client-tile{opacity:0!important;transform:translateY(22px) scale(.9)!important}
[data-reveal=armed] .client-wall[data-reveal-state=in] .client-tile{opacity:1!important;transform:none!important;transition:opacity .8s var(--motion-ease) calc(var(--i) * 55ms + 120ms),transform .9s var(--motion-ease) calc(var(--i) * 55ms + 120ms)}
[data-reveal=armed] .client-wall[data-reveal-state=in] .client-row:hover .client-tile:not(:hover){opacity:.35!important}
@media (max-width:900px){.clients-head{flex-direction:column;align-items:start;gap:28px}.clients-side{justify-items:start;text-align:left;width:100%}}
@media (max-width:760px){.clients-band{padding-block:60px 68px}.clients-head{margin-bottom:34px}.client-wall{border-radius:20px;padding-block:8px}.client-tile{width:148px;height:92px;padding-inline:14px}.client-tile img{max-width:118px;max-height:64px}.client-name{font-size:13px}}
@media (prefers-reduced-motion:reduce){.client-row{overflow-x:auto;scrollbar-width:none}.client-tile,.client-tile img{transition:none}[data-reveal=armed] .client-wall .client-tile{opacity:1!important;transform:none!important}}

/* ---------- Update (Instagram -> Update, same feature as Kelas Bermain) ---------- */
.update-section{padding-bottom:96px}
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.up-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;transition:transform .3s var(--ease),border-color .24s,box-shadow .3s}
.up-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--accent) 45%,var(--line));box-shadow:0 22px 44px -30px color-mix(in oklab,var(--accent) 55%,transparent)}
.up-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--background)}
.up-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.up-card:hover .up-media img{transform:scale(1.04)}
.up-body{display:flex;flex-direction:column;flex:1;gap:12px;padding:20px 22px 22px}
.up-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.up-meta time{font-weight:650}
.up-user{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--foreground)}
.up-badge{align-self:flex-start;display:inline-flex;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--t,var(--accent));background:color-mix(in oklab,var(--t,var(--accent)) 12%,var(--background));border:1px solid color-mix(in oklab,var(--t,var(--accent)) 28%,var(--line))}
.tone-kegiatan{--t:#006ce5}.tone-event{--t:#b86e00}.tone-pengumuman{--t:#0a7a3d}.tone-dokumentasi{--t:#7a3fd0}
.dark .tone-kegiatan{--t:#65c3fc}.dark .tone-event{--t:#ffc545}.dark .tone-pengumuman{--t:#5ee28d}.dark .tone-dokumentasi{--t:#c4a3ff}
.up-body h3{font-size:19px;line-height:1.35;letter-spacing:-.02em}
.up-body h3 a:hover{color:var(--accent)}
.up-excerpt{font-size:14px;line-height:1.75;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.up-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:auto;padding-top:6px}
.up-read{font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;gap:6px;align-items:center;min-height:36px}
.up-read span{transition:transform .24s var(--ease)}
.up-card:hover .up-read span{transform:translateX(3px)}
.up-ig{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);transition:color .24s}
.up-ig:hover{color:var(--foreground)}
.update-empty{border:1px dashed var(--line);border-radius:12px;padding:72px 24px;text-align:center}
.update-empty h3{font-size:22px}
.update-empty p{margin-top:10px;font-size:14px;color:var(--muted)}
/* detail */
.update-detail{max-width:820px;padding-block:40px 96px}
.up-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:650;color:var(--muted);transition:color .24s}
.up-back:hover{color:var(--accent)}
.up-article{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.up-hero{aspect-ratio:16/10;background:var(--background)}
.up-hero img{width:100%;height:100%;object-fit:cover;display:block}
.up-article-body{padding:32px 36px 36px}
.up-meta-lg{justify-content:flex-start;flex-wrap:wrap;gap:12px 18px;font-size:13px}
.up-article h1{margin-top:20px;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.04em;line-height:1.15}
.up-caption{margin-top:22px;font-size:16px;line-height:1.85;white-space:pre-line;color:color-mix(in oklab,var(--foreground) 82%,transparent)}
.up-article-foot{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.up-article-foot .button{gap:12px}
/* home teaser */
.updates-home{padding-block:84px}
.updates-sub{margin-top:14px;max-width:460px;font-size:14px;line-height:1.75;color:var(--muted)}
.up-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.up-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.up-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:14px;background:var(--surface)}
.up-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.up-tile:hover img{transform:scale(1.06)}
.up-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,18,28,.82),rgba(6,18,28,.18) 55%,transparent)}
.up-tile-text{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:12px;color:#fff}
.up-tile-text time{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.up-tile-text strong{font-size:12px;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.update-empty-home{font-size:14px;color:var(--muted)}
@media (max-width:1100px){.up-grid{grid-template-columns:repeat(2,1fr)}.up-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.up-grid{grid-template-columns:1fr}.up-tiles{grid-template-columns:repeat(2,1fr)}.up-article-body{padding:22px}.updates-home{padding-block:56px}}

/* label spans inside buttons/links keep body size; only the arrow icon is enlarged */
.button>span:not([aria-hidden]),.text-link>span:not([aria-hidden]){font-size:inherit;line-height:inherit;transform:none!important}

/* ---------- 3D deck: the games / 3D group is a stack of files fanned out sideways (positions come from work.js) ---------- */
@property --glow{syntax:"<color>";inherits:true;initial-value:#006ce5}
.work-deck{position:relative;transition:--glow .7s}
.work-deck:after{display:none}
.work-deck:before{content:"";position:absolute;inset:70px 0 40px;pointer-events:none;background:radial-gradient(ellipse 52% 46% at 50% 55%,color-mix(in oklab,var(--glow) 22%,transparent),transparent 72%);filter:blur(10px)}
.work-deck .work-stage{position:relative;display:grid;justify-items:center;align-items:start;gap:0;overflow:hidden;padding:30px 0 64px;scroll-snap-type:none;perspective:1700px;perspective-origin:50% 38%;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.work-deck .work-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.work-deck .work-slide{grid-area:1/1;flex:none;width:min(80vw,540px);scroll-snap-align:none;transform-origin:50% 62%;opacity:0;transition:box-shadow .4s,border-color .24s;will-change:transform,opacity;box-shadow:0 36px 56px -34px rgba(8,30,56,.6),0 1px 0 var(--line)}
.work-deck .work-slide:hover{opacity:unset}
.work-deck .work-slide.is-active{box-shadow:0 52px 84px -42px color-mix(in oklab,var(--c,var(--accent)) 70%,rgba(8,30,56,.5)),0 0 0 1px color-mix(in oklab,var(--c,var(--accent)) 26%,transparent)}
.work-deck .work-slide:not(.is-active){cursor:pointer}
.work-deck .work-slide:not(.is-active) .work-shot{cursor:pointer}
.work-deck .work-slide:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:var(--background);opacity:var(--dim,0)}
.work-deck .work-stage.is-drag{cursor:grabbing}
.work-deck .work-stage.is-drag .work-shot{pointer-events:none}
.work-glare{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:var(--glare,0);background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.26),transparent 48%)}
@media (max-width:760px){.work-deck .work-stage{perspective:1100px;padding-bottom:48px}.work-deck .work-slide{width:min(78vw,540px)}}
@media (prefers-reduced-motion:reduce){.work-deck{transition:none}}

/* ---------- Case stack: product panels as stacked folders (scroll-driven depth in work.js) ---------- */
.work-stack{display:grid;gap:28px}
.work-case{--dx:68px;--dy:-40px;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;transform-origin:50% 0;background:radial-gradient(ellipse 65% 85% at 88% 18%,color-mix(in oklab,var(--c,var(--accent)) 16%,transparent),transparent 72%),var(--surface);box-shadow:0 44px 70px -52px color-mix(in oklab,var(--c,var(--accent)) 60%,rgba(8,30,56,.5)),0 1px 0 var(--line)}
.work-case:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c,var(--accent));z-index:3}
.work-case:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:var(--background);opacity:var(--dim,0)}
.case-num{position:absolute;right:26px;bottom:-.2em;z-index:0;font-size:clamp(150px,17vw,250px);font-weight:700;letter-spacing:-.07em;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--c,var(--accent)) 30%,transparent);pointer-events:none;user-select:none}
.case-info{position:relative;z-index:1;padding:30px 24px 26px 40px;min-height:0;overflow:auto;scrollbar-width:thin}
.case-info h3{margin-top:14px;font-size:clamp(28px,2.7vw,40px);line-height:1.08}
.case-info .work-sub{font-size:14px;margin-top:8px}
.case-info .work-desc{font-size:14.5px}
.case-info .work-actions{padding-top:16px}
.case-info .work-chips{margin-top:14px}.case-info .work-stats{margin-top:18px}
.case-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;font:650 13px/1 inherit;font-family:inherit;color:var(--foreground);cursor:pointer}
.case-open:hover{color:var(--c,var(--accent))}
.case-stage{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:62px calc(var(--dx) + 28px) 30px 12px;perspective:1500px;perspective-origin:30% 40%}
.case-device{position:relative;transform-style:preserve-3d;will-change:transform}
.case-front{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 46px 60px -34px rgba(8,30,56,.62);transform:translateZ(0)}
.case-front img.is-swap{animation:case-swap .5s var(--ease)}
@keyframes case-swap{from{opacity:0;transform:scale(1.05) translateY(8px)}to{opacity:1;transform:none}}
.case-ghost{position:absolute;inset:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);pointer-events:none;transition:transform .7s var(--ease);box-shadow:0 30px 44px -30px rgba(8,30,56,.5)}
.case-ghost img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-ghost.g1{transform:translate3d(calc(var(--dx)*.5),calc(var(--dy)*.5),-70px)}
.case-ghost.g2{transform:translate3d(var(--dx),var(--dy),-140px);opacity:.8}
.case-stage:hover .case-ghost.g1{transform:translate3d(calc(var(--dx)*.68),calc(var(--dy)*.62),-70px)}
.case-stage:hover .case-ghost.g2{transform:translate3d(calc(var(--dx)*1.3),calc(var(--dy)*1.2),-140px)}
.case-nav{display:flex;align-items:center;gap:16px;margin-top:30px}
.case-dots{display:flex;align-items:center}
.case-dot{width:30px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.case-dot:after{content:"";position:absolute;left:3px;right:3px;top:9px;height:6px;border-radius:6px;background:var(--line);transition:background .24s,transform .3s var(--ease)}
.case-dot:hover:after{background:color-mix(in oklab,var(--c,var(--accent)) 50%,var(--line))}
.case-dot.is-on:after{background:var(--c,var(--accent));transform:scaleX(1.25)}
.case-cap{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.work-glare{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:var(--glare,0);background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.26),transparent 48%)}
@media (min-width:980px) and (min-height:740px){
  .work-stack{gap:40px}
  .work-case{position:sticky;top:calc(112px + min(var(--i),5)*14px);height:560px}
}
@media (max-width:979px),(max-height:739px){
  .work-case{--dx:40px;--dy:-24px;grid-template-columns:1fr}
  .case-stage{order:-1;padding:44px calc(var(--dx) + 20px) 4px 20px}
  .case-info{padding:20px 24px 28px;overflow:visible}
  .case-num{font-size:140px;bottom:auto;top:-20px}
  .case-nav{margin-top:22px}
}
@media (max-width:560px){.work-case{--dx:26px;--dy:-16px;border-radius:16px}.case-stage{padding:34px calc(var(--dx) + 14px) 0 14px}.case-info .work-stats{grid-template-columns:repeat(2,1fr)}.case-cap{display:none}}
@media (prefers-reduced-motion:reduce){.case-ghost,.case-dot:after{transition:none}.case-front img.is-swap{animation:none}}

/* ---------- Services: overview tiles, sticky pillar nav, pillar sections, service cards, process timeline ---------- */
.svc-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;color:var(--c,var(--accent));background:color-mix(in oklab,var(--c,var(--accent)) 11%,var(--background));border:1px solid color-mix(in oklab,var(--c,var(--accent)) 24%,var(--line));transition:background .3s,transform .4s var(--ease)}
.svc-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-icon svg *{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes svc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.svc-tile:hover .svc-icon svg *,.svc-card:hover .svc-icon svg *{animation:svc-draw .95s var(--ease)}
.svc-tile:hover .svc-icon,.svc-card:hover .svc-icon{transform:translateY(-2px) rotate(-4deg);background:color-mix(in oklab,var(--c,var(--accent)) 18%,var(--background))}

.svc-index{padding-block:76px 28px}
.svc-index .section-heading{align-items:end}
.svc-index-lede{max-width:430px;margin:0;font-size:15px;line-height:1.8;color:var(--muted)}
.svc-index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc-cell{min-width:0}
.svc-cell>*{height:100%}
.svc-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-height:250px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:transform .35s var(--ease),border-color .24s,box-shadow .35s}
.svc-tile:before,.svc-card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,85%) var(--my,0%),color-mix(in oklab,var(--c,var(--accent)) 20%,transparent),transparent 72%)}
.svc-tile:after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c,var(--accent));transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease)}
.svc-tile:hover,.svc-tile:focus-visible{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c,var(--accent)) 50%,var(--line));box-shadow:0 30px 48px -34px color-mix(in oklab,var(--c,var(--accent)) 60%,transparent)}
.svc-tile:hover:before,.svc-card:hover:before,.svc-tile:focus-visible:before{opacity:1}
.svc-tile:hover:after,.svc-tile:focus-visible:after{transform:scaleX(1)}
.svc-tile-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.svc-tile-no{font-size:11px;font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--muted)}
.svc-tile h3{position:relative;margin:14px 0 0;font-size:20px;letter-spacing:-.025em;line-height:1.2}
.svc-tile p{position:relative;margin:0;font-size:13.5px;line-height:1.7;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-tile-foot{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px}
.svc-tile-tag{font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--c,var(--accent))}
.svc-tile-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);font-size:14px;transition:all .3s var(--ease)}
.svc-tile:hover .svc-tile-arrow{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:#fff;transform:rotate(45deg)}

.service-details{padding-bottom:40px}
.pillar-nav{position:sticky;top:113px;z-index:20;margin:0 0 8px;display:flex;pointer-events:none}
.pillar-nav-track{pointer-events:auto;display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:99px;background:color-mix(in oklab,var(--background) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 14px 30px -22px rgba(8,30,56,.5);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pillar-nav-track::-webkit-scrollbar{display:none}
.pillar-nav a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 18px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted);transition:background .3s,color .3s}
.pillar-nav a span{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--c,var(--accent));font-variant-numeric:tabular-nums;transition:color .3s}
.pillar-nav a:hover{color:var(--foreground)}
.pillar-nav a[aria-current=true]{background:var(--foreground);color:var(--background)}
.pillar-nav a[aria-current=true] span{color:inherit;opacity:.7}

.pillar{padding-block:72px 28px;scroll-margin-top:150px}
.pillar+.pillar{border-top:1px solid var(--line);margin-top:48px}
.pillar-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.pillar.is-flip .pillar-head{direction:rtl}
.pillar.is-flip .pillar-head>*{direction:ltr}
.pillar-intro h2{max-width:600px;margin-top:22px;font-size:clamp(34px,4.1vw,58px);letter-spacing:-.04em;line-height:1.04}
.pillar-intro .eyebrow{color:var(--c,var(--accent))}
.pillar-intro .scroll-highlight{max-width:540px;margin-top:24px}
.pillar-tools{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.pillar-tools li{padding:6px 13px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid color-mix(in oklab,var(--c,var(--accent)) 28%,var(--line));background:color-mix(in oklab,var(--c,var(--accent)) 8%,var(--background))}
.pillar-art{position:relative;justify-self:center;width:100%;max-width:480px}
.pillar-art:before{content:"";position:absolute;inset:-9% -7%;z-index:-1;border-radius:36px;background:radial-gradient(closest-side,color-mix(in oklab,var(--c,var(--accent)) 24%,transparent),transparent);filter:blur(12px)}
.pillar-art .studio-illustration{border-radius:20px;overflow:hidden;border-color:color-mix(in oklab,var(--c,var(--accent)) 24%,var(--line));box-shadow:0 40px 60px -44px color-mix(in oklab,var(--c,var(--accent)) 70%,transparent)}
.pillar-art-no{position:absolute;right:-6px;bottom:-34px;font-size:96px;font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--c,var(--accent)) 38%,transparent);pointer-events:none}
.pillar-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
.svc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:30px 30px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:transform .35s var(--ease),border-color .24s,box-shadow .35s}
.svc-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c,var(--accent)) 50%,var(--line));box-shadow:0 34px 54px -38px color-mix(in oklab,var(--c,var(--accent)) 60%,transparent)}
.svc-card>*{position:relative}
.svc-card h3{margin:22px 0 0;font-size:clamp(21px,1.8vw,26px);letter-spacing:-.03em;line-height:1.15}
.svc-card p{margin:10px 0 22px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.svc-points{display:grid;gap:11px;margin:auto 0 0;padding:20px 0 0;list-style:none;border-top:1px dashed var(--line)}
.svc-points li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.55}
.svc-points li:before{content:"";position:absolute;left:0;top:.08em;width:17px;height:17px;border-radius:50%;background:color-mix(in oklab,var(--c,var(--accent)) 14%,transparent)}
.svc-points li:after{content:"";position:absolute;left:6.2px;top:.36em;width:4px;height:8px;border:solid var(--c,var(--accent));border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
.pillar-foot{display:flex;flex-wrap:wrap;gap:20px 44px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.pillar-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.pillar-label{font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pillar-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pillar-chips li{padding:6px 13px;border:1px solid var(--line);border-radius:99px;font-size:12px;font-weight:600;background:var(--background)}
.pillar-chips.is-work a{display:inline-flex;align-items:center;gap:8px;transition:color .24s}
.pillar-chips.is-work i{width:7px;height:7px;border-radius:50%;background:var(--w,var(--accent))}
.pillar-chips.is-work li:hover{border-color:var(--w,var(--c,var(--accent)))}
.pillar-chips li.pillar-more{border-style:dashed;color:var(--c,var(--accent))}

.process-list{position:relative}
.process-list li{position:relative}
.process-list li:not(:last-child):after{content:"";position:absolute;left:14px;top:34px;bottom:2px;width:1px;background:linear-gradient(var(--accent),var(--line))}
.process-list .row-number{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--accent);border-radius:50%;background:var(--background);font-weight:700;font-variant-numeric:tabular-nums;position:relative;z-index:1}

@media (max-width:1100px){.svc-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pillar-head{gap:48px}}
@media (max-width:900px){
  .pillar-head{grid-template-columns:1fr;gap:36px}.pillar.is-flip .pillar-head{direction:ltr}
  .pillar-art{max-width:420px;justify-self:start}.pillar-art:before{inset:-6% -1%}.pillar-art-no{font-size:72px;bottom:-26px;right:0}
  .pillar-cards{grid-template-columns:1fr;margin-top:44px}
  .pillar-nav{top:88px}.pillar-nav-track{border-radius:16px}
  .pillar{padding-top:56px;scroll-margin-top:136px}
}
@media (max-width:560px){.svc-index-grid{grid-template-columns:1fr}.svc-tile{min-height:0}.svc-card{padding:24px 22px}.pillar-nav a{padding:9px 14px}.svc-index-lede{max-width:none}}
@media (prefers-reduced-motion:reduce){.svc-tile,.svc-card,.svc-icon,.svc-tile:after,.svc-tile-arrow{transition:none}.svc-tile:hover .svc-icon svg *,.svc-card:hover .svc-icon svg *{animation:none}}

/* ---------- Marquee (cross): sit in the middle of the gap between the sections around it, not hanging low ---------- */
.marquee-band[data-variant=cross]{position:relative;top:calc(-1 * clamp(24px,7.8vw,112px))}

/* ---------- Our team: leadership tier + team tier, role-tinted cards ---------- */
.clients-num{display:inline-flex;align-items:baseline;font-style:normal}
.clients-num i{font-style:normal;font-size:clamp(44px,5.2vw,68px);font-weight:620;letter-spacing:-.045em;line-height:.9;color:var(--accent);margin-left:.04em}
.about-team{padding-block:88px}
.team-tier+.team-tier{margin-top:64px}
.team-tier-label{display:flex;align-items:center;gap:16px;margin:0 0 22px;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.team-tier-label:after{content:"";flex:1;height:1px;background:var(--line)}
.team-tier-label b{order:3;font-weight:650;font-variant-numeric:tabular-nums;color:var(--foreground)}
.team-grid{--gap:20px;--cols:var(--cols-d,5);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.team-cell{min-width:0;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.team-tier.is-lead .team-grid{justify-content:flex-start}
.team-card{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 20px 26px;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:transform .35s var(--ease),border-color .24s,box-shadow .35s}
.team-card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--c,var(--accent)) 18%,transparent),transparent 72%)}
.team-card:after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c,var(--accent));transform:scaleX(.16);transform-origin:left;transition:transform .5s var(--ease)}
.team-card:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--c,var(--accent)) 45%,var(--line));box-shadow:0 30px 48px -34px color-mix(in oklab,var(--c,var(--accent)) 60%,transparent)}
.team-card:hover:before{opacity:1}.team-card:hover:after{transform:scaleX(1)}
.team-photo{position:relative;flex:none;width:124px;height:124px}
.team-photo:before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--c,var(--accent)) 34%,transparent),transparent);filter:blur(6px);opacity:.55;transition:opacity .4s,transform .5s var(--ease)}
.team-photo img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:34%;border:3px solid var(--background);box-shadow:0 0 0 1px color-mix(in oklab,var(--c,var(--accent)) 30%,var(--line)),0 18px 28px -18px rgba(8,30,56,.55);transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.team-card:hover .team-photo img{transform:scale(1.07) rotate(-2.5deg);border-radius:50%}
.team-card:hover .team-photo:before{opacity:1;transform:scale(1.12)}
.team-info{position:relative;display:grid;gap:10px;justify-items:center}
.team-card h3{margin:0;font-size:18px;letter-spacing:-.025em;line-height:1.2;color:var(--foreground)}
.team-role{margin:0;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:650;letter-spacing:.04em;color:var(--c,var(--accent));background:color-mix(in oklab,var(--c,var(--accent)) 11%,var(--background));border:1px solid color-mix(in oklab,var(--c,var(--accent)) 24%,var(--line))}
/* leadership: bigger, horizontal */
.team-tier.is-lead .team-card{flex-direction:row;text-align:left;gap:24px;padding:28px 28px 28px 26px}
.team-tier.is-lead .team-photo{width:112px;height:112px}
.team-tier.is-lead .team-info{justify-items:start;gap:12px}
.team-tier.is-lead .team-card h3{font-size:clamp(19px,1.7vw,23px)}
.team-tier.is-lead .team-role{order:-1}
@media (max-width:1100px){.team-grid{--cols:min(var(--cols-d,5),3)}.team-tier.is-lead .team-grid{--cols:min(var(--cols-d,3),2)}}
@media (max-width:760px){.about-team{padding-block:64px}.team-grid{--gap:16px;--cols:min(var(--cols-d,5),2)}.team-tier.is-lead .team-grid{--cols:1}.team-card{padding:24px 14px 22px}.team-photo{width:104px;height:104px}.team-card h3{font-size:16px}}
@media (prefers-reduced-motion:reduce){.team-card,.team-photo img,.team-photo:before,.team-card:after{transition:none}.team-card:hover .team-photo img{transform:none}}

/* ---------- About: Spero logo stage (pieces assemble on scroll, then the mark swings like a turntable; driven by app.js) ---------- */
.spero-stage{--u:1.12px;--sp-ink:#000072;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,2.6vw,34px);width:100%;max-width:500px;min-height:clamp(400px,36vw,480px);padding:44px 24px 38px;border:1px solid var(--line);border-radius:24px;overflow:hidden;perspective:1100px;background:radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 72%),var(--surface)}
.dark .spero-stage{--sp-ink:#fff}
.spero-stage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 45%,#000,transparent 78%);mask-image:radial-gradient(ellipse 62% 56% at 50% 45%,#000,transparent 78%)}
.sp-rings i{position:absolute;left:50%;top:43%;border-radius:50%;border:1px dashed color-mix(in oklab,var(--accent) 38%,transparent);pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.sp-rings i:nth-child(1){width:290px;height:290px}
.sp-rings i:nth-child(2){width:400px;height:400px;border-style:solid;border-color:color-mix(in oklab,var(--accent) 16%,transparent)}
.sp-rings i:nth-child(3){width:520px;height:520px}
.sp-scene{position:relative;z-index:1;transform-style:preserve-3d;will-change:transform}
.sp-mark{position:relative;width:calc(93 * var(--u));height:calc(215 * var(--u));transform-style:preserve-3d}
.sp-part{position:absolute;transform-style:preserve-3d;will-change:transform,opacity;transform:translate3d(var(--dx,0px),var(--dy,0px),var(--dz,0px)) rotate(calc(var(--base,0deg) + var(--rz,0deg))) scale(var(--s,1));opacity:var(--o,1)}
.sp-d1{left:calc(42.1 * var(--u));top:calc(-.3 * var(--u));width:calc(38 * var(--u));height:calc(38 * var(--u))}
.sp-c1{--base:45deg;left:calc(-2.5 * var(--u));top:calc(58.4 * var(--u));width:calc(106 * var(--u));height:calc(38 * var(--u))}
.sp-c2{--base:45deg;left:calc(-10.5 * var(--u));top:calc(119.5 * var(--u));width:calc(106 * var(--u));height:calc(38 * var(--u))}
.sp-d2{left:calc(12.9 * var(--u));top:calc(178.1 * var(--u));width:calc(38 * var(--u));height:calc(38 * var(--u))}
.sp-face{position:absolute;inset:0;border-radius:999px;background:color-mix(in oklab,var(--sp-ink) 70%,#3b6cff);transform:translateZ(calc(var(--k) * -3.4px))}
.sp-face:first-child{background:linear-gradient(135deg,color-mix(in oklab,var(--sp-ink) 93%,#5b8cff),var(--sp-ink) 55%)}
.dark .sp-face:first-child{background:linear-gradient(135deg,#fff,#dbe6ff 85%)}
.sp-word{position:relative;z-index:1;width:min(64%,300px);clip-path:inset(0 var(--wipe,0%) 0 0);opacity:var(--wo,1);transform:translateY(var(--wy,0px))}
.sp-word img{display:block;width:100%;height:auto}
.sp-word img.logo-dark,.dark .sp-word img.logo-light{display:none}
.dark .sp-word img.logo-dark{display:block}
@media (max-width:760px){.spero-stage{--u:.9px;min-height:380px;padding-top:36px}.sp-rings i:nth-child(1){width:250px;height:250px}.sp-rings i:nth-child(2){width:340px;height:340px}.sp-rings i:nth-child(3){width:430px;height:430px}}
@media (prefers-reduced-motion:reduce){.sp-part,.sp-scene{will-change:auto}}

/* About: the big SPERO heading is the lettering from the logo itself */
.sp-heading{margin:0 0 6px;line-height:0}
.sp-heading img{display:block;width:min(100%,380px);height:auto}
.sp-heading img.logo-dark,.dark .sp-heading img.logo-light{display:none}
.dark .sp-heading img.logo-dark{display:block}