/* A full-width light field, with real scrollable client previews. */
.work-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.work-heading h2{font:500 44px/1.08 Aeonik,sans-serif;margin:0}
.work-motion-toggle .work-play{display:none}
.previous-work.selected-work{position:relative;isolation:isolate;overflow:hidden;padding:72px 0 80px}
.island-home #work.selected-work{background:#000;color:#fff;--reading-muted:#bdbdbd;--reading-line:#384453}
.selected-work>.shell{position:relative;z-index:1}
.selected-work .work-heading{margin-bottom:18px}
.selected-work .work-heading h2{font-size:clamp(36px,4.8vw,64px);letter-spacing:-.035em}
.work-lighting{position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(transparent,#000 10%,#000 42%,transparent 78%);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 42%,transparent 78%)}
.work-lighting::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 34%,rgb(7 61 105 / .17),transparent 64%)}
.work-lighting svg{width:100%;height:100%;display:block}
.work-rail{stroke:url(#work-rail-gradient);stroke-width:1;vector-effect:non-scaling-stroke}
.work-pulse{stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100 900;animation:work-current var(--work-time) linear var(--work-delay) infinite;animation-play-state:paused}
.work-pulse--bloom{stroke:#078cff;stroke-width:8;opacity:.12}
.work-pulse--tail{stroke:#2ea9ff;stroke-width:1.5;opacity:.85}
.work-pulse--tip{stroke:#daf4ff;stroke-width:2;stroke-dasharray:7 993;animation-name:work-current-tip}
.work-motion-ready:not(.work-motion-suspended) .work-pulse{animation-play-state:running}
@keyframes work-current{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes work-current-tip{from{stroke-dashoffset:907}to{stroke-dashoffset:-93}}
.selected-work .work-motion-toggle{flex:none;border-color:#415264;background:#090f17;color:#c5ddeb}
.work-motion-toggle[hidden]{display:none}
.work-motion-toggle[aria-pressed=true] .work-play{display:block}
.work-motion-toggle[aria-pressed=true] .work-pause{display:none}
.selected-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.selected-work-project{min-width:0;margin:0}
.work-stage{--tilt-x:4deg;--tilt-y:-4deg;position:relative;display:grid;place-items:center;min-width:0;height:420px;perspective:1600px}
.selected-work-project:nth-child(2) .work-stage{--tilt-y:4deg}
.work-browser{position:relative;width:89%;overflow:hidden;padding:5px;border:1px solid #536271;border-radius:12px;background:linear-gradient(145deg,#36414e 0%,#0d141c 19%,#090e14 72%,#33404d);box-shadow:inset 0 1px 1px rgb(240 249 255 / .45),inset 0 -1px 1px #516579,0 18px 35px -18px #000,0 0 28px -14px #5ab9ff;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);transform-origin:50% 60%}
.work-browser-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:30px;padding:0 10px;color:#c3cfdd;font:500 10px/1 Hellix,sans-serif;letter-spacing:.015em}
.work-browser-dots{display:flex;gap:5px}.work-browser-dots i{width:5px;height:5px;border:1px solid #8394a7;border-radius:50%;box-shadow:inset 0 1px 1px #a6b4c5}
.work-browser-control{justify-self:end;width:9px;height:7px;border:1px solid #8394a7;border-radius:1px}
.work-screen{width:100%;aspect-ratio:16/10;overflow-x:hidden;overflow-y:auto;border-radius:3px;background:#111;scrollbar-width:thin;scrollbar-color:#52677d #101720;overscroll-behavior:auto;touch-action:pan-y;outline-offset:-3px}
.work-screen::-webkit-scrollbar{width:5px}.work-screen::-webkit-scrollbar-thumb{background:#52677d;border-radius:8px}.work-screen::-webkit-scrollbar-track{background:#101720}
.work-screen>img{display:block;width:100%;height:auto;max-width:none;user-select:none}
.work-screen:focus-visible{outline:2px solid #7ec6ff}
.work-browser:focus-within{transform:none;box-shadow:inset 0 1px 1px #b0c7df,0 0 28px -12px #5ab9ff}
.work-screen-progress{position:absolute;bottom:2px;left:6px;right:6px;height:2px;background:#7ec6ff;transform:scaleX(var(--preview-progress,0));transform-origin:left;pointer-events:none}
.work-stage[data-device=tablet] .work-browser{width:270px;max-width:84%;padding:8px;border-radius:16px}
.work-stage[data-device=tablet] .work-screen{aspect-ratio:3/4;border-radius:6px}
.work-stage[data-device=mobile] .work-browser{width:176px;max-width:60%;padding:6px;border-radius:24px}
.work-stage[data-device=mobile] .work-screen{aspect-ratio:390/760;border-radius:3px 3px 17px 17px}
.work-stage:is([data-device=tablet],[data-device=mobile]) .work-browser-bar{height:22px;display:flex;justify-content:center;font-size:8px}
.work-stage:is([data-device=tablet],[data-device=mobile]) :is(.work-browser-dots,.work-browser-control){display:none}
.work-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px}
.work-device-switch{display:flex;gap:2px;border:1px solid #33414f;padding:3px;background:#080e15}
.work-device-switch[hidden]{display:none}
.work-device-switch button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px;border:1px solid transparent;border-radius:0;background:transparent;color:#acbac9;font:12px/1 Hellix,sans-serif;cursor:pointer}
.work-device-switch button[aria-pressed=true]{background:#14283c;border-color:#3a6388;color:#e9f6ff}
.work-device-switch button:hover{color:#fff;background:#17212c}
.work-device-switch button:focus-visible{outline:2px solid #7ec6ff;outline-offset:2px}
.work-device-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.work-scroll-hint{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#a9bacb;font:12px/1.3 Hellix,sans-serif}
.work-scroll-hint>span{color:#84caff;font-size:19px}
.work-preview-status:empty{display:none}
.selected-work-project .work-preview-status{margin:12px 8px 0;font-size:14px;color:#ffcdcd}
.selected-work-project figcaption{padding:28px 8px 0}
.selected-work-project h3{margin:0;font:500 clamp(23px,2.3vw,30px)/1.2 Aeonik,sans-serif;letter-spacing:-.025em;color:inherit}
.selected-work-project p{max-width:48ch;margin:14px 0 0;font:17px/1.5 Hellix,sans-serif;color:var(--reading-muted,#bdbdbd)}
.work-services{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.work-services li{max-width:100%;padding:7px 12px;border:1px solid var(--reading-line,#384453);border-radius:100px;color:inherit;font:13px/1.2 Hellix,sans-serif;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.work-stage:hover .work-browser{box-shadow:inset 0 1px 1px #b0c7df,0 0 36px -14px #5ab9ff}}
@media(max-width:1099px){.selected-work-grid{gap:28px}.work-device-switch button>span{display:none}.work-preview-controls{margin-inline:0}.selected-work-project figcaption{padding-inline:0}}
@media(max-width:799px){
 .previous-work.selected-work{padding:48px 0 56px}
 .work-stage{height:350px}.work-browser{width:92%;padding:4px;border-radius:9px}
 .work-browser-bar{height:24px;padding-inline:7px;font-size:9px}
 .work-stage[data-device=tablet] .work-browser{width:228px}
 .work-stage[data-device=mobile] .work-browser{width:146px}
 .selected-work-project p{font-size:16px}
 .work-services{gap:6px;margin-top:18px}.work-services li{padding:7px 10px;font-size:12px}
 .work-lighting svg{width:180%;max-width:none;margin-left:-40%}
}
@media(max-width:599px){
 .selected-work-grid{grid-template-columns:1fr;gap:44px}
 .selected-work .work-heading{margin-bottom:8px}
 .work-stage{height:350px}.work-stage[data-device=tablet] .work-browser{width:228px}.work-stage[data-device=mobile] .work-browser{width:160px}
 .work-preview-controls{gap:8px}.work-device-switch button{padding:7px}
 .selected-work-project figcaption{padding-top:24px}
 .selected-work-project h3{font-size:24px}.selected-work-project p{margin-top:10px}
}
@media(hover:none),(pointer:coarse){.work-browser{transform:none}}
@media(prefers-reduced-motion:reduce){.work-pulse{display:none;animation:none}.work-browser{transform:none!important;transition:none}.work-motion-toggle{display:none!important}}