/* Small, finite interactions for the illustrated service buttons. */
.trade-animation {
  appearance: none;
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.trade-animation.trade-art--carpet { background: #dce7dc; }
.trade-animation.trade-art--plumbing { background: #e9eee4; }
.trade-animation.trade-art--electrical { background: #e0ebe4; }
.trade-animation:focus-visible {
  outline: 3px solid #2f6f66;
  outline-offset: -6px;
}
.trade-animation > svg { transform: translateY(-7px); }
.trade-animation-hint {
  position: absolute;
  bottom: 9px;
  left: 12px;
  right: 12px;
  color: #53685f;
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.trade-animation.is-highlighted { box-shadow: inset 0 0 0 3px rgba(67, 140, 130, .25); }
.carpet-wand, .carpet-hose, .carpet-machine, .plumbing-handle, .plumbing-drop,
.electrical-plug, .electrical-cord {
  transform-box: view-box;
}
.carpet-hose { transform-origin: 139px 108px; }
.carpet-machine { transform-origin: 160px 144px; }
.carpet-sparkle--one, .carpet-sparkle--two { opacity: 0; }
.plumbing-handle { transform-origin: 133px 34px; }
.trade-art--plumbing.is-off .plumbing-handle { transform: rotate(90deg); }
.trade-art--plumbing.is-off .plumbing-drop { opacity: 0; }
.electrical-cord { transform-origin: 171px 166px; }
.electrical-bulb { fill: #f7f5ef; }
.electrical-glow, .electrical-rays { opacity: 0; }
.electrical-bolt { opacity: .3; }
.trade-art--electrical.is-on .electrical-plug { transform: translateY(-35px); }
.trade-art--electrical.is-on .electrical-cord { transform: scaleY(3.058824); }
.trade-art--electrical.is-on .electrical-bulb { fill: #f3cf78; }
.trade-art--electrical.is-on .electrical-glow { opacity: .5; }
.trade-art--electrical.is-on .electrical-rays,
.trade-art--electrical.is-on .electrical-bolt { opacity: 1; }
.trade-art--carpet.is-playing .carpet-wand { animation: trade-carpet-sweep 2.15s ease-in-out both; }
.trade-art--carpet.is-playing .carpet-hose { animation: trade-carpet-hose 2.15s ease-in-out both; }
.trade-art--carpet.is-playing .carpet-machine { animation: trade-carpet-machine 2.15s ease-in-out both; }
.trade-art--carpet.is-playing .carpet-clean-streak { animation: trade-carpet-clean 2.15s ease-in-out both; }
.trade-art--carpet.is-playing .carpet-sparkle--one { animation: trade-carpet-sparkle-one 2.15s ease-in-out both; }
.trade-art--carpet.is-playing .carpet-sparkle--two { animation: trade-carpet-sparkle-two 2.15s ease-in-out both; }
.trade-art--plumbing.is-playing .plumbing-handle { animation: trade-tap-close 2.4s ease-in-out both; }
.trade-art--plumbing.is-playing .plumbing-drop { animation: trade-last-drop 2.4s ease-out both; }
.trade-art--electrical.is-playing .electrical-plug { animation: trade-plug-connect 2.2s ease-in-out both; }
.trade-art--electrical.is-playing .electrical-cord { animation: trade-cord-connect 2.2s ease-in-out both; }
.trade-art--electrical.is-playing .electrical-bulb { animation: trade-bulb-on 2.2s ease-in-out both; }
.trade-art--electrical.is-playing .electrical-glow { animation: trade-glow-on 2.2s ease-in-out both; }
.trade-art--electrical.is-playing .electrical-rays { animation: trade-rays-on 2.2s ease-in-out both; }
.trade-art--electrical.is-playing .electrical-bolt { animation: trade-power-on 2.2s ease-in-out both; }
@keyframes trade-carpet-sweep {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  60% { transform: translateX(8px); }
  82% { transform: translateX(-3px); }
}
@keyframes trade-carpet-hose {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(1.1923); }
  60% { transform: scaleX(.84615); }
  82% { transform: scaleX(1.0577); }
}
@keyframes trade-carpet-machine {
  0%, 45%, 100% { transform: scaleY(1); }
  25%, 65% { transform: scaleY(.985); }
}
@keyframes trade-carpet-clean {
  0%, 100% { opacity: .5; }
  30%, 70% { opacity: 1; }
}
@keyframes trade-carpet-sparkle-one {
  0%, 18%, 58%, 100% { opacity: 0; }
  34%, 43% { opacity: 1; }
}
@keyframes trade-carpet-sparkle-two {
  0%, 43%, 100% { opacity: 0; }
  65%, 77% { opacity: 1; }
}
@keyframes trade-tap-close {
  0%, 12% { transform: rotate(0); }
  58%, 100% { transform: rotate(90deg); }
}
@keyframes trade-last-drop {
  0%, 12% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(7px); opacity: .75; }
  55%, 100% { transform: translateY(12px); opacity: 0; }
}
@keyframes trade-plug-connect {
  0%, 12% { transform: translateY(0); }
  54%, 100% { transform: translateY(-35px); }
}
@keyframes trade-cord-connect {
  0%, 12% { transform: scaleY(1); }
  54%, 100% { transform: scaleY(3.058824); }
}
@keyframes trade-bulb-on {
  0%, 55% { fill: #f7f5ef; }
  76%, 100% { fill: #f3cf78; }
}
@keyframes trade-glow-on {
  0%, 55% { opacity: 0; }
  85%, 100% { opacity: .5; }
}
@keyframes trade-rays-on {
  0%, 60% { opacity: 0; }
  85%, 100% { opacity: 1; }
}
@keyframes trade-power-on {
  0%, 54% { opacity: .3; }
  70%, 100% { opacity: 1; }
}
@media (max-width: 850px) {
  .trade-animation { border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .trade-animation { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .trade-animation *, .trade-animation::before, .trade-animation::after {
    animation: none !important;
    transition: none !important;
  }
}