.device-preview{margin:28px auto;min-width:0;position:relative;isolation:isolate}.device-preview figcaption{display:grid;gap:5px;color:var(--muted);font-size:.875rem;margin-top:22px;text-align:center;line-height:1.6}.device-preview figcaption small{font-size:.875rem}.phone-frame{width:min(292px,100%);margin:auto;border:8px solid #201825;border-radius:44px;padding:9px;background:#050308;box-shadow:0 0 0 1px #e89ed163,16px 26px 70px #0008;position:relative;overflow:hidden}.phone-frame .screen-viewport{height:520px;overflow:auto;border-radius:29px;background:#120c18;scrollbar-width:none}.phone-island{position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);height:19px;width:88px;border-radius:20px;background:#050308;pointer-events:none}.profile-ui{padding-top:25px;min-height:520px;background:#110a17;color:#f8effc;font-size:12px}.profile-bar{display:flex;justify-content:space-between;padding:15px 13px;border-bottom:1px solid #ffffff18;font-weight:600;font-size:14px}.profile-id{display:flex;align-items:center;gap:10px;padding:20px 12px}.profile-id strong{display:block;font-size:13px}.profile-id small{display:block;font-size:12px;color:#d4bad5;margin-top:5px}.profile-avatar{border:1px solid #ff79d8;border-radius:50%;width:52px;height:52px;flex:none;display:grid;place-items:center;color:#ffb6e8}.profile-highlights{display:flex;justify-content:space-around;margin-bottom:20px}.profile-highlights span{display:grid;justify-items:center;gap:8px;font-size:12px}.profile-highlights i{width:35px;height:35px;border:1px solid #a270c0;border-radius:50%;background:linear-gradient(135deg,#ff79d833,#08050d)}.profile-tabs{display:flex;justify-content:space-around;padding:12px;border-block:1px solid #ffffff22;font-size:13px}.profile-tabs strong{color:#ff9fe1}.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.profile-grid>div{position:relative;aspect-ratio:.8;overflow:hidden}.profile-grid img{width:100%;height:100%;object-fit:cover;display:block}.carousel-mark{position:absolute;right:5px;top:4px;color:white}.profile-tabbar{font-size:20px;text-align:center;padding:13px;letter-spacing:3px;border-top:1px solid #ffffff22}.work-card:has(.phone-preview){min-height:0;padding-bottom:32px}.home-work .work-card{background:radial-gradient(ellipse at 50% 45%,#7a27553b,transparent),#140b1e}.home-work h3{font-size:1.5rem}.desktop-frame{border:1px solid #c985ca6b;border-radius:17px;background:#100717;overflow:hidden;box-shadow:0 25px 65px #0007}.desktop-toolbar{display:flex;gap:7px;align-items:center;padding:14px 18px;background:#25112e;border-bottom:1px solid var(--line)}.desktop-toolbar i{width:7px;height:7px;border-radius:50%;background:#a477aa}.desktop-toolbar span{margin-left:12px;font-size:12px;color:#ddbadc}.desktop-frame .screen-viewport{height:430px;overflow:auto;scrollbar-width:thin;scrollbar-color:#864384 #12071b}.website-ui{padding:25px;background:#100718}.ui-nav{display:flex;justify-content:space-between;font-size:12px;font-weight:700;gap:20px}.ui-nav span{font-weight:400}.ui-hero{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:35px 0;align-items:center}.ui-hero strong{display:block;font-size:clamp(2rem,4vw,4rem);line-height:1.2;margin:14px 0}.ui-hero small{font-size:12px;color:#eab5df}.ui-hero img{width:100%;height:250px;object-fit:cover;border-radius:10px}.ui-button{display:inline-block;background:#ffb4e4;color:#230d2b;border-radius:20px;padding:8px 15px;font-size:12px}.ui-content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.ui-content-grid img{display:block;width:100%;height:150px;object-fit:cover;border-radius:8px}.web-device-preview{width:min(900px,100%);padding-right:80px;padding-bottom:35px}.mobile-web-frame{position:absolute;right:0;bottom:45px;width:150px;padding:20px 10px;background:#12071c;border:5px solid #2d1831;border-radius:26px;box-shadow:0 12px 45px #0008;color:#ffb2e2}.mobile-web-nav{font-size:10px;margin-bottom:20px}.mobile-web-frame strong{font-size:24px;line-height:1.3;display:block}.mobile-web-frame img{display:block;width:100%;height:120px;object-fit:cover;border-radius:7px;margin:15px 0}.mobile-web-frame i{display:block;border-top:1px solid #ff79d850;padding:12px}.content-device-stage{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}.home-device-story .content-device-stage{grid-template-columns:1.7fr .7fr;gap:30px}.home-device-story .phone-preview{transform:rotate(5deg)}.home-device-story .web-device-preview{transform:rotate(-2deg)}.carousel-preview{max-width:500px;width:100%;margin:auto;padding:25px;border:1px solid var(--line);border-radius:20px;background:#1b0b23}.carousel-header{display:flex;justify-content:space-between;gap:15px;font-size:.875rem;color:#ffb2e2;margin-bottom:18px}.carousel-slide{position:relative;animation:slide-reveal .5s ease}.carousel-slide img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px}.carousel-slide>span{display:block;padding-top:18px;font-size:.875rem;color:var(--pink)}.carousel-navigation{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:20px}.carousel-navigation p{font-size:.875rem;margin:0;line-height:1.5}.carousel-navigation .btn{min-width:44px;min-height:44px;padding:8px}.environment-image{margin:0;overflow:hidden;border-radius:20px;border:1px solid var(--line)}.environment-image img{display:block;width:100%;height:auto;max-height:650px;object-fit:cover}.environment-chapter .section-head p{font-size:.875rem}.motion-on .device-preview.in-view .phone-frame{animation:device-arrive .8s ease both}.motion-on .device-preview.in-view .desktop-frame{animation:screen-arrive .9s ease both}.motion-on .illustrated-deliverables li:hover .diagram-spark{stroke-dasharray:12;animation:flow-draw 1s linear infinite}.motion-on .environment-image.in-view img{animation:space-reveal 1.1s ease both}.motion-on .visual-service img{animation:gentle-float 8s ease-in-out infinite}.motion-on .story-path a:hover svg{transform:translateY(-4px);transition:transform .3s}.motion-on .price-card:hover .scope-diagram{animation:graphic-pop .5s ease}.motion-on .brief-wizard .wizard-step.active{animation:step-arrive .4s ease}.motion-on .carousel-preview:hover{border-color:#ff79d8;box-shadow:0 0 45px #d749d01c}.motion-on .profile-grid img{transition:transform .6s}.motion-on .profile-grid>div:hover img{transform:scale(1.1)}.mockup-screenshot{display:block;width:100%;height:auto;min-height:100%;object-fit:contain;object-position:top}.screenshot-active .phone-frame{border-color:#322235}.screenshot-active figcaption small{display:none}.work-card .device-preview{transition:transform .5s}.motion-on .work-card:hover .device-preview{transform:translateY(-5px)}.motion-on .desktop-toolbar i:nth-child(2){animation:toolbar-pulse 4s ease-in-out infinite}@keyframes device-arrive{from{opacity:.4;transform:translateY(24px) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes screen-arrive{from{opacity:.5;transform:perspective(900px) rotateX(8deg) translateY(20px)}to{opacity:1;transform:none}}@keyframes space-reveal{from{transform:scale(1.06);filter:brightness(.7)}to{transform:scale(1);filter:brightness(1)}}@keyframes flow-draw{to{stroke-dashoffset:-24}}@keyframes gentle-float{50%{transform:translateY(-7px)}}@keyframes graphic-pop{50%{transform:scale(1.06)}}@keyframes step-arrive{from{opacity:.5;transform:translateX(15px)}to{opacity:1;transform:none}}@keyframes toolbar-pulse{50%{background:#ff79d8;box-shadow:0 0 12px #ff79d866}}@keyframes slide-reveal{from{opacity:.5;transform:translateX(10px)}to{opacity:1;transform:none}}@media(max-width:900px){.content-device-stage,.home-device-story .content-device-stage{grid-template-columns:1fr;gap:35px}.home-device-story .device-preview{transform:none}.web-device-preview{padding-right:50px}.mobile-web-frame{width:125px}.web-showcase{grid-template-columns:1fr!important}.web-showcase>div{min-width:0}}@media(max-width:600px){.phone-frame{max-width:270px}.phone-frame .screen-viewport{height:500px}.desktop-frame .screen-viewport{height:360px}.web-device-preview{padding-right:25px;padding-bottom:75px}.mobile-web-frame{width:105px;bottom:50px;padding:15px 7px}.mobile-web-frame strong{font-size:19px}.mobile-web-frame img{height:85px}.mobile-web-nav{font-size:8px}.ui-hero{grid-template-columns:1fr;gap:15px}.ui-hero img{height:160px}.ui-content-grid{gap:8px}.ui-content-grid img{height:85px}.website-ui{padding:18px}.ui-nav{font-size:10px}.carousel-preview{padding:18px}.carousel-navigation p{font-size:13px}.device-preview figcaption{font-size:.875rem}.work-card .project-controls{flex-direction:column}.work-card .project-controls .btn{width:100%}}@media(prefers-reduced-motion:reduce){.device-preview,.device-preview *, .carousel-preview *,.environment-image *{animation:none!important;transition:none!important}}body.motion-off .device-preview,body.motion-off .carousel-preview{transform:none!important}
.illustrated-hero .wrap:has(.hero-device){display:grid;grid-template-columns:1.1fr .8fr;gap:12px 45px;padding-right:var(--space);align-content:start}.hero-device{grid-column:2;grid-row:1/8;align-self:center;min-width:0}.illustrated-hero .wrap:has(.hero-device)>.breadcrumb,.illustrated-hero .wrap:has(.hero-device)>.eyebrow,.illustrated-hero .wrap:has(.hero-device)>h1,.illustrated-hero .wrap:has(.hero-device)>p,.illustrated-hero .wrap:has(.hero-device)>.actions{grid-column:1}.hero-device .phone-frame{width:235px}.hero-device .phone-frame .screen-viewport{height:445px}.hero-device .web-device-preview{padding-right:20px}.hero-device .mobile-web-frame{width:105px}.hero-device .desktop-frame .screen-viewport{height:350px}.hero-device .ui-hero{grid-template-columns:1fr}.hero-device .ui-hero img{height:150px}.hero-device .ui-hero strong{font-size:2.2rem}@media(max-width:900px){.illustrated-hero .wrap:has(.hero-device){grid-template-columns:1fr}.hero-device{grid-column:1;grid-row:auto;order:9;margin-top:25px;width:100%}.hero-device .phone-frame{width:260px}.hero-device .web-device-preview{max-width:620px}.illustrated-hero h1{position:relative}.hero-device .device-preview{margin-bottom:0}}