/* ==========================================================================
   GrowthStudioz, statement band

   "25+ / D2C brands launched / in the last 2 years" left, a paragraph right.

   Desktop type is straight off the Figma inspector (Adarsh, 24th September
   2026):
     25+                  600, 100px, line height 100%, tracking -3.02px
     D2C brands launched  700,  48px, line height 100%, tracking 0
     in the last 2 years  600,  32px, line height 100%, tracking 0
     all #000000
   ========================================================================== */

.gs-stat {
	--gs-stat-value: 6.25rem;         /* 100px */
	--gs-stat-line-2: 3rem;           /* 48px */
	--gs-stat-line-3: 2rem;           /* 32px */

	padding-block: var(--gs-section-pad);
}

.gs-stat__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--gs-space-8);
}

/* --- the claim ------------------------------------------------------------ */

.gs-stat__claim {
	flex: 1;
	margin: 0;
	max-width: none;
	color: var(--gs-black);
	/* Inter, per the inspector , the only place on the site that is not DM
	   Sans. The fallback is DM Sans rather than a system stack, so if Inter
	   ever fails to load these lines still land in the site's own family
	   instead of Arial.

	   The two frames disagreed on "25+" , DM Sans on desktop, Inter on mobile.
	   Adarsh settled it: the number stays DM Sans, so it overrides this
	   below. Inter applies to the two lines under it. */
	font-family: "Inter", var(--gs-font);
	/* Every line is 100% in the design, and each part below carries its own
	   size so the block's strut cannot inflate a line the way it did on the
	   CTA heading. */
	line-height: 1;
	/* base.css gives every h1-h6 the display tracking; only the number takes
	   any here, and it takes a different amount. */
	letter-spacing: 0;
}

.gs-stat__value,
.gs-stat__line-2,
.gs-stat__line-3 {
	display: block;
}

/* DM Sans, not Inter (Adarsh, 24th September 2026). The number keeps the
   site's own family; only the two lines under it are Inter. */
.gs-stat__value {
	font-family: var(--gs-font);
	font-size: var(--gs-stat-value);
	font-weight: var(--gs-weight-semibold);
	/* -3.02px at 100px, so -0.0302em holds if the size ever fluids. */
	letter-spacing: -0.0302em;
}

.gs-stat__line-2 {
	margin-block-start: 0.24em;
	font-size: var(--gs-stat-line-2);
	font-weight: var(--gs-weight-bold);
}

.gs-stat__line-3 {
	margin-block-start: 0.34em;
	font-size: var(--gs-stat-line-3);
	font-weight: var(--gs-weight-semibold);
}

/* --- words layout -------------------------------------------------------- */

/* "We're / Your Brand's / Storyteller" (Narrativ). The same sizes as the
   number layout, mapped by how big each line looks in the design: the small
   lead-in takes line 3's size and weight, and both large lines take line 2's.
   All three are words, so all three are Inter, like the number layout's
   word lines. */
.gs-stat--words .gs-stat__value {
	font-family: inherit;
	font-size: var(--gs-stat-line-3);
	font-weight: var(--gs-weight-semibold);
	letter-spacing: 0;
}

.gs-stat--words .gs-stat__line-3 {
	margin-block-start: 0.24em;
	font-size: var(--gs-stat-line-2);
	font-weight: var(--gs-weight-bold);
}

/* --- narrow width -------------------------------------------------------- */

/* From 1024px up: 70px between the heading and the paragraphs, with the
   heading column fitting its text. The 72% centred column starts at 1280
   (below); 1024-1279, tablets and phones run the full row. */
@media (min-width: 1024px) {
	/* 70px between the heading and the paragraphs (Adarsh, 25th September
	   2026). A literal: the spacing scale steps 64 / 80. */
	.gs-stat--narrow .gs-stat__inner {
		gap: 4.375rem;
	}

	/* The heading column fits its own text, so the 70px is the space the eye
	   actually sees; the paragraphs take the rest. */
	.gs-stat--narrow .gs-stat__claim {
		flex: none;
	}
}

/* The narrow column: 72% of the row, about 950px on a 1440 screen, and a
   share rather than a fixed width so it scales with the screen (Adarsh, 25th
   September 2026). Only from 1280 up: below that 72% squeezes the paragraphs
   to a few words a line, so small laptops run the full row, as UX19 does. */
@media (min-width: 1280px) {
	.gs-stat--narrow .gs-stat__inner {
		max-width: 72%;
		margin-inline: auto;
	}
}

/* --- body ----------------------------------------------------------------- */

/* Off the inspector: DM Sans 400, 24px, line height 120%, letter spacing 1%,
   "Text Grey" #545454. Bold runs are the same size and tracking at 700.

   None of these are site defaults: --gs-b3 is 16px, the body line height is
   1.55, body copy carries no tracking, and --gs-body-soft is #737373. */
.gs-stat__body {
	flex: 1;
	color: #545454;
	font-size: 1.5rem;                /* 24px */
	line-height: 1.2;
	letter-spacing: 0.01em;           /* 1% */
}

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

.gs-stat__body p + p {
	margin-block-start: var(--gs-space-4);
}

/* The services are picked out in bold in the design, and bold reads as ink
   rather than the muted body grey. */
.gs-stat__body strong,
.gs-stat__body b {
	color: var(--gs-ink);
	font-weight: var(--gs-weight-bold);
}

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

.gs-stat--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-stat--empty p {
	margin: 0;
	max-width: none;
}

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

   Also straight off the inspector:
     25+                  700, 67.65px, line height 100%
     D2C brands launched  700, 29.01px, line height 100%
     in the last 2 years  600, 16.32px, line height 100%
     body                 400, 10px, line height 120%, #545454
                          bold runs 700, 10px

   The claim and the body stay SIDE BY SIDE here, as the design shows , this
   band does not stack.
   ========================================================================== */

@media (max-width: 767px) {
	.gs-stat {
		--gs-stat-value: 67.65px;
		--gs-stat-line-2: 29.01px;
		--gs-stat-line-3: 16.32px;
	}

	.gs-stat__inner {
		gap: var(--gs-space-5);
	}

	/* 700 here, against 600 on desktop. The number is drawn heavier on the
	   phone, where it is carrying the column on its own. */
	.gs-stat__value {
		font-weight: var(--gs-weight-bold);
		/* Tracking is 0% on the phone, where desktop takes -3.02px. */
		letter-spacing: 0;
	}

	/* The heavier phone weight is the number's; a words lead-in keeps 600. */
	.gs-stat--words .gs-stat__value {
		font-weight: var(--gs-weight-semibold);
	}

	/* 10px on the phone, and tracking back to 0 , desktop takes 1%, the phone
	   takes none. */
	.gs-stat__body {
		font-size: 10px;
		letter-spacing: 0;
	}
}