/* Mascots sit beside the content; the portal and calls to action stay unobscured. */
.bob-mascot {
  display: block;
  flex: none;
  width: 144px;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}
.bob-mascot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#main > .hero { position: relative; isolation: isolate; }
.hero .hero-actions { position: relative; }
.hero .bob-hero {
  position: absolute;
  width: 208px;
  left: calc(50% + 304px);
  bottom: 0;
  z-index: 0;
}
.bob-hero-video,
.bob-loop > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.bob-hero-animation.has-video > .bob-video-poster { opacity: 0; }
.bob-hero-animation.has-video > .bob-hero-video { opacity: 1; }
.bob-loop { position: relative; contain: layout; }
.bob-loop[hidden] { display: none !important; }
.bob-loop.has-video > img { opacity: 0; }
.bob-loop.has-video > video { opacity: 1; }
#what-we-do { position: relative; }
.wwd-heading-with-bob { display: contents; }
.wwd-heading { position: relative; }
.wwd-heading .bob-title-line { display: inline-block; position: relative; max-width: 100%; }
.wwd-heading-with-bob .bob-presenting {
  position: absolute;
  width: 112px;
  top: -1.1em;
  left: calc(100% + 24px);
}
#services .buying-copy { position: relative; }
#services .bob-buying-actions,
.getting-heading .getting-action {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.bob-buying-slot {
  display: block;
  position: absolute;
  width: 96px;
  height: 96px;
  left: calc(100% + 4px);
  bottom: -18px;
}
.bob-buying-slot .bob-mascot { width: 100%; }
.bob-hero-animation { contain: layout; }
@media (prefers-reduced-motion: reduce) {
  .bob-hero-animation.has-video > .bob-video-poster { opacity: 1; }
  .bob-hero-animation.has-video > .bob-hero-video { display: none; }
  .bob-loop.has-video > img { opacity: 1; }
  .bob-loop.has-video > video { display: none; }
}
#faqs .faq-heading-word {
  display: inline-block;
  position: relative;
}
#faqs .bob-faq {
  /* The resting hand sits at 77% across and 50% down the transparent frame. */
  position: absolute;
  width: 1.8em;
  left: -1.3em;
  top: -0.78em;
}
.getting-heading { position: relative; }
.getting-heading .bob-closing {
  position: absolute;
  width: 104px;
  right: calc(100% + 4px);
  bottom: -18px;
}
#reporting .portal-chat-header > .bob-assistant {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 0;
}
#reporting .portal-chat-sender > .bob-assistant {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
@media (max-width: 1200px) {
  .hero .bob-hero {
    width: 104px;
    left: calc(50% + 100px);
    bottom: -18px;
  }
  .wwd-heading-with-bob .bob-presenting { width: 96px; top: -1em; }
  .getting-heading .bob-closing {
    width: 88px;
  }
}
@media (max-width: 760px) {
  .wwd-heading .bob-title-line { display: inline; position: static; }
  .wwd-heading-with-bob .bob-presenting {
    width: 96px;
    top: -60px;
    left: min(calc(50% + 62px), calc(100% - 88px));
    right: auto;
  }
  #services .bob-buying-actions { display: contents; }
  .bob-buying-slot { width: 96px; height: 96px; left: auto; right: -8px; top: 16px; bottom: auto; }
  .bob-buying-slot [data-bob-step="2"],
  .bob-buying-slot [data-bob-step="3"] { top: -40px; }
  .bob-buying-slot [data-bob-step="3"] { left: 4px; }
  .hero .bob-hero { width: 72px; left: calc(50% + 82px); bottom: -6px; }
  .bob-mascot { width: 104px; }
  .getting-heading .getting-action { width: max-content; }
  .getting-heading .bob-closing { width: 104px; left: 100%; right: auto; bottom: -20px; }
}
@media (max-width: 389px) {
  .bob-buying-slot { width: 80px; height: 80px; }
  .bob-buying-slot [data-bob-step="2"] { width: 64px; top: -12px; margin-left: 28px; }
  .bob-buying-slot [data-bob-step="3"] { width: 68px; top: -16px; left: 0; margin-left: 24px; }
}
@media (max-width: 354px) {
  .bob-buying-slot [data-bob-step="3"] { width: 68px; top: 24px; margin-left: 20px; }
}
@media (max-width: 343px) {
  .bob-buying-slot [data-bob-step="2"] { width: 72px; top: 52px; margin-left: 16px; }
}
@media (max-width: 342px) {
  .bob-buying-slot [data-bob-step="0"] { top: -40px; }
}
@media (max-width: 340px) {
  .bob-buying-slot [data-bob-step="1"] { top: 20px; left: 8px; }
  .bob-buying-slot [data-bob-step="3"] { width: 100%; top: 0; margin-left: 0; }
}
@media (max-width: 360px) {
  .hero .bob-hero { width: 56px; bottom: 0; }
}