/*
 * The Valve v3 — page-specific styles.
 *
 * Every rule below is scoped beneath .valve-v3 (or .valve-v3-page, the body
 * class this module adds to one page only). Nothing here can reach another
 * page, and no global Enfold style is overridden outside that wrapper.
 */

.valve-v3 {
	--vv3-deep: #0a4d21;
	--vv3-mid: #296f09;
	--vv3-signal: #3a9e0e;
	--vv3-signal-dark: #2f7f0b;
	--vv3-blue: #2f7cc0;
	--vv3-blue-fig: #3795e6;
	--vv3-panel: #f5f9fd;
	--vv3-panel-border: #dfe7f0;
	--vv3-white: #fff;
	--vv3-radius: 16px;
	--vv3-btn-radius: 11px;
	--vv3-gap: 24px;
	--vv3-banner-h: 341px;

	font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--vv3-deep);
	box-sizing: border-box;
}

.valve-v3 *,
.valve-v3 *::before,
.valve-v3 *::after {
	box-sizing: inherit;
}

.valve-v3 .vv3-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible focus for everything interactive inside the module. */
.valve-v3 a:focus-visible,
.valve-v3 button:focus-visible,
.valve-v3 input:focus-visible,
.valve-v3 select:focus-visible,
.valve-v3 textarea:focus-visible {
	outline: 3px solid var(--vv3-signal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- headings */

.valve-v3 .vv3-section-title,
.valve-v3-page .vv3-section-title {
	font-family: "Karla", Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: 43px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--vv3-deep);
	margin: 0 0 24px;
	text-transform: uppercase;
	text-wrap: balance;
}

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

.valve-v3 .vv3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--vv3-btn-radius);
	background: var(--vv3-signal);
	color: var(--vv3-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.valve-v3 .vv3-btn:hover,
.valve-v3 .vv3-btn:focus {
	background: var(--vv3-signal-dark);
	color: var(--vv3-white);
	text-decoration: none;
}

.valve-v3 .vv3-btn-arrow {
	width: 8px;
	height: 13px;
	flex: 0 0 auto;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.valve-v3 .vv3-btn-light {
	background: var(--vv3-white);
	color: var(--vv3-mid);
}

.valve-v3 .vv3-btn-light:hover,
.valve-v3 .vv3-btn-light:focus {
	background: #eef6ea;
	color: var(--vv3-mid);
}

/* ------------------------------------------------------------------ banner */

.valve-v3.vv3-banner {
	position: relative;
	width: 100%;
	height: var(--vv3-banner-h);
	overflow: hidden;
	background: var(--vv3-deep);
	isolation: isolate;
}

.valve-v3 .vv3-banner-art {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.valve-v3 .vv3-banner-mosaic {
	position: absolute;
	left: 0;
	top: 0;
	width: 67.3%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
	margin: 0;
	max-width: none;
}

/* The sweeping curve: an ellipse of flat colour, geometry taken from the
   design (rx/ry and the -42.8deg rotation), sized in percentages so it
   scales with the banner instead of being baked into a flat image. */
.valve-v3 .vv3-banner-curve {
	position: absolute;
	left: 52.5%;
	top: 62.4%;
	width: 70.1%;
	height: 227%;
	transform: translate(-50%, -50%) rotate(-42.8deg);
	background: var(--vv3-deep);
	border-radius: 50%;
	pointer-events: none;
}

.valve-v3 .vv3-banner-copy {
	position: absolute;
	left: 44.6%;
	top: 50%;
	transform: translateY(-50%);
	width: 39.3%;
	z-index: 1;
}

.valve-v3 .vv3-banner-title {
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
	border: 0;
}

.valve-v3 .vv3-wordmark {
	display: block;
	width: 100%;
	height: auto;
	max-width: 567px;
	margin: 0;
}

.valve-v3 .vv3-wordmark-text {
	display: block;
	font-size: 62px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--vv3-white);
	text-transform: uppercase;
}

.valve-v3 .vv3-banner-tagline {
	margin: 22px 0 0;
	color: var(--vv3-white);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 400;
	max-width: 508px;
}

.valve-v3 .vv3-banner-tagline strong {
	font-weight: 700;
}

.valve-v3 .vv3-banner-actions {
	margin: 20px 0 0;
}

/* ------------------------------------------------------- newsletter strip */

.valve-v3.vv3-newsletter-bar {
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--vv3-mid);
	color: var(--vv3-white);
	padding: 26px 0;
}

.valve-v3 .vv3-newsletter-icon {
	flex: 0 0 auto;
	width: 59px;
	height: 59px;
	display: block;
}

.valve-v3 .vv3-newsletter-text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 20px;
	line-height: 1.22;
	color: var(--vv3-white);
}

.valve-v3 .vv3-newsletter-text strong {
	font-weight: 700;
}

/* ----------------------------------------------------------------- experts */

.valve-v3 .vv3-experts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.valve-v3 .vv3-experts-head .vv3-section-title {
	margin: 0;
}

.valve-v3 .vv3-expert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px;
	text-align: center;
}

.valve-v3 .vv3-expert img {
	width: 121px;
	height: 121px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--vv3-mid);
	display: block;
}

.valve-v3 .vv3-expert-name {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 8px;
	color: var(--vv3-deep);
}

.valve-v3 .vv3-expert-role {
	font-size: 12px;
	line-height: 1.2;
	margin: 0;
	color: var(--vv3-deep);
}

.valve-v3.vv3-contact {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--vv3-panel);
	border-radius: var(--vv3-radius);
	padding: 32px 24px;
	height: 100%;
}

.valve-v3 .vv3-contact-icon {
	flex: 0 0 auto;
	width: 49px;
	height: 49px;
	color: var(--vv3-deep);
}

.valve-v3 .vv3-contact-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.valve-v3 .vv3-contact-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
	color: var(--vv3-deep);
	text-transform: uppercase;
}

.valve-v3 .vv3-contact-text {
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
	color: var(--vv3-deep);
}

/* ----------------------------------------------------------------- filters */

.valve-v3 .vv3-filters {
	display: flex;
	gap: 16px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 32px;
}

.valve-v3 .vv3-field {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--vv3-panel);
	border: 1px solid var(--vv3-panel-border);
	border-radius: var(--vv3-radius);
	min-height: 72px;
	padding: 10px 24px;
}

.valve-v3 .vv3-field-search {
	flex: 1 1 233px;
}

.valve-v3 .vv3-field-select {
	flex: 1 1 300px;
}

.valve-v3 .vv3-field input[type="search"],
.valve-v3 .vv3-field select {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 20px;
	line-height: 1.2;
	color: var(--vv3-deep);
	padding: 0;
	margin: 0;
	box-shadow: none;
	min-height: 0;
	height: auto;
	appearance: none;
	-webkit-appearance: none;
}

.valve-v3 .vv3-field input[type="search"]::placeholder {
	color: var(--vv3-deep);
	opacity: 0.75;
}

.valve-v3 .vv3-search-btn {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--vv3-deep);
	padding: 4px;
	margin-left: 8px;
	cursor: pointer;
	line-height: 0;
}

.valve-v3 .vv3-caret {
	flex: 0 0 auto;
	width: 14px;
	height: 8px;
	margin-left: 12px;
	background: var(--vv3-deep);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

/* -------------------------------------------------------------------- grid */

.valve-v3 .vv3-grid {
	display: grid;
	gap: 40px var(--vv3-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.valve-v3 .vv3-cols-1 { grid-template-columns: minmax(0, 1fr); }
.valve-v3 .vv3-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.valve-v3 .vv3-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.valve-v3 .vv3-card {
	display: flex;
	flex-direction: column;
	gap: var(--vv3-gap);
	min-width: 0;
}

.valve-v3 .vv3-card-media {
	display: block;
	border-radius: var(--vv3-radius);
	overflow: hidden;
	aspect-ratio: 384 / 183;
	background: #e8eef3;
	line-height: 0;
}

.valve-v3 .vv3-card-media-empty {
	display: block;
}

.valve-v3 .vv3-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.valve-v3 .vv3-card:hover .vv3-card-img {
	transform: scale(1.03);
}

.valve-v3 .vv3-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.valve-v3 .vv3-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	font-size: 16px;
	line-height: 1;
}

.valve-v3 .vv3-card-term {
	color: var(--vv3-blue);
	font-weight: 500;
}

.valve-v3 .vv3-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vv3-blue-fig);
	display: inline-block;
	flex: 0 0 auto;
}

.valve-v3 .vv3-card-date {
	color: var(--vv3-deep);
}

.valve-v3 .vv3-card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.valve-v3 .vv3-card-title a {
	color: var(--vv3-deep);
	text-decoration: none;
}

.valve-v3 .vv3-card-title a:hover,
.valve-v3 .vv3-card-title a:focus {
	color: var(--vv3-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.valve-v3 .vv3-card-excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--vv3-deep);
}

.valve-v3 .vv3-empty {
	margin: 0;
	padding: 32px 0;
	font-size: 18px;
	color: var(--vv3-deep);
}

.valve-v3 .vv3-results[aria-busy="true"] {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

/* -------------------------------------------------------------- pagination */

.valve-v3 .vv3-pagination {
	margin: 44px 0 0;
}

.valve-v3 .vv3-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.valve-v3 .vv3-pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.valve-v3 .vv3-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--vv3-panel-border);
	border-radius: var(--vv3-btn-radius);
	background: var(--vv3-panel);
	color: var(--vv3-deep);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
}

.valve-v3 .vv3-pagination a.page-numbers:hover,
.valve-v3 .vv3-pagination a.page-numbers:focus {
	background: #e6f0e2;
	border-color: var(--vv3-signal);
	color: var(--vv3-deep);
}

.valve-v3 .vv3-pagination .page-numbers.current {
	background: var(--vv3-signal);
	border-color: var(--vv3-signal);
	color: var(--vv3-white);
}

.valve-v3 .vv3-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* ------------------------------------------------------- stay in the know */

.valve-v3.vv3-stay {
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--vv3-mid);
	border-radius: var(--vv3-radius);
	padding: 34px 42px;
	color: var(--vv3-white);
}

.valve-v3 .vv3-stay-icon {
	flex: 0 0 auto;
	width: 59px;
	height: 59px;
	display: block;
}

.valve-v3 .vv3-stay-body {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.valve-v3 .vv3-stay-copy {
	flex: 1 1 340px;
	min-width: 0;
}

.valve-v3 .vv3-stay-title {
	margin: 0 0 14px;
	font-size: 43px;
	font-weight: 800;
	line-height: 1;
	color: var(--vv3-white);
	text-transform: uppercase;
}

.valve-v3 .vv3-stay-text {
	margin: 0;
	font-size: 20px;
	line-height: 1.22;
	color: var(--vv3-white);
}

.valve-v3 .vv3-stay-form {
	flex: 0 1 379px;
	min-width: 260px;
}

/* Gravity Forms, restyled only inside this module. */
.valve-v3 .gform_wrapper {
	margin: 0;
}

.valve-v3 .gform_wrapper form,
.valve-v3 .gform_wrapper .gform_body,
.valve-v3 .gform_wrapper .gform_fields {
	margin: 0;
}

.valve-v3 .gform_wrapper .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.valve-v3 .gform_wrapper .ginput_container input[type="email"],
.valve-v3 .gform_wrapper .ginput_container input[type="text"] {
	width: 100%;
	background: var(--vv3-white);
	border: 1px solid var(--vv3-white);
	border-radius: 8px;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
	color: var(--vv3-deep);
	box-shadow: none;
}

.valve-v3 .gform_wrapper .gform_footer {
	margin: 0;
	padding: 0;
}

.valve-v3 .gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--vv3-btn-radius);
	background: var(--vv3-signal);
	color: var(--vv3-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	width: auto;
}

.valve-v3 .gform_wrapper .gform_button:hover,
.valve-v3 .gform_wrapper .gform_button:focus {
	background: var(--vv3-signal-dark);
}

.valve-v3 .gform_wrapper .gform_validation_errors,
.valve-v3 .gform_wrapper .validation_message {
	background: #fff4f4;
	border-radius: 8px;
	color: #8a1f1f;
	font-size: 14px;
	padding: 8px 12px;
	margin-top: 8px;
}

.valve-v3 .gform_confirmation_message {
	color: var(--vv3-white);
	font-size: 18px;
	line-height: 1.4;
}

.valve-v3 .vv3-stay-privacy {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.3;
	color: #d6ecc9;
}

/* Side-by-side email + button where the layout allows it. */
@media only screen and (min-width: 768px) {
	.valve-v3 .vv3-stay-form .gform_wrapper form {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		background: var(--vv3-white);
		border-radius: 8px;
		padding: 8px 8px 8px 8px;
	}

	.valve-v3 .vv3-stay-form .gform_wrapper .gform_body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.valve-v3 .vv3-stay-form .gform_wrapper .ginput_container input[type="email"] {
		border: 0;
		padding: 10px 8px;
	}

	.valve-v3 .vv3-stay-form .gform_wrapper .gform_footer {
		flex: 0 0 auto;
		width: auto;
	}
}

/* ================================================================ TABLET */

@media only screen and (max-width: 1023px) {
	.valve-v3 {
		--vv3-banner-h: 280px;
	}

	.valve-v3 .vv3-section-title,
	.valve-v3 .vv3-stay-title {
		font-size: 34px;
	}

	.valve-v3 .vv3-banner-mosaic {
		width: 52%;
	}

	.valve-v3 .vv3-banner-copy {
		left: 40%;
		width: 54%;
	}

	.valve-v3 .vv3-wordmark {
		max-width: 420px;
	}

	.valve-v3 .vv3-banner-tagline {
		font-size: 18px;
		margin-top: 16px;
	}

	.valve-v3 .vv3-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.valve-v3 .vv3-card-title {
		font-size: 21px;
	}

	.valve-v3 .vv3-field-search {
		flex: 1 1 100%;
	}

	.valve-v3 .vv3-field-select {
		flex: 1 1 45%;
	}

	.valve-v3.vv3-stay {
		padding: 30px 28px;
	}

	.valve-v3 .vv3-stay-copy,
	.valve-v3 .vv3-stay-form {
		flex: 1 1 100%;
	}
}

/* ================================================================ MOBILE */

@media only screen and (max-width: 767px) {
	/* The banner stacks rather than shrinking: the mosaic keeps its blue
	   cross and grass tile as a full-width band, the green panel sits
	   underneath it, and the type stays at a readable size. */
	.valve-v3.vv3-banner {
		height: auto;
		min-height: 0;
	}

	.valve-v3 .vv3-banner-art {
		position: relative;
		inset: auto;
		display: block;
		height: 130px;
		overflow: hidden;
	}

	.valve-v3 .vv3-banner-mosaic {
		position: absolute;
		width: 100%;
		height: 130px;
		object-position: left center;
	}

	.valve-v3 .vv3-banner-curve {
		left: 50%;
		top: 100%;
		width: 190%;
		height: 150px;
		transform: translate(-50%, -46%) rotate(0deg);
		border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	}

	.valve-v3 .vv3-banner-copy {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		padding: 26px 20px 34px;
		text-align: center;
		background: var(--vv3-deep);
	}

	.valve-v3 .vv3-wordmark {
		max-width: 260px;
		margin: 0 auto;
	}

	.valve-v3 .vv3-wordmark-text {
		font-size: 40px;
	}

	.valve-v3 .vv3-banner-tagline {
		font-size: 16px;
		margin: 14px auto 0;
		max-width: 34ch;
	}

	.valve-v3 .vv3-section-title,
	.valve-v3 .vv3-stay-title {
		font-size: 27px;
	}

	.valve-v3.vv3-newsletter-bar {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding: 24px 0;
	}

	.valve-v3 .vv3-newsletter-text {
		font-size: 17px;
	}

	.valve-v3 .vv3-experts-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.valve-v3 .vv3-expert img {
		width: 96px;
		height: 96px;
	}

	.valve-v3.vv3-contact {
		flex-direction: column;
		padding: 26px 20px;
	}

	.valve-v3 .vv3-filters {
		flex-direction: column;
		gap: 12px;
	}

	.valve-v3 .vv3-field {
		flex: 1 1 100% !important;
		min-height: 56px;
		padding: 8px 18px;
	}

	.valve-v3 .vv3-field input[type="search"],
	.valve-v3 .vv3-field select {
		font-size: 16px;
	}

	.valve-v3 .vv3-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.valve-v3 .vv3-card-media {
		aspect-ratio: 16 / 9;
	}

	.valve-v3 .vv3-card-title {
		font-size: 20px;
	}

	.valve-v3 .vv3-card-meta {
		font-size: 14px;
	}

	.valve-v3.vv3-stay {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 28px 20px;
	}

	.valve-v3 .vv3-stay-icon {
		margin: 0 auto;
	}

	.valve-v3 .vv3-stay-text {
		font-size: 17px;
	}

	.valve-v3 .vv3-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 10px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.valve-v3 .vv3-card-img,
	.valve-v3 .vv3-btn,
	.valve-v3 .vv3-results {
		transition: none !important;
	}

	.valve-v3 .vv3-card:hover .vv3-card-img {
		transform: none;
	}
}

/* ==================================================================
 * Enfold integration layer.
 *
 * These rules reach outside .valve-v3 to style the Enfold column and
 * section wrappers the page is built from. Every one of them is scoped
 * beneath .valve-v3-page — a body class added to a single page ID — so
 * they cannot affect any other page on the site.
 * ================================================================== */

.valve-v3-page .vv3-section-banner .container,
.valve-v3-page .vv3-section-newsletter .container {
	max-width: none;
	width: 100%;
	padding: 0;
}

.valve-v3-page .vv3-section-banner .content,
.valve-v3-page .vv3-section-newsletter .content {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.valve-v3-page .vv3-section-banner .avia_textblock,
.valve-v3-page .vv3-section-newsletter .avia_textblock {
	margin: 0;
}

.valve-v3-page .vv3-section-newsletter {
	background: #296f09;
}

.valve-v3-page .vv3-section-newsletter .vv3-newsletter-bar {
	max-width: 1310px;
	width: 90%;
	margin: 0 auto;
}

/* Enfold wraps text-block content in <p>; kill the stray empties. */
.valve-v3-page .avia_textblock > p:empty {
	display: none;
}

/* ---------------------------------------------------------- experts */

.valve-v3-page .vv3-expert {
	text-align: center;
	font-family: "Karla", Helvetica, Arial, sans-serif;
}

.valve-v3-page .vv3-expert .avia-image-container {
	margin: 0 0 16px;
}

.valve-v3-page .vv3-expert .avia_image {
	width: 121px;
	height: 121px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #296f09;
}

.valve-v3-page .vv3-expert .avia_textblock {
	font-family: inherit;
}

.valve-v3-page .vv3-expert-name {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.1;
	color: #0a4d21;
}

.valve-v3-page .vv3-expert-role {
	margin: 0;
	font-size: 12px;
	line-height: 1.25;
	color: #0a4d21;
}

/* ---------------------------------------------- Enfold button skin */

.valve-v3-page .vv3-meet-all .avia-button,
.valve-v3-page .vv3-request-info .avia-button {
	background: #3a9e0e;
	border-color: #3a9e0e;
	border-radius: 11px;
	color: #fff;
	font-family: "Karla", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	min-height: 42px;
	line-height: 42px;
	padding: 0 20px;
}

.valve-v3-page .vv3-meet-all .avia-button:hover,
.valve-v3-page .vv3-request-info .avia-button:hover {
	background: #2f7f0b;
	border-color: #2f7f0b;
	color: #fff;
}

.valve-v3-page .vv3-experts-head-btn {
	text-align: right;
}

@media only screen and (max-width: 767px) {
	.valve-v3-page .vv3-experts-head-btn {
		text-align: left;
	}
}

/* ------------------------------------------------- section rhythm */

.valve-v3-page .vv3-section-banner .container_wrap,
.valve-v3-page .vv3-section-banner {
	overflow: hidden;
}

.valve-v3-page .vv3-section-body {
	padding-top: 56px;
	padding-bottom: 56px;
}

@media only screen and (max-width: 767px) {
	.valve-v3-page .vv3-section-body {
		padding-top: 36px;
		padding-bottom: 36px;
	}
}

/* Contact icon delivered via CSS so it survives any editor sanitisation. */
.valve-v3 .vv3-contact-icon {
	display: block;
	width: 49px;
	height: 49px;
	flex: 0 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a4d21'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm.9 15.2h-1.8v-1.8h1.8v1.8zm1.9-6.9c-.5.6-1.2 1-1.5 1.5-.2.3-.3.6-.3 1.1h-1.8c0-.8.1-1.4.5-1.9.4-.5 1-.9 1.4-1.3.3-.3.5-.7.5-1.1 0-.8-.7-1.4-1.5-1.4s-1.5.6-1.5 1.4H8.8c0-1.8 1.5-3.2 3.3-3.2s3.3 1.4 3.3 3.2c0 .7-.3 1.3-.6 1.7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* ==================================================================
 * Responsive corrections — verified in-browser at 1440 / 900 / 375.
 * ================================================================== */

/* The banner height arrives as an inline custom property from the
   shortcode, which would otherwise outrank the media queries. Drive the
   height property directly so the breakpoints can win. */
.valve-v3.vv3-banner {
	height: var(--vv3-banner-h-desktop, 341px);
}

/* Masthead and newsletter strip run edge to edge at every width. */
.valve-v3-page .vv3-section-banner .container,
.valve-v3-page .vv3-section-newsletter .container {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

.valve-v3-page .vv3-section-banner .content,
.valve-v3-page .vv3-section-newsletter .content {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.valve-v3-page .vv3-section-newsletter .vv3-newsletter-bar {
	width: 90%;
	max-width: 1310px;
	margin: 0 auto;
}

/* Portraits stay circular when the column is narrower than 121px. */
.valve-v3-page .vv3-expert .avia_image,
.valve-v3 .vv3-expert img {
	width: min(121px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media only screen and (max-width: 1023px) {
	.valve-v3.vv3-banner {
		height: 280px;
	}

	.valve-v3-page .vv3-section-title {
		font-size: 34px;
	}
}

@media only screen and (max-width: 767px) {
	.valve-v3.vv3-banner {
		height: auto;
	}

	.valve-v3-page .vv3-section-title {
		font-size: 27px;
	}
}

/* ==================================================================
 * WCAG 2.1 AA colour corrections.
 *
 * The Figma palette uses #3a9e0e for button fills and #3795e6 for the
 * category links. Against white / with white text those measure
 * 3.46:1 and ~2.9:1 — below the 4.5:1 the guidelines ask for at these
 * text sizes. The values below are the nearest darker shades that pass
 * (5.05:1 and 5.08:1). To restore the exact Figma hexes, delete this
 * block; nothing else depends on it.
 * ================================================================== */

.valve-v3 {
	--vv3-signal: #2f7f0b;
	--vv3-signal-dark: #25650a;
	--vv3-blue: #2b72b0;
}

.valve-v3-page .vv3-meet-all .avia-button,
.valve-v3-page .vv3-request-info .avia-button {
	background: #2f7f0b;
	border-color: #2f7f0b;
}

.valve-v3-page .vv3-meet-all .avia-button:hover,
.valve-v3-page .vv3-request-info .avia-button:hover {
	background: #25650a;
	border-color: #25650a;
}

/* ==================================================================
 * Focus rings.
 *
 * Enfold resets `outline` on form controls with #top-prefixed
 * selectors, which beat a plain class rule and left the filter
 * controls with no visible keyboard focus. Match that specificity
 * (still scoped to this page) so the ring is always visible.
 * ================================================================== */

#top.valve-v3-page .valve-v3 a:focus-visible,
#top.valve-v3-page .valve-v3 button:focus-visible,
#top.valve-v3-page .valve-v3 input:focus-visible,
#top.valve-v3-page .valve-v3 select:focus-visible,
#top.valve-v3-page .valve-v3 textarea:focus-visible,
#top.valve-v3-page .vv3-expert a:focus-visible,
#top.valve-v3-page .vv3-meet-all .avia-button:focus-visible,
#top.valve-v3-page .vv3-section-title a:focus-visible {
	outline: 3px solid #2f7f0b !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

/* Keep a ring for browsers without :focus-visible support. */
#top.valve-v3-page .valve-v3 input:focus,
#top.valve-v3-page .valve-v3 select:focus,
#top.valve-v3-page .valve-v3 button:focus {
	outline: 3px solid #2f7f0b;
	outline-offset: 2px;
}

/* Enfold zeroes outline-width on image links, so set the longhands. */
#top.valve-v3-page .vv3-expert a:focus,
#top.valve-v3-page .vv3-expert a:focus-visible,
#top.valve-v3-page .vv3-expert .avia-image-container a:focus,
#top.valve-v3-page .vv3-expert .avia-image-container a:focus-visible,
#top.valve-v3-page .valve-v3 a:focus-visible,
#top.valve-v3-page .valve-v3 button:focus-visible,
#top.valve-v3-page .valve-v3 input:focus-visible,
#top.valve-v3-page .valve-v3 select:focus-visible {
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: #2f7f0b !important;
	outline-offset: 3px !important;
}

/* Guaranteed keyboard focus ring across everything on this page.
   Painted on :focus (which Enfold cannot suppress once the longhands
   are !important), then hidden again for pointer focus so mouse users
   do not see a ring. */
#top.valve-v3-page .valve-v3 a:focus,
#top.valve-v3-page .valve-v3 button:focus,
#top.valve-v3-page .valve-v3 input:focus,
#top.valve-v3-page .valve-v3 select:focus,
#top.valve-v3-page .valve-v3 textarea:focus,
#top.valve-v3-page .vv3-expert a:focus,
#top.valve-v3-page .vv3-experts-head-btn a:focus,
#top.valve-v3-page .vv3-meet-all a:focus {
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: #2f7f0b !important;
	outline-offset: 3px !important;
}

#top.valve-v3-page .valve-v3 a:focus:not(:focus-visible),
#top.valve-v3-page .valve-v3 button:focus:not(:focus-visible),
#top.valve-v3-page .valve-v3 input:focus:not(:focus-visible),
#top.valve-v3-page .valve-v3 select:focus:not(:focus-visible),
#top.valve-v3-page .valve-v3 textarea:focus:not(:focus-visible),
#top.valve-v3-page .vv3-expert a:focus:not(:focus-visible),
#top.valve-v3-page .vv3-experts-head-btn a:focus:not(:focus-visible),
#top.valve-v3-page .vv3-meet-all a:focus:not(:focus-visible) {
	outline-style: none !important;
}

/* Enfold's linked images need the longhands aimed at the anchor itself. */
#top.valve-v3-page a.avia_image:focus,
#top.valve-v3-page .avia-image-container a:focus {
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: #2f7f0b !important;
	outline-offset: 3px !important;
}

#top.valve-v3-page a.avia_image:focus:not(:focus-visible),
#top.valve-v3-page .avia-image-container a:focus:not(:focus-visible) {
	outline-style: none !important;
}

/* ==================================================================
 * REVISION 2 — design-review corrections.
 *
 * Each block names the defect it fixes. Later in the file than the
 * original rules, so these win at equal specificity.
 * ================================================================== */

/* ------------------------------------------------------------------
 * 1. Tokens on the page wrapper as well as the component wrapper.
 *
 * The custom properties were only declared on .valve-v3. Headings
 * rendered inside a bare Enfold text block matched
 * `.valve-v3-page .vv3-section-title` but resolved `var(--vv3-deep)`
 * to nothing, so "OUR EXPERTS" fell back to black.
 * ------------------------------------------------------------------ */
.valve-v3-page {
	--vv3-deep: #0a4d21;
	--vv3-mid: #296f09;
	--vv3-signal: #2f7f0b;
	--vv3-signal-dark: #25650a;
	--vv3-blue: #2b72b0;
	--vv3-blue-fig: #3795e6;
	--vv3-panel: #f5f9fd;
	--vv3-panel-border: #dfe7f0;
	--vv3-radius: 16px;
	--vv3-btn-radius: 11px;
}

/* ------------------------------------------------------------------
 * 2. Headings. Enfold sets font-family and text-transform on headings
 * with #top-prefixed rules, which beat plain class selectors — that is
 * why "Stay in the Know" rendered in Helvetica. Match the specificity.
 * Capitalisation now comes from the content itself, so transform is
 * explicitly none.
 * ------------------------------------------------------------------ */
#top.valve-v3-page .vv3-section-title,
#top.valve-v3-page .vv3-stay-title,
#top.valve-v3-page .vv3-contact-title,
#top.valve-v3-page .vv3-card-title,
#top.valve-v3-page .vv3-expert-name {
	font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: none;
}

#top.valve-v3-page .vv3-section-title {
	font-size: 43px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #0a4d21;
	margin: 0 0 24px;
}

#top.valve-v3-page .vv3-stay-title {
	font-size: 43px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	margin: 0 0 14px;
}

/* ------------------------------------------------------------------
 * 3. Section rhythm.
 *
 * Sections previously carried 56px of their own padding AND Enfold's
 * default 50px on .content — 212px between neighbours. Sections are now
 * set to no-padding in the builder and spacing is owned here, once.
 * ------------------------------------------------------------------ */
#top.valve-v3-page .vv3-section-body > .container > .content,
#top.valve-v3-page .vv3-section-body .container .content {
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}

/* Banner -> Experts: a slightly larger opening gap, per the design. */
#top.valve-v3-page .vv3-section-experts .container .content {
	padding-top: 44px !important;
}

#top.valve-v3-page .vv3-section-stay .container .content {
	padding-bottom: 56px !important;
}

/* Enfold's column bottom margin adds a second, invisible gap. */
#top.valve-v3-page .vv3-section-body .flex_column {
	margin-bottom: 0;
}

#top.valve-v3-page .vv3-section-body .entry-content-wrapper > *:last-child {
	margin-bottom: 0;
}

/* wpautop leaves empty paragraphs inside text blocks; they are pure
   vertical noise. */
#top.valve-v3-page .avia_textblock > p:empty,
#top.valve-v3-page .avia_textblock > br:first-child,
#top.valve-v3-page .avia_textblock > br:last-child {
	display: none;
}

#top.valve-v3-page .vv3-section-body .avia_textblock {
	margin: 0;
}

.valve-v3 .vv3-pagination {
	margin-top: 32px;
}

/* ------------------------------------------------------------------
 * 4. Newsletter strip.
 *
 * wpautop inserted <br> elements between the icon, the text and the
 * button. Because the bar is a flex row, each <br> became a flex item
 * that stole width and pushed the copy behind the icon. The markup is
 * now on one line, and any stray <br> is neutralised here.
 * ------------------------------------------------------------------ */
.valve-v3 .vv3-newsletter-bar br,
.valve-v3 .vv3-stay br,
.valve-v3 .vv3-contact br,
.valve-v3 .vv3-experts-head br {
	display: none !important;
}

.valve-v3.vv3-newsletter-bar {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 18px 0;
	min-height: 0;
}

.valve-v3 .vv3-newsletter-icon {
	flex: 0 0 auto;
	width: 59px;
	height: 59px;
}

.valve-v3 .vv3-newsletter-text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	font-size: 20px;
	line-height: 1.22;
	color: #fff;
	overflow: visible;
}

.valve-v3 .vv3-newsletter-bar .vv3-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * 5. Banner tagline.
 *
 * Enfold colours <strong> with the theme primary (#296f09), so the
 * closing words were dark green on dark green. Inherit the white.
 * ------------------------------------------------------------------ */
#top.valve-v3-page .vv3-banner-tagline,
#top.valve-v3-page .vv3-banner-tagline strong,
#top.valve-v3-page .vv3-banner-tagline em,
#top.valve-v3-page .vv3-newsletter-text,
#top.valve-v3-page .vv3-newsletter-text strong,
#top.valve-v3-page .vv3-stay-text,
#top.valve-v3-page .vv3-stay-text strong {
	color: #fff !important;
}

/* ------------------------------------------------------------------
 * 6. Experts row.
 *
 * The heading and its button now sit in one 770px flex row, matching
 * the design, instead of the button floating to the far page edge.
 * Column widths are re-proportioned to the design's 805px expert group
 * plus a 355px contact card.
 * ------------------------------------------------------------------ */
.valve-v3 .vv3-experts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 770px;
	margin: 0 0 8px;
}

#top.valve-v3-page .vv3-experts-head .vv3-section-title {
	margin: 0;
}

#top.valve-v3-page .vv3-experts-head-row {
	margin-bottom: 0;
}

#top.valve-v3-page .vv3-section-experts .vv3-expert {
	width: 21.03%;
	margin-left: 2%;
	padding: 0;
}

#top.valve-v3-page .vv3-section-experts .vv3-expert.first {
	margin-left: 0;
}

#top.valve-v3-page .vv3-section-experts .vv3-contact-col {
	width: 29.58%;
	margin-left: 3.33%;
	padding: 0;
}

#top.valve-v3-page .vv3-expert .avia_image {
	width: 121px;
	height: 121px;
	max-width: 100%;
}

.valve-v3.vv3-contact {
	min-height: 229px;
	padding: 32px 24px;
	gap: 16px;
}

#top.valve-v3-page .vv3-contact-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	color: #0a4d21;
	margin: 0;
	text-wrap: balance;
	hyphens: none;
}

/* ------------------------------------------------------------------
 * 7. Filter selects — remove the duplicate arrow.
 *
 * appearance:none was already set, but Enfold paints its own arrow as
 * a background image, so the native-looking chevron sat beside the
 * custom green caret.
 * ------------------------------------------------------------------ */
#top.valve-v3-page .vv3-field select {
	background-image: none !important;
	background: transparent !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 8px !important;
	border: 0 !important;
	box-shadow: none !important;
}

#top.valve-v3-page .vv3-field select::-ms-expand {
	display: none;
}

/* ------------------------------------------------------------------
 * 8. Gravity Form inside "Stay in the Know".
 * ------------------------------------------------------------------ */
#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button,
#top.valve-v3-page .vv3-stay-form .gform_wrapper .vv3-gf-submit {
	background: #2f7f0b;
	border: 0;
	border-radius: 11px;
	color: #fff;
	font-family: "Karla", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	min-height: 42px;
	padding: 0 24px;
	width: auto;
	cursor: pointer;
	line-height: 42px;
}

#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button:hover {
	background: #25650a;
}

#top.valve-v3-page .vv3-stay-form .gform_wrapper input[type="email"] {
	width: 100%;
	background: #fff;
	border: 0;
	border-radius: 8px;
	padding: 12px 14px;
	font-family: "Karla", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #0a4d21;
	box-shadow: none;
	min-height: 42px;
}

#top.valve-v3-page .vv3-stay-form .gform_wrapper input[type="email"]::placeholder {
	color: #4d6b56;
	opacity: 1;
}

@media only screen and (min-width: 768px) {
	#top.valve-v3-page .vv3-stay-form .gform_wrapper form {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #fff;
		border-radius: 10px;
		padding: 6px;
	}

	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_body {
		flex: 1 1 auto;
		min-width: 0;
	}

	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_footer {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {
	#top.valve-v3-page .vv3-stay-form .gform_wrapper form {
		display: block;
		background: transparent;
		padding: 0;
	}

	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_footer {
		margin: 10px 0 0;
		padding: 0;
	}

	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button {
		display: block;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * 9. Responsive spacing + typography.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 1023px) {
	#top.valve-v3-page .vv3-section-title,
	#top.valve-v3-page .vv3-stay-title {
		font-size: 34px;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-expert {
		width: 30.66%;
		margin-left: 4%;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-expert.first {
		margin-left: 0;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-contact-col {
		width: 100%;
		margin-left: 0;
		margin-top: 28px;
	}

	.valve-v3 .vv3-experts-head {
		max-width: none;
	}
}

@media only screen and (max-width: 767px) {
	#top.valve-v3-page .vv3-section-body .container .content {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}

	#top.valve-v3-page .vv3-section-experts .container .content {
		padding-top: 32px !important;
	}

	#top.valve-v3-page .vv3-section-title,
	#top.valve-v3-page .vv3-stay-title {
		font-size: 26px;
		line-height: 1.1;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-expert,
	#top.valve-v3-page .vv3-section-experts .vv3-contact-col {
		width: 100%;
		margin-left: 0;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-expert {
		margin-bottom: 24px;
	}

	.valve-v3.vv3-newsletter-bar {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 20px 0;
	}

	.valve-v3 .vv3-newsletter-text {
		font-size: 16px;
	}

	.valve-v3.vv3-contact {
		min-height: 0;
	}

	#top.valve-v3-page .vv3-contact-title {
		font-size: 20px;
	}
}

@media only screen and (max-width: 400px) {
	#top.valve-v3-page .vv3-section-title,
	#top.valve-v3-page .vv3-stay-title {
		font-size: 23px;
	}
}

/* ==================================================================
 * REVISION 2b — corrections found during verification.
 * ================================================================== */

/* The original rule put 56px of padding on the section itself; the new
   rhythm lives on .content. Both were applying, so every boundary was
   56 + 28 + 28 + 56 = 168px. Spacing is now owned in exactly one place. */
#top.valve-v3-page .vv3-section-body,
#top.valve-v3-page .vv3-section-experts,
#top.valve-v3-page .vv3-section-stay {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* .valve-v3 and .vv3-experts-head sit on the SAME element, so the
   descendant selector never matched and the row stayed display:block —
   which is why the button dropped to the left under the heading. */
.valve-v3.vv3-experts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 770px;
	margin: 0 0 8px;
	flex-wrap: wrap;
}

#top.valve-v3-page .vv3-experts-head .vv3-btn {
	flex: 0 0 auto;
}

/* wpautop's empty paragraphs sit at any depth inside a text block. */
#top.valve-v3-page .avia_textblock p:empty {
	display: none !important;
}

/* Portraits: square at exactly the design size. */
#top.valve-v3-page .vv3-expert .avia-image-container,
#top.valve-v3-page .vv3-expert .avia-image-container-inner,
#top.valve-v3-page .vv3-expert .avia-image-overlay-wrap {
	width: 121px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#top.valve-v3-page .vv3-expert img.avia_image {
	width: 121px !important;
	height: 121px !important;
	max-width: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Contact card toward the design's 355 x 229. */
.valve-v3.vv3-contact {
	padding: 32px 24px;
	gap: 16px;
	min-height: 0;
}

#top.valve-v3-page .vv3-contact-title {
	font-size: 20px;
	line-height: 1.15;
	margin: 0;
}

#top.valve-v3-page .vv3-contact-text {
	font-size: 15px;
	line-height: 1.35;
	margin: 0;
}

@media only screen and (max-width: 767px) {
	#top.valve-v3-page .vv3-expert img.avia_image {
		width: 96px !important;
		height: 96px !important;
	}

	#top.valve-v3-page .vv3-expert .avia-image-container,
	#top.valve-v3-page .vv3-expert .avia-image-container-inner,
	#top.valve-v3-page .vv3-expert .avia-image-overlay-wrap {
		width: 96px;
	}
}

/* ==================================================================
 * REVISION 2c — final trims.
 * ================================================================== */

/* Enfold pads its image element, so max-width:100% was shrinking the
   portrait to 116px inside a 121px box. Size the img itself, border-box. */
#top.valve-v3-page .vv3-expert img.avia_image {
	box-sizing: border-box;
	max-width: none !important;
	width: 121px !important;
	height: 121px !important;
	padding: 0 !important;
}

/* Contact card: wpautop wraps the button in a <p> whose bottom margin
   was adding ~12px, and the stacked gaps pushed the card past its
   229px design height. */
#top.valve-v3-page .vv3-contact-body {
	gap: 12px;
}

#top.valve-v3-page .vv3-contact-body p {
	margin: 0 !important;
}

#top.valve-v3-page .vv3-contact-text {
	font-size: 15px;
	line-height: 1.3;
}

@media only screen and (max-width: 767px) {
	#top.valve-v3-page .vv3-expert img.avia_image {
		width: 96px !important;
		height: 96px !important;
	}
}

/* Submit button: input padding was stacking on top of the 42px
   line-height and making the control 66px tall. */
#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button {
	height: 42px;
	line-height: 1;
	padding: 0 24px;
	box-sizing: border-box;
}

/* ==================================================================
 * REVISION 2d — verification pass corrections.
 * ================================================================== */

/* Portrait: one size everywhere. The earlier mobile override shrank the
   container to 96px while the image stayed 121px, so the image spilled
   out of its own box. Both now agree at the design's 121px. */
@media only screen and (max-width: 767px) {
	#top.valve-v3-page .vv3-expert img.avia_image {
		width: 121px !important;
		height: 121px !important;
	}

	#top.valve-v3-page .vv3-expert .avia-image-container,
	#top.valve-v3-page .vv3-expert .avia-image-container-inner,
	#top.valve-v3-page .vv3-expert .avia-image-overlay-wrap {
		width: 121px;
	}
}

/* Heading descenders were poking 3px past a line-height of exactly 1. */
#top.valve-v3-page .vv3-stay-title,
#top.valve-v3-page .vv3-section-title {
	line-height: 1.06;
}

/* At 1024 the contact card was squeezed to ~239px beside three experts.
   Stack it below them from 1100px down, as on tablet. */
@media only screen and (max-width: 1100px) {
	#top.valve-v3-page .vv3-section-experts .vv3-expert {
		width: 30.66%;
		margin-left: 4%;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-expert.first {
		margin-left: 0;
	}

	#top.valve-v3-page .vv3-section-experts .vv3-contact-col {
		width: 100%;
		margin-left: 0;
		margin-top: 28px;
	}

	.valve-v3.vv3-experts-head {
		max-width: none;
	}
}

/* Mobile newsletter strip: keep the icon beside the copy and drop the
   button to its own full-width line. Stacking all three made the bar
   ~250px tall for no benefit. */
@media only screen and (max-width: 767px) {
	.valve-v3.vv3-newsletter-bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
		gap: 12px;
		padding: 16px 0;
	}

	.valve-v3 .vv3-newsletter-icon {
		width: 44px;
		height: 44px;
	}

	.valve-v3 .vv3-newsletter-text {
		flex: 1 1 180px;
		font-size: 15px;
		line-height: 1.32;
	}

	.valve-v3 .vv3-newsletter-bar .vv3-btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ==================================================================
 * REVISION 3 — Kevin's final corrections.
 * ================================================================== */

/* ---- 1. Newsletter strip: Figma's 85px on desktop -----------------
   Height came from padding, not from the text or icon, so only the
   padding is reduced. min-height (not height) so a longer sentence can
   still grow instead of clipping. */
.valve-v3.vv3-newsletter-bar {
	min-height: 85px;
	height: auto;
	padding: 13px 0;
	align-items: center;
}

/* ---- 2. "SIGN UP TODAY" on one line ------------------------------ */
#top.valve-v3-page .vv3-newsletter-bar .vv3-btn {
	white-space: nowrap;
	height: 42px;
	min-height: 42px;
	line-height: 1;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	flex: 0 0 auto;
}

@media only screen and (min-width: 768px) {
	#top.valve-v3-page .vv3-newsletter-bar .vv3-btn {
		min-width: 214px;
	}
}

/* ---- 3. Banner curve: one shape, one edge ------------------------
   The mosaic PNG has Figma's light-green curve baked into the raster.
   A separate dark-green curve on top could never align with it
   pixel-for-pixel, which is the light parallel seam. The artwork layer
   is now masked with the exact Figma ellipse instead, so the curve is
   the mask boundary — a single edge that cannot separate. The ellipse
   is enlarged ~0.6% so it over-covers the baked curve rather than
   leaving an antialiased gap. */
/* Applied only where masking is actually supported. Safari needs the
   -webkit- properties, and if neither is supported the mask silently
   does nothing — so the original curve layer must stay visible rather
   than leaving the raw artwork with no dark-green panel at all. */
@supports (-webkit-mask-image: url("#m")) or (mask-image: url("#m")) {
	#top.valve-v3-page .vv3-banner-art {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1443' height='341' viewBox='0 0 1443 341' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='c'%3E%3Crect width='1443' height='341' fill='%23ffffff'/%3E%3Cellipse cx='757.91' cy='212.95' rx='509' ry='390' transform='rotate(-42.7983 757.91 212.95)' fill='%23000000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1443' height='341' fill='%23ffffff' mask='url(%23c)'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1443' height='341' viewBox='0 0 1443 341' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='c'%3E%3Crect width='1443' height='341' fill='%23ffffff'/%3E%3Cellipse cx='757.91' cy='212.95' rx='509' ry='390' transform='rotate(-42.7983 757.91 212.95)' fill='%23000000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1443' height='341' fill='%23ffffff' mask='url(%23c)'/%3E%3C/svg%3E");
		-webkit-mask-size: 100% 100%;
		mask-mode: alpha;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}

	#top.valve-v3-page .vv3-banner-curve {
		display: none !important;
	}
}


/* The separate curve layer is what created the double edge. */

/* ---- 4. Expert portraits: exactly one ring -----------------------
   The wrappers and the image were each drawing a circle, at slightly
   different sizes — the doubled outline and white crescent. Every
   wrapper is now stripped bare and only the <img> draws the ring. */
#top.valve-v3-page .vv3-expert .avia-image-container,
#top.valve-v3-page .vv3-expert .avia-image-container-inner,
#top.valve-v3-page .vv3-expert .avia-image-overlay-wrap,
#top.valve-v3-page .vv3-expert a.avia_image {
	width: 121px;
	height: 121px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0;
	background: none !important;
	overflow: visible !important;
	display: block;
	line-height: 0;
}

#top.valve-v3-page .vv3-expert img.avia_image {
	box-sizing: border-box;
	display: block;
	width: 121px !important;
	height: 121px !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	margin: 0 !important;
	border: 3px solid #296f09 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	object-fit: cover;
	object-position: center;
	background: #fff;
}

/* ---- mobile ------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	/* The stacked band treatment supplies its own curve. */
	#top.valve-v3-page .vv3-banner-art {
		-webkit-mask-image: none;
		mask-image: none;
	}

	#top.valve-v3-page .vv3-banner-curve {
		display: block !important;
	}

	.valve-v3.vv3-newsletter-bar {
		min-height: 0;
		padding: 8px 0;
		gap: 8px;
	}

	.valve-v3 .vv3-newsletter-icon {
		width: 40px;
		height: 40px;
	}

	.valve-v3 .vv3-newsletter-text {
		font-size: 14px;
		line-height: 1.3;
	}

	#top.valve-v3-page .vv3-newsletter-bar .vv3-btn {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		height: 38px;
		min-height: 38px;
	}
}

/* Enfold gives every section a 100px min-height, which kept the green
   band at 100px even though the bar inside it is 85px. */
#top.valve-v3-page .vv3-section-newsletter,
#top.valve-v3-page .vv3-section-newsletter .container,
#top.valve-v3-page .vv3-section-newsletter .content {
	min-height: 0 !important;
}

/* ==================================================================
 * REVISION 4 — filter controls + mobile newsletter button.
 *
 * Both defects had the same cause: Enfold styles form controls through
 * #top-prefixed selectors, which outrank plain class rules. The selects
 * were already given #top-level rules; the search input and the Gravity
 * Forms submit button were not, so Enfold's defaults still applied.
 * ================================================================== */

/* ---- 1. One coherent surface per filter control ------------------ */

#top.valve-v3-page .vv3-filters .vv3-field {
	display: flex;
	align-items: stretch;
	gap: 12px;
	background: #f5f9fd;
	border: 1px solid #dfe7f0;
	border-radius: 16px;
	min-height: 72px;
	padding: 10px 22px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The real control: no surface of its own, fills the field. */
#top.valve-v3-page .vv3-filters .vv3-field input[type="search"],
#top.valve-v3-page .vv3-filters .vv3-field input[type="text"],
#top.valve-v3-page .vv3-filters .vv3-field select {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	align-self: stretch;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.2;
	color: #0a4d21;
	cursor: pointer;
}

#top.valve-v3-page .vv3-filters .vv3-field input[type="search"] {
	cursor: text;
}

/* Remove WebKit's own search chrome (the inner rectangle and clear X). */
#top.valve-v3-page .vv3-filters input[type="search"]::-webkit-search-decoration,
#top.valve-v3-page .vv3-filters input[type="search"]::-webkit-search-cancel-button,
#top.valve-v3-page .vv3-filters input[type="search"]::-webkit-search-results-button,
#top.valve-v3-page .vv3-filters input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

#top.valve-v3-page .vv3-filters .vv3-field select::-ms-expand {
	display: none;
}

#top.valve-v3-page .vv3-filters .vv3-field input[type="search"]::placeholder {
	color: #0a4d21;
	opacity: 0.75;
}

/* Icon and caret stay optically centred regardless of field height. */
#top.valve-v3-page .vv3-filters .vv3-search-btn,
#top.valve-v3-page .vv3-filters .vv3-caret {
	align-self: center;
	flex: 0 0 auto;
	margin-left: 0;
}

#top.valve-v3-page .vv3-filters .vv3-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #0a4d21;
	cursor: pointer;
	line-height: 0;
}

/* ---- hover / keyboard focus on the whole control ----------------- */

#top.valve-v3-page .vv3-filters .vv3-field:hover {
	border-color: #b6cfe6;
}

#top.valve-v3-page .vv3-filters .vv3-field:focus-within {
	border-color: #2f7f0b;
	box-shadow: 0 0 0 3px rgba(47, 127, 11, 0.22);
}

/* The field itself shows the ring, so the inner control must not draw a
   second one on top of it. */
#top.valve-v3-page .vv3-filters .vv3-field input:focus,
#top.valve-v3-page .vv3-filters .vv3-field input:focus-visible,
#top.valve-v3-page .vv3-filters .vv3-field select:focus,
#top.valve-v3-page .vv3-filters .vv3-field select:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

/* The icon button keeps its own ring — it is a separate control. */
#top.valve-v3-page .vv3-filters .vv3-search-btn:focus-visible {
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: #2f7f0b !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

/* ---- 2. "Stay in the Know" submit button ------------------------- */

/* Desktop: green button inside the white field. Enfold was repainting it
   with the theme primary, so it is pinned here at #top level. */
#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button,
#top.valve-v3-page .vv3-stay-form input[type="submit"] {
	background: #2f7f0b !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 11px !important;
	font-family: "Karla", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	height: 42px;
	min-height: 42px;
	line-height: 1;
	padding: 0 24px;
	width: auto;
	box-sizing: border-box;
	cursor: pointer;
}

#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button:hover,
#top.valve-v3-page .vv3-stay-form input[type="submit"]:hover {
	background: #25650a !important;
}

#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button:focus-visible,
#top.valve-v3-page .vv3-stay-form input[type="submit"]:focus-visible {
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: #ffffff !important;
	outline-offset: 3px !important;
}

@media only screen and (max-width: 767px) {
	/* On mobile the form sits directly on the green panel, so a green
	   button was invisible against it. White reads clearly as a button
	   and clears the 44px touch target. */
	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button,
	#top.valve-v3-page .vv3-stay-form input[type="submit"] {
		background: #ffffff !important;
		color: #0a4d21 !important;
		font-weight: 700;
		width: 100%;
		height: 46px;
		min-height: 46px;
		padding: 0 20px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	}

	#top.valve-v3-page .vv3-stay-form .gform_wrapper .gform_button:hover,
	#top.valve-v3-page .vv3-stay-form input[type="submit"]:hover {
		background: #eef6ea !important;
		color: #0a4d21 !important;
	}

	/* Filter controls: same system, tighter. */
	#top.valve-v3-page .vv3-filters .vv3-field {
		min-height: 56px;
		padding: 8px 18px;
		gap: 10px;
	}

	#top.valve-v3-page .vv3-filters .vv3-field input[type="search"],
	#top.valve-v3-page .vv3-filters .vv3-field select {
		font-size: 16px;
	}
}

/* ==================================================================
 * REVISION 5 — hero light-green strip + All Resources card trim.
 * ================================================================== */

/* ---- Banner: one layer now owns the curve ------------------------
   The pale strip came from two curves scaling differently: the CSS mask
   stretched with the banner box (mask-size:100% 100%) while the raster
   scaled with object-fit:cover inside a 67.3% box. On wide screens they
   drifted apart and the artwork's own baked light-green curve slid out
   from under the mask.

   The artwork now carries the dark panel itself — its light-green shape
   was replaced with #0a4d21 along the exact Figma ellipse — so a single
   layer defines the curve and nothing can drift out of alignment. */
#top.valve-v3-page .vv3-banner-art {
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

#top.valve-v3-page .vv3-banner-curve {
	display: none !important;
}

/* ---- All Resources cards ----------------------------------------
   Date and excerpt are switched off on the shortcode, so the card is
   image + terms + title. Tighten the body so nothing leaves a gap. */
#top.valve-v3-page .vv3-resources .vv3-card .vv3-card-body {
	gap: 10px;
}

#top.valve-v3-page .vv3-resources .vv3-card .vv3-card-meta {
	margin-bottom: 0;
}

#top.valve-v3-page .vv3-resources .vv3-card .vv3-card-title {
	margin-bottom: 0;
}

/* An orphaned separator dot can never render on its own. */
#top.valve-v3-page .vv3-card-meta .vv3-dot:first-child,
#top.valve-v3-page .vv3-card-meta .vv3-dot:last-child {
	display: none;
}

@media only screen and (max-width: 767px) {
	/* The stacked mobile treatment keeps its own arc. */
	#top.valve-v3-page .vv3-banner-curve {
		display: block !important;
	}

	#top.valve-v3-page .vv3-resources .vv3-card .vv3-card-body {
		gap: 8px;
	}
}