/* Myrtle Values Orbit (mck-about-values): from site/about/v1/style.css (.cv / .orbit / .val). */
.mck-about-values.cv { background: var(--ink); color: rgba(255, 254, 253, .78); overflow: hidden; }
.mck-about-values.cv::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-White-Tile.svg") 0 0 / 70px 105px repeat; opacity: .05; -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(50% 50% at 50% 50%, transparent 30%, #000 100%); pointer-events: none; }
.mck-about-values .orbit { position: relative; height: var(--orbit-h, 920px); margin-top: 8px; }
.mck-about-values .orbit-ring { position: absolute; left: 50%; top: 50%; width: 66%; height: 74%; transform: translate(-50%, -50%); overflow: visible; }
.mck-about-values .orbit-ring ellipse { fill: none; stroke: rgba(255, 254, 253, .16); stroke-width: 1; stroke-dasharray: 3 7; }
@media (prefers-reduced-motion: no-preference) { .mck-about-values .orbit-ring ellipse { animation: mckDash 40s linear infinite; } }
@keyframes mckDash { to { stroke-dashoffset: -400; } }
.mck-about-values .orbit-core { position: absolute; left: 50%; top: 50%; width: 330px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 30%, #11727E, var(--teal) 55%, var(--teal-night)); box-shadow: 0 0 0 14px rgba(255, 254, 253, .04), 0 0 0 30px rgba(255, 254, 253, .025), 0 40px 80px -30px rgba(0, 0, 0, .6); }
.mck-about-values .orbit-core h2 { position: relative; z-index: 1; color: var(--white); max-width: 7ch; font-size: clamp(40px, 3.2vw, 48px); line-height: 1; font-weight: 300; margin-top: -14%; }
.mck-about-values .orbit-core .oc-shape { position: absolute; width: 34%; left: 33%; bottom: 9%; opacity: 0; transform: scale(.5) rotate(-20deg); transition: opacity .5s var(--ease), transform .8s var(--spring); }
.mck-about-values .orbit-core .oc-shape.is-on { opacity: 1; transform: none; }
.mck-about-values .orbit-core h2, .mck-about-values .orbit-core .oc-mark { transition: transform .8s var(--ease); }
.mck-about-values .orbit-core.has-shape h2 { transform: translateY(-18px); }
.mck-about-values .orbit-core .oc-mark { position: absolute; width: 14%; left: 43%; bottom: 14%; opacity: .9; transition: opacity .4s var(--ease); }
.mck-about-values .orbit-core.has-shape .oc-mark { opacity: 0; }
.mck-about-values .val { position: absolute; left: var(--x); top: var(--y); width: var(--val-w, 290px); transform: translate(-50%, -50%); padding: 26px 26px 28px; border-radius: 26px; background: rgba(255, 254, 253, .04); border: 1px solid rgba(255, 254, 253, .1); transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.mck-about-values .val:hover, .mck-about-values .val:focus-within { border-color: rgba(249, 120, 73, .7); background: rgba(255, 254, 253, .07); }
.mck-about-values .val img { height: 30px; width: auto; margin-bottom: 18px; transition: transform .8s var(--spring); }
.mck-about-values .val:hover img { transform: rotate(-14deg) scale(1.12); }
.mck-about-values .val h3 { color: var(--white); font-size: 23px; font-weight: 300; margin-bottom: 10px; }
.mck-about-values .val p { font-size: 15px; font-weight: 300; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .js .mck-about-values .orbit .val { opacity: 0; scale: .85; transition: opacity .9s var(--ease), scale 1s var(--spring), border-color .5s, background-color .5s; transition-delay: calc(var(--k) * 120ms + 300ms), calc(var(--k) * 120ms + 300ms), 0s, 0s; }
  .js .mck-about-values .orbit.is-in .val { opacity: 1; scale: 1; }
  .js .mck-about-values .orbit .orbit-core { opacity: 0; scale: .7; transition: opacity 1s var(--ease), scale 1.2s var(--spring); }
  .js .mck-about-values .orbit.is-in .orbit-core { opacity: 1; scale: 1; }
}
@media (max-width: 1080px) {
  .mck-about-values .orbit { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .mck-about-values .orbit-ring { display: none; }
  .mck-about-values .orbit-core { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; justify-self: center; width: 280px; margin-bottom: 32px; }
  .mck-about-values .val { position: relative; left: auto; top: auto; width: auto; transform: none; }
}
@media (max-width: 767px) {
  .mck-about-values .orbit { grid-template-columns: 1fr; }
  .mck-about-values .orbit-core { width: 240px; }
}