/* MidSouth Mechanical SEO Case Study. Scoped to this page only. */

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:ital@1&display=swap");

.ms-case {
	--twilight: #071119;
	--twilight-mid: #0d1b27;
	--navy: #223b53;
	--steel: #4b6b8a;
	--crimson: #862825;
	--crimson-bright: #c4412e;
	--sand: #f2eee6;
	--warm: #fafaf8;
	--border: #d8dde3;
	background: var(--warm);
	color: var(--navy);
	font-family: "Work Sans", var(--font-sans);
	overflow: hidden;
}

.ms-case *,
.ms-case *::before,
.ms-case *::after,
.ms-header *,
.ms-footer * {
	box-sizing: border-box;
}

.ms-case h1,
.ms-case h2,
.ms-case h3,
.ms-case p,
.ms-case blockquote {
	margin: 0;
}

.ms-container {
	position: relative;
	z-index: 2;
	width: min(100% - 3rem, 1200px);
	margin-inline: auto;
}

.ms-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 80;
	padding-block: 1.35rem;
	transition: background .25s ease, border-color .25s ease, padding .25s ease, backdrop-filter .25s ease;
}

body.admin-bar .ms-header {
	top: 32px;
}

.ms-header.is-scrolled,
.ms-header.is-menu-open {
	padding-block: .7rem;
	background: rgba(7,17,25,.92);
	border-bottom: 1px solid rgba(255,255,255,.08);
	backdrop-filter: blur(14px);
}

.ms-nav,
.ms-desktop-nav {
	display: flex;
	align-items: center;
}

.ms-nav {
	justify-content: space-between;
	gap: 1.25rem;
}

.ms-brand img {
	width: auto;
	height: 1.75rem;
}

.ms-desktop-nav {
	gap: 1.5rem;
}

.ms-desktop-nav a,
.ms-mobile-menu a {
	color: rgba(255,255,255,.72);
	font-size: .86rem;
	font-weight: 500;
	text-decoration: none;
}

.ms-desktop-nav a:hover,
.ms-mobile-menu a:hover {
	color: #fff;
}

.ms-mobile-toggle {
	display: none;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .35rem;
	border: 0;
	background: transparent;
}

.ms-mobile-toggle span {
	width: 1.35rem;
	height: 2px;
	background: #fff;
}

.ms-mobile-menu {
	position: absolute;
	inset: 100% 0 auto;
	display: none;
	padding: 1rem 1.5rem 1.5rem;
	background: #071119;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.ms-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
}

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.05rem;
	background: #862825;
	border: 1px solid rgba(255,255,255,.12);
	color: #fff;
	font-size: .86rem;
	font-weight: 700;
	text-decoration: none;
}

.ms-btn:hover {
	background: #73211f;
}

.ms-btn--ghost {
	background: transparent;
	border-color: rgba(255,255,255,.24);
	color: rgba(255,255,255,.86);
}

.ms-btn--ghost:hover {
	background: rgba(255,255,255,.06);
}

.ms-btn--small {
	min-height: 42px;
	padding: .65rem .85rem;
	font-size: .78rem;
}

.ms-dark {
	position: relative;
	background: var(--twilight);
	color: #fff;
}

.ms-section {
	position: relative;
	padding: clamp(5rem, 8vw, 7rem) 0;
	border-top: 1px solid var(--border);
}

.ms-dark.ms-section,
.ms-hero {
	border-top-color: rgba(255,255,255,.06);
}

.ms-section--white {
	background: #fff;
}

.ms-section--sand {
	background: var(--sand);
}

.ms-section--soft {
	background: var(--twilight-mid);
}

.ms-pattern {
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.ms-pattern--hero {
	right: -6rem;
	top: -4rem;
	width: 62rem;
	height: 62rem;
	opacity: .075;
}

.ms-pattern--context {
	left: -5rem;
	bottom: 0;
	width: 44rem;
	height: 44rem;
	opacity: .06;
}

.ms-pattern--growth {
	right: -4rem;
	top: -4rem;
	width: 56rem;
	height: 56rem;
	opacity: .07;
}

.ms-pattern--cta {
	right: -5rem;
	bottom: -6rem;
	width: 62rem;
	height: 62rem;
	opacity: .075;
}

.ms-hero {
	padding: 11rem 0 6rem;
	overflow: hidden;
}

.ms-hero-grid,
.ms-two {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2.5rem;
	align-items: start;
}

.ms-hero-grid > * {
	grid-column: span 6;
}

.ms-two > *:first-child {
	grid-column: span 5;
}

.ms-two > *:last-child {
	grid-column: span 7;
}

.ms-eyebrow,
.ms-client,
.ms-note,
.ms-mark,
.ms-strip span,
.ms-strip b,
.ms-panel-title,
.ms-source,
.ms-tabs button,
.ms-chart-meta,
.ms-legend,
.ms-kpi span {
	font-family: var(--font-mono);
}

.ms-eyebrow {
	margin-bottom: 1rem;
	color: rgba(255,255,255,.48);
	font-size: .68rem;
	letter-spacing: .22em;
	line-height: 1.35;
	text-transform: uppercase;
}

.ms-client {
	margin-bottom: 1.25rem;
	color: var(--crimson-bright);
	font-size: .72rem;
	letter-spacing: .22em;
}

.ms-hero h1 {
	max-width: 660px;
	color: #fff;
	font-size: clamp(2.35rem, 5vw, 3.2rem);
	line-height: 1.02;
	letter-spacing: 0;
}

.ms-case h2 {
	color: #111827;
	font-size: clamp(1.9rem, 4vw, 2.35rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.ms-dark h2 {
	color: #fff;
}

.ms-lead,
.ms-dark p,
.ms-dark blockquote {
	color: rgba(255,255,255,.66);
}

.ms-hero .ms-lead {
	max-width: 620px;
	margin-top: 1.25rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

.ms-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 1.75rem;
	margin-bottom: 2rem;
}

.ms-hero .ms-note {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
	max-width: 620px;
	margin-top: 0;
	padding: .72rem 0 .72rem .85rem;
	border-left: 2px solid rgba(196,65,46,.72);
	border-top: 1px solid rgba(255,255,255,.1);
	color: rgba(255,255,255,.52);
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: .74rem;
	line-height: 1.45;
}

.ms-hero .ms-note span {
	color: rgba(255,255,255,.78);
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ms-kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
}

.ms-kpi,
.ms-dashboard,
.ms-stat-grid article,
.ms-review-stat,
.ms-cta-card {
	position: relative;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.12);
}

.ms-kpi {
	min-height: 168px;
	padding: 1.25rem;
	transition: transform .2s ease;
}

.ms-kpi::after,
.ms-dashboard::after,
.ms-cta-card::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(255,255,255,.06);
	pointer-events: none;
}

.ms-kpi:hover {
	transform: translateY(-3px);
}

.ms-kpi-value {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ms-kpi span {
	display: block;
	margin: .55rem 0 .75rem;
	color: rgba(255,255,255,.42);
	font-size: .6rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.ms-sparkline {
	width: 100%;
	height: 30px;
	margin-bottom: .75rem;
	opacity: .82;
}

.ms-kpi p {
	color: rgba(255,255,255,.42);
	font-size: .75rem;
	line-height: 1.45;
}

.ms-operating {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,.08);
}

.ms-operating > p,
.ms-serif,
.ms-lead-takeaway,
.ms-case blockquote {
	font-family: "Frank Ruhl Libre", Georgia, serif;
	font-style: italic;
}

.ms-operating > p {
	max-width: 980px;
	color: rgba(255,255,255,.72);
	font-size: clamp(1.25rem, 3vw, 1.65rem);
	line-height: 1.45;
}

.ms-strip {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: 1.4rem;
	overflow-x: auto;
	white-space: nowrap;
}

.ms-strip span {
	color: rgba(255,255,255,.38);
	font-size: .64rem;
	letter-spacing: .2em;
}

.ms-strip b {
	padding: .48rem .65rem;
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.72);
	font-size: .66rem;
	font-weight: 500;
}

.ms-strip .is-final {
	border-color: rgba(196,65,46,.65);
	color: #fff;
}

.ms-strip i {
	color: rgba(255,255,255,.28);
	font-style: normal;
}

.ms-mark {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.ms-mark span {
	color: var(--crimson);
	font-size: .72rem;
}

.ms-mark--dark span {
	color: var(--crimson-bright);
}

.ms-mark i {
	width: 2rem;
	height: 1px;
	background: rgba(34,59,83,.22);
}

.ms-mark--dark i {
	background: rgba(255,255,255,.2);
}

.ms-mark b {
	color: rgba(34,59,83,.52);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.ms-mark--dark b {
	color: rgba(255,255,255,.48);
}

.ms-case p {
	color: #5d6673;
	font-size: .98rem;
	line-height: 1.75;
}

.ms-case p + p {
	margin-top: 1rem;
}

.ms-case blockquote {
	margin-top: 1.5rem;
	padding-left: 1rem;
	border-left: 2px solid rgba(134,40,37,.35);
	color: #3f4b59;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.5;
}

.ms-dark blockquote {
	color: rgba(255,255,255,.62);
}

.ms-matrix-wrap {
	overflow-x: auto;
	padding: 1rem;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.1);
}

.ms-panel-title {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	color: rgba(255,255,255,.42);
	font-size: .66rem;
	letter-spacing: .16em;
}

.ms-panel-title span {
	color: var(--crimson-bright);
}

.ms-matrix {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	color: #fff;
}

.ms-matrix th,
.ms-matrix td {
	padding: .9rem;
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.62);
	text-align: left;
	vertical-align: top;
}

.ms-matrix thead th {
	color: #e19a91;
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 500;
	text-transform: uppercase;
}

.ms-matrix tbody th {
	color: rgba(255,255,255,.9);
	font-size: .78rem;
}

.ms-flow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .9rem;
	margin-top: 1.75rem;
	padding: 1.1rem;
	background: #fbfaf6;
	border: 1px solid var(--border);
}

.ms-flow > span {
	grid-column: 1 / -1;
	color: rgba(34,59,83,.5);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .18em;
	line-height: 1.35;
	text-transform: uppercase;
}

.ms-flow article {
	min-height: 154px;
	padding: 1.05rem 1rem 1rem;
	background: rgba(255,255,255,.9);
	border: 1px solid #d8dde3;
	border-top: 2px solid rgba(34,59,83,.2);
}

.ms-flow article.is-final {
	background: #fff;
	border-color: rgba(134,40,37,.38);
	border-top-color: var(--crimson);
}

.ms-flow b {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	margin-bottom: .75rem;
	padding: .24rem .45rem;
	border: 1px solid rgba(34,59,83,.16);
	border-radius: 999px;
	color: var(--crimson);
	font-family: var(--font-mono);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.ms-method b {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	margin-bottom: .75rem;
	border: 1px solid rgba(134,40,37,.55);
	border-radius: 50%;
	color: var(--crimson);
	font-family: var(--font-mono);
	font-size: .75rem;
}

.ms-flow .is-final b {
	background: rgba(134,40,37,.08);
	border-color: rgba(134,40,37,.32);
	color: var(--crimson);
}

.ms-method h3,
.ms-execution span {
	color: #111827;
	font-size: .95rem;
	line-height: 1.25;
}

.ms-flow h3 {
	color: #111827;
	font-size: 1rem;
	line-height: 1.25;
}

.ms-method p {
	font-size: .78rem;
	line-height: 1.5;
}

.ms-flow p {
	margin-top: .45rem;
	font-size: .82rem;
	line-height: 1.55;
}

.ms-stack {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.ms-stack-row {
	min-height: 4.5rem;
	padding: .9rem 1rem;
	color: #fff;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .55s ease, transform .55s ease;
}

.ms-stack-row.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.ms-stack-row b,
.ms-stack-row span,
.ms-stack-row em {
	display: block;
}

.ms-stack-row b {
	font-family: var(--font-mono);
	font-size: .65rem;
	opacity: .65;
}

.ms-stack-row span {
	margin-top: .25rem;
	font-weight: 700;
}

.ms-stack-row em {
	margin-top: .15rem;
	font-size: .78rem;
	font-style: normal;
	opacity: .75;
}

.ms-stack > p {
	color: rgba(34,59,83,.5);
	font-family: var(--font-mono);
	font-size: .68rem;
	text-align: right;
	letter-spacing: .16em;
}

.ms-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
	gap: 2rem;
	align-items: end;
	margin-bottom: 2.25rem;
}

.ms-intro .ms-mark {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.ms-serif {
	color: #394759;
	font-size: 1.25rem;
}

.ms-method {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
}

.ms-method::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 1.125rem;
	height: 1px;
	background: linear-gradient(90deg, rgba(134,40,37,.1), rgba(134,40,37,.35), rgba(134,40,37,.1));
}

.ms-method article {
	position: relative;
	z-index: 1;
	text-align: center;
}

.ms-method b {
	margin-inline: auto;
	background: #fff;
}

.ms-execution {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: #fff;
	border: 1px solid var(--border);
}

.ms-execution article {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.ms-execution article:nth-child(odd) {
	border-right: 1px solid var(--border);
}

.ms-execution article:nth-last-child(-n+2) {
	border-bottom: 0;
}

.ms-execution span {
	display: block;
	margin-bottom: 1rem;
	color: var(--crimson);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ms-execution ul {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-execution li {
	position: relative;
	padding-left: 1rem;
	color: #5d6673;
}

.ms-execution li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .65rem;
	width: .32rem;
	height: .32rem;
	background: var(--crimson);
	border-radius: 50%;
}

.ms-lead-dark {
	color: #334155;
	font-weight: 500;
}

.ms-silo-map {
	position: relative;
	margin-top: 2.5rem;
	padding: 2rem;
	border: 1px solid var(--border);
	background: #fff;
}

.ms-silo-hub {
	width: min(100%, 460px);
	margin: 0 auto 4rem;
	padding: 1rem;
	background: var(--navy);
	color: #fff;
	text-align: center;
	font-weight: 700;
}

.ms-silo-hub span {
	display: block;
	margin-bottom: .35rem;
	color: var(--crimson-bright);
	font-family: var(--font-mono);
	font-size: .65rem;
	letter-spacing: .18em;
}

.ms-silo-connectors {
	position: absolute;
	top: 6.4rem;
	left: 50%;
	width: 70%;
	height: 4rem;
	transform: translateX(-50%);
	border-top: 1px solid #cbd2da;
	border-left: 1px solid #cbd2da;
	border-right: 1px solid #cbd2da;
}

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

.ms-silo-grid article {
	background: #fff;
	border: 1px solid var(--border);
}

.ms-silo-grid h3 {
	padding: .85rem;
	background: var(--silo);
	color: #fff;
	font-size: .9rem;
}

.ms-silo-grid p {
	margin: 0;
	padding: .75rem .85rem .75rem 1rem;
	border-top: 1px solid var(--border);
	border-left: 3px solid color-mix(in srgb, var(--silo) 50%, transparent);
	font-size: .82rem;
	line-height: 1.4;
}

.ms-silo-map small,
.ms-source {
	display: block;
	margin-top: 1rem;
	color: rgba(34,59,83,.48);
	font-family: var(--font-mono);
	font-size: .68rem;
	text-align: center;
}

.ms-growth {
	background: var(--twilight);
}

.ms-dashboard {
	margin-top: 2rem;
	padding: 1rem;
}

.ms-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ms-tabs button {
	min-width: 120px;
	min-height: 48px;
	padding: .7rem .9rem;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	color: rgba(255,255,255,.55);
	font-size: .68rem;
	letter-spacing: .16em;
}

.ms-tabs button.is-active {
	border-color: rgba(196,65,46,.65);
	color: #fff;
}

.ms-chart-meta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .8rem;
	margin: 1rem 0;
	color: rgba(255,255,255,.45);
	font-size: .72rem;
}

.ms-chart-meta b {
	color: #fff;
}

.ms-chart-meta em {
	font-style: normal;
	text-align: right;
}

.ms-chart {
	height: 288px;
	background: #0a1620;
	border: 1px solid rgba(255,255,255,.08);
}

.ms-chart svg {
	width: 100%;
	height: 100%;
}

.ms-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: .75rem;
	color: rgba(255,255,255,.55);
	font-size: .68rem;
	letter-spacing: .12em;
}

.ms-legend span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.ms-legend i {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
}

.ms-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.ms-stat-grid article {
	padding: 1.2rem;
}

.ms-stat-grid b,
.ms-impressions b,
.ms-review-stat b,
.ms-recap b {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.ms-stat-grid b {
	color: var(--crimson-bright);
}

.ms-stat-grid span {
	display: block;
	margin-top: .5rem;
	color: #fff;
	font-weight: 700;
}

.ms-paid-callout {
	position: relative;
	padding: 1.5rem;
	background: var(--twilight-mid);
	border: 1px solid rgba(255,255,255,.08);
}

.ms-paid-callout::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(255,255,255,.06);
}

.ms-paid-callout b,
.ms-paid-callout strong {
	position: relative;
	z-index: 1;
	display: block;
	font-size: clamp(1.8rem, 4vw, 2.7rem);
	line-height: 1.05;
}

.ms-paid-callout b {
	color: #fff;
}

.ms-paid-callout strong {
	color: var(--crimson-bright);
}

.ms-paid-panels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.ms-paid-panels article,
.ms-query-panel,
.ms-assets article,
.ms-recap article {
	background: #fff;
	border: 1px solid var(--border);
}

.ms-paid-panels article {
	padding: 1.25rem;
}

.ms-paid-panels header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ms-paid-panels header b {
	font-size: 1.4rem;
}

.ms-paid-panels header span {
	padding: .35rem .5rem;
	border: 1px solid;
	font-family: var(--font-mono);
	font-size: .63rem;
	text-transform: uppercase;
}

.is-paid {
	border-color: rgba(134,40,37,.45);
	color: var(--crimson);
}

.is-no-paid {
	border-color: rgba(46,125,91,.45);
	color: #2e7d5b;
}

.ms-paid-bar {
	display: flex;
	height: .65rem;
	margin-bottom: 1rem;
	overflow: hidden;
	background: #eef1f4;
}

.ms-paid-bar i {
	display: block;
	height: 100%;
}

.ms-paid-panels p {
	display: flex;
	justify-content: space-between;
	margin: .45rem 0 0;
	font-size: .85rem;
	line-height: 1.4;
}

.ms-paid-panels em {
	display: block;
	margin-top: 1rem;
	color: #6b7280;
	font-size: .83rem;
	font-style: normal;
	line-height: 1.5;
}

.ms-takeaway {
	margin: 2rem 0 0;
	padding-left: 1rem;
	border-left: 2px solid rgba(134,40,37,.35);
	color: #243244 !important;
	font-weight: 600;
}

.ms-impressions {
	margin-top: 1.5rem;
	padding: 1.35rem;
	background: var(--twilight-mid);
	border: 1px solid rgba(255,255,255,.08);
	color: #fff;
}

.ms-impressions b {
	font-size: clamp(2.3rem, 5vw, 3rem);
}

.ms-impressions span {
	display: block;
	margin: .5rem 0 1rem;
	color: var(--crimson-bright);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .18em;
}

.ms-impressions div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}

.ms-case .ms-impressions div > p {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	color: rgba(255,255,255,.7);
	font-size: .85rem;
	line-height: 1.3;
}

.ms-case .ms-impressions div > p strong {
	display: block;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1.2;
}

.ms-impressions small {
	display: block;
	margin-top: 1rem;
	color: rgba(255,255,255,.44);
}

.ms-query-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
	padding: 1rem;
}

.ms-query-panel article {
	padding: 1rem;
	background: rgba(255,255,255,.82);
	border: 1px solid var(--border);
}

.ms-query-panel h3 {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--border);
	color: var(--cluster);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ms-query-panel h3 i,
.ms-query-panel span i {
	width: .55rem;
	height: .55rem;
	background: var(--cluster);
	border-radius: 50%;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--cluster) 13%, transparent);
}

.ms-query-panel span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: .7rem .35rem 0 0;
	padding: .4rem .5rem;
	background: #fbfaf7;
	border: 1px solid var(--border);
	color: #4b5563;
	font-size: .78rem;
}

.ms-query-panel span i {
	width: .35rem;
	height: .35rem;
	box-shadow: none;
}

.ms-assets {
	margin-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.ms-assets article {
	display: grid;
	grid-template-columns: 72px minmax(320px, 1.4fr) 120px 150px minmax(280px, 1fr);
	column-gap: 1rem;
	row-gap: .25rem;
	align-items: start;
	padding: 1rem .25rem;
	border-bottom: 1px solid var(--border);
	transition: background .2s ease;
}

.ms-assets article:hover {
	background: #fbfaf7;
}

.ms-assets b {
	display: block;
	color: rgba(34,59,83,.32);
	font-family: var(--font-mono);
	font-size: 1.75rem;
	line-height: 1.15;
	padding-top: .1rem;
}

.ms-assets article:hover > b {
	color: var(--crimson);
}

.ms-assets h3 {
	margin: 0;
	color: var(--twilight);
	font-size: 1rem;
	line-height: 1.28;
}

.ms-assets h3 span {
	display: table;
	margin-top: .4rem;
	padding: .25rem .45rem;
	background: rgba(75,107,138,.08);
	border: 1px solid rgba(75,107,138,.2);
	color: #4b6b8a;
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ms-assets p,
.ms-assets em {
	margin: 0;
	font-size: .78rem;
	line-height: 1.45;
}

.ms-assets p {
	color: #6b7280;
	font-family: var(--font-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ms-assets p + p {
	margin-top: 0;
}

.ms-assets p strong {
	display: block;
	color: #111827;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
}

.ms-assets em {
	color: #4b5563;
	font-style: normal;
	line-height: 1.5;
}

.ms-leads {
	background: var(--twilight);
}

.ms-review-stat {
	margin-top: 1.5rem;
	padding: 1.2rem;
	border-left: 2px solid var(--crimson-bright);
}

.ms-review-stat b {
	color: #fff;
}

.ms-review-stat span {
	display: block;
	margin: .45rem 0;
	color: var(--crimson-bright);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .16em;
}

.ms-intent-panel {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem 2.25rem;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.12);
}

.ms-intent-panel header {
	margin-bottom: 1.5rem;
	font-family: var(--font-mono);
}

.ms-intent-panel header span {
	display: block;
	color: var(--crimson-bright);
	font-size: .68rem;
	letter-spacing: .18em;
}

.ms-intent-panel header b {
	color: rgba(255,255,255,.42);
	font-size: .68rem;
	font-weight: 400;
}

.ms-spine {
	position: absolute;
	top: 4.9rem;
	bottom: 1.7rem;
	left: 1.15rem;
	width: 1px;
	background: linear-gradient(180deg, var(--crimson-bright), rgba(255,255,255,.25));
}

.ms-intent-panel article {
	position: relative;
	margin: 0 0 1rem 1rem;
	padding: 1rem;
	border: 1px solid rgba(255,255,255,.14);
}

.ms-intent-panel article > i {
	position: absolute;
	left: -2.05rem;
	top: 1.25rem;
	width: .72rem;
	height: .72rem;
	background: var(--twilight);
	border: 2px solid var(--crimson-bright);
	border-radius: 50%;
}

.ms-intent-panel article span {
	color: rgba(255,255,255,.55);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ms-intent-panel article div {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: .75rem 0;
}

.ms-intent-panel article b {
	padding: .35rem .5rem;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.72);
	font-size: .82rem;
}

.ms-intent-panel article b.is-strong {
	background: rgba(196,65,46,.1);
	border-color: rgba(196,65,46,.7);
	color: #fff;
}

.ms-evidence {
	margin-top: 1.5rem;
}

.ms-evidence p {
	display: flex;
	gap: 1rem;
	margin: .65rem 0 0;
	padding: .75rem 1rem;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.1);
	color: rgba(255,255,255,.7);
}

.ms-evidence span {
	color: var(--crimson-bright);
	font-family: var(--font-mono);
}

.ms-evidence em {
	font-style: italic;
}

.ms-evidence small {
	display: block;
	margin-top: .75rem;
	color: rgba(255,255,255,.38);
	font-family: var(--font-mono);
	font-size: .68rem;
}

.ms-lead-takeaway {
	margin-top: 1.75rem;
	color: rgba(255,255,255,.76) !important;
	font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.ms-lead-takeaway strong {
	color: var(--crimson-bright);
}

.ms-values {
	margin-top: 1.5rem;
	border-top: 1px solid rgba(34,59,83,.14);
}

.ms-values article {
	position: relative;
	padding: 1rem 0 1rem 1.25rem;
	border-bottom: 1px solid rgba(34,59,83,.14);
}

.ms-values article::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.5rem;
	width: .42rem;
	height: .42rem;
	background: var(--crimson);
	border-radius: 50%;
}

.ms-values h3 {
	font-size: 1rem;
}

.ms-recap {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) 1.2fr;
	gap: 1rem;
	margin-top: 2rem;
}

.ms-recap-hero {
	min-height: 100%;
	padding: 2rem;
	background: var(--twilight-mid) !important;
	color: #fff;
}

.ms-recap-hero b {
	color: #fff;
	font-size: clamp(4.5rem, 10vw, 6rem);
}

.ms-recap-hero span,
.ms-recap article span {
	display: block;
	margin: .75rem 0 .5rem;
	color: var(--crimson-bright);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ms-recap-hero p {
	color: rgba(255,255,255,.68);
}

.ms-recap > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.ms-recap > div article {
	padding: 1.4rem;
}

.ms-closing {
	max-width: 780px;
	margin-top: 2rem !important;
	color: #334155 !important;
	font-weight: 500;
}

.ms-cta {
	overflow: hidden;
}

.ms-cta h2 {
	font-size: clamp(2rem, 5vw, 3.4rem);
}

.ms-cta-card {
	display: grid;
	gap: .75rem;
	padding: 1.5rem;
}

.ms-cta-card > span {
	color: rgba(255,255,255,.45);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .18em;
}

.ms-cta-card > a:last-child {
	color: rgba(255,255,255,.58);
	font-size: .9rem;
	text-decoration: none;
}

.ms-footer {
	padding: 2rem 0;
	background: #071119;
	color: rgba(255,255,255,.55);
}

.ms-footer .ms-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
}

.ms-footer img {
	width: auto;
	height: 1.5rem;
	opacity: .7;
}

.ms-footer p {
	color: rgba(255,255,255,.7);
	font-family: "Frank Ruhl Libre", Georgia, serif;
	font-style: italic;
	text-align: center;
}

.ms-footer span {
	text-align: right;
}

@media (max-width: 1023px) {
	.ms-hero-grid,
	.ms-two,
	.ms-intro {
		grid-template-columns: 1fr;
	}

	.ms-hero-grid > *,
	.ms-two > *:first-child,
	.ms-two > *:last-child {
		grid-column: auto;
	}

	.ms-desktop-nav,
	.ms-header .ms-btn--small {
		display: none;
	}

	.ms-mobile-toggle {
		display: flex;
	}

	.ms-mobile-menu:not([hidden]) {
		display: block;
	}

	.ms-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-assets article {
		grid-template-columns: 56px minmax(0, 1fr) 104px 124px;
	}

	.ms-assets article em {
		grid-column: 2 / 5;
	}

	.ms-method,
	.ms-silo-grid,
	.ms-paid-panels,
	.ms-stat-grid,
	.ms-recap,
	.ms-recap > div {
		grid-template-columns: 1fr;
	}

	.ms-method::before,
	.ms-silo-connectors {
		display: none;
	}
}

@media (max-width: 767px) {
	.ms-container {
		width: min(100% - 2rem, 1200px);
	}

	.ms-hero {
		padding-top: 8.5rem;
	}

	.ms-flow {
		grid-template-columns: 1fr;
		padding: .95rem;
	}

	.ms-kpis,
	.ms-execution,
	.ms-query-panel {
		grid-template-columns: 1fr;
	}

	.ms-chart-meta,
	.ms-footer .ms-container {
		grid-template-columns: 1fr;
	}

	.ms-chart-meta em,
	.ms-footer p,
	.ms-footer span {
		text-align: left;
	}

	.ms-assets article {
		grid-template-columns: 3rem 1fr 1fr;
		column-gap: .75rem;
		row-gap: .75rem;
		align-items: start;
		padding: 1rem 0;
	}

	.ms-assets b {
		grid-column: 1;
		grid-row: 1;
		font-size: 1.35rem;
	}

	.ms-assets h3 {
		grid-column: 2 / 4;
		grid-row: 1;
	}

	.ms-assets article p {
		padding: .7rem .75rem;
		background: #fbfaf7;
		border: 1px solid var(--border);
	}

	.ms-assets article p:first-of-type {
		grid-column: 2;
	}

	.ms-assets article p:nth-of-type(2) {
		grid-column: 3;
	}

	.ms-assets article em {
		grid-column: 2 / 4;
	}

	.ms-execution article,
	.ms-execution article:nth-child(odd),
	.ms-execution article:nth-last-child(-n+2) {
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
}

/* Bring this long-form study into the editorial system used by Stell's portfolio. */
.ms-case {
	--twilight: #122b3e;
	--twilight-mid: #122b3e;
	--navy: #142b3c;
	--steel: #586f82;
	--sand: #f2eee6;
	--warm: #f2eee6;
	--border: #d3d4ce;
	-webkit-font-smoothing: antialiased;
}

.ms-case a:focus-visible,
.ms-case button:focus-visible {
	outline: 3px solid #ad4540;
	outline-offset: 4px;
}

.ms-container {
	width: min(100% - 7rem, 1240px);
}

.ms-section {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-top-color: var(--border);
	scroll-margin-top: 7rem;
}

.ms-section--sand {
	background: var(--sand);
}

.ms-case h2 {
	color: var(--navy);
	font-size: clamp(2rem, 3.5vw, 2.85rem);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1.1;
}

.ms-dark h2 {
	color: #f2eee6;
}

.ms-case h3 {
	color: var(--navy);
	letter-spacing: -.02em;
}

.ms-case p {
	color: #586771;
	font-size: 1.04rem;
	line-height: 1.7;
}

.ms-dark p {
	color: #c8d2d9;
}

.ms-operating > p,
.ms-serif,
.ms-lead-takeaway,
.ms-case blockquote {
	font-family: "Libre Caslon Text", Georgia, serif;
}

.ms-mark {
	margin-bottom: 1.55rem;
}

.ms-mark b,
.ms-mark span {
	font-family: "Work Sans", sans-serif;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .11em;
}

.ms-mark b {
	color: var(--navy);
}

.ms-mark--dark b {
	color: #e4e9ed;
}

.ms-hero {
	padding: 3.25rem 0 0;
	background: var(--sand);
	color: var(--navy);
	border: 0;
}

.ms-back {
	display: inline-flex;
	margin-bottom: 3.2rem;
	color: var(--navy);
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-decoration: none;
	text-transform: uppercase;
}

.ms-back:hover,
.ms-story-nav a:hover {
	color: var(--crimson);
}

.ms-hero-grid {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

.ms-hero-grid > * {
	grid-column: auto;
}

.ms-eyebrow {
	margin-bottom: 1.25rem;
	color: var(--crimson);
	font-family: "Work Sans", sans-serif;
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .12em;
}

.ms-hero h1 {
	max-width: 740px;
	color: var(--navy);
	font-size: clamp(3rem, 5.4vw, 5.3rem);
	font-weight: 500;
	letter-spacing: -.055em;
	line-height: 1.04;
}

.ms-case .ms-hero .ms-lead {
	max-width: 510px;
	margin: 0;
	color: var(--navy);
	font-size: 1.13rem;
	line-height: 1.65;
}

.ms-case .ms-hero .ms-note {
	display: block;
	margin: 1.5rem 0 .2rem;
	padding: 0 0 0 1rem;
	border: 0;
	border-left: 2px solid var(--crimson);
	color: #586771;
	font-size: .76rem;
	line-height: 1.6;
}

.ms-hero-showcase {
	margin: 3.75rem 0 0;
	padding: 2rem 2.25rem 0;
	background: #b3937e;
}

.ms-hero-browser {
	overflow: hidden;
	background: #fff;
	border: 1px solid #142b3c25;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 16px 40px #142b3c25;
}

.ms-hero-browser-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 31px;
	padding-inline: 1rem;
	border-bottom: 1px solid #dedede;
	background: #f9f9f7;
	color: #61717a;
	font-size: .62rem;
	letter-spacing: .05em;
}

.ms-hero-browser-bar span:first-child {
	color: #b8c0c4;
	font-size: .55rem;
	letter-spacing: .2em;
}

.ms-hero-browser img {
	display: block;
	width: 100%;
	height: min(49vw, 580px);
	object-fit: cover;
	object-position: top;
}

.ms-hero-showcase figcaption {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0 1.1rem;
	color: var(--navy);
	font-size: .78rem;
	line-height: 1.5;
}

.ms-hero-showcase figcaption span {
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .12em;
	white-space: nowrap;
}

.ms-kpis {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: 2.7rem;
	border-top: 1px solid #b8c0c1;
	border-bottom: 1px solid #b8c0c1;
}

.ms-kpi {
	min-height: 0;
	padding: 1.6rem 1.9rem 1.6rem 0;
	background: transparent;
	border: 0;
	transition: none;
}

.ms-kpi + .ms-kpi {
	padding-left: 1.9rem;
	border-left: 1px solid #b8c0c1;
}

.ms-kpi::after {
	content: none;
}

.ms-kpi:hover {
	transform: none;
}

.ms-kpi-value {
	color: var(--crimson);
	font-size: clamp(2.2rem, 3.4vw, 3.3rem);
	font-weight: 500;
	letter-spacing: -.045em;
}

.ms-kpi span {
	margin: .55rem 0 .3rem;
	color: var(--navy);
	font-family: "Work Sans", sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ms-case .ms-kpi p {
	color: #586771;
	font-size: .76rem;
}

.ms-operating {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: end;
	margin-top: 0;
	padding: 3rem 0 4rem;
	border: 0;
}

.ms-case .ms-operating > p {
	max-width: 740px;
	color: var(--navy);
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	line-height: 1.55;
}

.ms-story-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem 1.5rem;
}

.ms-story-nav a {
	padding: .6rem 0;
	border-bottom: 1px solid #b8c0c1;
	color: var(--navy);
	font-size: .79rem;
	font-weight: 600;
	text-decoration: none;
}

.ms-story-nav a::after {
	content: "↗";
	float: right;
	color: var(--crimson);
}

.ms-matrix-wrap {
	background: #fff;
	border-color: var(--border);
}

.ms-panel-title,
.ms-panel-title span,
.ms-matrix,
.ms-matrix th,
.ms-matrix td,
.ms-matrix thead th,
.ms-matrix tbody th {
	color: var(--navy);
}

.ms-panel-title b {
	font-weight: 400;
}

.ms-matrix th,
.ms-matrix td {
	border-color: var(--border);
}

.ms-matrix thead th {
	color: var(--crimson);
}

.ms-flow,
.ms-silo-map,
.ms-execution,
.ms-query-panel,
.ms-paid-panels article,
.ms-assets article,
.ms-recap article {
	border-color: var(--border);
}

.ms-flow {
	gap: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.ms-flow > span {
	padding: 0 0 1rem;
}

.ms-flow article {
	min-height: 148px;
	border-width: 1px 0 0;
	border-color: var(--border);
}

.ms-flow article.is-final {
	border-color: var(--border);
}

.ms-flow h3,
.ms-method h3,
.ms-execution span {
	color: var(--navy);
	font-size: 1rem;
}

.ms-stack-row,
.ms-stack-row.is-visible {
	width: 100% !important;
	min-height: 0;
	padding: 1rem 1.3rem;
	background: #fff !important;
	border: 1px solid var(--border);
	border-left: 3px solid var(--crimson);
	color: var(--navy);
	opacity: 1;
	transform: none;
	transition: none;
}

.ms-stack-row span {
	font-weight: 600;
}

.ms-stack-row em {
	color: #586771;
	opacity: 1;
}

.ms-method {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--border);
}

.ms-method::before {
	content: none;
}

.ms-method article {
	padding: 1.6rem 1.3rem 1.6rem 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.ms-method b {
	margin-inline: 0;
}

.ms-case .ms-method p,
.ms-case .ms-flow p {
	font-size: .88rem;
}

.ms-growth,
.ms-leads,
.ms-cta {
	background: var(--twilight);
}

.ms-growth .ms-pattern,
.ms-leads .ms-pattern,
.ms-cta .ms-pattern {
	display: none;
}

.ms-dark .ms-mark b,
.ms-dark .ms-mark span {
	color: #e4e9ed;
}

.ms-dark .ms-mark span {
	color: #e7aaa5;
}

.ms-cta .ms-btn {
	background: var(--sand);
	border-color: var(--sand);
	color: var(--navy);
}

.ms-cta .ms-btn--ghost {
	background: transparent;
	border-color: #8fa1ad;
	color: #fff;
}

@media (max-width: 1023px) {
	.ms-container {
		width: min(100% - 4rem, 1240px);
	}

	.ms-hero-grid,
	.ms-operating {
		grid-template-columns: 1fr;
	}

	.ms-method {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ms-container {
		width: min(100% - 2.5rem, 1240px);
	}

	.ms-hero {
		padding-top: 2rem;
	}

	.ms-back {
		margin-bottom: 2.4rem;
		font-size: .64rem;
	}

	.ms-hero h1 {
		font-size: clamp(2.7rem, 11vw, 4.2rem);
	}

	.ms-case .ms-hero .ms-lead {
		font-size: 1rem;
	}

	.ms-hero-showcase {
		margin-top: 2.3rem;
		padding: .85rem .85rem 0;
	}

	.ms-hero-browser img {
		height: 270px;
	}

	.ms-hero-showcase figcaption {
		display: block;
		font-size: .7rem;
	}

	.ms-hero-showcase figcaption span {
		display: block;
		margin-bottom: .25rem;
	}

	.ms-kpis {
		grid-template-columns: 1fr;
		margin-top: 1.9rem;
	}

	.ms-kpi,
	.ms-kpi + .ms-kpi {
		padding: 1.1rem 0;
		border: 0;
		border-bottom: 1px solid #b8c0c1;
	}

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

	.ms-operating {
		gap: 1.5rem;
		padding: 2rem 0 3rem;
	}

	.ms-story-nav {
		gap: .25rem 1rem;
	}

	.ms-story-nav a {
		font-size: .7rem;
	}

	.ms-method {
		grid-template-columns: 1fr;
	}
}