/* The colour field stays still. Only the screens travel through the stack. */
@font-face{font-family:'Suisse Intl';src:url(assets/SuisseIntlTrial-Regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url(assets/SuisseIntlTrial-Medium.otf) format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Test Signifier';src:url(assets/signifier-regular.woff2) format('woff2');font-weight:400 500;font-display:swap}
[data-direction=gallery]{background:var(--gallery-page,#f4f6f8);font-family:var(--gallery-font,"Test Signifier"),sans-serif}
[data-direction=gallery] #portfolio{max-width:var(--composition-width,1510px);grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:70px;padding:80px 115px 80px 65px}
[data-direction=gallery] .name{font-size:22px}
[data-direction=gallery] .intro{font-size:var(--intro-size,16px);line-height:1.48;letter-spacing:-.25px;color:#6b6b6e;margin:12px 0 0}
[data-direction=gallery] .intro span{color:inherit}
[data-direction=gallery] .company-nav{margin-top:64px;gap:11px}
[data-direction=gallery] .company{padding-top:12px;padding-bottom:12px}
[data-direction=gallery] .company{border-radius:10px}
[data-direction=gallery] .company[data-company=freelance]{--company-accent:#47474b;--company-tint:#e8e8e7}
[data-direction=gallery] .company[data-company=neon]{--company-accent:#932471;--company-tint:#f4dfed}
[data-direction=gallery] .company[data-company=marvel]{--company-accent:#2039d9;--company-tint:#e0e7ff}
[data-direction=gallery] .company[data-company=lynk]{--company-accent:#1f4436;--company-tint:#e0ebe5}
[data-direction=gallery][data-company-colour=true] .company:hover,[data-direction=gallery][data-company-colour=true] .company[aria-pressed=true]{background:var(--company-tint);box-shadow:none;border:0}
[data-direction=gallery][data-company-colour=true] .company:hover strong,[data-direction=gallery][data-company-colour=true] .company[aria-pressed=true] strong{color:var(--company-accent)}
[data-direction=gallery][data-company-colour=true] .company .selection-dot{background:var(--company-accent)}
[data-direction=gallery] .home-view{max-width:850px;height:var(--rail-height,570px)}
[data-direction=gallery] .stage-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:0;isolation:isolate;overflow:hidden}
.gallery-background{position:absolute;inset:0;z-index:-1;overflow:hidden}
.gallery-background span{position:absolute;inset:0;opacity:0;transition:opacity var(--background-time,900ms) ease;background:var(--work-bg)}
.gallery-background span.active{opacity:1}
[data-direction=gallery] .work-stage{width:var(--gallery-width,84%);height:var(--gallery-height,72%);aspect-ratio:auto;margin:7% 0 0;perspective:none}
[data-direction=gallery] .work-card{display:flex;align-items:center;justify-content:center;transform-origin:center center;box-shadow:none;border-radius:var(--image-radius,4px);overflow:visible;transition:none;will-change:auto}
[data-direction=gallery] .work-card.active:hover{box-shadow:none}
[data-direction=gallery] .visual{flex:none;padding:0;background:var(--gallery-page,#f4f6f8);border-radius:var(--image-radius,4px);box-shadow:var(--image-shadow,0 15px 35px -16px #00000038)}
[data-direction=gallery] .visual::after{content:'';position:absolute;inset:0;border-top:1px solid #fff;border-left:1px solid #fff;opacity:var(--highlight-opacity,.65);border-radius:inherit;pointer-events:none}
[data-direction=gallery] .visual img,[data-direction=gallery] .visual video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;box-shadow:none}
[data-direction=gallery] .timeline{height:var(--rail-height,570px);width:72px;right:0;top:var(--timeline-center,50%);gap:0;user-select:none}
[data-direction=gallery] .timeline button{min-height:18px;flex:1;height:auto;justify-content:center;padding:0}
[data-direction=gallery] .timeline span{right:36px;top:50%;transform:translateY(-50%);font-size:10px;color:#999}
[data-direction=gallery] .timeline i{width:10px;height:1px;background:#d5d5d7}
[data-direction=gallery] .timeline button.company-start i{width:22px}
[data-direction=gallery] .timeline button[aria-current=true] i{width:34px;height:2px;background:#555}
[data-direction=gallery] .timeline button:hover i{width:30px;background:#777}
[data-direction=gallery]{--timeline-accent:#555a63}
[data-direction=gallery][data-gallery-company=neon]{--timeline-accent:#b32685}
[data-direction=gallery][data-gallery-company=marvel]{--timeline-accent:#2945ed}
[data-direction=gallery][data-gallery-company=elva]{--timeline-accent:#ec7b38}
[data-direction=gallery][data-gallery-company=lynk]{--timeline-accent:#237e58}
[data-direction=gallery] .timeline button[aria-current=true] i,
[data-direction=gallery] .timeline button:hover i,
[data-direction=gallery] .timeline button:focus-visible i{background:var(--timeline-accent)}
@media(min-width:721px){
 [data-direction=gallery] .timeline i{transition:width 300ms cubic-bezier(.22,.65,.25,1),background-color 240ms ease}
 [data-direction=gallery] .timeline button:hover i,
 [data-direction=gallery] .timeline button:focus-visible i{width:44px}
}
[data-direction=gallery] .home-footer{align-items:center}
.quick-settings{display:flex;align-items:center;gap:18px;margin-left:auto;font-family:"Suisse Intl",sans-serif;font-size:11px;color:#85858a}
.font-switch,.view-switch{display:flex;gap:10px}
.quick-settings button{padding:5px 0;transition:color .2s}
.quick-settings button:hover,:is(.font-switch,.view-switch) button[aria-pressed=true]{color:#252525}
:is(.font-switch,.view-switch) button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b7b7bb}
.timeline-switch{display:flex;align-items:center;gap:7px}
.timeline-switch span{width:20px;height:12px;border-radius:8px;background:#d6d6d8;padding:2px;transition:background .2s}
.timeline-switch span::after{content:"";display:block;width:8px;height:8px;border-radius:50%;background:white;transition:transform .2s}
.timeline-switch[aria-pressed=true] span{background:#69696d}
.timeline-switch[aria-pressed=true] span::after{transform:translateX(8px)}
.design-controls{font-size:11px;color:#85858a;margin-left:auto;padding:4px 0}
.design-controls:hover{color:#252525}
.gallery-controls{display:flex;align-items:center;gap:14px;margin-left:auto}
.gallery-controls button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #e4e4e4;border-radius:50%;color:#969699;transition:color .2s,border-color .2s}
.gallery-controls button:hover{color:#222;border-color:#aaa}
.gallery-controls button:disabled{opacity:.25;cursor:default}
.gallery-controls svg{width:13px;height:13px}
.gallery-controls .image-count{font-size:10px;color:#a1a1a4;min-width:27px;text-align:center;font-variant-numeric:tabular-nums}
[data-direction=gallery].is-detail #portfolio{grid-template-columns:260px minmax(0,1fr);align-content:start;column-gap:70px;padding:85px 65px 90px}
[data-direction=gallery].is-detail .identity .intro{display:none}
[data-direction=gallery] .case-hero{display:flex;align-items:center;justify-content:center;padding:7%;background:var(--case-bg);border-radius:0;aspect-ratio:1.5;margin-bottom:55px}
[data-direction=gallery] .case-hero .visual{width:100%;height:100%;border-radius:var(--image-radius,4px)}
[data-direction=gallery] .case-figure>div{background:var(--work-bg);padding:5%;border-radius:var(--image-radius,4px)}
[data-direction=gallery] .case-figure img{box-shadow:none}
[data-direction=gallery] .case-figure.motion>div{padding:0}
[data-direction=gallery] .case-index{top:calc(var(--company-top,280px) + var(--company-list-height,333px) + 22px)}
[data-direction=gallery] .company:focus-visible,[data-direction=gallery] .work-card:focus-visible,[data-direction=gallery] .timeline button:focus-visible{outline:2px solid #6e8aff;outline-offset:4px}
[data-direction=gallery][data-gallery-timeline=hidden] .timeline{display:none}
@media(min-width:721px){[data-direction=gallery][data-gallery-timeline=hidden]:not(.is-detail) #portfolio{padding-right:65px}}
@media(max-width:1100px) and (min-width:721px){
 [data-direction=gallery] #portfolio{grid-template-columns:210px minmax(0,1fr);column-gap:38px;padding:70px 85px 85px 36px}
 [data-direction=gallery] .intro{font-size:18px}
 [data-direction=gallery] .work-stage{width:var(--gallery-width,88%);height:var(--gallery-height,67%)}
 [data-direction=gallery].is-detail #portfolio{grid-template-columns:210px minmax(0,1fr);column-gap:38px;padding:80px 36px}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-direction=gallery] #portfolio{display:flex;align-content:normal;justify-content:center;gap:0;padding:35px 24px 100px}
 [data-direction=gallery] .intro{font-size:var(--intro-size,16px);max-width:450px;margin:17px 0 0}
 [data-direction=gallery] .company-nav{margin:26px 0 27px}
 [data-direction=gallery] .home-view{height:auto;max-width:none}
 [data-direction=gallery] .stage-wrap{height:auto;aspect-ratio:1.18}
 [data-direction=gallery] .work-stage{width:var(--gallery-width,85%);height:var(--gallery-height,66%);aspect-ratio:auto;margin:10% 0 0;position:absolute}
 [data-direction=gallery] .timeline{position:relative;inset:auto;transform:none;height:42px;width:100%;gap:0;flex-direction:row;margin-top:18px}
 [data-direction=gallery] .timeline span{display:none}
 [data-direction=gallery] .timeline button{height:32px;min-height:0;min-width:0;align-items:center;padding:0}
 [data-direction=gallery] .timeline i{width:2px;height:5px}
 [data-direction=gallery] .timeline button.company-start i{width:2px;height:10px}
 [data-direction=gallery] .timeline button[aria-current=true] i{width:2px;height:18px}
 [data-direction=gallery] .timeline button:hover i{width:2px}
 [data-direction=gallery] .home-footer{flex-wrap:wrap;gap:12px}
 .quick-settings{order:4;width:100%;justify-content:center;margin-left:0;gap:25px}
 .design-controls{font-size:10px}
 .gallery-controls{gap:8px}
 [data-direction=gallery].is-detail #portfolio{display:block;padding:calc(var(--company-top,220px) + var(--company-height,50px) + 65px) 24px 60px}
 [data-direction=gallery].is-detail .case-index{top:calc(var(--company-top,220px) + var(--company-height,50px) + 22px)}
}
/* Authoring controls keep their own font and ordinary wheel scrolling. */
.dialkit-root button{font-family:inherit}
.dialkit-root svg{max-width:24px;max-height:24px}
[data-direction=gallery].is-detail::before{background:var(--gallery-page,#f4f6f8)}
@media(prefers-reduced-motion:reduce){.gallery-background span{transition:none}}

[data-direction=gallery] .company img{border:0;box-shadow:none}

@media(min-width:721px){
 [data-direction=gallery]:not(.is-detail) .company-nav{width:calc(100% + 24px);align-self:stretch;margin-left:-12px}
 [data-direction=gallery] .intro{font-size:var(--intro-size,16px)}
}

[data-direction=gallery] .company[data-company=elva]{--company-accent:#b85a2c;--company-tint:#f8e5d9}
@media(min-width:721px){
 [data-direction=gallery] .explorations-company{margin-top:18px}
 [data-direction=gallery] .explorations-company::before{content:'';position:absolute;left:12px;right:12px;top:-11px;height:1px;background:#dedede}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-direction=gallery] .company-nav{gap:3px}
 [data-direction=gallery] .company{width:calc((100% - 12px) / 5);min-width:0;padding:6px}
 [data-direction=gallery] .company img{width:30px;height:30px}
 [data-direction=gallery] .explorations-company::before{content:'';position:absolute;left:-3px;height:24px;width:1px;background:#dedede}
}

/* The final plane is a real scratch card, with interactive children. */
[data-direction=gallery] .visual.gift{overflow:visible;box-shadow:none;display:block}
[data-direction=gallery] .visual.gift::after{display:none}
[data-direction=gallery] .gallery-gift .surprise-stage{background:transparent}
[data-direction=gallery] .gallery-gift .inline-content{padding:0 0 38px}
[data-direction=gallery] .gallery-gift .gift-assembly{width:100%}
[data-direction=gallery] .gallery-gift .gift-card{transform:none;border-radius:12px}
[data-direction=gallery] .gallery-gift :is(.gift-win-title,.gift-description,.gift-booking,.gift-replay){font-family:GT,sans-serif}
[data-direction=gallery] .gallery-gift .gift-booking img{width:26px;height:26px;border-radius:50%}
[data-direction=gallery] .gallery-gift .gift-image{width:136px;height:auto;max-height:none}
[data-direction=gallery] .gallery-gift .gift-card-offer{min-height:0}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-direction=gallery][data-gallery-frame=gift]:not(.is-detail) .stage-wrap{aspect-ratio:.8}
 [data-direction=gallery] .gallery-gift .gift-image{width:64px}
 [data-direction=gallery] .gallery-gift .gift-card-offer{padding:18px;gap:14px 10px}
 [data-direction=gallery] .gallery-gift .gift-win-title{font-size:20px;margin-bottom:12px}
 [data-direction=gallery] .gallery-gift .gift-description{font-size:12px;margin-bottom:10px}
}

[data-direction=gallery] .gallery-gift:not(.active) .edition-gift-mount{pointer-events:none}

/* The revealed gift fills the same frame as its silver scratch cover. */
[data-direction=gallery] .gallery-gift .gift-card,
[data-direction=gallery] .gallery-gift .gift-card.is-revealed{aspect-ratio:1.7;min-height:320px;min-width:0;max-width:100%;transform:rotate(var(--gift-tilt,-2deg));transition:transform 700ms cubic-bezier(.22,.65,.25,1),box-shadow 400ms ease}
[data-direction=gallery] .gallery-gift.is-upright{--gift-tilt:0deg}
[data-direction=gallery] .gallery-gift .inline-content{grid-template-columns:minmax(0,1fr)}
[data-direction=gallery] .gallery-gift .gift-assembly{min-width:0}
[data-direction=gallery] .gallery-gift .gift-card-offer{--gift-padding:clamp(28px,5cqw,48px);position:absolute;inset:0;height:100%;display:block;padding:var(--gift-padding)}
[data-direction=gallery] .gallery-gift .gift-message{width:100%}
[data-direction=gallery] .gallery-gift .gift-win-title{font-size:clamp(26px,4.6cqw,38px);font-weight:400;line-height:1.2;letter-spacing:-.035em;margin-bottom:24px;max-width:none}
[data-direction=gallery] .gallery-gift .gift-win-title span{color:#97989b}
[data-direction=gallery] .gallery-gift .gift-description{font-size:clamp(14px,2.6cqw,20px);font-weight:400;line-height:1.5;letter-spacing:-.015em;max-width:65%;margin-bottom:20px}
[data-direction=gallery] .gallery-gift .gift-description strong{font-weight:400}
[data-direction=gallery] .gallery-gift .gift-image{position:absolute;right:-2.5%;bottom:-8%;width:37%;max-width:none}
[data-direction=gallery] .gallery-gift .gift-booking{position:absolute;left:var(--gift-padding);bottom:var(--gift-padding);min-height:44px;gap:9px;padding:7px 16px 7px 7px;font-size:16px;font-weight:400;line-height:24px;background:linear-gradient(155deg,#f8f8f9,#eeeff2);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffa0,0 2px 5px #5f7a8f18,0 7px 18px #5f7a8f12;backdrop-filter:blur(8px);transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease}
[data-direction=gallery] .gallery-gift .gift-booking:hover{background:linear-gradient(155deg,#f3f7fc,#e9eef5);box-shadow:inset 0 1px 0 #fff,0 3px 10px #5f7a8f22}
[data-direction=gallery] .gallery-gift .gift-booking:active{transform:translateY(1px) scale(.985)}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-direction=gallery] .gallery-gift .gift-card,
 [data-direction=gallery] .gallery-gift .gift-card.is-revealed{aspect-ratio:auto;height:350px;min-height:350px}
 [data-direction=gallery] .gallery-gift .gift-card-offer{--gift-padding:22px}
 [data-direction=gallery] .gallery-gift .gift-win-title{font-size:22px;margin-bottom:14px}
 [data-direction=gallery] .gallery-gift .gift-description{font-size:13px;max-width:100%;margin-bottom:16px}
 [data-direction=gallery] .gallery-gift .gift-image{width:36%;right:-5%;bottom:-6%}
 [data-direction=gallery] .gallery-gift .gift-booking{font-size:13px;padding:6px 12px 6px 6px;gap:7px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){[data-direction=gallery] .gallery-gift{--gift-tilt:0deg}[data-direction=gallery] .gallery-gift :is(.gift-card,.gift-booking){transition:none}}

/* A soft glass surface keeps each company's original colour. */
[data-direction=gallery] .company{border-radius:var(--company-radius,16px)}
[data-direction=gallery][data-company-glass=true] .company:is(:hover,[aria-pressed=true]){
 background:linear-gradient(145deg,#ffffff75,#ffffff08 65%),color-mix(in srgb,var(--company-tint,#eeeeef) 82%,transparent);
 backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
 box-shadow:inset 0 1px 0 #ffffffed,inset 1px 0 0 #ffffffad,inset 0 -1px 0 #00000008,0 3px 16px #00000006;
 outline:1px solid #ffffff60;outline-offset:-1px;
}
[data-direction=gallery] :is(.stage-wrap,.case-hero,.case-figure>div){border-radius:var(--field-radius,0px)}
[data-direction=gallery] .case-figure :is(img,video){border-radius:var(--image-radius,0px)}
[data-direction=gallery] .gallery-background{border-radius:inherit}
[data-direction=gallery][data-company-glass=true][data-company-colour=false] .company:is(:hover,[aria-pressed=true]){background:linear-gradient(145deg,#ffffff75,#ffffff08 65%),#eeeeefb0}
[data-direction=gallery][data-company-glass=true] .company:focus-visible{outline:2px solid #6e8aff;outline-offset:4px}
[data-direction=gallery][data-gallery-company=freelance][data-other-background=paper] :is(.stage-wrap,.case-hero,.case-figure>div){box-shadow:inset 0 0 0 1px #dedee2;outline:1px solid #dedee2;outline-offset:-1px}

/* The regular and compact galleries reveal their timeline at the screen edge. */
@media(min-width:721px){
 [data-direction=gallery]:not([data-gallery-layout=expansive]) .timeline{position:fixed;right:0;opacity:0;pointer-events:none;transform:translate(8px,-50%);transition:opacity 220ms ease,transform 320ms ease;z-index:35}
 [data-direction=gallery]:not([data-gallery-layout=expansive])[data-edge-timeline=visible] .timeline,
 [data-direction=gallery]:not([data-gallery-layout=expansive]) .timeline:focus-within{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
 [data-direction=gallery]:not([data-gallery-layout=expansive]) .timeline-reveal{position:fixed;right:0;top:var(--identity-top,20%);height:var(--rail-height,480px);width:14px;z-index:36;padding:0;background:none}
 [data-direction=gallery]:not([data-gallery-layout=expansive])[data-edge-timeline=visible] .timeline-reveal{pointer-events:none}
}
[data-direction=gallery][data-gallery-timeline=hidden] .timeline-reveal,[data-direction=gallery].is-detail .timeline-reveal{display:none}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){[data-direction=gallery] .timeline-reveal{display:none}}
@media(prefers-reduced-motion:reduce){[data-direction=gallery]:not([data-gallery-layout=expansive]) .timeline{transition:none}}

/* Case studies retain the home columns while the selected screen expands. */
[data-direction=gallery].is-detail .company-nav,[data-direction=gallery].is-detail .case-index{display:none!important}
[data-direction=gallery].is-detail .rail-case-title{font-family:var(--gallery-font,"Test Signifier"),serif;font-size:27px;line-height:1.22;letter-spacing:-.65px}
[data-direction=gallery].is-detail .rail-case-description{font-family:"Suisse Intl",sans-serif;font-size:14px;line-height:1.65;color:#7c7c80;margin-top:18px}
[data-direction=gallery].is-detail #portfolio{width:min(1220px,100%);max-width:1220px;grid-template-columns:250px minmax(0,1fr);column-gap:64px;padding:85px 50px 90px}
[data-direction=gallery].is-detail .identity{width:var(--identity-width,250px)}
[data-direction=gallery].is-detail .case-hero{margin-bottom:48px}
[data-direction=gallery].is-detail .case-role{max-width:620px;margin-bottom:48px}
[data-direction=gallery].is-detail .back-button{font-family:"Suisse Intl",sans-serif}
@media(max-width:1100px) and (min-width:721px){
 [data-direction=gallery].is-detail #portfolio{grid-template-columns:210px minmax(0,1fr);column-gap:38px;padding:85px 36px 70px}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-direction=gallery].is-detail #portfolio{display:block;padding:112px 24px 65px}
 [data-direction=gallery].is-detail::before{display:none}
 [data-direction=gallery].is-detail .identity{position:static;width:100%;margin-bottom:32px}
 [data-direction=gallery].is-detail .rail-case-title{font-size:27px}
 [data-direction=gallery].is-detail .rail-case-description{font-size:14px;max-width:440px}
 [data-direction=gallery].is-detail .back-button{position:absolute;top:40px;left:24px;right:auto}
 [data-direction=gallery].is-detail .case-hero{margin-bottom:32px;aspect-ratio:1.5}
}
/* Trim the empty capture edge from the MarvelX website screenshot. */
[data-direction=gallery] img[src$="logo-preview/marvel-landing.webp"]{clip-path:inset(.35% 0 0 .4%)}
[data-direction=gallery] :is(.visual,.case-figure>div):has(>img[src$="logo-preview/marvel-landing.webp"]){background:#101c30}

[data-direction=gallery] .identity .intro{font-family:"Suisse Intl",sans-serif;font-size:var(--intro-size,14px);font-weight:400;line-height:1.5;letter-spacing:-.1px}

/* The chosen gallery uses clear brand colours and quiet sans-serif work labels. */
[data-gallery-layout=standard] .company{font-family:"Suisse Intl",sans-serif}
[data-gallery-layout=standard] .company[data-company=neon]{--company-deep:#b32685}
[data-gallery-layout=standard] .company[data-company=marvel]{--company-deep:#2945ed}
[data-gallery-layout=standard] .company[data-company=elva]{--company-deep:#ec7b38}
[data-gallery-layout=standard] .company[data-company=lynk]{--company-deep:#237e58}
[data-gallery-layout=standard] .company[data-company=freelance]{--company-deep:#555a63}
/* Hover previews the surface; selecting a company gives it its brand colour. */
[data-gallery-layout=standard] .company-row{position:relative;width:100%}
[data-gallery-layout=standard] .company{padding-right:48px;transition:background 180ms ease,box-shadow 180ms ease;color:#252525}
[data-gallery-layout=standard] .company[aria-pressed=false]{background:transparent;box-shadow:none;outline:0}
[data-gallery-layout=standard][data-company-colour=true] .company[aria-pressed=false] strong{color:#252525}
[data-gallery-layout=standard][data-company-colour=true] .company[aria-pressed=false] small{color:#888b91}
[data-gallery-layout=standard] .company-row:is(:hover,:focus-within) .company[aria-pressed=false]{background:#e9ecf0}
[data-gallery-layout=standard][data-company-glass=true] .company-row:is(:hover,:focus-within) .company[aria-pressed=false]{box-shadow:var(--surface-shadow);outline:1px solid #ffffff70;outline-offset:-1px}
[data-gallery-layout=standard][data-company-colour=true] .company[aria-pressed=true]{background:var(--company-deep);color:#fff;box-shadow:none;outline:0}
[data-gallery-layout=standard][data-company-colour=true] .company[aria-pressed=true] strong{color:#fff}
[data-gallery-layout=standard][data-company-colour=true] .company[aria-pressed=true] small{color:#ffffffdc}
[data-gallery-layout=standard][data-company-glass=true][data-company-colour=true] .company[aria-pressed=true]{background:linear-gradient(155deg,#ffffff18,transparent 70%),var(--company-deep);box-shadow:var(--surface-shadow);outline:1px solid #ffffff4d;outline-offset:-1px}
[data-gallery-layout=standard][data-company-colour=true] .company-row:hover .company[aria-pressed=true]{background:linear-gradient(155deg,#ffffff26,#ffffff05 70%),var(--company-deep)}
[data-gallery-layout=standard] .other-company-row{margin-top:0}
[data-gallery-layout=standard] .other-company-row .explorations-company{margin-top:0}
[data-gallery-layout=standard] .explorations-company::before{display:none}
[data-gallery-layout=standard] .company-row+.company-row::before{content:'';position:absolute;left:var(--company-radius,16px);right:var(--company-radius,16px);top:-6px;height:1px;background:#dde1e6;box-shadow:0 1px 0 #ffffffb3;pointer-events:none;transition:opacity 180ms ease}
[data-gallery-layout=standard] .company-row:is(:hover,:focus-within)::before,
[data-gallery-layout=standard] .company-row:has(>.company[aria-pressed=true])::before,
[data-gallery-layout=standard] .company-row:is(:hover,:focus-within)+.company-row::before,
[data-gallery-layout=standard] .company-row:has(>.company[aria-pressed=true])+.company-row::before{opacity:0}
[data-gallery-layout=standard] .company-open{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(155deg,#ffffff36,#ffffff0d);color:#fff;box-shadow:inset 1px 1px 2px #ffffffaa,0 2px 5px #5f7a8f26;opacity:0;pointer-events:none;transition:background 180ms ease,opacity 180ms ease}
[data-gallery-layout=standard] .company-open svg{width:14px;height:14px}
[data-gallery-layout=standard] .company-row:is(:hover,:focus-within) .company-open,[data-gallery-layout=standard] .company-row:has([aria-pressed=true]) .company-open{opacity:1;pointer-events:auto}
[data-gallery-layout=standard] .company-row:has(.company[aria-pressed=false]) .company-open{background:#e9ecf0;color:#545b65;box-shadow:inset 1px 1px 2px #fff,0 2px 5px #5f7a8f26}
[data-gallery-layout=standard] .company-open:is(:hover,:focus-visible){background:linear-gradient(155deg,#ffffff49,#ffffff1a)}
[data-gallery-layout=standard] .company-open:hover svg{transform:none}
[data-gallery-layout=standard][data-company-colour=false] .company-open{color:#555}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard] .company-row{width:calc((100% - 12px)/5);flex:none}
 [data-gallery-layout=standard] .company{width:100%;padding:6px}
 [data-gallery-layout=standard] .company-open{display:none}
 [data-gallery-layout=standard] .other-company-row{margin-top:0}
}
[data-gallery-layout=standard] .visual:has(img[src$="logo-preview/marvel-landing.webp"])::after{display:none}
[data-gallery-layout=standard] .visual.project-matte{padding:var(--card-padding,0px);background:var(--card-bg)}
[data-gallery-layout=standard] .visual.project-matte::after{display:none}
[data-gallery-layout=standard] .visual.project-matte img{border-radius:var(--image-radius,8px)}
[data-gallery-layout=standard].is-detail .case-figure:has(img[src$="project-2.webp"])>div{background:linear-gradient(135deg,#eee8df,#d9cbb9);padding:6.5%;overflow:hidden}
[data-gallery-layout=standard] .case-figure:has(img[src$="blueprints-analytics.webp"])>div{background:linear-gradient(135deg,#cbd7e2,#8496ac);padding:0;overflow:hidden}

/* Match the GT Standard scale in site-typography.css and hero-refined.css. */
[data-gallery-layout=standard] .identity .name{display:block;font-family:var(--gallery-font,"GT"),sans-serif;font-size:48px;font-weight:400;line-height:1.12;letter-spacing:-.018em;font-feature-settings:"ss01" 1,"ss04" 1;color:#1d1d1f}
[data-gallery-layout=standard] .identity .intro{text-wrap:balance;font-family:"GT",sans-serif;font-size:var(--intro-size,18px);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;letter-spacing:normal;font-feature-settings:"ss01" 1,"ss04" 1;color:#676971}
[data-gallery-layout=standard].is-detail .rail-case-title{font-family:var(--gallery-font,"GT"),sans-serif;font-size:48px;font-weight:400;line-height:1.12;letter-spacing:-.025em;font-feature-settings:"ss01" 1,"ss04" 1;color:#1d1d1f}
[data-gallery-layout=standard].is-detail .rail-case-description{font-family:"GT",sans-serif;font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.005em;color:#66666d}
@media(min-width:640px) and (max-width:809px){[data-gallery-layout=standard] .identity .name{font-size:clamp(36px,calc(6.25vw - 2px),48px)}}
@media(max-width:700px){
 [data-gallery-layout=standard] .identity .intro{font-size:16px}
 [data-gallery-layout=standard].is-detail .rail-case-title{font-size:clamp(32px,9.23vw,36px)}
 [data-gallery-layout=standard].is-detail .rail-case-description{font-size:16px}
}
@media(max-width:639px){[data-gallery-layout=standard] .identity .name{font-size:clamp(24px,7.2vw,36px);line-height:1.2}}

/* Case navigation changes the rail, not the selected screen's geometry. */
[data-gallery-layout=standard] .identity .name{font-size:28px;line-height:1.2;white-space:nowrap;letter-spacing:-.018em}
[data-gallery-layout=standard].is-detail{font-family:"GT",sans-serif}
[data-gallery-layout=standard].is-detail #portfolio{display:block;width:min(1392px,100%);max-width:var(--composition-width,1360px);padding:0 0 90px;min-height:100svh}
[data-gallery-layout=standard].is-detail .work-area{margin-left:var(--case-field-left);width:var(--case-field-width);max-width:calc(100% - var(--case-field-left) - 24px);padding-top:var(--case-field-top)}
[data-gallery-layout=standard].is-detail .case-hero{display:block;padding:0;background:none;aspect-ratio:auto;height:var(--case-field-height);margin-bottom:48px}
[data-gallery-layout=standard].is-detail .case-hero .stage-wrap{height:100%;width:100%;aspect-ratio:auto}
[data-gallery-layout=standard].is-detail .work-card:not(.active){opacity:0!important;pointer-events:none!important}
[data-gallery-layout=standard].is-detail .rail-case-title{font-family:"GT",sans-serif;font-size:32px;font-weight:400;line-height:1.12;letter-spacing:-.025em}
[data-gallery-layout=standard].is-detail :is(.case-role h2,.case-role p,.case-gallery,.case-footer,.back-button){font-family:"GT",sans-serif;font-weight:400;letter-spacing:-.005em}
[data-gallery-layout=standard].is-detail .case-role h2{font-size:28px;line-height:1.2;letter-spacing:-.018em}
[data-gallery-layout=standard].is-detail .case-role p{font-size:18px;line-height:1.5;color:#66666d}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard].is-detail .identity{position:absolute;top:var(--identity-top,35px);left:24px;width:calc(100% - 48px);margin:0}
 [data-gallery-layout=standard].is-detail .back-button{position:absolute;top:12px;left:24px;font-size:12px}
 [data-gallery-layout=standard].is-detail .rail-case-title{font-size:24px;margin:22px 0 0}
 [data-gallery-layout=standard].is-detail .rail-case-description{font-size:14px;line-height:1.45;margin-top:10px}
 [data-gallery-layout=standard].is-detail .case-role p{font-size:16px}
}

html:has(body[data-gallery-layout=standard]){scrollbar-gutter:stable}
[data-gallery-layout=standard] .stage-wrap{view-transition-name:work-field}
::view-transition-old(work-field),::view-transition-new(work-field){animation:none;mix-blend-mode:normal}

/* Lemni-inspired surfaces: a fine white rim and a diffuse blue-grey shadow. */
[data-gallery-layout=standard]{--surface-shadow:2px 4px 14px #5f7a8f33,inset 1px 1px 2px #fff}
[data-gallery-layout=standard] .company-row:is(:hover,:focus-within) .company img,
[data-gallery-layout=standard] .company[aria-pressed=true] img{box-shadow:0 2px 5px #5f7a8f26}
[data-gallery-layout=standard] .stage-wrap{box-shadow:2px 4px 14px #5f7a8f1a,inset 1px 1px 2px #ffffffa6,inset 0 -1px 0 #5f7a8f12}
[data-gallery-layout=standard] :is(.visual,.case-figure>div)::after{content:'';position:absolute;inset:0;border:0;border-radius:inherit;pointer-events:none;opacity:var(--highlight-opacity,.65);box-shadow:inset 1px 1px 2px #fff,inset 0 -1px 0 #5f7a8f16}
[data-gallery-layout=standard] .case-figure>div{position:relative;box-shadow:var(--image-shadow)}
[data-gallery-layout=standard] .case-figure :is(img,video){box-shadow:none}
[data-gallery-layout=standard] .case-figure.scroll-reveal{opacity:0;transform:translateY(8px);transition:opacity var(--route-duration,420ms) var(--route-ease) var(--reveal-delay,0ms),transform var(--route-duration,420ms) var(--route-ease) var(--reveal-delay,0ms)}
[data-gallery-layout=standard] .case-figure.scroll-reveal.is-visible{opacity:1;transform:none;filter:none}
[data-gallery-layout=standard] .case-gift{margin-top:48px;background:transparent;box-shadow:none;border:0;border-radius:0}
[data-gallery-layout=standard] .case-gift.scroll-reveal{opacity:0;transform:translateY(18px);transition:opacity 850ms cubic-bezier(.22,.65,.25,1),transform 850ms cubic-bezier(.22,.65,.25,1)}
[data-gallery-layout=standard] .case-gift.scroll-reveal.is-visible{opacity:1;transform:none}
[data-gallery-layout=standard] .case-gift>.edition-gift-mount{padding:0;background:transparent;box-shadow:none;border-radius:0}
@media(hover:hover) and (pointer:fine){[data-gallery-layout=standard] .case-figure.scroll-reveal.is-visible:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){[data-gallery-layout=standard] :is(.case-figure,.case-gift).scroll-reveal{opacity:1;transform:none!important;filter:none!important;transition:none}}
[data-gallery-layout=standard] :is(.back-button,.gallery-controls button){border:0;border-radius:50px;background:#eef0f3;box-shadow:var(--surface-shadow);color:#545b65}
[data-gallery-layout=standard] :is(.back-button,.gallery-controls button):hover{background:#e7ebef;color:#252525}
/* The colour field stays fixed as the selected screen eases to its centre. */
[data-gallery-layout=standard].is-detail .work-stage{margin:0}

/* The live gallery stays mounted in one place in both views. Only its layout
   changes, so iframe documents, video playback and prototype state survive. */
[data-gallery-layout=standard].is-detail .home-view{height:auto;max-width:none;margin:0;transition:none}
[data-gallery-layout=standard].is-detail .home-view>.stage-wrap{width:100%;height:auto;aspect-ratio:auto}
[data-gallery-layout=standard].is-detail .home-view .work-stage{position:relative;width:100%;height:100%;margin:0}
[data-gallery-layout=standard].is-detail .home-view .timeline{display:none}
[data-gallery-layout=standard].is-detail .case-view{margin-top:56px}
[data-direction=gallery] .prototype-credit{display:flex;align-items:center;gap:4px;width:fit-content;margin:12px 0 0;font:400 12px/1.4 GT,sans-serif;color:#858b92;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
[data-direction=gallery] .prototype-credit[hidden]{display:none}
[data-direction=gallery] .prototype-credit svg{width:11px;height:11px}
[data-direction=gallery] .prototype-credit:hover{color:#464c54}
[data-direction=gallery] .prototype-credit:focus-visible{outline:2px solid #4466ee;outline-offset:4px;border-radius:2px}
[data-gallery-layout=standard].is-detail .case-hero{display:none!important}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){[data-gallery-layout=standard].is-detail .case-view{margin-top:32px}}

/* A focused case study: one company in the rail, a larger screen on the page. */
[data-gallery-layout=standard].is-detail #portfolio{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto;column-gap:48px;width:min(1392px,100%);max-width:var(--composition-width,1360px);padding:100px 65px 90px}
[data-gallery-layout=standard].is-detail .work-area{grid-column:2;grid-row:1;margin:0;padding:0;width:100%;max-width:none}
[data-gallery-layout=standard].is-detail .identity{position:sticky;top:160px;left:auto;width:100%;grid-column:1;grid-row:1;align-self:start;margin:60px 0 0}
[data-gallery-layout=standard].is-detail .case-hero{height:auto;aspect-ratio:auto;margin-bottom:56px}
[data-gallery-layout=standard].is-detail .stage-wrap{overflow:visible;view-transition-name:work-field}
[data-gallery-layout=standard].is-detail .gallery-background{opacity:0;pointer-events:none}
[data-gallery-layout=standard].is-detail .work-stage{width:100%;height:100%;margin:0}
[data-gallery-layout=standard].is-detail .visual.project-matte{padding:0;background:none}
[data-gallery-layout=standard].is-detail .case-figure>div{background:none;padding:0;border-radius:var(--image-radius,8px)}
[data-gallery-layout=standard].is-detail .case-brand{margin:0 0 22px}
[data-gallery-layout=standard] .case-company-switch{display:flex;align-items:center;gap:0;min-height:60px;padding-left:3px}
[data-gallery-layout=standard] .case-logo{position:relative;z-index:var(--logo-order);width:44px;height:44px;padding:0;flex:0 0 44px;border:1px solid #fff;border-radius:12px;overflow:hidden;background:#fff;transform:rotate(var(--logo-tilt));scale:1;box-shadow:0 8px 18px -6px #00000014,0 2px 5px #00000007;transition:box-shadow 220ms ease,scale 220ms cubic-bezier(.22,.65,.25,1)}
[data-gallery-layout=standard] .case-logo+.case-logo{margin-left:-9px}
[data-gallery-layout=standard] .case-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:.32;filter:saturate(.55);transition:opacity 240ms ease,filter 240ms ease}
[data-gallery-layout=standard] .case-logo[aria-pressed=true]{z-index:10;box-shadow:0 10px 24px -8px #0000002b,0 2px 5px #00000009}
[data-gallery-layout=standard] .case-logo:active{scale:1.045;z-index:12;transition-duration:140ms}
[data-gallery-layout=standard] .case-logo:hover img{opacity:.45;filter:saturate(.7)}
[data-gallery-layout=standard] .case-logo[aria-pressed=true] img{opacity:1;filter:none;transition:none}
[data-gallery-layout=standard] .case-logo:focus-visible{outline:2px solid #4466ee;outline-offset:4px}
[data-gallery-layout=standard].is-detail .case-footer{display:block;margin-top:48px;padding:0;border:0;text-align:center}
[data-gallery-layout=standard].is-detail .case-status{font-size:14px;line-height:1.5;color:#88888c;margin:0}
[data-gallery-layout=standard].is-detail .rail-case-title{font-size:30px;line-height:1.15;margin:0}
[data-gallery-layout=standard].is-detail .rail-case-description{font-size:18px;line-height:1.5;letter-spacing:normal;margin-top:18px;-webkit-font-smoothing:antialiased}
[data-gallery-layout=standard].is-detail .case-section-nav{display:flex;flex-direction:column;gap:12px;margin:30px 0 0;font-family:"GT",sans-serif;font-size:13px;line-height:1.4;color:#88888c}
[data-gallery-layout=standard].is-detail .case-section-nav a{width:fit-content;transition:color 180ms ease}
[data-gallery-layout=standard].is-detail .case-section-nav a:is(:hover,[aria-current=true]){color:#242525}
[data-gallery-layout=standard].is-detail .back-button{position:fixed;top:100px;left:max(65px,calc((100vw - var(--composition-width,1360px))/2 + 65px));gap:8px;padding:7px 11px 7px 8px;border-radius:50px;background:#eef0f3;box-shadow:var(--surface-shadow);color:#636368;font-size:12px}
[data-gallery-layout=standard].is-detail .back-button:hover{background:#e7ebef;color:#242525}
html[data-transition=case]::view-transition-group(identity){animation:none}
html[data-transition=case]::view-transition-old(identity){animation:case-copy-out var(--route-exit,220ms) ease both}
html[data-transition=case]::view-transition-new(identity){animation:case-copy-in var(--route-copy,320ms) var(--route-ease) both}
html[data-transition=case]::view-transition-old(work-field){animation:case-field-out var(--route-exit,160ms) ease both}
html[data-transition=case]::view-transition-new(work-field){animation:case-field-in var(--route-fieldFade,280ms) ease both}
@keyframes case-field-out{to{opacity:0}}
@keyframes case-field-in{from{opacity:0}}
@keyframes case-copy-out{to{opacity:0;filter:blur(4px);transform:translateY(-4px)}}
@keyframes case-copy-in{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:translateY(0)}}
/* Case switches reveal each screen at its final size instead of resizing it. */
html[data-transition=project]::view-transition-group(featured-work),
html[data-transition=project]::view-transition-group(work-field),
html[data-transition=project]::view-transition-group(identity){animation:none}
html[data-transition=project]::view-transition-image-pair(featured-work){isolation:isolate}
html[data-transition=project]::view-transition-old(featured-work){height:auto;animation:case-screen-out 180ms ease both}
html[data-transition=project]::view-transition-new(featured-work){height:auto;animation:case-screen-in 560ms cubic-bezier(.22,.7,.2,1) 80ms both}
html[data-transition=project]::view-transition-old(identity){animation:case-copy-out 160ms ease both}
html[data-transition=project]::view-transition-new(identity){animation:case-copy-in 380ms cubic-bezier(.22,.7,.2,1) 100ms both}
@keyframes case-screen-out{to{opacity:0;filter:blur(4px)}}
@keyframes case-screen-in{from{opacity:0;filter:blur(9px);transform:translateY(18px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(max-width:1100px) and (min-width:721px){
 [data-gallery-layout=standard].is-detail #portfolio{grid-template-columns:270px minmax(0,1fr);column-gap:32px;padding:90px 36px 70px}
 [data-gallery-layout=standard].is-detail .identity{top:150px}
 [data-gallery-layout=standard].is-detail .back-button{left:36px;top:90px}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard].is-detail #portfolio{display:flex;flex-direction:column;gap:30px;padding:80px 24px 65px}
 [data-gallery-layout=standard].is-detail .identity{position:static;width:100%;margin:0}
 [data-gallery-layout=standard].is-detail .work-area{width:100%;margin:0;padding:0;max-width:none}
 [data-gallery-layout=standard].is-detail .back-button{top:24px;left:24px}
 [data-gallery-layout=standard].is-detail .case-brand{margin-bottom:22px}
 [data-gallery-layout=standard].is-detail .rail-case-title{font-size:26px}
 [data-gallery-layout=standard].is-detail .rail-case-description{font-size:16px;margin-top:14px}
 [data-gallery-layout=standard].is-detail .case-hero{margin-bottom:32px}
}

/* Year labels and ticks share a centre line, including the current-year marker. */
@media(min-width:721px){
 [data-gallery-layout=standard]:not(.is-detail)[data-gallery-timeline=visible] .timeline{opacity:1;pointer-events:auto;transform:translate(0,-50%);width:108px;right:16px}
 [data-gallery-layout=standard] .timeline button{--tick-width:10px;display:grid;grid-template-columns:52px 46px;gap:10px;align-items:center;justify-content:initial;min-height:24px}
 [data-gallery-layout=standard] .timeline button.company-start{--tick-width:22px}
 [data-gallery-layout=standard] .timeline button[aria-current=true]{--tick-width:34px}
 [data-gallery-layout=standard] .timeline button:is(:hover,:focus-visible){--tick-width:44px}
 [data-gallery-layout=standard] .timeline span{position:absolute;right:calc(var(--tick-width) + 8px);top:50%;opacity:0;transform:translate(4px,-50%);text-align:right;font-family:"Suisse Intl",sans-serif;font-size:10px;line-height:1;color:#99999e;white-space:nowrap;transition:right 300ms cubic-bezier(.22,.65,.25,1),color 240ms ease,opacity 180ms ease,transform 300ms cubic-bezier(.22,.65,.25,1)}
 [data-gallery-layout=standard] .timeline i{display:block;grid-column:2;justify-self:end}
 [data-gallery-layout=standard] .timeline :is(span,i){pointer-events:none}
 [data-gallery-layout=standard] .timeline button:is([aria-current=true],:hover,:focus-visible) span{opacity:1;transform:translate(0,-50%);color:var(--timeline-accent)}
 [data-gallery-layout=standard] .timeline-reveal{display:none}
}
@media(max-width:1100px) and (min-width:721px){
 [data-gallery-layout=standard] .case-company-switch{gap:0}
 [data-gallery-layout=standard] .case-logo{width:38px;height:38px;flex-basis:38px;border-radius:10px}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard] .timeline{height:48px}
 [data-gallery-layout=standard] .timeline button{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;height:48px}
 [data-gallery-layout=standard] .timeline span{display:block;position:static;transform:none;height:12px;font-size:9px;line-height:12px}
}
@media(prefers-reduced-motion:reduce){[data-gallery-layout=standard] .case-logo{transition:none}}
@media(prefers-reduced-motion:reduce){[data-direction=gallery] .timeline :is(i,span){transition:none}}

@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard] .company-row+.company-row::before{left:-2px;right:auto;top:8px;width:1px;height:28px;box-shadow:1px 0 0 #ffffffb3}
}

/* The scratch gift retains its open page-colour presentation. */
[data-gallery-layout=standard][data-gallery-frame=gift] [data-background=freelance]{background:transparent}

/* The scratch gift is a standalone card, without an outer panel or rim. */
[data-gallery-layout=standard][data-gallery-frame=gift]:not(.is-detail) .stage-wrap{background:transparent;box-shadow:none}
[data-gallery-layout=standard][data-gallery-frame=gift]:not(.is-detail) .gallery-background{display:none}

/* Move complete opaque logo tiles, including their backing, through the case morph. */
[data-gallery-layout=standard] .company-logo{display:block;flex:none;width:39px;height:39px;overflow:hidden;border-radius:8px;background:transparent}
[data-gallery-layout=standard] .company-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:none!important}
[data-gallery-layout=standard][data-company-glass=true] .company-row:is(:hover,:focus-within) .company,
[data-gallery-layout=standard][data-company-glass=true] .company-row .company[aria-pressed=true]{outline:0;box-shadow:2px 4px 14px #5f7a8f26,inset 0 1px 1px #ffffff26}
[data-gallery-layout=standard][data-company-glass=true] .company-row .company:focus-visible{outline:2px solid #6e8aff;outline-offset:4px}
[data-gallery-layout=standard] .home-footer{display:none}
html[data-transition=case]::view-transition-old(logo-neon),html[data-transition=case]::view-transition-old(logo-marvel),html[data-transition=case]::view-transition-old(logo-elva),html[data-transition=case]::view-transition-old(logo-lynk),html[data-transition=case]::view-transition-old(logo-freelance){animation:none;opacity:0}
html[data-transition=case]::view-transition-new(logo-neon),html[data-transition=case]::view-transition-new(logo-marvel),html[data-transition=case]::view-transition-new(logo-elva),html[data-transition=case]::view-transition-new(logo-lynk),html[data-transition=case]::view-transition-new(logo-freelance){animation:none;opacity:1;mix-blend-mode:normal}
[data-gallery-layout=standard] .visual.scene img{object-fit:cover;object-position:center 54%}
[data-gallery-layout=standard][data-gallery-company=freelance][data-gallery-frame=screen]:has(.work-card.active .gifting-matte) [data-background=freelance]{background:linear-gradient(135deg,#eee8df,#d9cbb9)}
[data-gallery-layout=standard]:not(.is-detail) .visual.gifting-matte{background:transparent;box-shadow:none}
[data-gallery-layout=standard].is-detail .visual.gifting-matte{padding:var(--card-padding,0px);background:linear-gradient(135deg,#eee8df,#d9cbb9)}
[data-gallery-layout=standard].is-detail .visual.project-matte::after{display:block}
[data-gallery-layout=standard] :is(.visual,.case-figure) video[src$="interface-motion.mp4"]{transform:scale(1.14);transform-origin:center}
[data-gallery-layout=standard] .case-figure.motion>div{overflow:hidden}
@media(max-width:1100px) and (min-width:721px){[data-gallery-layout=standard] .company-logo{width:34px;height:34px}}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){[data-gallery-layout=standard] .company-logo{width:30px;height:30px}}

html[data-transition=case]::view-transition-old(featured-work){animation:none;opacity:0}
html[data-transition=case]::view-transition-new(featured-work){animation:none;opacity:1;mix-blend-mode:normal}
html[data-transition=case][data-transition-direction=home]::view-transition-new(company-list){animation:company-list-return var(--route-copy,320ms) var(--route-ease) both;mix-blend-mode:normal}
@keyframes company-list-return{from{opacity:0}to{opacity:1}}

[data-gallery-layout=standard].is-detail .rail-case-title{text-wrap:balance}

/* About unfolds in the identity rail while the photo grid scrolls beside it. */
[data-gallery-layout=standard] .about-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;margin-top:18px;font-family:GT,sans-serif;font-size:13px;font-weight:400;color:#7c8086;transition:color 180ms ease}
[data-gallery-layout=standard] .about-toggle:hover{color:#242525}
[data-gallery-layout=standard] .about-toggle svg{width:14px;height:14px;transition:transform 360ms cubic-bezier(.22,.65,.25,1)}
[data-gallery-layout=standard] .about-toggle[aria-expanded=true]{color:#4b4f56;font-weight:500}
[data-gallery-layout=standard] .about-toggle[aria-expanded=true]:hover{color:#242525}
[data-gallery-layout=standard] .about-toggle[aria-expanded=true] svg{transform:rotate(180deg);stroke-width:1.8}
[data-gallery-layout=standard] .about-toggle[aria-expanded=true] svg path{stroke-width:1.8}
[data-gallery-layout=standard] .intro-stack{display:flow-root;overflow:hidden;margin-top:12px}
[data-gallery-layout=standard] .intro-stack .intro{margin-top:0}
[data-gallery-layout=standard] .expanded-about{display:block}
[data-gallery-layout=standard] .expanded-about[aria-hidden=true]{display:none}
[data-gallery-layout=standard] .expanded-about>div{overflow:hidden;min-height:0}
[data-gallery-layout=standard] .expanded-about p{font-family:GT,sans-serif;font-size:18px;line-height:1.5;letter-spacing:normal;color:#7c7c80;margin:18px 0 0;-webkit-font-smoothing:antialiased}
[data-gallery-layout=standard] .expanded-about p:first-child{margin-top:0}
[data-gallery-layout=standard].is-detail :is(.about-toggle,.expanded-about){display:none}
[data-gallery-layout=standard].is-about #portfolio{grid-template-rows:auto;align-content:start;padding-top:var(--about-home-top,80px);padding-bottom:90px}
[data-gallery-layout=standard].is-about .identity{position:sticky;top:var(--about-home-top,80px);align-self:start;width:100%;grid-column:1;grid-row:1}
[data-gallery-layout=standard].is-about .work-area{grid-column:2;grid-row:1;align-self:start;margin-top:var(--about-work-offset,0px);width:100%;max-width:none;padding:0}
[data-gallery-layout=standard].is-about :is(.home-footer,.timeline,.timeline-reveal){display:none}
[data-gallery-layout=standard].is-about .back-button{position:fixed;top:28px;left:max(65px,calc((100vw - var(--composition-width,1360px))/2 + 65px));right:auto;gap:8px;padding:7px 11px 7px 8px;font-family:GT,sans-serif;font-size:12px}
[data-gallery-layout=standard] .portfolio-photo-grid{position:relative;width:100%}
[data-gallery-layout=standard] .portfolio-photo{position:absolute;overflow:hidden;margin:0;background:#e8edf1;border-radius:var(--image-radius,14px);box-shadow:var(--image-shadow);opacity:0;transform:translateY(14px);transition:opacity 800ms cubic-bezier(.22,.65,.25,1) var(--photo-delay,0ms),transform 800ms cubic-bezier(.22,.65,.25,1) var(--photo-delay,0ms),filter 800ms cubic-bezier(.22,.65,.25,1) var(--photo-delay,0ms)}
[data-gallery-layout=standard] .portfolio-photo:not(.about-motion){filter:blur(6px)}
[data-gallery-layout=standard] .portfolio-photo.is-visible{opacity:1;transform:none;filter:none}
[data-gallery-layout=standard] .portfolio-photo :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
[data-gallery-layout=standard] .portfolio-photo .running-photo{object-position:center bottom;transform:scaleX(-1)}
[data-gallery-layout=standard] .portfolio-photo.about-motion video{object-position:50% 80%}
[data-gallery-layout=standard] .portfolio-photo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--highlight-opacity,.65);box-shadow:inset 1px 1px 2px #fff,inset 0 -1px 0 #5f7a8f16}
[data-gallery-layout=standard] .portfolio-photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:36px 16px 16px;background:linear-gradient(transparent,#0009);font-family:GT,sans-serif;font-size:13px;line-height:1.4;color:#fff}
@media(max-width:1100px) and (min-width:721px){
 [data-gallery-layout=standard].is-about #portfolio{padding-top:var(--about-home-top,80px)}
}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 [data-gallery-layout=standard].is-about #portfolio{justify-content:flex-start;gap:32px;padding-top:35px}
 [data-gallery-layout=standard].is-about .identity{position:static;width:100%}
 [data-gallery-layout=standard].is-about .work-area{width:100%;margin:0;padding:0}
 [data-gallery-layout=standard].is-about .back-button{left:24px;top:24px}
 [data-gallery-layout=standard] .expanded-about p{font-size:16px}
 [data-gallery-layout=standard] .intro-stack{margin-top:17px}
}
@media(prefers-reduced-motion:reduce){
 [data-gallery-layout=standard] :is(.expanded-about,.about-toggle svg,.portfolio-photo){transition:none}
 [data-gallery-layout=standard] .portfolio-photo{opacity:1;transform:none;filter:none!important}
 [data-gallery-layout=standard] .case-logo:active{scale:1}
}
/* Balanced intro and compact glass profile links stay in the identity rail. */
[data-gallery-layout=standard] .identity .intro{max-width:290px;text-wrap:balance}
[data-gallery-layout=standard] .identity-socials{display:none;gap:12px;margin-top:20px}
[data-gallery-layout=standard].is-about .identity-socials{display:flex;animation:profile-links-in 700ms cubic-bezier(.22,.65,.25,1) 180ms both}
@keyframes profile-links-in{from{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
[data-gallery-layout=standard] .identity-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#68686b;background:linear-gradient(145deg,#f9fafb,#edf0f3);box-shadow:inset 1px 1px 1px #fff,0 2px 3px #6975860c,0 6px 15px #6975860a;transition:background 250ms ease,box-shadow 250ms ease,transform 300ms cubic-bezier(.22,.65,.25,1)}
[data-gallery-layout=standard] .identity-socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-gallery-layout=standard] .identity-socials .filled-icon{fill:currentColor;stroke:none}
[data-gallery-layout=standard] .identity-socials a:hover{color:#333;background:linear-gradient(145deg,#fff,#edf0f3);box-shadow:inset 1px 1px 1px #fff,0 3px 5px #69758612,0 8px 18px #69758612;transform:translateY(-1px)}
[data-gallery-layout=standard] .identity-socials a:active{transform:scale(.97)}
[data-gallery-layout=standard] .identity-socials a:focus-visible{outline:2px solid #4466ee;outline-offset:4px}
[data-gallery-layout=standard].is-detail .identity-socials{display:none}
[data-gallery-layout=standard].is-detail .case-figure.vrema-prototype>div{overflow:hidden;background:#f4f4f4;padding:clamp(14px,3vw,32px)}
.vrema-prototype iframe{display:block;width:100%;height:660px;border:1px solid #dedee2;border-radius:8px;background:#f3f3f4;color-scheme:light}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){[data-gallery-layout=standard].is-detail .case-figure.vrema-prototype>div{padding:0}.vrema-prototype iframe{height:620px}}
@media(prefers-reduced-motion:reduce){[data-gallery-layout=standard] .identity-socials{animation:none}[data-gallery-layout=standard] .identity-socials a{transition:none;transform:none}}
/* Vrema shares the screen rim and shadow, with no additional canvas or padding. */
[data-gallery-layout=standard].is-detail .case-figure.vrema-prototype>div{display:block;padding:0;background:transparent;overflow:hidden;border-radius:var(--image-radius,8px)}
.vrema-viewport{position:relative;width:100%;aspect-ratio:1.6;overflow:hidden;border-radius:inherit;background:#f2f2f2}
[data-direction=gallery] .vrema-viewport iframe.interactive-prototype{position:absolute;inset:0;width:1280px;height:800px;max-width:none;border:0;border-radius:0;transform:scale(var(--prototype-scale,1));transform-origin:top left;background:#f2f2f2}
[data-direction=gallery] .visual.prototype{position:relative;display:block;padding:0;overflow:hidden;background:transparent}
[data-gallery-layout=standard][data-gallery-frame=prototype]:not(.is-detail) .stage-wrap{box-shadow:none;background:transparent}
[data-gallery-layout=standard][data-gallery-frame=prototype]:not(.is-detail) .gallery-background{opacity:0}
/* Selected logo leads, then the other four settle in a restrained stagger. */
html[data-transition=case]::view-transition-group(logo-neon){animation-delay:var(--logo-neon-delay,0ms)}
html[data-transition=case]::view-transition-group(logo-marvel){animation-delay:var(--logo-marvel-delay,8ms)}
html[data-transition=case]::view-transition-group(logo-elva){animation-delay:var(--logo-elva-delay,16ms)}
html[data-transition=case]::view-transition-group(logo-lynk){animation-delay:var(--logo-lynk-delay,24ms)}
html[data-transition=case]::view-transition-group(logo-freelance){animation-delay:var(--logo-freelance-delay,32ms)}
/* Company links reuse the site's quiet gray underline, revealing brand color from the center. */
[data-direction=gallery] .company-text-link{position:relative;display:inline-block;color:inherit;text-decoration:none;white-space:nowrap;transition:color 280ms ease}
[data-direction=gallery] .company-text-link::before,[data-direction=gallery] .company-text-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;pointer-events:none}
[data-direction=gallery] .company-text-link::before{background:#c8cbd0}
[data-direction=gallery] .company-text-link::after{background:var(--link-brand);transform:scaleX(0);transform-origin:center;transition:transform 350ms cubic-bezier(.22,.65,.25,1)}
[data-direction=gallery] .company-text-link:is(:hover,:focus-visible)::after{transform:scaleX(1)}
[data-direction=gallery] .company-text-link:hover{color:#242525}
[data-direction=gallery] .company-text-link:focus-visible{outline:2px solid var(--link-brand);outline-offset:4px;border-radius:2px}
@media(prefers-reduced-motion:reduce){[data-direction=gallery] .company-text-link,[data-direction=gallery] .company-text-link::after{transition:none}}
/* Return copy and company surfaces progress with the moving logos, without a waiting phase. */
html[data-transition=case][data-transition-direction=home]::view-transition-new(identity){animation:case-copy-in var(--route-copy,320ms) var(--route-ease) both}
html[data-transition=case]::view-transition{pointer-events:none}
/* Shared route motion: geometry and new surfaces start on the same frame. */
html[data-transition=case]::view-transition-group(logo-neon),html[data-transition=case]::view-transition-group(logo-marvel),html[data-transition=case]::view-transition-group(logo-elva),html[data-transition=case]::view-transition-group(logo-lynk),html[data-transition=case]::view-transition-group(logo-freelance),html[data-transition=case]::view-transition-group(featured-work){animation-duration:var(--route-duration,560ms);animation-timing-function:var(--route-ease);animation-fill-mode:both}
/* Different screens crossfade at their own positions instead of stretching
   an outgoing prototype into an unrelated case-study hero. */
html[data-transition=case][data-route-media=swap]::view-transition-group(featured-work){animation:none}
html[data-transition=case][data-route-media=swap]::view-transition-old(outgoing-work){animation:case-media-out var(--route-exit,140ms) ease both;mix-blend-mode:normal}
html[data-transition=case][data-route-media=swap]::view-transition-new(featured-work){animation:case-media-in var(--route-copy,300ms) var(--route-ease) both;mix-blend-mode:normal}
@keyframes case-media-out{to{opacity:0}}
@keyframes case-media-in{from{opacity:0}to{opacity:1}}
/* Profile buttons reveal brand gradients on hover and keyboard focus. */
[data-gallery-layout=standard] .identity-socials a{position:relative;isolation:isolate;--social-gradient:linear-gradient(145deg,#6d94db,#4263b6);--social-shadow:#4263b630}
[data-gallery-layout=standard] .identity-socials a[href*="linkedin.com"]{--social-gradient:linear-gradient(145deg,#2794df,#0a66c2);--social-shadow:#0a66c230}
[data-gallery-layout=standard] .identity-socials a[href*="instagram.com"]{--social-gradient:linear-gradient(35deg,#f9ce34,#ee2a7b 48%,#6228d7);--social-shadow:#c52b8730}
[data-gallery-layout=standard] .identity-socials a[href*="x.com"]{--social-gradient:linear-gradient(145deg,#555962,#18191c);--social-shadow:#18191c30}
[data-gallery-layout=standard] .identity-socials a::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--social-gradient);box-shadow:inset 1px 1px 1px #ffffff30;opacity:0;transition:opacity 320ms cubic-bezier(.22,.65,.25,1);z-index:-1}
[data-gallery-layout=standard] .identity-socials a:is(:hover,:focus-visible){color:#fff;box-shadow:0 3px 5px #69758612,0 8px 18px var(--social-shadow)}
[data-gallery-layout=standard] .identity-socials a:is(:hover,:focus-visible)::before{opacity:1}
@media(prefers-reduced-motion:reduce){[data-gallery-layout=standard] .identity-socials a::before{transition:none}}

/* Other projects sit directly on the page, without a secondary matte or field. */
[data-gallery-layout=standard][data-gallery-company=freelance] .stage-wrap{background:transparent;box-shadow:none;outline:none}
[data-gallery-layout=standard][data-gallery-company=freelance] .gallery-background{display:none}
[data-gallery-layout=standard][data-gallery-company=freelance] .visual.gifting-matte{padding:0;background:transparent;box-shadow:none}
[data-gallery-layout=standard][data-gallery-company=freelance] :is(.visual.gifting-matte,.visual.video)::after{display:none}
[data-gallery-layout=standard][data-gallery-company=freelance] .visual.video{background:transparent;box-shadow:none}
[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure:has(>div>img[src$="project-2.webp"])>div,[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure:has(>div>img[src$="blueprints-analytics.webp"])>div{padding:0;background:transparent;box-shadow:none;overflow:visible}
[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure:has(>div>img[src$="project-2.webp"])>div::after,[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure:has(>div>img[src$="blueprints-analytics.webp"])>div::after{display:none}
[data-gallery-layout=standard][data-gallery-company=freelance] :is(.visual.gifting-matte,.case-figure) img[src$="project-2.webp"],[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure img[src$="blueprints-analytics.webp"]{filter:drop-shadow(0 8px 14px #5f7a8f16)}
[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure.motion:has(video)>div{background:transparent;box-shadow:none;padding:0}
[data-gallery-layout=standard][data-gallery-company=freelance] .case-figure.motion:has(video)>div::after{display:none}
/* Only the video has depth, with no surrounding field or wrapper rim. */
[data-gallery-layout=standard][data-gallery-company=freelance] :is(.stage-wrap,.case-hero){background:transparent;box-shadow:none;outline:none}
[data-gallery-layout=standard][data-gallery-company=freelance] :is(.visual.video,.case-figure.motion:has(video)>div){background:transparent;box-shadow:none;outline:none;padding:0;overflow:visible}
[data-gallery-layout=standard][data-gallery-company=freelance] :is(.visual.video,.case-figure.motion:has(video)>div)::after{display:none}
[data-gallery-layout=standard][data-gallery-company=freelance] video[src$="interface-motion.mp4"]{mix-blend-mode:normal;transform:none;border-radius:var(--image-radius,8px);box-shadow:0 1px 2px #52647912,0 5px 12px #5264791a,0 18px 32px #52647922}
/* Match Blueprints' 1528px frame while preserving Airweave's transparent shadow.
   Both visible screens are 1520px wide; Airweave has a larger transparent inset. */
[data-gallery-layout=standard] :is(.visual,.case-figure>div):has(>img[src$="airweave-dashboard.png"]){position:relative;display:block;aspect-ratio:1528/907;padding:0;background:transparent;box-shadow:none;outline:none;overflow:visible}
[data-gallery-layout=standard] :is(.visual,.case-figure>div):has(>img[src$="airweave-dashboard.png"])::after{display:none}
[data-gallery-layout=standard] img[src$="airweave-dashboard.png"]{position:absolute;left:-3.664921%;top:-6.394708%;width:107.329843%;height:auto;max-width:none;max-height:none;border-radius:0;box-shadow:none}

/* Mobile uses a centered introduction, a compact logo dock and a touch timeline. */
.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 html:has(body[data-gallery-layout=standard]){scrollbar-gutter:auto}
 [data-gallery-layout=standard] #portfolio{display:block;width:100%;max-width:100%;padding:76px 16px 40px;min-height:100svh}
 [data-gallery-layout=standard] .identity{display:block;position:static;width:100%;margin:0;text-align:center}
 [data-gallery-layout=standard] .identity .name{font-size:34px;line-height:1.12;white-space:normal;letter-spacing:-.025em}
 [data-gallery-layout=standard] .identity .intro{font-size:18px;line-height:1.45;max-width:290px;margin:16px auto 0;text-wrap:balance}
 [data-gallery-layout=standard] .about-toggle{display:none}
 [data-gallery-layout=standard] .about-toggle[aria-expanded=true]{display:inline-flex;margin:22px auto 0}
 [data-gallery-layout=standard] .mobile-menu-toggle{display:grid;place-items:center;position:fixed;top:16px;right:16px;z-index:50;width:42px;height:42px;padding:10px;border-radius:50%;color:#555b65;background:linear-gradient(145deg,#ffffffd9,#edf0f3b3);border:1px solid #ffffffb3;box-shadow:inset 1px 1px 2px #fff,0 3px 6px #69758612,0 8px 18px #6975860d;backdrop-filter:blur(14px)}
 [data-gallery-layout=standard] .mobile-menu-toggle svg{width:22px;height:22px}
 [data-gallery-layout=standard] .mobile-menu-toggle:focus-visible{outline:2px solid #4466ee;outline-offset:3px}
 [data-gallery-layout=standard] .mobile-menu{display:flex;flex-direction:column;position:fixed;top:66px;right:16px;z-index:49;width:220px;padding:8px;border-radius:16px;background:#f9fafbeF;backdrop-filter:blur(20px);border:1px solid #fff;box-shadow:0 4px 10px #69758612,0 18px 36px #69758622;font:400 15px/1.4 GT,sans-serif;text-align:left}
 [data-gallery-layout=standard] .mobile-menu[hidden]{display:none}
 [data-gallery-layout=standard] .mobile-menu :is(button,a){padding:12px;border-radius:9px;text-align:left;color:#4b4f56}
 [data-gallery-layout=standard] .mobile-menu :is(button,a):hover{background:#e9edf2}
 [data-gallery-layout=standard] .mobile-menu :is(button,a):focus-visible{outline:2px solid #4466ee;outline-offset:-2px}
 [data-gallery-layout=standard] .company-nav{position:sticky;top:72px;z-index:20;display:flex;justify-content:center;align-items:center;gap:0;width:220px;max-width:100%;margin:28px auto 26px;padding:3px 0;transform:none}
 [data-gallery-layout=standard] .company-row{width:44px;flex:0 0 44px}
 [data-gallery-layout=standard] .company-row+.company-row{margin-left:-6px}
 [data-gallery-layout=standard] .company-row::before{display:none}
 [data-gallery-layout=standard][data-company-glass=true][data-company-colour=true] .company-nav .company{width:44px;height:44px;padding:0;border:1px solid white;border-radius:12px;transform:rotate(var(--mobile-logo-tilt));background:#fff;outline:0;box-shadow:0 3px 8px #69758618;overflow:hidden}
 [data-gallery-layout=standard] .company-logo{width:42px;height:42px;border-radius:10px}
 [data-gallery-layout=standard] .company-logo img{width:100%;height:100%;opacity:.5;transition:opacity 220ms ease}
 [data-gallery-layout=standard] .company[aria-pressed=true]{z-index:10}
 [data-gallery-layout=standard] .company[aria-pressed=true] .company-logo img{opacity:1}
 [data-gallery-layout=standard] :is(.company-copy,.company-open,.selection-dot){display:none}
 [data-gallery-layout=standard] .work-area{width:100%;max-width:100%;margin:0;padding:0;scroll-margin-top:140px}
 [data-gallery-layout=standard] .home-view{height:auto;width:100%;max-width:100%}
 [data-gallery-layout=standard] .stage-wrap{aspect-ratio:1.18;border-radius:24px}
 [data-gallery-layout=standard] .work-stage{touch-action:pan-y}
 [data-gallery-layout=standard] .timeline{display:flex;position:relative;inset:auto;transform:none;width:100%;height:70px;margin:18px 0 0;padding:0 calc(50% - 22px);gap:0;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
 [data-gallery-layout=standard] .timeline::-webkit-scrollbar{display:none}
 [data-gallery-layout=standard] .timeline button{width:44px;min-width:44px;flex:0 0 44px;height:60px;padding:26px 0 8px;align-items:center;justify-content:center;scroll-snap-align:center}
 [data-gallery-layout=standard] .timeline span{display:block;position:absolute;top:0;left:0;right:0;transform:none;opacity:1;font-size:10px;line-height:18px;text-align:center}
 [data-gallery-layout=standard] .timeline i,[data-gallery-layout=standard] .timeline button:hover i{width:2px;height:8px}
 [data-gallery-layout=standard] .timeline button.company-start i{width:2px;height:14px}
 [data-gallery-layout=standard] .timeline button[aria-current=true] i{width:2px;height:24px}
 [data-gallery-layout=standard] .timeline-reveal{display:none}
 [data-gallery-layout=standard].is-detail::before{display:none}
 [data-gallery-layout=standard].is-detail #portfolio{display:block;padding:78px 16px 44px}
 [data-gallery-layout=standard].is-detail .identity{display:block;position:static;top:auto;left:auto;width:100%;margin:0;text-align:center}
 [data-gallery-layout=standard].is-detail .case-brand{margin:0 auto 22px}
 [data-gallery-layout=standard].is-detail .case-company-switch{justify-content:center;padding:0}
 [data-gallery-layout=standard].is-detail .rail-case-title{font-size:30px;line-height:1.15;max-width:350px;margin:0 auto;text-wrap:balance}
 [data-gallery-layout=standard].is-detail .rail-case-description{font-size:16px;line-height:1.5;max-width:330px;margin:16px auto 30px;text-wrap:balance}
 [data-gallery-layout=standard].is-detail .work-area{width:100%;max-width:100%;margin:0;padding:0}
 [data-gallery-layout=standard].is-detail .case-hero{width:100%;margin-bottom:32px}
 [data-gallery-layout=standard].is-detail .case-hero .stage-wrap{width:100%;height:100%;aspect-ratio:auto;border-radius:var(--image-radius,8px)}
 [data-gallery-layout=standard].is-detail .case-hero .work-stage{position:relative;width:100%;height:100%;margin:0}
 [data-gallery-layout=standard].is-detail .back-button{position:fixed;top:20px;left:16px;right:auto;min-height:34px;font-size:13px}
 [data-gallery-layout=standard].is-detail .case-gallery{gap:32px}
 [data-gallery-layout=standard].is-about #portfolio{padding:76px 16px 40px}
 [data-gallery-layout=standard].is-about .identity{position:static;text-align:center}
 [data-gallery-layout=standard].is-about .expanded-about{max-width:360px;margin:0 auto}
 [data-gallery-layout=standard].is-about .identity-socials{justify-content:center}
 [data-gallery-layout=standard].is-about .work-area{margin-top:30px}
 body[data-gallery-layout=standard] .dialkit-root{display:none}
}
@media(max-width:359px){[data-gallery-layout=standard] .identity .name{font-size:30px}[data-gallery-layout=standard] .identity .intro{font-size:17px}}

/* The standard timeline keeps a stable hit area, avoiding hover-triggered hiding. */
@media(min-width:721px){[data-gallery-layout=standard] .timeline{opacity:1;pointer-events:auto;transform:translate(0,-50%);transition:none}[data-gallery-layout=standard] .timeline-reveal{display:none}}

.mobile-project-controls,.mobile-demo-toggle{display:none}
[data-gallery-layout=standard][data-corner-preview] .stage-wrap{border-radius:var(--preview-field-radius)}
/* The organiser film is a visual demonstration, with no player interaction. */
.case-gallery video[src$="neon-organiser-film.mp4"]{display:block;width:100%;height:auto;pointer-events:none;transform:translateZ(0);backface-visibility:hidden}
.case-figure:has(video[src$="neon-organiser-film.mp4"])>div{display:block;isolation:isolate;background:#fbf8f4}
/* Phones use one preview and native-size controls instead of desktop layers. */
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1024px){
 html:has([data-gallery-layout=standard]){overflow-x:clip}
 body[data-gallery-layout=standard]{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 [data-gallery-layout=standard] :is(button,a,input,select,textarea){touch-action:manipulation}
 [data-gallery-layout=standard] :is(input,select,textarea,[contenteditable=true]){font-size:16px}
 [data-gallery-layout=standard] .stage-wrap{aspect-ratio:auto;min-height:0;border-radius:20px}
 [data-gallery-layout=standard] .work-stage{width:calc(100% - 32px);height:calc(100% - 32px);margin:0;touch-action:pan-y pinch-zoom}
 [data-gallery-layout=standard] .work-card:not(.active){visibility:hidden}
 [data-gallery-layout=standard] .work-card{filter:none!important;will-change:auto!important}
 [data-gallery-layout=standard] .visual{box-shadow:0 3px 12px #5f7a8f1a}
 [data-gallery-layout=standard]:not(.is-detail) .work-card :is(iframe,.library-home-canvas){pointer-events:none}
 [data-gallery-layout=standard] .mobile-project-controls{display:block;text-align:center;margin:18px 0 0}
 [data-gallery-layout=standard] .mobile-project-title{font:400 14px/1.4 GT,sans-serif;color:#6a6a6b;margin:0 0 12px;text-wrap:balance}
 [data-gallery-layout=standard] .mobile-project-controls>div{display:flex;justify-content:center;align-items:center;gap:12px}
 [data-gallery-layout=standard] .mobile-project-controls button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px;border-radius:50%;background:linear-gradient(145deg,#fff,#edf0f3);border:1px solid #fff;color:#444b54;box-shadow:inset 1px 1px 2px #fff,0 3px 10px #69758614;font:400 15px/1.4 GT,sans-serif}
 [data-gallery-layout=standard] .mobile-project-controls .mobile-project-open{border-radius:24px;padding:10px 20px}
 [data-gallery-layout=standard] .mobile-project-controls button[hidden]{display:none}
 [data-gallery-layout=standard] .mobile-project-controls button:disabled{opacity:.3}
 [data-gallery-layout=standard] .mobile-project-controls svg{width:18px;height:18px}
 [data-gallery-layout=standard].is-detail .mobile-project-controls{display:none}
 [data-gallery-layout=standard] .timeline{touch-action:pan-x pan-y pinch-zoom;margin-top:16px}
 [data-gallery-layout=standard] .mobile-menu-toggle{width:44px;height:44px;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
 [data-gallery-layout=standard] .mobile-menu{font-size:16px;max-height:calc(100dvh - 90px);overflow:auto;backdrop-filter:none}
 [data-gallery-layout=standard] .mobile-menu :is(button,a){min-height:44px}
 [data-gallery-layout=standard] .company-nav{position:relative;top:auto;isolation:isolate}
 [data-gallery-layout=standard] .company:active{opacity:.8}
 [data-gallery-layout=standard].is-detail .back-button{min-height:44px;padding:10px 12px;top:max(12px,env(safe-area-inset-top));left:12px;background:#f4f6f8f5;border-radius:24px;font-size:14px;z-index:51}
 [data-gallery-layout=standard].is-detail .stage-wrap{border-radius:14px}
 [data-gallery-layout=standard].is-detail .work-stage{width:100%;height:100%;margin:0}
 [data-gallery-layout=standard].is-detail .case-gallery{gap:24px}
 [data-gallery-layout=standard].is-detail .case-logo{width:44px;height:44px}
 [data-gallery-layout=standard] :is(.scroll-reveal,.portfolio-photo){filter:none!important;transition:opacity 180ms ease!important;transform:none!important}
 [data-gallery-layout=standard].is-detail .vrema-viewport{height:620px;aspect-ratio:auto}
 [data-gallery-layout=standard].is-detail .vrema-viewport iframe.interactive-prototype{width:100%;height:100%;transform:none;pointer-events:none}
 [data-gallery-layout=standard].is-detail .prototype-credit{display:inline-flex;align-items:center;min-height:44px;font-size:15px;margin-top:8px}
 [data-gallery-layout=standard].is-detail .prototype-credit[hidden]{display:none}
 [data-gallery-layout=standard] .presentation-viewport iframe{pointer-events:none}
 [data-gallery-layout=standard].is-detail .presentation-viewport{aspect-ratio:1280/1060}
 [data-gallery-layout=standard].is-detail .mobile-demo-toggle:not([hidden]){display:block;position:absolute;left:50%;bottom:8px;transform:translateX(-50%);height:44px;min-width:112px;padding:8px 16px;border:1px solid #fff;border-radius:24px;background:linear-gradient(145deg,#fff,#edf0f3);color:#444b54;font:400 15px/1.4 GT,sans-serif;box-shadow:0 3px 10px #69758614}
 [data-gallery-layout=standard] .gallery-gift .gift-card{transform:none;transition:none}
 [data-gallery-layout=standard] .gallery-gift .gift-booking{backdrop-filter:none;min-height:44px}
}
[data-gallery-layout=standard][data-corner-preview] .stage-wrap{border-radius:var(--preview-field-radius)}