/* Company scenes: the X4 figure acts out a small story, then rests. */
.page-guide.page-guide-company{width:76px;height:110px}
.page-guide.page-guide-company .cg-prop.on{animation:none}
.page-guide-company .cg-outline,.page-guide-company .cg-hand{stroke:#13201E;stroke-width:.3;stroke-linecap:round;stroke-linejoin:round}
.page-guide-company .cg-hand{fill:#fff}
.page-guide-company .cg-line{stroke:#13201E;stroke-width:.4;stroke-linecap:round;stroke-linejoin:round}
.page-guide-company .cg-arm{fill:none;stroke:#13201E;stroke-width:.42;stroke-linecap:round;stroke-linejoin:round}
.page-guide-company .cg-trophy-spark,.page-guide-company .cg-plane-trail,.page-guide-company .cg-map-ring{opacity:0}
.page-guide-company .cg-swatch{transform-origin:12.95px 24.8px;transform:rotate(var(--fan-angle))}

/* Proud of the work: lift the cup, stretch onto tiptoes, then hug it again. */
.page-guide-company[data-prop="trophy"] .g-all{animation:cg-proud 6.8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-trophy-lift{transform-origin:10px 24px;animation:cg-lift 6.8s cubic-bezier(.25,.7,.3,1) infinite}
.page-guide-company .cg-prop.on .cg-trophy-spark{transform-origin:10px 10px;animation:cg-cheer 6.8s ease-out infinite}
@keyframes cg-proud{0%,38%,100%{transform:none}12%,27%{transform:translateY(-.7px) rotate(4deg) scale(.97,1.025)}32%{transform:scale(1.04,.98)}}
@keyframes cg-lift{0%,38%,100%{transform:none}12%,27%{transform:translate(1px,-8px) rotate(-8deg)}19%{transform:translate(1px,-8.5px) rotate(3deg)}32%{transform:translateY(.5px)}}
@keyframes cg-cheer{0%,10%,31%,100%{opacity:0;transform:scale(.7)}15%,25%{opacity:1;transform:scale(1)}}

/* Choosing a palette: fan out the chips, compare them, and close the fan. */
.page-guide-company[data-prop="swatches"] .cg-swatch{animation:cg-fan 7s ease-in-out infinite}
.page-guide-company[data-prop="swatches"] .g-eyes{animation:cg-choose 7s ease-in-out infinite}
.page-guide-company[data-prop="swatches"] .g-all{animation:cg-consider 7s ease-in-out infinite}
@keyframes cg-fan{0%,6%,60%,100%{transform:rotate(0deg)}18%,40%{transform:rotate(var(--fan-angle))}28%{transform:rotate(calc(var(--fan-angle) + 7deg))}}
@keyframes cg-choose{0%,60%,100%{transform:none}18%{transform:translate(-.45px,.35px)}35%{transform:translate(.45px,.35px)}46%{transform:translate(0,.35px)}}
@keyframes cg-consider{0%,55%,100%{transform:none}18%{transform:rotate(-4deg)}35%{transform:rotate(3deg)}}

/* Building a brand: place the last block and steady a briefly wobbling tower. */
.page-guide-company .cg-prop.on .cg-block-last{animation:cg-stack 7.6s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-tower{transform-origin:20px 30.2px;animation:cg-wobble 7.6s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-stack-hand{animation:cg-place-hand 7.6s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-stack-arm{transform-origin:16.5px 22px;animation:cg-place-arm 7.6s ease-in-out infinite}
.page-guide-company[data-prop="blocks"] .g-all{animation:cg-steady 7.6s ease-in-out infinite}
@keyframes cg-stack{0%,5%{transform:translate(-5px,4px)}14%{transform:translate(-2px,-3px)}23%,100%{transform:none}}
@keyframes cg-wobble{0%,23%,44%,100%{transform:none}28%{transform:rotate(8deg)}34%{transform:rotate(-5deg)}39%{transform:rotate(2deg)}}
@keyframes cg-place-hand{0%,5%{transform:translate(-5px,4px)}14%{transform:translate(-2px,-3px)}23%,100%{transform:none}}
@keyframes cg-place-arm{0%,5%{transform:rotate(25deg) scaleX(.65)}14%{transform:rotate(-45deg)}23%,100%{transform:none}}
@keyframes cg-steady{0%,23%,47%,100%{transform:none}28%{transform:rotate(-6deg)}34%{transform:rotate(4deg)}39%{transform:rotate(-2deg)}}

/* Reading the timeline: unroll a long scroll, follow it with the eyes, roll up. */
.page-guide-company .cg-prop.on .cg-scroll-sheet{transform-origin:14.8px 19.5px;animation:cg-unroll 8s cubic-bezier(.2,.7,.2,1) infinite}
.page-guide-company .cg-prop.on .cg-scroll-roll{animation:cg-roll-edge 8s cubic-bezier(.2,.7,.2,1) infinite}
.page-guide-company[data-prop="scroll"] .g-eyes{animation:cg-read 8s ease-in-out infinite}
.page-guide-company[data-prop="scroll"] .g-all{animation:cg-read-lean 8s ease-in-out infinite}
@keyframes cg-unroll{0%,5%,60%,100%{transform:scaleY(.2)}20%,44%{transform:scaleY(1)}}
@keyframes cg-roll-edge{0%,5%,60%,100%{transform:translateY(-8px)}20%,44%{transform:none}}
@keyframes cg-read{0%,60%,100%{transform:none}18%{transform:translate(-.35px,.3px)}30%{transform:translate(.4px,.45px)}42%{transform:translate(-.15px,.55px)}}
@keyframes cg-read-lean{0%,60%,100%{transform:none}20%,44%{transform:rotate(4deg)}}

/* The brand family: three brand-coloured balloons lift the figure off the ground. */
.page-guide-company[data-prop="balloons"] .g-all{animation:cg-float 7.4s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-balloons{transform-origin:17.6px 22.2px;animation:cg-balloon-sway 7.4s ease-in-out infinite}
.page-guide-company[data-prop="balloons"] .g-shadow{transform-origin:14.8px 34.15px;animation:cg-float-shadow 7.4s ease-in-out infinite}
.page-guide-company[data-prop="balloons"] .g-o{display:inline;opacity:0;animation:cg-surprise 7.4s ease-in-out infinite}
.page-guide-company[data-prop="balloons"] .g-smile{animation:cg-float-smile 7.4s ease-in-out infinite}
@keyframes cg-float{0%,50%,100%{transform:none}15%,28%{transform:translateY(-2.3px) rotate(-4deg)}38%{transform:translateY(-.8px) rotate(3deg)}44%{transform:scale(1.05,.97)}}
@keyframes cg-balloon-sway{0%,55%,100%{transform:none}15%{transform:rotate(6deg)}30%{transform:rotate(-5deg)}42%{transform:rotate(2deg)}}
@keyframes cg-float-shadow{0%,50%,100%{transform:none;opacity:1}15%,28%{transform:scaleX(.6);opacity:.4}38%{transform:scaleX(.85);opacity:.7}}
@keyframes cg-surprise{0%,7%,43%,100%{opacity:0}13%,34%{opacity:1}}
@keyframes cg-float-smile{0%,7%,43%,100%{opacity:1}13%,34%{opacity:0}}

/* An invitation: fold a paper plane, launch it upwards and follow its flight. */
.page-guide-company .cg-prop.on .cg-plane{transform-origin:13px 23px;animation:cg-send-plane 8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-send-arm{transform-origin:13px 22px;animation:cg-throw 8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-plane-trail{animation:cg-flight-trail 8s ease-in-out infinite}
.page-guide-company[data-prop="paperplane"] .g-all{animation:cg-send-lean 8s ease-in-out infinite}
.page-guide-company[data-prop="paperplane"] .g-eyes{animation:cg-follow-plane 8s ease-in-out infinite}
@keyframes cg-send-plane{0%,5%{transform:scaleX(.15);opacity:1}16%,23%,70%,100%{transform:none;opacity:1}42%{transform:translate(-3.5px,-8px) rotate(-20deg);opacity:1}49%{transform:translate(-5px,-11px) rotate(-25deg);opacity:0}56%{transform:scaleX(.15);opacity:0}}
@keyframes cg-throw{0%,20%,55%,100%{transform:none}32%,42%{transform:rotate(45deg)}}
@keyframes cg-flight-trail{0%,25%,53%,100%{opacity:0}34%,42%{opacity:.8}}
@keyframes cg-send-lean{0%,20%,57%,100%{transform:none}32%{transform:rotate(-7deg)}44%{transform:rotate(-3deg)}}
@keyframes cg-follow-plane{0%,20%,60%,100%{transform:none}34%,49%{transform:translate(-.45px,-.4px)}}

/* Finding our office: unfold the map, look left and right, point to the pin. */
.page-guide-company .cg-prop.on .cg-map{transform-origin:14.8px 25px;animation:cg-open-map 8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-map-pin{animation:cg-pin-drop 8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-map-finger{animation:cg-point 8s ease-in-out infinite}
.page-guide-company .cg-prop.on .cg-map-ring{transform-origin:18.8px 24px;animation:cg-found 8s ease-out infinite}
.page-guide-company[data-prop="map"] .g-all{animation:cg-map-search 8s ease-in-out infinite}
.page-guide-company[data-prop="map"] .g-eyes{animation:cg-map-eyes 8s ease-in-out infinite}
@keyframes cg-open-map{0%,5%{transform:scaleX(.3)}19%,100%{transform:none}}
@keyframes cg-pin-drop{0%,19%{transform:translateY(-4px);opacity:0}29%{transform:none;opacity:1}34%{transform:translateY(-.8px)}40%,100%{transform:none;opacity:1}}
@keyframes cg-point{0%,26%,65%,100%{transform:translate(2px,1px)}38%,49%{transform:none}43%{transform:translate(-.35px,-.3px)}}
@keyframes cg-found{0%,35%,57%,100%{opacity:0;transform:scale(.6)}41%{opacity:.9;transform:scale(.8)}54%{opacity:0;transform:scale(1.8)}}
@keyframes cg-map-search{0%,55%,100%{transform:none}16%{transform:rotate(-4deg)}28%{transform:rotate(4deg)}40%{transform:rotate(-2deg)}}
@keyframes cg-map-eyes{0%,60%,100%{transform:none}14%{transform:translate(-.45px,.4px)}28%,44%{transform:translate(.45px,.4px)}}

.page-guide-company[hidden],.page-guide-company[hidden] *{animation-play-state:paused!important}
@media(max-width:63.999rem){.about-page .ftr .legal{padding-inline-end:64px}}
@media(max-width:600px){.page-guide.page-guide-company{width:64px;height:94px}}
@media(prefers-reduced-motion:reduce){
  .page-guide-company .g-all,.page-guide-company .g-eyes{transform:none}
}