/**
 * MailSoar Case Studies — front-end styles.
 *
 * Custom properties are the tuning dials, scoped to :where(.ms-case-studies)
 * rather than :root. Fonts are inherited from the theme on purpose. The
 * page's own background shows through (transparent), per CLAUDE.md.
 */
:where(.ms-case-studies) {
	/* ---- brand colours (see CLAUDE.md) --------------------------- */
	--mscs-green:  var(--primary-green, #63e6b6); /* custom var, added via Customizer > Additional CSS — not an Astra global colour */
	--mscs-red:    var(--ast-global-color-3);
	--mscs-yellow: var(--ast-global-color-1);
	--mscs-card-bg: var(--ast-global-color-8);

	/* ---- neutral chrome (not brand colours) ---------------------- */
	--mscs-ink:        #111111;
	--mscs-body:       #1f1f1f;
	--mscs-border:     #000000;
	--mscs-line:       #e6e1d5;
	--mscs-tan:        #e8e0cc;
	--mscs-tan-2:      #d8caae;

	/* ---- folder-tabs palette, matched exactly to the site's existing
	   tabbed-folder component (tabbed-folder-example.txt) ------------ */
	--mscs-tab-0:        #f3ecdd;
	--mscs-tab-1:        #e7dcc6;
	--mscs-tab-2:        #d8caae;
	--mscs-tab-active-0: var(--ast-global-color-0);
	--mscs-tab-active-1: #f6e15b;
	--mscs-tab-active-2: #7fe3b1;
	--mscs-tab-ghost-1:  #efeadd;
	--mscs-tab-ghost-2:  #d8caae;
	--mscs-tab-card-bg:  #ffffff;

	/* ---- tuning dials -------------------------------------------- */
	--mscs-max-width:      1200px;
	--mscs-gap:            48px;
	--mscs-radius:         12px;
	--mscs-card-border:    1px solid var(--mscs-border);
	--mscs-section-gap:    80px;
	--mscs-stat-gap:       12px; /* gap between before/arrow/after in the hero stat cards — scaled down on mobile */
	--mscs-stat-font-size: 2.4em;
	--mscs-hero-loop-x:    400px; /* nudges the hero loop background left(-)/right(+) off its centred default — overridden per breakpoint below */
	--mscs-hero-loop-y:    60px; /* nudges the hero loop background up(-)/down(+) off its centred default */

	position: relative;
	max-width: var(--mscs-max-width);
	margin: 0 auto;
	padding: 0 24px;
	color: var(--mscs-body);
	background: transparent;
}

:where(.ms-case-studies) *,
:where(.ms-case-studies) *::before,
:where(.ms-case-studies) *::after {
	box-sizing: border-box;
}

:where(.ms-case-studies) section {
	margin-bottom: var(--mscs-section-gap);
}

/* ================= HERO ================= */
.ms-case-studies__hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mscs-gap);
	align-items: center;
}
/* ---- decorative loop background, behind the stat cards ----
   Sized and bled well past the container per the reference mockups
   (Case Study.png / Tablet_Case_study.pdf) — there the loop spans the
   full page width, clipped only by the viewport. Centred on hero-right
   at roughly 3x its width so it overflows generously on every side
   regardless of column width, rather than chasing an exact 100vw edge
   (which would need to be anchored off .hero, not this half-width
   column, and would fight the column reflow at tablet/mobile).
   Swapped per breakpoint below: desktop (loop_large_case_study), tablet
   (tablet_loop), mobile (phone_loop, once columns swap). */
.ms-case-studies__hero-right {
	position: relative;
}
.ms-case-studies__hero-right::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1400px;
	height: 1386px;
	transform: translate(calc(-50% + var(--mscs-hero-loop-x)), calc(-50% + var(--mscs-hero-loop-y)));
	background: url('../images/loop_large_case_study.svg') no-repeat center / contain;
	z-index: 0;
	pointer-events: none;
}
.ms-case-studies__stat-cards,
.ms-case-studies__esp-logos {
	position: relative;
	z-index: 1;
}
.ms-case-studies__subheader {
	margin: 0 0 16px;
}
.ms-case-studies__subheader-highlight {
	display: inline-block;
	padding: 10px 16px;
	font-weight: 700;
	background-image: url('../images/highlight.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.ms-case-studies__title {
	margin: 0 0 20px;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--mscs-ink);
}
.ms-case-studies__excerpt {
	max-width: 60ch;
	font-size: 18px;
	line-height: 1.6;
}
/* ---- CTA button ----
   Visual styling (colour, padding, shape) comes from the theme's .ms-btn
   class; this only positions it within the hero. */
.ms-case-studies__cta {
	display: inline-block;
	margin-top: 24px;
}
.ms-case-studies__cta-icon {
	display: inline-block;
	width: 14px;
	height: 12px;
	margin-right: 8px;
	vertical-align: middle;
	background-image: url('../images/cta-arrow.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* ---- featured stat cards ---- */
.ms-case-studies__stat-cards {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 20px;
	max-width: 480px;
	margin: 0 auto 40px;
	padding: 30px 0;
}
.ms-case-studies__stat-card {
	flex: 0 0 234px;
	width: 234px;
	height: 306px;
	padding: 32px;
	background: var(--mscs-card-bg, #fff);
	border: var(--mscs-card-border);
	border-radius: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.ms-case-studies__stat-card--0 {
	transform: rotate(-6deg);
	z-index: 1;
}
.ms-case-studies__stat-card--1 {
	transform: rotate(5deg) translateY(-10px);
	margin-left: -40px;
	z-index: 2;
}
.ms-case-studies__stat-card-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}
/* Pushed to the bottom of the fixed-height card via margin-top: auto, so
   the label stays top-aligned regardless of content length. */
.ms-case-studies__stat-values {
	display: flex;
	flex-direction: column;
	gap: var(--mscs-stat-gap);
	margin-top: auto;
	width: 100%;
}
.ms-case-studies__stat-value {
	display: block;
	font-size: var(--mscs-stat-font-size);
	font-weight: 800;
}
.ms-case-studies__stat-value--after {
	padding: 4px 12px;
	background: var(--mscs-green);
	border-radius: 0;
}
/* Same box treatment as .stat-value, so a status-type card (Red/Green
   pills) and a percentage-type card (plain figures) end up the same size. */
.ms-case-studies__stat-pill {
	display: block;
	padding: 4px 12px;
	font-size: var(--mscs-stat-font-size);
	font-weight: 800;
	border-radius: 0;
}
.ms-case-studies__stat-pill--positive {
	background: var(--mscs-green);
}
.ms-case-studies__stat-pill--negative {
	background: var(--mscs-red);
}
.ms-case-studies__stat-arrow {
	align-self: center;
	width: 20px;
	height: 28px;
	background-image: url('../images/card-arrow.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---- ESP logos ---- */
.ms-case-studies__esp-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
}
.ms-case-studies__esp-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 135px;
	height: 75px;
	border: 1px solid var(--ast-global-color-6);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: none;
}
.ms-case-studies__esp-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	box-shadow: none;
}

/* ================= BRIEF ================= */
.ms-case-studies__brief-section {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--mscs-gap);
	align-items: start;
}
.ms-case-studies__brief-card {
	border: var(--mscs-card-border);
	border-radius: var(--mscs-radius);
	overflow: hidden;
	padding: 32px;
}
/* Volume/results column: no border on the parent — each result below is
   its own bordered card. */
.ms-case-studies__volume-card {
	border: none;
}
.ms-case-studies__badge {
	display: inline-block;
	margin-bottom: 16px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	background: var(--mscs-yellow);
	border-radius: 4px;
}
.ms-case-studies__brief-text {
	margin: 0 0 20px;
	line-height: 1.6;
}
.ms-case-studies__brief-rows {
	margin: 0;
}
.ms-case-studies__brief-row {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--mscs-line);
}
.ms-case-studies__brief-row dt {
	flex: 0 0 110px;
	font-weight: 700;
}
.ms-case-studies__brief-row dd {
	margin: 0;
}

.ms-case-studies__volume-header {
	margin: 0 0 16px;
	padding: 20px;
	font-size: 22px;
	font-weight: 800;
	background: var(--mscs-yellow);
	border: none;
	border-radius: 10px;
	text-align: center;
}
.ms-case-studies__result-row {
	margin-bottom: 16px;
	border: 1px solid var(--mscs-border);
	border-radius: 10px;
	overflow: hidden; /* clips the before/after fill to the row's rounded corners */
}
.ms-case-studies__result-row:last-child {
	margin-bottom: 0;
}
.ms-case-studies .ms-case-studies__result-label {
	margin: 0;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	border-bottom: 1px solid var(--ast-global-color-6);
}
.ms-case-studies__result-values {
	position: relative;
	display: flex;
	align-items: stretch;
}
.ms-case-studies__result-before,
.ms-case-studies__result-after {
	flex: 1;
	padding: 14px 10px;
	font-size: 20px;
	font-weight: 800;
	text-align: center;
}
.ms-case-studies__result-before {
	background: none;
}
.ms-case-studies__result-after {
	background: var(--mscs-green);
}
.ms-case-studies__result-sep {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	background-image: url('../images/arrow-icon.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	border-radius: 50%;
}
.ms-case-studies .ms-case-studies__result-single {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	padding: 14px 10px;
	background: var(--mscs-green);
}

/* ================= FOLDER TABS ================= */
.ms-case-studies__tabs {
	position: relative;
	z-index: 0;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
/* ---- decorative loop background, behind the tabs — desktop only, hidden
   at the 1200px breakpoint below ---- */
.ms-case-studies__tabs::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	max-width: 1920px;
	height: 735px;
	transform: translate(-50%, -50%);
	background: url('../images/loop_folder.svg') no-repeat center / contain;
	z-index: -1;
	pointer-events: none;
}
.ms-case-studies__tabs-list {
	display: flex;
	gap: 6px;
	position: relative;
	z-index: 1;
}
.ms-case-studies__tab {
	appearance: none;
	box-sizing: border-box;
	width: 160px;
	background: var(--mscs-tab-0);
	border: 1px solid var(--mscs-border);
	border-radius: 6px 6px 0 0;
	color: var(--mscs-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	padding: 14px 6px;
	cursor: pointer;
	transform: translateY(2px);
	transition: background-color 0.15s ease;
}
.ms-case-studies__tab[data-tab="1"] { background: var(--mscs-tab-1); }
.ms-case-studies__tab[data-tab="2"] { background: var(--mscs-tab-2); }
.ms-case-studies__tab[aria-selected="true"][data-tab="0"] { background: var(--mscs-tab-active-0); }
.ms-case-studies__tab[aria-selected="true"][data-tab="1"] { background: var(--mscs-tab-active-1); }
.ms-case-studies__tab[aria-selected="true"][data-tab="2"] { background: var(--mscs-tab-active-2); }
/* The theme's own button states (hover/focus/active) otherwise strip the
   border on click — lock it (and the other chrome) across every state,
   without touching background so the per-tab colours above still apply. */
.ms-case-studies .ms-case-studies__tab,
.ms-case-studies .ms-case-studies__tab:hover,
.ms-case-studies .ms-case-studies__tab:focus,
.ms-case-studies .ms-case-studies__tab:focus-visible,
.ms-case-studies .ms-case-studies__tab:active {
	border: 1px solid var(--mscs-border) !important;
	border-radius: 6px 6px 0 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

.ms-case-studies__tabs-stack {
	position: relative;
	width: 100%;
}
.ms-case-studies__ghost {
	position: absolute;
	inset: 0;
	border: 1px solid var(--mscs-border);
	border-radius: 0 6px 6px 6px;
	z-index: 1;
}
.ms-case-studies__ghost--1 { background: var(--mscs-tab-ghost-1); transform: translateX(12px); }
.ms-case-studies__ghost--2 { background: var(--mscs-tab-ghost-2); transform: translateX(24px); z-index: 0; }
.ms-case-studies__panel {
	position: relative;
	z-index: 2;
	background: var(--mscs-tab-card-bg);
	border: 1px solid var(--mscs-border);
	border-radius: 0 6px 6px 6px;
	padding: 40px;
	min-height: 440px;
}
.ms-case-studies__panel[hidden] { display: none; }
.ms-case-studies__panel p:last-child { margin-bottom: 0; }

/* ================= STEPS ================= */
.ms-case-studies__steps {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
/* .ms-case-studies__eyebrow otherwise unstyled — renders as a plain h2 so
   it inherits the theme's own heading styles; only alignment is ours. */
.ms-case-studies__eyebrow {
	text-align: center;
}
.ms-case-studies__steps-title {
	margin: 0 0 12px;
	font-size: clamp(26px, 3vw, 36px);
	text-align: center;
}
.ms-case-studies__steps-subtitle {
	max-width: 60ch;
	margin: 0 auto 40px;
	font-size: 1.1em;
	text-align: center;
}
.ms-case-studies__steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.ms-case-studies__step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border: var(--mscs-card-border);
	border-radius: var(--mscs-radius);
	background-color: #ffffff;
}
.ms-case-studies__step-number {
	flex: 0 0 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mscs-border);
	border-radius: 50%;
	font-weight: 700;
}
.ms-case-studies__step-text {
	margin: 0!important;
	line-height: 1.6;
}

/* ================= QUOTE ================= */
.ms-case-studies__quote {
	position: relative;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;
	padding: 48px 48px 48px 100px;
	background: var(--mscs-yellow);
	border-radius: var(--mscs-radius);
	overflow: hidden;
}
.ms-case-studies__quote-mark {
	position: absolute;
	top: 24px;
	right: 32px;
	width: 112px;
	height: 92px;
	background-image: url('../images/quote-marks.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ms-case-studies__quote-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.ms-case-studies__quote-linkedin {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--mscs-ink);
	color: #fff;
	border-radius: 8px;
	font-size: 27px;
	font-weight: 700;
	text-decoration: none;
}
/* The theme's own link hover styles otherwise recolour the "in" text without
   touching the background, making it invisible against the still-dark square —
   invert instead of just re-asserting white-on-dark. The class is doubled up
   to out-specificity theme hover rules that also carry !important (plain
   !important alone only wins ties by source order, which isn't reliable
   against a theme stylesheet). */
.ms-case-studies .ms-case-studies__quote-linkedin.ms-case-studies__quote-linkedin:hover,
.ms-case-studies .ms-case-studies__quote-linkedin.ms-case-studies__quote-linkedin:focus,
.ms-case-studies .ms-case-studies__quote-linkedin.ms-case-studies__quote-linkedin:focus-visible,
.ms-case-studies .ms-case-studies__quote-linkedin.ms-case-studies__quote-linkedin:active {
	background: #ffffff !important;
	color: var(--mscs-ink) !important;
}
.ms-case-studies__quote-contact-info {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.ms-case-studies__quote-name {
	font-weight: 700;
}
.ms-case-studies__quote-role {
	opacity: 0.75;
}
.ms-case-studies__quote-text {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	max-width: 60ch;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
}
.ms-case-studies__quote-stars {
	display: block;
	width: 130px;
	height: 24px;
	background-image: url('../images/stars.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
a.ms-case-studies__quote-stars {
	position: relative;
	z-index: 2;
}

/* When a Trustfolio URL is set, the whole card becomes a link (bg-link is a
   full-cover overlay) while the contact/stars sub-links stay independently
   clickable by sitting above it — see quote.php and quote-cta.php. */
.ms-case-studies__quote--linked,
.ms-case-studies__quote-cta--linked {
	cursor: pointer;
}
.ms-case-studies__quote-bg-link,
.ms-case-studies__quote-cta-bg-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ms-case-studies__quote-contact {
	position: relative;
	z-index: 2;
}

/* ================= QUOTE CTA ([ms_case_study_quote] shortcode) =================
   Same yellow card + radius as .ms-case-studies__quote above, but no quote-mark/
   stars, and fills 100% of whatever container it's dropped into rather than the
   plugin's own 1200px cap — .ms-case-studies__quote-cta-wrap reuses .ms-case-studies
   for its colour/radius dials, then overrides the wrapper's own max-width/padding. */
.ms-case-studies__quote-cta-wrap {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ms-case-studies__quote-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 0; /* overrides :where(.ms-case-studies) section's 80px inter-section gap — not applicable to this standalone shortcode */
	padding: 48px;
	background: var(--mscs-yellow);
	border-radius: var(--mscs-radius);
	overflow: hidden;
}
.ms-case-studies__quote-cta .ms-case-studies__quote-text {
	max-width: none;
	margin: 0;
}
.ms-case-studies__quote-cta-footer {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mscs-gap);
}
.ms-case-studies__quote-cta-footer .ms-case-studies__quote-contact {
	margin-bottom: 0;
}
.ms-case-studies__quote-cta-link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	font-weight: 700;
	white-space: nowrap;
	color: var(--mscs-ink);
	text-decoration: none;
}
.ms-case-studies__quote-cta-arrow {
	display: inline-block;
	width: 14px;
	height: 12px;
	margin-left: 8px;
	background-image: url('../images/cta-arrow.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
@media (max-width: 600px) {
	.ms-case-studies__quote-cta-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ================= RESULTS GRAPH ================= */
/* Breaks out of the .ms-case-studies wrapper's own 1200px cap (which
   otherwise limits every section to ~1152px of content) so this section
   alone can grow up to 1440px. margin-left: 50% + translateX(-50%) centers
   it on the viewport regardless of whether width is the full 100vw or has
   been clamped by max-width, so it never overflows on narrower screens. */
.ms-case-studies__results-graph {
	box-sizing: border-box;
	width: 100vw;
	max-width: 1440px;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-left: 24px;
	padding-right: 24px;
}
/* .ms-case-studies__results-title otherwise unstyled — renders as a plain
   h2 so it inherits the theme's own heading styles; only alignment is ours. */
.ms-case-studies__results-title {
	text-align: center;
}
.ms-case-studies__results-subtitle {
	max-width: 60ch;
	margin: 0 auto 40px;
	font-size: 1.1em;
	text-align: center;
}
.ms-case-studies__bars {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 48px;
}
.ms-case-studies__bar-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* The "container for each results pair": fixed size, bottom border, and a
   1px divider up the centre splitting it into the before/after columns. */
.ms-case-studies__bar-pair {
	position: relative;
	width: 380px;
	max-width: 100%;
	height: 447px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	border-bottom: 1px solid var(--mscs-border);
}
.ms-case-studies__bar-pair::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--mscs-border);
}
/* Each column: value at the top, bar track below it. */
.ms-case-studies__bar-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* Fixed-size track — the full, unfilled bar — always this size regardless
   of the value; the fill inside is what varies with the percentage. */
.ms-case-studies__bar-track {
	position: relative;
	width: 103px;
	height: 383px;
	background: var(--mscs-card-bg);
}
.ms-case-studies__bar-fill {
	--mscs-bar-height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--mscs-bar-height);
	background-image: repeating-linear-gradient(
		45deg,
		rgb(0 0 0 / 12%),
		rgb(0 0 0 / 12%) 2px,
		transparent 2px,
		transparent 8px
	);
}
.ms-case-studies__bar-fill--before,
.ms-case-studies__bar-fill--negative {
	background-color: var(--mscs-tan);
}
.ms-case-studies__bar-fill--after,
.ms-case-studies__bar-fill--positive {
	background-color: var(--mscs-green);
}
.ms-case-studies__bar-fill--negative {
	background-color: var(--mscs-red);
}
.ms-case-studies__bar-value {
	margin-bottom: 8px;
	font-size: 24px;
	font-weight: 800;
}
.ms-case-studies__bar-label {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 16px;
	border: 1px solid var(--mscs-border);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

/* ================= FAQs ================= */
/* Full-bleed background, breaking out of the .ms-case-studies wrapper's own
   1200px cap the same way .results-graph does — but unlike that section,
   nothing caps the section itself here, only the content inside it (via
   .faqs-grid's own max-width below), so the colour spans the whole screen. */
.ms-case-studies__faqs {
	box-sizing: border-box;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding: 60px 24px;
	background: var(--mscs-card-bg);
}
/* 2 columns on desktop/tablet (title left, FAQs right) — stacks to 1
   column only at the mobile breakpoint, unlike most other sections which
   already stack at the 1200px tablet breakpoint. */
.ms-case-studies__faqs-grid {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--mscs-gap);
	align-items: start;
}
.ms-case-studies__faqs-title {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
}
.ms-case-studies__faq {
	padding: 20px 0;
	border-top: 1px solid var(--mscs-line);
}
.ms-case-studies__faq:last-child {
	border-bottom: 1px solid var(--mscs-line);
}
.ms-case-studies__faq-question {
	position: relative;
	padding-right: 36px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.ms-case-studies__faq-question::-webkit-details-marker {
	display: none;
}
.ms-case-studies__faq-question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mscs-border);
	font-size: 16px;
}
.ms-case-studies__faq[open] .ms-case-studies__faq-question::after {
	content: '\2212';
}
.ms-case-studies__faq-answer {
	margin-top: 12px;
	line-height: 1.6;
}
.ms-case-studies__faq-answer p:last-child {
	margin-bottom: 0;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
	:where(.ms-case-studies) {
		--mscs-section-gap: 56px;
		--mscs-hero-loop-x: 0px;
		--mscs-hero-loop-y: 50px;
		padding: 0 16px;
	}
	.ms-case-studies__hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.ms-case-studies__hero-left {
		text-align: center;
	}
	.ms-case-studies__hero-right::before {
		width: 1100px;
		height: 655px;
		background-image: url('../images/tablet_loop.svg');
	}
	.ms-case-studies__tabs::before {
		display: none;
	}
	.ms-case-studies__excerpt {
		margin-left: auto;
		margin-right: auto;
	}
	.ms-case-studies__brief-section {
		grid-template-columns: 1fr;
	}
	.ms-case-studies__stat-cards {
		max-width: 100%;
	}
	.ms-case-studies__volume-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.ms-case-studies__volume-header {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}
	.ms-case-studies__result-row {
		margin-bottom: 0;
	}
	.ms-case-studies__bars {
		gap: 24px;
	}
}

@media (max-width: 600px) {
	:where(.ms-case-studies) {
		/* Scaled down to fit the 113x147 mobile card — the 32px/2.3em
		   desktop values would overflow a card this small. */
		--mscs-stat-gap: 10px;
		--mscs-stat-font-size: 1.2em;
		--mscs-hero-loop-y: -80px; /* independent of the tablet value above — was inheriting it until now */
	}
	/* Swap the hero columns so the stat cards lead, per the mobile mockup. */
	.ms-case-studies__hero-right {
		order: -1;
	}
	.ms-case-studies__hero-right::before {
		width: 700px;
		height: 261px;
		background-image: url('../images/phone_loop.svg');
	}
	.ms-case-studies__stat-card {
		flex-basis: 113px;
		width: 113px;
		height: 147px;
		padding: 10px;
	}
	.ms-case-studies__stat-arrow {
		width: 12px;
		height: 17px;
	}
	.ms-case-studies__stat-card-label {
		font-size: 0.3em;
	}
	.ms-case-studies__tabs-list {
		flex-wrap: wrap;
	}
	.ms-case-studies__tab {
		width: auto;
		flex: 1 1 auto;
	}
	.ms-case-studies__faqs-grid {
		grid-template-columns: 1fr;
	}
}