:root{--play-blue:#3b82f6;--play-mint:#34d399;--play-lavender:#c4b5fd;--play-yellow:#facc15;--motion-ease:cubic-bezier(.2,.75,.2,1)}
.page-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none;background:transparent}.page-progress::after{content:"";display:block;width:100%;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--page-progress,0))}
.motion-toggle{position:fixed;bottom:24px;left:24px;z-index:35;display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;font-size:11px;font-weight:700;border:1px solid var(--line);border-radius:30px;background:var(--cream);color:var(--ink);box-shadow:0 3px 20px #12212b0b}.motion-toggle .icon{width:14px;height:14px}.motion-toggle:hover{border-color:var(--body)}.motion-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
html[data-motion=on] .motion-reveal{transition:opacity .7s var(--motion-ease),translate .8s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html[data-motion=on] .motion-reveal:not(.is-revealed){opacity:0;translate:0 24px}
.hero-character-art{position:relative;isolation:isolate}.hero-character-art .character-scene{display:block;width:116%;max-width:none;height:auto;margin-left:-7%;overflow:visible;translate:0 var(--hero-drift,0px);transition:translate .15s linear}.hero-character-art .hero-note{top:0;right:5px;font-size:24px;z-index:2}.hero-character-art .art-label{bottom:6px;right:-5px}
.character-scene .prop-sketch,.character-scene .prop-motion{opacity:0}.character-scene[data-variant=hero] .prop-story{opacity:0}.character-scene[data-variant=hero] .prop-motion{opacity:1}
.character-scene .scene-buddy{transform-box:fill-box;transform-origin:50% 85%}.character-scene .scene-star{transform-box:fill-box;transform-origin:center}.character-scene .buddy-wave{transform-box:fill-box;transform-origin:12% 90%}.character-scene .buddy-eyes{transform-box:fill-box;transform-origin:center}.character-scene .buddy-face{translate:var(--look-x,0px) var(--look-y,0px);transition:translate .25s ease}.character-scene .scene-cursor{transform-box:fill-box;transform-origin:50% 50%}.character-scene .scene-buddy-position{translate:calc(var(--journey,0) * 15px) 0}.character-scene .scene-star-position{translate:calc(var(--journey,0) * -10px) calc(var(--journey,0) * 15px)}
html[data-motion=on] .character-scene[data-scene-visible=true] .scene-buddy{animation:buddy-breathe 5s ease-in-out infinite}html[data-motion=on] .character-scene[data-scene-visible=true] .scene-star{animation:star-float 6s ease-in-out infinite}html[data-motion=on] .character-scene[data-scene-visible=true] .buddy-eyes{animation:buddy-blink 7s ease-in-out infinite}html[data-motion=on] .character-scene[data-scene-visible=true] .buddy-wave{animation:buddy-wave 3s ease-in-out 2}
.scroll-story{padding-top:70px;scroll-margin-top:0}.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:58px}.story-heading h2{font-size:clamp(44px,4.8vw,64px);letter-spacing:-1.5px;line-height:1.1;max-width:620px}.story-heading>p{max-width:345px;font-size:16px;line-height:1.9}.story-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:8%;align-items:start}.story-stage{position:sticky;top:117px;border:1px solid #d9deed;border-radius:27px;background:#edf2ff;overflow:hidden;isolation:isolate;padding:24px 25px 0;transition:background .65s ease,border-color .65s ease;--journey:0}.story-stage-top{display:flex;gap:15px;justify-content:space-between;align-items:center}.story-stage-label{font-size:10px;letter-spacing:1px;font-weight:800;color:#304b71}.story-stage-hint{font-size:9px;letter-spacing:1px;white-space:nowrap;color:#657383}.story-stage .character-scene{display:block;width:100%;height:auto;margin:-8px auto -21px;max-height:425px;overflow:visible}.story-stage-caption{font-family:Fredoka,sans-serif;font-size:24px;line-height:1.25;text-align:center;color:#21334b;max-width:340px;min-height:60px;margin:0 auto 22px}.story-stage-nav{border-top:1px solid #263d5c22;display:flex;gap:8px;padding:15px 0}.story-stage-nav a{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:10px 7px;min-height:45px;font-size:12px;color:#40516b;border-radius:8px}.story-stage-nav a span{font-size:10px;opacity:.7}.story-stage-nav a[aria-current]{background:#fff;color:#17263d;box-shadow:0 2px 8px #182b4e0a;font-weight:700}.story-progress{height:4px;margin:0 -25px;background:#203b5d12}.story-progress>span{display:block;height:100%;background:#3b82f6;transform:scaleX(var(--journey,0));transform-origin:left;transition:transform .12s linear}
.story-stage[data-story-stage="1"]{background:#f1eaff;border-color:#e3d7fa}.story-stage[data-story-stage="2"]{background:#dff5e9;border-color:#c4e7d3}.story-stage[data-story-stage="1"] .prop-story,.story-stage[data-story-stage="2"] .prop-story{opacity:0}.story-stage[data-story-stage="1"] .prop-sketch,.story-stage[data-story-stage="2"] .prop-motion{opacity:1}.character-scene .prop-story,.character-scene .prop-sketch,.character-scene .prop-motion{transition:opacity .4s ease}.story-stage[data-story-stage="1"] .scene-prop{rotate:-5deg}.story-stage[data-story-stage="2"] .scene-prop{rotate:3deg}.story-stage .scene-prop{transform-box:fill-box;transform-origin:center;transition:rotate .7s var(--motion-ease)}.story-stage[data-story-stage="2"] .buddy-wave{rotate:-15deg}
.story-chapter{min-height:70vh;min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding:70px 0;scroll-margin-top:135px}.story-number{display:inline-flex;align-self:flex-start;padding:7px 12px;border:1px solid var(--line);border-radius:30px;font-size:10px;font-weight:800;letter-spacing:1px;margin-bottom:28px}.story-chapter h3{font-size:clamp(35px,3.4vw,48px);line-height:1.14;letter-spacing:-1px;margin-bottom:26px}.story-chapter>p{font-size:16px;line-height:1.9;max-width:430px}.story-chapter .story-detail{font-size:14px;margin-top:23px;color:var(--body)}.story-chapter-tag{font-size:10px;letter-spacing:1px;font-weight:700;margin-top:29px;color:var(--blue)}.story-chapter>.text-link{align-self:flex-start;margin-top:25px}.story-footnote{font-size:10px;letter-spacing:.8px;text-align:center;padding-top:45px;border-top:1px solid var(--line);color:var(--body)}
html[data-theme=dark] .story-stage{background:#25364f;border-color:#3c526e}html[data-theme=dark] .story-stage[data-story-stage="1"]{background:#39304d;border-color:#554368}html[data-theme=dark] .story-stage[data-story-stage="2"]{background:#224538;border-color:#395c4e}html[data-theme=dark] .story-stage-label,html[data-theme=dark] .story-stage-caption{color:#f0f3ea}html[data-theme=dark] .story-stage-hint{color:#b4c4ce}html[data-theme=dark] .story-stage-nav{border-color:#ffffff24}html[data-theme=dark] .story-stage-nav a{color:#c4d2de}html[data-theme=dark] .story-stage-nav a[aria-current]{background:#ffffff18;color:white}html[data-theme=dark] .scene-orbit{stroke:#b4d6c4}.footer-socials{flex-wrap:wrap;gap:8px}.contact-socials{flex-wrap:wrap}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .work-image-button img,html[data-motion=on] .blog-photo img{transition:scale .65s var(--motion-ease)}html[data-motion=on] .work-card:hover .work-image-button img,html[data-motion=on] .blog-cover-link:hover img{scale:1.035}html[data-motion=on] .service-card{transition:translate .4s var(--motion-ease),border-color .3s}html[data-motion=on] .service-card:hover{translate:0 -5px;border-color:var(--blue)}}
html[data-motion=off] .client-rail,html[data-motion=off] .hero-art img,html[data-motion=off] .status-dot,html[data-page-hidden=true] .client-rail{animation-play-state:paused!important}html[data-motion=off] .character-scene *,html[data-page-hidden=true] .character-scene *{animation-play-state:paused!important}html[data-motion=off] .motion-reveal{opacity:1;translate:none;transition:none}html[data-motion=off] .story-stage,html[data-motion=off] .character-scene *,html[data-motion=off] .story-progress>span{transition:none}html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] .page-progress{display:none}
@keyframes buddy-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes star-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes buddy-blink{0%,43%,46%,100%{scale:1 1}44.5%{scale:1 .08}}
@keyframes buddy-wave{0%,25%,100%{transform:rotate(0deg)}5%,15%{transform:rotate(-13deg)}10%,20%{transform:rotate(8deg)}}
@media(min-width:1600px){.hero-character-art .character-scene{max-height:550px}.story-stage{top:125px}}
@media(max-width:1100px){.story-layout{gap:6%;grid-template-columns:1.05fr 1fr}.story-stage{padding:20px 20px 0}.story-stage-hint{display:none}.story-stage-caption{font-size:22px}.story-chapter h3{font-size:39px}.hero-character-art .hero-note{font-size:22px;right:0}.story-progress{margin-inline:-20px}}
@media(max-width:850px){.story-layout{grid-template-columns:1fr 1fr;gap:5%}.story-heading{gap:35px}.story-heading h2{font-size:44px}.story-heading>p{font-size:15px;max-width:290px}.story-stage{top:105px;padding:18px 14px 0}.story-stage-label{font-size:8px}.story-stage-caption{font-size:20px;min-height:52px}.story-chapter{padding:50px 0}.story-chapter h3{font-size:33px}.story-chapter>p{font-size:15px}.story-stage-nav a{font-size:10px;gap:4px}.story-progress{margin-inline:-14px}}
@media(max-width:680px){.hero-character-art{height:245px;max-width:345px;width:100%;margin:6px auto 4px}.hero-character-art .character-scene{width:335px;max-width:113%;height:272px;position:absolute;left:50%;top:2px;margin:0;transform:translateX(-50%);translate:0 0}.hero-character-art .hero-note{font-size:17px;right:0;top:-1px;line-height:1.1;rotate:7deg}.hero-character-art .hero-note svg{width:42px;left:-40px}.hero-character-art .art-label{bottom:0;right:-5px;font-size:7px}.scroll-story{padding-top:40px;scroll-margin-top:70px}.story-heading{display:block;margin-bottom:30px}.story-heading h2{font-size:41px;max-width:280px}.story-heading>p{font-size:16px;margin-top:22px;max-width:350px}.story-layout{grid-template-columns:minmax(0,1fr);gap:0}.story-stage{position:sticky;top:79px;z-index:3;border-radius:18px;padding:14px 17px 0;box-shadow:0 8px 20px #182b4e08}.story-stage-top{position:absolute;left:16px;right:16px;top:15px;z-index:1}.story-stage-label{font-size:9px}.story-stage .character-scene{height:214px;max-height:none;width:100%;margin:-8px auto -17px}.story-stage-caption{font-size:19px;min-height:0;max-width:280px;margin:0 auto 13px}.story-stage-nav{padding:8px 0;gap:5px}.story-stage-nav a{font-size:12px;min-height:43px;padding:8px 5px}.story-stage-nav a span{font-size:10px}.story-progress{margin-inline:-17px}.story-chapter{min-height:55vh;min-height:55svh;padding:43px 5px;scroll-margin-top:410px}.story-number{font-size:10px;margin-bottom:22px}.story-chapter h3{font-size:36px;margin-bottom:20px}.story-chapter>p{font-size:16px;line-height:1.85}.story-chapter .story-detail{font-size:14px;margin-top:19px}.story-chapter-tag{margin-top:22px}.story-footnote{font-size:9px;line-height:1.9;padding-top:30px}.motion-toggle{left:16px;bottom:19px;min-height:44px;padding:9px 12px;font-size:10px;gap:7px}.motion-toggle .icon{width:13px;height:13px}}
@media(max-height:700px) and (max-width:680px){.story-stage{position:relative;top:0}.story-chapter{min-height:0;scroll-margin-top:110px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .motion-reveal{opacity:1;translate:none}html:not([data-motion=on]) .character-scene *{animation:none;transition:none}.hero-character-art .character-scene{translate:none}}

/* Repeat a short invitation, then give the page a quiet interval. */
.header-action{position:relative;--cta-ring:var(--peach);--cta-delay:0s}
.whatsapp-float{--cta-ring:#39bc79;--cta-delay:2.4s}
:is(.header-action,.whatsapp-float)::before{content:"";position:absolute;inset:-4px;border:2px solid var(--cta-ring);border-radius:inherit;pointer-events:none;opacity:0}
html[data-motion=on] :is(.header-action,.whatsapp-float){animation:cta-invitation 6.4s ease-in-out infinite;animation-delay:var(--cta-delay);transform-origin:center}
html[data-motion=on] :is(.header-action,.whatsapp-float)::before{animation:cta-ring 6.4s ease-out infinite;animation-delay:var(--cta-delay)}
html[data-motion=on] :is(.header-action,.whatsapp-float):is(:hover,:focus-visible,:active),html[data-motion=on] :is(.header-action,.whatsapp-float):is(:hover,:focus-visible,:active)::before,html[data-page-hidden=true] :is(.header-action,.whatsapp-float),html[data-page-hidden=true] :is(.header-action,.whatsapp-float)::before{animation-play-state:paused}
@keyframes cta-invitation{0%,5%,20%,36%,100%{scale:1}12%{scale:1.035}28%{scale:1.02}}
@keyframes cta-ring{0%,7%{opacity:0;scale:1}12%{opacity:.65;scale:1.015}34%,100%{opacity:0;scale:1.13}}
@media(max-width:680px){
  /* The mobile header hides its CTA, so give its hero equivalent the invitation. */
  .hero-actions>.button:first-child{position:relative;--cta-ring:var(--peach)}
  .hero-actions>.button:first-child::before{content:"";position:absolute;inset:-4px;border:2px solid var(--cta-ring);border-radius:inherit;pointer-events:none;opacity:0}
  html[data-motion=on] .hero-actions>.button:first-child{animation:cta-invitation 6.4s ease-in-out infinite}
  html[data-motion=on] .hero-actions>.button:first-child::before{animation:cta-ring 6.4s ease-out infinite}
  html[data-motion=on] .hero-actions>.button:first-child:is(:hover,:focus-visible,:active),html[data-motion=on] .hero-actions>.button:first-child:is(:hover,:focus-visible,:active)::before,html[data-page-hidden=true] .hero-actions>.button:first-child,html[data-page-hidden=true] .hero-actions>.button:first-child::before{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){:is(.header-action,.whatsapp-float),:is(.header-action,.whatsapp-float)::before,.hero-actions>.button:first-child,.hero-actions>.button:first-child::before{animation:none!important}}

/* Different entrances keep the page's chapters distinct. */
html[data-motion=on] .motion-reveal{translate:0 0;scale:1;rotate:0deg;clip-path:none;transition:opacity .7s var(--motion-ease),translate .9s var(--motion-ease),scale .9s var(--motion-ease),rotate .9s var(--motion-ease),clip-path .95s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html[data-motion=on] .motion-reveal:not(.is-revealed){opacity:0;translate:0 38px}
html[data-motion=on] .motion-reveal[data-reveal=left]:not(.is-revealed){translate:-48px 12px}
html[data-motion=on] .motion-reveal[data-reveal=right]:not(.is-revealed){translate:48px 12px}
html[data-motion=on] .motion-reveal[data-reveal=pop]:not(.is-revealed){translate:0 36px;scale:.94;rotate:var(--reveal-tilt,0deg)}
html[data-motion=on] .motion-reveal[data-reveal=heading]:not(.is-revealed){translate:0 42px;clip-path:inset(0 0 95% 0)}
.about-section,.contact-section{overflow-x:clip}
html[data-motion=on] .hero-copy.is-revealed .underlined path{stroke-dasharray:420;animation:underline-arrive 1.2s .2s var(--motion-ease) both}
@keyframes underline-arrive{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
html[data-motion=on] .testimonial[data-review-enter]{animation:review-arrive .55s var(--motion-ease) both}
@keyframes review-arrive{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
html[data-motion=off] .motion-reveal{opacity:1;translate:none;scale:1;rotate:0deg;clip-path:none;transition:none}
html[data-page-hidden=true] .testimonial[data-review-enter],html[data-page-hidden=true] .underlined path{animation-play-state:paused!important}

/* The arrow is part of the illustration; the normal pointer stays available. */
.hero-character-art .scene-buddy-position{transform-box:fill-box;transform-origin:50% 70%;translate:var(--body-x,0px) var(--body-y,0px);rotate:var(--body-tilt,0deg)}
.hero-character-art .scene-pointer-position{translate:var(--cursor-x,0px) var(--cursor-y,0px)}
.hero-character-art .scene-cloud-position{translate:var(--cloud-x,0px) var(--cloud-y,0px)}
.scene-cloud,.reaction-sparks{transform-box:fill-box;transform-origin:center}.cloud-face{translate:calc(var(--look-x,0px) * .35) calc(var(--look-y,0px) * .35);transition:translate .2s ease}
.buddy-wow,.reaction-sparks{opacity:0}.hero-character-art .character-scene{cursor:pointer;touch-action:pan-y}
.character-bubble{position:absolute;top:28px;left:8px;max-width:180px;padding:12px 16px;border:1px solid #ceddd6;border-radius:17px 17px 5px 17px;background:#fffefa;color:#263b3d;font-family:Fredoka,sans-serif;font-size:16px;line-height:1.3;box-shadow:0 5px 15px #172c3008;z-index:2;rotate:-5deg;pointer-events:none;transition:scale .3s ease,background .3s ease}
.character-tools{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:17px;z-index:2}.character-play{display:flex;align-items:center;gap:14px;padding:10px 17px;min-height:44px;border-radius:30px;background:var(--cream);color:var(--ink);border:1px solid var(--line);font-size:12px;font-weight:700;box-shadow:0 3px 12px #182c3d08}.character-play>span{font-size:21px;line-height:1;color:var(--blue);transition:rotate .4s var(--motion-ease)}.character-play:hover>span{rotate:100deg}.character-play:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.character-hint{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--body)}.touch-hint{display:none}
html[data-motion=on] .character-scene[data-scene-visible=true] .scene-cloud{animation:cloud-float 6.5s ease-in-out infinite}
@keyframes cloud-float{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-9px) rotate(-2deg)}}
html[data-motion=on] .hero-character-art[data-hero-reaction=true] .buddy-wave{animation:hello-wave .45s ease-in-out 3}
html[data-motion=on] .hero-character-art[data-hero-reaction=true] .scene-buddy{animation:hello-bounce .65s var(--motion-ease) 2}
html[data-motion=on] .hero-character-art[data-hero-reaction=true] .scene-star{animation:hello-star .8s var(--motion-ease)}
html[data-motion=on] .hero-character-art[data-hero-reaction=true] .reaction-sparks{animation:hello-sparks 1.3s ease-out both}
.hero-character-art[data-hero-reaction=true] .buddy-smile{opacity:0}.hero-character-art[data-hero-reaction=true] .buddy-wow{opacity:1}.hero-character-art[data-hero-reaction=true] .character-bubble{background:#fff5c9;scale:1.05}
@keyframes hello-wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-24deg)}}
@keyframes hello-bounce{0%,100%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-14px) scale(.98,1.04)}70%{transform:translateY(2px) scale(1.03,.98)}}
@keyframes hello-star{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:translateY(-12px) rotate(15deg) scale(1.1)}}
@keyframes hello-sparks{0%{opacity:0;scale:.5}25%{opacity:1;scale:1}100%{opacity:0;scale:1.5}}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .service-card .object-icon{transition:translate .45s var(--motion-ease),rotate .45s var(--motion-ease)}html[data-motion=on] .service-card:hover .object-icon{translate:0 -7px;rotate:6deg}}
@media(max-width:1100px){.character-bubble{top:18px;left:-6px;font-size:14px;max-width:155px}.character-tools{gap:12px}.character-hint{font-size:8px}.hero-character-art .hero-note{font-size:19px}}
@media(max-width:680px){
  html[data-motion=on] .motion-reveal[data-reveal=left]:not(.is-revealed),html[data-motion=on] .motion-reveal[data-reveal=right]:not(.is-revealed){translate:0 32px}
  .hero-character-art{height:270px}.hero-character-art .character-scene{top:-10px;height:260px}.hero-character-art .hero-note{font-size:16px;top:-7px;right:-3px}.character-tools{bottom:0;gap:14px}.character-play{font-size:11px;min-height:44px;padding:9px 15px}.character-hint{font-size:8px}.pointer-hint{display:none}.touch-hint{display:inline}.character-bubble{top:24px;left:0;font-size:14px;max-width:152px;opacity:0;transition:opacity .2s,scale .3s}.hero-character-art[data-hero-reaction=true] .character-bubble{opacity:1}
}

html[data-motion=on] .motion-reveal[data-reveal=heading].is-revealed{clip-path:inset(0)}

@media(max-width:680px){.hero-character-art[data-hero-message=true] .character-bubble{opacity:1}}

html[data-motion=off] .character-bubble{transition:none}

/* Soft, organic details on the sprout mascot. */
.creature-leaves{transform-box:fill-box;transform-origin:50% 100%}.creature-tail{transform-box:fill-box;transform-origin:7% 60%}
html[data-motion=on] .character-scene[data-scene-visible=true] .creature-leaves{animation:sprout-leaf-sway 5s ease-in-out infinite}
html[data-motion=on] .character-scene[data-scene-visible=true] .creature-tail{animation:sprout-tail-sway 4.6s ease-in-out infinite}
html[data-motion=on] .hero-character-art[data-hero-reaction=true] .creature-leaves{animation:sprout-leaf-hello .5s ease-in-out 3}
@keyframes sprout-leaf-sway{0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes sprout-tail-sway{0%,100%{rotate:-3deg}50%{rotate:5deg}}
@keyframes sprout-leaf-hello{0%,100%{rotate:0deg}50%{rotate:-14deg}}