/* mm-next-link
   Prev/Next case-study navigation. Three columns: previous arrow + label
   on the left, center "browse all" link, next arrow + label on the right.
   Arrows glow brand blue on hover. Wraps around (case 5 → case 1).

   Legacy single-link variant (a.mm-next-link) still supported for any
   page that uses the older markup. */


/* ============================================================
   Prev/next case-study navigation card

   Single bordered rectangle, no internal dividers. Two stacked rows:
     row 1: title ("Browse more of our work")
     row 2: prev arrow button (left) + next arrow button (right)
   Wraps around: case 5 → case 1.
   ============================================================ */
.mm-work-nav {
	display: block;
	padding: 32px 36px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.01);
}

.mm-work-nav__title {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 22px;
}

.mm-work-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mm-work-nav__arrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.25s ease;
}

.mm-work-nav__arrow:hover { color: #fff; text-decoration: none; }

.mm-work-nav__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.20);
	font-size: 20px;
	line-height: 1;
	color: var(--mm-accent, #00B4FF);
	transition: border-color 0.25s ease, background 0.25s ease;
	flex: 0 0 auto;
}

.mm-work-nav__arrow:hover .mm-work-nav__chevron {
	border-color: var(--mm-accent, #00B4FF);
	background: rgba(0, 180, 255, 0.12);
}

.mm-work-nav__eyebrow {
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   Legacy single-link variant (kept for back-compat)
   ============================================================ */
a.mm-next-link {
	display: block;
	padding: 50px 40px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: #fff;
	transition: border-color 0.25s ease, background 0.25s ease;
	text-decoration: none;
}

a.mm-next-link:hover {
	border-color: var(--mm-accent);
	background: rgba(0, 180, 255, 0.04);
	text-decoration: none;
}

.mm-next-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 12px;
}

.mm-next-title {
	font-size: 28px;
	font-weight: 600;
	color: #fff;
}