html { scroll-behavior:smooth; }
body { margin:0; background:#dde3e7; }
[hidden] { display:none!important; }
.t396__artboard { overflow:hidden; }
.tn-molecule { box-sizing:border-box; border-width:0; }
video { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.tn-atom__videoiframe { overflow:hidden; border-radius:inherit; }
.tn-elem[data-elem-type="video"] .tn-atom { overflow:hidden; }
.fixed-navigation { position:relative; z-index:100; }
.fixed-navigation .t396__artboard { opacity:0!important; visibility:hidden; pointer-events:none; transform:translateY(100%); transition:opacity .3s ease,transform .3s ease,visibility 0s .3s!important; }
.fixed-navigation .t396__artboard.is-visible { opacity:1!important; visibility:visible; transform:translateY(0); transition-delay:0s!important; }
.fixed-navigation .t396__artboard.is-visible > .tn-elem,.fixed-navigation .t396__artboard.is-visible > .tn-group { pointer-events:auto; }
[role="tab"] { cursor:pointer; }
[role="tab"][aria-selected="true"] .tn-atom { background-color:#181818!important; color:#fff!important; }
a:focus-visible,[role="tab"]:focus-visible { outline:2px solid #181818!important; outline-offset:4px; }



@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}



.site-loader{position:fixed;inset:0;display:grid;place-items:center;background:#dde3e7;z-index:10000;pointer-events:none;transition:opacity .4s}.site-loader svg{width:300px;height:300px;animation:loader-spin 1s linear infinite}.site-loader.done{opacity:0}@keyframes loader-spin{to{transform:rotate(360deg)}}

/* 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){.img-cuberto-cursor-1,.img-cuberto-cursor-1 *{cursor:none!important}}

@media(min-width:640px){[data-elem-id="1767962742724000019"] .tn-atom{white-space:nowrap!important}}

/* Portfolio order follows the supplied reference; normal grid flow keeps rows aligned. */
.portfolio-grid{position:absolute;z-index:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-family:'TTFirsNeue',Arial,sans-serif;color:#181818}
.project-card{position:relative;display:block;box-sizing:border-box;overflow:hidden;border-radius:12px;background:#fff;color:#181818!important;text-decoration:none!important;padding:20px;height:336px}
.project-labels{display:flex;position:absolute;left:20px;top:20px;z-index:2}
.project-labels span,.project-year{display:flex;align-items:center;justify-content:center;padding:0 10px;height:24px;border-radius:8px;background:#252525;color:#fff;font-size:12px;line-height:1;white-space:nowrap}
.project-year{position:absolute;right:20px;top:20px;z-index:2}
.project-pair .project-year{background:#dde3e7;color:#181818;font-size:10px;padding:0 5px}
.project-copy{position:relative;margin-top:52px;z-index:1}
.project-card h2{margin:0;font-size:24px;font-weight:500;line-height:1.2}
.project-card p{margin:12px 0 0;font-size:12px;line-height:1.4;color:#505050}
.case-cover{position:absolute;bottom:12px;left:12px;width:calc(100% - 24px);height:160px;object-fit:cover;border-radius:10px;background:#000}
.project-video,.project-gazprom,.project-food{grid-column:1 / -1}
.project-video{height:auto;aspect-ratio:16/9;color:white!important;background:#080909}
.project-video video{position:absolute;inset:0;z-index:0}
.project-video:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.8));pointer-events:none}
.project-video .project-copy{position:absolute;left:20px;right:20px;bottom:24px;z-index:1;margin:0}
.project-video h2{font-size:32px}.project-video p{color:#fff;max-width:310px}
.project-gazprom{height:328px}
.gazprombank-cover{position:absolute;left:20px;right:20px;top:148px;bottom:20px;border-radius:12px;background:#2453d9 url('/assets/gazprombank-reference.png') 59.4203% 32.6593%/114.1393% auto no-repeat}
.project-food{height:184px}.project-food .project-copy{width:48%;margin-top:44px}.project-food .case-cover{left:auto;right:12px;width:45%}.project-food .project-year{top:auto;bottom:16px;right:auto;left:20px;height:18px;font-size:10px}
.portfolio-grid.compact{gap:8px}.compact .project-card{border-radius:8px;padding:10px;height:178px}.compact .project-labels{top:10px;left:10px}.compact .project-labels span,.compact .project-year{height:14px;padding:0 6px;font-size:7px;border-radius:5px}.compact .project-year{right:10px;top:10px}.compact .project-pair .project-year{top:30px;font-size:6px}
.compact .project-copy{margin-top:34px}.compact .project-card h2{font-size:14px}.compact .project-card p{font-size:7px;margin-top:8px}.compact .case-cover{left:7px;bottom:7px;width:calc(100% - 14px);height:85px;border-radius:7px}
.compact .project-video{height:auto;aspect-ratio:16/9}.compact .project-video .project-copy{left:12px;right:12px;bottom:12px;margin:0}.compact .project-video h2{font-size:21px}.compact .project-video p{font-size:9px;max-width:240px}
.compact .project-gazprom{height:178px}.compact .project-gazprom h2{font-size:17px}.compact .project-gazprom p{font-size:8px}.compact .gazprombank-cover{left:12px;right:12px;top:84px;bottom:12px;border-radius:8px}
.compact .project-food{height:112px}.compact .project-food .project-copy{margin-top:29px;width:47%}.compact .project-food .case-cover{left:auto;right:7px;width:45%;height:98px}.compact .project-food .project-year{top:auto;bottom:8px;left:10px;right:auto;height:12px;font-size:6px}
.compact .project-pair{height:194px}
.project-food .project-year{top:20px;right:20px;bottom:auto;left:auto}
.compact .project-food .project-year{top:10px;right:10px;bottom:auto;left:auto}
.compact .project-pair .project-year{top:10px}
/* Intro geometry from Figma frame 8:439 (1200px artboard). */
@media(min-width:980px){
 [data-elem-id="1767730560967"]{left:calc(50% + 230px)!important;top:68px!important;width:493px!important;height:880px!important;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 80%);mask-image:linear-gradient(to bottom,#000 50%,transparent 80%)}
 [data-elem-id="1767730560967"] .tn-atom{position:absolute;left:-116.3065px;top:-7.461px;width:603.069px!important;height:898.915px!important;transform:rotate(-8.02deg);background-image:url(/assets/yulia-portrait-figma.png)!important;background-size:cover!important;background-position:center!important}
 [data-group-id="1767961487977000004"]{left:calc(50% + 36px)!important;top:258px!important}
 [data-elem-id="1767730425496"]{left:calc(50% + 36px)!important;top:296px!important;width:328px!important}
 [data-elem-id="1767730425496"] .tn-atom{font-size:64px!important;line-height:64px!important;letter-spacing:-2.56px!important}
 [data-elem-id="1767730490881000001"]{left:calc(50% + 36px)!important;top:438px!important;width:271px!important}
 [data-elem-id="1767730490881000001"] .tn-atom{font-size:20px!important;line-height:24px!important}
 [data-elem-id="1767731799072000001"]{display:none!important}
 [data-elem-id="1767731799072000001"] .tn-atom{background-image:linear-gradient(to bottom,rgba(221,227,231,0),#dde3e7 85%)!important}
}

/* Only the card surface grows; content keeps its original geometry. */
.project-card:not(.project-video){background:transparent;overflow:visible;isolation:isolate}
.project-card:not(.project-video)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;z-index:-1;pointer-events:none;transition:transform 200ms ease}
@media(hover:hover) and (pointer:fine){.project-card:not(.project-video):hover::before{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.project-card::before{transition:none!important}}

.project-video{overflow:visible;background:transparent}
.project-video video,.project-video::after{border-radius:inherit;transition:transform 200ms ease;transform-origin:center}
@media(hover:hover) and (pointer:fine){.project-video:hover video,.project-video:hover::after{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.project-video video,.project-video::after{transition:none}}

/* Featured Gazprombank case matches the Figma cover composition. */
.project-video.project-gazprom{height:auto;aspect-ratio:16/9}
.project-gazprom.project-video::after{background:linear-gradient(to bottom,transparent 60.5%,rgba(4,143,253,.6) 76%,#048ffd 100%)}
.project-gazprom.project-video .project-labels{left:12px;top:12px}
.project-gazprom.project-video .project-copy{left:20px;right:20px;bottom:20px;margin:0}
.project-gazprom.project-video h2{font-size:32px;line-height:40px;letter-spacing:-1.28px}
.project-gazprom.project-video p{font-size:14px;line-height:20px;margin-top:8px;color:#dde3e7;max-width:318px}
.compact .project-gazprom.project-video{height:auto;aspect-ratio:16/9}
.compact .project-gazprom.project-video .project-labels{left:7px;top:7px}
.compact .project-gazprom.project-video .project-copy{left:12px;right:12px;bottom:12px}
.compact .project-gazprom.project-video h2{font-size:21px;line-height:26px;letter-spacing:-.84px}
.compact .project-gazprom.project-video p{font-size:9px;line-height:13px;margin-top:5px}

/* Content-sized OFFZONE and BI.ZONE cards. */
.project-pair{height:auto;padding:12px;align-self:start}
.project-pair .project-copy{margin-top:0;padding:8px 8px 0}
.project-pair .case-cover{position:relative;display:block;inset:auto;width:100%;height:160px;margin-top:24px}
.compact .project-pair{height:auto;padding:7px}
.compact .project-pair .project-copy{margin-top:0;padding:3px 3px 0}
.compact .project-pair p{font-size:9px;line-height:1.4}
.compact .project-pair .case-cover{inset:auto;width:100%;height:85px;margin-top:16px}
@media(max-width:639px){
 #rec1769475661 [data-elem-id="1767730490881000001"]{width:260px!important}
 #rec1769475661 .intro-last-break{display:none}
}

.lead-mobile-break{display:none}
@media(max-width:639px){
 #rec1769475661 [data-elem-id="1767962742724000019"]{width:121px!important}
 #rec1769475661 [data-elem-id="1767962742724000019"] .tn-atom{white-space:nowrap}
 .lead-desktop-space{display:none}
 .lead-mobile-break{display:block}
}

/* Mobile portrait touches the right edge, with a softer area behind the intro. */
@media(max-width:639px){
 #rec1769475661 [data-elem-id="1767730560967"]{
  top:30px!important;left:75px!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.25) 70%,transparent 84%);
  mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.25) 70%,transparent 84%);
 }
 #rec1769475661 [data-elem-id="1767730560967"] .tn-atom{opacity:1}
}

.case-copy-mobile{display:none}
@media(max-width:639px){
 .case-copy-desktop{display:none}
 .case-copy-mobile{display:inline}
}

/* Match paired case titles to the full-width case cards. */
.project-pair h2{font-size:32px}
.compact .project-pair h2{font-size:21px}