/* Graphic accents inspired by the supplied reference, in Joyal's blue palette. */
.hero-visual:before { content: ''; position: absolute; width: 62%; aspect-ratio: 1; right: -2%; top: -2%; border: 14px solid #7e9fff; border-radius: 50%; opacity: .35; z-index: 0; pointer-events: none; }
.hero-floating-label { border-radius: 6px; transform: rotate(-4deg); box-shadow: 6px 7px 0 #678fff28, 0 14px 35px #02050b44; }
.hero-floating-label .live-icon { border-radius: 3px; }
.hero-foot .hero-scroll { color: #a9bbdc; }
.about-lead { position: relative; isolation: isolate; }
.about-lead h2 { position: relative; z-index: 1; }
.about-lead h2 i { display: inline-block; padding: 0 .13em .04em; margin-left: -.02em; background: #6686ff; color: #f5f8ff; border-radius: 8px; box-shadow: 8px 8px 0 #375ba82b; transform: rotate(-1.5deg); }
.hello-sticker { position: absolute; top: -18px; left: min(64%, 265px); padding: 7px 13px; color: #0b1a35; background: #accbff; border-radius: 6px; font: 600 18px/1.2 var(--heading); transform: rotate(-8deg); box-shadow: 4px 5px 0 #4e76bd36; animation: label-float 7s ease-in-out infinite; }
.creative-cursor { position: absolute; top: 117px; left: min(75%, 355px); width: 43px; height: 43px; fill: #86a8ff; filter: drop-shadow(0 0 8px #668fff55); transform: rotate(-12deg); animation: cursor-float 8s ease-in-out infinite; pointer-events: none; }
.statement p > span:first-child { padding: 0 .07em; border-radius: 5px; background: #6480ff; color: #f5f8ff; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tool-tile img { transition: translate .25s ease; }
.tool-tile:hover img { translate: 0 -3px; }
@keyframes cursor-float { 0%, 100% { translate: 0 0; } 50% { translate: -5px 7px; } }
@media (max-width: 760px) {
  .hero-visual:before { border-width: 10px; right: 0; }
  .hello-sticker { left: min(68%, 230px); top: -15px; font-size: 15px; padding: 6px 10px; }
  .creative-cursor { width: 34px; height: 34px; top: 89px; left: min(82%, 295px); }
  .about-lead h2 i { border-radius: 6px; box-shadow: 6px 6px 0 #375ba82b; }
}
@media (prefers-reduced-motion: reduce) { .hello-sticker, .creative-cursor { animation: none; } .tool-tile img { transition: none; } }

/* Give the portrait, caption and timeline their own rows. */
.hero { padding-bottom: 35px; }
.hero-visual { --portrait-height: 553px; height: auto; }
.hero-photo-wrap { position: relative; inset: auto; height: var(--portrait-height); margin: 16px 18px 0 0; }
.hero-visual > .image-caption { position: relative; display: block; inset: auto; margin: 13px 0 16px 20px; color: #a9c6fa; font-size: 10px; line-height: 1.5; letter-spacing: .14em; }
.hero-timeline { position: relative; inset: auto; margin: 0 0 12px 16%; transform: rotate(-2deg); }
.hero-index { bottom: 12px; }
@media (min-width: 1500px) { .hero-visual { --portrait-height: 613px; } }
@media (min-width: 761px) and (max-width: 1100px) { .hero-visual { --portrait-height: 508px; } }
@media (max-width: 760px) { .hero-visual { --portrait-height: 403px; } .hero-photo-wrap { margin-right: 12px; } .hero-visual > .image-caption { margin-left: 12px; font-size: 9px; } .hero-timeline { margin-left: 10%; } }