/* Vector UI: identical geometry on iOS, Android and desktop. */
.ui-icon{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle;pointer-events:none;overflow:visible}
.button-arrow .ui-icon{width:21px;height:21px}.round-arrow .ui-icon{width:22px;height:22px}
.text-link .ui-icon,.process-more .ui-icon{width:20px;height:20px}.gallery-date .ui-icon{width:15px;height:15px;margin-inline:3px}
.browser-lock .ui-icon,.phone-preview-label .ui-icon{width:14px;height:14px}
.mobile-nav a:after{content:none!important}.mobile-nav a>.ui-icon{width:21px;height:21px;transition:transform .3s var(--ease)}
.mobile-nav a:is(:hover,:focus-visible,.is-pressed)>.ui-icon{transform:translate(3px,-3px)}
.button:is(:hover,:focus-visible) .button-arrow{transform:none}.button-arrow .ui-icon{transition:transform .35s var(--ease)}
.button:is(:hover,:focus-visible) .button-arrow .ui-icon{transform:translate(2px,-2px)}
.gallery-zoom-actions button,.dialog-footer button{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.gallery-zoom-actions button span{display:flex;margin-left:0}.gallery-zoom-actions .ui-icon{width:18px;height:18px}
body .gallery-arrows button{width:48px;height:48px;background:#fff;color:#191919;border:1px solid #fff;border-radius:14px;box-shadow:0 4px 0 #0003}
.gallery-arrows button .ui-icon{width:24px;height:24px;transition:transform .3s var(--ease)}
.gallery-prev:is(:hover,:focus-visible) .ui-icon{transform:translateX(-3px)}.gallery-next:is(:hover,:focus-visible) .ui-icon{transform:translateX(3px)}
body .gallery-arrows button:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);border-color:var(--yellow);color:#191919}

/* The image divider and the range control use the same --split value. */
.compare{isolation:isolate}.compare-divider{z-index:3;width:3px;box-shadow:0 0 0 1px #19191930,0 0 24px #0003}
.compare-handle{position:absolute;z-index:4;top:50%;left:clamp(29px,var(--split),calc(100% - 29px));transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#ffdc28;color:#191919;border:3px solid #191919;outline:2px solid #fff;box-shadow:0 6px 24px #0004;pointer-events:none;transition:border-radius .25s,box-shadow .25s}
.compare-handle .ui-icon{width:28px;height:28px}.compare.is-dragging .compare-handle{border-radius:50%;box-shadow:0 0 0 8px #ffdc2833,0 6px 24px #0004}
.compare:focus-within .compare-handle{outline:3px solid #fff}
body .compare-control{display:block;padding:24px 24px 20px;border-top:1px solid #ffffff18;background:#202020;color:#fff}
.compare-control-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
body .compare-control label{width:auto;max-width:none;font-size:14px;font-weight:600;line-height:1.5;white-space:normal;color:#fff}
body .compare-control #compare-value{font-size:13px;font-weight:700;color:#191919;background:var(--yellow);border-radius:7px;padding:5px 9px;min-width:68px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.compare-scrubber{position:relative;height:58px;margin-top:8px}
.scrubber-rail{position:absolute;inset:26px 18px auto;height:6px;border-radius:10px;background:linear-gradient(to right,#ffdc28 0%,#ffdc28 var(--split),#fff var(--split),#fff 100%);pointer-events:none}
.scrubber-thumb{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;background:#ffdc28;color:#191919;border:3px solid #202020;outline:1px solid #ffdc28;border-radius:11px;box-shadow:0 4px 12px #0005;transition:box-shadow .2s,border-radius .2s}
.scrubber-thumb .ui-icon{width:22px;height:22px}
body .compare-control input{position:absolute;inset:0;width:100%;height:58px;min-height:58px;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;appearance:none;-webkit-appearance:none;background:none}
body .compare-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:36px;height:36px;border:0}
body .compare-control input::-moz-range-thumb{width:36px;height:36px;border:0}
.compare-scrubber:focus-within{outline:2px solid #ffdc28;outline-offset:3px;border-radius:10px}
.compare-scrubber:is(:focus-within,:active) .scrubber-thumb{border-radius:50%;box-shadow:0 0 0 7px #ffdc2822}
.scrubber-legend{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;font-weight:500;color:#f4f4f4}
.scrubber-legend>span{display:flex;align-items:center;gap:8px}.scrubber-legend i{width:7px;height:7px;border-radius:2px;background:#ffdc28}.scrubber-legend>span:last-child i{background:#fff}
body .gallery-bottom{padding:18px 24px 22px;border-top:1px solid #ffffff18}
body .gallery-zoom-actions button{background:#ffffff0a;border:1px solid #ffffff40;border-radius:10px;padding:11px 14px}
body .gallery-zoom-actions button:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:#191919;border-color:var(--yellow)}

/* One visual language for motion, with native scrolling and no runtime library. */
.motion-word-wrap{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.13em;margin-bottom:-.13em}
.motion-word{display:inline-block}
.motion-enhanced .motion-heading .motion-word{transform:translateY(115%) rotate(3deg);transition:transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--word-index,0) * 25ms)}
.motion-enhanced .motion-heading.heading-visible .motion-word{transform:none}
.motion-enhanced .hero-visual{--scene-progress:0;transform-origin:center;will-change:auto}
.motion-enhanced .desktop-device{transform:translateY(calc(var(--scene-progress) * 26px)) rotate(calc(-2deg + var(--scene-progress) * 2deg));transition:none}
.motion-enhanced .phone-device{transform:translateY(calc(var(--scene-progress) * -34px)) rotate(calc(var(--scene-progress) * 3deg));transition:none}
.section-top{position:relative}.section-top:after{content:'';position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--yellow);transform:scaleX(var(--section-progress,0));transform-origin:left;pointer-events:none}
.motion-enhanced .approach h2 em{position:relative;isolation:isolate;background:transparent}
.motion-enhanced .approach h2 em:before{content:'';position:absolute;inset:0 -.04em;background:var(--yellow);z-index:-1;transform-origin:left;transform:scaleX(var(--reading-progress,1))}
.motion-enhanced .about-photo{clip-path:inset(0 round 22px);transform-origin:50% 70%}
@media(min-width:1001px){.motion-enhanced .about-photo.is-visible{transform:translateY(calc(var(--portrait-progress,0) * -18px))}.motion-enhanced .about-grid{align-items:center}}
@media(max-width:680px){
 body .gallery-arrows button{width:45px;height:45px;border-radius:12px}
 body .compare-control{padding:20px 15px 18px}.compare-control-heading{gap:10px}
 body .compare-control label{font-size:13px}body .compare-control #compare-value{font-size:12px;padding:5px 8px;min-width:64px}
 .compare-handle{width:46px;height:46px;border-radius:14px;border-width:2px;left:clamp(25px,var(--split),calc(100% - 25px))}.compare-handle .ui-icon{width:24px;height:24px}
 .scrubber-legend{font-size:11px}.scrubber-rail{height:5px}
 body .gallery-bottom{padding:15px;gap:12px}.gallery-zoom-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 body .gallery-zoom-actions button{padding:10px 8px;font-size:13px;gap:6px}
 .mobile-nav a:last-child>.ui-icon{width:21px;height:21px}
 .motion-enhanced .desktop-device{transform:translateY(calc(var(--scene-progress) * 10px))}
 .motion-enhanced .phone-device{transform:translateY(calc(var(--scene-progress) * -15px))}
}
@media(prefers-reduced-motion:reduce){
 .motion-enhanced .motion-heading .motion-word{transform:none!important;transition:none!important}
 .motion-enhanced .desktop-device,.motion-enhanced .phone-device,.motion-enhanced .about-photo{transform:none!important}
 .section-top:after{transform:none}.motion-enhanced .approach h2 em:before{transform:none}
}
.case-panel{position:relative}.case-panel.is-loading .gallery-counter{opacity:.5}.case-panel.is-loading .gallery-toolbar:after{content:'';width:16px;height:16px;border:2px solid #ffffff50;border-top-color:var(--yellow);border-radius:50%;animation:case-loading .7s linear infinite;flex:none}
@keyframes case-loading{to{transform:rotate(360deg)}}
.motion-enhanced .case-panel{transform:scale(calc(.965 + var(--case-progress,1) * .035));transform-origin:50% 0}
.motion-ready .service-card.reveal{transform:translate(25px,20px)}.motion-ready .service-card.reveal.is-visible{transform:none}
@media(prefers-reduced-motion:reduce){.motion-enhanced .case-panel{transform:none}.case-panel.is-loading .gallery-toolbar:after{animation:none}}

/* More expressive second motion pass: depth, kinetic type and staged cards. */
.motion-band{position:relative;overflow:hidden;background:var(--yellow);color:#191919;padding:24px 0;isolation:isolate;border-block:1px solid #19191915}
.motion-band-track{display:flex;align-items:center;gap:36px;width:max-content;transform:translateX(-9%)}
.motion-band-track>span{font-size:clamp(42px,6.5vw,100px);font-weight:800;line-height:1;letter-spacing:-.065em;white-space:nowrap}
.motion-band-track>span:nth-of-type(3n+2){color:transparent;-webkit-text-stroke:1.5px #191919}
.motion-band-track>i{font-size:clamp(36px,5vw,75px);font-style:normal;font-weight:400;line-height:1}
.motion-enhanced .motion-band-track{transform:translateX(calc(-4% - var(--band-progress,0) * 10%))}
.motion-enhanced .hero-visual{perspective:1100px;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 65px #19191914}
.motion-enhanced .desktop-device{transform:translate3d(0,calc(var(--scene-progress) * 55px),0) rotate(calc(-3deg + var(--scene-progress) * 6deg)) scale(calc(1 + var(--scene-progress) * .035))}
.motion-enhanced .phone-device{transform:translate3d(0,calc(var(--scene-progress) * -85px),0) rotate(calc(-2deg + var(--scene-progress) * 8deg));filter:drop-shadow(0 12px 18px #0002)}
.motion-enhanced .case-panel{transform:perspective(1600px) translateY(calc((1 - var(--case-progress,1)) * 38px)) rotateX(calc((1 - var(--case-progress,1)) * 7deg)) scale(calc(.91 + var(--case-progress,1) * .09));transform-origin:50% 0}
.motion-ready :is(.package,.process-card).reveal{transform:perspective(1000px) translateY(48px) rotateX(8deg) scale(.96);transition:opacity .8s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--card-order,0) * 55ms)}
.motion-ready :is(.package,.process-card).reveal.is-visible{transform:none}
.motion-ready .service-card.reveal{transform:translate3d(42px,30px,0) rotate(-1deg);transition:opacity .8s var(--ease),transform .9s cubic-bezier(.16,1,.3,1)}
.motion-ready .service-card.reveal:nth-child(even){transform:translate3d(-42px,30px,0) rotate(1deg)}
.motion-ready .service-card.reveal.is-visible{transform:none}
.process-card.step-in-focus{border-color:var(--yellow);box-shadow:0 8px 26px #0002,inset 0 3px 0 var(--yellow)}
.process-card.step-in-focus .process-number{color:var(--yellow)}
.case-panel.is-switching .compare img,.case-panel.is-switching .side-comparison img{animation:gallery-arrive .6s cubic-bezier(.16,1,.3,1) both}
@keyframes gallery-arrive{from{opacity:.35;transform:translateX(calc(var(--case-direction,1) * 26px)) scale(1.035)}to{opacity:1;transform:none}}
.button-arrow{overflow:hidden}.button:is(:hover,:focus-visible,.is-pressed) .button-arrow .ui-icon{animation:arrow-flight .42s cubic-bezier(.22,.75,.22,1) both}
@keyframes arrow-flight{0%{transform:translate(0,0)}45%{transform:translate(26px,-26px)}46%{transform:translate(-26px,26px)}100%{transform:translate(0,0)}}
@media(max-width:680px){
 .motion-band{padding:20px 0}.motion-band-track{gap:25px}.motion-band-track>span{font-size:54px}.motion-band-track>i{font-size:40px}
 .motion-enhanced .hero-visual{transform:none}
 .motion-enhanced .desktop-device{transform:translateY(calc(var(--scene-progress) * 22px)) rotate(calc(var(--scene-progress) * 2deg))}
 .motion-enhanced .phone-device{transform:translateY(calc(var(--scene-progress) * -40px)) rotate(calc(var(--scene-progress) * 4deg))}
 .motion-enhanced .case-panel{transform:translateY(calc((1 - var(--case-progress,1)) * 20px)) scale(calc(.96 + var(--case-progress,1) * .04))}
 .motion-ready :is(.service-card,.service-card:nth-child(even)).reveal{transform:translateY(30px)}
 .motion-ready :is(.service-card,.service-card:nth-child(even)).reveal.is-visible{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-band-track,.motion-enhanced .motion-band-track{transform:translateX(-9%)}
 .motion-enhanced :is(.hero-visual,.desktop-device,.phone-device,.case-panel),.motion-ready :is(.package,.process-card,.service-card,.service-card:nth-child(even)).reveal{transform:none!important;opacity:1!important}
 .case-panel.is-switching .compare img,.case-panel.is-switching .side-comparison img,.button .button-arrow .ui-icon{animation:none!important}
}

.improvements{overflow:clip}