/* ==========================================================================
   GrowthStudioz, a case study's own page

   Off Adarsh's Figma frames, 26th September 2026. 80px sides (the wide page
   gutter, set in base.css for this post type).

   Top:
     120px under the header; eyebrow 14px #545454, title 64px 600 #111
     (-3.02px), statement 32px 600 #545454 (-1.5px, 800 wide), 24px apart;
     64px to the details row: four columns, 1px lines (#111 at 8.24%) above
     and below, 32px inside; label 12px #545454, 8px to the value, 16px 500
     #111; 64px to the banner: full width at its own height, radius 4;
     80px under it
   Sections: a 1px line (#111 at 8.24%) edge to edge above each, 100px above
     and below the content
   Overview: statement 32px 600 #111 (-1.5px) and text 16px #545454, 800
     wide, 24px apart; 80px to the division card (400 wide)
   Picture with text: copy 500 wide, 64px to a square picture; caption 14px
     #545454, title 64px, text 16px #545454, 24px between every piece
   Approach: "03 [line] label" 12px, 64 to the stages; stages 80 apart,
     picture 55% (its own height) / text 45% swapping sides; label 14,
     title 32, text 16, 20 apart
   Key visuals: stacked full width, each at its own height, 48 apart
   Outcome: cards three to a row, 40 apart (white, 1px line, radius 4,
     padding 32, 16 inside; number 64px, the first in red; text 14px);
     64 to a full-width picture at its own height
   Phone: not in the frames yet; stacked, with type stepped down.

   Line height: the inspector says 100%, but every box it measures is 1.3x
   its type (64 -> 83, 32 -> 42, 16 -> 21), DM Sans's own line height. So 1.3.
   ========================================================================== */

.gs-cs {
	--gs-cs-line: rgb(17 17 17 / 8.24%);
	--gs-cs-title: clamp(2.875rem, 4.444vw, 4rem);     /* 64px at 1440 */
	--gs-cs-statement: 2rem;                            /* 32px */
	--gs-cs-pad: 6.25rem;                               /* 100px */

	color: #111111;
}

/* --- top ------------------------------------------------------------------ */

.gs-cs__top {
	padding-block: 7.5rem 5rem;                         /* 120 / 80 */
}

.gs-cs__intro {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);                             /* 24px */
}

.gs-cs__eyebrow,
.gs-cs__caption {
	margin: 0;
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b4);                            /* 14px */
	line-height: 1.3;
}

.gs-cs__title {
	margin: 0;
	text-wrap: wrap;
	max-width: none;
	color: #111111;
	font-size: var(--gs-cs-title);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0472em;
}

.gs-cs__statement {
	margin: 0;
	max-width: 50rem;                                   /* 800px */
	color: var(--gs-text-grey);
	font-size: var(--gs-cs-statement);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0469em;
}

/* Four columns 241 wide across 1280, so the gap is 8.2% of the row. */
.gs-cs__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gs-space-5) 8.2%;
	margin: 4rem 0 0;                                   /* 64px */
	padding-block: var(--gs-space-6);                   /* 32px */
	border-block: 1px solid var(--gs-cs-line);
}

.gs-cs__meta-item {
	min-width: 0;
}

.gs-cs__meta dt {
	color: var(--gs-text-grey);
	font-size: var(--gs-b5);                            /* 12px */
	line-height: 1.3;
}

.gs-cs__meta dd {
	margin: var(--gs-space-2) 0 0;                      /* 8px */
	color: #111111;
	font-size: var(--gs-b3);                            /* 16px */
	font-weight: var(--gs-weight-medium);
	line-height: 1.3;
}

.gs-cs__banner {
	margin: 4rem 0 0;                                   /* 64px */
}

/* The picture's own height: no ratio, no crop (Adarsh). */
.gs-cs__banner-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gs-radius-sm);                 /* 4px */
}

.gs-cs__banner--paired .gs-cs__banner-img--phone {
	display: none;
}

/* --- sections ------------------------------------------------------------- */

/* Edge to edge, so the line above each runs across the whole window; the
   gutter comes back inside. */
.gs-cs__section {
	margin-inline: calc(var(--gs-gutter-now) * -1);
	padding: var(--gs-cs-pad) var(--gs-gutter-now);
	border-top: 1px solid var(--gs-cs-line);
}

.gs-cs__text {
	margin: 0;
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b3);                            /* 16px */
	line-height: 1.3;
}

/* --- overview ------------------------------------------------------------- */

/* 800 and 400 with 80 between, in 1280: kept as proportions, with the card
   never under 320, where its tags start wrapping one to a line. */
.gs-cs__overview {
	display: grid;
	grid-template-columns: minmax(0, 800fr) minmax(20rem, 400fr);
	column-gap: 6.25%;
	align-items: start;
}

.gs-cs__overview-copy {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);                             /* 24px */
}

.gs-cs__overview-title {
	margin: 0;
	max-width: none;
	color: #111111;
	font-size: var(--gs-cs-statement);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0469em;
}

/* The division card: the case study card's rows, in a bordered box. */
.gs-cs__divisions {
	padding: var(--gs-space-6);                         /* 32px */
	border: 1px solid #EAEAEA;
	border-radius: var(--gs-space-4);                   /* 16px */
	background: var(--gs-white);
}

.gs-cs__divisions .gs-case__rows {
	gap: var(--gs-space-2);                             /* 8px */
	margin: 0;
}

.gs-cs__divisions .gs-case__row {
	grid-template-columns: 4.875rem minmax(0, 1fr);     /* 78px */
	gap: 0.875rem;                                      /* 14px */
}

.gs-cs__divisions .gs-case__brand-logo {
	height: 1.7294rem;                                  /* 27.67px */
}

.gs-cs__divisions .gs-case__tags {
	gap: var(--gs-space-2) var(--gs-space-3);           /* 8 / 12 */
}

.gs-cs__divisions .gs-case__tag {
	padding: 0.3106rem 0.8069rem;                       /* 5 / 13 */
	background: var(--gs-grey-l);
	color: var(--gs-black);
	font-size: var(--gs-b4);                            /* 14px */
	line-height: 1.3;
}

/* --- picture with text ---------------------------------------------------- */

/* 500 of copy, 64 apart, the rest a square picture (Adarsh: 1:1). The copy
   sits in the middle of the picture's height, the same space above and
   below it (Adarsh, 26th September 2026). */
.gs-cs__split {
	display: grid;
	grid-template-columns: minmax(0, 500fr) minmax(0, 716fr);
	column-gap: 5%;
	align-items: center;
}

.gs-cs__split-copy {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);                             /* 24px between all */
}

.gs-cs__split-title {
	margin: 0;
	max-width: none;
	color: #111111;
	font-size: var(--gs-cs-title);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0472em;
	/* Natural wrapping, as the frame: base.css balances headings, which
	   broke it "Incoherence / in a world of / absolute detail." */
	text-wrap: wrap;
}

.gs-cs__split-media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--gs-radius-sm);                 /* 4px */
}

.gs-cs__split-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- approach stages ----------------------------------------------------- */

/* "03 [red line] The Design Approach": 12px #545454, the line 24 x 1 in
   #E11D2E, 8px apart; 64px to the first stage. */
.gs-cs__kicker {
	display: flex;
	align-items: center;
	gap: var(--gs-space-2);                             /* 8px */
	margin: 0 0 4rem;                                   /* 64px */
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b5);                            /* 12px */
	line-height: 1.3;
}

.gs-cs__kicker-line {
	flex: none;
	width: var(--gs-space-5);                           /* 24px */
	height: 1px;
	background: var(--gs-pm-red);                       /* #E11D2E */
}

.gs-cs__stages {
	display: flex;
	flex-direction: column;
	gap: 5rem;                                          /* 80px between rows */
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Picture 55%, text 45% (Adarsh, 26th September 2026). The 80px between them
 * (6.25% of the row) comes out of the text's share, so the picture is 55% of
 * the row exactly; the text sits in the middle of the picture's height.
 */
.gs-cs__stage {
	display: grid;
	grid-template-columns: 55% minmax(0, 1fr);
	column-gap: 6.25%;
	align-items: center;
	margin: 0;
}

/* Every second row swaps sides: text left, picture right. */
.gs-cs__stage:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) 55%;
}

.gs-cs__stage:nth-child(even) .gs-cs__stage-media {
	order: 2;
}

/* A stage with no picture: its text on the text side, alone. */
.gs-cs__stage--text .gs-cs__stage-copy {
	grid-column: 2;
}

.gs-cs__stage--text:nth-child(even) .gs-cs__stage-copy {
	grid-column: 1;
}

/* Each stage picture at its own height, uncropped (Adarsh, 29th September
   2026); the text stays in the middle of whatever height that is. */
.gs-cs__stage-media {
	overflow: hidden;
	border-radius: var(--gs-radius-sm);                 /* 4px */
}

.gs-cs__stage-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Label, title and text 20px apart, 480 wide at most. */
.gs-cs__stage-copy {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;                                       /* 20px */
	max-width: 30rem;                                   /* 480px */
}

.gs-cs__stage-title {
	margin: 0;
	max-width: none;
	color: #111111;
	font-size: var(--gs-cs-statement);                  /* 32px */
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0469em;                          /* -1.5px at 32 */
	text-wrap: wrap;
}

/* --- key visuals ---------------------------------------------------------- */

/* Stacked full width, each picture at its own height, 48 apart (Adarsh,
   29th September 2026). No shapes and no cropping: the client prepares each
   picture as it should appear, pairs combined into one image. The width and
   height WordPress writes on the <img> hold its space while it loads. */
.gs-cs__visuals {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-7);                             /* 48px */
}

.gs-cs__visual {
	overflow: hidden;
	border-radius: var(--gs-radius-sm);                 /* 4px */
}

.gs-cs__visual-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- outcome -------------------------------------------------------------- */

/* Three to a row, 40 apart; a fourth starts the next row (Adarsh). */
.gs-cs__results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;                                        /* 40px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-cs__result {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-4);                             /* 16px */
	margin: 0;
	padding: var(--gs-space-6);                         /* 32px */
	border: 1px solid var(--gs-cs-line);
	border-radius: var(--gs-radius-sm);                 /* 4px */
	background: var(--gs-white);
}

.gs-cs__result-value {
	color: var(--gs-text-grey);
	font-size: var(--gs-cs-title);                      /* 64px */
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.0472em;                          /* -3.02px at 64 */
}

/* The lead result in the brand red, as the design. */
.gs-cs__result:first-child .gs-cs__result-value {
	color: var(--gs-red);                               /* #F80000 */
}

.gs-cs__result-text {
	color: var(--gs-text-grey);
	font-size: var(--gs-b4);                            /* 14px */
	line-height: 1.3;
}

/* Full width at its own height, uncropped (Adarsh, 29th September 2026). */
.gs-cs__closing {
	overflow: hidden;
	border-radius: var(--gs-radius-sm);                 /* 4px */
}

.gs-cs__results + .gs-cs__closing {
	margin-block-start: 4rem;                           /* 64px */
}

.gs-cs__closing-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- wide screens --------------------------------------------------------- */

/* No wider than 1400 (Adarsh, 8th October 2026): the top (title and banner)
   and each section, its line included, centred. From 1560 up, where the page
   would otherwise run wider: 1400 plus the two 80 gutters. Below that the
   content is already narrower and the lines run edge to edge as before. */
@media (min-width: 97.5rem) {
	.gs-cs__top {
		max-width: 87.5rem;
		margin-inline: auto;
	}

	.gs-cs__section {
		max-width: 87.5rem;
		margin-inline: auto;
		padding-inline: 0;
	}
}

/* --- smaller screens ------------------------------------------------------ */

/* Side by side needs the width: below 1024 the 64px title no longer fits
   its 500 column, so the sections stack. */
@media (max-width: 1023px) {
	.gs-cs {
		--gs-cs-pad: 4rem;                              /* 64px */
	}

	.gs-cs__overview,
	.gs-cs__split {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--gs-space-7);                     /* 48px */
	}

	/* The stages stack, picture first, every row the same way round. */
	.gs-cs__stage,
	.gs-cs__stage:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--gs-space-5);                     /* 24px */
	}

	.gs-cs__stage:nth-child(even) .gs-cs__stage-media {
		order: 0;
	}

	.gs-cs__stage--text .gs-cs__stage-copy,
	.gs-cs__stage--text:nth-child(even) .gs-cs__stage-copy {
		grid-column: 1;
	}

	.gs-cs__stages {
		gap: var(--gs-space-8);                         /* 64px */
	}

	.gs-cs__result-value {
		font-size: 2.5rem;                              /* 40px */
	}
}

/*
 * Phone, off Adarsh's phone frames (26th September 2026), 20px sides:
 *   top       40px under the header; eyebrow 12px, title 32px 600 (-1.5px)
 *             #141414, statement 20px 400 #545454, 12px apart; 24px to the
 *             details, now a list: label 12px left, value 14px #141414 right,
 *             16px apart, 20px inside the lines; 24px to the banner; 40px
 *             under it
 *   overview  48px padding; statement 24px 400 #141414, text 14px, 20px
 *             apart; 32px to the division card
 *   challenge 48px padding; title 24px 400 #141414, text 14px, 16px apart;
 *             32px to the picture
 *   approach  no section line; stages 40 apart, picture at its own height,
 *             16 to the text; label 12, title 16px 500, text 14, 8 apart
 *   visuals   the same stack, full width, 24 apart
 *   outcome   cards stacked 24 apart, #FAFAFA radius 6 padding 20; number
 *             64px (#E11D2E first, #141414 after); 32 to the picture, at its
 *             own height
 */
@media (max-width: 767px) {
	.gs-cs {
		--gs-cs-title: 2rem;                            /* 32px */
		--gs-cs-statement: 1.25rem;                     /* 20px */
		--gs-cs-pad: 3rem;                              /* 48px */
	}

	.gs-cs__top {
		padding-block: 2.5rem;                          /* 40px */
	}

	.gs-cs__intro {
		gap: var(--gs-space-3);                         /* 12px */
	}

	.gs-cs__eyebrow {
		font-size: var(--gs-b5);                        /* 12px */
	}

	.gs-cs__title {
		color: #141414;
		letter-spacing: -0.0469em;                      /* -1.5px at 32 */
	}

	.gs-cs__statement {
		font-weight: var(--gs-weight-regular);
		letter-spacing: 0;
	}

	.gs-cs__meta {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--gs-space-4);                     /* 16px */
		margin-block-start: var(--gs-space-5);          /* 24px */
		padding-block: 1.25rem;                         /* 20px */
	}

	/* Label left, value right, on one line. */
	.gs-cs__meta-item {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--gs-space-4);
	}

	.gs-cs__meta dd {
		margin: 0;
		color: #141414;
		font-size: var(--gs-b4);                        /* 14px */
		font-weight: var(--gs-weight-regular);
		text-align: end;
	}

	.gs-cs__banner {
		margin-block-start: var(--gs-space-5);          /* 24px */
	}

	.gs-cs__text {
		font-size: var(--gs-b4);                        /* 14px */
	}

	/* Overview: a lighter, larger statement over the text, 20 apart; 32 to
	   the card. */
	.gs-cs__overview {
		row-gap: var(--gs-space-6);                     /* 32px */
	}

	.gs-cs__overview-copy {
		gap: 1.25rem;                                   /* 20px */
	}

	.gs-cs__overview-title {
		color: #141414;
		font-size: var(--gs-b1);                        /* 24px */
		font-weight: var(--gs-weight-regular);
		letter-spacing: 0;
	}

	/* Picture with text: title, text 16 apart; 32 to the picture. */
	.gs-cs__split {
		row-gap: var(--gs-space-6);                     /* 32px */
	}

	.gs-cs__split-copy {
		gap: var(--gs-space-4);                         /* 16px */
	}

	.gs-cs__caption {
		font-size: var(--gs-b5);                        /* 12px */
	}

	.gs-cs__split-title {
		color: #141414;
		font-size: var(--gs-b1);                        /* 24px */
		font-weight: var(--gs-weight-regular);
		letter-spacing: 0;
	}

	.gs-cs__banner--paired .gs-cs__banner-img--desktop {
		display: none;
	}

	.gs-cs__banner--paired .gs-cs__banner-img--phone {
		display: block;
	}

	.gs-cs__divisions {
		padding: var(--gs-space-6) var(--gs-space-4);   /* 32 / 16 */
	}

	/* Stages, off the phone frame: no "03 / label" line; each stage its
	   picture at its own height, 16 to its text (label 12, title 16px 500
	   #141414, text 14, 8 apart); stages 40 apart. */
	.gs-cs__kicker {
		display: none;
	}

	.gs-cs__stages {
		gap: 2.5rem;                                    /* 40px */
	}

	.gs-cs__stage,
	.gs-cs__stage:nth-child(even) {
		row-gap: var(--gs-space-4);                     /* 16px */
	}

	.gs-cs__stage-copy {
		gap: var(--gs-space-2);                         /* 8px */
	}

	.gs-cs__stage-title {
		color: #141414;
		font-size: var(--gs-b3);                        /* 16px */
		font-weight: var(--gs-weight-medium);
		letter-spacing: 0;
	}

	/* Key visuals: the same stack at phone width, 24 apart. */
	.gs-cs__visuals {
		gap: var(--gs-space-5);                         /* 24px */
	}

	/* Outcome, off the phone frame: cards one to a row, 24 apart; #FAFAFA,
	   radius 6, padding 20, 8 inside; the number back to 64px, the first in
	   #E11D2E and the rest #141414; 32 to a 350 x 200 picture. */
	.gs-cs__results {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gs-space-5);                         /* 24px */
	}

	.gs-cs__result {
		gap: var(--gs-space-2);                         /* 8px */
		padding: 1.25rem;                               /* 20px */
		border-radius: 0.375rem;                        /* 6px */
		background: #FAFAFA;
	}

	.gs-cs__result-value {
		color: #141414;
		font-size: 4rem;                                /* 64px */
	}

	.gs-cs__result:first-child .gs-cs__result-value {
		color: var(--gs-pm-red);                        /* #E11D2E */
	}

	.gs-cs__results + .gs-cs__closing {
		margin-block-start: var(--gs-space-6);          /* 32px */
	}
}