/* Services Grid block. Tokens (--gb-*) come from main.css / editor styles.
   White intro on the about-section sketch; the indigo band starts exactly
   where the first row of card images ends (cards pulled up 230px). */
.gb-services__intro {
	position: relative;
	/* Design puts the heading ~110px below the section top; 56px gap under the
	   heading + 230px that the pulled-up cards occupy. */
	padding: 6.9rem 1.25rem 286px;
	background: transparent;
	color: var(--gb-dark);
}

@media (max-width: 1023px) {
	.gb-services__intro {
		padding-bottom: 216px;
	}

	.gb-services__watermark {
		display: none;
	}
}

@media (max-width: 640px) {
	.gb-services__intro {
		padding-bottom: 2.5rem;
	}
}

.gb-services__inner {
	position: relative;
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-services__watermark {
	left: 0;
	/* Sits at the section top, overlapping the heading's first line. */
	top: -0.4em;
	/* Design: SERVICE ghost at 13% opacity (Nexa Black 175px stand-in). */
	-webkit-text-stroke-color: rgba(28, 33, 99, 0.13);
}

.gb-services__heading {
	position: relative;
	margin: 0;
	max-width: 900px;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.22;
	font-weight: 400;
	color: var(--gb-dark);
}

.gb-services__arrow {
	vertical-align: middle;
	margin: 0 0.6rem;
	color: var(--gb-dark);
}

.gb-services__subtext {
	margin: 1rem 0 0;
	max-width: 730px;
	font-size: 1.02rem;
	color: var(--gb-dark);
}

.gb-services__band {
	padding: 0 1.25rem 5rem;
	background: var(--gb-band);
	color: var(--gb-white);
}

.gb-services__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	/* Cards straddle the white/indigo boundary: pulled up by exactly the
	   card image height + inset (230px), like the design. Only applies when
	   this block renders its own intro above the grid -- with no intro
	   (e.g. Services hub, where about-company supplies it instead) there's
	   nothing to straddle into. */
	transform: translateY(-230px);
	margin-bottom: -230px;
}

.gb-services--no-intro .gb-services__grid {
	transform: none;
	margin-bottom: 0;
}

.gb-services--no-intro .gb-services__band {
	padding-top: 4rem;
	/* This frame has no indigo band -- cards sit on plain white/page bg,
	   only the first card carries color. */
	background: transparent;
	color: var(--gb-dark);
}

.gb-services--no-intro .gb-services__card-title {
	/* Serif display font per this frame, not the bold sans used on Home. */
	font-family: var(--gb-font-display);
	font-weight: 400;
}

.gb-services--no-intro .gb-services__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.gb-services--no-intro .gb-services__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	text-align: center;
}

.gb-services--no-intro .gb-services__card-body .gb-button {
	margin-top: auto;
}

/* Services hub (Figma 577:2): fixed-height, centered editorial cards. */
@media (min-width: 1024px) {
	.page-id-51 .gb-services--no-intro .gb-services__band {
		padding-top: 0; padding-bottom: 0;
	}
	.page-id-51 .gb-services--no-intro .gb-services__grid { row-gap: 26px; }
	.page-id-51 .gb-services--no-intro .gb-services__card {
		height: 524px; border-width: 2px;
	}
	.page-id-51 .gb-services--no-intro .gb-services__card-icon-box {
		height: 176px; flex: 0 0 176px;
	}
	.page-id-51 .gb-services--no-intro .gb-services__card-body {
		padding: 0 10px 62px; gap: 0;
	}
	.page-id-51 .gb-services--no-intro .gb-services__card-title {
		margin: 0 0 34px; font-size: 30px; line-height: 35px;
	}
	.page-id-51 .gb-services--no-intro .gb-services__card-blurb {
		max-width: 348px; font-size: 16px; line-height: 22px;
	}
	.page-id-51 .gb-services--no-intro .gb-button {
		width: 246px; height: 49px; padding: 8px 21px; background: var(--gb-band);
	}
	.page-id-51 .gb-services--no-intro .gb-services__card--featured .gb-button {
		background: var(--gb-gold);
	}
	.page-id-51 .gb-services__card:nth-child(1) .gb-services__card-icon { width: 78px; height: 85px; }
	.page-id-51 .gb-services__card:nth-child(2) .gb-services__card-icon { width: 83px; height: 65px; }
	.page-id-51 .gb-services__card:nth-child(3) .gb-services__card-icon { width: 70px; height: 97px; }
	.page-id-51 .gb-services__card:nth-child(4) .gb-services__card-icon { width: 98px; height: 96px; }
	.page-id-51 .gb-services__card:nth-child(5) .gb-services__card-icon { width: 85px; height: 85px; }
	.page-id-51 .gb-services__card:nth-child(6) .gb-services__card-icon { width: 78px; height: 89px; }
	.page-id-51 .gb-services__card:nth-child(7) .gb-services__card-icon { width: 82px; height: 82px; }

	.page-id-51 .gb-services__card:nth-child(1) .gb-services__card-title { width: 279px; margin-bottom: 40px; }
	.page-id-51 .gb-services__card:nth-child(2) .gb-services__card-title { width: 248px; margin-bottom: 40px; }
	.page-id-51 .gb-services__card:nth-child(3) .gb-services__card-title { margin-bottom: 75px; }
	.page-id-51 .gb-services__card:nth-child(4) .gb-services__card-title { width: 199px; margin-bottom: 40px; }
	.page-id-51 .gb-services__card:nth-child(5) .gb-services__card-title { width: 289px; margin-top: 16px; margin-bottom: 29px; }
	.page-id-51 .gb-services__card:nth-child(6) .gb-services__card-title { width: 228px; margin-top: -11px; margin-bottom: 32px; }
	.page-id-51 .gb-services__card:nth-child(7) .gb-services__card-title { width: 278px; margin-top: -2px; margin-bottom: 23px; }

	.page-id-51 .gb-services__card:nth-child(1) .gb-services__card-blurb { width: 218px; }
	.page-id-51 .gb-services__card:nth-child(2) .gb-services__card-blurb { width: 247px; }
	.page-id-51 .gb-services__card:nth-child(3) .gb-services__card-blurb { width: 261px; }
	.page-id-51 .gb-services__card:nth-child(4) .gb-services__card-blurb { width: 230px; }
	.page-id-51 .gb-services__card:nth-child(5) .gb-services__card-blurb { width: 338px; }
	.page-id-51 .gb-services__card:nth-child(6) .gb-services__card-blurb { width: 348px; }
	.page-id-51 .gb-services__card:nth-child(7) .gb-services__card-blurb { width: 325px; }

	.page-id-51 .gb-services__card:nth-child(n + 5) .gb-services__card-body { padding-bottom: 68px; }
}

.gb-services__card.gb-services__card--featured {
	background: var(--gb-band);
	border-color: var(--gb-band);
}

.gb-services__card.gb-services__card--featured .gb-services__card-title,
.gb-services__card--featured .gb-services__card-blurb {
	color: var(--gb-white);
}

.gb-services__card.gb-services__card--featured .gb-services__card-icon-box {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.gb-services__card.gb-services__card--featured .gb-services__card-icon {
	filter: brightness(0) invert(1);
}

.gb-services__card {
	grid-column: span 3;
	display: block;
	border: 1px solid #e5e5e5;
	background: var(--gb-white);
	color: var(--gb-dark);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gb-services__card:nth-child(n + 5) {
	grid-column: span 4;
}

.gb-services__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
}

.gb-services__card-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
}

.gb-services__card-body {
	padding: 1.5rem 1.25rem 1.6rem;
}

.gb-services__card-icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 145px;
	object-fit: contain;
}

.gb-services__card-title {
	margin: 0 0 0.75rem;
	font-family: var(--gb-font-subheading);
	font-size: 1.5rem;
	line-height: 1.29;
	font-weight: 700;
	color: #0f0f0f;
	text-transform: uppercase;
}

.gb-services__card-blurb {
	margin: 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--gb-dark);
}

/* Home desktop measurements from frame 537:2. */
@media (min-width: 1024px) {
	/* Pulls this section up over the About sketch's reveal zone (see the
	   matching comment in about-company/style.css) — the intro's background
	   stays transparent so the sketch shows through behind the "SERVICE"
	   watermark instead of a dead white gap sitting between the two blocks. */
	.home .gb-services { margin-top: -200px; }
	.home .gb-services__intro { padding-top: 198px; padding-bottom: 289px; }
	.home .gb-services__intro .gb-services__inner { max-width: 1330px; }
	.home .gb-services__band { padding-bottom: 143px; }
	.home .gb-services__grid {
		row-gap: 30px; transform: translateY(-245px); margin-bottom: -245px;
	}
	/* Figma revised this grid (nodes 743:xxx superseding the old 537:34x/35x
	   cards) so both rows are now a uniform 500px — the old design had row 2
	   taller (510px vs row 1's 483px); that asymmetry is gone. */
	.home .gb-services__card { height: 500px; }
	.home .gb-services__card-icon-box { height: 243px; }
	/* Revised Figma (743:142 etc.) shows these cards matching the hub page's
	   treatment — serif display font, centered — not the bold sans/left
	   alignment the with-intro variant used before. */
	.home .gb-services__card-title {
		font-family: var(--gb-font-display);
		font-weight: 700;
		text-align: center;
	}
	.home .gb-services__card-blurb { text-align: center; }
}

@media (max-width: 1023px) {
	.gb-services__card,
	.gb-services__card:nth-child(n + 5) {
		grid-column: span 6;
	}

	.gb-services__grid {
		transform: translateY(-160px);
		margin-bottom: -160px;
	}
}

@media (max-width: 640px) {
	.gb-services__card,
	.gb-services__card:nth-child(n + 5) {
		grid-column: 1 / -1;
	}

	.gb-services__grid {
		transform: none;
		margin-bottom: 0;
		padding-top: 2.5rem;
	}
}