.mk-appr {
	--gold: #c9a15a;
	display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
/* Colour schemes: dark (for navy sections) and light. Individual colour controls override these. */
.mk-appr--dark { --head: #fff; --body: #9fb2c2; --lede: #9fb2c2; --track: rgba(255, 255, 255, 0.1); --glide: rgba(141, 163, 178, 0.75); --lbl: #8fa3b4; --lbl-on: #fff; --num-on: #9c7a36; --rule: #8da3b2; --quote: #c9d6e1; --cite: #8fa3b4; --center: #fff; }
.mk-appr--light { --head: #253f52; --body: #4d6b80; --lede: #76838f; --track: rgba(37, 63, 82, 0.1); --glide: rgba(37, 63, 82, 0.8); --lbl: #76838f; --lbl-on: #253f52; --num-on: #fff; --rule: #8da3b2; --quote: #4d6b80; --cite: #76838f; --center: #253f52; }

.mk-appr__copy .mk-label { color: var(--lbl); }
.mk-appr .mk-appr__h { color: var(--head); font-size: clamp(34px, 4.4vw, 58px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; margin-top: 18px; }
.mk-appr__h b, .mk-appr__h strong { font-weight: 650; }
.mk-appr__lede { color: var(--lede); font-size: clamp(17px, 1.5vw, 19.5px); max-width: 620px; margin-top: 18px; }

.mk-steps { list-style: none; margin: 36px 0 0; padding: 0; position: relative; min-height: 130px; }
.mk-steps li { border-top: 1px solid var(--rule); padding-top: 20px; }
.mk-steps h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--head); letter-spacing: -0.02em; }
.mk-steps p { color: var(--body); font-size: 16.5px; }
/* With JS the steps stack and crossfade; without it they all show as a normal list. */
.mk-appr.is-js .mk-steps li { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(8px); transition: opacity 0.45s, transform 0.45s; pointer-events: none; }
.mk-appr.is-js .mk-steps li.is-on { opacity: 1; transform: none; pointer-events: auto; }

.mk-ring-svg { display: block; width: 100%; max-width: 580px; height: auto; overflow: visible; margin: 0 auto; }
.mk-rt circle { fill: none; stroke: var(--track); stroke-width: 24; }
.mk-glide { fill: none; stroke: var(--glide); stroke-width: 24; transform-origin: 200px 200px; transform-box: view-box; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.mk-hits circle { fill: none; stroke: transparent; stroke-width: 60; cursor: pointer; outline: none; }
.mk-labels text { font: 500 10.5px var(--mk-mono); letter-spacing: 0.18em; text-transform: uppercase; fill: var(--lbl); cursor: pointer; transition: fill 0.4s; }
.mk-labels text.is-on { fill: var(--lbl-on); }
.mk-nums text { font: 500 11px var(--mk-mono); fill: var(--gold); text-anchor: middle; pointer-events: none; transition: fill 0.4s; }
.mk-nums text.is-on { fill: var(--num-on); }
.mk-center { font: 300 22px var(--mk-font); fill: var(--center); pointer-events: none; }

.mk-quote { border: 0 !important; padding: 0 !important; background: none; quotes: none; margin: 34px auto 0; max-width: 420px; text-align: center; color: var(--quote); font-size: 15.5px; font-style: italic; }
.mk-quote::before { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); margin: 0 auto 18px; opacity: 0.7; }
.mk-quote cite { display: block; font: 400 12px var(--mk-mono); font-style: normal; color: var(--cite); margin-top: 8px; letter-spacing: 0.06em; }

@media (max-width: 1080px) { .mk-appr { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .mk-glide, .mk-appr.is-js .mk-steps li { transition: none; } }