/* Work sample detail (/workSampleDetail/{id}). Scoped to .wd-page. Same brand
   vocabulary as the other redesigned pages (#10155c ink, #7057e8 accent, coral
   #f45158, yellow #f2c21a, mint #42d3a1, 16px cards, avatar-btn CTAs); the live
   device stage is this page's own motif. No transforms on ancestors of a
   device: full-screen mode relies on position:fixed. */
.wd-page{--wd-ink:#10155c;--wd-accent:#7057e8;--wd-coral:#f45158;--wd-yellow:#f2c21a;--wd-mint:#42d3a1;--wd-muted:#757589;--wd-line:#ece9f7;--wd-surface:#f8f7fd;background:#fff;color:var(--wd-ink)}
.wd-page *{box-sizing:border-box}
.wd-page main{text-align:right}
.wd-page [hidden]{display:none!important}
.wd-page main h1,.wd-page main h2{font-family:inherit;font-weight:800;margin:0}
.wd-skip{position:absolute;right:16px;top:-60px;z-index:100;background:#fff;color:var(--wd-ink);padding:10px 16px;border-radius:10px}
.wd-skip:focus{top:12px}
.wd-locked{overflow:hidden}

/* ----- Stage ----- */
.wd-stage{position:relative;padding:150px 0 130px;color:#fff;background:radial-gradient(ellipse 55% 45% at 82% 18%,#7057e866,transparent 70%),radial-gradient(ellipse 45% 40% at 10% 70%,#f4515833,transparent 70%),radial-gradient(ellipse 40% 35% at 55% 100%,#42d3a126,transparent 70%),var(--wd-ink)}
.wd-stage::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff1f 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(#000,transparent 75%);mask-image:linear-gradient(#000,transparent 75%);pointer-events:none}
.wd-stage-head{position:relative;text-align:center}
.wd-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;font-size:13px;color:#c7c4e6;margin-bottom:18px}
.wd-crumbs a{color:#c7c4e6}
.wd-crumbs a:hover{color:#fff}
.wd-page main .wd-stage h1{color:#fff;font-size:clamp(28px,4vw,50px);line-height:1.5}
.wd-subject{color:#d9d7f0;font-size:17px;margin:8px 0 0}
.wd-page main .wd-live-pill{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;padding:8px 16px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff26;color:#fff;font-size:13px;line-height:1.7}
.wd-live-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--wd-yellow);animation:wd-pulse 1.4s ease-in-out infinite}
.wd-live-pill[data-status="live"] .wd-live-dot{background:var(--wd-mint)}
.wd-live-pill[data-status="off"] .wd-live-dot{background:var(--wd-coral);animation:none}
@keyframes wd-pulse{50%{opacity:.35}}

/* ----- Devices ----- */
.wd-rig{position:relative;width:min(1140px,calc(100% - 48px));margin:46px auto 0;padding:0 0 26px 15%;direction:ltr}
.wd-device{margin:0;position:relative}
.wd-laptop{width:100%}
.wd-phone{position:absolute;left:0;bottom:0;width:21%;z-index:2}
.wd-shell{position:relative;background:#0b0e3f;display:flex;flex-direction:column}
.wd-laptop .wd-shell{border-radius:16px 16px 0 0;border:1px solid #ffffff2e;border-bottom:0;padding:0 10px 10px;box-shadow:0 40px 90px #05072e99}
.wd-phone .wd-shell{border-radius:34px;padding:0 8px 8px;border:1px solid #ffffff40;box-shadow:0 30px 60px #05072ecc}
.wd-bar{display:flex;align-items:center;gap:12px;height:40px;flex:0 0 40px;color:#c7c4e6;direction:ltr}
.wd-phone .wd-bar{height:34px;flex-basis:34px;justify-content:center;position:relative}
.wd-dots{display:flex;gap:6px;flex:0 0 auto}
.wd-dots i{width:10px;height:10px;border-radius:50%;background:var(--wd-coral)}
.wd-dots i:nth-child(2){background:var(--wd-yellow)}
.wd-dots i:nth-child(3){background:var(--wd-mint)}
.wd-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;height:26px;padding:0 12px;border-radius:8px;background:#ffffff14;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-island{width:58px;height:15px;border-radius:999px;background:#000}
.wd-bar-tools{display:flex;gap:2px;flex:0 0 auto}
.wd-phone .wd-bar-tools{position:absolute;right:6px;top:4px}
.wd-tool{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#c7c4e6;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wd-tool:hover{background:#ffffff1f;color:#fff}
.wd-phone [data-reload]{display:none}
.wd-tool:focus-visible,.wd-close:focus-visible,.wd-shield:focus-visible{outline:2px solid #fff;outline-offset:1px}
.wd-screen{position:relative;overflow:hidden;background:#fff;direction:ltr}
.wd-laptop .wd-screen{aspect-ratio:16/10;border-radius:4px}
.wd-phone .wd-screen{aspect-ratio:390/800;border-radius:0 0 26px 26px}
.wd-frame{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.wd-base{position:relative;height:18px;margin:0 -7%;background:linear-gradient(#d9d7f0,#a9a6cf);border-radius:2px 2px 16px 16px}
.wd-base::before{content:'';position:absolute;top:0;left:50%;width:16%;height:7px;margin-left:-8%;background:#8c89b5;border-radius:0 0 8px 8px}

/* Loading */
.wd-loader{position:absolute;inset:0;z-index:2;background:var(--wd-surface);direction:rtl;transition:opacity .45s}
.wd-loader.is-done{opacity:0;pointer-events:none}
.wd-skeleton{position:absolute;inset:0;padding:6%;display:flex;flex-direction:column;gap:5%}
.wd-skeleton i{display:block;border-radius:10px;background:linear-gradient(100deg,#ece9f7 30%,#fff 50%,#ece9f7 70%);background-size:220% 100%;animation:wd-shimmer 1.6s linear infinite}
.wd-skeleton i:nth-child(1){height:8%}
.wd-skeleton i:nth-child(2){flex:1}
.wd-skeleton i:nth-child(3){height:7%;width:70%}
.wd-skeleton i:nth-child(4){height:7%;width:45%}
@keyframes wd-shimmer{to{background-position:-220% 0}}
.wd-loader-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;text-align:center;background:#f8f7fdb3}
.wd-loader-copy strong{color:var(--wd-ink);font-size:clamp(13px,1.5vw,18px);line-height:1.7}
.wd-spinner{width:30px;height:30px;border-radius:50%;border:3px solid #7057e833;border-top-color:var(--wd-accent);animation:wd-spin .8s linear infinite}
@keyframes wd-spin{to{transform:rotate(360deg)}}
.wd-progress{display:block;width:min(240px,70%);height:4px;border-radius:4px;background:#7057e826;overflow:hidden}
.wd-progress i{display:block;height:100%;width:6%;background:var(--wd-accent);border-radius:4px;transition:width .4s linear;margin-right:auto;margin-left:0}
.wd-loader-out{font-size:13px;color:var(--wd-accent);text-decoration:underline}

/* Fallback */
.wd-fallback{position:absolute;inset:0;z-index:2;overflow-y:auto;background:#fff;direction:rtl}
.wd-fallback img{display:block;width:100%}
.wd-fallback:not(.is-tall){overflow:hidden}
.wd-fallback:not(.is-tall) img{position:absolute;inset:0;height:100%;object-fit:cover}
.wd-fallback:not(.is-tall) .wd-fallback-note{position:absolute;left:0;right:0}
.wd-fallback-note{position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#10155ceb;color:#fff;font-size:13px;line-height:1.7;text-align:center}
.wd-fallback-note strong{font-weight:400}
.wd-fallback-note span{display:flex;justify-content:center;gap:14px}
.wd-fallback-note a,.wd-fallback-note button{background:none;border:0;padding:0;color:var(--wd-mint);font:inherit;text-decoration:underline;cursor:pointer}

/* Keeps the page scrollable past the devices until the visitor means to use them. */
.wd-shield{position:absolute;inset:0;z-index:3;border:0;padding:0;background:transparent;cursor:pointer;direction:rtl}
.wd-shield span{display:none}
@media(hover:none){
    .wd-shield span{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 12px;border-radius:999px;background:#10155cdd;color:#fff;font-size:13px}
    .wd-phone .wd-shield span{font-size:0;gap:0;padding:8px 10px}
    .wd-phone .wd-shield span i{font-size:13px}
}

/* Full screen: the same device, restyled in place. */
.wd-backdrop{position:fixed;inset:0;z-index:100000;background:#05072ef2}
.wd-device.is-focus{position:fixed;z-index:100001;top:56px;bottom:12px;left:0;right:0;margin-inline:auto;display:flex;flex-direction:column}
.wd-laptop.is-focus{width:calc(100vw - 24px)}
.wd-phone.is-focus{height:calc(100dvh - 68px);width:calc((100dvh - 68px - 42px)*.4875 + 16px);max-width:calc(100vw - 16px)}
.wd-device.is-focus .wd-shell{flex:1;min-height:0;border-radius:14px}
.wd-phone.is-focus .wd-shell{border-radius:34px}
.wd-device.is-focus .wd-screen{flex:1;min-height:0;aspect-ratio:auto}
.wd-device.is-focus .wd-base{display:none}
.wd-close{position:fixed;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:var(--wd-ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;direction:rtl}

.wd-dock{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:34px}
.wd-hint{display:flex;align-items:center;gap:8px;color:#d9d7f0;font-size:13px;margin:0}
@media(hover:none){.wd-hint{display:none}}

/* ----- Project file ----- */
.wd-eyebrow{display:block;color:var(--wd-accent);font-size:13px;font-weight:700;margin-bottom:8px}
.wd-facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:-66px;background:#fff;border:1px solid var(--wd-line);border-radius:16px;box-shadow:0 26px 56px #10155c1f;overflow:hidden}
.wd-fact{padding:24px 26px;border-inline-start:1px solid var(--wd-line);min-width:0}
.wd-fact:first-child{border-inline-start:0}
.wd-fact span{display:block;color:var(--wd-muted);font-size:13px;margin-bottom:6px}
.wd-fact strong{display:block;color:var(--wd-ink);font-size:16px;font-weight:800;line-height:1.8;overflow-wrap:anywhere}
.wd-fact[class] strong[dir="ltr"]{text-align:right}
.wd-fact a{color:var(--wd-accent)}

.wd-story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding-top:84px;padding-bottom:84px;align-items:start}
.wd-page main .wd-side-title h2{color:var(--wd-ink);font-size:24px;line-height:1.7}
.wd-tag{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:999px;background:#42d3a126;color:#14835f;font-size:13px;font-weight:700}
.wd-page main .wd-lead{margin:0;color:var(--wd-ink);font-size:clamp(20px,2.4vw,32px);line-height:1.9;font-weight:800}
.wd-article{color:var(--wd-muted);font-size:15px;line-height:2.1;overflow-wrap:anywhere}
.wd-page main .wd-article :is(h1,h2,h3,h4){color:var(--wd-ink);font-size:18px;line-height:1.8;margin:26px 0 8px;font-weight:800}
.wd-page main .wd-article :is(h1,h2){font-size:21px}
.wd-page main .wd-article h4{font-size:16px}
.wd-page main .wd-article > :first-child{margin-top:0}
.wd-article p{color:inherit;font-size:inherit;line-height:inherit;margin:0 0 14px}
.wd-article ul,.wd-article ol{padding-right:20px;margin:0 0 14px}
.wd-article img{max-width:100%;height:auto;border-radius:12px}
.wd-article-wrap{position:relative}
.wd-article-wrap .wd-article{max-height:420px;overflow:hidden}
.wd-article-wrap.is-clamped:not(.is-open) .wd-article{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.wd-article-wrap.is-open .wd-article{max-height:none}
.wd-more{margin-top:12px;min-height:44px;padding:0 20px;border:1px solid var(--wd-accent);border-radius:999px;background:#fff;color:var(--wd-accent);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.wd-more:hover{background:var(--wd-accent);color:#fff}

/* ----- Features: an index, not a bullet list ----- */
.wd-features{padding:76px 0;background:var(--wd-surface)}
.wd-page main .wd-features-head h2{color:var(--wd-ink);font-size:28px;line-height:1.7}
.wd-features-head{margin-bottom:30px}
.wd-feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.wd-feature{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid #dfdbf2}
.wd-feature-no{flex:0 0 auto;font-size:26px;font-weight:800;color:var(--wd-accent);line-height:1.2;transition:color .2s}
.wd-feature:nth-child(4n+2) .wd-feature-no{color:var(--wd-coral)}
.wd-feature:nth-child(4n+3) .wd-feature-no{color:#14a97c}
.wd-feature:nth-child(4n) .wd-feature-no{color:#c79c05}
.wd-feature-text{color:var(--wd-ink);font-size:16px;line-height:1.9}

/* ----- Showcase ----- */
.wd-showcase{padding-top:76px}
.wd-showcase figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 26px 56px #10155c1f}
.wd-showcase img{display:block;width:100%;height:auto}
.wd-showcase figure.is-tall{height:min(620px,80vh)}
.wd-showcase figure.is-tall img{height:100%;object-fit:cover;object-position:top;transition:object-position 9s linear}
.wd-showcase figure.is-tall:hover img,.wd-showcase figure.is-tall:focus img{object-position:bottom}

/* ----- Other projects ----- */
.wd-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:76px;padding-bottom:84px}
.wd-pager-card{position:relative;display:block;height:230px;border-radius:16px;overflow:hidden;background:var(--wd-ink);color:#fff}
.wd-pager-card img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s,opacity .3s}
.wd-pager-card:hover img{transform:scale(1.05);opacity:.75}
.wd-pager-copy{position:absolute;inset:auto 0 0;padding:22px 24px;background:linear-gradient(transparent,#10155ce6);display:flex;flex-direction:column;gap:2px}
.wd-pager-copy small{font-size:13px;color:#d9d7f0}
.wd-pager-copy strong{font-size:18px;font-weight:800;line-height:1.7;color:#fff}
.wd-pager-card:focus-visible{outline:3px solid var(--wd-accent);outline-offset:3px}

.wd-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.wd-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wd-page *{animation:none!important;transition:none!important}.wd-reveal{opacity:1;transform:none}}

/* ----- Responsive ----- */
@media(max-width:991px){
    .wd-stage{padding-top:130px}
    .wd-story{grid-template-columns:1fr;gap:18px;padding-top:60px;padding-bottom:60px}
    .wd-fact:nth-child(odd){border-inline-start:0}
    .wd-fact{border-bottom:1px solid var(--wd-line)}
}
@media(max-width:767px){
    .wd-stage{padding:120px 0 110px}
    .wd-subject{font-size:15px}
    .wd-rig{width:calc(100% - 32px);padding:0 0 46px 13%;margin-top:32px}
    .wd-phone{width:30%}
    .wd-laptop .wd-shell{padding:0 5px 5px;border-radius:10px 10px 0 0}
    .wd-laptop .wd-bar{height:26px;flex-basis:26px;gap:6px}
    .wd-dots i{width:6px;height:6px}
    .wd-dots{gap:3px}
    .wd-url{height:18px;padding:0 6px}
    .wd-tool{width:24px;height:24px}
    .wd-laptop [data-reload]{display:none}
    .wd-base{height:10px}
    .wd-phone .wd-shell{border-radius:16px;padding:0 3px 3px}
    .wd-phone .wd-bar{height:16px;flex-basis:16px}
    .wd-phone .wd-bar-tools{display:none}
    .wd-island{width:26px;height:7px}
    .wd-phone .wd-screen{border-radius:0 0 12px 12px}
    .wd-phone .wd-loader-copy strong,.wd-phone .wd-progress{display:none}
    .wd-phone .wd-spinner{width:18px;height:18px;border-width:2px}
    .wd-phone .wd-fallback-note{display:none}
    .wd-phone.is-focus .wd-shell{border-radius:30px;padding:0 6px 6px}
    .wd-phone.is-focus .wd-bar{height:30px;flex-basis:30px}
    .wd-phone.is-focus .wd-loader-copy strong,.wd-phone.is-focus .wd-progress{display:block}
    .wd-phone.is-focus .wd-fallback-note{display:flex}
    .wd-laptop.is-focus .wd-bar-tools,.wd-phone.is-focus .wd-bar-tools{display:none}
    .wd-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-54px}
    .wd-fact{padding:18px}
    .wd-feature-list{grid-template-columns:1fr}
    .wd-features{padding:56px 0}
    .wd-showcase{padding-top:56px}
    .wd-pager{grid-template-columns:1fr;padding-top:56px;padding-bottom:60px}
    .wd-pager-card{height:190px}
}