/* An even-width gallery with quiet neighboring previews and uninterrupted scrolling. */
html:has(body[data-gallery-loop=true]),body[data-gallery-loop=true]{background:#f7f7f7}
[data-gallery-loop=true] .home-view{isolation:isolate}
[data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view{transform:none}
[data-gallery-loop=true] .visual.mockup{border-radius:0;background:transparent;box-shadow:0 1px 2px #00000006}
[data-gallery-loop=true] .work-card{transition:none;pointer-events:none!important}
[data-gallery-loop=true] .work-card .visual{pointer-events:auto}
[data-gallery-loop=true] .work-card .work-image{width:100%;height:100%;aspect-ratio:auto!important}
[data-gallery-loop=true] .photo-scene{width:100%;height:100%}
[data-gallery-loop=true] .ui-screen{padding:8%}
[data-gallery-loop=true] .timeline,[data-gallery-loop=true] .timeline-reveal,[data-gallery-loop=true] .timeline-switch{display:none!important}
@media(min-width:721px){
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) #portfolio{padding-right:65px}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view{max-width:none}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view>.stage-wrap{position:absolute;top:calc(50% - 50svh);height:100svh;left:32px;width:calc(100% - 32px);overflow:hidden}
}
@media(min-width:721px) and (max-width:1100px){
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) #portfolio{padding-right:36px}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) #portfolio{padding-right:16px}
 [data-gallery-loop=true][data-gallery-layout=standard] .work-card{visibility:visible}
 [data-gallery-loop=true] .work-stage{touch-action:pan-x pinch-zoom}
 [data-gallery-loop=true] .home-view{overflow:visible}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view>.stage-wrap{position:relative;top:auto;left:auto;width:100%;overflow:hidden}
}

/* A neutral glass selection lets the company mark carry its own colour. */
[data-gallery-loop=true][data-gallery-layout=standard][data-company-glass=true][data-company-colour=true] .company-nav .company-row .company:is([aria-pressed=true],:hover){background:#ffffff66;color:#252525;box-shadow:inset 0 0 0 1px #ffffffa6,0 1px 3px #00000003;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company:is([aria-pressed=true],:hover) strong{color:#252525}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company:is([aria-pressed=true],:hover) small{color:#888b91}
[data-gallery-loop=true][data-gallery-layout=standard] .company-row:has(.company[aria-pressed=true]) .company-open{background:transparent;color:#858b93;box-shadow:none}
[data-gallery-loop=true][data-gallery-layout=standard] .company-row:has(.company[aria-pressed=true]) .company-open:is(:hover,:focus-visible){background:#ffffff80;color:#252525}

/* The active row has a clear white surface and stronger text than its neighbors. */
[data-gallery-loop=true][data-gallery-layout=standard][data-company-glass=true][data-company-colour=true] .company-nav .company-row .company[aria-pressed=true]{background:linear-gradient(180deg,#ffffffb3,#ffffff80);box-shadow:0 0 0 1px #00000006,inset 0 0 0 1px #fff,0 2px 4px #00000003,0 8px 18px -8px #0000000d}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company[aria-pressed=false]:not(:hover) strong{color:#929292}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company[aria-pressed=false]:not(:hover) small{color:#999}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company[aria-pressed=true] strong{color:#191919}
[data-gallery-loop=true][data-gallery-layout=standard][data-company-colour=true] .company-nav .company[aria-pressed=true] small{color:#7f7f7f}

/* One face and three sizes keep the homepage typography consistent. */
[data-gallery-loop=true][data-gallery-layout=standard] .intro-stack{margin-top:6px}
[data-gallery-loop=true][data-gallery-layout=standard] .identity .name{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
[data-gallery-loop=true][data-gallery-layout=standard] .identity .intro{font-family:GT,sans-serif;font-size:18px;line-height:1.5;letter-spacing:-.015em;color:#606060;max-width:260px;margin:0;text-wrap:pretty}
[data-gallery-loop=true][data-gallery-layout=standard] .company{font-family:GT,sans-serif}
[data-gallery-loop=true][data-gallery-layout=standard] .company-copy{min-width:0}
[data-gallery-loop=true][data-gallery-layout=standard] .company small{font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true][data-gallery-layout=standard] .identity .intro{margin:0 auto}
}

/* Native overflow preserves wheel, trackpad and touch momentum without snapping. */
[data-gallery-loop=true]:not(.is-detail):not(.is-about) .stage-wrap[data-native-gallery]{display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;scroll-snap-type:none;scroll-behavior:auto;overflow-anchor:none}
[data-gallery-loop=true] .stage-wrap[data-native-gallery]::-webkit-scrollbar{display:none}
[data-gallery-loop=true]:not(.is-detail):not(.is-about) .stage-wrap[data-native-gallery]>.work-stage{position:sticky;top:0;height:100%;margin:0;touch-action:pan-y pinch-zoom}
/* Keep desktop artwork crisp. Small touch layouts get a soft edge fade. */
[data-gallery-loop=true]:not(.is-detail):not(.is-about) .stage-wrap[data-native-gallery]{border-radius:0}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true]:not(.is-detail):not(.is-about) .stage-wrap[data-native-gallery]>.work-stage{mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
}
.gallery-scroll-track{position:relative;width:1px;pointer-events:none;overflow-anchor:none}
[data-gallery-loop=true].is-detail .gallery-scroll-track{display:none}

@media(min-width:721px){html:has(body[data-gallery-loop=true]){scrollbar-gutter:stable both-edges}}

[data-gallery-loop=true] .company-open{z-index:2}


/* Keep the chevron bare in every row state. */
[data-gallery-loop=true][data-gallery-layout=standard] .company-row .company-open,
[data-gallery-loop=true][data-gallery-layout=standard] .company-row .company-open:is(:hover,:focus-visible){background:transparent!important;box-shadow:none!important;border:0;color:#797d83;border-radius:0}
[data-gallery-loop=true] .identity .intro .intro-line{display:block;white-space:nowrap}

/* About crossfades as one composition, with no per-photo blur or stagger. */
[data-gallery-loop=true] .portfolio-photo{border-radius:0;filter:none!important;transition:none;transform:none}
[data-gallery-loop=true] .identity-socials{animation:none!important}
[data-gallery-loop=true] .expanded-about p{font-size:18px}
[data-gallery-loop=true].is-about #portfolio{padding-right:65px}
@media(min-width:721px) and (max-width:1100px){[data-gallery-loop=true].is-about #portfolio{padding-right:36px}}
@media(max-width:720px){[data-gallery-loop=true].is-about #portfolio{padding-right:16px}}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true][data-gallery-layout=standard] .company-nav{flex-direction:row;flex-wrap:nowrap}
 [data-gallery-loop=true].is-about #portfolio{padding-right:16px}
 [data-gallery-loop=true].is-about .about-view{margin-top:28px}
 [data-gallery-loop=true] .mobile-project-title{max-width:32ch;margin-left:auto;margin-right:auto;text-wrap:balance}
 [data-gallery-loop=true] .mobile-project-controls{padding-bottom:env(safe-area-inset-bottom)}
}
/* Shared focus transition, with matching blur on entry and exit. */
html[data-transition=about-premium] :is(.identity,.stage-wrap,.intro-stack){view-transition-name:none}
html[data-transition=about-premium] :is(.company-logo,.visual){view-transition-name:none!important}
html[data-transition=about-premium] .identity .name{view-transition-name:about-name}
html[data-transition=about-premium] .intro{view-transition-name:about-intro}
html[data-transition=about-premium] .expanded-about p:nth-child(1){view-transition-name:about-p0}
html[data-transition=about-premium] .expanded-about p:nth-child(2){view-transition-name:about-p1}
html[data-transition=about-premium] .expanded-about p:nth-child(3){view-transition-name:about-p2}
html[data-transition=about-premium] :is(.home-view,.about-view){view-transition-name:about-media}
html[data-transition=about-premium] .company-nav{view-transition-name:about-nav}
html[data-transition=about-premium] .about-toggle{view-transition-name:about-toggle}
html[data-transition=about-premium] .identity-socials{view-transition-name:about-socials}
html[data-transition=about-premium]::view-transition{pointer-events:none}
html[data-transition=about-premium]::view-transition-group(*){animation-duration:var(--about-enter);animation-timing-function:var(--about-ease)}
html[data-transition=about-premium]::view-transition-group(about-media){animation:none}
html[data-transition=about-premium]::view-transition-old(root),html[data-transition=about-premium]::view-transition-new(root){animation:none}
html[data-transition=about-premium]::view-transition-old(about-media),
html[data-transition=about-premium]::view-transition-old(about-intro),
html[data-transition=about-premium]::view-transition-old(about-nav),
html[data-transition=about-premium]::view-transition-old(about-p0),
html[data-transition=about-premium]::view-transition-old(about-p1),
html[data-transition=about-premium]::view-transition-old(about-p2),
html[data-transition=about-premium]::view-transition-old(about-toggle),
html[data-transition=about-premium]::view-transition-old(about-socials){animation:about-focus-out var(--about-exit) var(--about-ease) both;mix-blend-mode:normal}
html[data-transition=about-premium]::view-transition-new(about-media),
html[data-transition=about-premium]::view-transition-new(about-intro),
html[data-transition=about-premium]::view-transition-new(about-nav),
html[data-transition=about-premium]::view-transition-new(about-p0),
html[data-transition=about-premium]::view-transition-new(about-p1),
html[data-transition=about-premium]::view-transition-new(about-p2),
html[data-transition=about-premium]::view-transition-new(about-toggle),
html[data-transition=about-premium]::view-transition-new(about-socials){animation:about-focus-in var(--about-enter) var(--about-ease) var(--about-delay) both;mix-blend-mode:normal}
html[data-transition=about-premium]::view-transition-new(about-p1){animation-delay:calc(var(--about-delay) + var(--about-stagger))}
html[data-transition=about-premium]::view-transition-new(about-p2){animation-delay:calc(var(--about-delay) + 2 * var(--about-stagger))}
html[data-transition=about-premium]::view-transition-old(about-p0){animation-delay:calc(2 * var(--about-stagger))}
html[data-transition=about-premium]::view-transition-old(about-p1){animation-delay:var(--about-stagger)}
@keyframes about-focus-in{from{opacity:0;filter:blur(var(--about-blur));translate:0 var(--about-shift)}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes about-focus-out{from{opacity:1;filter:blur(0);translate:0 0}to{opacity:0;filter:blur(var(--about-blur));translate:0 calc(-1 * var(--about-shift))}}

/* About is a clean photographic grid, without decorative rims or depth. */
[data-gallery-loop=true] .portfolio-photo{border-radius:0;box-shadow:none;background:transparent}
[data-gallery-loop=true] .portfolio-photo::after{display:none}
[data-gallery-loop=true] .portfolio-photo :is(img,video){border-radius:0;box-shadow:none}

/* Let the photographic composition resolve a little more slowly than the copy. */
html[data-transition=about-premium]::view-transition-new(about-media){animation-duration:calc(var(--about-enter) + 180ms)}

/* Secondary actions share the same neutral white finish as selected work. */
[data-gallery-loop=true][data-gallery-layout=standard] :is(.identity-socials a,.back-button){background:linear-gradient(180deg,#ffffffb3,#ffffff80);color:#686868;border:0;box-shadow:0 0 0 1px #00000006,inset 0 0 0 1px #fff,0 2px 4px #00000003,0 8px 18px -8px #0000000d}
[data-gallery-loop=true][data-gallery-layout=standard] :is(.identity-socials a,.back-button):is(:hover,:focus-visible){background:linear-gradient(180deg,#fff,#ffffffb3);color:#252525;box-shadow:0 0 0 1px #00000008,inset 0 0 0 1px #fff,0 2px 4px #00000004,0 8px 18px -8px #00000012}
[data-gallery-loop=true][data-gallery-layout=standard] .identity-socials a:is(:hover,:focus-visible){color:#fff;box-shadow:0 0 0 1px #ffffff80,inset 0 0 0 1px #ffffff40,0 3px 5px #0000000a,0 8px 18px var(--social-shadow)}

/* The phone homepage scrolls once through every work example. Desktop keeps
   its looping gallery, while About and case-study layouts retain their UI. */
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) #portfolio{padding:56px 16px 32px}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .identity .name{font-size:34px;line-height:1.15}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) :is(.identity>.intro,.intro-stack,.identity-socials,.about-toggle,.mobile-menu-toggle,.mobile-menu,.mobile-project-controls,.home-footer){display:none}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .company-nav{position:static;inset:auto;transform:none;margin:28px auto 36px}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .company-logo img{opacity:1}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view{height:auto;max-width:none;transform:none}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .home-view>.stage-wrap[data-native-gallery]{position:static;width:100%;height:auto;overflow:visible;aspect-ratio:auto}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .stage-wrap[data-native-gallery]>.work-stage{position:static;display:flex;flex-direction:column;gap:20px;width:100%;height:auto;margin:0;mask-image:none;-webkit-mask-image:none;touch-action:pan-y pinch-zoom}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .work-stage>.work-card{position:relative;inset:auto;flex:none;width:100%;height:auto;aspect-ratio:3/2;opacity:1;visibility:visible;transform:none;touch-action:pan-y pinch-zoom}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .work-card>.visual{width:100%;height:100%;box-shadow:none}
 /* Omit the Vrema app demo from the scrolling phone homepage. */
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .work-card:has(.vrema-viewport){display:none}
 [data-gallery-loop=true]:not(.is-about):not(.is-detail) .gallery-scroll-track{display:none}
}