/* How we work: a dial. The ring turns to bring each commitment to the top; the statement on the right changes with it. */
.vals { background: #ececef; overflow: hidden; }
.vals__title { margin-top: clamp(1.5rem, 3vw, 3rem); max-width: 14ch; font-size: clamp(2.2rem, 1rem + 4.4vw, 5.2rem); font-weight: 700; letter-spacing: -0.065em; line-height: .96; text-transform: uppercase; word-spacing: .1em; color: var(--ink-2); }
.dial { --D: clamp(300px, 32vw, 460px); --rot: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: clamp(2.4rem, 5vw, 5rem); }
.dial__wheel { position: relative; width: var(--D); height: var(--D); margin: 84px 48px 48px; }
.dial__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(11,11,14,.22); }
.dial__orbit--in { inset: 22%; border-style: solid; border-color: rgba(144,15,255,.18); }
.dial__ring { position: absolute; inset: 0; transform: rotate(calc(var(--rot) * 1deg)); transition: transform 1.1s cubic-bezier(.65,0,.25,1); }
.dial__node { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink-3); font-family: var(--ff-mono); font-weight: 600; font-size: .95rem; box-shadow: 0 10px 28px -12px rgba(11,11,14,.4);
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--D) / -2)) rotate(calc((var(--a) + var(--rot)) * -1deg)); transition: transform 1.1s cubic-bezier(.65,0,.25,1), background-color .6s, color .6s, width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease); }
.dial__node.is-on { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--purple); color: #fff; font-size: 1.15rem; box-shadow: 0 0 0 10px rgba(144,15,255,.14), 0 18px 40px -10px rgba(144,15,255,.6); }
.dial__core { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; margin: -19% 0 0 -19%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(70% 70% at 30% 20%, #6a0bbf, #1d0838); box-shadow: 0 30px 60px -24px rgba(43,10,85,.7); animation: dialBreath 5s ease-in-out infinite; }
.dial__core img { width: 42%; height: auto; }
@keyframes dialBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.dial__pointer { position: absolute; left: 50%; top: -76px; width: 2px; height: 22px; background: var(--purple); transform: translateX(-1px); }
.dial__pointer::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--purple); }

.dial__tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.dial__tab { padding: .55rem 1.1rem; border-radius: 999px; background: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-3); transition: background-color .4s, color .4s; }
.dial__tab:hover { color: var(--ink-2); }
.dial__tab.is-on { background: var(--ink); color: #fff; }
.dial__stage { position: relative; min-height: clamp(220px, 20vw, 280px); margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.dial__panel { position: absolute; inset: 0 auto auto 0; visibility: hidden; }
.dial__panel.is-on { visibility: visible; }
.dial__panel h3 { font-size: clamp(2.4rem, 1rem + 4.4vw, 5.4rem); font-weight: 700; letter-spacing: -0.07em; line-height: .94; text-transform: uppercase; color: var(--ink-2); max-width: 11ch; }
.dial__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; margin-right: .16em; }
.dial__w > span { display: inline-block; transform: translateY(112%); transition: transform .5s cubic-bezier(.6,0,.9,.4); }
.dial__panel.is-on .dial__w > span { transform: none; transition: transform 1s var(--ease); transition-delay: calc(var(--k, 0) * 90ms + .35s); }
.dial__panel p { margin-top: 1.2rem; max-width: 42ch; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); letter-spacing: -0.025em; line-height: 1.5; color: var(--ink-3); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease); }
.dial__panel.is-on p { opacity: 1; transform: none; transition: opacity .8s .7s, transform 1s var(--ease) .7s; }
.dial__bar { display: block; height: 2px; margin-top: 1.4rem; background: rgba(11,11,14,.12); }
.dial__bar i { display: block; height: 100%; width: 0; background: var(--purple); }
.dial.is-run .dial__bar i { animation: dialFill var(--dl-dur, 6.5s) linear forwards; }
.dial.is-paused .dial__bar i { animation-play-state: paused; }
@keyframes dialFill { to { width: 100%; } }
@media (max-width: 900px) { .dial { grid-template-columns: 1fr; justify-items: center; } .dial__body { width: 100%; } .dial__stage { min-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .dial__ring, .dial__node, .dial__core { transition: none; animation: none; } .dial__w > span, .dial__panel p { transition: none; } .dial__bar i { animation: none; width: 100%; } }
.dial__body { min-width: 0; max-width: 100%; }