/* Tape belongs to the stationary anchor. Only its paper surface lifts. */
.button,.header-tg{--control-bg:#575650;--control-wash:#575650e6;--control-border:#8d8b84;transition:none}
.button.orange{--control-bg:var(--orange);--control-wash:#ff6b20eb;--control-border:#ff8c51}
.button.dark{--control-bg:#383832;--control-wash:#383832eb;--control-border:#65635b}
.button,.header-tg,.button:hover,.header-tg:hover,.button:active,.header-tg:active{transform:none;background:none;box-shadow:none;border-color:transparent}
.button-surface{position:absolute;inset:-1px;z-index:0;background-color:var(--control-bg);background-image:linear-gradient(var(--control-wash),var(--control-wash)),var(--xerox);background-size:auto,480px;border:1px solid var(--control-border);box-shadow:inset 0 0 0 1px #d3cfc51a,2px 3px 0 #11111150;pointer-events:none;transition:transform .18s ease-out,filter .18s ease-out}
.button-label,.button>.icon,.header-tg>.icon{transition:transform .18s ease-out}
.button:hover .button-surface,.header-tg:hover .button-surface{transform:translateY(-2px);filter:brightness(1.1)}
.button:hover>.button-label,.button:hover>.icon,.header-tg:hover>.button-label,.header-tg:hover>.icon{transform:translateY(-2px)}
.button:active .button-surface,.header-tg:active .button-surface,.button:active>.button-label,.button:active>.icon,.header-tg:active>.button-label,.header-tg:active>.icon{transform:translateY(1px)}
.button:before,.button:after,.header-tg:before,.header-tg:after{width:35px;height:23px;background-image:url('assets/tape-crease-v4.webp');background-size:contain;transition:none;filter:drop-shadow(0 1px 1px #17171755)}
.button:before,.header-tg:before{left:-9px;top:-8px;transform:rotate(-45deg)}
.button:after,.header-tg:after{right:-9px;bottom:-8px;background-image:url('assets/tape-crumple-v4.webp');transform:rotate(-45deg)}
.button:nth-of-type(even):before,.button.dark:before,.contact .button:before{background-image:url('assets/tape-crumple-v4.webp');width:33px;height:24px;transform:rotate(-45deg) scaleX(-1)}
.button:nth-of-type(even):after,.button.dark:after,.contact .button:after{background-image:url('assets/tape-crease-v4.webp');width:36px;height:22px;transform:rotate(-45deg) scaleX(-1)}
.header-tg:before,.header-tg:after{width:30px;height:21px}.header-tg:before{left:-7px;top:-7px}.header-tg:after{right:-7px;bottom:-7px}
@media(max-width:700px){.button:before{left:-8px;top:-7px}.button:after{right:-8px;bottom:-7px}}
@media(prefers-reduced-motion:reduce){.button-surface,.button-label,.button>.icon,.header-tg>.icon{transition:none}}
.button.orange,.button.dark,.button.orange:hover,.button.dark:hover,.button.orange:active,.button.dark:active{background:none;box-shadow:none;border-color:transparent;transform:none}
.button .button-surface,.header-tg .button-surface,.button>.button-label,.button>.icon,.header-tg>.button-label,.header-tg>.icon,.button:hover .button-surface,.header-tg:hover .button-surface,.button:hover>.button-label,.button:hover>.icon,.header-tg:hover>.button-label,.header-tg:hover>.icon,.button:active .button-surface,.header-tg:active .button-surface,.button:active>.button-label,.button:active>.icon,.header-tg:active>.button-label,.header-tg:active>.icon{transform:none;transition:filter .18s ease-out}