/**
 * The centred homepage hero.
 *
 * Everything here is drawn in CSS — the perspective grid, the star field, the
 * floating regulation cursors and the dashboard preview. No image assets, so
 * the hero costs one HTTP request and stays sharp on any display.
 */

/* -------------------------------------------------------------------------
   Backdrop
   ---------------------------------------------------------------------- */

.gc-hero--center {
	--gc-hero-line: rgba( 255, 255, 255, 0.13 );

	text-align: center;
	overflow: hidden;
}

/* A perspective grid that fades out before it reaches the headline. */

.gc-hero--center::before {
	content: "";
	position: absolute;
	inset-inline: -20%;
	top: 0;
	height: 46%;
	z-index: 1;
	background-image:
		linear-gradient( var( --gc-hero-line ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --gc-hero-line ) 1px, transparent 1px );
	background-size: 64px 44px;
	transform: perspective( 40rem ) rotateX( 62deg );
	transform-origin: top center;
	-webkit-mask-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.9 ) 0%, transparent 78% );
	mask-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.9 ) 0%, transparent 78% );
	pointer-events: none;
}

/* Glows plus a sparse star field, so the gradient is never a flat rectangle. */

.gc-hero--center::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient( 40rem 22rem at 50% -4%, rgba( 255, 255, 255, 0.22 ) 0%, transparent 64% ),
		radial-gradient( 52rem 34rem at 50% 92%, rgba( 4, 48, 45, 0.55 ) 0%, transparent 66% ),
		radial-gradient( 1.5px 1.5px at 12% 26%, rgba( 255, 255, 255, 0.65 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 84% 18%, rgba( 255, 255, 255, 0.55 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 68% 42%, rgba( 255, 255, 255, 0.45 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 26% 58%, rgba( 255, 255, 255, 0.40 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 92% 62%, rgba( 255, 255, 255, 0.35 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 40% 12%, rgba( 255, 255, 255, 0.45 ), transparent 100% );
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Mark and eyebrow chip
   ---------------------------------------------------------------------- */

.gc-hero__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto var( --wp--preset--spacing--50 );
	border-radius: 999px;
	background: #fff;
	color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 8px rgba( 255, 255, 255, 0.10 ), 0 18px 40px -18px rgba( 2, 29, 28, 0.8 );
}

.gc-hero__mark svg {
	width: 1.75rem;
	height: 1.75rem;
}

.gc-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.15rem;
	color: rgba( 255, 255, 255, 0.92 );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.2;
	/* Hairlines either side, as on the reference — drawn as borders so they
	   scale with the chip rather than needing extra elements. */
	border-left: 1px solid rgba( 255, 255, 255, 0.28 );
	border-right: 1px solid rgba( 255, 255, 255, 0.28 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.12 ), rgba( 255, 255, 255, 0.04 ) );
}

.gc-hero__chip svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: #fff;
}

/* -------------------------------------------------------------------------
   Certification badges
   ---------------------------------------------------------------------- */

/* Supplied as one artwork, so it is sized by height and left to keep its own
   proportions — nothing here should ever restyle the marks themselves. */

.gc-hero__badges {
	display: flex;
	justify-content: center;
}

.gc-hero__badges img {
	height: 5.5rem;
	width: auto;
	max-width: 100%;
}

@media ( max-width: 600px ) {
	.gc-hero__badges img {
		height: 3.5rem;
	}
}

/* -------------------------------------------------------------------------
   Hero buttons
   ---------------------------------------------------------------------- */

.wp-block-button.is-style-gc-glass-btn .wp-block-button__link {
	background: rgba( 255, 255, 255, 0.16 );
	border: 1px solid rgba( 255, 255, 255, 0.30 );
	color: #fff;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	box-shadow: 0 14px 32px -16px rgba( 2, 29, 28, 0.9 );
}

.wp-block-button.is-style-gc-glass-btn .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.26 );
	color: #fff;
}

/* Both hero buttons get the circular chevron from the reference design. */

.gc-hero__actions .wp-block-button__link {
	padding-inline: 1.4rem 0.5rem;
	gap: 0.75rem;
}

.gc-hero__actions .wp-block-button__link::after {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, 0.22 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E" );
	background-size: 0.85rem;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-hero__actions .wp-block-button__link:hover::after {
	transform: translateX( 2px );
}

/* On the light primary button the white chevron would vanish, so it inverts to
   the brand teal on a tinted disc. */

.gc-hero__actions .is-style-gc-on-dark .wp-block-button__link::after {
	background-color: rgba( 11, 95, 88, 0.12 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23235ee4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E" );
}

/* -------------------------------------------------------------------------
   Hero proof rows
   ---------------------------------------------------------------------- */

.gc-hero__proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: var( --wp--preset--spacing--30 ) 0 0;
	padding: 0;
}

.gc-hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.3;
	color: rgba( 255, 255, 255, 0.88 );
}

.gc-hero__proof svg {
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
	color: var( --wp--preset--color--accent );
}

/* -------------------------------------------------------------------------
   Legacy dashboard mock (kept for the Site Editor's existing content)
   ---------------------------------------------------------------------- */

.gc-dash {
	position: relative;
	z-index: 2;
	max-width: 76rem;
	margin: var( --wp--preset--spacing--60 ) auto 0;
	padding-inline: clamp( 0.5rem, 3vw, 2rem );
}

.gc-dash__frame {
	/* Clipped at the hero's bottom edge, exactly as a real screenshot would
	   be if it continued past the fold. */
	height: clamp( 15rem, 34vw, 24rem );
	overflow: hidden;
	border-radius: 1rem 1rem 0 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-bottom: 0;
	background: #fff;
	box-shadow: 0 -2px 0 rgba( 255, 255, 255, 0.25 ), 0 40px 80px -30px rgba( 2, 29, 28, 0.7 );
	text-align: left;
	color: var( --wp--preset--color--contrast );
	font-size: 0.75rem;
	line-height: 1.35;
}

.gc-dash__topbar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gc-dash__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--contrast );
	white-space: nowrap;
}

.gc-dash__brand svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var( --wp--preset--color--primary );
}

.gc-dash__brand b {
	color: var( --wp--preset--color--ink-faint );
	font-weight: 600;
}

.gc-dash__crumbs {
	color: var( --wp--preset--color--ink-soft );
	white-space: nowrap;
}

.gc-dash__crumbs i {
	font-style: normal;
	color: var( --wp--preset--color--ink-faint );
	padding-inline: 0.2rem;
}

.gc-dash__crumbs b {
	color: var( --wp--preset--color--primary );
	font-weight: 500;
}

.gc-dash__search {
	margin-inline-start: auto;
	padding: 0.4rem 0.9rem;
	min-width: 11rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 999px;
	color: var( --wp--preset--color--ink-faint );
}

.gc-dash__avatar {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	border-radius: 999px;
	background: linear-gradient( 140deg, #12867c, #0b5f58 );
}

.gc-dash__body {
	display: flex;
	height: 100%;
}

.gc-dash__side {
	flex: none;
	width: 11rem;
	padding: 0.9rem 0.75rem;
	border-right: 1px solid var( --wp--preset--color--line );
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var( --wp--preset--color--surface );
}

.gc-dash__user {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem 0.85rem;
}

.gc-dash__user-dot {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: linear-gradient( 140deg, #cfe8e3, #8fbfb8 );
	flex: none;
}

.gc-dash__user b {
	display: block;
	font-weight: 600;
}

.gc-dash__user small {
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.6875rem;
}

.gc-dash__nav {
	padding: 0.45rem 0.6rem;
	border-radius: 0.4rem;
	color: var( --wp--preset--color--ink-soft );
}

.gc-dash__nav.is-active {
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

.gc-dash__main {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.1rem;
}

.gc-dash__stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0.7rem;
}

.gc-dash__stat {
	display: block;
	padding: 0.7rem 0.8rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.6rem;
	background: #fff;
}

.gc-dash__stat small {
	display: block;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.6875rem;
}

.gc-dash__stat b {
	display: block;
	margin: 0.15rem 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.gc-dash__stat i {
	font-style: normal;
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.6875rem;
}

.gc-dash__tabs {
	display: flex;
	gap: 1.1rem;
	margin-top: 1.1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--ink-soft );
	overflow: hidden;
	white-space: nowrap;
}

.gc-dash__tabs .is-active {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var( --wp--preset--color--primary );
	padding-bottom: 0.55rem;
	margin-bottom: -0.55rem;
}

.gc-dash__panel {
	margin-top: 0.9rem;
	height: 8rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.6rem;
	background:
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 38%, transparent 38% ) 0 1.4rem / 100% 0.5rem no-repeat,
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 62%, transparent 62% ) 0 3rem / 100% 0.5rem no-repeat,
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 48%, transparent 48% ) 0 4.6rem / 100% 0.5rem no-repeat,
		#fff;
	background-origin: content-box;
	padding: 0.9rem;
}

@media ( max-width: 900px ) {
	.gc-dash__side {
		display: none;
	}

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

/* -------------------------------------------------------------------------
   Bento feature grid
   ---------------------------------------------------------------------- */

.gc-bento {
	/* The grid is ours rather than WordPress's block layout: layout classes are
	   only emitted for blocks saved in the editor, so a static pattern would
	   render as a plain stack. */
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
	align-items: stretch;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* WordPress prints the group's block gap as a top margin on every child after
   the first. On a grid item that margin is not a gap: it shortens the stretched
   item and shifts it down, which is why the second card started 24px below the
   first and still finished level with it. The grid has its own `gap`, so the
   margins are only in the way. */

.gc-bento > .gc-bento__card {
	margin-block: 0;
}

.gc-bento__card--wide {
	grid-column: span 2;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.gc-bento__card {
	position: relative;
	overflow: hidden;
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--xl );
	background: var( --wp--preset--color--surface );
	transition: border-color 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-bento__card:hover {
	border-color: rgba( 11, 95, 88, 0.35 );
	box-shadow: var( --wp--preset--shadow--card );
}

/* The faint blueprint grid behind every card. */

.gc-bento__card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient( rgba( 4, 48, 45, 0.05 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 4, 48, 45, 0.05 ) 1px, transparent 1px );
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient( ellipse at 70% 60%, #000 10%, transparent 75% );
	mask-image: radial-gradient( ellipse at 70% 60%, #000 10%, transparent 75% );
}

/* Wide cards put the copy beside the art; narrow cards stack it. */

.gc-bento__card--wide {
	gap: var( --wp--preset--spacing--40 );
}

.gc-bento__card--wide.gc-bento__card--flip {
	flex-direction: row-reverse;
}

.gc-bento__copy {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.gc-bento__copy h3 {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--contrast );
}

.gc-bento__copy p {
	margin: 0.6rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

.gc-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.gc-bento__link span {
	transition: transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-bento__link:hover span {
	transform: translateX( 3px );
}

.gc-bento__art {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	margin-block-start: auto;
}

/* No frame, fill or shadow here — the card already provides the surface, and
   stacking a second one made the art look pasted on. The image sits flat. */

.gc-bento__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--md );
}

/* On a wide card the art sits beside the copy, so it must not also push
   itself to the bottom. */
.gc-bento__card--wide .gc-bento__art {
	margin-block-start: 0;
}

/* A narrow card stacks its copy over its art and stretches to the height of
   the wide card beside it. Laid out as a column, the leftover height falls
   between the two — `margin-block-start: auto` on the art — instead of pooling
   under the image and leaving a deeper band of empty card at the bottom than
   at the top. The `gap` is the floor, for when there is no slack to share. */

.gc-bento__card:not(.gc-bento__card--wide) {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
}

.gc-bento__card:not(.gc-bento__card--wide) .gc-bento__copy {
	flex: 0 0 auto;
}

.gc-bento__card:not(.gc-bento__card--wide) .gc-bento__art {
	margin-block-start: auto;
}

@media ( max-width: 1080px ) {
	.gc-bento {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.gc-bento__card--wide {
		grid-column: span 2;
	}
}

@media ( max-width: 720px ) {
	.gc-bento {
		grid-template-columns: minmax( 0, 1fr );
	}

	.gc-bento__card--wide,
	.gc-bento__card--wide.gc-bento__card--flip {
		grid-column: span 1;
		flex-direction: column;
		align-items: stretch;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-bento__card,
	.gc-bento__link span {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Image slots
   ---------------------------------------------------------------------- */

/* Every product visual on the site is one of these: a framed, shadowed slot
   holding an ordinary Image block. Select the image in the editor and use
   "Replace" to drop in a real screenshot — the frame, radius, shadow and crop
   are handled here, so any image lands looking deliberate. */

/* No frame, fill or shadow — the image carries itself. Only the radius and the
   clip stay, so a screenshot with square corners still sits correctly. */

.gc-slot {
	margin: 0;
	border-radius: var( --wp--custom--radius--xl );
	overflow: hidden;
}

.gc-slot img {
	display: block;
	width: 100%;
	height: auto;
}

/* On the dark hero the hairline needs to be light, or it disappears. */

/* Square off the bottom corners: the image runs off the edge of the hero band
   rather than ending inside it, so rounding there would read as a mistake. */

.gc-slot--hero {
	margin-top: var( --wp--preset--spacing--60 );
	border-radius: var( --wp--custom--radius--xl ) var( --wp--custom--radius--xl ) 0 0;
}

/* Clipped at the fold, so the composition continues past the section edge
   rather than being letterboxed into it. */

.gc-slot--hero img {
	max-height: 28rem;
	object-fit: cover;
	object-position: top center;
}

@media ( max-width: 782px ) {
	.gc-slot--hero img {
		max-height: 16rem;
	}
}


/* The scanner panel centres its field inside the band. */

.gc-scanner-panel .gc-scanner {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Split home hero
   ---------------------------------------------------------------------- */

/* Copy on the left over the artwork's dark side, product shot on the right
   inside the bloom. The artwork is set on the element itself rather than on a
   pseudo-element because .gc-hero--center::before is already the perspective
   grid — a transformed box clipped to the top 46%, which would have skewed the
   image and cropped it. The pattern no longer sets an inline gradient, so this
   background is unopposed; the brand gradient stays underneath as the fallback
   for a failed image request. */

.gc-hero--split {
	text-align: left;
	overflow: hidden;
	background-color: #061412;
	background-image: url( "../images/hero-bg.webp" ), var( --wp--preset--gradient--brand );
	/* Stretched to the box rather than cover-cropped. The artwork is 2:1 and the
	   hero is close to square, so `cover` threw away the whole dark left half —
	   the side the copy needs — and left a uniform bloom. There is no detail in
	   a blurred aurora for the stretch to distort. */
	background-size: 100% 100%, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* The artwork carries the decoration, so the shared dot field would only add
   noise over it. */

.gc-hero--split::before {
	content: none;
}

/* A scrim that stays heavy under the copy and clears entirely before the
   bloom. Without it the headline sits on the bright half at roughly 2:1. */

.gc-hero--split::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba( 4, 20, 18, 0.72 ) 0%,
		rgba( 4, 20, 18, 0.58 ) 32%,
		rgba( 4, 20, 18, 0.24 ) 54%,
		transparent 74%
	);
	pointer-events: none;
}

.gc-hero--split .wp-block-columns {
	align-items: center;
}

.gc-hero--split .gc-hero__chip {
	margin-inline: 0;
}

.gc-hero--split .gc-hero__proof {
	justify-content: flex-start;
}

.gc-hero--split .gc-hero__badges {
	justify-content: flex-start;
}

.gc-hero--split .gc-hero__badges img {
	height: 4rem;
}

/* The product shot leans out towards the bloom rather than sitting in a neat
   column, which is what gives the reference its depth. */

.gc-hero__aside {
	position: relative;
}

.gc-hero__aside img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 40px 90px -40px rgba( 0, 0, 0, 0.75 );
}

@media ( min-width: 782px ) {
	.gc-hero--split .wp-block-columns {
		gap: var( --wp--preset--spacing--60 );
	}

	.gc-hero__aside {
		margin-right: calc( -1 * clamp( 0rem, 6vw, 5rem ) );
	}
}

/* Stacked, the artwork's dark left no longer sits behind the copy, so the
   scrim goes flat instead of horizontal. */

@media ( max-width: 781px ) {
	.gc-hero--split {
		background-size: cover, cover;
		background-position: 72% center, center;
	}

	.gc-hero--split::after {
		background: linear-gradient( 180deg, rgba( 4, 20, 18, 0.9 ) 0%, rgba( 4, 20, 18, 0.72 ) 55%, rgba( 4, 20, 18, 0.5 ) 100% );
	}

	.gc-hero--split .gc-hero__badges img {
		height: 3.25rem;
	}
}

/* WordPress generates its preset font-size classes with !important, so
   `.has-display-xl-font-size` beats an ordinary rule no matter how specific.
   Matching the flag is the only way to set an exact size here without
   stripping the preset off the block. */

.gc-hero--split h1 {
	font-size: 60px !important;
}

/* 60px is a desktop measurement — held flat it puts about four words on a
   phone line. Below 600px it scales instead. */

@media ( max-width: 600px ) {
	.gc-hero--split h1 {
		font-size: clamp( 2.25rem, 9.5vw, 60px ) !important;
	}
}

/* -------------------------------------------------------------------------
   Hero trust row
   ---------------------------------------------------------------------- */

/* Badges and the customer proof sit on one row as a single footer to the
   copy. No rule above them — the gap does the separating. */

.gc-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	margin-top: var( --wp--preset--spacing--50 );
}

.gc-trustrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.gc-trustrow__faces {
	margin: 0;
	flex: none;
}

/* The overlap and the white rings are part of the supplied artwork, so this
   only has to size it. */

.gc-trustrow__faces img {
	display: block;
	height: 2.9rem;
	width: auto;
}

.gc-trustrow__count {
	margin: 0;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.gc-trustrow__note {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.3;
	color: rgba( 255, 255, 255, 0.7 );
}

/* -------------------------------------------------------------------------
   Hero stage — the layered product visual
   ---------------------------------------------------------------------- */

.gc-hero__stage {
	position: relative;
	isolation: isolate;
}

/* No chrome: the supplied screenshot carries its own frame and shadow, and
   image slots in this theme are deliberately unstyled — no border, no
   background, no box-shadow. This is a positioning container only. */

.gc-hero__frame {
	position: relative;
	z-index: 1;
}

.gc-hero__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 781px ) {

	.gc-hero__trust {
		gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	}
}


/* The product shot is the hero's centrepiece, so it takes the room the copy
   column gives back and runs on past the wide column towards the page edge.
   Held to the column it rendered a 1582px source at 519px — a third of size. */

@media ( min-width: 782px ) {
	/* Bleed only into the gutter that actually exists beside the 78rem column,
	   never past it. A flat clamp overshot on a 1440 screen and would have cut
	   the right-hand nodes off the artwork; this measures the gutter instead
	   and keeps 1rem of air at the edge. */
	.gc-hero__stage {
		margin-right: calc( -1 * max( 0px, min( 16rem, ( 100vw - 78rem ) / 2 - 1rem ) ) );
		/* Also reach back over the gap towards the copy. A negative margin grows
		   the box, where `left` would only slide it and leave a hole on the
		   right. Scaled with the viewport so it cannot reach the headline on a
		   narrower screen, where the copy column wraps wider. */
		margin-left: calc( -1 * clamp( 0rem, 7.5vw, 8.5rem ) );
	}
}