:root {
	--ms-ink: #123353;
	--ms-blue: #1261a6;
	--ms-cyan: #20bdb8;
	--ms-ice: #f2f8fa;
	--ms-line: #dce9ee;
	--ms-muted: #667b8c;
	--ms-white: #ffffff;
}

.ms-case-study {
	color: var(--ms-ink);
	background: var(--ms-white);
}

.ms-case-study h1,
.ms-case-study h2 {
	color: var(--ms-ink);
	letter-spacing: -.025em;
}

.ms-case-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 4vw, 54px) 0 clamp(58px, 8vw, 104px);
	background:
		radial-gradient(circle at 8% 18%, rgba(32,189,184,.16), transparent 29%),
		linear-gradient(145deg, #fff 0%, #f5fbfc 62%, #eaf5f7 100%);
}

.ms-case-hero::after {
	content: "";
	position: absolute;
	inset-inline-start: -9vw;
	bottom: -14vw;
	width: 36vw;
	aspect-ratio: 1;
	border: 1px solid rgba(18,97,166,.12);
	border-radius: 50%;
	box-shadow: 0 0 0 46px rgba(18,97,166,.035), 0 0 0 92px rgba(18,97,166,.025);
}

.ms-case-heading,
.ms-case-hero__copy,
.ms-case-hero__visual {
	position: relative;
	z-index: 1;
}

.ms-case-heading {
	margin-bottom: clamp(34px, 5vw, 58px) !important;
	padding-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--ms-line);
}

.ms-case-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ms-muted);
}

.ms-case-breadcrumbs a {
	color: inherit;
}

.ms-case-breadcrumbs a:hover {
	color: var(--ms-blue);
}

.ms-case-breadcrumbs span span {
	display: inline-flex;
	gap: 8px;
}

.ms-case-hero__main {
	position: relative;
	z-index: 1;
	align-items: stretch;
}

.ms-case-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3.5vw, 42px) clamp(24px, 3vw, 38px) !important;
	border-inline-start: 3px solid var(--ms-cyan);
	border-radius: 0 14px 14px 0;
	background: rgba(255, 255, 255, .58);
	backdrop-filter: blur(8px);
}

.ms-case-kicker,
.ms-section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ms-blue);
}

.ms-case-kicker__mark {
	width: 28px;
	height: 3px;
	border-radius: 999px;
	background: var(--ms-cyan);
}

.ms-case-kicker__category {
	display: inline-flex;
	gap: 5px;
	color: var(--ms-muted);
}

.ms-case-kicker__category a { color: inherit; }

.ms-case-title {
	max-width: 1040px;
	margin: 0;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.35;
	font-weight: 800;
}

.ms-case-lead {
	max-width: 620px;
	margin-top: 16px;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 2;
	color: var(--ms-muted);
}

.ms-case-lead p:last-child { margin-bottom: 0; }

.ms-case-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.ms-case-actions .button {
	margin: 0;
	border-radius: 9px;
	letter-spacing: 0;
	text-transform: none;
}

.ms-case-cta {
	background: var(--ms-blue) !important;
	border-color: var(--ms-blue) !important;
}

.ms-case-link { color: var(--ms-blue) !important; }

.ms-case-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 24px 0 0;
	padding: 8px 0;
	border-top: 1px solid var(--ms-line);
	border-bottom: 1px solid var(--ms-line);
}

.ms-case-fact {
	display: grid;
	grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ms-line);
}

.ms-case-fact:last-child { border-bottom: 0; }

.ms-case-fact dt {
	margin: 0;
	font-size: 11px;
	color: var(--ms-muted);
}

.ms-case-fact dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ms-ink);
}

.ms-case-services-brief {
	margin-top: 20px;
}

.ms-case-services-brief > span {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	color: var(--ms-muted);
}

.ms-case-services-brief p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.9;
	color: var(--ms-ink);
}

.ms-browser-frame {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 540px;
	overflow: hidden;
	border: 1px solid rgba(18,51,83,.12);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 32px 80px rgba(18,51,83,.18);
	transform: perspective(1400px) rotateY(-2.5deg) rotateX(1deg);
	transform-origin: center;
}

.ms-browser-frame__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 15px;
	background: #f7fafb;
	border-bottom: 1px solid var(--ms-line);
}

.ms-browser-frame__bar > span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cad8de;
}

.ms-browser-frame__bar > span:first-child { background: var(--ms-cyan); }

.ms-browser-frame__address {
	flex: 1;
	max-width: 245px;
	margin-inline-start: 12px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #edf4f6;
	font-size: 10px;
	direction: ltr;
	text-align: left;
	color: #8094a2;
}

.ms-browser-frame__screen {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--ms-ice);
}

.ms-browser-frame__screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.ms-case-hero__visual {
	display: flex;
}

.ms-browser-frame__scroll-image {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	pointer-events: none;
}

.ms-browser-frame__screen--scrollable {
	box-sizing: border-box;
	padding: 5px;
	background-image: var(--ms-preview-image);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	background-origin: content-box;
	background-clip: content-box;
	transition: background-position 9s cubic-bezier(.22,.61,.36,1);
}

.ms-browser-frame--scrollable:hover .ms-browser-frame__screen--scrollable,
.ms-browser-frame--scrollable:focus-within .ms-browser-frame__screen--scrollable {
	background-position: center bottom;
}

.ms-browser-frame__hint,
.ms-browser-frame__full-link {
	position: absolute;
	z-index: 2;
	inset-inline-start: 18px;
	bottom: 18px;
	padding: 8px 13px;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 999px;
	background: rgba(18,51,83,.78);
	backdrop-filter: blur(7px);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 8px 22px rgba(18,51,83,.18);
}

.ms-browser-frame__full-link {
	display: none;
}

.ms-browser-frame__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 28px;
	font-weight: 800;
	color: var(--ms-blue);
}

.ms-case-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--ms-line);
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 12px 30px rgba(18,51,83,.1);
	font-size: 12px;
	font-weight: 700;
	margin-top: 18px;
}

.ms-case-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ms-cyan);
	box-shadow: 0 0 0 4px rgba(32,189,184,.14);
}

.ms-case-body {
	max-width: 1170px;
	margin: 0 auto;
	padding: clamp(60px, 8vw, 110px) 15px;
}

.ms-case-services,
.ms-story-row {
	padding: clamp(35px, 5vw, 64px) 0;
	border-top: 1px solid var(--ms-line);
}

.ms-case-services h2,
.ms-story-heading h2,
.ms-case-showcase__heading h2 {
	margin: 8px 0 0;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.4;
}

.ms-case-services p,
.ms-story-content {
	font-size: 17px;
	line-height: 2.1;
	color: #405a6d;
}

.ms-story-heading {
	position: relative;
}

.ms-story-index {
	position: absolute;
	top: -12px;
	inset-inline-start: 15px;
	font-size: 70px;
	font-weight: 800;
	line-height: 1;
	color: rgba(18,97,166,.07);
	pointer-events: none;
}

.ms-case-showcase,
.ms-case-gallery,
.ms-case-mobile-gallery,
.ms-case-pages {
	margin-top: clamp(58px, 8vw, 108px);
}

.ms-case-showcase__heading {
	max-width: 620px;
	margin-bottom: 30px;
}

.ms-case-original-content {
	overflow: hidden;
	padding: clamp(8px, 1.5vw, 18px);
	border: 1px solid var(--ms-line);
	border-radius: 18px;
	background: var(--ms-ice);
	box-shadow: 0 28px 70px rgba(18,51,83,.1);
}

.ms-case-original-content > *:last-child { margin-bottom: 0; }
.ms-case-original-content img { width: 100%; border-radius: 10px; }

.ms-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.ms-gallery-grid figure,
.ms-mobile-grid figure {
	margin-top: 18px;
	overflow: hidden;
	border: 1px solid var(--ms-line);
	border-radius: 14px;
	background: var(--ms-ice);
}

.ms-gallery-grid img,
.ms-mobile-grid img { display: block; width: 100%; }

.ms-mobile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.ms-page-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.ms-page-card {
	overflow: hidden;
	border: 1px solid var(--ms-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 22px 55px rgba(18,51,83,.09);
}

.ms-page-card__preview {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: clamp(280px, 34vw, 430px);
	padding: 5px;
	overflow: hidden;
	background: var(--ms-ice);
}

.ms-page-card__preview img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: top center;
}

.ms-page-card__preview span {
	position: absolute;
	inset-inline-start: 18px;
	bottom: 18px;
	padding: 8px 13px;
	border-radius: 999px;
	background: rgba(18,51,83,.84);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

.ms-page-card__preview .ms-page-card__mobile {
	inset-inline: auto 18px;
	bottom: 18px;
	width: 22%;
	max-width: 96px;
	padding: 0;
	aspect-ratio: 9/16;
	overflow: hidden;
	border: 3px solid #fff;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(18,51,83,.28);
}

.ms-page-card__preview .ms-page-card__mobile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transform: none;
}

.ms-page-card__preview:hover img,
.ms-page-card__preview:focus img {
	transform: none;
}

.ms-page-card__copy {
	padding: 22px 24px 24px;
}

.ms-page-card__copy h3 {
	margin: 0;
	font-size: 20px;
	color: var(--ms-ink);
}

.ms-page-card__copy p {
	margin: 8px 0 0;
	line-height: 1.9;
	color: var(--ms-muted);
}

.ms-testimonial {
	position: relative;
	max-width: 850px;
	margin: clamp(70px, 10vw, 130px) auto;
	padding: clamp(34px, 6vw, 62px);
	border: 1px solid var(--ms-line);
	border-radius: 22px;
	background: linear-gradient(145deg, #f9fcfd, #eef8f9);
	text-align: center;
}

.ms-testimonial::before {
	content: "“";
	display: block;
	height: 42px;
	font-size: 76px;
	line-height: .8;
	color: var(--ms-cyan);
}

.ms-testimonial blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(19px, 2.2vw, 28px);
	line-height: 1.9;
	color: var(--ms-ink);
}

.ms-testimonial figcaption {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ms-muted);
}

.ms-case-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: clamp(34px, 6vw, 60px);
	border-radius: 22px;
	background: var(--ms-ink);
	color: #fff;
}

.ms-case-contact h2 {
	max-width: 650px;
	margin: 8px 0 0;
	font-size: clamp(25px, 3.2vw, 42px);
	color: #fff;
}

.ms-case-contact .ms-section-label { color: #76ddd9; }
.ms-case-contact .button { flex: 0 0 auto; margin: 0; border-radius: 9px; text-transform: none; letter-spacing: 0; }
.ms-case-footer { margin-top: 20px; }

@media (min-width: 850px) {
	.ms-case-hero__main > .ms-case-hero__visual {
		padding-bottom: 6px !important;
	}
}

@media (max-width: 849px) {
	.ms-case-heading { margin-bottom: 28px !important; }
	.ms-case-hero__visual { order: 1; margin-bottom: 30px; }
	.ms-case-hero__copy { order: 2; }
	.ms-browser-frame { min-height: 460px; transform: none; }
	.ms-browser-frame__hint { display: none; }
	.ms-browser-frame__full-link { display: inline-flex; }
	.ms-mobile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-case-contact { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 549px) {
	.ms-case-title { font-size: 34px; }
	.ms-case-hero__copy { border-inline-start-width: 2px; }
	.ms-case-facts,
	.ms-gallery-grid,
	.ms-page-grid { grid-template-columns: 1fr; }
	.ms-browser-frame { min-height: 390px; }
	.ms-mobile-grid { gap: 10px; }
	.ms-case-body { padding-inline: 20px; }
	.ms-story-index { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.ms-browser-frame { transform: none; }
	.ms-browser-frame__screen--scrollable { transition: none; }
	.ms-browser-frame--scrollable:hover .ms-browser-frame__screen--scrollable,
	.ms-browser-frame--scrollable:focus-within .ms-browser-frame__screen--scrollable { background-position: center top; }
	.ms-page-card__preview img { transition: none; }
	.ms-case-study * { scroll-behavior: auto !important; }
}