#who .principles{gap:0;margin-top:72px;border-block:1px solid #cdd0d2}
#who .principle{min-width:0;min-height:0;padding:22px 28px 36px;border:0;background:transparent;box-shadow:none;position:relative}
#who .principle+.principle{border-left:1px solid #cdd0d2}
#who .principle:hover{transform:none}
#who .principle-art{position:relative;margin:0 -12px 24px;isolation:isolate}
#who .principle-art:before{content:"";position:absolute;inset:14% 6%;z-index:-1;background:radial-gradient(ellipse,#fff 0%,rgba(255,255,255,.5) 34%,transparent 70%);opacity:.75;transition:opacity .8s ease,transform 1.2s var(--ease)}
#who .principle-art svg{display:block;width:100%;height:auto;overflow:visible;transition:transform 1.2s var(--ease)}
#who .principle-copy{position:relative;padding-top:23px;border-top:1px solid #d0d2d4}
#who .principle-copy:before{content:"";position:absolute;left:0;top:-1px;width:30px;height:1px;background:#626568;transition:width 1s var(--ease)}
#who .principle h3{margin:0;color:#282a2c;font-size:27px;font-weight:500;letter-spacing:.04em}
#who .principle p{margin:17px 0 0;color:#66696c;font-size:15px;line-height:1.95;text-wrap:pretty}
#who .principle-art .orbit-turn{transform-origin:160px 115px;animation:principle-orbit 28s linear infinite}
#who .principle-art .orbit-reverse{animation-direction:reverse;animation-duration:36s}
#who .principle-art .core-breathe{transform-origin:160px 115px;animation:principle-breathe 7s ease-in-out infinite}
#who .principle-art .craft-upper{animation:principle-assemble-upper 8s ease-in-out infinite}
#who .principle-art .craft-lower{animation:principle-assemble-lower 8s ease-in-out infinite}
#who .principle-art .craft-glint{animation:principle-glint 8s ease-in-out infinite}
#who .principle-art .future-rise{animation:principle-rise 10s ease-in-out infinite}
#who .principle-art .horizon-wave{transform-origin:160px 163px;animation:principle-horizon 7s ease-in-out infinite;animation-delay:var(--wave-delay,0s)}
#who .principle-art [class]{animation-play-state:paused}
#who .principle.is-animating .principle-art [class]{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
  #who .principle:hover .principle-art svg{transform:translateY(-5px) scale(1.035)}
  #who .principle:hover .principle-art:before{opacity:1;transform:scale(1.12)}
  #who .principle:hover .principle-copy:before{width:100%}
}
@keyframes principle-orbit{to{transform:rotate(360deg)}}
@keyframes principle-breathe{50%{transform:scale(1.065);opacity:.78}}
@keyframes principle-assemble-upper{0%,100%{transform:translateY(-10px)}45%,60%{transform:translateY(3px)}}
@keyframes principle-assemble-lower{0%,100%{transform:translateY(10px)}45%,60%{transform:translateY(-3px)}}
@keyframes principle-glint{0%,100%{opacity:.3}45%,60%{opacity:1}}
@keyframes principle-rise{0%,100%{transform:translateY(5px)}50%{transform:translateY(-9px)}}
@keyframes principle-horizon{0%,100%{opacity:.5;transform:scaleX(.95)}50%{opacity:1;transform:scaleX(1.025)}}
@media(max-width:800px){
  #who .principles{margin-top:48px}
  #who .principle{display:grid;grid-template-columns:minmax(125px,.8fr) minmax(0,1fr);gap:28px;align-items:center;padding:28px 8px}
  #who .principle+.principle{border-left:0;border-top:1px solid #cdd0d2}
  #who .principle-art{margin:0}
  #who .principle-copy{padding:0;border:0}
  #who .principle-copy:before{display:none}
  #who .principle h3{font-size:25px}
  #who .principle p{margin-top:12px}
}
@media(max-width:480px){
  #who .principle{grid-template-columns:1fr;gap:2px;padding:10px 16px 32px}
  #who .principle-art{width:min(100%,270px);margin:0 auto}
  #who .principle-copy{padding-top:18px;border-top:1px solid #d0d2d4}
  #who .principle p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  #who .principle-art [class]{animation:none!important}
  #who .principle-art svg,#who .principle-art:before{transform:none!important}
}