/* Five fixed perspectives, connected by moving light. Labels never rotate. */
.opportunity-compass  {
  background:radial-gradient(ellipse at 50% 55%,#e6e1d5 0%,#f2efe7 43%,#faf9f5 80%);
  padding-top:60px;
  padding-bottom:50px;
  text-align:left;
  overflow:hidden;
  scroll-margin-top:80px;
}
.compass-heading  {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  max-width:1100px;
  margin:0 auto
}
.compass-heading .eyebrow  {
  margin-bottom:25px
}
.compass-heading h2  {
  font:400 clamp(35px,4.2vw,58px)/1.1 var(--serif);
  margin:0;
  color:#414b44
}
.compass-heading h2 em  {
  color:#927957;
  font-weight:400
}
.compass-instruction  {
  font:12px/1.8 var(--sans);
  color:#706b5e;
  border-left:1px solid #b9aa9165;
  padding-left:24px;
  margin:0 0 8px
}
.compass-instruction span  {
  color:#969082;
  font-size:10px
}
.compass-scene  {
  position:relative;
  max-width:1100px;
  height:650px;
  margin:35px auto 0;
  isolation:isolate
}
.compass-network  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible
}
.compass-orbit  {
  fill:none;
  stroke:#b59d7838;
  stroke-width:1;
  stroke-dasharray:2 11;
  animation:orbit-light 32s linear infinite;
  animation-play-state:paused
}
.compass-orbit.secondary  {
  stroke:#b59d781f;
  stroke-dasharray:95 45;
  animation-direction:reverse;
  animation-duration:50s
}
.compass-wire  {
  fill:none;
  stroke:#a5937445;
  stroke-width:1
}
.compass-tracer  {
  fill:none;
  stroke:#ad8c5a;
  stroke-width:1.5;
  stroke-dasharray:12 650;
  stroke-dashoffset:650;
  opacity:0;
  animation:connection-light 3.8s linear infinite;
  animation-play-state:paused
}
.compass-tracer.is-current  {
  opacity:.9
}
.compass-hub  {
  position:absolute;
  left:50%;
  top:48.46%;
  transform:translate(-50%,-50%);
  width:318px;
  height:318px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 20%,#fffdf7,#f3f0e7);
  border:1px solid #c5b79880;
  box-shadow:0 24px 70px #6c604912,inset 0 0 35px #fff8ea;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px 32px;
  z-index:2
}
.hub-rim  {
  position:absolute;
  inset:-13px;
  border-radius:50%;
  border:1px solid #b5a17c38;
  pointer-events:none
}
.hub-rim:before  {
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid transparent;
  border-top-color:#b79b6e;
  border-bottom-color:#b79b6e55;
  border-radius:50%;
  animation:hub-orbit 24s linear infinite;
  animation-play-state:paused
}
.hub-rim:after  {
  content:'';
  position:absolute;
  width:5px;
  height:5px;
  background:#ae8b55;
  border-radius:50%;
  top:46px;
  right:41px;
  box-shadow:0 0 12px #b68d4c70
}
.hub-eyebrow  {
  font:7px/1.6 var(--sans);
  letter-spacing:.2em;
  color:#93846a
}
.hub-fit  {
  font:400 35px/1.2 var(--serif);
  color:#465044;
  margin:12px 0 17px
}
.hub-fit em  {
  color:#a3855d;
  font-weight:400
}
.hub-current  {
  font:500 10px var(--sans);
  color:#8b7657
}
.compass-hub .alignment-description  {
  font:13px/1.65 var(--sans);
  color:#596055;
  max-width:240px;
  margin:11px 0 0;
  min-height:65px
}
.hub-counter  {
  font:8px var(--sans);
  letter-spacing:.2em;
  color:#9d978a;
  margin-top:14px
}
.hub-insight.is-changing  {
  animation:insight-arrival .65s both
}
.compass-factor  {
  position:absolute;
  left:var(--node-x);
  top:var(--node-y);
  transform:translate(-50%,-50%);
  width:190px;
  min-height:82px;
  background:#fdfbf5e8;
  border:1px solid #ccc3af;
  box-shadow:0 10px 30px #6e644b08;
  border-radius:4px;
  padding:16px 18px;
  display:flex;
  gap:14px;
  align-items:center;
  text-align:left;
  z-index:3;
  color:#4c564c;
  overflow:hidden;
  transition:background .6s,border-color .6s,box-shadow .6s,color .6s;
  animation:node-breathe 6s ease-in-out var(--float-delay) infinite;
  animation-play-state:paused;
  cursor:pointer
}
.compass-factor:hover  {
  border-color:#a88a5b;
  box-shadow:0 15px 40px #6e644b15
}
.compass-factor:focus-visible  {
  outline:2px solid #9e835c;
  outline-offset:6px
}
.compass-factor[aria-pressed=true]  {
  background:linear-gradient(130deg,#6c685b,#4f594e);
  border-color:#788070;
  color:#faf6eb;
  box-shadow:0 14px 35px #4f594e20
}
.compass-icon  {
  height:28px;
  width:28px;
  flex-shrink:0;
  color:#a48c65
}
.compass-icon svg  {
  height:100%;
  width:100%
}
.compass-factor[aria-pressed=true] .compass-icon  {
  color:#e4c99f
}
.compass-label small  {
  display:block;
  font:7px var(--sans);
  letter-spacing:.12em;
  color:#9a8c76;
  margin-bottom:7px
}
.compass-label strong  {
  display:block;
  font:400 14px var(--sans);
  white-space:nowrap
}
.compass-factor[aria-pressed=true] small  {
  color:#d6c7ac
}
.compass-node-progress  {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:100%;
  background:#d9bd8b;
  transform:scaleX(0);
  transform-origin:left
}
.compass-factor[aria-pressed=true] .compass-node-progress  {
  animation:node-progress 5.2s linear both;
  animation-play-state:paused
}
.compass-running .compass-factor,.compass-running .compass-tracer,.compass-running .compass-orbit,.compass-running .hub-rim:before,.compass-running .compass-node-progress  {
  animation-play-state:running
}
.compass-interacting .compass-factor[aria-pressed=true] .compass-node-progress  {
  animation:none;
  transform:scaleX(1)
}
.compass-bottom  {
  max-width:1100px;
  margin:12px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid #b8ad9640;
  padding-top:26px
}
.compass-bottom>span  {
  font:8px/1.7 var(--sans);
  letter-spacing:.14em;
  color:#918771
}
.compass-bottom a  {
  font-size:12px
}
@keyframes orbit-light  {
  to {
    stroke-dashoffset:-520
  }
}
@keyframes connection-light  {
  to {
    stroke-dashoffset:-15
  }
}
@keyframes hub-orbit  {
  to {
    transform:rotate(360deg)
  }
}
@keyframes node-breathe  {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -5px
  }
}
@keyframes node-progress  {
  to {
    transform:scaleX(1)
  }
}
@keyframes insight-arrival  {
  from {
    opacity:0;
    transform:translateY(9px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:1000px) and (min-width:701px) {
  .compass-factor {
    width:157px;
    padding:14px 12px;
    gap:10px
  }
  .compass-label strong {
    font-size:12px
  }
  .compass-hub {
    width:285px;
    height:285px;
    padding:35px 26px
  }
  .hub-fit {
    font-size:30px
  }
  .compass-scene {
    height:620px
  }
}
@media(max-width:700px) {
  .opportunity-compass {
    padding-top:60px;
    padding-bottom:35px
  }
  .compass-heading {
    display:block
  }
  .compass-heading h2 {
    font-size:36px
  }
  .compass-instruction {
    margin-top:25px;
    padding-left:16px
  }
  .compass-scene {
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:35px;
    padding-top:20px
  }
  .compass-network {
    display:none
  }
  .compass-hub {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:285px;
    max-width:100%;
    height:285px;
    grid-column:1/-1;
    justify-self:center;
    margin:0 0 30px;
    padding:35px 26px
  }
  .compass-factor {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    min-height:78px;
    padding:14px 11px;
    gap:10px;
    animation:none
  }
  .compass-factor:last-child {
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center
  }
  .compass-label strong {
    font-size:12px
  }
  .compass-label small {
    font-size:6px
  }
  .compass-icon {
    width:23px;
    height:23px
  }
  .compass-bottom {
    flex-direction:column;
    align-items:start;
    margin-top:30px
  }
  .compass-bottom>span {
    font-size:7px;
    letter-spacing:.08em
  }
}
@media(prefers-reduced-motion:reduce) {
  .opportunity-compass *,.opportunity-compass *:before {
    animation:none!important;
    transition:none!important
  }
  .compass-factor {
    translate:none
  }
  .compass-node-progress {
    display:none
  }
}
.motion-paused .opportunity-compass *,.motion-paused .opportunity-compass *:before {
  animation:none!important;
  transition:none!important
}