/* DANLAB: refractive surfaces, liquid volume and editorial movement. */
:root{--glass:rgba(244,237,255,.10);--glass-edge:rgba(255,255,255,.36)}
.hero{background:radial-gradient(ellipse at 78% 28%,#6229a4 0%,#341647 40%,#180d29 76%)}.hero-orb{width:54vw;height:54vw;max-width:750px;max-height:750px;top:7%;right:-4%;transform:none;z-index:1;pointer-events:none;filter:drop-shadow(0 35px 35px #07001490)}.hero-orb canvas{display:block;width:100%;height:100%;position:absolute;inset:0;opacity:0;transition:opacity .5s}.hero-orb canvas.ready{opacity:1}.hero-orb .liquid-fallback{inset:15%;border:0;transform:none;background:radial-gradient(ellipse at 30% 20%,#fff 0%,#d8b6ff 4%,#914fe0 17%,#3b095f 46%,#cd96fd 68%,#2d064f 82%);border-radius:42% 58% 59% 41% / 39% 37% 63% 61%;box-shadow:inset 9px 10px 18px #ffeaff90,inset -18px -25px 26px #140325bd,15px 25px 45px #0a001d70;animation:liquid-fallback 8s ease-in-out infinite alternate;z-index:-1}.hero-orb:has(canvas.ready) .liquid-fallback{display:none}@keyframes liquid-fallback{to{border-radius:63% 37% 41% 59% / 58% 61% 39% 42%;transform:rotate(40deg) scale(.93)}}
.hero-content{z-index:3;max-width:1020px}.hero h1{max-width:850px;text-shadow:0 4px 30px #1c052850}.hero-description{max-width:380px}.glass-tag,.button.light,.header-cta,.video-toggle,.project-open,.dialog-close{background:linear-gradient(145deg,#ffffff24,#ffffff08 55%,#d5b5ff1c);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 1px #ffffff20,0 12px 30px #10051b26;color:var(--cream);isolation:isolate}.button.light:before,.header-cta:before,.glass-tag:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,25%) var(--light-y,0%),#ffffff50,transparent 55%);opacity:.7;transition:opacity .25s}.button.light:hover,.header-cta:hover{background:linear-gradient(145deg,#ffffff35,#bc91ff20);box-shadow:inset 0 1px 1px #fff,0 18px 40px #17032950;transform:translateY(-3px)}.header-cta{position:relative}.button.light span{background:#ffffff1c;border:1px solid #ffffff36;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:20px}.hero .button{padding:13px 15px 13px 25px;min-height:62px;min-width:245px}.glass-tag{position:absolute;padding:14px 20px;border-radius:22px;z-index:4;font-size:12px;line-height:1.5;pointer-events:none}.glass-tag span{display:block;color:#d4b8f2;font-size:10px;margin-top:4px}.tag-one{right:6%;top:20%;transform:rotate(6deg)}.tag-two{right:19%;top:53%;transform:rotate(-7deg)}.tag-dot{width:7px;height:7px;background:#b8fbdf;border-radius:50%;display:inline-block;margin-right:8px;box-shadow:0 0 12px #a7f9d9}.header.is-scrolled{position:fixed;left:3%;right:3%;top:12px;height:66px;border-radius:50px;padding:0 24px;background:#28143c99;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid #ffffff26;box-shadow:inset 0 1px #ffffff40,0 10px 25px #0b021d35}.header.is-scrolled .brand{width:125px}.header.is-scrolled .header-cta{padding:8px 16px}.header.is-scrolled .desktop-nav{font-size:12px}.menu{background:#291140e8;backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px)}.menu.open~main{filter:blur(2px)}
/* A reel navigated by the visitor's scroll, with depth and a glass caption. */
.work-reel{height:230svh;background:#180d29;position:relative}.reel-pin{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;padding:70px 7% 30px;perspective:1000px}.reel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;position:relative;z-index:3}.reel-heading h2{font-size:clamp(55px,7vw,100px)}.reel-heading h2 em{color:var(--lilac)}.reel-heading>p{max-width:210px;font-size:13px;opacity:.7}.reel-track{display:flex;gap:35px;width:max-content;margin-top:45px;will-change:transform;align-items:center;transform-style:preserve-3d}.reel-card{width:330px;height:430px;background:none;padding:0;position:relative;border-radius:15px;overflow:hidden;box-shadow:0 30px 60px #0008;transform:rotateY(-12deg) rotate(-4deg);will-change:transform}.reel-card:nth-child(even){transform:rotateY(12deg) rotate(5deg) translateY(25px)}.reel-card>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.reel-card:hover>img{transform:scale(1.06)}.reel-card .glass-tag{bottom:15px;left:15px;right:15px;position:absolute;text-align:left;padding:13px 16px;color:#fff;background:#22103370;border-radius:18px}.reel-card .glass-tag:after{content:'↗';position:absolute;right:16px;top:12px;font-size:25px}.reel-progress{position:absolute;bottom:28px;left:7%;right:7%;height:1px;background:#ffffff25}.reel-progress span{display:block;height:100%;background:#d6bdff;width:0%}.reel-help{position:absolute;bottom:45px;left:7%;font-size:11px;opacity:.6}
.projects{background:#f3eef7}.project-heading h2{font-size:clamp(55px,7.5vw,100px)}.project-grid{gap:45px 30px}.project-image{aspect-ratio:1.12}.project-image img{object-position:center 25%;will-change:transform}.project-image:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff25;border-radius:inherit}.project-open{color:#fff;background:#21123255}.project-caption h3{font-size:18px}.project:nth-child(even){margin-top:45px}.project-source{font-size:10px;color:#82728f;display:block;margin-top:7px}.project-grid .project[hidden]{display:none}.filters{gap:8px}.filters button{transition:background .25s,box-shadow .25s,transform .25s}.filters button[aria-pressed=true]{background:linear-gradient(135deg,#5f2b85,#211232);box-shadow:inset 0 1px #ffffff50,0 5px 15px #32144330}.portfolio-bottom{margin-top:45px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#81708d}.load-more{padding:14px 24px;background:#241231;color:white;border-radius:40px;box-shadow:inset 0 1px #ffffff40,0 6px 18px #32144325;min-height:46px}.load-more[hidden]{display:none}
/* The film and portrait dissolve into the studio scene, with no rectangular card. */
.studio{position:relative;isolation:isolate;background:radial-gradient(ellipse at 24% 60%,#8130b8 0%,#522175 29%,#241136 65%,#180d29 100%);color:#f5f0e9;overflow:clip;padding-top:70px;padding-bottom:90px}.studio:before{content:'';position:absolute;width:65%;height:110%;left:-10%;top:0;background:radial-gradient(ellipse,#a25bf36b,transparent 65%);filter:blur(40px);z-index:-1;animation:studio-breathe 9s ease-in-out infinite alternate}.studio .section-top{position:relative;z-index:2}.studio-grid{position:relative;grid-template-columns:1.05fr 1fr;gap:5%;min-height:650px}.portrait-wrap{height:730px;position:relative;margin:-100px -12% -70px;perspective:900px;isolation:isolate;overflow:visible}.portrait-wrap video{position:absolute;inset:-7% -10% -7%;width:120%;height:114%;max-width:none;object-fit:cover;object-position:center 65%;border-radius:0;mask-image:radial-gradient(ellipse 52% 54% at 50% 56%,#000 30%,#000c 58%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 52% 54% at 50% 56%,#000 30%,#000c 58%,transparent 98%);mix-blend-mode:normal;will-change:transform;z-index:1}.portrait-aura{position:absolute;inset:25% 10% 5%;border-radius:50%;background:#a251ff50;filter:blur(50px);z-index:0;animation:studio-breathe 6s ease-in-out infinite alternate}.portrait-wrap>span{background:none;border-radius:0;bottom:25px;left:18%;color:#ddc3f7;font-size:11px;z-index:3;padding:0}.portrait-wrap .video-toggle{top:auto;bottom:16px;right:12%;z-index:5}.portrait-credit{position:absolute;left:12%;top:43%;z-index:3;transform:rotate(-5deg)}.portrait-credit b{font-weight:500;font-size:15px}.portrait-credit span{font-size:11px;display:block;margin-top:5px}.studio-copy{position:relative;z-index:3}.studio-copy .eyebrow{color:#cfabff}.studio-copy h2 em{color:#cfa7ff}.studio-copy>p:not(.eyebrow){color:#d2bfe1}.studio-copy .text-link{color:#f0e5f9}.portrait-orbit{position:absolute;width:140px;height:140px;border:1px solid #d1a6ff55;border-radius:35% 65% 55% 45%;right:3%;top:24%;box-shadow:inset 2px 3px 10px #fff2,inset -3px -2px 12px #b56fff40,0 20px 40px #0a001d35;background:linear-gradient(135deg,#ffffff20,#ffffff03);backdrop-filter:blur(7px);animation:float-shard 12s linear infinite;z-index:0}@keyframes float-shard{50%{transform:translateY(40px) rotate(120deg)}100%{transform:rotate(360deg)}}@keyframes studio-breathe{to{transform:translate(7%,-5%) scale(1.12);opacity:.65}}
/* Richer kinetic type and refractive shapes, with intact words. */
.motion-section{background:radial-gradient(ellipse at 50% 50%,#9042d3,#3b155c 70%)}.motion-shape{filter:blur(.2px);opacity:.45}.motion-shape i{border-width:65px;background:linear-gradient(145deg,#ffffff25,#ffffff00);box-shadow:inset 15px 20px 22px #ffe9ff60,inset -20px -10px 22px #31014f75,0 30px 50px #17002d60;border-color:#bc83ee4a;backdrop-filter:blur(7px)}.motion-line span{will-change:transform}.stage{border:1px solid #ffffff45;box-shadow:inset 0 1px #ffffffbb,inset 0 -1px #ffffff20,0 24px 75px #0006}.stage>span{display:inline-block;background:#ffffff16;border:1px solid #ffffff25;border-radius:30px;padding:7px 12px}.dialog-grid{grid-template-columns:1.2fr 1fr}.dialog-media{position:relative;background:#150b22;padding:20px;overflow:hidden}.dialog-media>img{height:65svh;max-height:720px;width:100%;object-fit:contain}.dialog-media .gallery-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:15px;color:#d6c3e7;font-size:12px}.gallery-nav button{width:40px;height:40px;border-radius:50%;background:#ffffff12;border:1px solid #ffffff30;font-size:20px;color:white}.gallery-nav button:disabled{opacity:.3}.dialog-grid>div.dialog-media{padding:20px}.dialog-grid h2{font-size:clamp(27px,3.5vw,45px)}dialog{background:#2d1749d9;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid #ffffff35;box-shadow:inset 0 1px #ffffff70,0 40px 100px #0008}.dialog-category{margin-top:20px;color:#c8a5e7;font-size:12px}.filters button:hover,.load-more:hover{transform:translateY(-2px)}.glass-shine{position:fixed;pointer-events:none;z-index:80;width:230px;height:230px;background:radial-gradient(circle,#d5adff10,transparent 70%);mix-blend-mode:screen;transform:translate(-50%,-50%)}
@media(max-width:800px){.hero{min-height:960px;height:110svh}.hero-content{padding-top:142px}.hero h1{font-size:clamp(65px,12vw,96px);max-width:95%}.hero-orb{top:24%;right:-48%;width:112vw;height:112vw;max-width:none;max-height:none;opacity:.8}.hero-description{position:relative;z-index:3;max-width:280px;font-size:15px;text-shadow:0 2px 12px #10001f}.hero .button{margin-top:29px}.hero-strip{bottom:-45px;z-index:2}.hero .scroll-cue{bottom:25%}.tag-one{top:13%;right:7%;font-size:10px;padding:10px 13px;border-radius:17px;transform:rotate(5deg)}.tag-one span{display:none}.tag-two{top:auto;bottom:29%;right:6%;padding:10px 14px;font-size:10px;transform:rotate(-6deg)}.tag-two span{font-size:9px}.hero .eyebrow{margin-bottom:27px}.header.is-scrolled{left:4%;right:4%;height:58px;top:9px;padding:0 17px}.header.is-scrolled .brand{width:112px}.header.is-scrolled .menu-button{width:38px;height:38px}.hero-location{display:none}.work-reel{height:235svh}.reel-pin{padding:70px 7% 35px;min-height:620px}.reel-heading{display:block}.reel-heading h2{font-size:48px}.reel-heading>p{font-size:12px;margin-top:18px;max-width:240px}.reel-track{gap:22px;margin-top:35px}.reel-card{width:260px;height:330px}.reel-card .glass-tag{font-size:11px;padding:12px 14px}.reel-card .glass-tag span{font-size:10px}.reel-help{font-size:10px;bottom:35px}.reel-progress{bottom:20px}.project-image{aspect-ratio:.86}.project-grid{gap:30px 14px}.project-caption h3{font-size:14px}.project-source{font-size:9px;margin-top:6px}.project:nth-child(even){margin-top:30px}.filters{gap:7px}.filters button{font-size:11px;padding:10px 13px}.portfolio-bottom{align-items:flex-start;flex-direction:column;gap:20px}.portfolio-bottom .load-more{align-self:center}.studio{padding-top:50px;padding-bottom:70px;background:radial-gradient(ellipse at 50% 35%,#8130b8 0%,#4f2174 32%,#211232 62%,#180d29 100%)}.studio-grid{grid-template-columns:1fr;gap:0;min-height:0}.studio .section-top{margin-bottom:0}.portrait-wrap{height:620px;margin:-30px -12% -65px}.portrait-wrap video{inset:-8% -7%;width:114%;height:116%;object-position:center 60%;mask-image:radial-gradient(ellipse 51% 50% at 50% 55%,#000 20%,#000e 47%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 51% 50% at 50% 55%,#000 20%,#000e 47%,transparent 95%)}.portrait-credit{left:8%;top:47%;padding:12px 16px;border-radius:19px}.portrait-credit b{font-size:13px}.portrait-credit span{font-size:10px}.portrait-wrap>span{bottom:35px;left:13%;font-size:10px}.portrait-wrap .video-toggle{bottom:26px;right:12%;font-size:10px;padding:8px 12px;min-height:34px}.portrait-orbit{top:20%;right:3%;width:95px;height:95px}.studio-copy{padding-top:25px}.studio-copy h2{font-size:46px}.studio-copy>p:not(.eyebrow){font-size:15px}.dialog-grid{grid-template-columns:1fr}.dialog-grid>div.dialog-media{padding:15px}.dialog-media>img{height:42svh;max-height:none}.dialog-media .gallery-nav{margin-top:9px}.dialog-grid>div{padding:25px}.dialog-grid h2{font-size:30px}.glass-shine{display:none}.motion-line{font-size:clamp(45px,10vw,80px)}}
@media(max-width:360px){.hero h1{font-size:60px}.tag-one{top:12%;font-size:9px}.tag-two{bottom:28%}.hero{min-height:980px}.project-grid{grid-template-columns:1fr}.project-image{aspect-ratio:1.1}.portrait-wrap{height:580px}}
@media(prefers-reduced-motion:reduce){.hero-orb .liquid-fallback,.portrait-orbit,.studio:before,.portrait-aura{animation:none}.work-reel{height:auto}.reel-pin{position:relative;height:auto;padding-bottom:75px}.reel-track{width:100%;flex-wrap:wrap;transform:none!important}.reel-card{width:calc(50% - 18px);height:290px;transform:none!important}.hero-orb,.motion-line span,.portrait-wrap video{transform:none!important}.hero{height:auto;min-height:960px}.header{transition:none}.reel-progress{display:none}.glass-shine{display:none}}
.project-image img{transform:translateY(var(--project-y,0px)) scale(1.08)}.project:hover .project-image img{transform:translateY(var(--project-y,0px)) scale(1.13)}.tag-one{animation:tag-drift-one 7s ease-in-out infinite alternate}.tag-two{animation:tag-drift-two 9s ease-in-out infinite alternate}@keyframes tag-drift-one{to{transform:translateY(16px) rotate(1deg)}}@keyframes tag-drift-two{to{transform:translateY(-18px) rotate(-1deg)}}.motion-shape i{border:0;border-radius:45% 55% 62% 38% / 60% 40% 60% 40%;background:radial-gradient(ellipse at 25% 20%,#f2daff,#b05ee580 15%,#411666c9 55%,#e4b7ff60);width:80%;height:80%;box-shadow:inset 10px 15px 30px #fff5,inset -20px -30px 35px #160a3890,20px 30px 50px #2104396b;transform:rotate(35deg)}.motion-shape i:nth-child(2){transform:translate(-22%,20%) rotate(-20deg) scale(.7)}.motion-shape i:nth-child(3){transform:translate(30%,45%) rotate(40deg) scale(.55)}
@media(prefers-reduced-motion:reduce){.tag-one,.tag-two{animation:none}.project-image img{transform:none}.motion-line span{transform:none!important}}
.portrait-credit span{position:static;left:auto;bottom:auto;display:block;padding:0;background:none;border:0;border-radius:0;color:#d7bdea;font-size:11px;line-height:1.4;transform:none}.portrait-credit{top:30%;left:9%;color:#fff}.portrait-credit b{display:block;line-height:1.3}.portrait-wrap .portrait-credit>span{position:static;color:#d7bdea;padding:0;background:none}
@media(max-width:800px){.hero-orb{right:-30%;width:100vw;height:100vw;top:29%}.portrait-credit{top:29%;left:9%}.portrait-credit span{font-size:10px}.portrait-wrap .portrait-credit>span{font-size:10px}}
.dialog-grid>div.dialog-media{max-height:82svh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.dialog-media>img{height:auto;max-height:none;min-height:150px;object-fit:contain}.dialog-media .gallery-nav{position:sticky;bottom:-20px;padding:12px 0 0;background:#150b22ec;backdrop-filter:blur(12px)}
@media(max-width:800px){.dialog-grid>div.dialog-media{max-height:52svh}.dialog-media .gallery-nav{bottom:-15px}.dialog-grid .dialog-close{position:fixed}}