/* ==========================================================================
   Case Study v3 – outcome-led layout
   Scope: everything lives under `.cs3` so it cannot leak into other pages.
   Per-page colours come from inline CSS vars set in the template:
     --cs3-brand   client brand colour (hero + quote background)
     --cs3-accent  IVC accent (big numbers, labels, CTA border)
     --cs3-button  button background
   ========================================================================== */

.cs3 {
	--cs3-dark: #1c1c1c;
	--cs3-dark-2: #262626;
	--cs3-line: #3d3d3d;
	--cs3-text: #ffffff;
	--cs3-text-soft: #cfcfcf;
	--cs3-text-muted: #b3b3b3;
	--cs3-light: #ffffff;
	--cs3-light-2: #f5f3f1;
	--cs3-ink: #1c1c1c;
	--cs3-ink-soft: #4a4a4a;
	--cs3-gold: #e9cf98;
	--cs3-on-brand: #ffffff;
	--cs3-on-brand-soft: rgba(255, 255, 255, 0.85);
	--cs3-on-brand-line: rgba(255, 255, 255, 0.45);
	--cs3-on-brand-kicker: var(--cs3-gold);
	--cs3-radius: 16px;
	--cs3-gap: clamp(56px, 6vw, 96px);
	--cs3-header-offset: clamp(110px, 10vw, 170px);

	background: var(--cs3-dark);
	color: var(--cs3-text);
	font-family: var(--primary-font, "Poppins", sans-serif);
	font-weight: 400;
	line-height: 1.5;
}

.cs3 *,
.cs3 *::before,
.cs3 *::after {
	box-sizing: border-box;
}

.cs3 h1,
.cs3 h2,
.cs3 h3,
.cs3 p,
.cs3 ul,
.cs3 figure,
.cs3 blockquote {
	margin: 0;
	padding: 0;
	color: inherit;
}

.cs3 ul {
	list-style: none;
}

.cs3 img {
	display: block;
	max-width: 100%;
}

@media (max-width: 991px) {
	.cs3 {
		--cs3-header-offset: 96px;
	}

	.cs3 .container {
		padding-left: 32px;
		padding-right: 32px;
		max-width: none;
	}
}

@media (max-width: 575px) {
	.cs3 {
		--cs3-gap: 56px;
	}

	.cs3 .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.cs3 a {
	color: inherit;
}

.cs3-section {
	padding: var(--cs3-gap) 0;
}

.cs3-section--light {
	background: var(--cs3-light);
	color: var(--cs3-ink);
}

.cs3-section--brand {
	background: var(--cs3-brand);
	color: var(--cs3-on-brand);
}

/* Light brand colour: dark text on the hero + quote (ACF "Text colour on brand colour"). */
.cs3--on-brand-dark {
	--cs3-on-brand: #141414;
	--cs3-on-brand-soft: rgba(20, 20, 20, 0.78);
	--cs3-on-brand-line: rgba(20, 20, 20, 0.35);
	--cs3-on-brand-kicker: rgba(20, 20, 20, 0.7);
}

/* The site header is white text on a transparent bar, so give it a solid bar over a light hero. */
.cs3-brand-light .main-head:not(.fixed) {
	background: #1f1d1d;
}

/* Shared type ------------------------------------------------------------ */

.cs3-meta {
	font-size: 14px;
	color: var(--cs3-text-muted);
}

.cs3-h2 {
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cs3-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 36px;
}

/* Button ------------------------------------------------------------------ */

.cs3 .cs3-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 32px;
	border-radius: 999px;
	background: var(--cs3-button);
	color: var(--cs3-button-text, #fff);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: color 0.3s ease-in-out;
}

/* Same left-to-right fill as the site-wide .cmn-btn. */
.cs3 .cs3-btn::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--cs3-button-hover, #037ec7);
	transform: scale(1.03);
	transition: width 0.3s ease-in-out;
	z-index: -1;
}

.cs3 .cs3-btn:hover,
.cs3 .cs3-btn:focus-visible {
	color: var(--cs3-button-hover-text, #fff);
}

.cs3 .cs3-btn:hover::before,
.cs3 .cs3-btn:focus-visible::before {
	right: auto;
	left: 0;
	width: 100%;
}

/* 1. Hero ----------------------------------------------------------------- */

.cs3-hero {
	position: relative;
	background: var(--cs3-brand);
	color: var(--cs3-on-brand);
	overflow: hidden;
	padding-top: var(--cs3-header-offset);
}

.cs3-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.cs3-hero__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 0 48px;
	max-width: 640px;
}

.cs3-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs3-on-brand-kicker);
}

.cs3-eyebrow__rule {
	width: 28px;
	height: 1px;
	background: currentColor;
}

.cs3-hero__title {
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--cs3-on-brand);
}

.cs3-hero__intro {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--cs3-on-brand-soft);
	max-width: 560px;
}

.cs3-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cs3-tags li {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--cs3-on-brand-line);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
}

.cs3-hero__media {
	position: relative;
	aspect-ratio: 4 / 3;
}

.cs3-hero__media picture {
	display: block;
	height: 100%;
}

.cs3-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 576px) and (max-width: 991px) {
	.cs3-hero__media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 991px) {
	.cs3-hero__media--has-mobile {
		aspect-ratio: auto;
	}

	.cs3-hero__media--has-mobile img {
		height: auto;
		max-height: min(80vh, 640px);
	}
}

@media (min-width: 992px) {
	.cs3-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 620px;
	}

	.cs3-hero__text {
		gap: 28px;
		padding: 64px 48px 64px 0;
	}

	.cs3-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 50%;
		aspect-ratio: auto;
	}
}

/* 2. Results -------------------------------------------------------------- */

.cs3-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cs3-stat:only-child {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.cs3-stats {
		gap: 20px;
	}
}

@media (min-width: 992px) {
	.cs3-stats {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

.cs3-stat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.2vw, 28px);
	border-radius: var(--cs3-radius);
	background: var(--cs3-dark-2);
}

.cs3-stat__value {
	font-size: clamp(32px, 4.6vw, 60px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--cs3-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cs3-stat__label {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.45;
	color: #e6e6e6;
}

.cs3-stats--align-center .cs3-stat {
	align-items: center;
	text-align: center;
}

.cs3-stats--align-right .cs3-stat {
	align-items: flex-end;
	text-align: right;
}

/* 3. What we delivered ---------------------------------------------------- */

.cs3-delivered__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.cs3-delivered__head .cs3-h2 {
	max-width: 620px;
}

.cs3-delivered__intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--cs3-ink-soft);
	max-width: 460px;
}

@media (min-width: 992px) {
	.cs3-delivered__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 48px;
	}
}

.cs3-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 768px) {
	.cs3-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

.cs3-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(18px, 2vw, 24px);
	border-radius: 14px;
	background: var(--cs3-light-2);
	color: var(--cs3-ink);
}

.cs3-card__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--cs3-ink);
}

.cs3-card__icon svg,
.cs3-card__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.cs3-card__title {
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 600;
	line-height: 1.3;
}

/* 4. Quote ---------------------------------------------------------------- */

.cs3-quote__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
	max-width: 1000px;
}

.cs3 .cs3-quote__inner {
	margin: 0 auto;
}

.cs3-quote__mark {
	color: var(--cs3-on-brand-kicker);
}

.cs3-quote__text {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.3;
	color: var(--cs3-on-brand);
}

.cs3-quote__cite {
	border: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cs3-on-brand-soft);
}

.cs3-quote__cite strong {
	color: var(--cs3-on-brand);
	font-weight: 600;
}

/* 5. Story ---------------------------------------------------------------- */

.cs3-story .cs3-h2 {
	margin-bottom: 40px;
}

.cs3-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

@media (min-width: 992px) {
	.cs3-story__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}

	.cs3-story__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px;
	}
}

.cs3-story__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--cs3-line);
}

/* Tablet: one row per column, heading on the left and body on the right */
@media (min-width: 768px) and (max-width: 991px) {
	.cs3-story__grid {
		gap: 0;
	}

	.cs3-story__col {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 32px;
		padding: 28px 0;
	}
}

.cs3-story__col h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cs3-text);
}

.cs3-story__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cs3-text-soft);
}

.cs3-story__body p {
	margin: 0 0 1em;
}

.cs3-story__body p:last-child {
	margin-bottom: 0;
}

.cs3-story__body a {
	color: var(--cs3-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cs3-story__body ul,
.cs3-story__body ol {
	margin: 0 0 1em 1.2em;
	list-style: disc;
}

.cs3-story__body ol {
	list-style: decimal;
}

/* 6. Gallery -------------------------------------------------------------- */

.cs3-gallery {
	padding-top: 0;
}

/* Coloured sections above need the full gap; two dark sections in a row share one. */
.cs3-section--light + .cs3-gallery,
.cs3-section--brand + .cs3-gallery,
.cs3-section--light + .cs3-cta,
.cs3-section--brand + .cs3-cta {
	padding-top: var(--cs3-gap);
}

.cs3-gallery + .cs3-story {
	padding-top: 0;
}

.cs3-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

/* Phone: swipeable row with the next image peeking in */
@media (max-width: 767px) {
	.cs3-gallery .container {
		padding-left: 0;
		padding-right: 0;
	}

	.cs3-gallery__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		padding: 0 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.cs3-gallery__grid::-webkit-scrollbar {
		display: none;
	}

	.cs3-gallery__item {
		scroll-snap-align: start;
	}

	.cs3-gallery__grid:has(> .cs3-gallery__item:only-child) {
		grid-auto-columns: 100%;
	}
}

.cs3-gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--cs3-radius);
	overflow: hidden;
	background: var(--cs3-dark-2);
}

.cs3-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cs3-gallery__item:hover img {
	transform: scale(1.03);
}

/* 7. CTA ------------------------------------------------------------------ */

.cs3-cta {
	padding-top: 0;
}

.cs3-cta__card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
	border-radius: 20px;
	border: 1.5px solid var(--cs3-accent);
}

.cs3-cta__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cs3-cta__title {
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cs3-text);
}

.cs3-cta__text p {
	font-size: 17px;
	color: var(--cs3-text-soft);
}

@media (min-width: 768px) {
	.cs3-cta__card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 575px) {
	.cs3-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.cs3-delivered__head {
		margin-bottom: 28px;
	}

	.cs3-card {
		gap: 10px;
		padding: 16px;
	}

	.cs3-story .cs3-h2 {
		margin-bottom: 24px;
	}

	.cs3-quote__inner {
		gap: 20px;
	}

	.cs3-cta__card .cs3-btn {
		width: 100%;
	}
}