/* Latest creative work gallery (3.16.0) */
.mp-creative {
	position: relative;
	padding-block: clamp(64px, 8vw, 112px);
	background:
		radial-gradient(circle at 8% 12%, rgba(231, 31, 47, .05), transparent 24rem),
		radial-gradient(circle at 92% 88%, rgba(27, 103, 222, .06), transparent 26rem);
	scroll-margin-top: calc(var(--mp-header-height, 92px) + 12px);
}
.mp-creative--case { padding-block: clamp(48px, 6vw, 88px); }
.mp-creative__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	align-items: end;
	gap: clamp(24px, 6vw, 90px);
	margin-bottom: clamp(28px, 4vw, 48px);
}
.mp-creative__header h2 { margin: 10px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.15; }
.mp-creative__header p { margin: 0; color: var(--mp-muted); line-height: 1.8; }

.mp-creative__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.mp-creative__filters button {
	padding: 9px 16px;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mp-ink);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
}
.mp-creative__filters button:hover { border-color: var(--mp-ink); }
.mp-creative__filters button.is-active { background: var(--mp-ink); border-color: var(--mp-ink); color: #fff; }

.mp-creative__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mp-creative--case .mp-creative__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mp-creative__item[hidden] { display: none; }
.mp-creative__item figure { margin: 0; }
.mp-creative__open {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mp-line-soft);
	border-radius: 18px;
	background: #f1f3f2;
	box-shadow: 0 14px 44px rgba(37, 39, 43, .07);
	cursor: zoom-in;
}
.mp-creative__open img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 520ms cubic-bezier(.2, .75, .2, 1);
}
.mp-creative__open:hover img,
.mp-creative__open:focus-visible img { transform: scale(1.035); }
.mp-creative__open:focus-visible { outline: 3px solid var(--mp-blue); outline-offset: 3px; }
.mp-creative__item figcaption { display: grid; gap: 3px; padding: 12px 4px 0; }
.mp-creative__item figcaption strong { font-size: .86rem; }
.mp-creative__item figcaption strong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mp-line); }
.mp-creative__item figcaption strong a:hover { border-color: var(--mp-red); }
.mp-creative__item figcaption span { color: var(--mp-muted); font-size: .76rem; line-height: 1.5; }
.mp-creative__more { display: inline-flex; margin-top: 26px; }

/* Lightbox */
.mp-creative__lightbox {
	width: min(96vw, 1100px);
	max-width: none;
	max-height: 96vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.mp-creative__lightbox::backdrop { background: rgba(10, 12, 14, .88); backdrop-filter: blur(4px); }
.mp-creative__lightbox figure { margin: 0 auto; display: grid; justify-items: center; gap: 12px; }
.mp-creative__lightbox img {
	display: block;
	width: auto;
	max-width: min(90vw, 760px);
	max-height: 84vh;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.mp-creative__lightbox figcaption { color: #fff; font-size: .86rem; text-align: center; }
.mp-creative__close,
.mp-creative__nav {
	position: fixed;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.mp-creative__close { top: 18px; inset-inline-end: 18px; }
.mp-creative__nav { top: 50%; transform: translateY(-50%); }
.mp-creative__nav--prev { left: 18px; }
.mp-creative__nav--next { right: 18px; }
.mp-creative__close:hover,
.mp-creative__nav:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 1100px) {
	.mp-creative__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.mp-creative__header { grid-template-columns: 1fr; gap: 12px; }
	.mp-creative__grid,
	.mp-creative--case .mp-creative__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-creative__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
	.mp-creative__filters button { flex: 0 0 auto; }
	.mp-creative__nav { top: auto; bottom: 18px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mp-creative__open img { transition: none; }
}

/* Live-website screens (case studies without a "before" state) */
.mp-case-screens { padding-block: clamp(56px, 7vw, 100px); scroll-margin-top: calc(var(--mp-header-height, 92px) + 12px); }
.mp-case-screens__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
	align-items: end;
	gap: clamp(24px, 6vw, 90px);
	margin-bottom: clamp(30px, 4vw, 52px);
}
.mp-case-screens__intro h2 { margin: 10px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.15; }
.mp-case-screens__intro p { margin: 0 0 16px; color: var(--mp-muted); line-height: 1.8; }
.mp-case-screens__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mp-case-screen { margin: 0; }
.mp-case-screen__frame {
	overflow: hidden;
	border: 1px solid var(--mp-line);
	border-radius: 16px;
	background: #eef1ee;
	box-shadow: 0 22px 60px rgba(37, 39, 43, .09);
}
.mp-case-screen__bar { display: flex; gap: 6px; padding: 10px 14px; }
.mp-case-screen__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d8d5; }
.mp-case-screen__bar i:nth-child(1) { background: #ff5f57; }
.mp-case-screen__bar i:nth-child(2) { background: #febc2e; }
.mp-case-screen__bar i:nth-child(3) { background: #28c840; }
.mp-case-screen__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1135 / 678; object-fit: cover; }
.mp-case-screen figcaption { padding: 16px 4px 0; }
.mp-case-screen figcaption strong { display: block; margin-bottom: 4px; }
.mp-case-screen figcaption span { color: var(--mp-muted); font-size: .86rem; line-height: 1.7; }
.mp-case-screens__mobile {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 220px));
	justify-content: center;
	gap: clamp(16px, 3vw, 44px);
	margin-top: clamp(40px, 5vw, 70px);
}
.mp-case-phone { margin: 0; }
.mp-case-phone__frame {
	padding: 9px;
	border-radius: 34px;
	background: #111614;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}
.mp-case-phone__frame img { display: block; width: 100%; height: auto; aspect-ratio: 469 / 848; border-radius: 26px; object-fit: cover; }
.mp-case-phone figcaption { padding-top: 12px; color: var(--mp-muted); font-size: .8rem; text-align: center; }

@media (max-width: 860px) {
	.mp-case-screens__intro { grid-template-columns: 1fr; gap: 12px; }
	.mp-case-screens__list { grid-template-columns: 1fr; }
	.mp-case-screens__mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.mp-case-phone__frame { padding: 5px; border-radius: 20px; }
	.mp-case-phone__frame img { border-radius: 16px; }
}