/* FORMA LIFE: typography in motion */
.motion-ribbon{position:relative;overflow:hidden;isolation:isolate;width:100%;--ribbon-bg:var(--copper);background:var(--ribbon-bg);color:var(--ink)}
.ribbon-viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 85%,transparent 96%);padding-right:115px}
.ribbon-belt{display:flex;width:max-content;animation:life-marquee 42s linear infinite;will-change:transform}
.ribbon-group{display:flex;align-items:center;gap:42px;padding:23px 42px 23px 0;flex-shrink:0}
.ribbon-group span{font:400 clamp(20px,2.15vw,33px)/1.2 var(--display);letter-spacing:.075em;white-space:nowrap}
.ribbon-group i{font-size:27px;line-height:1;font-style:normal;font-weight:300}
.ribbon-reverse .ribbon-belt{animation-direction:reverse;animation-duration:55s}
.ribbon-editorial{--ribbon-bg:var(--paper);padding:16px 0 47px;color:#7b866f}
.ribbon-editorial .ribbon-group{gap:60px;padding-right:60px}
.ribbon-editorial .ribbon-group span{font-size:clamp(46px,7.3vw,110px);letter-spacing:-.045em}
.ribbon-editorial .ribbon-group span:nth-of-type(2){color:transparent;-webkit-text-stroke:1px #7b866f}
.ribbon-editorial .ribbon-group i{font-size:47px;color:var(--copper)}
.motion-toggle{position:absolute;z-index:2;right:16px;top:50%;transform:translateY(-50%);min-height:44px;min-width:86px;padding:8px 12px;font:400 10px var(--body);letter-spacing:.04em;background:var(--ribbon-bg);border:1px solid currentColor;color:inherit;box-shadow:-18px 0 25px 12px var(--ribbon-bg)}
.ribbon-editorial .motion-toggle{top:auto;bottom:12px;transform:none}
.motion-toggle:disabled{cursor:default;opacity:.8}
.motion-ribbon:hover .ribbon-belt,.motion-ribbon:focus-within .ribbon-belt,.motion-offscreen .ribbon-belt,.motion-paused .ribbon-belt,.motion-hidden .ribbon-belt{animation-play-state:paused}
@keyframes life-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hero-image{animation:life-breathe 26s ease-in-out infinite alternate;transform-origin:60% 55%;will-change:transform}
@keyframes life-breathe{from{transform:scale(1.015)}to{transform:scale(1.075)}}
.hero-wordmark{animation:life-wordmark 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes life-wordmark{from{opacity:0;filter:blur(7px);transform:translate(-50%,20px)}to{opacity:1;filter:blur(0);transform:translate(-50%,0)}}
.hero-bottom>div{animation:life-rise 1s .22s cubic-bezier(.2,.7,.2,1) both}
.hero-bottom .circle-link{animation:life-fade 1s .55s ease both}
@keyframes life-rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes life-fade{from{opacity:0}to{opacity:1}}
.hero-foot>a span{animation:life-arrow 2.6s ease-in-out infinite}
@keyframes life-arrow{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.btn,.text-link,.package-grid article,.project-title-row>span,.save-project,.swatches i{transition:background .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.7,.2,1),outline-color .3s}
.btn span,.text-link span,.project-open b,.header-cta span{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.btn:hover span,.text-link:hover span,.project-open:hover b,.header-cta:hover span{transform:translate(4px,-4px)}.package-grid article:hover{background:#e0e2d6}.package-grid article.package-highlight:hover{background:#31463b}.project-card:hover .project-title-row>span{transform:translateX(-5px)}.swatches button:hover i{transform:scale(1.13)}.save-project:hover{transform:scale(1.08)}}
.desktop-nav a{position:relative}.desktop-nav a:after{content:'';position:absolute;bottom:-7px;left:0;right:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .3s}.desktop-nav a:hover:after{transform:scaleX(1)}
dialog[open]{animation:life-dialog .32s cubic-bezier(.2,.7,.2,1)}
@keyframes life-dialog{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.motion-paused *, .motion-hidden .hero *, .hero.motion-offscreen *{animation-play-state:paused!important}
.motion-paused dialog[open],.motion-paused .hero-wordmark,.motion-paused .hero-bottom>div,.motion-paused .hero-bottom .circle-link{animation:none!important}
.motion-reduced .ribbon-belt{animation:none!important;width:100%;transform:none!important}
.motion-reduced .ribbon-group{flex-wrap:wrap;justify-content:center;gap:14px;padding:20px}
.motion-reduced .ribbon-group+ .ribbon-group{display:none}
.motion-reduced .ribbon-group span{white-space:normal;text-align:center}
.motion-reduced .ribbon-viewport{padding:0;mask-image:none}
.motion-reduced .motion-ribbon{padding-bottom:48px}
.motion-reduced .motion-toggle{top:auto;bottom:7px;transform:none;box-shadow:none}
@media(max-width:600px){.ribbon-group{gap:26px;padding:21px 26px 21px 0}.ribbon-belt{animation-duration:35s}.ribbon-group span{font-size:21px}.ribbon-group i{font-size:21px}.motion-toggle{font-size:9px;min-width:73px;right:10px;padding-inline:9px}.ribbon-editorial{padding-block:0 45px}.ribbon-editorial .ribbon-group{gap:32px;padding-right:32px}.ribbon-editorial .ribbon-group span{font-size:52px}.ribbon-editorial .ribbon-group i{font-size:30px}.ribbon-editorial .motion-toggle{bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-image,.hero-bottom>div{transform:none!important}.hero-wordmark{transform:translateX(-50%)!important;filter:none!important}.ribbon-belt{animation:none!important}.ribbon-group span{font-size:20px!important}.ribbon-group i{font-size:20px!important}}