/* ==========================================================================
   GrowthStudioz, division CTA band

   "We turn / ideas... into / D2C brands", a button, an illustration, and a row
   of partner logos. Closes every division page.

   Type sizes are Adarsh's, 24th September 2026: 50 / 72 / 45 / 72, and the
   partners label 20 at 54% tracking. They are declared as tokens here rather
   than inline so the three places each size is used cannot drift apart.
   ========================================================================== */

.gs-cta {
	/* The supplied sizes are the DESKTOP ones. Below 768 they are scaled by
	   the same factor rather than each being guessed separately, so the
	   heading keeps its proportions: 72 -> 40 is 0.55, and 50 and 45 follow. */
	--gs-cta-lg: 4.5rem;              /* 72px */
	--gs-cta-md: 2.8125rem;           /* 45px */
	--gs-cta-sm: 3.125rem;            /* 50px */
	--gs-cta-label: 1.25rem;          /* 20px */

	padding-block: var(--gs-section-pad);
	/* Declared, not inherited. This is the FIRST section on a division page
	   (Adarsh, 24th September 2026), so it sits directly under the header and
	   has to be white in its own right rather than relying on whatever is
	   behind it. */
	background: var(--gs-surface);
}

/* Tablet (768-1023): heading and artwork stay side by side, so the heading
   scales with the screen instead (Adarsh, 6th October 2026, "scale down").
   At the full 72/50/45 Narrativ's lines need 532px beside 267px of art in a
   704px row, and ran 48px off the screen. The three sizes keep their
   proportions; the line is 48px at 768 and back to 69 by 1023, sized from
   the widest heading (Narrativ's) with a little to spare. Phone and desktop
   are untouched; the compact layout has its own sizes. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.gs-cta:not(.gs-cta--compact) {
		--gs-cta-lg: min(4.5rem, calc(8.055vw - 0.842rem));
		--gs-cta-md: min(2.8125rem, calc(5.034vw - 0.5262rem));
		--gs-cta-sm: min(3.125rem, calc(5.594vw - 0.5846rem));
	}
}

.gs-cta__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gs-space-8);
}

/* --- copy ----------------------------------------------------------------- */

.gs-cta__copy {
	flex: none;
}

/* Straight off the Figma inspector (Adarsh, 24th September 2026): DM Sans,
   line height 100%, letter spacing 0%, colour #0E0E0E. The weights differ per
   line and are set on the parts below, 600 on "We turn" and "into", 900 on
   "ideas..." and "D2C brands".

   Both the tracking and the colour are OVERRIDES, not defaults: base.css gives
   every h1-h6 the display tracking of -0.047em and the ink black, and this
   heading takes neither. */
.gs-cta__title {
	margin: 0;
	max-width: none;
	font-weight: var(--gs-weight-semibold);
	line-height: 1;
	letter-spacing: 0;
	color: #0E0E0E;
	/* The design's lines are deliberate, so nothing here may re-break them. */
	text-wrap: nowrap;
}

.gs-cta__line {
	display: block;
	/* The line needs its OWN font-size, not the h2 size it would otherwise
	   inherit. A block's font-size sets its strut, an invisible zero-width
	   box on every line, and the line box grows to fit the strut even when
	   all the visible text is smaller. Line two holds 28px and 18px spans but
	   inherited 48px, so its line box came out 50px tall and opened a gap
	   under "We turn" that is not in the design.

	   Lines one and three override this with their own size class; this is
	   what line two, which mixes two sizes inline, resolves to. */
	font-size: var(--gs-cta-lg);
}

/* "We turn": smaller than the two statements it introduces. */
.gs-cta__line--sm {
	font-size: var(--gs-cta-sm);
}

/* "ideas..." and "D2C brands": DM Sans Black, 900. The heavy cut is what makes
   these two lines the statement and the other two the connective tissue. */
.gs-cta__lg {
	font-size: var(--gs-cta-lg);
	font-weight: 900;
}

/* "into", riding on the same line as "ideas..." at a smaller size and the
   lighter 600, per Figma. */
.gs-cta__md {
	font-size: var(--gs-cta-md);
	font-weight: var(--gs-weight-semibold);
}

.gs-cta__btn {
	margin-block-start: var(--gs-space-5);
	/* The mockup's button runs the width of the heading block rather than
	   hugging its label. */
	width: 100%;
}

/* Two labels, one per width, when the page sets a separate phone one. */
.gs-cta__btn-phone {
	display: none;
}

@media (max-width: 767px) {
	.gs-cta__btn-wide {
		display: none;
	}

	.gs-cta__btn-phone {
		display: inline;
	}
}

/* --- illustration --------------------------------------------------------- */

.gs-cta__media {
	flex: none;
	/* Caps the art so it sits beside the heading rather than dominating the
	   row on a wide screen. */
	width: min(38%, 420px);
}

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

/* --- partners ------------------------------------------------------------- */

.gs-cta__partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gs-space-4);
	margin-block-start: var(--gs-space-8);
}

.gs-cta__partners-label {
	margin: 0;
	max-width: none;
	color: var(--gs-body-soft);
	font-size: var(--gs-cta-label);
	/* 54%, per Adarsh. em, not px, so it holds if the size ever changes. */
	letter-spacing: 0.54em;
	line-height: 1;
	text-transform: uppercase;
	/* Tracking is added to the RIGHT of every character including the last,
	   which pushes a centred label visibly off-centre. Pulling back one
	   tracking step re-centres it. */
	margin-inline-end: -0.54em;
}

.gs-cta__partner-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gs-space-5) var(--gs-space-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-cta__partner {
	display: flex;
	align-items: center;
	max-width: none;
}

/* The hairline between logos, on every item but the first. A pseudo-element
   rather than a border, so it can be centred in the gap and cannot be dropped
   by a wrap the way a border on the item itself would sit in the wrong place. */
.gs-cta__partner + .gs-cta__partner::before {
	content: "";
	width: var(--gs-border-width);
	height: 1.5em;
	/* HALF the gap either side, not the whole gap. Pulling back the full 48px
	   put the rule hard against the previous logo instead of midway between
	   the two; half lands it in the centre of the gap. The end margin loses
	   the rule's own 1px so the logo still starts exactly where it would
	   without a divider. */
	margin-inline-start: calc(var(--gs-space-7) / -2);
	margin-inline-end: calc(var(--gs-space-7) / 2 - var(--gs-border-width));
	/* Solid black, per Adarsh 25th September 2026. */
	background: #000;
}

.gs-cta__partner-logo {
	display: block;
	width: auto;
	/* Height-capped like every other logo row on the site: these marks vary
	   wildly in aspect ratio and matching heights is what keeps a row even. */
	height: 28px;
	max-width: none;
	object-fit: contain;
}

/* Per-logo boxes from Adarsh, 25th September 2026. The artwork is contained
   within its box, so where a box is a different shape from the logo the logo
   fills one side and falls short on the other (Meta renders 135 x 27,
   Shopify 185 x 52, Shopflo 145 x 45). Shopify +10/+10 and Shopflo -5/-5 on
   the first boxes, same day. */
.gs-cta__partner:nth-child(1) .gs-cta__partner-logo { width: 135px; height: 30px; }
.gs-cta__partner:nth-child(2) .gs-cta__partner-logo { width: 185px; height: 60px; }
.gs-cta__partner:nth-child(3) .gs-cta__partner-logo { width: 155px; height: 45px; }

/* --- editor-only empty state ---------------------------------------------- */

.gs-cta--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-cta--empty p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 767px) {
	/* Phone type, per Adarsh 24th September 2026: "We turn" 20, "ideas..." and
	   "D2C brands" 28, "into" 18. */
	.gs-cta {
		--gs-cta-lg: 1.75rem;         /* 28px, "ideas..." / "D2C brands" */
		--gs-cta-md: 1.125rem;        /* 18px, "into" */
		--gs-cta-sm: 1.25rem;         /* 20px, "We turn" */
		--gs-cta-label: 0.875rem;     /* 14px */
	}

	/* Side by side on the phone too, the same way round as desktop (Adarsh,
	   24th September 2026). It was stacked here, which was my own call.

	   30px between the copy and the artwork. A literal: the scale steps 24 /
	   32, so snapping it to a token would be the wrong number. */
	.gs-cta__inner {
		gap: 1.875rem;
	}

	/* The copy column is exactly as wide as the heading, and the art takes
	   everything else (Adarsh, 25th September 2026: a narrower button so the
	   illustration can grow). The button runs the column's width, so it comes
	   down to the heading's 162px; the art grows from 38% of the row to the
	   remainder, 186px on a 425 screen against 144.

	   The heading cannot give up any more: it is `nowrap` by design and
	   "D2C brands" at 28px is the 162px floor. */
	.gs-cta__copy {
		flex: none;
		width: max-content;
	}

	/* On the phone the button fits its own label (Adarsh, 25th September
	   2026) instead of running the column's width: 150px with the standard
	   button padding, which stays the same as every other button's. */
	.gs-cta__btn {
		width: fit-content;
	}

	.gs-cta__media {
		flex: 1;
		min-width: 0;
		width: auto;
	}

	/* Left aligned, not centred (Adarsh): the label and the logos line up with
	   the heading beside them.

	   Closer to the button than on desktop. 64px was the desktop step and on a
	   phone it left the partners looking detached from the band. */
	.gs-cta__partners {
		align-items: flex-start;
		margin-block-start: var(--gs-space-6);
		gap: var(--gs-space-3);
	}

	/* Straight off the Figma inspector: DM Sans 400, 9.77px, line height
	   15.18px, 54% tracking, uppercase, #BDBDBD. It was 14px in the site's
	   muted grey, which is a different colour and half again the size.

	   The centring correction is dropped with it: that negative end margin
	   only existed to re-centre a tracked label, and this one is left
	   aligned. */
	.gs-cta__partners-label {
		font-size: 9.77px;
		font-weight: var(--gs-weight-regular);
		line-height: 15.18px;
		color: #BDBDBD;
		margin-inline-end: 0;
	}

	.gs-cta__partner-list {
		justify-content: flex-start;
		gap: var(--gs-space-4) var(--gs-space-5);
	}

	/* The divider, per Figma: ~10px tall. Solid #000 at 1px, per Adarsh
	   25th September 2026 (it was 26% black, standing in for Figma's 0.26px
	   stroke). */
	.gs-cta__partner + .gs-cta__partner::before {
		height: 9.96px;
		background: #000;
		margin-inline-start: calc(var(--gs-space-5) / -2);
		margin-inline-end: calc(var(--gs-space-5) / 2 - var(--gs-border-width));
	}

	/* The logos are NOT a uniform height in this design, which is what a
	   height cap was giving them. Figma places each at its own size:

	     Meta      61.94 x 12.52
	     Shopify   80.44 x 22.69
	     Shopflo   75.50 x 23.41

	   So the WIDTH is set per slot and the height follows the artwork's own
	   ratio. Sized by width rather than height because the widths are what
	   sit closest together (62 / 80 / 76), the heights differ by nearly 2x,
	   since Meta's wordmark is long and short while the other two are stacked
	   marks.

	   Per-slot numbers, which means a partner swapped for one with a different
	   mark needs its number revisited. That is the cost of matching a design
	   that positions three specific logos rather than a rule. */
	.gs-cta__partner-logo {
		height: auto;
		width: auto;
	}

	/* Phone boxes from Adarsh, 25th September 2026, contained the same way as
	   on desktop. */
	.gs-cta__partner:nth-child(1) .gs-cta__partner-logo { width: 60px; height: 15px; }
	.gs-cta__partner:nth-child(2) .gs-cta__partner-logo { width: 110px; height: 35px; }
	.gs-cta__partner:nth-child(3) .gs-cta__partner-logo { width: 75px; height: 25px; }
}

/* ==========================================================================
   Compact layout (Performance Marketing, Adarsh 1st October 2026)

   Off the Figma inspector: the copy is a 412px column, 137 from a 294 x 276
   artwork whose bottom edge sits 7.32 below the copy's; 11px between the
   copy's pieces; the pair centred on the screen (his call: the frame has it
   46px left of centre).

   The type is not on the inspector, so it was fitted: the frame's lines were
   measured for width and for how much ink they carry, and the site's own DM
   Sans files rendered at each candidate until both matched. The heading is
   600 at 62px with -2px tracking (352.3 x 206.1 against the frame's 352.0 x
   205.8, the ink identical); the small lines are 500 at 23.25px. Both are 64
   and 24 scaled by the same 0.969, so the block was scaled as one in Figma.
   Lines are 69.75 and 31 tall, which is what makes the copy 285 in all.

   Desktop and tablet only. The phone hero is a separate frame and keeps the
   phone rules above.
   ========================================================================== */

@media (min-width: 768px) {
	.gs-cta--compact {
		/* 108.31 under the header, off the inspector. Below, the copy ends
		   113.5 above the first row of the results wall; the wall brings 40
		   of that itself, so the hero brings the other 73.5. */
		padding-block: 6.769375rem 4.59375rem;
		--gs-cta-lg: 3.875rem;            /* 62px */
		--gs-cta-md: 1.453125rem;         /* 23.25px */
		--gs-cta-sm: 1.453125rem;         /* 23.25px */
	}

	.gs-cta--compact .gs-cta__inner {
		/* The bottoms line up, less the 7.32 the art hangs below (see the
		   media rule), rather than the two being centred on each other. */
		align-items: flex-end;
		/* 137 at 1440 (9.5%), closing up on a narrower screen so the pair
		   still fits; never wider than the frame's. */
		gap: clamp(2rem, 9.5vw, 8.5625rem);
	}

	/* A column of fixed measure instead of one that hugs a one-line heading.
	   It can shrink on a tablet, where the heading simply wraps sooner. */
	.gs-cta--compact .gs-cta__copy {
		flex: 0 1 25.75rem;                /* 412px */
		min-width: 0;
	}

	.gs-cta--compact .gs-cta__title {
		display: flex;
		flex-direction: column;
		gap: 0.6875rem;                    /* 11px */
		/* The wide hero forbids wrapping because its lines are set by hand.
		   Here the column's width is what breaks "ROI-focused / Growth". */
		text-wrap: wrap;
	}

	/* Each line's strut is the SMALL size, so a line holding only small text
	   is 31 tall. The large text carries its own line height (below) and
	   opens its lines to 69.75 by itself. With the strut left at the large
	   size, as in the wide hero, the small third line came out 70 tall. */
	.gs-cta--compact .gs-cta__line {
		font-size: var(--gs-cta-md);
		line-height: 1.3333;               /* 31 / 23.25 */
		/* On a tablet the column is narrower than 412 and the last line
		   wraps; balanced, it breaks into two even lines instead of leaving
		   "brands" alone. At full width nothing wraps and this does nothing. */
		text-wrap: balance;
	}

	.gs-cta--compact .gs-cta__line--sm,
	.gs-cta--compact .gs-cta__md {
		font-weight: var(--gs-weight-medium);
		letter-spacing: 0.0108em;          /* 0.25px at 23.25 */
	}

	.gs-cta--compact .gs-cta__lg {
		font-weight: var(--gs-weight-semibold);
		line-height: 1.125;                /* 69.75 / 62 */
		letter-spacing: -0.03226em;        /* -2px at 62 */
	}

	/* 50 tall, not the sitewide 54, by taking 2px off the button's own
	   padding token top and bottom rather than restating its box. Tracked
	   0.2em like the page's other buttons; the gap gives back what the
	   tracking and the icon's inset add before the arrow (questions.css has
	   the arithmetic). */
	.gs-cta--compact .gs-cta__btn {
		--gs-btn-pad-y: 0.875rem;          /* 14px */
		margin-block-start: 0.6875rem;     /* 11px */
		letter-spacing: 0.2em;
		gap: calc(var(--gs-space-3) - 0.55em);
	}

	.gs-cta--compact .gs-cta__media {
		width: min(38%, 18.375rem);        /* 294px */
		margin-block-end: -0.4575rem;      /* 7.32px below the copy's foot */
	}
}

/* Compact layout on phones, off the phone frame and its inspector: the copy a
   196px column, 8 to a 133 x 126 artwork centred against it, the pair 337 in
   all and 26.5 from the screen's edges; 22 under the header and 32 to the
   results wall. A 196 x 32 button, 16 under the text.

   The heading is one sentence that flows: "ROI-focused Growth" and "for
   India's leading lifestyle brands" run on as inline text and the column
   breaks them, which is how the frame gets "Growth for" on one line. Type
   fitted to the frame as on desktop: the statement 700 at 28.5px in 28px
   lines, the rest 500 at 18.5px.

   The line heights are what put each baseline where the frame has it (22.2,
   55.2, 83.2, 107.6 and 132 below the top of the column). */

@media (max-width: 767px) {
	.gs-cta--compact {
		--gs-cta-lg: 1.78125rem;          /* 28.5px */
		--gs-cta-md: 1.15625rem;          /* 18.5px */
		--gs-cta-sm: 1.15625rem;          /* 18.5px */

		/* 32 to the wall: it brings 22.5, this brings the other 9.5. */
		padding-block: 1.375rem calc(2rem - var(--gs-section-pad));
	}

	.gs-cta--compact .gs-cta__inner {
		gap: 0.5rem;                       /* 8px */
	}

	.gs-cta--compact .gs-cta__copy {
		flex: 0 0 12.25rem;                /* 196px */
		width: auto;
		min-width: 0;
	}

	.gs-cta--compact .gs-cta__title {
		padding-block-start: 0.305625rem;  /* 4.89px */
		/* 16 held back on the right, so "India's leading lifestyle" (189px)
		   does not fit one line and breaks after "leading", as the frame
		   does, instead of leaving "brands" alone on the last line. */
		padding-inline-end: 1rem;
		font-size: var(--gs-cta-md);
		text-wrap: wrap;
	}

	.gs-cta--compact .gs-cta__line {
		display: inline;
		font-size: var(--gs-cta-md);
	}

	.gs-cta--compact .gs-cta__line--sm {
		display: block;
		margin-block-end: 0.255625rem;     /* 4.09px */
		font-weight: var(--gs-weight-medium);
		line-height: 1.2432;               /* 23 over 18.5 */
		letter-spacing: -0.0135em;
	}

	.gs-cta--compact .gs-cta__lg {
		font-weight: var(--gs-weight-bold);
		line-height: 0.9825;               /* 28 over 28.5 */
		letter-spacing: -0.0175em;         /* -0.5px */
	}

	.gs-cta--compact .gs-cta__md {
		font-weight: var(--gs-weight-medium);
		line-height: 1.3189;               /* 24.4 over 18.5 */
		letter-spacing: -0.0135em;         /* -0.25px */
	}

	/* The small tracked button the phone frames use (the red creatives band
	   has the same one): 32 tall, 600 at 12px, 0.35em, capitals, no arrow.
	   Tracking is added after the last letter too, so the same amount goes in
	   front to keep the label centred. */
	.gs-cta--compact .gs-cta__btn {
		width: 100%;
		min-height: 2rem;                  /* 32px */
		margin-block-start: 0.9375rem;     /* 15px */
		padding: 0 var(--gs-space-1) 0 calc(var(--gs-space-1) + 0.35em);
		border-radius: var(--gs-radius-sm);
		font-size: 0.75rem;                /* 12px */
		font-weight: var(--gs-weight-semibold);
		letter-spacing: 0.35em;
		text-transform: uppercase;
		white-space: nowrap;
		gap: 0;
	}

	.gs-cta--compact .gs-cta__btn .gs-btn__icon {
		display: none;
	}

	.gs-cta--compact .gs-cta__media {
		flex: 0 1 8.3125rem;               /* 133px */
		width: auto;
		min-width: 0;
	}
}