/* Shared screenshot viewer for portfolios and individual case studies. */
.pf-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#101217;color:#f5f5f7;overflow:hidden;overscroll-behavior:contain;font-family:var(--sans,Arial,sans-serif)}
.pf-viewer::backdrop{background:#101217f5}
.pf-viewer-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.pf-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));border-bottom:1px solid #ffffff16}
.pf-viewer-heading{min-width:0}.pf-viewer-heading h2{font-size:clamp(18px,2vw,25px);line-height:1.2;letter-spacing:-.03em;margin:0;color:inherit}
.pf-viewer-heading p,.pf-viewer-heading small{display:block;font-size:11px;line-height:1.5;color:#a8adba;margin:4px 0 0}
.pf-viewer-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.pf-viewer button,.pf-viewer-case{font:inherit;color:inherit;border:1px solid #ffffff28;background:#ffffff08;border-radius:9px;cursor:pointer;transition:background .15s,border-color .15s}
.pf-viewer button:hover,.pf-viewer-case:hover{background:#ffffff16;border-color:#ffffff60}
.pf-viewer button:focus-visible,.pf-viewer a:focus-visible,.pf-viewer-viewport:focus-visible{outline:2px solid #ff7855;outline-offset:3px}
.pf-viewer button:disabled{opacity:.25;cursor:default}
.pf-viewer-zoom,.pf-viewer-case{padding:10px 13px;font-size:12px!important;white-space:nowrap;text-decoration:none}
.pf-viewer-zoom[aria-pressed=true]{background:#ff693326;border-color:#ff8058}
.pf-viewer-close{height:42px;min-width:42px;font-size:24px!important;line-height:1}
.pf-viewer-stage{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:16px;min-height:0;padding:18px 20px}
.pf-viewer-prev,.pf-viewer-next{align-self:center;height:52px;width:48px;font-size:28px!important;line-height:1;z-index:2}
.pf-viewer-viewport{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;border-radius:4px}
.pf-viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:0;cursor:zoom-in}
.pf-viewer.is-zoomed .pf-viewer-viewport{display:block;touch-action:pan-x pan-y pinch-zoom}
.pf-viewer.is-zoomed .pf-viewer-image{max-width:none;max-height:none;margin:0 auto;cursor:zoom-out}
.pf-viewer-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:0 84px 12px;color:#c5c9d3;font-size:12px;line-height:1.5}
.pf-viewer-caption{margin:0;min-width:0}.pf-viewer-count{white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums}
.pf-viewer-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 84px max(18px,env(safe-area-inset-bottom));border-top:1px solid #ffffff12;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.pf-viewer-thumbs button{width:92px;height:61px;padding:4px;flex-shrink:0;border-radius:7px;opacity:.65}
.pf-viewer-thumbs button[aria-pressed=true]{opacity:1;border-color:#ff8058;background:#ff69331a}
.pf-viewer-thumbs img{display:block;width:100%;height:100%;object-fit:contain;border-radius:2px}
.pf-viewer [role=status]{color:#c5c9d3;font-size:12px}
.pf-viewer[aria-busy=true] .pf-viewer-count{opacity:.6}
@media(max-width:680px){
 .pf-viewer-head{gap:10px;padding:12px 12px 10px;flex-wrap:wrap}.pf-viewer-heading{flex:1;min-width:110px}.pf-viewer-heading h2{font-size:19px}.pf-viewer-heading p,.pf-viewer-heading small{font-size:10px}
 .pf-viewer-actions{gap:6px}.pf-viewer-zoom,.pf-viewer-case{font-size:10px!important;padding:9px 8px}.pf-viewer-close{height:36px;min-width:36px;font-size:22px!important}
 .pf-viewer-stage{grid-template-columns:32px minmax(0,1fr) 32px;gap:6px;padding:10px 7px}.pf-viewer-prev,.pf-viewer-next{width:32px;height:44px;font-size:22px!important}
 .pf-viewer-meta{padding:0 12px 10px;font-size:11px;gap:12px}.pf-viewer-caption{max-height:4.5em;overflow:auto}
 .pf-viewer-thumbs{padding:8px 12px max(12px,env(safe-area-inset-bottom));gap:7px}.pf-viewer-thumbs button{width:76px;height:52px}
}
@media(prefers-reduced-motion:reduce){.pf-viewer *{transition:none!important;scroll-behavior:auto!important}}

.pf-viewer-meta{flex-wrap:wrap}.pf-viewer-caption{flex:1}.pf-viewer-status{flex-basis:100%;margin:0}.pf-viewer-retry{padding:6px 10px;margin-left:8px;font-size:11px!important}

@media(max-height:500px){
 .pf-viewer-head{padding:8px 14px;gap:10px}.pf-viewer-heading h2{font-size:18px}.pf-viewer-close{height:34px;min-width:34px}.pf-viewer-zoom,.pf-viewer-case{padding:8px 10px}
 .pf-viewer-stage{padding-top:8px;padding-bottom:8px}.pf-viewer-meta{padding-bottom:8px;font-size:10px;line-height:1.3}.pf-viewer-caption{max-height:2.6em;overflow:auto}
 .pf-viewer-thumbs{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.pf-viewer-thumbs button{width:66px;height:40px}
}

/* Screenshot links preserve the page layout and work without JavaScript. */
.cs-screen-link{display:block;position:relative;line-height:0;color:inherit;cursor:zoom-in;border-radius:inherit}
.cs-screen-link::after{content:'⛶';position:absolute;right:12px;top:12px;display:grid;place-items:center;width:34px;height:34px;font:22px/1 var(--sans,Arial,sans-serif);color:#fff;background:#11151bd9;border:1px solid #ffffff55;border-radius:9px;pointer-events:none;transition:background .2s}
.cs-screen-link:hover::after{background:#ff5a2b}.cs-screen-link:focus-visible{outline:3px solid #ff8058;outline-offset:-3px}