/* The work opens like a pair of design boards as the visitor scrolls. */
.work{overflow:clip;overflow-clip-margin:40px}
.motion-ready .project{--reveal:1;transform:translate3d(calc(var(--side) * (1 - var(--reveal)) * 32px),calc((1 - var(--reveal)) * 90px),0) rotate(calc(var(--side) * (1 - var(--reveal)) * 5deg)) scale(calc(.92 + var(--reveal) * .08));transform-origin:center 80%;will-change:transform}
.project:first-child{--side:-1}.project:last-child{--side:1}
.motion-ready .project-photo img{transform:scale(calc(1.09 - var(--reveal) * .09));transition:none}
.motion-ready .project:hover .project-photo img{transform:scale(1.025);transition:transform .4s}
.steps article{position:relative}
.motion-ready .steps article:before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(var(--reveal,0));transform-origin:left}
.motion-ready .contact-mark{display:block;transform:rotate(calc((1 - var(--reveal,1)) * -45deg));transform-origin:center}
.footer-signoff{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px 0 38px}
.footer-signoff .wordmark{font-size:54px;color:var(--orange);letter-spacing:-3.5px}
.footer-signoff p{font:500 25px/1.2 var(--display);letter-spacing:-.9px;text-align:right}
@media(max-width:800px){.motion-ready .project{transform:translate3d(0,calc((1 - var(--reveal)) * 55px),0) rotate(calc(var(--side) * (1 - var(--reveal)) * 2deg)) scale(calc(.96 + var(--reveal) * .04))}.work{overflow-clip-margin:15px}.motion-ready .contact-mark{display:none}}
@media(max-width:540px){.footer-signoff{padding:30px 0;gap:20px}.footer-signoff .wordmark{font-size:38px;letter-spacing:-2px}.footer-signoff p{font-size:18px;letter-spacing:-.6px}}

/* The hero preview straightens as the page moves, so the gesture also reads on a phone. */
.motion-ready .mini-browser{transform:rotate(calc((1 - var(--hero,0)) * -3deg)) translateY(calc(var(--hero,0) * -12px));transition:none;will-change:transform}

/* Section headings arrive a line at a time, the way a page is set rather than faded in. */
.motion-ready .reveal-lines{--reveal:1}
.motion-ready .reveal-lines>span>span{will-change:transform}
.motion-ready .reveal-lines>span:first-child>span{transform:translateY(calc((1 - clamp(0,var(--reveal) * 1.28,1)) * 112%))}
.motion-ready .reveal-lines>span:last-child>span{transform:translateY(calc((1 - clamp(0,(var(--reveal) - .17) * 1.5,1)) * 112%))}
@media(prefers-reduced-motion:reduce){.motion-ready .project,.motion-ready .project-photo img,.motion-ready .contact-mark,.motion-ready .mini-browser,.motion-ready .reveal-lines>span>span{transform:none!important}.motion-ready .steps article:before{transform:scaleX(1)}}