.mk-venn {
	--solid: #253f52;
	--edge: #253f52;
	--edge-on: #5e7a8e;
	--tri: #c9a15a;
	--icon: #253f52;
	--cap: #76838f;
	position: relative; width: 100%; max-width: 100%; margin: 0;
}
.mk-venn__stage { position: relative; }
.mk-venn__stage > svg { display: block; width: 100%; height: auto; overflow: visible; cursor: default; }

/* Settled state (what shows without JS or with reduced motion). JS overrides fill/stroke inline while animating. */
.mk-rings { filter: drop-shadow(0 18px 30px rgba(37, 63, 82, 0.1)); }
.mk-rings circle { fill: var(--solid); fill-opacity: 0.86; stroke: var(--edge-on); stroke-width: 1.8; stroke-opacity: 0.9; }
.mk-tri { fill: #fff; stroke: var(--tri); stroke-width: 2; stroke-linejoin: round; }
.mk-mark { transform: none !important; } /* centre logo only fades; never moves or scales */
.mk-mark image { pointer-events: none; }

/* Icons are plain HTML positioned over the SVG, so any Elementor icon (font or SVG) works. */
.mk-venn__icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); color: var(--icon); line-height: 1; opacity: 0; visibility: hidden; pointer-events: none; font-size: 40px; }
.mk-venn__icon svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.mk-venn__icon i { font-size: 1em; }
/* Uploaded ring images: sized from the same animated font-size, scaled by the "Image size" control (--img-k). */
.mk-venn__icon img { display: block; width: calc(1em * var(--img-k, 1)) !important; height: calc(1em * var(--img-k, 1)) !important; max-width: none !important; max-height: none !important; object-fit: contain; border: 0; box-shadow: none; }

.mk-venn figcaption { text-align: center; color: var(--cap); font-size: 16px; line-height: 1.5; margin: 10px auto 0; max-width: 420px; }
.mk-venn figcaption b { color: var(--cap-b, var(--mk-navy)); font-weight: 650; }