/*
 * Retail & E-commerce page presentation, aligned with the Growth Diagnostic
 * solution-detail template and interaction system.
 */

:root {
	--gwo-gd-green-field: var(--gwo-green);
	--gwo-gd-header-offset: calc(var(--gwo-space-16) + var(--gwo-space-4));
}

.gwo-growth-diagnostic-main,
.gwo-growth-diagnostic-page {
	margin: 0;
	max-inline-size: none;
	padding: 0;
}

.gwo-growth-diagnostic-main > .gwo-growth-diagnostic-page,
.gwo-growth-diagnostic-page > *,
.gwo-growth-diagnostic-page > * + * {
	margin-block: 0;
}

.page-template-page-growth-diagnostic .gwo-site-header,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header {
	background-color: transparent;
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
}

.page-template-page-growth-diagnostic .gwo-site-header.is-scroll-hidden,
.page-template-page-growth-diagnostic .gwo-site-header.is-scroll-visible,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header.is-scroll-hidden,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header.is-scroll-visible {
	position: fixed;
}

.page-template-page-growth-diagnostic .gwo-site-header.is-scroll-hidden,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header.is-scroll-hidden {
	transform: translateY(-100%);
}

.page-template-page-growth-diagnostic .gwo-site-header.is-scroll-hidden:focus-within,
.page-template-page-growth-diagnostic .gwo-site-header.is-scroll-visible,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header.is-scroll-hidden:focus-within,
body:has(.gwo-growth-diagnostic-main) .gwo-site-header.is-scroll-visible {
	transform: translateY(0);
}

html:not(.gwo-navigation-ready) .page-template-page-growth-diagnostic .gwo-site-header,
html:not(.gwo-navigation-ready) body:has(.gwo-growth-diagnostic-main) .gwo-site-header {
	background-color: var(--gwo-gd-green-field);
	position: relative;
}

html:not(.gwo-navigation-ready) .gwo-gd-hero__inner {
	padding-block-start: var(--gwo-space-10);
}

.gwo-gd-hero {
	background-color: var(--gwo-gd-green-field);
	color: var(--gwo-white);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.gwo-gd-hero > *,
.gwo-gd-section-inner > *,
.gwo-gd-cta__panel > * {
	margin-block: 0;
}

.gwo-gd-hero::before {
	animation: gwo-gd-hero-vector-draw 1.6s var(--gwo-ease-standard) forwards;
	aspect-ratio: 5120 / 1466;
	background: url("../../images/home/hero-vector.webp") center / 100% auto no-repeat;
	clip-path: inset(0 0 0 100%);
	content: "";
	inline-size: 100%;
	inset-block-start: 23%;
	inset-inline-start: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

@keyframes gwo-gd-hero-vector-draw {
	to {
		clip-path: inset(0 0 0 0);
		opacity: 0.48;
	}
}

.gwo-gd-hero__decoration {
	display: none;
}

.gwo-gd-hero__inner,
.gwo-gd-section-inner {
	box-sizing: border-box;
	inline-size: min(calc(100% - (2 * var(--gwo-space-4))), var(--wp--style--global--wide-size));
	margin-inline: auto;
}

.gwo-gd-hero__inner {
	padding-block: calc(var(--gwo-gd-header-offset) + var(--gwo-space-6)) var(--gwo-space-10);
	position: relative;
	z-index: 1;
}

.gwo-gd-breadcrumbs {
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	margin-block-end: var(--gwo-space-8);
}

.gwo-gd-breadcrumbs__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gwo-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gwo-gd-breadcrumbs__list li {
	margin: 0;
}

.gwo-gd-breadcrumbs__list a,
.gwo-gd-breadcrumbs__list [aria-current="page"] {
	color: var(--gwo-white);
}

.gwo-gd-breadcrumbs__list a {
	align-items: center;
	border-radius: var(--gwo-radius-sm);
	display: inline-flex;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-inline: var(--gwo-space-1);
	justify-content: center;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--gwo-space-1);
}

.gwo-gd-breadcrumbs__list a:hover {
	background-color: rgb(255 255 255 / 13%);
	text-decoration-color: var(--gwo-yellow);
}

.gwo-gd-breadcrumbs__list a:focus-visible {
	box-shadow: 0 0 0 6px var(--gwo-yellow);
	outline: 3px solid var(--gwo-black);
	outline-offset: 0;
}

.gwo-gd-hero__layout {
	display: grid;
	gap: var(--gwo-space-10);
}

.gwo-gd-hero__content,
.gwo-gd-hero__overview {
	min-inline-size: 0;
}

.gwo-gd-eyebrow {
	align-items: center;
	background-color: var(--gwo-surface-green);
	border: 1px solid var(--gwo-green);
	border-radius: var(--gwo-radius-pill);
	color: var(--gwo-black);
	display: inline-flex;
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-medium);
	gap: var(--gwo-space-2);
	inline-size: fit-content;
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0 0 var(--gwo-space-5);
	max-inline-size: 100%;
	padding: var(--gwo-space-1) var(--gwo-space-3);
	text-align: center;
	text-transform: none;
}

.gwo-gd-eyebrow:has(> .gwo-gd-eyebrow__icon) {
	padding: var(--gwo-space-1) var(--gwo-space-3) var(--gwo-space-1) var(--gwo-space-1);
}

.gwo-gd-eyebrow--inverse {
	background-color: rgb(255 255 255 / 14%);
	border-color: rgb(255 255 255 / 36%);
	color: var(--gwo-white);
}

.gwo-gd-hero__content > .gwo-gd-eyebrow {
	background-color: var(--gwo-surface-green);
	border: 1px solid var(--gwo-green);
	border-radius: var(--gwo-radius-pill);
	color: var(--gwo-black);
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--caption);
	gap: var(--gwo-space-2);
	letter-spacing: 0.02em;
	margin-block-end: var(--gwo-space-6);
	padding: var(--gwo-space-1) var(--gwo-space-3) var(--gwo-space-1) var(--gwo-space-1);
	text-transform: none;
}

.gwo-gd-eyebrow__icon {
	align-items: center;
	background-color: var(--gwo-surface-green);
	block-size: var(--gwo-space-6);
	border: 0;
	border-radius: 50%;
	color: var(--gwo-green);
	display: inline-flex;
	flex: 0 0 var(--gwo-space-6);
	inline-size: var(--gwo-space-6);
	justify-content: center;
	transition:
		background-color 180ms var(--gwo-ease-standard),
		color 180ms var(--gwo-ease-standard),
		transform 180ms var(--gwo-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	.gwo-gd-eyebrow:hover .gwo-gd-eyebrow__icon {
		background-color: var(--gwo-green);
		color: var(--gwo-white);
		transform: scale(1.06);
	}
}

.gwo-gd-eyebrow__icon svg,
.gwo-gd-button svg,
.gwo-gd-context__outcome-icon svg,
.gwo-gd-review__icon svg,
.gwo-gd-focus__list svg {
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gwo-gd-eyebrow__icon svg {
	block-size: var(--gwo-space-4);
	inline-size: var(--gwo-space-4);
	stroke-width: 1.8;
}

.gwo-gd-hero__heading {
	color: var(--gwo-white);
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, calc(5.25vw - 0.3125rem), 4.85rem);
	font-weight: var(--font-weight-regular);
	letter-spacing: -0.052em;
	line-height: 1.04;
	margin: 0;
	max-inline-size: 68rem;
	text-wrap: balance;
}

.gwo-gd-hero__heading strong {
	font-weight: var(--font-weight-bold);
}

.gwo-gd-hero__summary {
	color: var(--gwo-white);
	font-family: var(--font-body);
	font-size: clamp(var(--wp--preset--font-size--body), 1.5vw, var(--wp--preset--font-size--body-lg));
	line-height: 1.5;
	margin: var(--gwo-space-6) 0 0;
	max-inline-size: 52rem;
	text-wrap: pretty;
}

.gwo-gd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gwo-space-3);
	margin-block-start: var(--gwo-space-8);
}

.gwo-gd-button {
	align-items: center;
	border-radius: var(--gwo-radius-pill);
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--font-weight-semibold);
	gap: var(--gwo-space-2);
	justify-content: center;
	line-height: 1.4;
	min-block-size: var(--gwo-space-12);
	padding: var(--gwo-space-3) var(--gwo-space-5);
	text-decoration: none;
	transition: background-color 180ms var(--gwo-ease-standard), border-color 180ms var(--gwo-ease-standard), color 180ms var(--gwo-ease-standard), transform 180ms var(--gwo-ease-standard);
}

.gwo-gd-button svg {
	block-size: var(--gwo-space-5);
	flex: 0 0 auto;
	inline-size: var(--gwo-space-5);
	stroke-width: 1.8;
	transition: transform 180ms var(--gwo-ease-standard);
}

.gwo-gd-button--conversion {
	background-color: var(--gwo-red);
	border: 1px solid var(--gwo-red);
	color: var(--gwo-white);
}

.gwo-gd-button--hero-outline {
	background-color: rgb(255 255 255 / 13%);
	border: 1px solid rgb(255 255 255 / 48%);
	color: var(--gwo-white);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.35;
}

.gwo-gd-button--conversion:hover,
.gwo-gd-button--hero-outline:hover {
	background-color: var(--gwo-yellow);
	border-color: var(--gwo-yellow);
	color: var(--gwo-black);
	transform: translateY(-2px);
}

.gwo-gd-button--conversion:is(:hover, :focus-visible) svg {
	transform: translateX(var(--gwo-space-1));
}

.gwo-gd-button--hero-outline:is(:hover, :focus-visible) svg {
	transform: translateY(var(--gwo-space-1));
}

.gwo-gd-button:active {
	background-color: var(--gwo-black);
	border-color: var(--gwo-black);
	color: var(--gwo-white);
	transform: translateY(0) scale(0.985);
}

.gwo-gd-button:focus-visible {
	box-shadow: 0 0 0 6px var(--gwo-yellow);
	outline: 3px solid var(--gwo-black);
	outline-offset: 0;
}

.gwo-gd-button--hero-outline:focus-visible {
	box-shadow: 0 0 0 5px var(--gwo-yellow);
	outline-offset: 2px;
}

.gwo-gd-hero__overview {
	align-self: end;
	background:
		radial-gradient(circle at 100% 0%, rgb(244 216 10 / 18%), transparent 15rem),
		linear-gradient(145deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 36%));
	backdrop-filter: blur(30px) saturate(160%);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	border: 1px solid rgb(255 255 255 / 52%);
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 72%);
	box-sizing: border-box;
	color: var(--gwo-black);
	padding: var(--gwo-space-6);
}

.gwo-gd-hero__overview-label {
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.06em;
	margin: 0 0 var(--gwo-space-3);
	text-transform: uppercase;
}

.gwo-gd-hero__overview h2 {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--title);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

.gwo-gd-hero__overview-list {
	display: grid;
	margin: var(--gwo-space-6) 0 0;
}

.gwo-gd-hero__overview-list > div {
	border-block-start: 1px solid color-mix(in srgb, var(--gwo-black) 18%, transparent);
	padding-block: var(--gwo-space-4);
}

.gwo-gd-hero__overview-list > div:last-child {
	padding-block-end: 0;
}

.gwo-gd-hero__overview-list dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}

.gwo-gd-hero__overview-list dd {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	margin: var(--gwo-space-2) 0 0;
}

.gwo-gd-hero__wave-divider {
	block-size: clamp(3.75rem, 5vw, 5.25rem);
	margin-block-start: var(--gwo-space-2);
	pointer-events: none;
	position: relative;
	z-index: 1;
}

.gwo-gd-hero__scroll-fade {
	background: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--gwo-white));
	block-size: clamp(5rem, 12vw, 10rem);
	inset-block-end: 0;
	inset-inline: 0;
	opacity: var(--gwo-hero-scroll-fade-opacity, 0);
	pointer-events: none;
	position: absolute;
	transition: opacity 80ms linear;
	z-index: 3;
}

.gwo-gd-hero__wave {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	transform: rotate(180deg);
	transform-origin: center;
}

.gwo-gd-hero__wave-layer--one,
.gwo-gd-hero__wave-layer--four {
	fill: var(--gwo-gd-green-field);
}

.gwo-gd-hero__wave-layer--two {
	fill: var(--gwo-yellow);
}

.gwo-gd-hero__wave-layer--three {
	fill: var(--gwo-red);
}

.gwo-gd-hero__wave-layer--one use {
	animation: gwo-gd-wave-one 10s linear infinite;
	animation-delay: -2s;
}

.gwo-gd-hero__wave-layer--two use {
	animation: gwo-gd-wave-two 8s linear infinite;
	animation-delay: -2s;
}

.gwo-gd-hero__wave-layer--three use {
	animation: gwo-gd-wave-three 6s linear infinite;
	animation-delay: -2s;
}

.gwo-gd-hero__wave-layer--four use {
	animation: gwo-gd-wave-four 4s linear infinite;
	animation-delay: -2s;
}

@keyframes gwo-gd-wave-one {
	from { transform: translateX(85px); }
	to { transform: translateX(-90px); }
}

@keyframes gwo-gd-wave-two {
	from { transform: translateX(-90px); }
	to { transform: translateX(85px); }
}

@keyframes gwo-gd-wave-three {
	from { transform: translateX(85px); }
	to { transform: translateX(-90px); }
}

@keyframes gwo-gd-wave-four {
	from { transform: translateX(-90px); }
	to { transform: translateX(85px); }
}

.gwo-gd-context,
.gwo-gd-review,
.gwo-gd-flow,
.gwo-gd-buyers,
.gwo-gd-cta {
	color: var(--gwo-black);
}

.gwo-gd-context {
	background:
		radial-gradient(circle at 88% 18%, rgb(68 158 55 / 10%), transparent 28rem),
		var(--gwo-white);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.gwo-gd-review {
	background:
		radial-gradient(circle at 12% 20%, rgb(244 216 10 / 12%), transparent 28rem),
		var(--gwo-surface-subtle);
}

.gwo-gd-flow {
	background-color: var(--gwo-surface-subtle);
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--gwo-space-20);
	position: relative;
}

.gwo-gd-buyers {
	background:
		radial-gradient(circle at 12% 24%, rgb(244 216 10 / 10%), transparent 26rem),
		var(--gwo-surface-subtle);
}

.gwo-gd-cta {
	background-color: var(--gwo-white);
}

.gwo-gd-section-inner {
	padding-block: var(--gwo-space-16);
}

.gwo-gd-section-intro {
	max-inline-size: 48rem;
}

.gwo-gd-section-intro--centred {
	display: grid;
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.gwo-gd-section-heading {
	font-family: var(--font-heading);
	font-size: clamp(var(--wp--preset--font-size--heading-3), 4vw, var(--wp--preset--font-size--heading-2));
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.gwo-gd-section-copy {
	color: var(--gwo-text-muted);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.65;
	margin: var(--gwo-space-5) 0 0;
	max-inline-size: 68ch;
	text-wrap: pretty;
}

.gwo-gd-context__inner {
	display: grid;
	gap: var(--gwo-space-10);
	position: relative;
	z-index: 1;
}

.gwo-gd-context__intro {
	align-content: center;
	display: grid;
}

.gwo-gd-context__lead {
	max-inline-size: 64ch;
}

.gwo-gd-context__definition {
	border-inline-start: var(--gwo-space-1) solid var(--gwo-green);
	color: var(--gwo-black);
	font-weight: var(--font-weight-medium);
	max-inline-size: 60ch;
	padding-inline-start: var(--gwo-space-4);
}

.gwo-gd-context__visual {
	align-self: end;
	display: flex;
	justify-content: center;
	margin: 0 0 calc(-1 * var(--gwo-space-16));
	min-inline-size: 0;
}

.gwo-gd-context__image {
	block-size: auto;
	display: block;
	inline-size: min(100%, 39rem);
	transform-origin: center bottom;
}

@keyframes gwo-gd-context-image-rise {
	from {
		opacity: 0;
		transform: translateY(14%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@supports (animation-timeline: view()) {
	.gwo-gd-context__image {
		animation: gwo-gd-context-image-rise linear both;
		animation-duration: auto;
		animation-range: entry 0% entry 80%;
		animation-timeline: view();
	}
}

.gwo-gd-context__outcome {
	align-content: center;
	align-self: stretch;
	background:
		radial-gradient(circle at 100% 0%, rgb(68 158 55 / 34%), transparent 18rem),
		var(--gwo-black);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--gwo-radius-xl);
	box-shadow: var(--gwo-shadow-3);
	box-sizing: border-box;
	color: var(--gwo-white);
	display: grid;
	justify-items: start;
	min-block-size: 20rem;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--gwo-space-8) var(--gwo-space-6);
	position: relative;
}

.gwo-gd-context__outcome::after {
	background-color: var(--gwo-yellow);
	block-size: var(--gwo-space-1);
	border-radius: var(--gwo-radius-pill);
	content: "";
	inline-size: calc(100% - (2 * var(--gwo-space-6)));
	inset-block-end: 0;
	inset-inline-start: var(--gwo-space-6);
	position: absolute;
}

.gwo-gd-context__outcome-icon {
	align-items: center;
	background-color: color-mix(in srgb, var(--gwo-green) 72%, var(--gwo-black));
	block-size: var(--gwo-space-12);
	border-radius: 50%;
	box-shadow: 0 0 0 var(--gwo-space-2) rgb(68 158 55 / 16%);
	color: var(--gwo-black);
	display: inline-flex;
	inline-size: var(--gwo-space-12);
	justify-content: center;
}

.gwo-gd-context__outcome-icon svg {
	block-size: var(--gwo-space-6);
	inline-size: var(--gwo-space-6);
	stroke-width: 2;
}

.gwo-gd-context__outcome p {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.06em;
	margin: var(--gwo-space-6) 0 var(--gwo-space-3);
	text-transform: uppercase;
}

.gwo-gd-context__outcome strong {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	line-height: 1.2;
	max-inline-size: 18ch;
	text-wrap: balance;
}

.gwo-gd-review {
	scroll-margin-block-start: var(--gwo-space-24);
}

.gwo-growth-diagnostic-page > .gwo-capability-dialog[open] {
	inset: 0;
	margin: auto;
	position: fixed;
}

.gwo-gd-review__grid {
	display: grid;
	gap: var(--gwo-space-4);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--gwo-space-10) 0 0;
	padding: 0;
}

.gwo-gd-review__card {
	box-sizing: border-box;
	display: block;
	min-inline-size: 0;
}

.gwo-gd-review__fallback,
.gwo-gd-review__trigger {
	align-content: start;
	background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(255 255 255 / 54%));
	border: 1px solid rgb(255 255 255 / 76%);
	box-shadow: 0 0.75rem 1.75rem rgb(35 31 32 / 8%), inset 0 1px 0 rgb(255 255 255 / 88%);
	gap: var(--gwo-space-5);
	min-block-size: 100%;
	padding: var(--gwo-space-6);
}

.gwo-gd-review__fallback {
	grid-template-columns: auto minmax(0, 1fr);
}

.gwo-gd-review__trigger {
	align-items: start;
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.gwo-gd-review__fallback .gwo-capability-detail {
	display: none;
}

.gwo-gd-review__card.is-dialog-ready .gwo-gd-review__fallback {
	display: none;
}

.gwo-gd-review__card.is-dialog-ready .gwo-gd-review__trigger {
	display: grid;
}

.gwo-gd-review__icon {
	align-items: center;
	background-color: var(--gwo-surface-green);
	block-size: var(--gwo-space-12);
	border-radius: 50%;
	color: var(--gwo-green);
	display: inline-flex;
	inline-size: var(--gwo-space-12);
	justify-content: center;
}

.gwo-gd-review__icon svg {
	block-size: var(--gwo-space-6);
	inline-size: var(--gwo-space-6);
	stroke-width: 1.8;
}

.gwo-gd-review__card h3 {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--title-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
}

.gwo-gd-review__fallback-copy strong,
.gwo-gd-review__trigger .gwo-solution-section__capability-name {
	font-size: var(--wp--preset--font-size--title-sm);
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.gwo-gd-review__card p {
	color: var(--gwo-text-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	margin: var(--gwo-space-3) 0 0;
}

.gwo-gd-focus {
	background:
		radial-gradient(circle at 88% 24%, rgb(68 158 55 / 15%), transparent 30rem),
		var(--gwo-white);
	color: var(--gwo-black);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.gwo-gd-focus::before {
	display: none;
}

.gwo-gd-focus__inner {
	display: block;
	position: relative;
}

.gwo-gd-focus__panel {
	background:
		radial-gradient(circle at 88% 0%, rgb(68 158 55 / 18%), transparent 24rem),
		linear-gradient(145deg, rgb(255 255 255 / 68%), rgb(255 255 255 / 30%));
	backdrop-filter: blur(46px) saturate(180%);
	-webkit-backdrop-filter: blur(46px) saturate(180%);
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 2rem 5rem rgb(35 31 32 / 16%), 0 0.5rem 1.5rem rgb(35 31 32 / 5%);
	display: grid;
	grid-template-areas:
		"content"
		"list";
	grid-template-columns: minmax(0, 1fr);
	inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.gwo-gd-focus__content {
	align-content: start;
	background: linear-gradient(145deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 30%));
	backdrop-filter: blur(38px) saturate(165%);
	-webkit-backdrop-filter: blur(38px) saturate(165%);
	display: grid;
	gap: var(--gwo-space-5);
	grid-area: content;
	justify-items: start;
	max-inline-size: none;
	min-inline-size: 0;
	padding: clamp(var(--gwo-space-6), 4vw, var(--gwo-space-10));
}

.gwo-gd-focus__content .gwo-gd-eyebrow,
.gwo-gd-focus__content .gwo-gd-section-copy {
	margin: 0;
}

.gwo-gd-focus__list-slot {
	background:
		radial-gradient(circle at 88% 0%, rgb(68 158 55 / 22%), transparent 20rem),
		radial-gradient(circle at 4% 100%, rgb(244 216 10 / 10%), transparent 18rem),
		linear-gradient(145deg, rgb(244 250 243 / 58%), rgb(255 255 255 / 18%));
	backdrop-filter: blur(40px) saturate(175%);
	-webkit-backdrop-filter: blur(40px) saturate(175%);
	border-block-start: 1px solid rgb(68 158 55 / 14%);
	grid-area: list;
	min-inline-size: 0;
	padding: var(--gwo-space-6) var(--gwo-space-5);
}

.gwo-gd-focus .gwo-gd-section-heading,
.gwo-gd-focus .gwo-gd-section-copy {
	color: var(--gwo-black);
}

.gwo-gd-focus .gwo-gd-eyebrow {
	background-color: var(--gwo-surface-green);
	border-color: var(--gwo-green);
	color: var(--gwo-black);
}

.gwo-gd-focus__list {
	display: grid;
	gap: var(--gwo-space-3);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gwo-gd-focus__list li {
	align-items: start;
	background: linear-gradient(135deg, rgb(255 255 255 / 68%), rgb(255 255 255 / 38%));
	backdrop-filter: blur(24px) saturate(165%);
	-webkit-backdrop-filter: blur(24px) saturate(165%);
	border: 1px solid rgb(255 255 255 / 68%);
	border-radius: var(--gwo-radius-lg);
	box-sizing: border-box;
	box-shadow: 0 0.75rem 1.75rem rgb(35 31 32 / 8%), inset 0 1px 0 rgb(255 255 255 / 84%);
	display: grid;
	gap: var(--gwo-space-3);
	grid-template-columns: auto minmax(0, 1fr);
	min-inline-size: 0;
	padding: var(--gwo-space-5);
}

.gwo-gd-focus__list li > span {
	align-items: center;
	background-color: rgb(68 158 55 / 14%);
	block-size: var(--gwo-space-8);
	border-radius: 50%;
	color: var(--gwo-green);
	display: inline-flex;
	inline-size: var(--gwo-space-8);
	justify-content: center;
}

.gwo-gd-focus__list svg {
	block-size: var(--gwo-space-4);
	inline-size: var(--gwo-space-4);
	stroke-width: 1.8;
}

.gwo-gd-focus__list h3 {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	margin: 0;
}

.gwo-gd-focus__list p {
	color: var(--gwo-black);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	margin: var(--gwo-space-2) 0 0;
}

.gwo-gd-flow__inner {
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	backdrop-filter: blur(30px) saturate(160%);
	background-color: rgb(255 255 255 / 38%);
	border: 0;
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 18%);
	box-sizing: border-box;
	overflow: hidden;
	padding: var(--gwo-space-20) var(--gwo-space-4);
	position: relative;
	z-index: 1;
}

.gwo-gd-flow__list {
	display: grid;
	gap: var(--gwo-space-8);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--gwo-space-8) auto 0;
	max-inline-size: 42rem;
	padding: 0;
	position: relative;
	z-index: 1;
}

.gwo-gd-flow__list li {
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	align-items: center;
	backdrop-filter: blur(30px) saturate(160%);
	background-color: rgb(255 255 255 / 38%);
	border: 0;
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 18%);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--gwo-space-3);
	justify-content: center;
	min-inline-size: 0;
	padding: var(--gwo-space-5);
	position: relative;
	text-align: center;
	transition:
		background-color 180ms var(--gwo-ease-standard),
		box-shadow 180ms var(--gwo-ease-standard),
		filter 180ms var(--gwo-ease-standard),
		opacity 180ms var(--gwo-ease-standard),
		transform 180ms var(--gwo-ease-standard);
	z-index: 1;
}

.gwo-gd-flow__list li:not(:last-child)::after {
	background-color: color-mix(in srgb, var(--gwo-green) 72%, var(--gwo-black));
	block-size: var(--gwo-space-8);
	clip-path: polygon(42% 0, 58% 0, 58% 58%, 100% 58%, 50% 100%, 0 58%, 42% 58%);
	content: "";
	inline-size: var(--gwo-space-4);
	inset-block-end: calc(0px - var(--gwo-space-8));
	inset-inline-start: 50%;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	z-index: 2;
}

.gwo-gd-flow__number {
	align-items: center;
	background-color: var(--gwo-surface-green);
	block-size: var(--gwo-space-10);
	border-radius: 50%;
	color: var(--gwo-green);
	display: inline-flex;
	flex: 0 0 var(--gwo-space-10);
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-semibold);
	inline-size: var(--gwo-space-10);
	justify-content: center;
	transition:
		background-color 180ms var(--gwo-ease-standard),
		color 180ms var(--gwo-ease-standard),
		transform 180ms var(--gwo-ease-standard);
}

.gwo-gd-flow__content {
	display: grid;
	gap: var(--gwo-space-3);
	justify-items: center;
}

.gwo-gd-flow__list h3 {
	color: var(--gwo-black);
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--title-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	transition: color 180ms var(--gwo-ease-standard);
}

.gwo-gd-flow__list p {
	color: var(--gwo-text-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	max-inline-size: 48ch;
	margin: 0;
	text-wrap: pretty;
	transition: color 180ms var(--gwo-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	.gwo-gd-flow__list:has(li:hover) li:not(:hover) {
		filter: blur(2.5px);
		opacity: 0.52;
		transform: scale(0.99);
	}

	.gwo-gd-flow__list li:hover {
		background-color: var(--gwo-green);
		background-color: color-mix(in srgb, var(--gwo-green) 80%, var(--gwo-black));
		box-shadow: var(--gwo-shadow-3);
		color: var(--gwo-white);
		transform: scale(1.02);
		z-index: 3;
	}

	.gwo-gd-flow__list li:hover h3,
	.gwo-gd-flow__list li:hover p {
		color: var(--gwo-white);
	}

	.gwo-gd-flow__list li:hover .gwo-gd-flow__number {
		background-color: rgb(255 255 255 / 18%);
		color: var(--gwo-white);
		transform: scale(1.06);
	}

	.gwo-gd-flow__list li:hover:not(:last-child)::after {
		animation: gwo-gd-flow-arrow-bob 700ms var(--gwo-ease-standard) infinite alternate;
		z-index: 4;
	}
}

@keyframes gwo-gd-flow-arrow-bob {
	from {
		transform: translate(-50%, -2px);
	}

	to {
		transform: translate(-50%, 3px);
	}
}

.gwo-gd-buyers__inner {
	display: grid;
	gap: var(--gwo-space-10);
}

.gwo-gd-buyers__roles {
	align-self: center;
	background:
		radial-gradient(circle at 100% 0%, rgb(68 158 55 / 18%), transparent 18rem),
		linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 44%));
	backdrop-filter: blur(30px) saturate(160%);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	border: 1px solid rgb(255 255 255 / 76%);
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 1.5rem 3.5rem rgb(35 31 32 / 10%), inset 0 1px 0 rgb(255 255 255 / 88%);
	box-sizing: border-box;
	padding: var(--gwo-space-6);
}

.gwo-gd-buyers__roles > p {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.06em;
	margin: 0 0 var(--gwo-space-5);
	text-transform: uppercase;
}

.gwo-gd-buyers__roles ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gwo-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gwo-gd-buyers__roles li {
	align-items: center;
	background-color: var(--gwo-surface-green);
	border: 1px solid color-mix(in srgb, var(--gwo-green) 46%, var(--gwo-white));
	border-radius: var(--gwo-radius-pill);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--font-weight-medium);
	min-block-size: calc(var(--gwo-space-8) + var(--gwo-space-1));
	padding: var(--gwo-space-1) var(--gwo-space-3);
}

.gwo-gd-cta__panel {
	align-items: center;
	background-color: color-mix(in srgb, var(--gwo-green) 72%, var(--gwo-black));
	backdrop-filter: blur(30px) saturate(160%);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: var(--gwo-radius-xl);
	box-shadow: 0 2rem 4.5rem rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(0 0 0 / 14%);
	box-sizing: border-box;
	color: var(--gwo-white);
	display: grid;
	isolation: isolate;
	justify-items: center;
	min-block-size: clamp(23rem, 29vw, 30rem);
	overflow: hidden;
	padding: var(--gwo-space-12) var(--gwo-space-5);
	position: relative;
	text-align: center;
}

.gwo-gd-cta__decoration {
	animation: gwo-gd-cta-ribbon-enter 1.2s var(--gwo-ease-standard) both;
	aspect-ratio: 5120 / 1466;
	background: url("../../images/home/hero-vector.webp") center / 100% auto no-repeat;
	inline-size: max(146%, 66rem);
	inset-block-start: 50%;
	inset-inline-start: -23%;
	opacity: 0.78;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%) rotate(180deg);
	transform-origin: center;
	z-index: -1;
}

@keyframes gwo-gd-cta-ribbon-enter {
	from {
		opacity: 0;
		transform: translate(10%, -50%) rotate(180deg);
	}

	to {
		opacity: 0.78;
		transform: translate(0, -50%) rotate(180deg);
	}
}

.gwo-gd-cta__content {
	display: grid;
	gap: var(--gwo-space-4);
	justify-items: center;
	margin-inline: auto;
	max-inline-size: 56rem;
	position: relative;
	z-index: 1;
}

.gwo-gd-cta__heading {
	color: var(--gwo-white);
	font-family: var(--font-heading);
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin: 0;
	max-inline-size: 25.2ch;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.gwo-gd-cta__copy {
	color: var(--gwo-white);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	margin: 0;
	max-inline-size: 60ch;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.gwo-gd-cta .gwo-gd-eyebrow {
	background-color: var(--gwo-surface-green);
	border: 1px solid var(--gwo-green);
	border-radius: var(--gwo-radius-pill);
	color: var(--gwo-black);
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.02em;
	margin: 0;
	padding: var(--gwo-space-1) var(--gwo-space-3) var(--gwo-space-1) var(--gwo-space-1);
	text-transform: none;
}

.gwo-gd-cta > .gwo-gd-section-inner {
	padding-block: var(--gwo-space-20);
}

.gwo-gd-cta .gwo-gd-button {
	animation: gwo-assessment-heartbeat 3s ease-in-out infinite;
	font-size: var(--wp--preset--font-size--label);
	inline-size: auto;
	justify-self: center;
	margin-block-start: var(--gwo-space-2);
	position: relative;
	transform-origin: center;
}

.gwo-gd-cta .gwo-gd-button:hover {
	animation-play-state: paused;
}

@media (min-width: 600px) {
	:root {
		--gwo-gd-header-offset: calc(var(--gwo-space-20) + var(--gwo-space-2));
	}

	.gwo-gd-hero__inner,
	.gwo-gd-section-inner {
		inline-size: min(calc(100% - (2 * var(--gwo-space-8))), var(--wp--style--global--wide-size));
	}

	.gwo-gd-hero__inner {
		padding-block-end: var(--gwo-space-12);
	}

	.gwo-gd-hero__overview,
	.gwo-gd-context__outcome,
	.gwo-gd-buyers__roles {
		padding: var(--gwo-space-8);
	}

	.gwo-gd-section-inner {
		padding-block: var(--gwo-space-20);
	}

	.gwo-gd-context__visual {
		margin-block-end: calc(-1 * var(--gwo-space-20));
	}

	.gwo-gd-flow__inner {
		padding: var(--gwo-space-20) var(--gwo-space-8);
	}

	.gwo-gd-review__grid,
	.gwo-gd-focus__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gwo-gd-review__fallback,
	.gwo-gd-review__trigger {
		padding: var(--gwo-space-8);
	}

	.gwo-gd-flow__list li {
		padding: var(--gwo-space-5) var(--gwo-space-8);
	}

	.gwo-gd-cta__panel {
		padding: var(--gwo-space-12) var(--gwo-space-8);
	}

}

@media (min-width: 900px) {
	.gwo-gd-hero__layout {
		align-items: start;
		gap: var(--gwo-space-6);
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.gwo-gd-hero__content {
		grid-column: 1 / span 5;
	}

	.gwo-gd-hero__overview {
		align-self: start;
		grid-column: 6 / span 3;
	}

	.gwo-gd-focus__panel {
		grid-template-areas: "content list";
		grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	}

	.gwo-gd-focus__list-slot {
		align-self: stretch;
		border-block-start: 0;
		border-inline-start: 1px solid rgb(68 158 55 / 14%);
	}

	.gwo-gd-cta__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--gwo-space-12);
	}

	.gwo-gd-cta__content > .gwo-gd-button {
		justify-self: center;
		white-space: nowrap;
	}
}

@media (min-width: 1024px) {
	:root {
		--gwo-gd-header-offset: calc(var(--gwo-space-24) + var(--gwo-space-2));
	}

	.gwo-gd-hero__inner,
	.gwo-gd-section-inner {
		inline-size: min(calc(100% - (2 * var(--gwo-space-12))), var(--wp--style--global--wide-size));
	}

	.gwo-gd-hero__layout {
		gap: var(--gwo-space-6);
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.gwo-gd-hero__content {
		grid-column: 1 / span 8;
	}

	.gwo-gd-hero__overview {
		grid-column: 9 / span 4;
	}

	.gwo-gd-section-inner {
		padding-block: var(--gwo-space-24);
	}

	.gwo-gd-context__visual {
		margin-block-end: calc(-1 * var(--gwo-space-24));
	}

	.gwo-gd-flow__inner {
		padding: var(--gwo-space-20) var(--gwo-space-10);
	}

	.gwo-gd-context__inner,
	.gwo-gd-buyers__inner {
		align-items: center;
		gap: var(--gwo-space-6);
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.gwo-gd-context__inner {
		gap: var(--gwo-space-12);
	}

	.gwo-gd-context__inner > .gwo-gd-section-intro,
	.gwo-gd-buyers__inner > .gwo-gd-section-intro {
		grid-column: 1 / span 7;
	}

	.gwo-gd-context__visual,
	.gwo-gd-buyers__roles {
		grid-column: 8 / span 5;
	}

	.gwo-gd-review__grid {
		gap: var(--gwo-space-6);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gwo-gd-flow__list {
		gap: var(--gwo-space-6);
		grid-auto-rows: 1fr;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		inline-size: 100%;
		margin-block-start: var(--gwo-space-8);
		max-inline-size: none;
	}

	.gwo-gd-flow__list li {
		min-block-size: 15rem;
		padding: var(--gwo-space-6);
	}

	.gwo-gd-flow__list li:not(:last-child)::after {
		background-color: var(--gwo-green);
		block-size: var(--gwo-space-4);
		clip-path: polygon(0 42%, 58% 42%, 58% 0, 100% 50%, 58% 100%, 58% 58%, 0 58%);
		inline-size: var(--gwo-space-6);
		inset-block-end: auto;
		inset-block-start: 50%;
		inset-inline-end: auto;
		inset-inline-start: 100%;
		transform: translateY(-50%);
	}

	.gwo-gd-cta__panel {
		padding: var(--gwo-space-12);
	}
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.gwo-gd-flow__list li:hover:not(:last-child)::after {
		animation-name: gwo-gd-flow-arrow-slide-right;
	}
}

@keyframes gwo-gd-flow-arrow-slide-right {
	from {
		transform: translate(-2px, -50%);
	}

	to {
		transform: translate(3px, -50%);
	}
}

@media (min-width: 1440px) {
	.gwo-gd-hero__inner,
	.gwo-gd-section-inner {
		inline-size: min(calc(100% - (2 * var(--gwo-space-16))), var(--wp--style--global--wide-size));
	}
}

@media (max-width: 599px) {
	.gwo-gd-button--hero-outline {
		display: none;
	}

	.gwo-gd-button {
		inline-size: 100%;
	}

	.gwo-gd-hero__actions {
		display: grid;
	}

	.gwo-gd-review__card {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.gwo-gd-breadcrumbs__list li:nth-child(2),
	.gwo-gd-breadcrumbs__list li:nth-child(3) {
		display: none;
	}

	.gwo-gd-breadcrumbs__list li:nth-child(4)::before {
		content: "…";
		margin-inline-end: var(--gwo-space-2);
	}
}

@media (max-width: 389px) {
	.gwo-gd-hero__heading {
		font-size: 2.25rem;
	}

	.gwo-gd-hero__overview,
	.gwo-gd-context__outcome,
	.gwo-gd-review__fallback,
	.gwo-gd-review__trigger,
	.gwo-gd-focus__content,
	.gwo-gd-focus__list-slot,
	.gwo-gd-focus__list li,
	.gwo-gd-flow__list li,
	.gwo-gd-buyers__roles,
	.gwo-gd-cta__panel {
		padding-inline: var(--gwo-space-4);
	}

	.gwo-gd-review__fallback,
	.gwo-gd-review__trigger {
		grid-template-columns: minmax(0, 1fr);
	}

	.gwo-gd-review__trigger .gwo-solution-section__capability-arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gwo-gd-button,
	.gwo-gd-button svg,
	.gwo-gd-eyebrow__icon,
	.gwo-gd-hero::before,
	.gwo-gd-hero__scroll-fade,
	.gwo-gd-hero__wave-layer use {
		animation: none;
		transition: none;
	}

	.gwo-gd-hero__scroll-fade {
		opacity: 0;
	}

	.gwo-gd-hero::before {
		clip-path: none;
		opacity: 0.48;
	}

	.gwo-gd-context__image {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.gwo-gd-flow__list li,
	.gwo-gd-flow__number,
	.gwo-gd-flow__list h3,
	.gwo-gd-flow__list p,
	.gwo-gd-cta__decoration,
	.gwo-gd-cta .gwo-gd-button {
		animation: none;
		transition: none;
	}

	.gwo-gd-cta__decoration {
		opacity: 0.78;
		transform: translateY(-50%) rotate(180deg);
	}
}