/* ==========================================================================
   Brands we launched (gs/launched), Launchpad, after Launch plan

   From Adarsh's exports results-section-desktop.svg (1440 x 1089) and
   results-section-mobile.svg (393 x 1773), 7th October 2026.

   Desktop: #0A0A0A band, 80 above and below. Heading 600 64 / -3.02, white.
   44 under it, the big card: 1280 x 580, radius 26, #2F2F2F, 1px #262626
   line on top of everything. Left 600: pictures, cropped to fill, on a
   #1A1A1A to black wash; two 49.7 square arrows 16 in, white to #F3F3F3 at
   39%, the frame's tall black chevrons; dots 16 from the bottom. Right: 44
   in on every side. White logo (264 x 46) with the industry 700 12 / 1px
   #8C8C8C caps on the far right; 24 under, chips (28 high, 1px #262626, fill
   #F1F1F1, 500 12 #545454, 11 + 1 in, 8 apart); 24, the summary 400 18/27
   white; 24, the numbers two to a row, 10 apart: #DDDDDD tiles radius 14,
   16 in, 700 24 #E11D2E over 500 12/17 #545454, 4 between; the button at
   the bottom (24 clear at least): 50 high, radius 8, #F1F1F1, 600 20 /
   0.2em black, the frame's small up-right arrow after it.
   44 under the big card, the small cards three to a row, 16 apart: radius
   20, #2F2F2F, 1px #262626, 22 in; name 700 14 / 1px white caps with the
   industry 500 11 / 0.5px #8C8C8C caps on the right; 20, the figure 700 36
   / -1 #F1F1F1; 20, the line 400 14/21 #8C8C8C.

   Phone: 40 above and below; heading 600 32/38 / -1 on two lines; 24 under
   it the big card full width, the pictures 320 high on top, then 24 in: the
   logo, 12, the industry; 20, chips; 20, the summary 400 16/24; 20, the
   numbers; 24, the button. 24 under, the small cards stacked 16 apart, each
   only as tall as its words. Arrows 12 in.

   Dots: one per picture, the shown one red. As in the frame, the two dots
   furthest along shrink (8.4, then 7.47, then 5.13) and any beyond them are
   left out, so a long set never runs wider than five.
   ========================================================================== */

.gs-launched {
	--gs-launched-card: #2F2F2F;
	--gs-launched-line: #262626;
	--gs-launched-muted: #8C8C8C;
	--gs-launched-tile: #DDDDDD;
	--gs-launched-tile-ink: #545454;
	--gs-launched-light: #F1F1F1;
	--gs-launched-red: var(--gs-pm-red);                 /* #E11D2E */

	/* Full bleed, as the bands around it: cancel main's gutter, lift core's
	   max-width cap, put the gutter back inside. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 5rem var(--gs-gutter-now);                  /* 80 above and below */
	background: #0A0A0A;
	color: #FFFFFF;
}

.gs-launched__inner {
	max-width: 80rem;                                    /* 1280: 80 in at 1440 */
	margin-inline: auto;
}

.gs-launched__title {
	margin: 0;
	max-width: none;
	color: #FFFFFF;
	font-size: clamp(3rem, 5vw, 4rem);                   /* 64 from 1280 */
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.0473em;                           /* -3.02 at 64 */
	text-wrap: balance;
}

/* --- big card ---------------------------------------------------------------------- */

.gs-launched__feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 600fr) minmax(0, 680fr);
	min-height: 36.25rem;                                /* 580 */
	margin-block-start: 2.75rem;                         /* 44 */
	overflow: hidden;
	border-radius: 1.625rem;                             /* 26 */
	background: var(--gs-launched-card);
}

/* The frame draws the line over the pictures, not around them. */
.gs-launched__feature::after {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--gs-border-width) solid var(--gs-launched-line);
	border-radius: inherit;
	pointer-events: none;
}

.gs-launched__feature--no-media {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

/* --- pictures ---------------------------------------------------------------------- */

.gs-launched__media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #1A1A1A 0%, #000000 100%);
}

.gs-launched__slides {
	position: absolute;
	inset: 0;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gs-launched__slides::-webkit-scrollbar {
	display: none;
}

.gs-launched__slides:focus-visible {
	outline: 0.125rem solid #FFFFFF;
	outline-offset: -0.25rem;
}

.gs-launched__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

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

.gs-launched__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.108rem;                                     /* 49.73 */
	height: 3.108rem;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;                               /* 8 */
	background: linear-gradient(180deg, rgb(255 255 255 / 0.39) 0%, rgb(243 243 243 / 0.39) 100%);
	color: #000000;
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		transform var(--gs-dur-press) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

.gs-launched__arrow--prev {
	left: 1rem;                                          /* 16 */
}

.gs-launched__arrow--next {
	right: 1rem;
}

.gs-launched__arrow svg {
	width: 0.875rem;                                     /* 14 */
	height: 1.5625rem;                                   /* 25 */
}

/* Arrows and dots only work with the script; without it the pictures still
   swipe. */
.gs-launched__media:not(.is-ready) .gs-launched__arrow,
.gs-launched__media:not(.is-ready) .gs-launched__dots {
	visibility: hidden;
}

.gs-launched__arrow:active {
	transform: translateY(-50%) scale(0.97);
}

.gs-launched__arrow:focus-visible {
	outline: 0.125rem solid #FFFFFF;
	outline-offset: 0.1875rem;
}

/* Red on hover, as the launch plan's arrows (Adarsh, 7th October 2026). */
@media (hover: hover) and (pointer: fine) {
	.gs-launched__arrow:hover {
		background: var(--gs-launched-red);
		color: #FFFFFF;
	}
}

.gs-launched__dots {
	position: absolute;
	bottom: 1rem;                                        /* 16 */
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.1167rem;                                      /* 1.87 */
	transform: translateX(-50%);
}

.gs-launched__dot {
	width: 0.525rem;                                     /* 8.4 */
	height: 0.525rem;
	border-radius: 50%;
	background: #D9D9D9;
	box-shadow: 0 0 0.25rem rgb(0 0 0 / 0.25);
	transition:
		width 200ms var(--gs-ease-out),
		height 200ms var(--gs-ease-out),
		background-color 200ms ease;
}

.gs-launched__dot.is-active {
	background: var(--gs-launched-red);
}

.gs-launched__dot[data-far="1"] {
	width: 0.4667rem;                                    /* 7.47 */
	height: 0.4667rem;
}

.gs-launched__dot[data-far="2"] {
	width: 0.3208rem;                                    /* 5.13 */
	height: 0.3208rem;
}

.gs-launched__dot[data-far="3"] {
	display: none;
}

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

.gs-launched__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 2.75rem;                                    /* 44 */
}

.gs-launched__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.gs-launched__brand {
	margin: 0;
	max-width: none;
	color: #FFFFFF;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Contained, so no logo is stretched. A little over the frame's 264 x 46.6:
   logo files carry some blank edge (Zanak's has 7 units of 202 on its
   right), and at this size its letters span exactly the frame's 264. */
.gs-launched__logo {
	display: block;
	width: auto;
	max-width: min(17.0625rem, 100%);                    /* 273 */
	height: 2.96rem;                                     /* 47.4 */
	object-fit: contain;
	object-position: left center;
}

/* The Client's logo is drawn for white backgrounds: turned white here. */
.gs-launched__logo--tint {
	filter: brightness(0) invert(1);
}

.gs-launched__industry {
	flex: none;
	margin: 0;
	max-width: none;
	color: var(--gs-launched-muted);
	font-size: 0.75rem;                                  /* 12 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.0625rem;                           /* 1 */
	text-align: right;
	text-transform: uppercase;
}

.gs-launched__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;                                         /* 8 */
	margin: 1.5rem 0 0;                                  /* 24 */
	padding: 0;
	list-style: none;
}

.gs-launched__tag {
	display: inline-flex;
	align-items: center;
	height: 1.75rem;                                     /* 28 */
	padding-inline: 0.6875rem;                           /* 11, +1 line = 12 */
	border: var(--gs-border-width) solid var(--gs-launched-line);
	border-radius: 999px;
	background: var(--gs-launched-light);
	color: var(--gs-launched-tile-ink);
	font-size: 0.75rem;                                  /* 12 */
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.gs-launched__summary {
	margin: 1.5rem 0 0;                                  /* 24 */
	max-width: none;
	color: #FFFFFF;
	font-size: 1.125rem;                                 /* 18 */
	font-weight: 400;
	line-height: 1.6875rem;                              /* 27 */
	text-wrap: pretty;
}

.gs-launched__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;                                       /* 10 */
	margin: 1.5rem 0 0;                                  /* 24 */
	padding: 0;
	list-style: none;
}

.gs-launched__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;                                        /* 4 */
	padding: 1rem;                                       /* 16 */
	border-radius: 0.875rem;                             /* 14 */
	background: var(--gs-launched-tile);
}

.gs-launched__stat-value {
	color: var(--gs-launched-red);
	font-size: 1.5rem;                                   /* 24 */
	font-weight: 700;
	line-height: 1.875rem;                               /* 30 */
}

.gs-launched__stat-label {
	color: var(--gs-launched-tile-ink);
	font-size: 0.75rem;                                  /* 12 */
	font-weight: 500;
	line-height: 1.0625rem;                              /* 17 */
}

/* At the bottom of the card on desktop, where the pictures set the height. */
.gs-launched__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.1875rem;                                      /* 3, +4.9 inside the icon */
	min-height: 3.125rem;                                /* 50 */
	margin-block-start: auto;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;                               /* 8 */
	background: var(--gs-launched-light);
	color: #000000;
	font-size: 1.25rem;                                  /* 20 */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-align: center;
	text-decoration: none;
	transition:
		transform var(--gs-dur-press) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

/* At least 24 above the button, whichever field comes last before it. */
.gs-launched__body > :nth-last-child(2) {
	margin-block-end: 1.5rem;                            /* 24 */
}

.gs-launched__btn-icon {
	flex: none;
	width: 1.05rem;                                      /* 16.8 */
	height: 1.05rem;
}

/*
 * The whole card opens the case study (Adarsh, 8th October 2026), except the
 * pictures: their gallery swipes and has its own arrows, so it sits above the
 * link's stretched layer. Hovering the rest is hovering the link, so the
 * button turns red by itself. No shrink on press: a transform would make the
 * button the box its ::after is measured from and drop a press that started
 * elsewhere on the card.
 */
.gs-launched__btn::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gs-launched__media {
	z-index: 1;
}

.gs-launched__btn:focus-visible {
	outline: 0.125rem solid #FFFFFF;
	outline-offset: 0.1875rem;
}

/* `a.` in front: base.css's `a:not(.gs-btn):hover` (0,2,1) turns link text
   red, which on this fill left red on red. */
@media (hover: hover) and (pointer: fine) {
	a.gs-launched__btn:hover {
		background: var(--gs-launched-red);
		color: #FFFFFF;
	}
}

/* --- small cards ------------------------------------------------------------------- */

.gs-launched__more {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;                                           /* 16 */
	margin: 2.75rem 0 0;                                 /* 44 */
	padding: 0;
	list-style: none;
}

.gs-launched__item {
	display: flex;
	min-width: 0;
}

.gs-launched__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.3125rem;                                  /* 21, +1 line = 22 */
	border: var(--gs-border-width) solid var(--gs-launched-line);
	border-radius: 1.25rem;                              /* 20 */
	background: var(--gs-launched-card);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--gs-dur-hover) ease;
}

.gs-launched__card:focus-visible {
	outline: 0.125rem solid #FFFFFF;
	outline-offset: 0.1875rem;
}

@media (hover: hover) and (pointer: fine) {
	a.gs-launched__card:hover {
		border-color: var(--gs-launched-red);
		color: inherit;
	}
}

.gs-launched__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.gs-launched__card-name {
	color: #FFFFFF;
	font-size: 0.875rem;                                 /* 14 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.0625rem;                           /* 1 */
	text-transform: uppercase;
}

.gs-launched__card-industry {
	flex: none;
	color: var(--gs-launched-muted);
	font-size: 0.6875rem;                                /* 11 */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.03125rem;                          /* 0.5 */
	text-align: right;
	text-transform: uppercase;
}

.gs-launched__card-figure {
	display: block;
	margin-block-start: 1.25rem;                         /* 20 */
	color: var(--gs-launched-light);
	font-size: 2.25rem;                                  /* 36 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.0625rem;                          /* -1 */
}

.gs-launched__card-line {
	display: block;
	margin-block-start: 1.25rem;                         /* 20 */
	color: var(--gs-launched-muted);
	font-size: 0.875rem;                                 /* 14 */
	font-weight: 400;
	line-height: 1.3125rem;                              /* 21 */
	text-wrap: pretty;
}

/* --- tablet: the big card stacks, small cards two to a row ----------------------- */

@media (max-width: 1023.98px) {
	.gs-launched {
		padding-block: 3.75rem;                          /* 60 */
	}

	.gs-launched__feature {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.gs-launched__media {
		aspect-ratio: 16 / 10;
	}

	.gs-launched__body {
		padding: 2rem;
	}

	.gs-launched__more {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

@media (max-width: 767.98px) {
	.gs-launched {
		padding-block: 2.5rem;                           /* 40 */
	}

	.gs-launched__title {
		font-size: 2rem;                                 /* 32 */
		line-height: 2.375rem;                           /* 38 */
		letter-spacing: -0.0625rem;                      /* -1 */
	}

	.gs-launched__feature {
		margin-block-start: 1.5rem;                      /* 24 */
	}

	.gs-launched__media {
		aspect-ratio: 361 / 320;
	}

	.gs-launched__arrow--prev {
		left: 0.75rem;                                   /* 12 */
	}

	.gs-launched__arrow--next {
		right: 0.75rem;
	}

	.gs-launched__body {
		padding: 1.5rem;                                 /* 24 */
	}

	.gs-launched__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;                                    /* 12 */
	}

	.gs-launched__industry {
		text-align: left;
	}

	.gs-launched__tags,
	.gs-launched__summary {
		margin-block-start: 1.25rem;                     /* 20 */
	}

	.gs-launched__summary {
		font-size: 1rem;                                 /* 16 */
		line-height: 1.5rem;                             /* 24 */
	}

	.gs-launched__stats {
		margin-block-start: 1.25rem;                     /* 20 */
	}

	.gs-launched__more {
		grid-template-columns: minmax(0, 1fr);
		margin-block-start: 1.5rem;                      /* 24 */
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-launched__dot {
		transition: background-color 200ms ease;
	}
}