/* MIDO PHASE 10.7.1F PROJECT MEDIA RESPONSIVE ROW + FRAME CLEANUP ACTIVE */
/* =============================================================================
   17b__project-case.css
   New case study sections: snapshot, overview, highlights, outcome, editor,
   gallery, testimonial.

   All selectors scoped under .cbm-project-case__ or .cbm-project-gallery__.
   Reuses existing globals (.cbm-shell, .cbm-content-body, etc.).
   Does not touch .cbm-project-single__ selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED BLOCK PATTERN — overview / highlights / outcome / editor
   -------------------------------------------------------------------------- */
.cbm-project-case__block {
	padding-block: clamp(32px, 4vw, 56px) 0;
}
.cbm-project-case__block-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid rgba(197, 166, 211, 0.08);
}
/* PART 4: Section block labels — eyebrow style (sans, letterspaced) */
.cbm-project-case__block-label {
	font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent, #8E63A3);
	margin: 0 0 14px;
	line-height: 1.4;
}
/* PART 4: Section headings — display/Migra font for section titles */
.cbm-project-case__section-heading {
	font-family: var(--font-display, "Migra", "Playfair Display", Georgia, serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	color: var(--text-primary, #F6F2F7);
	margin: 0 0 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.cbm-project-case__block-body {
	max-width: 68ch;
	color: var(--text-secondary, #DDD6E3);
	line-height: 1.7;
}
.cbm-project-case__block-body p + p {
	margin-top: 1em;
}

/* --------------------------------------------------------------------------
   PROJECT SNAPSHOT
   -------------------------------------------------------------------------- */
.cbm-project-case__snapshot {
	padding-block: clamp(32px, 4vw, 56px);
}
.cbm-project-case__snapshot-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
}
.cbm-project-case__snapshot-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid rgba(197, 166, 211, 0.10);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(27, 22, 32, 0.55);
	margin: 0;
	padding: 0;
}
.cbm-project-case__snapshot-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 24px;
	flex: 1 1 160px;
	min-width: 140px;
	border-right: 1px solid rgba(197, 166, 211, 0.07);
	border-bottom: 1px solid rgba(197, 166, 211, 0.07);
}
.cbm-project-case__snapshot-row:last-child {
	border-right: none;
}
.cbm-project-case__snapshot-row dt {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted, #AFA4B8);
	line-height: 1.4;
	margin: 0;
}
.cbm-project-case__snapshot-row dd {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-primary, #F6F2F7);
	line-height: 1.4;
	margin: 0;
}
.cbm-project-case__snapshot-link {
	color: var(--text-primary, #F6F2F7);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cbm-project-case__snapshot-link::after {
	content: '↗';
	font-size: 11px;
	color: #B78CFF;
	display: inline-block;
}
.cbm-project-case__snapshot-link:hover {
	color: #B78CFF;
}

/* --------------------------------------------------------------------------
   HIGHLIGHTS — Part 3: purple dot markers (restored)
   -------------------------------------------------------------------------- */
.cbm-project-case__highlights-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 72ch;
}
.cbm-project-case__highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: clamp(15px, 1.4vw, 17px);
	color: var(--text-secondary, #DDD6E3);
	line-height: 1.55;
}
/* Purple dot marker — replaces old arrow */
.cbm-project-case__highlight-mark {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #B78CFF;
	margin-top: 8px;
	box-shadow: 0 0 6px rgba(183, 140, 255, 0.35);
}

/* --------------------------------------------------------------------------
   OUTCOME — distinct glass-like block
   -------------------------------------------------------------------------- */
.cbm-project-case__outcome .cbm-project-case__block-inner {
	border-bottom: none;
}
.cbm-project-case__outcome .cbm-project-case__block-body {
	background: rgba(142, 99, 163, 0.06);
	border: 1px solid rgba(142, 99, 163, 0.15);
	border-radius: 12px;
	padding: 24px 28px;
	color: var(--text-primary, #F6F2F7);
	font-size: clamp(15px, 1.4vw, 17px);
	max-width: 72ch;
}

/* --------------------------------------------------------------------------
   EDITOR (case-study long form)
   -------------------------------------------------------------------------- */
.cbm-project-case__editor {
	padding-block: clamp(40px, 5vw, 72px);
}
.cbm-project-case__editor-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
	max-width: 72ch;
}
.cbm-project-case__editor-inner h2,
.cbm-project-case__editor-inner h3,
.cbm-project-case__editor-inner h4 {
	color: var(--text-primary, #F6F2F7);
	font-family: var(--font-display, "Playfair Display", Georgia, serif);
	font-weight: 600;
	margin: 1.6em 0 0.6em;
	line-height: 1.25;
}
.cbm-project-case__editor-inner p {
	color: var(--text-secondary, #DDD6E3);
	line-height: 1.7;
	margin: 0 0 1.1em;
}
.cbm-project-case__editor-inner ul,
.cbm-project-case__editor-inner ol {
	color: var(--text-secondary, #DDD6E3);
	padding-left: 1.4em;
	margin: 0 0 1.1em;
}
.cbm-project-case__editor-inner li {
	margin-bottom: 0.45em;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   GALLERY — shared
   -------------------------------------------------------------------------- */
.cbm-project-case__gallery {
	padding-block: clamp(48px, 6vw, 80px);
	overflow-x: clip; /* MIDO PHASE 10.7.1F: prevent scroll rails from causing page overflow */
}
.cbm-project-case__gallery-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
}
.cbm-project-case__gallery-intro {
	max-width: 60ch;
	margin: 0 0 clamp(24px, 3vw, 40px);
	color: var(--text-muted, #AFA4B8);
	font-size: 14px;
	line-height: 1.6;
}
.cbm-project-case__gallery-heading {
	margin-bottom: 8px;
}

/* Gallery grid */
.cbm-project-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 1.5vw, 20px);
}
.cbm-project-gallery__item--full {
	grid-column: 1 / -1;
}
.cbm-project-gallery__item--half {
	grid-column: span 1;
}

/* Gallery figure */
/* MIDO PHASE 10.7.1E: No black background — image fills container naturally */
.cbm-project-gallery__figure {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	/* No background: #050505 — eliminates black space when image doesn't fill a forced box */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s ease;
}
/* MIDO PHASE 10.7.1E: Natural display — width:100% height:auto, no forced crop */
.cbm-project-gallery__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover lift */
.cbm-project-gallery__item:hover .cbm-project-gallery__figure {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55),
	            0 0 0 1px rgba(197, 166, 211, 0.14);
}
.cbm-project-gallery__item:hover .cbm-project-gallery__img {
	transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   GALLERY REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.cbm-project-gallery__item {
	/* Phase 10.2.1: default visible */
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Phase 10.2.1: only hide when JS is active */
.js-enabled .cbm-project-gallery__item {
	opacity: 0;
	transform: translateY(28px);
}

.cbm-project-gallery__item--half:nth-child(even) {
	transition-delay: 0.10s;
}
.cbm-project-gallery__item.cbm-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.cbm-project-gallery__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   GALLERY — Branding modifier (editorial rhythm)
   -------------------------------------------------------------------------- */
.cbm-project-gallery--branding .cbm-project-gallery__figure {
	aspect-ratio: unset; /* let images breathe at natural ratio */
}
.cbm-project-gallery--branding .cbm-project-gallery__item--full .cbm-project-gallery__figure {
	border-radius: 18px;
}
/* MIDO PHASE 10.7.1E: Branding — natural display, no contain/cover empty-space */
.cbm-project-gallery--branding .cbm-project-gallery__img {
	/* Inherits natural height:auto from base rule */
}

/* --------------------------------------------------------------------------
   GALLERY — Digital modifier (screen flow)
   -------------------------------------------------------------------------- */
/* MIDO PHASE 10.7.1E: Digital — natural proportion, no forced 16/10 box */
.cbm-project-gallery--digital .cbm-project-gallery__figure {
	/* No forced aspect-ratio — image height is natural */
}

/* --------------------------------------------------------------------------
   TESTIMONIAL
   -------------------------------------------------------------------------- */
.cbm-project-case__testimonial {
	padding-block: clamp(48px, 6vw, 80px);
}
.cbm-project-case__testimonial-inner {
	width: var(--site-w);
	max-width: 72ch;
	margin-inline: auto;
}
.cbm-project-case__quote {
	margin: 0;
	padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
	background: rgba(27, 22, 32, 0.6);
	border: 1px solid rgba(197, 166, 211, 0.10);
	border-left: 3px solid var(--accent, #8E63A3);
	border-radius: 0 14px 14px 0;
	position: relative;
}
.cbm-project-case__quote::before {
	content: '\201C';
	position: absolute;
	top: -8px;
	left: clamp(20px, 3vw, 32px);
	font-size: 64px;
	font-family: var(--font-display, "Playfair Display", Georgia, serif);
	color: var(--accent, #8E63A3);
	opacity: 0.3;
	line-height: 1;
}
.cbm-project-case__quote-text {
	font-size: clamp(16px, 1.5vw, 19px);
	font-family: var(--font-display, "Playfair Display", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-primary, #F6F2F7);
	margin: 0 0 14px;
}
.cbm-project-case__quote-cite {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted, #AFA4B8);
	font-style: normal;
	display: block;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.cbm-project-gallery {
		grid-template-columns: 1fr;
	}
	.cbm-project-gallery__item--half {
		grid-column: 1 / -1;
	}
	.cbm-project-case__snapshot-grid {
		flex-direction: column;
	}
	.cbm-project-case__snapshot-row {
		border-right: none;
	}
}

/* =============================================================================
   MIDO PHASE 10.4.2 — GALLERY ASPECT-RATIO LAYOUT
   Wide images: full gallery width.
   Portrait rows: 3-col grid of portrait cards in natural portrait ratio.
   Maintains existing spacing, border, glow, hover, reveal animation.
   ============================================================================= */

/* ── Gallery grid: single-column flow, segments stack vertically ── */
.cbm-project-gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.5vw, 20px);
}

/* ── Wide item: full gallery width ── */
.cbm-project-gallery__item--wide {
	width: 100%;
}
/* MIDO PHASE 10.7.1E: Wide figure — natural proportion, no 16/9 crop, no black space */
.cbm-project-gallery__figure--wide {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	/* No background, no aspect-ratio — image fills at natural dimensions */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s ease;
}
.cbm-project-gallery__figure--wide .cbm-project-gallery__img {
	width: 100%;
	height: auto;
	display: block;
}
.cbm-project-gallery__item--wide:hover .cbm-project-gallery__figure--wide {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55),
	            0 0 0 1px rgba(197, 166, 211, 0.14),
	            0 0 24px rgba(183, 140, 255, 0.06);
}
.cbm-project-gallery__item--wide:hover .cbm-project-gallery__figure--wide .cbm-project-gallery__img {
	transform: scale(1.015);
}

/* ── Portrait row: 3-column group ── */
.cbm-project-gallery__portrait-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.2vw, 16px);
	width: 100%;
}

/* Portrait card wrapper */
.cbm-project-gallery__portrait-card {
	width: 100%;
}

/* MIDO PHASE 10.7.1E: Portrait figure — 1183/2560 ratio (real app screenshot), object-fit:contain */
/* aspect-ratio stabilises the card shape; contain shows full image — NO crop, NO black space */
.cbm-project-gallery__figure--portrait {
	aspect-ratio: 1183 / 2560;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	/* No background — image fills with contain, no empty canvas visible */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s ease;
}
.cbm-project-gallery__figure--portrait .cbm-project-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cbm-project-gallery__portrait-card:hover .cbm-project-gallery__figure--portrait {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55),
	            0 0 0 1px rgba(197, 166, 211, 0.14),
	            0 0 24px rgba(183, 140, 255, 0.06);
}
.cbm-project-gallery__portrait-card:hover .cbm-project-gallery__figure--portrait .cbm-project-gallery__img {
	transform: scale(1.02);
}

/* ── Subtle lavender glow on portrait row ── */
.cbm-project-gallery__portrait-row::before {
	content: '';
	display: none; /* decorative only via box-shadow on the row */
}

/* ── Reveal animation — portrait-row as a whole unit ── */
.cbm-project-gallery__portrait-row.cbm-project-gallery__item {
	/* portrait row participates in the same reveal system as items */
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-enabled .cbm-project-gallery__portrait-row.cbm-project-gallery__item {
	opacity: 0;
	transform: translateY(28px);
}
.cbm-project-gallery__portrait-row.cbm-project-gallery__item.cbm-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ── Branding modifier — portrait cards use object-fit:contain + padding ── */
/* MIDO PHASE 10.7.1E: Branding portrait/wide — natural from base rules */
.cbm-project-gallery--branding .cbm-project-gallery__figure--portrait .cbm-project-gallery__img {
	/* Inherits object-fit:contain from base portrait rule */
}
.cbm-project-gallery--branding .cbm-project-gallery__figure--wide .cbm-project-gallery__img {
	/* Natural height:auto from base img rule */
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.cbm-project-gallery__portrait-row.cbm-project-gallery__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.cbm-project-gallery__figure--wide,
	.cbm-project-gallery__figure--portrait {
		transition: none !important;
	}
	.cbm-project-gallery__figure--wide .cbm-project-gallery__img,
	.cbm-project-gallery__figure--portrait .cbm-project-gallery__img {
		transition: none !important;
	}
}

/* ── Tablet: portrait group 2+1 ── */
@media (max-width: 900px) and (min-width: 561px) {
	.cbm-project-gallery__portrait-row {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Third portrait card goes full width on tablet */
	.cbm-project-gallery__portrait-card:nth-child(3) {
		grid-column: 1 / -1;
	}
	/* MIDO PHASE 10.7.1E: 3rd card keeps 1183/2560 ratio — no forced landscape */
	.cbm-project-gallery__portrait-card:nth-child(3) .cbm-project-gallery__figure--portrait {
		/* Inherits 1183/2560 from base rule */
	}
}

/* ── Mobile: portrait cards horizontal swipe row ── */
@media (max-width: 560px) {
	.cbm-project-gallery {
		gap: 12px;
	}
	.cbm-project-gallery__portrait-row {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 10px;
		padding-bottom: 6px;
	}
	.cbm-project-gallery__portrait-row::-webkit-scrollbar { display: none; }
	.cbm-project-gallery__portrait-card {
		flex: 0 0 72vw;
		scroll-snap-align: start;
		max-width: 260px;
	}
	/* MIDO PHASE 10.7.1E: Mobile portrait/wide — natural from base rules */
	.cbm-project-gallery__figure--portrait {
		/* Inherits 1183/2560 from base rule */
	}
	.cbm-project-gallery__figure--wide {
		/* Natural proportion — no forced ratio */
	}
}

/* ── PHASE 10.4.3 PROJECT BODY LAYOUT FIX — no left-stuck dead space ── */

/* Overview / Highlights / Outcome block: two-col editorial layout */
.cbm-project-case__block-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: clamp(24px, 3vw, 48px);
	row-gap: 4px; /* MIDO PHASE 10.7.1: tight — label and heading are siblings in same col */
	align-items: start;
	border-bottom: none; /* Part 5: remove divider */
	padding-bottom: clamp(32px, 4vw, 56px);
}

/* Label + section heading span left col */
.cbm-project-case__block-label,
.cbm-project-case__section-heading {
	/* stay in left column — markup order handles this */
}

/* Body text + list span right column */
.cbm-project-case__block-body,
.cbm-project-case__highlights-list {
	grid-column: 2;
	max-width: none; /* remove narrow 68ch cap — grid manages width */
}

/* Section heading spans full row for highlights/outcome */
.cbm-project-case__highlights .cbm-project-case__section-heading,
.cbm-project-case__outcome .cbm-project-case__section-heading {
	grid-column: 1;
}

/* Overview: label col 1, heading col 1, body col 2 */
.cbm-project-case__overview .cbm-project-case__block-label { grid-column: 1; }
.cbm-project-case__overview .cbm-project-case__section-heading { grid-column: 1; }
.cbm-project-case__overview .cbm-project-case__block-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Highlights: label + heading col 1, list col 2 */
.cbm-project-case__highlights .cbm-project-case__block-label { grid-column: 1; }
.cbm-project-case__highlights .cbm-project-case__section-heading { grid-column: 1; }
.cbm-project-case__highlights .cbm-project-case__highlights-list { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Outcome: similar two-col */
.cbm-project-case__outcome .cbm-project-case__block-label { grid-column: 1; }
.cbm-project-case__outcome .cbm-project-case__section-heading { grid-column: 1; }
.cbm-project-case__outcome .cbm-project-case__block-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: none; }

/* Outcome body box — keep the styled block but let it fill col width */
.cbm-project-case__outcome .cbm-project-case__block-body {
	max-width: none;
}

/* Editor — keep readable text width but centered, not left-stuck */
.cbm-project-case__editor-inner {
	width: var(--site-w);
	max-width: 80ch; /* wider than 72ch, still readable */
	margin-inline: auto;
}

/* Gallery heading area — two-col label + heading */
.cbm-project-case__gallery-inner > .cbm-project-case__block-label,
.cbm-project-case__gallery-inner > .cbm-project-case__section-heading {
	/* These render inline, allow full width */
}

/* MIDO PHASE 10.7.1E: Testimonial — centered, with label breathing room */
.cbm-project-case__testimonial-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
	display: grid;
	place-items: center;
	row-gap: clamp(20px, 2.5vw, 32px);
}
.cbm-project-case__quote {
	max-width: 70ch;
	text-align: center;
}

/* Mobile: collapse to single column */
@media (max-width: 760px) {
	.cbm-project-case__block-inner {
		grid-template-columns: 1fr;
	}
	.cbm-project-case__block-body,
	.cbm-project-case__highlights-list,
	.cbm-project-case__overview .cbm-project-case__block-body,
	.cbm-project-case__highlights .cbm-project-case__highlights-list,
	.cbm-project-case__outcome .cbm-project-case__block-body {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ── PHASE 10.4.3 PROJECT SNAPSHOT BOX REDESIGN ──
   Replaces messy flex-wrap spreadsheet look.
   New design: dark glass card, 2-col label/value grid rows,
   Live link as a highlighted CTA row, clean hierarchy.
   Fully responsive — stacks gracefully on mobile. */

/* Container — glass card style */
.cbm-project-case__snapshot {
	padding-block: clamp(28px, 3.5vw, 48px) clamp(20px, 2.5vw, 36px);
}

.cbm-project-case__snapshot-inner {
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
}

/* Override old flex-wrap grid with a clean stacked layout */
.cbm-project-case__snapshot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1px solid rgba(197, 166, 211, 0.12);
	border-radius: 18px;
	overflow: hidden;
	background: rgba(20, 16, 23, 0.70);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.06),
		0 16px 48px rgba(0,0,0,.28);
	margin: 0;
	padding: 0;
}

/* Each row: label left, value right */
.cbm-project-case__snapshot-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: center;
	gap: 0 clamp(16px, 2vw, 28px);
	padding: clamp(14px, 1.8vw, 18px) clamp(20px, 2.5vw, 28px);
	border-bottom: 1px solid rgba(197, 166, 211, 0.06);
	flex: none;
	min-width: 0;
	transition: background 200ms ease;
}
.cbm-project-case__snapshot-row:last-child {
	border-bottom: none;
	border-right: none;
}
.cbm-project-case__snapshot-row:hover {
	background: rgba(183, 140, 255, 0.03);
}

/* Label */
.cbm-project-case__snapshot-row dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-muted, #7C7284);
	line-height: 1.4;
	margin: 0;
	white-space: nowrap;
}

/* Value */
.cbm-project-case__snapshot-row dd {
	font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
	font-size: clamp(13px, 1.3vw, 14.5px);
	font-weight: 500;
	color: var(--text-primary, #F6F2F7);
	line-height: 1.45;
	margin: 0;
}

/* Live link row — visually elevated */
.cbm-project-case__snapshot-row--live {
	background: rgba(183, 140, 255, 0.04);
	border-top: 1px solid rgba(183, 140, 255, 0.10);
	border-bottom: none;
}
.cbm-project-case__snapshot-row--live dt {
	color: rgba(183, 140, 255, 0.7);
}

/* Live link button */
.cbm-project-case__snapshot-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #B78CFF;
	text-decoration: none;
	font-size: clamp(12.5px, 1.2vw, 14px);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: color 200ms ease, gap 200ms ease;
	padding: 4px 0;
}
.cbm-project-case__snapshot-link::after {
	content: '↗';
	font-size: 12px;
	display: inline-block;
	color: inherit;
	transition: transform 200ms ease;
}
.cbm-project-case__snapshot-link:hover {
	color: #DDD6E3;
	gap: 9px;
}
.cbm-project-case__snapshot-link:hover::after {
	transform: translate(2px, -2px);
}

/* Mobile: wider label column */
@media (max-width: 560px) {
	.cbm-project-case__snapshot-row {
		grid-template-columns: 90px 1fr;
		padding: 12px 16px;
	}
}

/* =============================================================================
   MIDO PHASE 10.4.4 — TESTIMONIAL v2 + GALLERY TABLET SLIDER
   ============================================================================= */

/* ── Testimonial v2 — proper quote icon, body font, client name ── */
.cbm-project-case__quote--v2 {
	position: relative;
	padding: clamp(32px, 4vw, 48px) clamp(28px, 3.5vw, 40px);
	background: rgba(20, 16, 23, 0.65);
	border: 1px solid rgba(183, 140, 255, 0.14);
	border-radius: 20px;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05),
		0 16px 48px rgba(0,0,0,.28);
	/* Remove old left-border quote style */
	border-left: 1px solid rgba(183, 140, 255, 0.14);
}

/* Override old ::before quote character on v2 */
.cbm-project-case__quote--v2::before {
	content: none;
}

/* Quote icon — SVG placed inside, properly sized */
.cbm-project-case__quote-icon {
	display: block;
	width: 36px;
	height: 28px;
	color: #8E63A3;
	opacity: 0.5;
	margin: 0 0 20px;
	flex-shrink: 0;
}
.cbm-project-case__quote-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Quote text — body font (Blauer Nue), NOT display font */
.cbm-project-case__quote-text--body {
	font-family: var(--font-sans, "DM Sans", system-ui, sans-serif) !important;
	font-style: normal !important;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.72;
	color: var(--text-secondary, #DDD6E3);
	font-weight: 400;
}

/* Client name */
.cbm-project-case__quote-name {
	display: block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--text-primary, #F6F2F7);
	margin-top: 4px;
}

/* Client role */
.cbm-project-case__quote-role {
	display: block;
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted, #7C7284);
	margin-top: 3px;
}

/* cite reset */
.cbm-project-case__quote-cite {
	margin-top: 18px;
	font-style: normal;
	display: block;
}

/* ── Gallery tablet: horizontal scroll like phone ── */
@media (max-width: 900px) and (min-width: 561px) {
	.cbm-project-gallery__portrait-row {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 12px;
		padding-bottom: 8px;
	}
	.cbm-project-gallery__portrait-row::-webkit-scrollbar {
		display: none;
	}
	.cbm-project-gallery__portrait-card {
		flex: 0 0 54vw;
		max-width: 280px;
		scroll-snap-align: start;
		grid-column: unset;
	}
	/* Override the 2+1 layout from old tablet rule */
	.cbm-project-gallery__portrait-card:nth-child(3) {
		grid-column: unset;
	}
	/* MIDO PHASE 10.7.1E: Natural ratio from base rule */
	.cbm-project-gallery__portrait-card:nth-child(3) .cbm-project-gallery__figure--portrait {
		/* Inherits 1183/2560 */
	}
	/* Scroll hint — subtle gradient fade on right edge */
	.cbm-project-gallery__portrait-row::after {
		content: '';
		position: sticky;
		right: 0;
		top: 0;
		width: 48px;
		height: 100%;
		flex-shrink: 0;
		background: linear-gradient(to right, transparent, rgba(13,13,13,.7));
		pointer-events: none;
	}
}

/* =============================================================================
   MIDO PHASE 10.4.4 — PROJECT CONTENT SECTIONS CARD-STACK SYSTEM
   Overview / Highlights / Outcome presented as premium dark cards.
   Smooth entry animation: cards slide up + fade in as user scrolls.
   Previous section titles remain visible (stacked effect via sticky).
   Motion: visible-first, no opacity:0 dependency, prefers-reduced-motion safe.
   Gallery Images: UNTOUCHED.
   ============================================================================= */

/* ── Card wrapper for each content section ── */
.cbm-project-case__block {
	padding-block: 0;
}

/* Each block-inner becomes a premium dark card */
.cbm-project-case__block-inner {
	background: rgba(20, 16, 23, 0.60);
	border: 1px solid rgba(183, 140, 255, 0.10);
	border-radius: 20px;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.04),
		0 12px 40px rgba(0,0,0,.22);
	padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 44px) !important;
	margin-bottom: clamp(16px, 2vw, 24px);
	/* Grid stays from 10.4.3 — label/heading left, body right */
}

/* Tighten label margin — col-gap does spacing work now */
.cbm-project-case__block-label {
	margin-bottom: 2px;
}
.cbm-project-case__section-heading {
	margin-bottom: 0;
}

/* Body text readable width inside card */
.cbm-project-case__block-body {
	color: var(--text-secondary, #DDD6E3);
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.75;
}

/* ── Card entry animation — visible-first, JS-enhanced ── */
.cbm-project-case__block-inner {
	/* Default: fully visible */
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* When JS is active, start offscreen and reveal via .cbm-case-revealed */
.js-enabled .cbm-project-case__block-inner {
	opacity: 0;
	transform: translateY(32px);
}

.cbm-project-case__block-inner.cbm-case-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger: Highlights slightly after Overview, Outcome after Highlights */
.cbm-project-case__highlights .cbm-project-case__block-inner {
	transition-delay: 0.08s;
}
.cbm-project-case__outcome .cbm-project-case__block-inner {
	transition-delay: 0.14s;
}

/* ── Reduced motion: no animation ── */
@media (prefers-reduced-motion: reduce) {
	.cbm-project-case__block-inner {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.js-enabled .cbm-project-case__block-inner {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── Gallery intro area — tighter, matches card rhythm ── */
.cbm-project-case__gallery-inner {
	padding-top: clamp(8px, 1.5vw, 16px);
}

/* =============================================================================
   MIDO PHASE 10.7.1 — PROJECT MEDIA SYSTEM + SPACING FIX
   New layout classes: full (natural), half, third, portrait-slider, motion/GIF/video.
   Section spacing fix: reduce gap between eyebrow label and section heading.
   ============================================================================= */

/* ── PART 6: Section spacing fix ─────────────────────────────────────────── */
/* The grid gap causes too much space between label and heading in same column.
   Fix: tighten row gap for the left-column (label + heading) only. */
.cbm-project-case__block-inner {
	row-gap: 4px; /* tighten label→heading gap in left col */
}
/* Restore normal gap between left-col group and right-col body */
.cbm-project-case__overview .cbm-project-case__block-body,
.cbm-project-case__highlights .cbm-project-case__highlights-list,
.cbm-project-case__outcome .cbm-project-case__block-body {
	margin-top: 0; /* body is in col 2, row-gap doesn't affect cross-col */
}

/* ── PART 3: Full-width natural ratio ────────────────────────────────────── */
/* Replaces forced 16/9 crop with natural image dimensions */
.cbm-project-gallery__figure--natural {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	/* No background — height:auto means container always equals image height */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s ease;
}
.cbm-project-gallery__figure--natural .cbm-project-gallery__img {
	width: 100%;
	height: auto; /* CRITICAL: natural aspect ratio — no crop */
	display: block;
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cbm-project-gallery__item--wide:hover .cbm-project-gallery__figure--natural {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55),
	            0 0 0 1px rgba(197, 166, 211, 0.14),
	            0 0 24px rgba(183, 140, 255, 0.06);
}
.cbm-project-gallery__item--wide:hover .cbm-project-gallery__figure--natural .cbm-project-gallery__img {
	transform: scale(1.015);
}

/* ── PART 2: Half-width pair ─────────────────────────────────────────────── */
.cbm-project-gallery__item--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(10px, 1.2vw, 16px);
	width: 100%;
}
.cbm-project-gallery__figure--half {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cbm-project-gallery__figure--half .cbm-project-gallery__img {
	width: 100%;
	height: auto;
	display: block;
}
.cbm-project-gallery__item--pair:hover .cbm-project-gallery__figure--half {
	transform: translateY(-3px);
}

/* ── PART 3: Third-width trio ────────────────────────────────────────────── */
.cbm-project-gallery__item--trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 1vw, 14px);
	width: 100%;
}
.cbm-project-gallery__figure--third {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cbm-project-gallery__figure--third .cbm-project-gallery__img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── PART 4: Portrait slider ─────────────────────────────────────────────── */
.cbm-project-gallery__item--slider {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.cbm-project-gallery__slider-rail {
	display: flex;
	gap: clamp(10px, 1.2vw, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 12px;
	/* Hide scrollbar aesthetically */
	scrollbar-width: thin;
	scrollbar-color: rgba(183, 140, 255, 0.3) transparent;
}
.cbm-project-gallery__slider-rail::-webkit-scrollbar {
	height: 4px;
}
.cbm-project-gallery__slider-rail::-webkit-scrollbar-track {
	background: transparent;
}
.cbm-project-gallery__slider-rail::-webkit-scrollbar-thumb {
	background: rgba(183, 140, 255, 0.3);
	border-radius: 2px;
}
/* Portrait cards inside slider */
.cbm-project-gallery__item--slider .cbm-project-gallery__portrait-card {
	flex-shrink: 0;
	width: clamp(180px, 28vw, 280px);
	scroll-snap-align: start;
}
/* MIDO PHASE 10.7.1E: Slider portrait — 1183/2560 + contain — full screenshot visible */
.cbm-project-gallery__item--slider .cbm-project-gallery__figure--portrait {
	aspect-ratio: 1183 / 2560;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	/* No background — contain fills card with full screenshot, no black area */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
}
.cbm-project-gallery__item--slider .cbm-project-gallery__figure--portrait .cbm-project-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cbm-project-gallery__slider-hint {
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--text-muted, #AFA4B8);
	margin: 8px 0 0;
	text-align: right;
	font-family: var(--font-sans, "DM Sans", system-ui, sans-serif);
}

/* ── PART 5: Video / Motion / GIF ────────────────────────────────────────── */
.cbm-project-gallery__item--motion {
	width: 100%;
}
.cbm-project-gallery__figure--motion {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(197, 166, 211, 0.09);
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
}
.cbm-project-gallery__video {
	width: 100%;
	height: auto;
	display: block;
	/* No controls by default — autoplay muted loop */
}
.cbm-project-gallery__img--gif {
	width: 100%;
	height: auto;
	display: block;
}


/* MIDO PHASE 10.7.1F: Tablet trio — horizontal scroll rail (not 2+1 grid) */
@media (max-width: 900px) and (min-width: 561px) {
	.cbm-project-gallery__item--trio {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: clamp(10px, 2vw, 16px);
		padding-bottom: 10px;
		scrollbar-width: thin;
		scrollbar-color: rgba(183, 140, 255, 0.3) transparent;
	}
	.cbm-project-gallery__item--trio .cbm-project-gallery__figure--third {
		flex: 0 0 clamp(260px, 38vw, 420px);
		min-width: 0;
		scroll-snap-align: start;
		width: clamp(260px, 38vw, 420px);
	}
}

/* ── Responsive: half → stack on mobile, third → horizontal scroll rail ────── */
/* MIDO PHASE 10.7.1F: Third-width scrolls horizontally on tablet/mobile instead of 2+1 stack */
@media (max-width: 760px) {
	.cbm-project-gallery__item--pair {
		grid-template-columns: 1fr;
	}
	/* Third-width: convert to horizontal scroll rail — never 2+1 */
	.cbm-project-gallery__item--trio {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: clamp(10px, 3vw, 16px);
		padding-bottom: 10px;
		scrollbar-width: thin;
		scrollbar-color: rgba(183, 140, 255, 0.3) transparent;
	}
	.cbm-project-gallery__item--trio::-webkit-scrollbar { height: 4px; }
	.cbm-project-gallery__item--trio::-webkit-scrollbar-track { background: transparent; }
	.cbm-project-gallery__item--trio::-webkit-scrollbar-thumb { background: rgba(183, 140, 255, 0.3); border-radius: 2px; }
	/* Each third card becomes a fixed-width scroll card */
	.cbm-project-gallery__item--trio .cbm-project-gallery__figure--third {
		flex: 0 0 clamp(220px, 72vw, 320px);
		min-width: 0;
		scroll-snap-align: start;
		width: clamp(220px, 72vw, 320px);
	}
	.cbm-project-gallery__item--slider .cbm-project-gallery__portrait-card {
		width: clamp(150px, 70vw, 220px);
	}
}
@media (max-width: 480px) {
	/* Keep trio as flex scroll — already handled above, no grid fallback needed */
	.cbm-project-gallery__item--trio .cbm-project-gallery__figure--third {
		flex: 0 0 clamp(200px, 80vw, 300px);
		width: clamp(200px, 80vw, 300px);
	}
}

/* MIDO PHASE 10.7.1F: Branding modifier overrides — images fill edge-to-edge, no inner padding/frame */
.cbm-project-gallery--branding .cbm-project-gallery__figure--natural .cbm-project-gallery__img {
	/* Natural: width:100% height:auto — no contain, no padding, no dark background */
}
.cbm-project-gallery--branding .cbm-project-gallery__figure--half .cbm-project-gallery__img,
.cbm-project-gallery--branding .cbm-project-gallery__figure--third .cbm-project-gallery__img {
	/* Natural: inherits base width:100% height:auto — no inner frame */
}

/* ── Reveal animation for new item types ─────────────────────────────────── */
.cbm-project-gallery__item--motion,
.cbm-project-gallery__item--pair,
.cbm-project-gallery__item--trio,
.cbm-project-gallery__item--slider {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-enabled .cbm-project-gallery__item--motion,
.js-enabled .cbm-project-gallery__item--pair,
.js-enabled .cbm-project-gallery__item--trio,
.js-enabled .cbm-project-gallery__item--slider {
	opacity: 0;
	transform: translateY(28px);
}
.cbm-project-gallery__item--motion.cbm-revealed,
.cbm-project-gallery__item--pair.cbm-revealed,
.cbm-project-gallery__item--trio.cbm-revealed,
.cbm-project-gallery__item--slider.cbm-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.cbm-project-gallery__item--motion,
	.cbm-project-gallery__item--pair,
	.cbm-project-gallery__item--trio,
	.cbm-project-gallery__item--slider {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}