/* ==========================================================================
   GrowthStudioz, "Why Choose Us?"

   A dark band, a heading, and two white boxes comparing other agencies with
   GrowthStudioz (Adarsh, 1st October 2026, Performance Marketing).

   Off the Figma inspector:
     band     #262626, edge to edge; 32 above and below the content; content
              1190.86 wide (two boxes of 577.43 and the 36 between them)
     heading  DM Sans 600, 64px, line height 70px, -3.02px tracking, #F1F1F1;
              24 to the boxes
     box      white, radius 23.93, 23.93 inside left and right, 311.15 tall;
              shadow 0 5.98 29.92 at 5% black; 11.97 between head and rows
     head     "Other Agencies": DM Sans 500, 24px, black, in a 31px line
     row      52.93 tall: 11.97 padding, 1.2px #999999 rule under it
              text: Jost 400, 20px, black (#3C3533 in the GrowthStudioz box)
              mark: 26.93 square, the supplied cross (#E30000) or tick
              (#83C900)
     phone    off the frame: band 27 above and 23 below; heading 32px, 27 to
              the boxes; boxes stacked 16 apart, radius 15, the rules running
              edge to edge; head 16px; rows 36 tall, text 14px, mark 18

   Jost is a THIRD family, loaded for these rows only (base.css has the rule
   that the site is one family, with Inter as the one earlier exception, also
   for a single Figma band). The @font-face lives here, not in base.css, so no
   other page can reach for it by accident.

   One deliberate difference from the frame: there the first box centres its
   contents and the second starts at the top, so the rows of the two boxes sit
   11px out of line with each other. Here both heads take the same 31px line,
   so the rows line up across the boxes.
   ========================================================================== */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost/jost-400-latin.woff2") format("woff2");
}

.gs-why {
	/* Full bleed, the same three-part fix the creatives band uses: negative
	   margin to cancel main's gutter, and the max-width cap lifted. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	/* The sitewide gap, in white, above and below the dark band. */
	margin-block: var(--gs-section-pad);
	padding: 2rem var(--gs-gutter-now);            /* 32px */
	background: #262626;
}

.gs-why__inner {
	max-width: 74.42875rem;                        /* 1190.86px */
	margin-inline: auto;
}

.gs-why__title {
	margin: 0 0 1.5rem;                            /* 24px */
	color: #F1F1F1;
	line-height: 1.09375;                          /* 70 over 64 */
}

.gs-why__boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem;                                  /* 36px */
}

/* A band with only one list filled in shows one box, full width. */
.gs-why__box:only-child {
	grid-column: 1 / -1;
}

.gs-why__box {
	/* 28.23 above and below is what centres the frame's four rows in its
	   311.15 box; the box here is as tall as its rows instead, so a fifth
	   row does not overflow it. */
	padding: 1.764375rem 1.495625rem;              /* 28.23 / 23.93 */
	border-radius: 1.495625rem;                    /* 23.93px */
	background: var(--gs-white);
	box-shadow: 0 5.98px 29.92px rgba(0, 0, 0, 0.05);
}

.gs-why__head {
	display: flex;
	align-items: center;
	/* The same line in both boxes, text or wordmark, so the rows under them
	   start level. */
	min-height: 1.9375rem;                         /* 31px */
	margin: 0 0 0.748125rem;                       /* 11.97px */
	max-width: none;
	color: #000;
	font-size: 1.5rem;                             /* 24px */
	font-weight: var(--gs-weight-medium);
	line-height: 1.2917;                           /* 31 over 24 */
	letter-spacing: 0;
}

.gs-why__logo {
	display: block;
	width: auto;
	height: 1.5rem;                                /* 24px */
	color: #000;
}

.gs-why__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-why__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.748125rem;                          /* 11.97px */
	/* The rule sits INSIDE the row's 52.93, as a Figma stroke does, so its
	   thickness comes off the padding under the text instead of adding to
	   the row. */
	padding-block-end: calc(0.748125rem - 1.2px);
	border-block-end: 1.2px solid #999999;
	max-width: none;
}

.gs-why__text {
	color: #000;
	font-family: "Jost", var(--gs-font);
	font-size: 1.25rem;                            /* 20px */
	font-weight: 400;
	/* 29 over 20, the row's 52.93 less its padding and rule. */
	line-height: 1.45;
}

.gs-why__list--us .gs-why__text {
	color: #3C3533;
}

.gs-why__icon {
	flex: none;
	width: 1.683125rem;                            /* 26.93px */
	height: 1.683125rem;
}

/* --- empty (editors only) ------------------------------------------------- */

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

/* --- small laptop and tablet -----------------------------------------------
   Side by side, each box needs about 487px for its longest row to stay on one
   line (372 of text, the mark, and the paddings), so the pair needs a 1130px
   screen. Below that a row would wrap in one box and not the other, and the
   boxes stack instead. */

@media (max-width: 1139px) {
	.gs-why__boxes {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.gs-why {
		padding-block: 1.6875rem 1.4375rem;        /* 27 / 23 */
	}

	.gs-why__title {
		margin-block-end: 1.6875rem;               /* 27px */
	}

	.gs-why__boxes {
		gap: 1rem;                                 /* 16px */
	}

	/* The rules run the width of the box on the phone; only the head is
	   inset. */
	.gs-why__box {
		padding: 1.1875rem 0.09375rem 1.0625rem;   /* 19 / 1.5 / 17 */
		border-radius: 0.9375rem;                  /* 15px */
	}

	.gs-why__head {
		min-height: 1.3125rem;                     /* 21px */
		margin-block-end: 0.375rem;                /* 6px */
		padding-inline: 0.9375rem;                 /* 15px */
		font-size: 1rem;                           /* 16px */
		line-height: 1.3125;
	}

	.gs-why__logo {
		height: 0.9375rem;                         /* 15px */
	}

	.gs-why__row {
		padding: 0.5rem;                           /* 8px */
		padding-block-end: calc(0.5rem - 1px);
		gap: 0.5rem;
		border-block-end-width: 1px;
	}

	.gs-why__text {
		font-size: 0.875rem;                       /* 14px */
		line-height: 1.4286;                       /* 20 over 14 */
	}

	.gs-why__icon {
		width: 1.125rem;                           /* 18px */
		height: 1.125rem;
	}
}