@font-face{font-family:Firs;src:url('/assets/0d0b2d6affee.woff')}@font-face{font-family:Firs;src:url('/assets/0c2d45fa3303.woff');font-weight:500}
*{box-sizing:border-box}body{margin:0;background:#f7f8f8;color:#232323;font-family:Firs,Arial,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{position:fixed;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:26px 36px;background:linear-gradient(#f7f8f8 75%,transparent);pointer-events:none}header>*{pointer-events:auto}header a{color:inherit;text-decoration:none;font-size:14px}header div{text-align:center}h1{font-size:18px;font-weight:500;margin:0}header p{font-size:11px;margin:7px 0 0;color:#6c7175}#reset{width:40px;height:40px;border:0;border-radius:50%;background:#faff9b;font-size:25px}
#gallery{position:fixed;inset:104px 0 66px;overflow:hidden;touch-action:none;cursor:grab}#gallery.dragging{cursor:grabbing}#field{position:absolute;inset:0}.tile{position:absolute;padding:0;border:0;background:none;will-change:transform;text-align:left;cursor:inherit}.tile:focus-visible{outline:3px solid #242424;outline-offset:8px}.tile .art{width:100%;height:100%;overflow:hidden;background:#2453d9;position:relative}.tile .art:before,.large-art{background:#2453d9 url('/assets/gazprombank-reference.png') 59.4203% 32.6593%/114.1393% auto no-repeat}.tile .art:before{content:'';position:absolute;width:560px;aspect-ratio:3.35;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--art-scale,1))}.tile small{position:absolute;bottom:calc(100% + 8px);left:0;font-size:10px;line-height:1.4;font-weight:400;opacity:0;transition:opacity .2s}.tile:hover small,.tile:focus-visible small{opacity:1}footer{position:fixed;bottom:0;left:0;right:0;padding:22px 36px;display:flex;justify-content:space-between;font-size:11px;color:#6c7175;background:#f7f8f8;pointer-events:none}
dialog{border:0;padding:64px 28px 22px;background:#f7f8f8;width:min(1100px,94vw);max-height:90dvh;color:#232323}dialog::backdrop{background:rgba(20,25,35,.75);backdrop-filter:blur(12px)}#close{position:absolute;top:20px;right:28px;border:0;background:transparent;font-size:14px}.large-art{width:100%;aspect-ratio:3.35}dialog p{font-size:13px;margin:22px 0 0}
@media(max-width:600px){header{padding:18px 18px 24px;align-items:flex-start}header a{font-size:11px}h1{font-size:14px}header div{max-width:180px}header p{font-size:9px;line-height:1.5}#reset{width:28px;height:28px;font-size:20px}#gallery{inset:102px 0 72px}footer{padding:16px 18px;gap:15px;font-size:9px}footer span{max-width:150px}dialog{padding:58px 14px 20px}dialog p{font-size:11px}.tile small{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.warp-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mesh-ready .tile .art{opacity:0}.tile[hidden]{display:none}#gallery{cursor:ns-resize}#gallery.dragging{cursor:ns-resize}

/* Full artwork: no screenshot crops, no recompression. */
.tile img.art{display:block;object-fit:contain;background:transparent;user-select:none}
dialog{width:fit-content;max-width:94vw;padding:58px 24px 20px;overflow:auto}
img.large-art{display:block;width:auto;height:auto;max-width:calc(94vw - 48px);max-height:calc(90dvh - 150px);aspect-ratio:auto;object-fit:contain;background:none}
.original-link{display:inline-block;font-size:12px;margin-top:12px;color:#232323;text-underline-offset:3px}
dialog p{max-width:70vw}

.tile img.art,img.large-art{border-radius:8px}
/* Supplied sky artwork stays stationary behind the scrolling gallery. */
body{background:#2453d9 url('/assets/gazprombank/cloud-background-updated.png') center center/cover no-repeat fixed;color:#fff}
header,footer{background:transparent}
header p,footer{color:rgba(255,255,255,.88)}
#reset{color:#232323}
.tile:focus-visible{outline-color:#faff9b}
/* Floating glass controls; artwork scrolls behind them edge to edge. */
#gallery{inset:0}
header{inset:28px 32px auto;padding:0;align-items:flex-start;background:none}
header>a,header>div,#reset,footer>span{
 background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.09));
 border:1px solid rgba(255,255,255,.32);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 24px rgba(9,26,72,.12);
 -webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);
 border-radius:999px;color:#fff;
}
header>a{display:flex;align-items:center;min-height:48px;padding:0 21px;text-shadow:0 1px 8px rgba(0,20,70,.3)}
header>div{position:absolute;left:50%;transform:translateX(-50%);padding:14px 28px;white-space:nowrap}
header h1{font-size:16px}header p{font-size:11px;margin-top:5px;color:rgba(255,255,255,.9)}
#reset{width:48px;height:48px;margin-left:auto;font-size:25px;color:#fff}
header>a,#reset{transition:background .2s ease,box-shadow .2s ease}
header>a:hover,#reset:hover{background-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 28px rgba(9,26,72,.17)}
header a:focus-visible,#reset:focus-visible{outline:2px solid #faff9b;outline-offset:4px}
footer{z-index:3;inset:auto 32px 28px;padding:0;background:none;gap:12px;color:white}
footer>span{padding:14px 20px;font-size:11px;text-shadow:0 1px 8px rgba(0,20,70,.3)}
@media(max-width:600px){
 header{inset:16px 16px auto;min-height:112px}
 header>a{min-height:42px;padding:0 15px;font-size:12px}
 #reset{width:42px;height:42px}
 header>div{top:56px;max-width:calc(100vw - 32px);padding:11px 19px}
 header h1{font-size:13px}header p{font-size:9px;margin-top:4px}
 footer{inset:auto 16px max(16px,env(safe-area-inset-bottom));gap:8px;align-items:flex-end}
 footer>span{max-width:48%;padding:11px 14px;font-size:9px;line-height:1.45;border-radius:20px}
}


/* A larger eye follows the pointer; JS applies the velocity-dependent distortion. */
.portfolio-cursor{position:fixed;left:0;top:0;z-index:9999;width:96px;height:96px;pointer-events:none;opacity:0;will-change:transform;transition:opacity .18s ease}
.portfolio-cursor::before{content:"";position:absolute;inset:0;background:url(/assets/575a0d5c08cc.svg) center/contain no-repeat;transform:scale(.65);transition:transform .22s ease}
.portfolio-cursor.visible{opacity:1}
.portfolio-cursor.visible::before{transform:scale(1)}
@media(pointer:fine){#gallery,#gallery *{cursor:none!important}}

/* Edge-to-edge click target with only the artwork visible. */
dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;background:transparent;overflow:hidden;outline:none}
dialog[open]{display:flex;align-items:center;justify-content:center}
dialog img.large-art{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.portfolio-cursor.is-close::before{background:#252525;border-radius:50%}
.portfolio-cursor.is-close::after{content:"";position:absolute;inset:30px;background:linear-gradient(45deg,transparent calc(50% - 2px),#fafeaa calc(50% - 2px),#fafeaa calc(50% + 2px),transparent calc(50% + 2px)),linear-gradient(-45deg,transparent calc(50% - 2px),#fafeaa calc(50% - 2px),#fafeaa calc(50% + 2px),transparent calc(50% + 2px))}
@media(pointer:fine){dialog,dialog *,dialog::backdrop{cursor:none!important}}
@media(max-width:600px){dialog{padding:12px}dialog img.large-art{border-radius:8px}}

/* The artwork travels from its gallery card and returns on dismissal. */
dialog img.large-art{transform-origin:center;will-change:transform,opacity}
dialog::backdrop{opacity:0;transition:opacity 450ms ease}
dialog.preview-visible::backdrop{opacity:1}
@starting-style{dialog.preview-visible::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog::backdrop{transition:none}}

/* Pointer interactions should not inherit the dialog's keyboard focus ring. */
body:not(.keyboard-navigation) .tile:focus,body:not(.keyboard-navigation) .tile:focus-visible{outline:none}

@media(max-width:600px){body{background-image:url('/assets/gazprombank/cloud-background-mobile.jpg');background-position:center;background-size:cover}}