/* Massaa Toolkit — Related services. */
.ms.ms-related {
	--ms-ink: #3e0b27;
	--ms-pink: #e30e7d;
	--ms-font-display: "Barlow Condensed", "IBM Plex Sans Arabic", sans-serif;
	--ms-font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
	--ms-pad: 40px;
	background: #fff;
	color: var(--ms-ink);
	font-family: var(--ms-font-body);
	padding: 96px 0;
	text-align: left;
}
.ms.ms-related *, .ms.ms-related *::before, .ms.ms-related *::after { box-sizing: border-box; }
.ms.ms-related :where(h2, ul, li) { margin: 0; padding: 0; list-style: none; }
.ms-related .ms-rl__wrap { max-width: 1300px; margin: 0 auto; padding: 0 var(--ms-pad); }
.ms.ms-related .ms-rl__title { margin-bottom: 36px; color: var(--ms-ink); font-family: var(--ms-font-display); font-size: clamp(40px, 4.4vw, 60px); font-weight: 600; line-height: 1; text-transform: none; }
.ms-related .ms-rl__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .ms-related .ms-rl__grid { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); } }
.ms.ms-related .ms-rl__card { display: flex; flex-direction: column; height: 100%; color: var(--ms-ink); text-decoration: none; }
.ms-related .ms-rl__pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: #fbeef4; }
.ms-related .ms-rl__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ms-related .ms-rl__card:hover .ms-rl__pic img { transform: scale(1.05); }
.ms.ms-related .ms-rl__name { margin-top: 16px; color: var(--ms-ink); font-family: var(--ms-font-display); font-size: 26px; font-weight: 600; line-height: 1.1; }
.ms.ms-related .ms-rl__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ms-pink); font-size: 15px; font-weight: 600; }
.ms-related .ms-rl__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ms-related .ms-rl__card:hover .ms-rl__more svg { transform: translateX(3px); }
.ms.ms-related .ms-rl__card:focus-visible { outline: 2px solid var(--ms-pink); outline-offset: 4px; border-radius: 20px; }
@media (max-width: 600px) {
	.ms.ms-related { --ms-pad: 20px; padding: 64px 0; }
	.ms-related .ms-rl__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ms.ms-related .ms-rl__name { font-size: 21px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ms.ms-related * { transition: none !important; } }