html{scroll-behavior:smooth;scroll-padding-top:125px}header.nav{position:sticky;top:0;z-index:80;transition:box-shadow .25s}header.nav.is-scrolled{box-shadow:0 6px 24px #15101820}.hero-art{position:relative}.hero-art img{transition:opacity .2s,transform .7s!important}.hero-art img.changing{opacity:.2;transform:scale(1.02)}.hero-tab{position:relative;overflow:hidden}.hero-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#9d55ff}.motion-control{position:absolute;top:22px;right:22px;z-index:2;width:42px;height:42px;border:1px solid #ffffff60;border-radius:50%;color:white;background:#15101d80;cursor:pointer;backdrop-filter:blur(10px)}.reveal-ready{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}.reveal-ready.revealed{opacity:1;transform:none}.project-media{position:relative}.project-media:after{content:'↗';position:absolute;right:25px;bottom:25px;width:60px;height:60px;display:grid;place-items:center;background:#7b01f7;color:white;border-radius:50%;font-size:29px;opacity:0;transform:translateY(15px);transition:.25s}.project-card:hover .project-media:after,.project-card:focus-visible .project-media:after{opacity:1;transform:none}.project-card:hover .project-caption h3{color:#7b01f7}.back-top{position:fixed;bottom:25px;right:24px;width:45px;height:45px;border-radius:50%;background:#7b01f7;color:white;font-size:22px;z-index:60;box-shadow:0 4px 18px #2c0e4925;visibility:hidden;opacity:0;transform:translateY(12px);transition:.25s;cursor:pointer}.back-top.visible{visibility:visible;opacity:1;transform:none}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:#b980ff;transform-origin:left;z-index:100;pointer-events:none}.share-article{color:#7b01f7;border-bottom:1px solid currentColor;background:transparent;font:inherit;cursor:pointer;padding-bottom:3px}.share-status{font-size:11px;overflow-wrap:anywhere}.image-zoom{display:block;padding:0;background:transparent;width:100%;border:0;cursor:zoom-in}.image-zoom img{display:block;margin:auto}.photo-viewer{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;background:#100d16f5;border:0;padding:60px 75px;color:white;overflow:hidden}.photo-viewer::backdrop{background:#100d16e8}.photo-viewer[open]{display:flex;align-items:center;justify-content:center}.photo-viewer img{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain}.photo-viewer button{position:absolute;color:white;border:1px solid #ffffff50;background:#24202d;border-radius:50%;width:44px;height:44px;font-size:24px;cursor:pointer}.viewer-close{right:22px;top:20px}.viewer-prev{left:16px;top:50%}.viewer-next{right:16px;top:50%}.viewer-caption{position:absolute;bottom:22px;left:65px;right:65px;text-align:center;font-size:12px;color:#c9bbd5}.viewer-open{overflow:hidden}.photo-viewer [hidden]{display:none}.mega-menu{animation:menu-in .2s ease-out}.home-service-list details[open] .service-answer{animation:menu-in .25s ease-out}.cta .circle{transition:transform .35s,background .35s}.cta .circle:hover{transform:rotate(45deg);background:#c29bff}@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){html{scroll-padding-top:95px}.photo-viewer{padding:60px 12px}.photo-viewer img{max-height:calc(100dvh - 180px)}.viewer-prev,.viewer-next{top:auto;bottom:68px}.motion-control{top:15px;right:15px;width:36px;height:36px}.project-media:after{width:42px;height:42px;right:15px;bottom:15px;font-size:21px;opacity:1;transform:none}.back-top{bottom:18px;right:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-ready{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important}}
.logo-grid.logo-scroll{display:flex;gap:60px;overflow-x:auto;scroll-snap-type:x proximity;padding:25px max(25px,5vw);scrollbar-width:none;cursor:grab}.logo-scroll::-webkit-scrollbar{display:none}.logo-scroll img{flex:0 0 150px;width:150px;height:75px;object-fit:contain;user-select:none;pointer-events:none;scroll-snap-align:center}.logo-scroll.dragging{cursor:grabbing;scroll-snap-type:none}.logo-controls{display:flex;gap:12px;justify-content:flex-end;padding:15px var(--pad) 0}.logo-controls button{width:40px;height:40px;border:1px solid #8c7f99;border-radius:50%;cursor:pointer;font-size:22px;color:inherit;background:transparent}.logo-controls button:hover{background:#7b01f7;color:white;border-color:#7b01f7}
.wbe-image-full{width:100%}.wbe-image-wide{width:75%;margin-inline:auto}.wbe-image-half{width:50%;margin-inline:auto}@media(max-width:650px){.wbe-image-wide,.wbe-image-half{width:100%}}
/* Transparent original brand mascots; no panel, gradient or painted backdrop. */
.hero-art.mascot-stage{background:transparent!important;overflow:visible;isolation:isolate;display:grid;place-items:center;perspective:1000px}
.mascot-stage::before,.mascot-stage::after{display:none!important}
.mascot-stage .mascot-motion{width:100%;height:100%;display:grid;place-items:center;animation:wbe-float 4.8s ease-in-out infinite;transform-origin:50% 75%}
.mascot-stage #hero-image{display:block;width:96%;height:96%;max-height:560px;object-fit:contain;filter:none;border:0;border-radius:0;box-shadow:none;animation:wbe-wiggle 6.4s ease-in-out infinite;transform-origin:50% 70%;background:transparent}
.mascot-stage[data-mascot="b"] .mascot-motion{animation-name:wbe-bounce;animation-duration:4s}
.mascot-stage[data-mascot="e"] #hero-image{animation-name:wbe-sway;animation-duration:5s}
.mascot-stage .mascot-caption{background:transparent;color:#bdb7ca;bottom:8px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.12em;white-space:nowrap}
.hero.motion-paused .mascot-motion,.hero.motion-paused #hero-image{animation-play-state:paused!important}
@keyframes wbe-float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-15px)}}
@keyframes wbe-wiggle{0%,100%{transform:rotate(-3deg) rotateY(-5deg)}50%{transform:rotate(3deg) rotateY(5deg)}}
@keyframes wbe-bounce{0%,100%{transform:translateY(5px) rotate(-2deg)}45%{transform:translateY(-18px) rotate(2deg)}65%{transform:translateY(-9px) rotate(0deg)}}
@keyframes wbe-sway{0%,100%{transform:rotate(3deg) rotateY(6deg)}50%{transform:rotate(-4deg) rotateY(-5deg)}}
@media(max-width:700px){.mascot-stage .mascot-motion{min-height:280px}.mascot-stage #hero-image{max-height:360px;width:90%}.mascot-stage .mascot-caption{bottom:0}}
@media(prefers-reduced-motion:reduce){.mascot-stage .mascot-motion,.mascot-stage #hero-image{animation:none!important;transform:none!important}}