/* The decorative cutout sits beside the headline on every screen size. */
  .hero-mascot {
    display: block;
    position: relative;
    z-index: 3;
    float: right;
    width: clamp(170px, 19vw, 205px);
    aspect-ratio: 560 / 646;
    margin: -18px -8px 4px 16px;
    pointer-events: none;
  }

  .hero-mascot__body {
    position: absolute;
    inset: 0;
    transform-origin: 50% 95%;
    animation: rux-mascot-bob 4s ease-in-out infinite;
  }

  .hero-mascot__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 14px rgba(4, 8, 29, .58));
  }

  .hero-mascot__frame--blink {
    opacity: 0;
    animation: rux-mascot-blink 5.8s linear infinite;
  }

  .hero-mascot__coin {
    position: absolute;
    z-index: 4;
    left: -12%;
    top: 20%;
    display: block;
    width: clamp(38px, 4vw, 54px);
    height: clamp(38px, 4vw, 54px);
    border: max(2px, .45vw) solid #fff1a8;
    border-radius: 17%;
    background: linear-gradient(135deg, #fff2a1 4%, #ffc434 32%, #f18e0f 72%, #ffd958 100%);
    box-shadow: inset 0 0 0 3px #d4810c, 0 3px 0 #8d4e08, 0 0 18px #ffdc7199;
    animation: rux-mascot-toss 3.2s ease-in-out infinite;
  }

  .hero-mascot__coin::before {
    content: "";
    position: absolute;
    inset: 29%;
    border: 2px solid #b5690d;
    background: #51300c;
    box-shadow: inset 0 1px 2px #160d04;
  }

  .hero-mascot__twinkle {
    position: absolute;
    z-index: 3;
    width: 8px;
    height: 8px;
    background: #fff8c2;
    box-shadow: 0 0 10px 3px #ffd95f;
    clip-path: polygon(50% 0, 61% 40%, 100% 50%, 61% 60%, 50% 100%, 39% 60%, 0 50%, 39% 40%);
    animation: rux-mascot-sparkle 3.2s ease-in-out infinite;
  }

  .hero-mascot__twinkle--one { left: 0; top: 12%; }
  .hero-mascot__twinkle--two { left: 31%; top: 0; animation-delay: -1.3s; }

  .hero__copy > p[data-hero-service-description] { clear: both; }

@media (min-width: 700px) and (max-width: 899px) {
  .hero-mascot { width: clamp(165px, 24vw, 220px); }
}

@media (max-width: 699px) {
  .hero-mascot { width: clamp(148px, 43vw, 205px); margin: -12px -4px 0 5px; }
}

@keyframes rux-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes rux-mascot-blink {
  0%, 87%, 89%, 92%, 94%, 100% { opacity: 0; }
  88%, 90%, 93% { opacity: 1; }
}

@keyframes rux-mascot-toss {
  0%, 12%, 88%, 100% { transform: translate(12px, 38px) rotate(-12deg) scale(.94); }
  44%, 55% { transform: translate(-10px, -22px) rotate(155deg) scale(1.08); }
  70% { transform: translate(3px, 10px) rotate(235deg) scale(.98); }
}

@keyframes rux-mascot-sparkle {
  0%, 100% { opacity: .2; transform: scale(.6); }
  45% { opacity: 1; transform: scale(1.4); }
}

@media (max-width: 359px) {
  .hero-mascot { width: min(37vw, 122px); margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascot__body,
  .hero-mascot__frame--blink,
  .hero-mascot__coin,
  .hero-mascot__twinkle { animation: none; }
  .hero-mascot__frame--blink { opacity: 0; }
  .hero-mascot__coin { transform: translate(0, 4px) rotate(-12deg); }
}