/* Motion layer: progressive enhancement; the full page stays readable without JS. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1)}
.reading-progress{position:absolute;top:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.reading-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--cyan) 35%,var(--pink));transform:scaleX(var(--read-progress,0));transform-origin:left}
.site-header{transition:background .3s,box-shadow .3s}
.site-header.is-scrolled{background:#101113f2;box-shadow:0 7px 25px #0002;backdrop-filter:blur(14px)}
.desktop-nav a{position:relative;padding:6px 0}
.desktop-nav a:after{content:"";position:absolute;height:2px;bottom:0;left:0;right:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{transform:scaleX(1)}
.desktop-nav a[aria-current]{color:var(--cyan)}
.hero-grid,.hero-bottom{position:relative;z-index:2}
.hero-grid{padding-top:65px;padding-bottom:74px;min-height:710px}
.hero-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ambient-grid{position:absolute;right:-17%;top:-22%;width:90%;height:150%;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:84px 84px;transform:rotate(-14deg);mask-image:linear-gradient(90deg,transparent,#000)}
.ambient-word{position:absolute;right:-3%;top:8%;font:900 clamp(110px,16vw,230px)/.94 Arial,sans-serif;letter-spacing:-.075em;color:transparent;-webkit-text-stroke:1px #ffffff0b;transform:rotate(-13deg);white-space:nowrap}
.ambient-line{position:absolute;left:-7%;top:75%;width:116%;height:220px;border-top:1px solid #fe2c553b;border-bottom:1px solid #25f4ee28;transform:rotate(-13deg)}
.hero-copy{position:relative;z-index:5}
.hero-copy>.eyebrow{display:inline-block;background:var(--cyan);color:#101113;padding:8px 14px;letter-spacing:.15em;transform:rotate(-3deg);box-shadow:5px 5px 0 #25f4ee24}
.hero h1{margin-top:30px}
.service-name{font-size:20px;letter-spacing:.035em}
.hero-headline{letter-spacing:-.065em;font-size:clamp(42px,4.35vw,64px);line-height:1.55}
.headline-row{display:block;overflow:hidden;padding:2px 0 7px;margin-bottom:-7px}
.headline-row>span{display:block}
.headline-accent{color:var(--cyan);text-shadow:3px 3px 0 #fe2c5570}
.headline-accent:after{background:var(--pink);height:5px;bottom:0;left:8%;width:84%;transform-origin:left}
.hero-lead{margin-top:24px}
.hero-visual{perspective:1000px;transform:perspective(1000px) translateY(var(--scene-scroll,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s var(--ease-out);isolation:isolate}
.hero-orbit{position:absolute;width:490px;height:490px;border:1px solid #25f4ee46;border-radius:50%;transform:rotate(-20deg);z-index:-1}
.hero-orbit:before{content:"";position:absolute;inset:23px -22px;border:1px dashed #fe2c5550;border-radius:50%;transform:rotate(-25deg)}
.hero-orbit:after{content:"";position:absolute;left:13%;top:13%;width:13px;height:13px;background:var(--cyan);box-shadow:330px 280px 0 var(--pink);transform:rotate(45deg)}
.video-frame{z-index:1;transform:rotate(7deg);box-shadow:16px 17px 0 -5px var(--cyan),-13px -12px 0 -5px var(--pink),0 30px 70px #0008}
.video-frame:before{content:"";position:absolute;inset:-100%;z-index:2;background:linear-gradient(115deg,transparent 44%,#ffffff18 49%,transparent 54%);transform:translateX(-40%);pointer-events:none}
.visual-word{display:none}
.floating-type{position:absolute;font:900 italic 74px/.85 Arial,sans-serif;letter-spacing:-.05em;z-index:2;pointer-events:none}
.type-live{top:0;left:25px;color:var(--cyan);transform:rotate(-11deg);text-shadow:4px 4px 0 #101113}
.type-shop{right:-1px;bottom:15px;color:transparent;-webkit-text-stroke:1.5px var(--pink);transform:rotate(-11deg);font-size:91px;z-index:0}
.tag-creative{left:-4px;top:117px;transform:rotate(-9deg);border-bottom:3px solid var(--cyan)}
.tag-commerce{right:-10px;bottom:98px;transform:rotate(-7deg);border-bottom:3px solid var(--pink)}
.visual-caption{bottom:-18px;left:21%;font-size:10px;letter-spacing:.18em}
.hero-bottom{padding-bottom:23px}
.hero-bottom>a>span{display:inline-block}
.motion-marquee{overflow:hidden;background:var(--cyan);padding:20px 0;position:relative;border-top:1px solid #101113;border-bottom:1px solid #101113;user-select:none}
.marquee-track{display:flex;width:max-content;transform:translateX(-80px)}
.marquee-group{display:flex;align-items:center;gap:38px;padding-right:38px;flex-shrink:0;white-space:nowrap;font:900 italic 53px/1 Arial,sans-serif;letter-spacing:-.025em}
.marquee-group>i{font-style:normal;color:#ad1233;font-size:45px}
.outline-word{color:transparent;-webkit-text-stroke:1.4px #101113}
.support-strip{background:var(--ink);color:white}
.strip-inner{padding:23px 0}
.strip-inner p>span{color:var(--cyan);opacity:1}
.strip-inner p{font-size:14px}
.section-heading h2{position:relative}
.section-heading h2 em{box-shadow:none;background:linear-gradient(var(--cyan),var(--cyan)) no-repeat 0 90% / 100% .24em}
.challenges{position:relative;overflow:hidden}
.challenges:before{content:"?";position:absolute;right:2%;top:8%;font:900 370px/1 Arial,sans-serif;color:#f4f5f6;transform:rotate(12deg);z-index:-1}
.challenge-grid article{transition:transform .45s var(--ease-out),box-shadow .45s,background .4s;border-top-color:var(--pink)}
.challenge-label{font-size:12px;letter-spacing:.14em}
.challenge-answer .answer-line{height:46px;transform-origin:top}
.approach{background:#101113;color:white;position:relative;overflow:hidden}
.approach:before{content:"DISCOVER → SHOP";position:absolute;bottom:8%;left:-3%;font:900 170px/1 Arial,sans-serif;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #ffffff08;transform:rotate(-8deg);pointer-events:none}
.approach>.container{position:relative}
.approach .section-heading .eyebrow{color:var(--cyan)}
.approach .section-heading .eyebrow>span{border-color:#25f4ee60}
.approach .section-heading h2 em{color:var(--cyan);background:linear-gradient(var(--pink),var(--pink)) no-repeat 0 95% / 100% .08em}
.approach-intro,.approach-points p{color:#b9bec5}
.journey{background:#1a1c20;border-color:#ffffff22;position:relative;overflow:hidden}
.journey-step{position:relative}
.journey-step h3{font-size:34px}
.journey-no,.journey-step p{color:#abb1b9}
.journey-shop h3{color:var(--cyan)}
.journey-loop{border-color:#ffffff1c;color:#c8cdd3;position:relative}
.journey-loop:before{content:"";position:absolute;top:-1px;left:0;width:30%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink));transform:translateX(0)}
.journey-loop>span,.point-no{color:var(--cyan)}
.journey-arrow{color:var(--pink)}
.approach-points h3{color:#fff}
.service-grid{gap:22px;margin-top:55px;border:0}
.service-card{border:1px solid #e0e3e7;padding:30px;background:white;transition:background .4s,color .4s,border-color .4s,box-shadow .4s;overflow:hidden;isolation:isolate}
.service-card:before{content:"";position:absolute;width:7px;left:0;top:0;bottom:0;background:var(--cyan);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out)}
.service-card:after{content:attr(data-number);position:absolute;right:15px;top:15px;font:900 92px/1 Arial,sans-serif;color:transparent;-webkit-text-stroke:1px #10111309;z-index:-1;transition:-webkit-text-stroke-color .4s,transform .5s var(--ease-out)}
.service-card:nth-child(even):before{background:var(--pink)}
.service-meta>span{transition:background .35s,color .35s,transform .45s var(--ease-out)}
.service-meta small,.service-card>p,.service-tags li{transition:color .35s,background .35s}
.mid-cta{position:relative;overflow:hidden}
.mid-cta:before{content:"LET’S TALK ↗";position:absolute;right:-40px;top:-15px;font:900 130px/1 Arial,sans-serif;letter-spacing:-.07em;color:#10111308;transform:rotate(-8deg);pointer-events:none}
.mid-cta-inner{position:relative}
.flow-grid li{border-top-width:2px;border-top-color:#25292e}
.flow-step b{transition:color .4s,transform .4s}
.pricing{background:#fafbfc;transition:box-shadow .3s}
.contact-section:before,.contact-section:after{width:10px;transform:skew(-12deg);height:140%;top:-20%}
.contact-section:before{left:8%}.contact-section:after{right:8%}
.contact-inner{position:relative;z-index:1}
.contact-inner h2>span{display:inline-block}
.button{overflow:hidden;isolation:isolate;transition:transform .35s var(--ease-out),box-shadow .35s,background .3s}
.button:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#ffffff22 48%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease-out);pointer-events:none;z-index:-1}
.button>span,.text-link>span{display:inline-block;transition:transform .35s var(--ease-out)}
.button:hover:before,.button:focus-visible:before{transform:translateX(120%)}
.button:hover>span,.button:focus-visible>span{transform:translate(3px,-3px)}
.button-pink:hover{box-shadow:5px 5px 0 var(--cyan)}
.button-dark:hover{box-shadow:5px 5px 0 #fe2c55}
.text-link:hover>span{transform:translateY(4px)}
.motion-toggle{position:fixed;right:20px;bottom:22px;z-index:41;display:inline-flex;gap:9px;align-items:center;justify-content:center;padding:10px 14px;min-height:42px;border:1px solid #ffffff3d;border-radius:24px;background:#17191eea;color:#fff;backdrop-filter:blur(10px);box-shadow:0 5px 20px #0002;font-size:12px;cursor:pointer;transition:background .3s}
.motion-toggle[hidden]{display:none}.motion-toggle:hover{background:#33373d}
.motion-toggle-icon{font:700 14px Arial,sans-serif;color:var(--cyan)}
.motion-toggle:disabled{cursor:default;opacity:.8}
.motion-ready .hero-copy>.eyebrow{animation:label-enter .8s var(--ease-out) both}
.motion-ready .service-name{animation:rise-in .8s .12s var(--ease-out) both}
.motion-ready .headline-row>span{animation:headline-enter 1.15s .22s var(--ease-out) both}
.motion-ready .headline-row:nth-child(2)>span{animation-delay:.38s}
.motion-ready .headline-accent:after{animation:line-enter .8s .9s var(--ease-out) both}
.motion-ready .hero-lead,.motion-ready .hero-actions,.motion-ready .hero-note{animation:rise-in .9s .55s var(--ease-out) both}
.motion-ready .hero-actions{animation-delay:.68s}.motion-ready .hero-note{animation-delay:.8s}
.motion-ready .hero-visual{animation:scene-enter 1.3s .18s var(--ease-out) backwards}
.motion-ready .video-frame{animation:phone-float 6.5s .9s ease-in-out infinite}
.motion-ready .video-frame:before{animation:glass-sweep 9s 3s ease-in-out infinite}
.motion-ready .hero-orbit{animation:orbit-turn 42s linear infinite}
.motion-ready .tag-creative{animation:tag-float 5s .4s ease-in-out infinite}
.motion-ready .tag-commerce{animation:tag-float 6s 1.3s ease-in-out infinite reverse}
.motion-ready .type-live{animation:type-float 6s .2s ease-in-out infinite}
.motion-ready .type-shop{animation:type-float 8s 1.4s ease-in-out infinite reverse}
.motion-ready .marquee-track{animation:marquee-slide 26s linear infinite}
.motion-ready .hero-bottom>a>span{animation:scroll-hint 1.8s ease-in-out infinite}
.motion-ready .journey.is-visible .journey-loop:before{animation:journey-scan 3.8s ease-in-out infinite}
.motion-ready .reveal-pending:not(.is-visible){opacity:0;translate:0 38px}
.motion-ready .reveal-pending.is-visible{animation:reveal-in .85s var(--enter-delay,0ms) var(--ease-out) both}
.motion-ready .section-heading.is-visible h2 em{animation:underline-enter 1s .35s var(--ease-out) both}
.motion-ready .challenge-answer.is-visible .answer-line{animation:line-vertical .65s var(--ease-out) both}
.motion-ready .faq-list details[open] .faq-answer{animation:answer-enter .35s var(--ease-out) both}
.motion-ready .flow-grid li.is-visible .flow-step b{animation:number-enter .7s var(--enter-delay,0ms) var(--ease-out) both}
.motion-paused{scroll-behavior:auto}
.motion-paused *, .motion-paused *:before, .motion-paused *:after,.motion-suspended *, .motion-suspended *:before,.motion-suspended *:after{animation-play-state:paused!important}
.motion-paused .reveal-pending{opacity:1!important;translate:none!important;animation:none!important}
.motion-paused .section-heading h2 em,.motion-paused .challenge-answer .answer-line{animation:none!important}
.motion-paused .hero-copy>*:not(h1),.motion-paused .service-name,.motion-paused .headline-row>span,.motion-paused .hero-visual{animation:none!important}
.motion-paused .hero-visual{transform:none!important;transition:none}
.hero.is-offscreen .hero-visual *,.hero.is-offscreen .hero-visual *:before,.hero.is-offscreen .hero-visual *:after{animation-play-state:paused}
@keyframes headline-enter{from{transform:translateY(115%) rotate(4deg)}to{transform:translateY(0) rotate(0)}}
@keyframes label-enter{from{opacity:0;transform:translateX(-35px) rotate(-7deg)}to{opacity:1;transform:translateX(0) rotate(-3deg)}}
@keyframes rise-in{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@keyframes scene-enter{from{opacity:0;translate:70px 45px;rotate:8deg;scale:.9}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes line-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes phone-float{0%,100%{transform:translate3d(0,0,0) rotate(7deg)}50%{transform:translate3d(0,-19px,0) rotate(3deg)}}
@keyframes tag-float{0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(4px,-14px,0) rotate(-3deg)}}
@keyframes type-float{0%,100%{transform:translateY(0) rotate(-11deg)}50%{transform:translateY(14px) rotate(-8deg)}}
@keyframes orbit-turn{from{transform:rotate(-20deg)}to{transform:rotate(340deg)}}
@keyframes glass-sweep{0%,64%{transform:translateX(-50%)}88%,100%{transform:translateX(50%)}}
@keyframes marquee-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scroll-hint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@keyframes journey-scan{0%{transform:translateX(0);opacity:0}15%,80%{opacity:1}100%{transform:translateX(335%);opacity:0}}
@keyframes reveal-in{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@keyframes underline-enter{from{background-size:0 .24em}to{background-size:100% .24em}}
@keyframes line-vertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes answer-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes number-enter{from{opacity:0;transform:translateY(15px) rotate(-10deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(hover:hover) and (pointer:fine){
 .challenge-grid article:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:7px 7px 0 var(--cyan);background:white}
 .service-card:hover{background:var(--ink);border-color:var(--ink);color:white;box-shadow:0 16px 35px #10111312}
 .service-card:hover:before{transform:scaleY(1)}
 .service-card:hover:after{transform:translateY(5px);-webkit-text-stroke-color:#ffffff18}
 .service-card:hover>p{color:#c2c6ce}.service-card:hover .service-meta>small{color:#abb1bb}
 .service-card:hover .service-meta>span{background:var(--cyan);color:var(--ink);transform:rotate(-12deg)}
 .service-card:nth-child(even):hover .service-meta>span{background:var(--pink);color:#101113}
 .service-card:hover .service-tags li{background:#ffffff12;color:#d6dae1}
 .flow-grid li:hover .flow-step b{color:#d21e47;transform:translateY(-4px)}
}
@media(min-width:1600px){.hero-headline{font-size:64px}}
@media(max-width:1100px){.hero-headline{font-size:46px}.hero-orbit{width:395px;height:395px}.hero-orbit:after{box-shadow:266px 223px 0 var(--pink)}.type-live{font-size:61px;left:7px;top:10px}.type-shop{font-size:77px;right:-8px;bottom:40px}.service-card{padding:26px}.service-card h3{font-size:21px}.hero-visual{height:550px}}
@media(max-width:800px){
 .hero-grid{padding-top:44px;padding-bottom:53px}.hero-copy>.eyebrow{font-size:11px;padding:7px 11px}
 .hero-headline{font-size:clamp(36px,6.8vw,54px)}.service-name{font-size:18px}
 .hero-visual{height:520px;margin-top:65px;transform:none!important}
 .hero-orbit{width:390px;height:390px}.hero-orbit:after{box-shadow:260px 218px 0 var(--pink)}
 .type-live{font-size:60px;top:0;left:14px}.type-shop{font-size:82px;bottom:17px;right:0}
 .tag-creative{top:121px;left:-3px}.tag-commerce{bottom:93px;right:-4px}
 .visual-caption{bottom:-13px;font-size:9px}.hero-bottom{padding:18px 0}
 .hero-ambient .ambient-word{font-size:125px;right:-65%;top:35%;opacity:.7}
 .ambient-grid{width:170%;right:-50%}.ambient-line{top:65%}
 .motion-marquee{padding:18px 0}.marquee-group{font-size:38px;gap:24px;padding-right:24px}.marquee-group>i{font-size:30px}
 .strip-inner{padding:20px 0}.strip-inner p{font-size:12px}.strip-inner p+p{border-left-color:#ffffff25}
 .approach:before{font-size:120px;bottom:35%}.approach-points p{color:#b9bec5}
 .journey-step h3{font-size:25px}.service-grid{gap:18px}.service-card{padding:25px 20px}
 .service-card h3{font-size:20px}.service-card:after{font-size:75px;top:17px;right:15px}
 .contact-section:before{left:-2%}.contact-section:after{right:-2%}.contact-section:before,.contact-section:after{width:6px}
 .motion-toggle{bottom:calc(82px + env(safe-area-inset-bottom));right:13px;min-height:35px;padding:7px 11px;font-size:11px}
 .motion-ready .reveal-pending:not(.is-visible){translate:0 24px}
}
@media(max-width:520px){.service-grid{grid-template-columns:1fr}.service-card{padding:25px 23px}.service-card h3{font-size:21px}.service-card>p{font-size:16px}.journey-step h3{font-size:28px}}
@media(max-width:440px){
 .hero-headline{font-size:clamp(31px,8.7vw,38px)}.hero h1{margin-top:26px}.hero-visual{height:476px;margin-top:62px}
 .hero-orbit{width:322px;height:322px}.hero-orbit:after{box-shadow:214px 179px 0 var(--pink);width:10px;height:10px}
 .type-live{font-size:54px;left:4px;top:0}.type-shop{font-size:69px;right:-3px;bottom:10px}
 .tag-creative{top:97px;left:-4px}.tag-commerce{bottom:88px;right:-4px}.visual-caption{left:17%;bottom:-9px}
 .motion-marquee{padding:15px 0}.marquee-group{font-size:32px;gap:20px;padding-right:20px}.marquee-group>i{font-size:27px}
 .strip-inner p{font-size:11px}.service-card h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .motion-ready .reveal-pending{opacity:1!important;translate:none!important}
 .hero-visual{transform:none!important}
}
@media print{.reveal-pending{opacity:1!important;translate:none!important;animation:none!important}.motion-toggle,.hero-ambient,.hero-orbit,.floating-type,.motion-marquee{display:none!important}}