/* JOMA Motion System · progressive enhancement · WCAG reduced motion */
:root { --ease-premium: cubic-bezier(.22,1,.36,1); --motion-short: 240ms; --motion-medium: 650ms; --motion-long: 1000ms; }
html { scroll-padding-top: 100px; }
html.motion-ready [data-reveal]:not(.is-visible) { opacity:0; transform:translate3d(0,31px,0); }
html.motion-ready [data-reveal="left"]:not(.is-visible) { transform:translate3d(-35px,0,0); }
html.motion-ready [data-reveal="right"]:not(.is-visible) { transform:translate3d(35px,0,0); }
html.motion-ready [data-reveal="scale"]:not(.is-visible) { transform:translate3d(0,20px,0) scale(.96); }
[data-reveal] { transition:opacity 800ms var(--ease-premium),transform 850ms var(--ease-premium); transition-delay:var(--reveal-delay,0ms); }
[data-reveal].is-visible { opacity:1;transform:none; }
.scroll-progress{pointer-events:none;position:fixed;left:0;top:0;width:100%;height:3px;z-index:110;transform-origin:left;transform:scaleX(0);background:var(--premium-accent,#e52186);will-change:transform;}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;padding:11px 18px;border-radius:7px;background:#fff;color:#101b3b;box-shadow:0 8px 30px #0004;font-weight:700;}
.skip-link:focus{top:12px;}
a,button,select,input,textarea{ -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--premium-accent,#e52186);outline-offset:4px;}
::selection{background:#e5218666;color:inherit;}
img{height:auto;} img[loading=lazy]{content-visibility:auto;}
/* Stable layouts for modern high-end transitions, while preserving native layouts. */
:is(.service-grid > *, .project, .tile, .piece, .step, .offer-grid > *){transition:transform 450ms var(--ease-premium),box-shadow 450ms var(--ease-premium),border-color 350ms ease;}
@media (hover:hover) and (pointer:fine){
:is(.service-grid > *,.project,.tile,.piece,.offer-grid > *):hover{transform:translate3d(0,-7px,0);}
:is(.project,.tile,.piece) img{transition:transform .8s var(--ease-premium), filter .8s ease!important;}
:is(.project,.tile,.piece):hover img{transform:scale(1.045);}
:is(.btn,.pill,.header-cta,.link-underline,.joma-chat-float){transition:transform 260ms var(--ease-premium), box-shadow 260ms ease, background-color 260ms ease;}
:is(.btn,.pill,.header-cta):hover{transform:translate3d(0,-3px,0);}
}
/* A subtly animated underline communicates position in navigation. */
nav a[href^="#"]{position:relative;}
nav a[href^="#"]:after{content:"";position:absolute;bottom:-7px;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--premium-accent,#e52186);transition:transform .35s var(--ease-premium);}
nav a[href^="#"]:hover:after,nav a[href^="#"].is-active:after{transform:scaleX(1);}
@media(max-width:850px){nav a[href^="#"]:after{display:none;}}
/* Floating media can be disabled on low-powered and accessibility-preference devices. */
[data-floating] { transform:translate3d(0,var(--float-y,0px),0); transition: transform 180ms ease-out; will-change:transform; }
.form-note{line-height:1.55;}
.premium-trustline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.09em;font-weight:700;text-transform:uppercase;opacity:.8;margin-top:20px;}
.premium-trustline>span:not(:last-child):after{content:"✳";margin-left:10px;opacity:.55;}
.premium-folio{display:inline-flex;gap:9px;align-items:center;padding:8px 12px;border:1px solid currentColor;border-radius:30px;font-size:10px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;opacity:.7;}
[data-count]{font-variant-numeric:tabular-nums;}
/* Small ambient brand orbs, intentionally not interfering with click targets. */
.premium-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.premium-ambient::before,.premium-ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.19;animation:ambient-drift 14s ease-in-out infinite alternate;}
.premium-ambient::before{width:280px;height:280px;top:-120px;right:8%;background:var(--premium-accent,#e52186)}
.premium-ambient::after{width:230px;height:230px;bottom:-140px;left:30%;background:#7277ff;animation-delay:-7s}
@keyframes ambient-drift{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(35px,25px,0)}}
.premium-stagger{--reveal-delay:100ms;}
.premium-inline-link{display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:5px;}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
html.motion-ready [data-reveal]:not(.is-visible){opacity:1!important;transform:none!important}
[data-reveal],*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
[data-floating]{transform:none!important;will-change:auto!important}
.scroll-progress{display:none!important}
}

/* CREATIVE STUDIO — bold playful art direction, restrained physical motion */
:root{--premium-accent:#ff5f66}
.hero{isolation:isolate}.hero-in{position:relative;z-index:2}
.hero .premium-ambient:before{background:#fc7e4f;filter:blur(80px);opacity:.27;top:10%;left:-150px}
.hero .premium-ambient:after{background:#6336d8;opacity:.14;right:4%;left:auto;bottom:-95px}
.hero-art{isolation:isolate}
.hero-art .sticker{animation:sticker-in 1.1s cubic-bezier(.2,1,.3,1) both;transform-origin:70% 30%;}
@keyframes sticker-in{0%{opacity:0;transform:translateY(-20px) rotate(-25deg) scale(.8)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.hero-copy h1{text-wrap:balance;letter-spacing:-.075em}
.tile{overflow:hidden}.tile img{transition:transform 850ms var(--ease-premium)!important}
:is(.pill,.tile){will-change:auto}
:is(.tile,.what-item):hover{box-shadow:9px 11px 0 #25165417}
.hero-art .joma-real-photo{filter:drop-shadow(0 24px 18px #2f12672b)}
.premium-studio-stamp{position:absolute;left:-16px;bottom:22px;width:78px;height:78px;border:2px solid #2b1b67;border-radius:50%;display:grid;place-items:center;background:#fff7e2;color:#2b1b67;font-size:10px;line-height:1.45;text-align:center;font-weight:900;transform:rotate(-12deg);z-index:2;pointer-events:none;}
.navbar{transition:box-shadow 300ms ease}.navbar.is-scrolled{box-shadow:0 12px 22px #27105715}
@media(max-width:740px){.premium-studio-stamp{width:58px;height:58px;font-size:8px;left:2px;bottom:12px}}

.premium-demo-footnote{display:block;text-align:center;margin:18px auto 0!important;font-size:11px;opacity:.54;letter-spacing:.04em}
.premium-email-action{background:transparent;border:1px solid currentColor;border-radius:9px;padding:11px 16px;color:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:opacity 220ms,transform 220ms;white-space:nowrap}
.premium-email-action:hover{opacity:.7;transform:translateY(-2px)}