/**
 * NTM Service Cards — everything scoped under .ntm-svc.
 * Sizes and colors are CSS variables set by the widget's Style settings.
 *
 * Arc: .ntm-svc__ring holds the resting angle, .ntm-svc__ring-load plays the load spin,
 * .ntm-svc__ring-hover plays the hover spin (and paints the arc). Icon: .ntm-svc__icon-load
 * (load flip) > .ntm-svc__icon-hover (hover flip). Separate elements = no jumps.
 */
.ntm-svc {
	--ntm-svc-cols: 5;
	--ntm-svc-gap: 16px;
	--ntm-svc-row-gap: 30px;
	--ntm-svc-band: 107px;
	--ntm-svc-circle: 113px;
	--ntm-svc-circle-top: 3px;
	--ntm-svc-circle-bw: 1px;
	--ntm-svc-circle-bc: #E6E6E6;
	--ntm-svc-arc-color: #DB0031;
	--ntm-svc-arc-w: 3px;
	--ntm-svc-arc-len: 90deg;
	--ntm-svc-builtin: 100px;
	--ntm-svc-stroke: 2;
	--ntm-svc-icon: 56px;
	--ntm-svc-arc-dur: 1.4s;
	--ntm-svc-arc-hover-dur: .9s;
	--ntm-svc-flip-dur: .9s;
	--ntm-svc-perspective: 360px;
	--ntm-svc-stagger: 150ms;
	--ntm-svc-ease: cubic-bezier(.65, 0, .35, 1);
	--ntm-svc-turn: -360deg; /* Clockwise. */
}
.ntm-svc--ccw { --ntm-svc-turn: 360deg; }
.ntm-svc *, .ntm-svc *::before, .ntm-svc *::after { box-sizing: border-box; }

/* ---------- Heading ---------- */
.ntm-svc .ntm-svc__header { margin: 0 0 28px; text-align: center; }
.ntm-svc .ntm-svc__eyebrow { margin: 0 0 5px; padding: 0; color: #ACACAC; }
.ntm-svc .ntm-svc__heading { margin: 0; padding: 0; color: #434343; }

/* ---------- Grid ---------- */
.ntm-svc .ntm-svc__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--ntm-svc-row-gap) var(--ntm-svc-gap);
}
.ntm-svc--natural-height .ntm-svc__grid { align-items: flex-start; }

/* ---------- Card ---------- */
.ntm-svc .ntm-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--ntm-svc-cols) - 1) * var(--ntm-svc-gap)) / var(--ntm-svc-cols));
	min-width: 0;
	background-color: #F0F0F0;
	color: inherit;
	text-decoration: none;
}
.ntm-svc a.ntm-svc__card:hover,
.ntm-svc a.ntm-svc__card:focus { color: inherit; text-decoration: none; }
.ntm-svc a.ntm-svc__card:focus-visible { outline: 2px solid var(--ntm-svc-arc-color); outline-offset: 3px; }

.ntm-svc .ntm-svc__top {
	position: relative;
	z-index: 1; /* The circle overlaps the lower area. */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: var(--ntm-svc-band);
	flex: 0 0 auto;
	background-color: #FFFFFF;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

/* ---------- Circle ---------- */
.ntm-svc .ntm-svc__circle {
	position: relative;
	flex: 0 0 auto;
	width: var(--ntm-svc-circle);
	height: var(--ntm-svc-circle);
	margin-top: var(--ntm-svc-circle-top);
	border-radius: 50%;
	background-color: #FFFFFF;
}
.ntm-svc .ntm-svc__circle::before {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--ntm-svc-circle-bw) solid var(--ntm-svc-circle-bc);
	border-radius: 50%;
	pointer-events: none;
}

/* Arc: a conic slice masked to a ring on the circle's edge. */
.ntm-svc .ntm-svc__ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	transform: rotate(var(--ntm-svc-arc-a, 90deg));
	pointer-events: none;
}
.ntm-svc .ntm-svc__ring-load,
.ntm-svc .ntm-svc__ring-hover {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 50%;
}
.ntm-svc .ntm-svc__ring-hover {
	background: conic-gradient(var(--ntm-svc-arc-color) 0deg var(--ntm-svc-arc-len), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ntm-svc-arc-w) - .6px), #000 calc(100% - var(--ntm-svc-arc-w)));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--ntm-svc-arc-w) - .6px), #000 calc(100% - var(--ntm-svc-arc-w)));
}
.ntm-svc--no-arc .ntm-svc__ring { display: none; }

/* Icon */
.ntm-svc .ntm-svc__icon {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #231F20;
	perspective: var(--ntm-svc-perspective);
	pointer-events: none;
}
.ntm-svc .ntm-svc__icon-load,
.ntm-svc .ntm-svc__icon-hover {
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
}
.ntm-svc .ntm-svc__glyph { display: flex; align-items: center; justify-content: center; line-height: 1; }
.ntm-svc .ntm-svc__glyph--builtin { width: var(--ntm-svc-builtin); height: var(--ntm-svc-builtin); }
.ntm-svc .ntm-svc__svg { display: block; width: 100%; height: 100%; overflow: visible; stroke-width: var(--ntm-svc-stroke); }
.ntm-svc .ntm-svc__glyph--icon { font-size: var(--ntm-svc-icon); }
.ntm-svc .ntm-svc__glyph--icon i { font-size: inherit; line-height: 1; color: inherit; }
.ntm-svc .ntm-svc__glyph--icon svg { width: 1em; height: 1em; fill: currentColor; }
.ntm-svc .ntm-svc__glyph--image,
.ntm-svc .ntm-svc__img { display: block; width: var(--ntm-svc-icon); height: auto; max-width: none; }

/* ---------- Text ---------- */
.ntm-svc .ntm-svc__body {
	flex: 1 1 auto;
	padding: 27px 12px 23px;
	text-align: center;
}
.ntm-svc .ntm-svc__title { margin: 0 0 16px; padding: 0; color: #434343; }
.ntm-svc .ntm-svc__text { margin: 0; color: #54595F; }
.ntm-svc .ntm-svc__text a { color: inherit; text-decoration: underline; }

/* ---------- Animations ---------- */
@keyframes ntm-svc-spin { from { transform: rotate(var(--ntm-svc-turn)); } to { transform: rotate(0deg); } }
@keyframes ntm-svc-spin-hover { from { transform: rotate(var(--ntm-svc-turn)); } to { transform: rotate(0deg); } }
@keyframes ntm-svc-flip-h { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes ntm-svc-flip-h-hover { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes ntm-svc-flip-v { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }
@keyframes ntm-svc-flip-v-hover { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

/* On load: .is-in is added to each card by the script when it comes into view (or on page load). */
.ntm-svc--arc-load .ntm-svc__card.is-in .ntm-svc__ring-load {
	animation: ntm-svc-spin var(--ntm-svc-arc-dur) var(--ntm-svc-ease) both;
	animation-delay: calc(var(--ntm-svc-k, 0) * var(--ntm-svc-stagger));
}
.ntm-svc--icon-load.ntm-svc--flip-h .ntm-svc__card.is-in .ntm-svc__icon-load {
	animation: ntm-svc-flip-h var(--ntm-svc-flip-dur) var(--ntm-svc-ease) both;
	animation-delay: calc(var(--ntm-svc-k, 0) * var(--ntm-svc-stagger));
}
.ntm-svc--icon-load.ntm-svc--flip-v .ntm-svc__card.is-in .ntm-svc__icon-load {
	animation: ntm-svc-flip-v var(--ntm-svc-flip-dur) var(--ntm-svc-ease) both;
	animation-delay: calc(var(--ntm-svc-k, 0) * var(--ntm-svc-stagger));
}

/* On hover: .is-hover is added by the script and kept until the spin / flip has finished,
   so moving the mouse away never cuts an animation short. */
.ntm-svc--arc-hover .ntm-svc__card.is-hover .ntm-svc__ring-hover { animation: ntm-svc-spin-hover var(--ntm-svc-arc-hover-dur) var(--ntm-svc-ease); }
.ntm-svc--icon-hover.ntm-svc--flip-h .ntm-svc__card.is-hover .ntm-svc__icon-hover { animation: ntm-svc-flip-h-hover var(--ntm-svc-flip-dur) var(--ntm-svc-ease); }
.ntm-svc--icon-hover.ntm-svc--flip-v .ntm-svc__card.is-hover .ntm-svc__icon-hover { animation: ntm-svc-flip-v-hover var(--ntm-svc-flip-dur) var(--ntm-svc-ease); }

@media (prefers-reduced-motion: reduce) {
	.ntm-svc--motion-safe .ntm-svc__ring-load,
	.ntm-svc--motion-safe .ntm-svc__ring-hover,
	.ntm-svc--motion-safe .ntm-svc__icon-load,
	.ntm-svc--motion-safe .ntm-svc__icon-hover { animation: none !important; }
}