/* Translucent surfaces inspired by macOS Golden Gate; APOLO's typography and palette remain. */
:root{--glass-border:rgba(255,255,255,.76)}
.pill,.hero-work-link,.contact-button,.text-link,.view-project,.glass-button,#motion-toggle,.dialog-close,#video-toggle{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--glass-border);border-radius:999px;background:linear-gradient(140deg,#fff9,#ffffff1c 48%,#fff5);backdrop-filter:blur(18px) saturate(1.65);-webkit-backdrop-filter:blur(18px) saturate(1.65);box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #ffffff40,0 6px 18px #1919120e,0 1px 3px #14141410;color:var(--ink);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .28s;min-height:44px}
.pill:before,.hero-work-link:before,.contact-button:before,.text-link:before,.view-project:before,.glass-button:before,#motion-toggle:before,.dialog-close:before,#video-toggle:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--glass-x,25%) var(--glass-y,0%),#ffffffa3 0%,#ffffff20 42%,transparent 70%);opacity:.6;transition:opacity .25s}
.pill:hover,.hero-work-link:hover,.contact-button:hover,.text-link:hover,.glass-button:hover,.dialog-close:hover{background:linear-gradient(135deg,#fffc,#ffffff50);box-shadow:inset 0 1px 1px #fff,0 10px 24px #10101018;transform:translateY(-2px)}
.pill:active,.hero-work-link:active,.contact-button:active,.glass-button:active,.text-link:active{transform:translateY(0) scale(.97)}
.text-link{display:inline-flex;width:max-content;max-width:100%;padding:12px 20px;gap:18px;border-bottom:1px solid var(--glass-border);font-size:13px;text-decoration:none}.text-link .link-line{width:25px}.dialog-close{padding:10px 18px}.view-project{padding:11px 18px;font-size:12px;min-height:40px}.hero-work-link{background:linear-gradient(130deg,#fcba03b5,#ffd95f55);color:#fff;border-color:#ffefb7b0;box-shadow:inset 0 1px 1px #fff9,0 8px 24px #0003;text-shadow:0 1px 5px #6b400060}.hero-work-link:hover{background:linear-gradient(130deg,#ffc73bcc,#fcba0380);color:#fff}.header--overlay .pill,.light,#motion-toggle,#video-toggle,.brand-parade .glass-button{color:#fff;background:linear-gradient(130deg,#ffffff25,#ffffff0d);border-color:#ffffff50;box-shadow:inset 0 1px 0 #ffffff70,0 7px 24px #0003}.header--overlay .pill:hover,.light:hover,.brand-parade .glass-button:hover{color:#fff;background:#ffffff35}.contact-button{background:#ffffff30;border-color:#fff8}.dark-pill{background:linear-gradient(135deg,#292a2bc9,#101010a3);color:#fff;border-color:#fff5}.dark-pill:hover{background:linear-gradient(135deg,#4d4e50dd,#25262ccc);color:#fff}.liquid-glass:focus-visible,.logo-viewport:focus-visible{outline:3px solid #a56e00;outline-offset:5px}.brand-parade .liquid-glass:focus-visible,.header--overlay .liquid-glass:focus-visible{outline-color:var(--yellow)}#motion-toggle{padding:11px 17px;font-size:11px;background:#181818ad;z-index:90}#video-toggle{min-height:38px;min-width:38px;display:inline-grid;place-items:center}
/* Every frame occupies the exact same registration canvas. */
.hero.hero--parallax{height:250svh;min-height:1500px}.astronaut-sequence{position:relative;width:100%;height:100%;animation:astronaut-drift 7s ease-in-out infinite alternate}.scene-astronaut img.astronaut-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:none;will-change:opacity;filter:drop-shadow(6px 18px 20px #0c122329)}.scene-astronaut{top:9%;height:88%;right:5%;transform-origin:55% 65%}.motion-paused .astronaut-pose{opacity:0!important}.motion-paused .astronaut-pose:first-child{opacity:1!important}
/* A native scrolling rail can be dragged, swiped or zoomed independently. */
.brand-parade{padding:32px 0 28px}.brand-parade-heading{gap:24px}.brand-parade h2{max-width:390px;line-height:1.6}.carousel-tools{display:flex;align-items:center;gap:22px}.carousel-tools>span{font-size:12px;color:#aaa;line-height:1.5}.logo-zoom-controls{display:flex;gap:6px;align-items:center}.glass-button{font:500 12px var(--sans);padding:9px 14px;cursor:pointer}.glass-button.icon-button{width:40px;padding:0;min-height:40px;font-size:20px}.logo-zoom-controls #logo-zoom-reset{width:62px;padding:9px 0;min-height:40px;font-variant-numeric:tabular-nums}.glass-button:disabled{opacity:.35;cursor:default;transform:none}.logo-viewport{--logo-scale:1;overflow-x:auto;overflow-y:hidden;width:100%;cursor:grab;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto!important;-webkit-overflow-scrolling:touch;user-select:none;margin-top:15px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.logo-viewport::-webkit-scrollbar{display:none}.logo-viewport.is-dragging{cursor:grabbing}.logo-marquee{margin:0;width:max-content!important;overflow:visible!important;display:flex}.logo-track{display:flex!important;animation:none!important;transform:none!important}.client-logo{flex:none;width:calc(210px * var(--logo-scale));height:175px;padding:12px calc(35px * var(--logo-scale));max-width:none}.client-logo img{max-width:100%;max-height:calc(80px * var(--logo-scale));height:auto;width:auto;pointer-events:none;user-select:none}
/* Remove presentation backdrops; the artwork itself retains its original colours. */
.project-cover.holi,.project-cover.social,.packaging-art,.mishimix-art,.orbi-brand-art,.digital-visual{background:transparent!important}.project-cover.holi,.project-cover.social,.packaging-art,.mishimix-art{overflow:visible}.holi-kicker{color:#79746c}.holi>img{filter:drop-shadow(0 22px 14px #2c11411a)}.project-cover.holi{height:clamp(320px,34vw,580px)}.package-main{width:100%;margin:0;filter:drop-shadow(0 25px 20px #29231724);transform:rotate(var(--package-rotate,-3deg)) scale(.91)}.packaging-art{min-height:400px}.art-note{bottom:0}.mishimix-art img{filter:drop-shadow(0 12px 16px #3b233211);width:100%;height:auto}.mishimix-copy h4 em{color:#77528b}.label-samples img{filter:drop-shadow(0 9px 6px #201d1629)}.pack-details img{filter:drop-shadow(0 10px 8px #19191912)}.project-cover.social{height:clamp(350px,34vw,530px)}.social-composition{width:98%;min-width:98%;gap:10px;transform:rotate(-4deg) translateY(var(--image-y,0px))}.social-composition img{width:48%;filter:drop-shadow(0 18px 15px #0002)}.social-composition img:nth-child(2){transform:translateY(45px) rotate(6deg)}.podio>img{width:86%;height:86%;filter:drop-shadow(0 18px 15px #0002)}.social-section .view-project{bottom:0}.orbi-brand-case{gap:4vw}.orbi-brand-art{position:relative;aspect-ratio:1.16;min-height:470px;padding:0;overflow:visible}.orbi-wordmark{position:absolute;left:2%;top:0;width:42%!important;height:auto!important;z-index:2}.orbi-character{position:absolute;width:85%!important;height:auto!important;right:0;top:8%;filter:drop-shadow(0 30px 24px #41237524);animation:orby-float 7s ease-in-out infinite alternate}.orbi-palette{display:flex;position:absolute;bottom:3%;left:4%;gap:12px;transform:rotate(-8deg)}.orbi-palette i{width:47px;height:60px;border-radius:7px;background:#7044f5;box-shadow:0 12px 20px #31214b20;border:1px solid #fff5}.orbi-palette i:nth-child(2){background:#7be7d9}.orbi-palette i:nth-child(3){background:#e9ddff}.orbi-palette i:nth-child(4){background:#141119}@keyframes orby-float{to{transform:translateY(-16px) rotate(-4deg)}}
/* Desktop and mobile move on separate planes without a coloured rectangle behind. */
.digital-case,.digital-case:nth-child(even){grid-template-columns:1.3fr 1fr;gap:4vw;padding:70px 0}.digital-case:nth-child(even){grid-template-columns:1fr 1.3fr}.device-pair.digital-visual{position:relative;width:100%;padding:20px 0 40px!important;min-height:0;overflow:visible!important;aspect-ratio:1.2;perspective:1400px;--pair-progress:.5}.device-composition{position:relative;display:block!important;width:100%;height:100%;min-height:100%;outline-offset:12px;isolation:isolate}.device-desktop{position:absolute;left:0;top:7%;width:92%;display:block;border:5px solid #26282a;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 28px 40px -12px #1a1b2040,0 0 0 1px #ffffffc0;transform:translate3d(calc(var(--pair-progress) * -9px),calc(var(--pair-progress) * -18px),0) rotate(calc(-2deg + var(--pair-progress) * 3deg));will-change:transform}.device-browser-bar{display:flex;align-items:center;gap:4px;padding:9px 11px;background:linear-gradient(#f4f4f5,#dcdde0);color:#74767a;min-height:25px}.device-browser-bar>i{width:5px;height:5px;border-radius:50%;background:#aaaeb3}.device-browser-bar>span{margin:auto;font-size:8px;letter-spacing:.025em;line-height:1}.device-desktop img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top}.device-phone{position:absolute;right:0;bottom:1%;width:26.5%;display:block;z-index:2;transform:translate3d(calc(var(--pair-progress) * 10px),calc((var(--pair-progress) - .5) * -65px),0) rotate(calc(5deg - var(--pair-progress) * 6deg));will-change:transform}.device-phone-float{position:relative;display:block;overflow:hidden;border:5px solid #17181b;border-radius:25px;background:#18191c;box-shadow:0 22px 24px -8px #1a1b2045,0 0 0 1px #85868d;animation:phone-drift 6s ease-in-out infinite alternate}.device-phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;min-height:0}.phone-speaker{position:absolute;width:25%;height:5px;left:37.5%;top:4px;background:#17181b;border-radius:10px;z-index:2}.device-caption{position:absolute;left:0;bottom:0;color:#78756b;font-size:9px;letter-spacing:.12em}.device-composition:hover .device-desktop{filter:brightness(1.035)}.device-composition:focus-visible{outline:3px solid #a56e00;border-radius:12px}.digital-visual .device-visual-caption{display:none}.digital-copy .text-link{font-size:13px}.legacy-web-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.legacy-web-case{min-width:0}.legacy-web-case h4{font-size:27px;font-weight:500;letter-spacing:-.045em;margin-top:25px}.legacy-web-case .case-features{margin:16px 0 25px}.legacy-web-case .case-features li{font-size:12px}.compact-pair .device-desktop{border-width:4px;border-radius:9px}.compact-pair .device-phone-float{border-width:3px;border-radius:15px}.compact-pair .device-browser-bar{padding:5px 7px;min-height:16px}.compact-pair .device-browser-bar>span{font-size:6px}.compact-pair .device-browser-bar>i{width:3px;height:3px}.compact-pair .phone-speaker{top:3px;height:3px}@keyframes phone-drift{to{transform:translate3d(0,-8px,0) rotate(-.6deg)}}
@media(max-width:1050px){.brand-parade-heading{align-items:flex-start}.carousel-tools{gap:12px}.carousel-tools>span{max-width:180px}.orbi-brand-art{min-height:370px}.orbi-palette i{width:36px;height:48px}.digital-case,.digital-case:nth-child(even){gap:30px}.device-phone-float{border-width:4px;border-radius:20px}.device-pair.digital-visual{aspect-ratio:1.05}.legacy-web-grid{gap:22px}.legacy-web-case h4{font-size:24px}}
@media(max-width:700px){.hero.hero--parallax{height:220svh;min-height:1450px}.scene-astronaut{width:94%;height:75%;right:-22%;top:13%}.brand-parade{padding:26px 0 15px}.brand-parade-heading{display:block}.brand-parade h2{font-size:11px;max-width:300px}.carousel-tools{justify-content:space-between;margin-top:18px;gap:15px}.carousel-tools>span{display:block;font-size:11px;max-width:175px}.logo-viewport{margin-top:0}.client-logo{width:calc(158px * var(--logo-scale));height:150px;padding:10px calc(23px * var(--logo-scale))}.client-logo img{max-height:calc(65px * var(--logo-scale))}.logo-zoom-controls{gap:4px}.glass-button.icon-button{width:34px;min-height:36px}.logo-zoom-controls #logo-zoom-reset{width:51px;min-height:36px;font-size:10px}.orbi-brand-art{min-height:0;aspect-ratio:1;overflow:visible}.orbi-character{width:94%!important;top:8%;right:-3%}.orbi-wordmark{left:0;top:-2%;width:43%!important}.orbi-palette{bottom:4%;left:0;gap:8px}.orbi-palette i{width:32px;height:43px}.project-cover.social{height:104vw;max-height:470px}.project-cover.holi{height:80vw}.social-composition{width:94%;min-width:94%}.social-composition img:nth-child(2){transform:translateY(30px) rotate(5deg)}.packaging-art{height:75vw;min-height:0}.package-main{width:100%;margin:0}.art-note{bottom:-10px;font-size:8px}.digital-case,.digital-case:nth-child(even){grid-template-columns:1fr;gap:30px;padding:40px 0 45px}.digital-case:nth-child(even) .digital-visual{order:0}.device-pair.digital-visual{aspect-ratio:1.18;padding:12px 5px 32px!important;max-height:none}.device-desktop{width:89%;border-width:3px;border-radius:8px;top:6%}.device-browser-bar{padding:5px 7px;min-height:18px}.device-browser-bar>span{font-size:6px}.device-browser-bar>i{width:3px;height:3px}.device-phone{width:28%;right:1%;bottom:1%}.device-phone-float{border-width:3px;border-radius:15px}.phone-speaker{height:3px;top:3px}.device-caption{font-size:8px;bottom:0;left:5px}.digital-prado .digital-visual:after{display:none}.legacy-web-grid{grid-template-columns:1fr;gap:45px}.legacy-web-case h4{font-size:27px;margin-top:24px}.legacy-web-case .case-features li{font-size:13px}.legacy-web-case .device-pair{aspect-ratio:1.18}.text-link{font-size:12px;padding:11px 17px}.header--overlay .pill{font-size:11px;min-height:38px}.hero-work-link{min-height:44px}#motion-toggle{font-size:10px;padding:9px 13px;min-height:37px}.contact-button{min-height:50px}.hero--parallax .hero-top{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero.hero--parallax{height:100svh;min-height:700px}.astronaut-pose{opacity:0!important}.astronaut-pose:first-child{opacity:1!important}.device-desktop,.device-phone,.device-phone-float,.orbi-character{transform:none!important;animation:none!important}.logo-viewport{overflow-x:auto}.logo-track[aria-hidden]{display:flex!important}}
.motion-paused .device-desktop,.motion-paused .device-phone,.motion-paused .device-phone-float,.motion-paused .orbi-character{transform:none!important;animation:none!important}.motion-paused .logo-track[aria-hidden]{display:flex!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.liquid-glass{background:#f3f0e7f5}.header--overlay .liquid-glass,.brand-parade .liquid-glass,#motion-toggle,.light{background:#303034f5;color:#fff}.dark-pill{background:#292a2b;color:#fff}.hero-work-link{background:#c69100;color:#fff}}

.motion-paused .hero.hero--parallax{height:100svh;min-height:700px}
/* Keep floating controls out of the artwork's flex layout. */
.view-project{position:absolute;right:18px;bottom:18px;transform:none;white-space:nowrap;width:max-content;z-index:3}.project-cover.social .view-project{bottom:8px;right:8px}#motion-toggle{position:fixed}

@media(max-width:700px){.logo-zoom-controls .glass-button.icon-button{width:44px;min-height:44px}.logo-zoom-controls #logo-zoom-reset{min-height:44px}}