/* Separate SVG parts animate once per hover/focus, never on a timer loop. */
.sketch-svg{display:block;max-width:100%;overflow:visible;flex-shrink:0}.fx{transform-box:fill-box;transform-origin:center;animation-duration:1.25s;animation-timing-function:cubic-bezier(.22,.7,.25,1);animation-fill-mode:both;animation-iteration-count:1}
.art-active .fx-message{animation-name:sketch-message}.art-active .fx-reply{animation-name:sketch-reply;animation-delay:.14s}.art-active .fx-spark,.art-active .fx-pulse{animation-name:sketch-pulse}.art-active .fx-slider-right{animation-name:sketch-slider-right}.art-active .fx-slider-left{animation-name:sketch-slider-left;animation-delay:.1s}.art-active .fx-cursor{animation-name:sketch-cursor}.art-active .fx-button-press{animation-name:sketch-button;animation-delay:.22s}.art-active .fx-sheet-left{animation-name:sketch-sheet-left}.art-active .fx-sheet-right{animation-name:sketch-sheet-right}.art-active .fx-sheet-front{animation-name:sketch-message;animation-delay:.08s}.art-active .fx-mail-up{animation-name:sketch-mail-up;animation-delay:.12s}.art-active .fx-mail-down{animation-name:sketch-mail-down;animation-delay:.24s}.art-active .fx-assemble-one{animation-name:sketch-piece-one}.art-active .fx-assemble-two{animation-name:sketch-piece-two;animation-delay:.08s}.art-active .fx-assemble-three{animation-name:sketch-piece-three;animation-delay:.16s}.art-active .fx-toggle{animation-name:sketch-toggle}.art-active .fx-loop{animation-name:sketch-loop}.art-active .fx-success-one,.art-active .fx-success-two,.art-active .fx-success-three{animation-name:sketch-pulse;animation-duration:.75s}.art-active .fx-success-one{animation-delay:.4s}.art-active .fx-success-two{animation-delay:.55s}.art-active .fx-success-three{animation-delay:.7s}.art-active .fx-draw path{animation:sketch-draw 1.15s ease both;stroke-dasharray:1;animation-delay:.08s}
@keyframes sketch-message{0%,100%{transform:translate(0)}35%{transform:translateY(-7px) rotate(-3deg)}65%{transform:translateY(2px)}}
@keyframes sketch-reply{0%,100%{transform:translate(0)}40%{transform:translateY(-9px) rotate(3deg)}}
@keyframes sketch-pulse{0%,100%{transform:scale(1);opacity:1}35%{transform:scale(1.14);opacity:.65}65%{transform:scale(.97);opacity:1}}
@keyframes sketch-slider-right{0%,100%{transform:translateX(0)}35%{transform:translateX(12px)}65%{transform:translateX(-8px)}}
@keyframes sketch-slider-left{0%,100%{transform:translateX(0)}35%{transform:translateX(-14px)}65%{transform:translateX(10px)}}
@keyframes sketch-cursor{0%,100%{transform:translate(0)}35%,55%{transform:translate(-35px,-9px) rotate(-6deg)}}
@keyframes sketch-button{0%,100%{transform:scale(1);fill:#ee5a1e}30%,55%{transform:scale(.93);fill:#c9470f}}
@keyframes sketch-sheet-left{0%,100%{transform:translate(0) rotate(0)}40%{transform:translate(-8px,-5px) rotate(-6deg)}}
@keyframes sketch-sheet-right{0%,100%{transform:translate(0) rotate(0)}40%{transform:translate(6px,-8px) rotate(4deg)}}
@keyframes sketch-mail-up{0%,100%{transform:translate(0)}45%{transform:translate(7px,-8px) rotate(-4deg)}}
@keyframes sketch-mail-down{0%,100%{transform:translate(0)}45%{transform:translate(9px,5px) rotate(4deg)}}
@keyframes sketch-piece-one{0%,100%{transform:translate(0)}40%{transform:translate(9px,8px) rotate(8deg)}}
@keyframes sketch-piece-two{0%,100%{transform:translate(0)}40%{transform:translate(4px,12px) rotate(-8deg)}}
@keyframes sketch-piece-three{0%,100%{transform:translate(0)}40%{transform:translate(-5px,10px) rotate(8deg)}}
@keyframes sketch-toggle{0%,100%{transform:translateX(0)}40%,65%{transform:translateX(-85px)}}
@keyframes sketch-loop{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}70%{transform:rotate(5deg)}}
@keyframes sketch-draw{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
/* Returning immediately to the resting illustration on leave also removes all keyframes. */
@media(prefers-reduced-motion:reduce){.sketch-svg,.sketch-svg *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}}
/* Pen details stay understated; the blue accents still belong to the same identity. */
.pen-detail{pointer-events:none}.link-pen-arrow{width:17px;height:17px;overflow:visible}.link-pen-arrow path{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.service-art:before{border-radius:47% 51% 43% 54%;background:#fbe6d8}.art-active .pen-detail{animation:sketch-ink .7s ease both}@keyframes sketch-ink{from{opacity:.15}to{opacity:.55}}