:root {
	--header-h: 104px;
	--header-h-sm: 76px;
	--menu-gap: 36px
}

.site-header {
	position: fixed;
	inset: 0 0 auto;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: var(--z-header);
	background: transparent 0 0 no-repeat padding-box;
	border-bottom: 1px solid #ffffff26;
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px)
}

.site-header.is-stuck {
	background: #14151599;
}

body.is-nav-open {
	overflow: hidden
}

.site-header .header-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
	transition: all .3s var(--ease)
}

.site-header.is-scrolled .header-inner {
	min-height: calc(var(--header-h) - 1.5rem)
}

.site-header .site-brand {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none
}

.site-header .site-brand:focus-visible,
.site-header .site-brand:hover {
	text-decoration: none
}

.site-header .site-brand img {
	width: auto;
	height: 62px;
	transition: all .3s var(--ease)
}

.site-header.is-scrolled .header-inner .site-brand img {
	height: 50px
}

.site-header .site-brand-text {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-white)
}

.site-header .main-nav {
	display: flex;
	align-self: stretch;
	align-items: stretch
}

.site-header .nav-menu {
	display: flex;
	align-items: stretch;
	gap: var(--menu-gap);
	margin: 0;
	padding: 0;
	list-style: none
}

.site-header .nav-item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0
}

.site-header .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 2.14;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-white);
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s var(--ease)
}

.site-header .nav-item.current-menu-ancestor>.nav-link,
.site-header .nav-item.current-menu-item>.nav-link,
.site-header .nav-item.is-open>.nav-link,
.site-header .nav-link:focus-visible,
.site-header .nav-link:hover {
	color: var(--color-green);
	text-decoration: none
}

.site-header .nav-caret-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 7px;
	margin: -7px -7px -7px 0;
	background: 0 0;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	transition: color .2s var(--ease)
}

.site-header .nav-caret-toggle:focus-visible,
.site-header .nav-caret-toggle:hover,
.site-header .nav-item.current-menu-ancestor .nav-caret-toggle,
.site-header .nav-item.current-menu-item .nav-caret-toggle,
.site-header .nav-item.is-open .nav-caret-toggle,
.site-header .nav-link:focus-visible+.nav-caret-toggle,
.site-header .nav-link:hover+.nav-caret-toggle {
	color: var(--color-green)
}

.site-header .nav-caret {
	display: block;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	transition: transform .25s var(--ease)
}

.site-header .nav-item.is-open .nav-caret {
	transform: rotate(180deg)
}

.site-header .header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var(--color-white);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-white);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)
}

.site-header .header-cta:focus-visible,
.site-header .header-cta:hover {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-ink);
	text-decoration: none
}

.site-header .main-nav .header-cta {
	display: none
}

.site-header .nav-dropdown {
	--dropdown-pad: 20px;
	--dropdown-gap: 0;
	position: absolute;
	top: 100%;
	left: calc(var(--dropdown-pad) * -1);
	z-index: 1;
	width: 340px;
	max-width: calc(100vw - var(--gutter) * 2);
	margin: var(--dropdown-gap) 0 0;
	padding: 0;
	list-style: none;
	background: var(--color-white);
	box-shadow: 0 15px 36px #00000012;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease)
}

.site-header .nav-item.is-open>.nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.site-header .nav-item.has-dropdown::after {
	content: '';
	position: absolute;
	top: calc(100% - 6px);
	left: 50%;
	width: 18px;
	height: 7px;
	margin: -1px 0 0 -9px;
	background: var(--color-white);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	opacity: 0;
	visibility: hidden;
	transition: all .2s var(--ease)
}

.site-header .nav-item.has-dropdown.is-open::after {
	opacity: 1;
	visibility: visible
}

.site-header .nav-subitem+.nav-subitem {
	border-top: 1px solid var(--color-grey-300)
}

.site-header .nav-sublink {
	display: block;
	padding: var(--dropdown-pad, 20px) 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease);
	letter-spacing: -.48px
}

.site-header .nav-sublink:focus-visible,
.site-header .nav-sublink:hover {
	background: var(--color-sand)
}

.site-header .nav-sublink.is-current {
	background: var(--color-green);
	color: var(--color-ink);
	outline: 0
}

.site-header .nav-item.has-dropdown:has(ul>li:first-child .nav-sublink.is-current, ul>li:first-child .nav-sublink.is-current:hover)::after {
	background: var(--color-green)
}

.site-header .nav-item.has-dropdown:has(ul>li:first-child .nav-sublink:hover)::after {
	background: var(--color-sand)
}

.site-header .nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: 0 0;
	border: 0;
	cursor: pointer
}

.site-header .nav-toggle-bars {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-white);
	transition: background-color .2s var(--ease)
}

.site-header .nav-toggle-bars::after,
.site-header .nav-toggle-bars::before {
	content: '';
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--color-white);
	transition: transform .25s var(--ease)
}

.site-header .nav-toggle-bars::before {
	top: -7px
}

.site-header .nav-toggle-bars::after {
	top: 7px
}

body.is-nav-open .site-header .nav-toggle-bars {
	background: #ffffff00
}

body.is-nav-open .site-header .nav-toggle-bars::before {
	transform: translateY(7px) rotate(45deg)
}

body.is-nav-open .site-header .nav-toggle-bars::after {
	transform: translateY(-7px) rotate(-45deg)
}

.site-header~.nav-overlay {
	display: none
}

.breadcrumb-wrapper {
	position: fixed;
	inset-inline: 0;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h));
	z-index: calc(var(--z-header) - 2);
	border-bottom: 1px solid #ffffff26;
	background: 0 0;
	transition: all .3s var(--ease)
}

.site-header.is-stuck~.breadcrumb-wrapper {
	background: #14151599;
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px)
}

.site-header.is-scrolled~.breadcrumb-wrapper {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) - 1.5rem)
}

.breadcrumb-wrapper .enlign-container {
	padding-block: clamp(15px, calc(.4464vw + 8.5714px), 20px)
}

.site-header.is-scrolled~.breadcrumb-wrapper .enlign-container {
	padding-block: 15px
}

.breadcrumb-wrapper .breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none
}

.breadcrumb-wrapper .breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 10px
}

.breadcrumb-wrapper a {
	font-weight: 500;
	color: var(--color-white);
	text-decoration: none;
	transition: color .3s var(--ease)
}

.breadcrumb-wrapper a:focus-visible,
.breadcrumb-wrapper a:hover {
	color: var(--color-green)
}

.breadcrumb-wrapper .breadcrumb-separator {
	color: var(--color-white);
	font-weight: 500
}

.breadcrumb-wrapper .breadcrumb-item.is-current [aria-current] {
	color: var(--color-white)
}

.site-footer {
	background: var(--color-white)
}

.logo-strip:not(.logo-slider-block) {
	background: var(--color-white)
}

.logo-strip.logo-slider-block .enlign-container {
	padding-inline: 0;
	padding-block: 25px
}

.logo-strip:not(.logo-slider-block) .enlign-container {
	padding-block: 58px
}

.logo-strip .logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #00000000 0, var(--color-black) 60px, var(--color-black) calc(100% - 60px), #00000000 100%);
	mask-image: linear-gradient(90deg, #00000000 0, var(--color-black) 60px, var(--color-black) calc(100% - 60px), #00000000 100%)
}

.logo-strip .logo-item {
	flex: 0 0 auto
}

.logo-strip .logo-item img {
	max-width: 200px;
	width: 100%;
	max-height: 50px;
	object-fit: contain;
	margin: 0 auto
}

.logo-strip .logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 64px;
	padding: 8px;
	border: 1px dashed var(--color-grey-300);
	background: var(--color-grey-100);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;
	color: var(--color-grey-650)
}

.site-footer .footer-main {
	background: var(--color-sand);
	border-top: 1px solid var(--color-black);
	border-bottom: 1px solid var(--color-black)
}

.site-footer .footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

.site-footer .footer-col {
	padding: 74px 40px 78px 0
}

.site-footer .footer-col:last-child {
	padding-right: 0
}

.site-footer .footer-col+.footer-col {
	padding-left: 40px;
	border-left: 1px solid var(--color-black)
}

.site-footer .footer-brand {
	display: block;
	line-height: 0;
	text-decoration: none
}

.site-footer .footer-brand:focus-visible,
.site-footer .footer-brand:hover {
	text-decoration: none
}

.site-footer .footer-brand img {
	width: auto;
	height: 104px
}

.site-footer .footer-blurb {
	max-width: 37ch;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-grey-900)
}

.site-footer .footer-label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-teal)
}

.site-footer .footer-explore {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px
}

.site-footer .footer-menu {
	columns: 2;
	column-gap: 24px;
	margin: 0 0 -26px;
	padding: 0;
	list-style: none
}

.site-footer .footer-menu li {
	margin: 0 0 26px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid
}

.site-footer .footer-menu a {
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	transition: color .2s var(--ease)
}

.site-footer .footer-menu .current-menu-item>a,
.site-footer .footer-menu a:focus-visible,
.site-footer .footer-menu a:hover {
	color: var(--color-teal);
	text-decoration: none
}

.site-footer .footer-connect {
	display: grid;
	align-content: start;
	gap: 56px
}

.site-footer .footer-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start
}

.site-footer .footer-row-body>:first-child {
	margin-top: 0
}

.site-footer .footer-address,
.site-footer .footer-phone {
	display: block;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-grey-900);
	font-weight: 300
}

.site-footer .footer-phone {
	text-decoration: none;
	transition: color .2s var(--ease)
}

.site-footer .footer-phone:focus-visible,
.site-footer .footer-phone:hover {
	color: var(--color-green);
	text-decoration: none
}

.site-footer .footer-social {
	display: flex;
	gap: 12px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none
}

.site-footer .footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--color-ink);
	text-decoration: none;
	transition: color .2s var(--ease)
}

.site-footer .footer-social svg {
	display: block;
	width: 100%;
	height: 100%
}

.site-footer .footer-social a:focus-visible,
.site-footer .footer-social a:hover {
	color: var(--color-green)
}

.site-footer .footer-email {
	font-size: 18px;
	line-height: 1.2;
	color: var(--color-grey-900);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color .2s var(--ease);
	overflow-wrap: break-word;
	font-weight: 300
}

.site-footer .footer-email:focus-visible,
.site-footer .footer-email:hover {
	color: var(--color-green)
}

.site-footer .footer-bar {
	background: var(--color-gold)
}

.site-footer .footer-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding-block: 50px
}

.site-footer .footer-copy {
	margin: 0
}

.site-footer .footer-copy,
.site-footer .footer-legal a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.21;
	letter-spacing: 1.82px;
	text-transform: uppercase;
	color: var(--color-white)
}

.site-footer .footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin: 0;
	padding: 0;
	list-style: none
}

.site-footer .footer-legal a {
	text-decoration: none;
	transition: opacity .2s var(--ease)
}

.site-footer .footer-legal a:focus-visible,
.site-footer .footer-legal a:hover {
	opacity: .75
}

.hero-banner {
	padding-block: 280px 73px;
	min-height: 900px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	position: relative
}

.hero-banner:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 270px;
	background: transparent linear-gradient(180deg, transparent 0, var(--color-black) 100%) 0 0 no-repeat padding-box;
	left: 0;
	bottom: 0;
	z-index: 0
}

.hero-banner .hero-banner-top {
	margin-bottom: 40px
}

.where-to-begin {
	padding-block: 60px 88px
}

.where-to-begin .where-to-begin-top-title {
	max-width: 545px;
	width: 100%
}

.where-to-begin .where-to-begin-top-content {
	max-width: 730px;
	width: 100%
}

.where-to-begin .where-to-begin-grid .item:first-child {
	max-width: 72.54%;
	width: 100%
}

.where-to-begin .where-to-begin-grid .item:nth-child(2) {
	max-width: 27.46%;
	width: 100%
}

.where-to-begin .where-to-begin-grid .item:last-child,
.where-to-begin .where-to-begin-grid .item:nth-child(3) {
	max-width: 34.5%;
	width: 100%
}

.where-to-begin .where-to-begin-grid .item:nth-child(4) {
	max-width: 31%;
	width: 100%
}

.where-to-begin .where-to-begin-grid .item:last-child,
.where-to-begin .where-to-begin-grid .item:nth-child(2),
.where-to-begin .where-to-begin-grid .item:nth-child(3) {
	padding-block: 40px 26px;
	padding-inline: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px
}

.where-to-begin .where-to-begin-grid .item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center
}

.where-to-begin .where-to-begin-grid .item:first-child img {
	max-height: 390px;
	object-position: center 13%
}

.where-to-begin .where-to-begin-grid .item:nth-child(4) img {
	object-position: 40% center
}

.where-to-begin .where-to-begin-grid .item:nth-child(4):before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--color-blue);
	opacity: .24
}

.contact-wrap {
	padding-block: clamp(20px, 2.5vw, 38px);
	padding-inline: clamp(20px, 2.5vw, 38px)
}

.contact-wrap .contact-inner-left {
	max-width: 45.2%;
	width: 100%
}

.contact-wrap .contact-inner-right {
	max-width: 54.8%;
	width: 100%;
	padding-block: clamp(40px, 2.5vw + 24px, 64px) clamp(32px, 1.88vw + 20px, 50px);
	padding-inline: clamp(24px, 1.67vw + 13px, 40px);
	background: 0 0;
	border: 1px solid #fffFFF2B;
	backdrop-filter: blur(22px) brightness(.8);
	-webkit-backdrop-filter: blur(22px) brightness(.8)
}

.contact-section .contact-info a:hover {
	color: var(--color-green-hover);
}

.methodology {
	overflow-x: hidden;
}

.methodology-bottom {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0
}

.methodology-bottom:before {
	position: absolute;
	content: '';
	width: 100vw;
	height: 1px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #00000024
}

.methodology-bottom .method-item {
	padding: clamp(28px, 2.08vw, 40px) clamp(32px, 2.76vw, 53px) clamp(32px, 2.76vw, 53px);
	border-right: 1px solid #00000024
}

.methodology-bottom .method-item:first-child {
	padding-left: 0
}

.methodology-bottom .method-item:last-child {
	padding-right: 0;
	border-right: 0
}

.statics-bottom {
	padding-block: 15px 24px;
	padding-inline: 40px;
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	border: 1px solid #525252
}

.testimonial-outer {
	overflow: hidden;
	border-bottom: 1px solid #00000024
}

.testimonials {
	--peek: clamp(70px, calc(-10.62px + 8.9vw), 100px);
	padding: var(--peek);
	position: relative
}

.testimonials:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: clamp(280px, calc(182.15px + 12vw), 320px);
	height: clamp(280px, calc(182.15px + 12vw), 320px);
	background: var(--color-blue);
	z-index: 0
}

.testimonials:after {
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	width: clamp(280px, calc(182.15px + 12vw), 320px);
	height: clamp(280px, calc(182.15px + 12vw), 320px);
	background: var(--color-green);
	z-index: 0
}

.testimonials .top-border {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100dvh * 4);
	height: 1px;
	background: #00000024;
	z-index: 0
}

.testimonials .bottom-border {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100dvh * 4);
	height: 1px;
	background: #00000024;
	z-index: 0
}

.testimonials .left-border {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: calc(100dvh * 4);
	background: #00000024;
	z-index: 0
}

.testimonials .right-border {
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: calc(100dvh * 4);
	background: #00000024;
	z-index: 0
}

.testimonials .testimonial-wrap {
	position: relative;
	background: var(--color-white);
	padding-block: clamp(48px, calc(-4.31px + 6.18vw), 64px);
	padding-inline: clamp(40px, calc(-11.08px + 5.44vw), 56px);
	max-width: none;
	width: 100%;
	margin: 0;
	z-index: 9
}

.testimonials .testimonial-content .text-37 {
	font-size: clamp(20px, 1.596vw + 5.015px, 26px)
}

.testimonials .testimonial-item {
	margin-inline: 5px
}

.testimonials .testimonial-items {
	margin-inline: -10px
}

.testimonials .testimonial-wrap .testimonial-credit:not(:has(.gb-shape+p)) .gb-shape {
	display: none
}

.post-item .post-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: cover;
	transition: all .2s var(--ease)
}

.post-item {
	position: relative;
	background: var(--color-grey-300);
	text-decoration: none;
	color: var(--color-white);
	overflow: hidden;
	transition: all .2s var(--ease)
}

/* .post-item:focus-visible {
	outline-offset: -3px
} */

.post-item:after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: transparent linear-gradient(180deg, transparent 45%, #92b814E0 90%, var(--color-green) 100%) 0 0 no-repeat padding-box;
	z-index: 0;
	opacity: 0;
	transition: all .2s var(--ease)
}

.post-item:hover:after,
.post-item:focus-visible:after {
	opacity: 1
}

.post-item .post-inner-wrap {
	position: relative;
	background: transparent linear-gradient(180deg, #92b814E0 0, var(--color-green) 100%) 0 0 no-repeat padding-box;
	z-index: 1
}

.post-item .post-inner-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-grey-300);
	transition: opacity .2s var(--ease);
	pointer-events: none
}

.post-item .post-inner-wrap>* {
	position: relative;
	z-index: 1
}

.post-item:hover .post-inner-wrap::before,
.post-item:focus-visible .post-inner-wrap::before {
	opacity: 0
}

.post-item .post-item-top {
	padding: 28px 28px 0;
	transition: all .2s var(--ease)
}

.post-item .post-item-bottom {
	padding: 0 28px 28px
}

.post-item .post-category {
	background: #ffffff4f;
	color: var(--color-ink);
	padding: 10px 15px;
	display: inline-block;
	transition: all .2s var(--ease)
}

.post-item .post-excerpt {
	color: var(--color-grey-900);
	transition: all .2s var(--ease)
}

.post-item .post-title {
	margin-block: 30px 36px;
	transition: all .2s var(--ease)
}

.post-item .post-seprator {
	position: relative;
	margin: 20px 0 30px;
	color: var(--color-grey-650);
	transition: all .2s var(--ease)
}

.post-item .post-seprator:before {
	position: absolute;
	content: '';
	top: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-ink);
	transition: all .2s var(--ease)
}

.post-item .post-topic-label {
	color: var(--color-black);
	opacity: .23;
	margin-bottom: 8px;
	transition: all .2s var(--ease)
}

.post-item .post-topic {
	color: var(--color-black);
	transition: all .2s var(--ease)
}

.post-item:hover .post-category,
.post-item:hover .post-excerpt,
.post-item:hover .post-title,
.post-item:hover .post-topic,
.post-item:hover .post-topic-label,
.post-item:focus-visible .post-category,
.post-item:focus-visible .post-excerpt,
.post-item:focus-visible .post-title,
.post-item:focus-visible .post-topic,
.post-item:focus-visible .post-topic-label {
	color: var(--color-ink)
}

.post-item:hover .post-img,
.post-item:focus-visible .post-img {
	transform: scale(1.05)
}

.post-item:hover .post-seprator:before,
.post-item:focus-visible .post-seprator:before {
	width: 100%
}

.inner-banner {
	padding-block: clamp(100px, calc(76.18px + 9.57vw), 210px) clamp(50px, calc(33.57px + 5.59vw), 114px);
	min-height: clamp(400px, calc(338.82px + 18.83vw), 610px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	position: relative
}

.inner-banner:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 270px;
	background: transparent linear-gradient(180deg, transparent 0, var(--color-black) 100%) 0 0 no-repeat padding-box;
	left: 0;
	bottom: 0;
	opacity: .71;
	z-index: 0
}

.inner-banner.inner-child {
	padding-block: calc(clamp(150px, calc(7.8571vw + 136.8571px), 238px) + var(--breadcrumb-height, 0px)) 50px;
	min-height: clamp(400px, calc(24.0964vw + 153.012px), 500px)
}

.inner-banner-wrap {
	position: relative;
	z-index: 1
}

.inner-banner .inner-title {
	margin: 0;
	font-size: clamp(40px, calc(2.5893vw + 31.7143px), 54px);
	line-height: 1.2
}

.stage-grid .stage-grid-item {
	padding-block: clamp(30px, calc(21.47px + 1.18vw), 40px);
	padding-inline: clamp(20px, calc(4.71px + 2.45vw), 40px);
	border: 1px solid #ebebeb;
	margin-right: -1px;
	margin-bottom: -1px
}

.stage-grid .stage-grid-item:not(.no-hover) {
	background: var(--color-white);
	transition: all .3s var(--ease)
}

.stage-grid .stage-grid-item:not(.no-hover):hover,
.stage-grid .stage-grid-item:not(.no-hover):focus-within {
	background: var(--color-green)
}

.stage-grid .stage-grid-item .square-list,
.stage-grid .stage-grid-item .stage-content .eyebrow-text,
.stage-grid .stage-grid-item .stage-content .stage-grid-text,
.stage-grid .stage-grid-item .stage-content .stage-grid-title,
.stage-grid .stage-grid-item .stage-grid-link {
	transition: all .3s var(--ease)
}

.stage-grid .stage-grid-item:not(.no-hover):hover .square-list,
.stage-grid .stage-grid-item:not(.no-hover):hover .stage-content .eyebrow-text,
.stage-grid .stage-grid-item:not(.no-hover):hover .stage-content .stage-grid-text,
.stage-grid .stage-grid-item:not(.no-hover):hover .stage-content .stage-grid-title,
.stage-grid .stage-grid-item:not(.no-hover):hover .stage-grid-link,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .square-list,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .stage-content .eyebrow-text,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .stage-content .stage-grid-text,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .stage-content .stage-grid-title,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .stage-grid-link {
	color: var(--color-ink)
}

.stage-grid-link:focus-visible {
	outline: 2px solid var(--color-ink);
}

.stage-grid .square-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 20px
}

.stage-grid .square-list ul li {
	position: relative;
	margin-bottom: 14px
}

.stage-grid .square-list ul li:last-child {
	margin: 0
}

.stage-grid .square-list ul li:before {
	position: absolute;
	top: 6px;
	left: -20px;
	content: '';
	background: currentColor;
	width: 8px;
	height: 8px
}

.stage-grid .stage-grid-item .square-list {
	padding-top: 20px;
	border-top: 1px solid var(--color-grey-500);
	transition: all .3s var(--ease)
}

.stage-grid .stage-grid-item:not(.no-hover):hover .square-list,
.stage-grid .stage-grid-item:not(.no-hover):focus-within .square-list {
	border-color: var(--color-ink)
}

/* Selling Industries — hide Visit Now until an industries page exists */
.page-id-532 .gb-element-78a25c29 .stage-grid-link {
	display: none
}

/* Brand-green GB pills still stored as white in About / Our Approach.
   Same 9/19 ink-on-#92B814 call as the rest of the site. */
a.gb-text.gb-text-29b7b636,
a.gb-text.gb-text-29b7b636:is(:hover, :focus, :focus-visible),
a.gb-text.gb-text-4a9764c8,
a.gb-text.gb-text-4a9764c8:is(:hover, :focus, :focus-visible) {
	color: var(--color-ink)
}

.testimonials-block {
	--container: 1146px;
	padding-block: 66px;
	background: var(--color-teal) url(/wp-content/uploads/2026/09/testimonial-bg.webp) no-repeat center center/cover;
	background-blend-mode: multiply
}

.testimonials-block .quote {
	position: absolute;
	right: 20px;
	top: -10px;
	width: clamp(60px, calc(4.7368vw + 45.1053px), 113px);
	height: auto
}

.testimonials-block .eyebrow-text {
	display: inline-block;
	margin-bottom: clamp(30px, calc(2.3214vw + 22.5714px), 56px)
}

.testimonials-block .content,
.testimonials-block .eyebrow-text,
.testimonials-block .testimonial-footer {
	color: var(--color-sand)
}

.testimonials-block .content {
	font-size: clamp(20px, 1.596vw + 5.015px, 26px)
}

.testimonials-block .content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
	max-width: 1030px;
	width: 100%
}

.testimonials-block .testimonial-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px
}

.testimonials-block .company-position-wrap {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 10px
}

.testimonials-block .company-position-wrap svg {
	align-self: center
}

.testimonials-block .testimonial-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin-top: -25px;
	position: relative;
	z-index: 99
}

.testimonials-block .testimonial-buttons .slick-arrow {
	background: 0 0;
	padding: 0;
	color: var(--color-white);
	cursor: pointer;
	line-height: 1;
	transition: all .3s var(--ease)
}

.testimonials-block .testimonial-buttons .slick-arrow:not(.slick-disabled):hover {
	color: var(--color-gold);
	cursor: pointer
}

.testimonials-block .testimonial-buttons .slick-arrow.slick-disabled {
	opacity: .5;
	pointer-events: auto;
	cursor: not-allowed
}

.faq-block {
	--container: 1146px;
	overflow-x: clip;
	background: var(--color-white)
}

.faq-block .faq-title {
	margin: 0;
	padding-block: 46px;
	font-size: clamp(34px, calc(3.72vw + 5.43px), 53px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--color-ink)
}

.faq-block .faq-item {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	border-bottom: 1px solid #11111112;
	background: 0 0;
	transition: background-color .3s var(--ease)
}

.faq-block .faq-item:first-child {
	border-top: 1px solid #11111112
}

.faq-block .faq-item[open] {
	background: var(--color-grey-100)
}

.faq-block .faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 38px;
	color: var(--color-ink);
	cursor: pointer;
	list-style: none;
	transition: color .3s var(--ease)
}

.faq-block .faq-question .title {
	transition: color .3s var(--ease)
}

.faq-block .faq-question::-webkit-details-marker {
	display: none
}

.faq-block .faq-item[open] .title,
.faq-block .faq-question:hover .title {
	color: var(--color-blue)
}

.faq-block .faq-item[open] .faq-question {
	padding-bottom: 36px
}

.faq-block .faq-icon {
	flex: 0 0 auto;
	width: 30px;
	height: auto;
	color: var(--color-grey-700);
	transition: transform .3s var(--ease), color .3s var(--ease)
}

.faq-block .faq-item[open] .faq-icon,
.faq-block .faq-question:hover .faq-icon {
	color: var(--color-blue)
}

.faq-block .faq-item[open] .faq-icon {
	transform: rotate(180deg)
}

.faq-block .faq-answer {
	padding-bottom: 56px;
	color: var(--color-ink)
}

.faq-block .faq-answer>:first-child {
	margin-top: 0
}

.faq-block .faq-answer>:last-child {
	margin-bottom: 0
}

.faq-block .faq-answer p {
	margin-block: 0 1em
}

.faq-block .faq-answer ol,
.faq-block .faq-answer ul {
	margin-block: 0 1em;
	padding-left: 1.25em
}

.faq-block .faq-answer li+li {
	margin-top: .5em
}

.faq-block .faq-answer a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 3px
}

.faq-block .faq-answer a:hover {
	text-decoration: none
}

.comparison-table-wrap {
	--cell-pad-y: clamp(20px, 2.08vw, 30px);
	--cell-pad-x: clamp(16px, 2.08vw, 30px);
	--head-pad-y: clamp(16px, 1.67vw, 24px);
	--head-pad-x: clamp(16px, 2.08vw, 30px);
	--check-w: clamp(13px, 1.19vw, 17px);
	--check-h: calc(var(--check-w) * 12 / 17);
	--check-gap: clamp(8px, 0.76vw, 11px);
	--check-gutter: calc(var(--check-w) + var(--check-gap));
	--copy-lh: 1.45;
	--copy-top: var(--cell-pad-y);
	--rule: var(--color-grey-500);
	--tint-green: #E9F1D0;
	margin-inline: clamp(20px, 3.2vw, 56px)
}

.comparison-table-wrap .wp-block-table {
	margin: 0;
	overflow: visible
}

.comparison-table-wrap table {
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	text-align: left
}

.comparison-table-wrap td,
.comparison-table-wrap th {
	padding: 0;
	border: 0;
	color: var(--color-ink);
	overflow-wrap: break-word
}

.comparison-table-wrap thead {
	border-bottom: 0
}

.comparison-table-wrap thead th {
	padding: var(--head-pad-y) var(--head-pad-x);
	vertical-align: bottom;
	border-bottom: 1px solid var(--rule);
	font-size: clamp(24px, 1.6vw + 6.4px, 28px);
	line-height: 1.21;
	letter-spacing: -0.56px;
	font-weight: 500
}

.comparison-table-wrap thead th:first-child {
	width: 25%
}

.comparison-table-wrap thead th:nth-child(2) {
	width: 34%
}

.comparison-table-wrap thead th:nth-child(3) {
	width: 41%;
	background: var(--color-green);
	color: var(--color-ink);
	border-bottom: 0
}

.comparison-table-wrap tbody td {
	padding: var(--cell-pad-y) var(--cell-pad-x);
	vertical-align: top;
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
	font-weight: 300;
	line-height: var(--copy-lh)
}

.comparison-table-wrap tbody td:first-child {
	font-size: clamp(18px, 1.4vw, 20px);
	font-weight: 500;
	line-height: 1.21;
	letter-spacing: normal
}

.comparison-table-wrap tbody td:nth-child(3) {
	padding-left: calc(var(--cell-pad-x) + var(--check-gutter));
	background-color: var(--tint-green);
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi45NzEiIGhlaWdodD0iMTIuMDIxIiB2aWV3Qm94PSIwIDAgMTYuOTcxIDEyLjAyMSI+PHBhdGggZD0iTTYuMzY0IDkuMTkyIDE1LjU1NiAwbDEuNDE0IDEuNDE0TDYuMzY0IDEyLjAyMSAwIDUuNjU2bDEuNDE0LTEuNDE0WiIgZmlsbD0iIzE0MTUxNSIvPjwvc3ZnPg==);
	background-repeat: no-repeat;
	background-size: var(--check-w) var(--check-h);
	background-position: left var(--cell-pad-x) top calc(var(--copy-top) + (1em * var(--copy-lh) - var(--check-h))/ 2)
}

.stage-wrap .stage-inner {
	position: relative;
	overflow: visible
}

.stage-wrap .stage-inner:before {
	position: absolute;
	content: '';
	top: 50%;
	left: 95px;
	transform: translateY(-50%);
	height: 100vh;
	width: 2px;
	background: #212121;
	opacity: .28;
	z-index: 0
}

.stage-wrap .stage-count {
	position: relative;
	z-index: 1
}

.stages-wrap {
	--stage-stick-top: 80px;
	--stage-stick-gap: 40px;
	overflow: visible
}

.stages-wrap>.stage-wrap {
	position: sticky;
	top: var(--stage-band-top, 0)
}

.stages-wrap>.stage-wrap:not(:first-child) {
	box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .22)
}

.whats-enlign-outer {
	overflow: hidden;
	border-bottom: 1px solid #00000024
}

.whats-enlign {
	padding-block: clamp(50px, calc(8.433735vw - 36.445783px), 85px);
	position: relative
}

.whats-enlign svg {
	width: 100%;
	height: auto
}

.whats-enlign:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: clamp(150px, calc(25.060241vw - 106.86747px), 254px);
	height: clamp(150px, calc(25.060241vw - 106.86747px), 254px);
	background: var(--color-blue);
	z-index: 0
}

.whats-enlign:after {
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	width: clamp(150px, calc(25.060241vw - 106.86747px), 254px);
	height: clamp(150px, calc(25.060241vw - 106.86747px), 254px);
	background: var(--color-green);
	z-index: 0
}

.whats-enlign .top-border {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100dvh * 4);
	height: 1px;
	background: #00000024;
	z-index: 0
}

.whats-enlign .bottom-border {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100dvh * 4);
	height: 1px;
	background: #00000024;
	z-index: 0
}

.whats-enlign .left-border {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: calc(100dvh * 4);
	background: #00000024;
	z-index: 0
}

.whats-enlign .right-border {
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: calc(100dvh * 4);
	background: #00000024;
	z-index: 0
}

.whats-enlign .whats-enlign-wrap {
	position: relative;
	background: var(--color-white);
	padding-block: clamp(50px, calc(5.301205vw - 4.337349px), 72px) clamp(50px, calc(12.048193vw - 73.493976px), 100px);
	padding-inline: 50px;
	max-width: calc(1310px - (20px * 2));
	margin: 0 auto;
	z-index: 9
}

.our-approach-wrap,
.our-approach-wrap *,
.partner-wrap,
.partner-wrap *,
.team-wrap,
.team-wrap * {
	position: relative
}

.our-approach-wrap,
.partner-wrap,
.team-wrap {
	overflow: hidden
}

.our-approach-wrap:after,
.our-approach-wrap:before,
.partner-wrap:after,
.partner-wrap:before,
.team-wrap:after,
.team-wrap:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	transition: all .3s var(--ease)
}

.our-approach-wrap:before {
	background: url(/wp-content/uploads/2026/09/ENLIGN-Business-Advisors-–-Trusted-MA-Guidance-Since-2003.webp) center/cover no-repeat
}

.our-approach-wrap:after {
	background: radial-gradient(var(--color-white) 0, #00000046 0, var(--color-black) 100%);
	opacity: .8
}

.our-approach-wrap:hover:before {
	transform: scale(1.015)
}

.our-approach-wrap:hover:after {
	opacity: 1
}

.team-wrap:before {
	background: url(/wp-content/uploads/2026/09/ENLIGN-–-Confidential-Business-Consultation-Meeting.webp) center/cover no-repeat
}

.team-wrap:after {
	--dark-overlay: var(--color-blue);
	background: linear-gradient(258deg, #007AA8DD 0, var(--dark-overlay) 100%);
	opacity: .95
}

.team-wrap:hover:before {
	transform: scale(1.015)
}

.team-wrap:hover:after {
	--dark-overlay: #006C95
}

.partner-wrap:before {
	background: url(/wp-content/uploads/2026/09/ENLIGN-—-Professional-Partner-Referrals.webp) center/cover no-repeat;
	transform: scale(1.015)
}

.partner-wrap:after {
	background: var(--color-ink);
	opacity: 0
}

.partner-wrap:hover:after {
	opacity: .08
}

.partner-wrap:hover:before {
	transform: scale(1)
}

.our-approach-wrap>*,
.partner-wrap>*,
.team-wrap>* {
	z-index: 1
}

.perspective-contact .contact-wrap .contact-inner-right {
	padding-block: 44px;
	padding-inline: 40px
}

.career-points .wp-block-separator {
	border-top-width: 1px
}

.approach-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	gap: 0;
	backdrop-filter: blur(22px) brightness(.8) opacity(.86);
	-webkit-backdrop-filter: blur(22px) brightness(.8) opacity(.86)
}

.approach-grid-item {
	border: 1px solid #fffFFF2B;
	margin: -1px
}

.approach-grid-item:last-child {
	grid-column: span 2/span 2;
	margin-bottom: 0
}

.team-block {
	overflow-x: clip;
	padding-block: clamp(32px, calc(1.7857vw + 18.2857px), 50px) clamp(40px, calc(3.5714vw + 12.5714px), 80px);
	background: var(--color-white)
}

.team-block .team-lead {
	display: grid;
	grid-template-columns: minmax(0, 35fr) minmax(0, 65fr)
}

.team-block .team-lead+.team-lead {
	margin-top: clamp(24px, calc(1.4286vw + 3.4286px), 40px)
}

.team-block .team-lead-media {
	position: relative;
	min-height: 100%
}

.team-block .team-lead-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%
}

.team-block .team-lead-body {
	padding: 40px clamp(20px, 6.265vw - 44.17px, 46px) clamp(40px, 2.41vw + 15.42px, 50px)
}

.team-block .team-lead-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px
}

.team-block .team-lead-title {
	flex: 1 1 320px;
	min-width: 0
}

.team-block .team-lead-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-white)
}

.team-block .team-lead-eyebrow .gb-shape {
	display: inline-flex;
	line-height: 0
}

.team-block .team-lead-creds {
	margin-top: 10px;
	line-height: 1.3;
	letter-spacing: -.01em
}

.team-block .team-lead-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none
}

.team-block .team-lead-badges li {
	flex: 0 0 auto;
	margin: 0;
	width: 85px;
	height: 85px;
	display: flex;
	align-items: center;
	justify-content: center
}

.team-block .team-lead-badges img {
	width: 75px;
	height: 75px;
	object-fit: contain
}

.team-block .team-lead-intro {
	max-width: 62ch;
	margin: 26px 0 0;
	color: var(--color-white)
}

.team-block .team-lead-intro>:last-child,
.team-block .team-lead-point-text>:last-child {
	margin-bottom: 0
}

.team-block .team-lead-divider {
	height: 1px;
	margin-block: 12px 38px;
	border: 0;
	background: var(--color-white);
	opacity: .3
}

.team-block .team-lead-points {
	display: grid;
	gap: 22px;
	margin: 28px 0 0 20px;
	padding: 0;
	list-style: none
}

.team-block .team-lead-point {
	position: relative;
	margin: 0;
	padding-left: 20px
}

.team-block .team-lead-point::before {
	content: '';
	position: absolute;
	top: .85em;
	left: 0;
	width: 6px;
	height: 6px;
	background: currentColor
}

.team-block .team-lead-point-title {
	line-height: 1.3
}

.team-block .team-lead-point-text {
	margin-top: 6px;
	line-height: 1.5;
	color: var(--color-white)
}

.team-block .team-title {
	margin: clamp(32px, calc(1.6071vw + 19.6429px), 50px) 0 clamp(20px, calc(.7143vw + 14.2857px), 28px);
	line-height: 1.15
}

.team-block .team-grid-wrap {
	border-top: 1px solid var(--color-grey-300)
}

.team-block .team-grid {
	--card-pad-x: 56px;
	--card-col-outer: calc((100% - 4 * var(--card-pad-x)) / 3 + var(--card-pad-x));
	display: grid;
	grid-template-columns: minmax(0, var(--card-col-outer)) minmax(0, 1fr) minmax(0, var(--card-col-outer));
	margin: 0;
	padding: 0;
	list-style: none
}

.team-block .team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 50px var(--card-pad-x);
	background: var(--color-white)
}

.team-block .team-card:nth-child(3n+1) {
	padding-left: 0
}

.team-block .team-card:nth-child(3n) {
	padding-right: 0
}

.team-block .team-card:not(:nth-child(3n)) {
	border-right: 1px solid var(--color-grey-300)
}

.team-block .team-card::after {
	content: '';
	position: absolute;
	right: -100vw;
	bottom: 0;
	left: -100vw;
	height: 1px;
	background: var(--color-grey-300);
	pointer-events: none
}

.team-block .team-card-media {
	position: relative;
	width: 100%;
	max-width: 366px;
	height: auto;
	margin-block-end: 20px;
}

.team-block .team-card-media:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	max-width: 310px;
	width: 100%;
	max-height: 72%;
	height: 100%;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMTAgMzEwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMwMC45MjIgMEgwdjEwMy4yOGgyMDYuNTM0djIwNi41MzNoMTAzLjI3OVYweiIgZmlsbD0iIzkyYjgxNCIvPjwvc3ZnPg==) 0 0/100% 100% no-repeat;
	z-index: 0;
}

.team-block .team-card-media img {
	position: relative;
	width: 100%;
	height: auto;
}

.team-block .team-card-name {
	color: var(--color-ink)
}

.team-block .team-card-role {
	margin-top: 6px;
	line-height: 1.4;
	color: var(--color-grey-500)
}

.team-block .team-card-link {
	display: inline-block;
	margin-top: auto;
	line-height: 1.4;
	color: var(--color-ink);
	text-decoration: none;
	transition: color .2s var(--ease)
}

.team-block .team-card-link:focus-visible,
.team-block .team-card-link:hover {
	color: var(--color-grey-700)
}

.team-block .team-content-separator {
	background: #212121;
	height: 1px;
	width: 48px;
	margin-block: 20px
}

.blog-listing {
	background: var(--color-white)
}

.blog-filter-bar {
	--color-ink: #424242;
	background: var(--color-grey-100)
}

.blog-filter-bar .blog-filter-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-block: 14px
}

.blog-listing .blog-search {
	position: relative;
	flex: 0 1 435px;
	min-width: 0
}

.blog-listing .blog-search-input {
	width: 100%;
	padding: 8px 34px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--color-green);
	border-radius: 0;
	background: 0 0;
	color: var(--color-ink);
	appearance: none
}

.blog-listing .blog-search-input::placeholder {
	color: var(--color-grey-650);
	opacity: 1
}

.blog-listing .blog-search-input:focus,
.blog-listing .blog-search-input:focus-visible {
	outline-offset: 1px
}

.blog-listing .blog-search-submit {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	padding: 0;
	border: 0;
	background: 0 0;
	color: var(--color-green);
	cursor: pointer;
	transition: color .2s var(--ease)
}

.blog-listing .blog-search-submit:focus-visible,
.blog-listing .blog-search-submit:hover {
	color: var(--color-teal)
}

.blog-listing .blog-search-submit svg {
	width: 18px;
	height: 18px
}

.blog-listing .blog-count {
	margin: 0;
	color: var(--color-ink)
}

.blog-listing .blog-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-left: auto
}

.blog-listing .blog-clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 4px;
	border: 0;
	background: 0 0;
	color: var(--color-grey-900);
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s var(--ease), opacity .2s var(--ease)
}

.blog-listing .blog-clear:focus-visible,
.blog-listing .blog-clear:hover {
	color: var(--color-green)
}

.blog-listing .blog-clear[disabled] {
	opacity: .4;
	pointer-events: none
}

.blog-listing .blog-clear-icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px
}

.blog-listing .blog-filter {
	position: relative;
	min-width: 164px
}

.blog-listing .blog-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 9px 15px;
	border: 1px solid var(--color-grey-300);
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
	list-style: none;
	transition: border-color .2s var(--ease), color .2s var(--ease)
}

.blog-listing .blog-filter-toggle::-webkit-details-marker {
	display: none
}

.blog-listing .blog-filter-toggle:hover {
	border-color: var(--color-green)
}

.blog-listing .blog-filter[open]>.blog-filter-toggle {
	border-color: var(--color-green)
}

.blog-listing .blog-filter-caret {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	transition: transform .25s var(--ease)
}

.blog-listing .blog-filter[open] .blog-filter-caret {
	transform: rotate(180deg)
}

.blog-listing .blog-filter-toggle span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 164px;
}

.blog-listing .blog-filter-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 3;
	min-width: 100%;
	padding-block: 8px;
	background: var(--color-white);
	box-shadow: 0 3px 17px #00000029
}

.blog-listing .blog-filter[open] .blog-filter-panel {
	top: calc(100% + 10px);
	height: auto
}

.blog-listing .blog-filter-options {
	margin: 0;
	padding: 0;
	list-style: none
}

.blog-listing .blog-filter-option {
	display: block;
	padding: 12px 20px;
	color: var(--color-ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease)
}

.blog-listing .blog-filter-option:hover {
	background: rgba(0, 0, 0, 0.03)
}

.blog-listing .blog-filter-option:has(:focus-visible) {
	background: var(--color-sand);
	color: var(--color-teal);
	outline: 2px solid var(--color-green);
	outline-offset: -2px
}

.blog-listing .blog-filter-option:has(:checked) {
	background: var(--color-green);
	color: var(--color-ink)
}

/* Never visibility:hidden here: it drops the radios from the tab order, so the
   options can't be reached by keyboard. .screen-reader-text already hides them. */
.blog-listing .blog-filter-option input[type="radio"] {
	opacity: 0
}

.blog-listing .blog-results {
	padding-block: clamp(32px, calc(2.1429vw + 14.5714px), 56px) 0
}

.blog-listing .blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none
}

.blog-card-item {
	display: flex
}

.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: var(--color-grey-300);
	color: var(--color-white);
	text-decoration: none;
	overflow: hidden;
	transition: all .2s var(--ease)
}

/* .blog-card:focus-visible {
	outline-offset: -3px
} */

.blog-card-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .2s var(--ease)
}

.blog-card:hover .blog-card-img,
.blog-card:focus-visible .blog-card-img {
	transform: scale(1.05)
}

.blog-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background: transparent linear-gradient(180deg, transparent 45%, #92b814E0 90%, var(--color-green) 100%) 0 0 no-repeat padding-box;
	opacity: 0;
	transition: all .2s var(--ease)
}

.blog-card:hover::after,
.blog-card:focus-visible::after {
	opacity: 1
}

.blog-card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	height: 100%;
	background: transparent linear-gradient(180deg, #92b814E0 0, var(--color-green) 100%) 0 0 no-repeat padding-box
}

.blog-card-body::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-grey-300);
	transition: opacity .2s var(--ease);
	pointer-events: none
}

.blog-card-body>* {
	position: relative;
	z-index: 1
}

.blog-card:hover .blog-card-body::before,
.blog-card:focus-visible .blog-card-body::before {
	opacity: 0
}

.blog-card-top {
	position: relative;
	padding: 28px 28px 0;
	transition: all .2s var(--ease)
}

.blog-card-bottom {
	padding: 0 28px 28px
}

.blog-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px
}

.blog-card-format {
	display: inline-block;
	margin: 0;
	padding: 9px 15px;
	background: #ffffff4f;
	color: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card-meta {
	margin: 0;
	color: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card-meta-sep {
	margin-inline: 4px
}

.blog-card-title {
	margin-block: 30px 36px;
	color: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card-excerpt {
	margin: 0;
	color: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card-rule {
	position: relative;
	height: 2px;
	margin: 20px 0 30px;
	border: 0;
	border-top: 2px solid var(--color-grey-500);
	transition: all .2s var(--ease)
}

.blog-card-rule::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card:hover .blog-card-rule::before,
.blog-card:focus-visible .blog-card-rule::before {
	width: 100%
}

.blog-card-topic-label {
	margin: 0 0 8px;
	color: var(--color-black);
	opacity: .23;
	transition: all .2s var(--ease)
}

.blog-card-topic {
	margin: 0;
	color: var(--color-ink);
	transition: all .2s var(--ease)
}

.blog-card:hover .blog-card-excerpt,
.blog-card:hover .blog-card-format,
.blog-card:hover .blog-card-meta,
.blog-card:hover .blog-card-title,
.blog-card:hover .blog-card-topic,
.blog-card:hover .blog-card-topic-label,
.blog-card:focus-visible .blog-card-excerpt,
.blog-card:focus-visible .blog-card-format,
.blog-card:focus-visible .blog-card-meta,
.blog-card:focus-visible .blog-card-title,
.blog-card:focus-visible .blog-card-topic,
.blog-card:focus-visible .blog-card-topic-label {
	color: var(--color-ink)
}

.blog-listing .blog-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, calc(1.4286vw + 12.5714px), 40px)
}

.blog-listing .blog-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	background: var(--color-green);
	color: var(--color-ink);
	letter-spacing: 2.56px;
	cursor: pointer;
	transition: all .25s var(--ease)
}

.blog-listing .blog-more-btn:focus-visible,
.blog-listing .blog-more-btn:hover {
	background: var(--color-green-hover);
	color: var(--color-ink)
}

.blog-listing .blog-more-btn[aria-busy=true] {
	opacity: .6;
	pointer-events: none
}

.blog-listing .blog-empty {
	margin: 0;
	padding-block: clamp(40px, 5vw, 72px);
	text-align: center;
	color: var(--color-grey-900)
}

.blog-listing [hidden] {
	display: none !important
}

.blog-listing .blog-results-body {
	position: relative;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.blog-listing .blog-grid {
	transition: opacity .25s var(--ease)
}

.blog-listing .blog-results-body.is-loading .blog-grid {
	opacity: .3;
	pointer-events: none
}

.blog-listing .blog-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: clamp(40px, 8vw, 96px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s var(--ease), visibility .25s var(--ease)
}

.blog-listing .blog-results-body.is-loading .blog-loader {
	opacity: 1;
	visibility: visible
}

.blog-listing .blog-spinner {
	width: 60px;
	aspect-ratio: 1;
	background: linear-gradient(90deg, var(--color-green) 50%, var(--color-blue) 0) top/100% 50% no-repeat, linear-gradient(90deg, var(--color-gold) 50%, var(--color-teal) 0);
	-webkit-mask: linear-gradient(var(--color-black) 0 0) 0 0/50% 50% no-repeat;
	animation: blog-spin 2s infinite;
}

.blog-card-item.is-entering {
	animation: blog-card-in .45s var(--ease) both;
	animation-delay: var(--enter-delay, 0ms)
}

.blog-listing .blog-more-btn[aria-busy=true] {
	opacity: .75;
	pointer-events: none
}

.blog-listing .blog-more-btn[aria-busy=true]::after {
	content: '';
	margin-left: 12px;
	width: 20px;
	height: 20px;
	aspect-ratio: 1;
	--_g: no-repeat radial-gradient(farthest-side, var(--color-white) 90%, #0000);
	background: var(--_g), var(--_g), var(--_g);
	background-size: 25% 25%;
	animation: dot-spin 1s infinite;
}

.blog-listing .blog-end {
	margin: 0;
	color: var(--color-grey-900);
	text-align: center
}

.post-banner {
	position: relative;
	background: var(--color-ink) var(--bg-image, none) center/cover no-repeat;
	color: var(--color-white)
}

.post-banner.post-banner-plain {
	min-height: clamp(320px, calc(17vw + 180px), 460px);
	background: var(--color-teal)
}

.post-banner.post-banner-plain::after,
.post-banner.post-banner-plain::before {
	display: none
}

.post-banner .post-banner-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	width: 100%
}

.post-banner .post-banner-main {
	min-width: 0
}

.post-banner .post-banner-wrap.has-excerpt .post-banner-main {
	flex: 0 1 680px;
	max-width: 680px
}

.post-banner .post-banner-aside {
	flex: 0 1 600px;
	min-width: 0;
	max-width: 600px
}

.post-banner .post-banner-format {
	margin: 0 0 20px;
	color: var(--color-white)
}

.post-banner .post-banner-title {
	color: var(--color-white)
}

.post-banner .post-banner-meta {
	margin-top: 20px;
	color: var(--color-white)
}

.post-banner .post-banner-excerpt {
	color: var(--color-white)
}

.single-post .inner-banner {
	background: linear-gradient(to left, rgba(158, 91, 24, .67) 0, rgba(158, 91, 24, .67) 100%), var(--bg-image) 50% 50%/cover no-repeat;
	background-blend-mode: multiply, normal
}

.post-body {
	padding-block: 50px;
	background: var(--color-white)
}

.post-body .post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 50px;
	row-gap: clamp(32px, 4vw, 56px);
	align-items: start
}

.post-body .post-layout:has(.post-sidebar) {
	grid-template-columns: 320px minmax(0, 1fr);
	position: relative
}

.post-body .post-main {
	min-width: 0
}

.post-body .post-content {
	color: var(--color-ink)
}

.post-body .post-content>:first-child {
	margin-top: 0
}

.post-body .post-content>:last-child {
	margin-bottom: 0
}

.post-body .post-content p {
	margin-block: 0 1.5em
}

.post-body .post-content :is(h1, h2, h3, h4, h5, h6),
.post-body .post-content .wp-block-heading {
	scroll-margin-top: 40px
}

.post-body .post-content h2 {
	margin-block: 1em .5em;
	font-size: clamp(28px, calc(1.0714vw + 22.8571px), 40px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.02em
}

.post-body .post-content h3 {
	margin-block: 1em .5em;
	font-size: clamp(22px, calc(.7143vw + 18.8571px), 30px);
	font-weight: 500;
	line-height: 1.25
}

.post-body .post-content h4,
.post-body .post-content h5,
.post-body .post-content h6 {
	margin-block: 1em .5em;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3
}

.post-body .post-content ol,
.post-body .post-content ul {
	margin-block: 1em .5em;
	padding-left: 1.3em;
	list-style: revert
}

.post-body .post-content li+li {
	margin-top: .6em
}

.post-body .post-content a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 3px
}

.post-body .post-content a:hover {
	text-decoration: none
}

.post-body .post-content blockquote {
	margin: 1.5em 0;
	padding: 10px 0 10px 20px;
	border-left: 6px solid var(--color-blue);
	font-size: clamp(26px, 2vw, 28px);
	line-height: 1.21;
	font-style: normal;
	color: var(--color-blue)
}

.post-body .post-content blockquote p:last-child {
	margin: 0
}

.post-body .post-content figure,
.post-body .post-content img {
	margin-block: 2em
}

.post-body .post-content figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--color-grey-700)
}

.post-body .wp-block-separator {
	border-width: 1px;
	color: #EBEBEB;
	margin: 2em 0 !important;
}

.post-body .post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 800px;
	margin: clamp(32px, 3vw, 48px) auto 0;
	padding: 0;
	list-style: none
}

.post-body .post-tags li {
	margin: 0
}

.post-body .post-tag {
	display: inline-block;
	padding: 10px 15px;
	background: var(--color-grey-100);
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease)
}

.post-body .post-tag:focus-visible,
.post-body .post-tag:hover {
	background: var(--color-green);
	color: var(--color-ink)
}

.post-body .post-back {
	display: inline-block;
	margin-top: clamp(30px, calc(2.1429vw + 23.1429px), 54px);
	color: var(--color-green);
	transition: color .2s var(--ease)
}

.post-body .post-back:focus-visible,
.post-body .post-back:hover {
	color: var(--color-teal)
}

.post-sidebar {
	min-width: 0;
	position: sticky;
	top: 150px;
	z-index: 1;
	background: var(--color-white)
}

.post-sidebar .post-sidebar-inner {
	display: grid;
	gap: 24px
}

.post-sidebar .post-toc-title {
	margin: 0 0 20px;
	letter-spacing: 1.2px;
	color: var(--color-blue)
}

.post-sidebar .post-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 40dvh;
	overflow-y: scroll;
}

.post-sidebar .post-toc-item {
	margin: 0
}

.post-sidebar .post-toc-link {
	display: block;
	padding: 12px 20px;
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color .25s var(--ease), color .25s var(--ease)
}

a.post-toc-link:focus-visible,
a.post-toc-link:hover {
	color: var(--color-teal)
}

.post-sidebar .post-toc-item.is-current .post-toc-link,
.post-sidebar a.post-toc-link.is-current {
	background: var(--color-teal);
	color: var(--color-white)
}

.post-sidebar .post-infobox {
	padding: 20px;
	background: var(--color-blue);
	color: var(--color-white)
}

.post-sidebar .post-infobox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	color: var(--color-white)
}

.post-sidebar .post-infobox-label .gb-shape {
	display: inline-flex;
	line-height: 0
}

.post-sidebar .post-infobox-body {
	display: flex;
	align-items: flex-start;
	gap: 12px
}

.post-sidebar .post-infobox-media {
	flex: 0 0 auto;
	width: 100px;
	line-height: 0
}

.post-sidebar .post-infobox-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover
}

.post-sidebar .post-infobox-copy {
	min-width: 0
}

.post-sidebar .post-infobox-title {
	color: var(--color-white);
	line-height: 1.2
}

.post-sidebar .post-infobox-text {
	margin-top: 8px;
	color: #ffffffd9;
	line-height: 1.4
}

.post-sidebar .post-infobox-separator {
	margin-block: 20px;
	margin-inline: -20px;
	background: var(--color-white);
	opacity: .22
}

.post-sidebar .post-infobox-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 17px;
	background: var(--color-green);
	color: var(--color-ink);
	letter-spacing: 2.56px;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s var(--ease)
}

.post-sidebar .post-infobox-btn:focus-visible,
.post-sidebar .post-infobox-btn:hover {
	background: var(--color-green-hover);
	color: var(--color-ink)
}

.post-content .faq-block {
	--container: 100%;
	margin-block: clamp(32px, 3.5vw, 56px)
}

.post-content .faq-block .enlign-container {
	max-width: 100%;
	padding-inline: 0
}

.post-content .faq-block .faq-item {
	margin-inline: 0;
	padding-inline: 30px
}

.post-content .faq-block .faq-title {
	padding: 0;
	margin-block: 1.3em
}

.post-content .faq-block .faq-question {
	padding-block: 30px
}

.post-content .faq-block .faq-item[open] .faq-question {
	padding-bottom: 20px
}

.post-content .faq-block .faq-answer {
	padding-bottom: 30px
}

.related-posts {
	overflow-x: clip;
	padding-block: 50px clamp(50px, calc(4.8193vw + .6024px), 70px);
	background: var(--color-grey-100)
}

.related-posts .related-posts-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: 30px
}

.related-posts .related-posts-actions {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 48px)
}

.related-posts .related-posts-all {
	color: var(--color-green);
	transition: color .2s var(--ease)
}

.related-posts .related-posts-all:focus-visible,
.related-posts .related-posts-all:hover {
	color: var(--color-teal)
}

.related-posts .related-posts-arrows {
	display: flex;
	align-items: center;
	gap: 20px
}

.related-posts .related-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: 0 0;
	color: var(--color-ink);
	line-height: 1;
	cursor: pointer;
	transition: color .3s var(--ease)
}

.related-posts .related-arrow svg {
	width: clamp(34px, 3.4vw, 49px);
	height: auto
}

.related-posts .related-arrow:not(.slick-disabled):focus-visible,
.related-posts .related-arrow:not(.slick-disabled):hover {
	color: var(--color-green)
}

.related-posts .related-slider {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none
}

.related-posts .related-slider.slick-initialized {
	display: block
}

.related-posts .related-slider .slick-list {
	margin-right: calc(50% - 50vw)
}

.related-posts .related-slider .slick-track {
	display: flex;
	align-items: stretch
}

.related-posts .related-slider .slick-slide {
	flex: 0 0 auto;
	width: calc((min(var(--container), 100vw - var(--gutter) * 2) - 32px)/ 3);
	height: auto;
	margin-right: 16px
}

@keyframes dot-spin {
	0% {
		background-position: 0% -100%, 50% -100%, 100% -100%
	}

	16.67% {
		background-position: 0% 50%, 50% -100%, 100% -100%
	}

	33.33% {
		background-position: 0% 50%, 50% 50%, 100% -100%
	}

	45%,
	55% {
		background-position: 0% 50%, 50% 50%, 100% 50%
	}

	66.67% {
		background-position: 0% 200%, 50% 50%, 100% 50%
	}

	83.33% {
		background-position: 0% 200%, 50% 200%, 100% 50%
	}

	100% {
		background-position: 0% 200%, 50% 200%, 100% 200%
	}
}

@keyframes blog-spin {
	0% {
		-webkit-mask-position: 0 0
	}

	25% {
		-webkit-mask-position: 100% 0
	}

	50% {
		-webkit-mask-position: 100% 100%
	}

	75% {
		-webkit-mask-position: 0 100%
	}

	100% {
		-webkit-mask-position: 0 0
	}
}

@keyframes blog-card-in {
	from {
		opacity: 0;
		transform: translateY(14px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@media screen and (prefers-reduced-motion:reduce) {
	.logo-track {
		animation: none
	}

	.logo-marquee {
		overflow-x: auto
	}

	.logo-track[aria-hidden=true] {
		display: none
	}

	.blog-listing .blog-more-btn[aria-busy=true]::after,
	.blog-listing .blog-spinner {
		animation-duration: 2s !important
	}
}

@supports (interpolate-size:allow-keywords) {
	.faq-block {
		interpolate-size: allow-keywords
	}

	.faq-block .faq-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .35s var(--ease), content-visibility .35s var(--ease) allow-discrete
	}

	.faq-block .faq-item[open]::details-content {
		block-size: auto
	}

	@media screen and (prefers-reduced-motion:reduce) {
		.faq-block .faq-item::details-content {
			transition-duration: 0s
		}
	}
}

@media screen and (min-width:768px) {
	.stages-wrap:not(.is-static) .stage-wrap {
		overflow: visible
	}

	.stages-wrap:not(.is-static) .stage-wrap .stage-inner::before {
		top: 0;
		bottom: 0;
		height: auto;
		transform: none
	}

	.stages-wrap:not(.is-static) .stage-count {
		position: sticky;
		top: calc(var(--stage-stick-top) + var(--stage-stick-gap))
	}
}

@media screen and (min-width:1025px) {
	.stages-wrap:not(.is-static) .stage-image {
		position: sticky;
		top: calc(var(--stage-stick-top) + var(--stage-stick-gap))
	}
}

@media screen and (min-width:1300px) {

	.site-footer .footer-explore,
	.site-footer .footer-row {
		grid-template-columns: minmax(100px, max-content) minmax(0, 1fr);
		gap: 20px
	}
}

@media screen and (min-width:1560px) {

	.site-footer .footer-explore,
	.site-footer .footer-row {
		gap: 24px
	}
}

@media screen and (max-width:1280px) {
	:root {
		--menu-gap: 26px
	}

	.team-block .team-grid {
		--card-pad-x: clamp(24px, calc(11.7647vw - 94.5882px), 56px)
	}
}

@media screen and (max-width:1200px) and (min-width:1025px) {
	.blog-card-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px
	}
}

@media screen and (max-width:1199px) {
	.blog-filter-bar .blog-filter-bar-inner {
		gap: 14px 24px
	}

	.blog-listing .blog-search {
		flex-basis: 320px
	}

	.site-footer .footer-col {
		padding-right: 28px
	}

	.site-footer .footer-col+.footer-col {
		padding-left: 32px
	}

	.site-footer .footer-brand img {
		height: 84px
	}
}

@media screen and (max-width:1099px) {
	:root {
		--menu-gap: 18px
	}

	.site-header .nav-link {
		letter-spacing: .1em
	}
}

@media screen and (max-width:1024px) {
	.hero-banner .hero-banner-top {
		margin-bottom: 24px
	}

	.hero-banner {
		padding-block: 180px 50px;
		min-height: 500px
	}

	.where-to-begin {
		padding-block: 50px
	}

	.where-to-begin .where-to-begin-top-content,
	.where-to-begin .where-to-begin-top-title {
		max-width: 100%
	}

	.where-to-begin .where-to-begin-top-title br {
		display: none
	}

	.where-to-begin .where-to-begin-grid .item {
		max-width: 100% !important
	}

	.where-to-begin .where-to-begin-grid .item img {
		aspect-ratio: 9/4;
		object-position: center center !important;
		max-height: unset !important
	}

	.where-to-begin .where-to-begin-grid .item:last-child,
	.where-to-begin .where-to-begin-grid .item:nth-child(2),
	.where-to-begin .where-to-begin-grid .item:nth-child(3) {
		padding-block: 26px;
		padding-inline: 20px
	}

	.where-to-begin .where-to-begin-grid .item:nth-child(2) {
		order: 1
	}

	.where-to-begin .where-to-begin-grid .item:first-child {
		order: 2
	}

	.where-to-begin .where-to-begin-grid .item:nth-child(3) {
		order: 3
	}

	.where-to-begin .where-to-begin-grid .item:nth-child(4) {
		order: 3
	}

	.where-to-begin .where-to-begin-grid .item:last-child {
		order: 5
	}

	.contact-wrap .contact-inner-left,
	.contact-wrap .contact-inner-right {
		max-width: 100%
	}

	.contact-wrap .contact-inner-right {
		padding: clamp(1rem, 2.5vw, 1.25rem)
	}

	.methodology-bottom {
		grid-template-columns: 1fr
	}

	.methodology-bottom .method-item {
		padding-block: 30px;
		padding-inline: 0 !important;
		border-right: 0;
		border-bottom: 1px solid #00000024
	}

	.methodology-bottom .method-item:last-child {
		border-bottom: 0
	}

	.statics-bottom {
		padding-block: 20px;
		padding-inline: 20px
	}

	.testimonials {
		--peek: clamp(48px, calc(31.67px + 4.86vw), 70px);
		padding: var(--peek)
	}

	.testimonials .testimonial-wrap {
		padding-block: clamp(32px, calc(18.67px + 3.23vw), 48px);
		padding-inline: clamp(24px, calc(15.43px + 3.51vw), 40px)
	}

	.testimonials::after,
	.testimonials::before {
		width: clamp(220px, calc(182.15px + 10.49vw), 280px);
		height: clamp(220px, calc(182.15px + 10.49vw), 280px)
	}

	.post-item .post-item-top {
		padding: 20px 20px 0
	}

	.post-item .post-item-bottom {
		padding: 0 20px 20px
	}

	.post-item .post-title {
		margin-block: 20px
	}

	.testimonials-block .testimonial-buttons {
		margin-top: 25px;
		justify-content: flex-start
	}

	.testimonials-block .content-wrapper {
		gap: 20px
	}

	.faq-block .faq-title {
		padding-block: 36px
	}

	.faq-block .faq-question {
		gap: 20px;
		padding-block: 30px
	}

	.faq-block .faq-item[open] .faq-question {
		padding-bottom: 26px
	}

	.faq-block .faq-icon {
		width: 24px
	}

	.faq-block .faq-answer {
		padding-bottom: 40px
	}

	.comparison-table-wrap {
		--copy-lh: 1.4
	}

	.comparison-table-wrap thead th {
		font-size: clamp(22px, calc(14.1px + 1.04vw), 24px)
	}

	.comparison-table-wrap tbody td {
		font-size: clamp(15px, calc(.35vw + 13.4px), 16px)
	}

	.comparison-table-wrap tbody td:first-child {
		padding-right: calc(var(--cell-pad-x) * .75);
		font-size: clamp(17px, calc(15.2px + .35vw), 18px)
	}

	.whats-enlign {
		padding-block: 50px
	}

	.whats-enlign:after,
	.whats-enlign:before {
		width: 150px;
		height: 150px
	}

	.whats-enlign .whats-enlign-wrap {
		padding-block: clamp(20px, calc(4.9669vw - .8278px), 50px);
		padding-inline: clamp(20px, calc(4.9669vw - .8278px), 50px)
	}

	.perspective-contact .contact-wrap .contact-inner-right {
		padding-block: 20px;
		padding-inline: 20px
	}

	.team-block .team-lead {
		grid-template-columns: minmax(0, 1fr)
	}

	.team-block .team-lead-media {
		min-height: 0;
		aspect-ratio: 16/10
	}

	.team-block .team-lead-media img {
		object-position: 50% 20%
	}

	.team-block .team-grid {
		--card-pad-x: clamp(24px, calc(6.25vw - 24px), 40px);
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.team-block .team-card:not(:nth-child(3n)) {
		border-right: 0
	}

	.team-block .team-card:nth-child(odd) {
		border-right: 1px solid var(--color-grey-300)
	}

	.team-block .team-card {
		padding-block: 40px
	}

	.team-block .team-card-media {
		max-width: 100%;
	}

	.team-block .team-card-media:before {
		max-width: 100%;
	}

	.team-block .team-card:nth-child(3n+1) {
		padding-left: var(--card-pad-x)
	}

	.team-block .team-card:nth-child(3n) {
		padding-right: var(--card-pad-x)
	}

	.team-block .team-card:nth-child(odd) {
		padding-left: 0
	}

	.team-block .team-card:nth-child(even) {
		padding-right: 0
	}

	.blog-listing .blog-search {
		flex: 1 1 100%
	}

	.blog-listing .blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.blog-card-top {
		padding: 20px 20px 0
	}

	.blog-card-bottom {
		padding: 0 20px 20px
	}

	.blog-card-title {
		margin-block: 20px
	}

	.related-posts .related-slider {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.related-posts .related-slider .slick-slide {
		width: calc((min(var(--container), 100vw - var(--gutter) * 2) - 16px)/ 2)
	}

	.post-banner .post-banner-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(20px, 2.5vw, 32px)
	}

	.post-banner .post-banner-aside,
	.post-banner .post-banner-wrap.has-excerpt .post-banner-main {
		flex: 0 1 auto
	}

	.post-banner .post-banner-aside,
	.post-banner .post-banner-wrap.has-excerpt .post-banner-main {
		max-width: 100%
	}

	.post-body .post-layout:has(.post-sidebar) {
		grid-template-columns: minmax(0, 1fr)
	}

	.post-sidebar .post-sidebar-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start
	}

	.post-sidebar {
		position: relative;
		top: unset
	}

	.post-sidebar .post-toc-list {
		max-height: 30dvh;
	}
}

@media screen and (max-width:991px) {
	:root {
		--header-h: 76px
	}

	.site-header.is-scrolled .header-inner {
		min-height: calc(var(--header-h) - 1rem)
	}

	.site-header .site-brand img {
		height: 46px
	}

	.site-header.is-scrolled .header-inner .site-brand img {
		height: 40px
	}

	.site-header .nav-toggle {
		position: relative;
		z-index: 2;
		display: inline-flex;
		order: 3
	}

	.site-header~.nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--z-header) - 1);
		background: rgba(0, 0, 0, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s var(--ease), visibility .3s var(--ease)
	}

	body.is-nav-open .site-header~.nav-overlay {
		opacity: 1;
		visibility: visible
	}

	.site-header .main-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		align-self: auto;
		display: block;
		height: 100vh;
		padding: calc(var(--header-h-sm) + 12px) 0 20px;
		background: var(--color-ink);
		overflow: hidden;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .32s var(--ease), visibility .32s var(--ease)
	}

	body.is-nav-open .site-header .main-nav {
		transform: translateX(0);
		visibility: visible;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.site-header .nav-menu {
		display: block;
		overflow-y: auto;
		max-height: 70dvh;
		height: auto;
	}

	.site-header .nav-item {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		border-bottom: 1px solid #ffffff26
	}

	.site-header .nav-link {
		flex: 1 1 auto;
		justify-content: flex-start;
		width: auto;
		gap: 12px;
		padding: 16px var(--gutter);
		line-height: 24px
	}

	.site-header .nav-item.has-dropdown>.nav-link {
		padding-right: 0
	}

	.site-header .nav-caret-toggle {
		flex: 0 0 auto;
		width: 52px;
		margin: 0;
		padding: 0
	}

	.site-header .nav-caret {
		width: 12px;
		height: 12px
	}

	.site-header .nav-dropdown {
		position: static;
		flex: 0 0 100%;
		width: auto;
		max-width: none;
		margin: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: #ffffff1f;
		box-shadow: none;
		transition: max-height .3s var(--ease)
	}

	.site-header .nav-item.is-open>.nav-dropdown {
		transform: none
	}

	.site-header .nav-item.has-dropdown::after {
		display: none
	}

	.site-header .nav-subitem+.nav-subitem {
		border-top-color: #ffffff26
	}

	.site-header .nav-sublink {
		padding: 14px var(--gutter);
		color: var(--color-white)
	}

	.site-header .nav-sublink.is-current,
	.site-header .nav-sublink:focus-visible,
	.site-header .nav-sublink:hover {
		background: var(--color-green);
		color: var(--color-ink)
	}

	.site-header .main-nav .header-cta {
		display: flex;
		order: 2;
		width: calc(100% - var(--gutter) * 2);
		margin: 24px var(--gutter) 20px;
		padding: 14px 20px
	}

	.site-header .header-inner>.header-cta {
		display: none
	}

	.site-header.is-scrolled~.breadcrumb-wrapper {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) - 1rem)
	}

	.site-footer .footer-grid {
		grid-template-columns: minmax(0, 1fr)
	}

	.site-footer .footer-col,
	.site-footer .footer-col+.footer-col {
		padding: 40px 0
	}

	.site-footer .footer-col+.footer-col {
		border-left: 0;
		border-top: 1px solid var(--color-grey-300)
	}

	.site-footer .footer-connect {
		gap: 40px
	}

	.logo-strip:not(.logo-slider-block) .enlign-container {
		padding-block: 40px
	}

	.logo-strip .logo-track {
		--logo-gap: 20px
	}

	.site-footer .footer-menu li {
		margin-bottom: 15px
	}

	.site-footer .footer-menu {
		max-width: 400px
	}
}

@media screen and (max-width:767px) {
	.breadcrumb-wrapper .breadcrumbs-list {
		gap: 5px 10px;
	}

	.breadcrumb-wrapper .breadcrumbs-list::-webkit-scrollbar {
		display: none
	}

	.breadcrumb-wrapper .breadcrumb-item [aria-current] {
		line-height: 1.5
	}

	.inner-banner:before {
		height: 100%;
		opacity: .5
	}

	.hero-banner .hero-title br {
		display: none
	}

	.where-to-begin .where-to-begin-grid .item img {
		aspect-ratio: 6/4
	}

	.faq-block .faq-title {
		padding-block: 28px
	}

	.faq-block .faq-question {
		align-items: flex-start;
		gap: 16px;
		padding-block: 24px
	}

	.faq-block .faq-item[open] .faq-question {
		padding-bottom: 20px
	}

	.faq-block .faq-icon {
		width: 20px;
		margin-top: 8px
	}

	.faq-block .faq-answer {
		padding-bottom: 32px
	}

	.comparison-table-wrap {
		--copy-lh: 1.4;
		--caption-size: 12px;
		--caption-lh: 1.25;
		--caption-gap: 8px;
		margin-inline: 0
	}

	.comparison-table-wrap table,
	.comparison-table-wrap tbody,
	.comparison-table-wrap tbody td,
	.comparison-table-wrap tbody tr {
		display: block;
		width: auto
	}

	.comparison-table-wrap thead {
		display: none
	}

	.comparison-table-wrap tbody tr {
		padding-block: var(--cell-pad-y);
		border-bottom: 1px solid var(--rule)
	}

	.comparison-table-wrap tbody tr:first-child {
		border-top: 1px solid var(--rule)
	}

	.comparison-table-wrap tbody td {
		padding: 0;
		border-bottom: 0;
		font-size: 16px
	}

	.comparison-table-wrap tbody td:first-child {
		font-size: clamp(18px, 2.2vw, 20px)
	}

	.comparison-table-wrap tbody td:nth-child(2) {
		margin-top: 18px;
		padding: var(--cell-pad-y) var(--cell-pad-x);
		border: 1px solid var(--color-grey-300)
	}

	.comparison-table-wrap tbody td:nth-child(3) {
		margin-top: 18px;
		padding: var(--cell-pad-y) var(--cell-pad-x);
		padding-left: calc(var(--cell-pad-x) + var(--check-gutter))
	}

	.comparison-table-wrap tbody td[data-label]:nth-child(3) {
		--copy-top: calc(var(--cell-pad-y) + var(--caption-size) * var(--caption-lh) + var(--caption-gap))
	}

	.comparison-table-wrap tbody td[data-label]:nth-child(2)::before,
	.comparison-table-wrap tbody td[data-label]:nth-child(3)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--caption-gap);
		font-size: var(--caption-size);
		font-weight: 500;
		line-height: var(--caption-lh);
		letter-spacing: 1.56px;
		text-transform: uppercase;
		color: var(--color-grey-700)
	}

	.comparison-table-wrap tbody td[data-label]:nth-child(3)::before {
		margin-left: calc(var(--check-gutter) * -1);
		color: var(--color-ink)
	}

	.stage-wrap .stage-inner:before {
		left: 50%;
		top: clamp(80px, calc(3.1818vw + 67.4545px), 100px);
		transform: translateX(-50%);
		height: 2px;
		width: 200vw
	}

	.approach-grid {
		grid-template-columns: repeat(1, 1fr)
	}

	.approach-grid-item:last-child {
		grid-column: auto
	}

	.team-block .team-lead-media {
		aspect-ratio: 4/3
	}

	.team-block .team-lead-title {
		flex-basis: 100%
	}

	.team-block .team-lead-badges {
		margin-top: 0
	}

	.team-block .team-lead-intro {
		margin-top: 22px
	}

	.team-block .team-lead-points {
		gap: 18px;
		margin-top: 24px
	}

	.team-block .team-card {
		padding-block: 36px
	}

	.team-block .team-card-link {
		padding-top: 22px
	}

	.team-block .team-lead-badges img {
		width: 50px;
		height: 50px
	}

	.team-block .team-lead-badges li {
		width: 65px;
		height: 65px
	}

	.blog-listing .blog-grid {
		grid-template-columns: minmax(0, 1fr)
	}

	.blog-listing .blog-filters {
		margin: 0;
		flex: 1 1 100%;
	}

	.blog-listing .blog-clear {
		order: 2;
	}

	.blog-listing .blog-filter,
	.blog-listing .blog-filter[data-blog-filter=category] {
		min-width: 150px;
		order: 1;
	}

	.blog-listing .blog-filter-toggle {
		gap: 10px;
		padding-inline: 12px
	}

	.post-sidebar .post-sidebar-inner {
		grid-template-columns: minmax(0, 1fr)
	}

	.post-content .faq-block .faq-item {
		padding-inline: 16px
	}

	.post-banner .post-banner-format {
		margin-bottom: 16px
	}

	.post-banner .post-banner-meta {
		margin-top: 16px
	}

	.post-body .post-content blockquote {
		margin-block: 1.5em
	}

	.post-sidebar .post-infobox {
		max-width: 400px;
	}

	.related-posts .related-slider {
		grid-template-columns: minmax(0, 1fr)
	}

	.related-posts .related-slider .slick-slide {
		width: min(var(--container), 100vw - var(--gutter) * 2)
	}

	.related-posts .related-posts-head {
		align-items: flex-start
	}

	.related-posts .related-posts-actions {
		width: 100%;
		justify-content: space-between
	}
}

@media screen and (max-width:600px) {
	.team-block .team-grid {
		--card-pad-x: 0px;
		grid-template-columns: minmax(0, 1fr)
	}

	.team-block .team-card:nth-child(odd) {
		border-right: 0
	}

	.team-block .team-card {
		width: 100%;
		max-width: 500px;
		margin: 0 auto
	}

	.site-footer .footer-menu {
		columns: 1;
		max-width: 100%
	}

	.site-footer .footer-bar-inner {
		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
		padding-block: 30px
	}

	.logo-strip .logo-placeholder {
		width: 140px;
		height: 56px
	}

	.site-footer .footer-copy,
	.site-footer .footer-legal a {
		line-height: 1.5
	}

	.blog-listing .blog-filters {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-left: 0
	}

	.blog-listing .blog-filter,
	.blog-listing .blog-filter[data-blog-filter=category] {
		min-width: 0
	}

	.blog-listing .blog-clear {
		justify-content: center;
		padding-block: 4px
	}

	.blog-listing .blog-filter-panel {
		right: 0;
		left: 0
	}

	.blog-listing .blog-filter-option {
		white-space: normal
	}

	.blog-card-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px
	}
}

@media screen and (max-width:480px) {
	.site-header .site-brand img {
		height: 40px
	}

	.site-header.is-scrolled .header-inner .site-brand img {
		height: 35px
	}

	.site-header .site-brand-text {
		font-size: 20px
	}
}

/* ==========================================================================
   LISTING LISTING BLOCK  —  blocks/listing-listing
   --------------------------------------------------------------------------
   Styling only. Mirrors the Blog Listing block's design language (same filter
   bar, same dropdown pattern, same load-more/spinner behaviour) because the
   block was built by copying it — see blocks/blog-listing above for the
   equivalent rules.

   Markup owner: inc/listing-listing.php (card) + blocks/listing-listing/block.php
   (bar, grid, footer). Nothing here requires a PHP change; every selector below
   already exists in that output.

   State hooks the script (assets/scripts/listing-listing.js) toggles:
     .is-loading   on .listing-results-body  — dims the grid, shows the spinner
     .is-entering  on .listing-card-item     — staggered fade-in, --enter-delay
     [aria-busy]   on .listing-more-btn      — inline dots while appending
     [hidden]      on empty / error / end / load-more

   Sections:
     1.  Block shell
     2.  Filter bar — search
     3.  Filter bar — result count
     4.  Filter bar — clear button
     5.  Filter bar — Status / Industry / Asking Price dropdowns
     6.  Results shell + grid
     7.  Card — shell + hero overlay (image, status, industry, ID, location)
     8.  Card — title
     9.  Card — asking price + financial spec grid
     10. Card — bullets (state A) and description fallback (state B)
     11. Card — actions footer
     12. Load more, end-of-results, empty + error
     13. Loading + entrance animation
     14. Responsive — 1199 / 1024 / 767 / 600 / 480
     15. Reduced motion

   Deliberately not styled: there is no Location filter, Sort control, hero
   banner or bottom CTA in this block's markup — those are still backend scope
   on ONE18's side, so no placeholder CSS is carried here for them.
   ========================================================================== */


/* 1. Block shell
   ========================================================================== */

.listing-listing {
	background: var(--color-white)
}

.listing-listing [hidden] {
	display: none !important
}


/* 2. Filter bar — search
   --------------------------------------------------------------------------
   The bar re-points --color-ink locally, the same trick .blog-filter-bar uses,
   so every text-* utility inside it softens without per-element colour rules.
   ========================================================================== */

.listing-filter-bar {
	--color-ink: #424242;
	background: var(--color-grey-100)
}

.listing-filter-bar .listing-filter-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-block: 14px
}

.listing-listing .listing-search {
	position: relative;
	flex: 0 1 400px;
	min-width: 0
}

.listing-listing .listing-search-input {
	width: 100%;
	padding: 8px 34px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--color-green);
	border-radius: 0;
	background: 0 0;
	color: var(--color-ink);
	appearance: none
}

.listing-listing .listing-search-input::placeholder {
	color: var(--color-grey-650);
	opacity: 1
}

.listing-listing .listing-search-input:focus,
.listing-listing .listing-search-input:focus-visible {
	outline-offset: 1px
}

/* Safari renders a native clear affordance that collides with the submit icon. */
.listing-listing .listing-search-input::-webkit-search-cancel-button {
	margin-right: 6px
}

.listing-listing .listing-search-submit {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	padding: 0;
	border: 0;
	background: 0 0;
	color: var(--color-green);
	cursor: pointer;
	transition: color .2s var(--ease)
}

.listing-listing .listing-search-submit:focus-visible,
.listing-listing .listing-search-submit:hover {
	color: var(--color-teal)
}

.listing-listing .listing-search-submit svg {
	width: 18px;
	height: 18px
}


/* 3. Filter bar — result count
   ========================================================================== */

.listing-listing .listing-count {
	margin: 0;
	color: var(--color-ink);
	white-space: nowrap
}


/* 4. Filter bar — clear button
   --------------------------------------------------------------------------
   Ships disabled and is re-enabled by the script the moment a filter or search
   term is active, so the disabled state has to read as genuinely inert.
   ========================================================================== */

.listing-listing .listing-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-left: auto
}

.listing-listing .listing-clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 4px;
	border: 0;
	background: 0 0;
	color: var(--color-grey-900);
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s var(--ease), opacity .2s var(--ease)
}

.listing-listing .listing-clear:focus-visible,
.listing-listing .listing-clear:hover {
	color: var(--color-green)
}

.listing-listing .listing-clear[disabled] {
	opacity: .4;
	pointer-events: none
}

.listing-listing .listing-clear-icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px
}


/* 5. Filter bar — Status / Industry / Asking Price dropdowns
   --------------------------------------------------------------------------
   Three <details> panels, identical in shape. The script swaps each toggle's
   label text to the chosen option, so the label has to truncate rather than
   stretch its trigger — "Seller Discretionary Earnings"-length industry names
   are real. Asking Price gets a wider trigger because its resting label
   ("Asking Price Up To") is the longest of the three.
   ========================================================================== */

.listing-listing .listing-filter {
	position: relative;
	min-width: 150px
}

.listing-listing .listing-filter[data-listing-filter=status] {
	min-width: 140px
}

.listing-listing .listing-filter[data-listing-filter=price_max] {
	min-width: 205px
}

.listing-listing .listing-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 9px 15px;
	border: 1px solid var(--color-grey-300);
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
	list-style: none;
	transition: border-color .2s var(--ease), color .2s var(--ease)
}

.listing-listing .listing-filter-toggle::-webkit-details-marker {
	display: none
}

.listing-listing .listing-filter-toggle:hover {
	border-color: var(--color-green)
}

.listing-listing .listing-filter[open]>.listing-filter-toggle {
	border-color: var(--color-green)
}

.listing-listing .listing-filter-toggle span {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.listing-listing .listing-filter-caret {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	transition: transform .25s var(--ease)
}

.listing-listing .listing-filter[open] .listing-filter-caret {
	transform: rotate(180deg)
}

/*
 * Asking Price carries 17 options and Industry grows with the taxonomy, so the
 * panel scrolls rather than running off the viewport. The theme already styles
 * ::-webkit-scrollbar globally (framework.css), so no extra chrome is needed.
 */
.listing-listing .listing-filter-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 3;
	min-width: 100%;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-white);
	box-shadow: 0 3px 17px #00000029
}

.listing-listing .listing-filter[open] .listing-filter-panel {
	top: calc(100% + 10px);
	height: auto
}

.listing-listing .listing-filter-options {
	margin: 0;
	padding: 0;
	list-style: none
}

.listing-listing .listing-filter-option {
	display: block;
	padding: 12px 20px;
	color: var(--color-ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease)
}

.listing-listing .listing-filter-option:hover {
	background: rgba(0, 0, 0, .03)
}

/* The radio itself is .screen-reader-text, so the label carries the focus ring. */
.listing-listing .listing-filter-option:has(:focus-visible) {
	background: var(--color-sand);
	color: var(--color-teal);
	outline: 2px solid var(--color-green);
	outline-offset: -2px
}

.listing-listing .listing-filter-option:has(:checked) {
	background: var(--color-green);
	color: var(--color-ink)
}

/* Never visibility:hidden here: it drops the radios from the tab order, so the
   options can't be reached by keyboard. .screen-reader-text already hides them. */
.listing-listing .listing-filter-option input[type=radio] {
	opacity: 0
}


/* 6. Results shell + grid
   ========================================================================== */

.listing-listing .listing-results {
	padding-block: clamp(32px, calc(2.1429vw + 14.5714px), 56px) 0
}

.listing-listing .listing-results-layout {
	display: grid;
	grid-template-columns: minmax(300px, 320px) minmax(0, 1fr);
	gap: 32px;
	align-items: start
}

/* Sidebar filter box — "Filter" title over the five stacked dropdowns. */
.listing-listing .listing-sidebar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 12px 12px;
	border: 1px solid var(--color-grey-300);
	background: var(--color-white)
}

.listing-listing .listing-sidebar-title {
	margin: 0 0 8px;
	color: var(--color-ink)
}

.listing-listing .listing-sidebar .listing-filter {
	width: 100%
}

.listing-listing .listing-sidebar .listing-filter-toggle {
	padding-block: 10px;
	font-weight: 400
}

/*
 * Accordion: the panel expands in place under its toggle instead of floating
 * over the grid (see isAccordion() in listing-listing.js). The option list
 * still scrolls past 240px so one long range doesn't push the rest away.
 */
.listing-listing .listing-sidebar .listing-filter-panel,
.listing-listing .listing-sidebar .listing-filter[open] .listing-filter-panel {
	position: static;
	min-width: 0;
	max-height: 240px;
	border: 1px solid var(--color-grey-300);
	border-top: 0;
	box-shadow: none
}

.listing-listing .listing-sidebar .listing-filter-option {
	padding: 10px 15px;
	white-space: normal
}

/* Set by the slide-shut animation: ease the caret and border back as it starts. */
.listing-listing .listing-sidebar .listing-filter.is-closing>.listing-filter-toggle {
	border-color: var(--color-grey-300)
}

.listing-listing .listing-sidebar .listing-filter.is-closing .listing-filter-caret {
	transform: none
}

/* While sticky, keep the whole box within the viewport — open accordions scroll inside it. */
/* @media screen and (min-width:768px) {

	.listing-listing .listing-sidebar {
		max-height: calc(100vh - 174px - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		overscroll-behavior: contain
	}
} */

.listing-listing .listing-filter.is-disabled .listing-filter-toggle {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none
}

.listing-listing .listing-results-body {
	position: relative;
	min-height: 400px
}

.listing-listing .listing-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity .25s var(--ease)
}


/* 7. Card — shell + hero overlay
   --------------------------------------------------------------------------
   The card is one grid, and .listing-card-body is display:contents so the
   renderer's body children become grid items of the card itself. That is what
   makes the overlay possible without touching the PHP: industry, listing ID,
   title and location are markup siblings *after* the image, but placing them
   in the same grid cell as .listing-card-media lays them over it.

   The card is two columns wide so that asking price and the financials can
   share one spec grid — see section 9. Everything that is not a spec cell
   spans both columns.

   Row map — every card element except the spec cells is placed explicitly, so
   a row whose element the renderer omitted (status, industry, location, NDA
   link are all conditional) collapses to zero instead of shifting the rest:

      1     hero  — media + status + industry + listing ID + title + location
      2-9   spec grid — asking price, then the financials, auto-flowed
      10    bullets / description   (1fr — absorbs slack so footers line up)
      11    actions footer

   Rows 2-9 are a pool, not a fixed count: the renderer emits between zero and
   six financial rows, and an auto row nothing lands in has no height. Eight
   rows covers the widest case (one column on a phone, seven cells) with room
   to spare, so the rows below never need recounting per breakpoint.
   ========================================================================== */

.listing-card-item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto repeat(8, auto) 1fr auto;
	height: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-grey-300);
	overflow: hidden;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease)
}

.listing-card-item:hover,
.listing-card-item:focus-within {
	border-color: var(--color-green);
	box-shadow: 0 8px 24px #00000014;
	transform: translateY(-3px)
}

/* display:contents dissolves the wrapper only — a plain <div> has no semantics to lose. */
.listing-card-body {
	display: contents
}

/* ---- hero: the image itself ---- */

.listing-card-media {
	position: relative;
	z-index: 0;
	grid-area: 1 / 1 / 2 / -1;
	display: block;
	align-self: stretch;
	aspect-ratio: 5 / 4;
	min-height: 230px;
	/* Dark, not light: a listing with no synced photo still carries white overlay text. */
	background: var(--color-grey-900);
	overflow: hidden
}

/* Overscan from the top so a burned-in ENLIGN footer on some Pipedrive-
   era photos (DONUT2) sits below the clip. Cover still fills every card
   aspect (5:4 / 4:3 / 16:9). Hover zooms from the top so the strip
   does not come back. */
.listing-card-img {
	width: 100%;
	height: 136%;
	object-fit: cover;
	object-position: top center;
	transform-origin: top center;
	transition: transform .35s var(--ease)
}

.listing-card-item:hover .listing-card-img,
.listing-card-item:focus-within .listing-card-img {
	transform: scale(1.05)
}

/*
 * Ink plate. Hover covers the whole photograph with the same ink as button
 * labels (#141515) at 90%, so the green title sits on a known floor instead
 * of the picture. The scrim (::after) stays underneath; overlay text is
 * z-index 2 on the card grid, above this layer.
 */
.listing-card-media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #141515e6;
	opacity: 0;
	transition: opacity .25s var(--ease);
	pointer-events: none
}

.listing-card-item:hover .listing-card-media::before,
.listing-card-item:focus-within .listing-card-media::before {
	opacity: 1
}

/*
 * Scrim. Darkest at the foot, where the title and location sit, with a lighter
 * wash across the top so the industry label and status pill stay legible over
 * a bright sky. Lives inside the media so it stacks under the overlay text.
 */
.listing-card-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #00000073 0, #00000026 32%, #0000008c 78%, #000000d9 100%)
}

/* ---- hero: the four overlay elements ---- */

.listing-card-status,
.listing-card-industry,
.listing-card-internal-id,
.listing-card-title,
.listing-card-location {
	z-index: 2;
	grid-area: 1 / 1 / 2 / -1;
	margin: 0
}

/*
 * None of the overlay text is interactive, so it must not swallow clicks meant
 * for the image link underneath. The title's own anchor is handed back.
 */
.listing-card-status,
.listing-card-industry,
.listing-card-internal-id,
.listing-card-location,
.listing-card-title {
	pointer-events: none
}

.listing-card-title a {
	pointer-events: auto
}

/*
 * Status pill. One treatment for every value: the renderer prints the label as
 * text with no machine-readable hook, and CSS cannot match on text content, so
 * per-status colours would need a data-attribute in PHP. Teal reads cleanly
 * over any photograph. Active is deliberately unbadged (see the renderer).
 */
.listing-card-status {
	display: inline-flex;
	align-self: start;
	justify-self: end;
	align-items: center;
	gap: 6px;
	margin: 14px;
	padding: 5px 12px 5px 10px;
	background: var(--color-teal);
	color: var(--color-white)
}

.listing-card-status::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor
}

.listing-card-industry {
	align-self: start;
	justify-self: start;
	max-width: calc(100% - 150px);
	margin: 18px 16px 0;
	color: #ffffffd1
}

/*
 * Listing ID and location share the foot of the hero — ID right, location
 * left — so neither needs to know the other's height. Both are bottom-aligned,
 * which keeps them level even when the location wraps.
 */
.listing-card-internal-id {
	align-self: end;
	justify-self: end;
	margin: 0 16px 16px;
	color: var(--color-white)
}

.listing-card-location {
	display: flex;
	align-self: end;
	justify-self: start;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 150px);
	margin: 0 0 16px 17px;
	color: #ffffffe6;
	/* The hero line is a place, not a meta tag — .text-12's uppercasing is dropped. */
	text-transform: none;
	letter-spacing: .2px
}

/* Masked so the pin picks up the colour above rather than being baked white. */
.listing-card-location::before {
	content: '';
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS42NjQgMTMuNjc0IDEuNjU5IDkuNjdhNS42NjQgNS42NjQgMCAxIDEgOC4wMSAwem0zLjExNS00LjlhNC40MDUgNC40MDUgMCAxIDAtNi4yMyAwbDMuMTE1IDMuMTE1em0tMy4xMTUtMS44NWExLjI1OSAxLjI1OSAwIDEgMSAwLTIuNTE5IDEuMjU5IDEuMjU5IDAgMCAxIDAgMi41MTgiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") center/contain no-repeat;
	mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS42NjQgMTMuNjc0IDEuNjU5IDkuNjdhNS42NjQgNS42NjQgMCAxIDEgOC4wMSAwem0zLjExNS00LjlhNC40MDUgNC40MDUgMCAxIDAtNi4yMyAwbDMuMTE1IDMuMTE1em0tMy4xMTUtMS44NWExLjI1OSAxLjI1OSAwIDEgMSAwLTIuNTE5IDEuMjU5IDEuMjU5IDAgMCAxIDAgMi41MTgiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") center/contain no-repeat
}


/* 8. Card — title
   --------------------------------------------------------------------------
   Bottom-anchored inside the hero so it grows upward, clearing the location
   line beneath it. Clamped at three lines: the hero row stretches to fit an
   over-long public_advertised_title rather than letting it ride up over the
   industry label.
   ========================================================================== */

.listing-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	align-self: end;
	justify-self: stretch;
	margin: 0 18px 50px;
	overflow: hidden;
	color: var(--color-white)
}

/* Nothing sits below it, so the title takes the location's place. */
.listing-card-item:not(:has(.listing-card-location)):not(:has(.listing-card-internal-id)) .listing-card-title {
	margin-bottom: 16px
}

.listing-card-title a {
	color: inherit;
	transition: color .2s var(--ease)
}

.listing-card-item:hover .listing-card-title a,
.listing-card-title a:focus-visible,
.listing-card-title a:hover {
	color: var(--color-green)
}


/* 9. Card — spec grid: asking price + financials
   --------------------------------------------------------------------------
   One two-column table. Asking price is the first cell and the financials
   auto-flow after it, so the block reads as a single 2-up grid rather than a
   headline row with a table bolted underneath:

     ┌──────────────────┬──────────────────┐
     │ ASKING PRICE     │ ANNUAL SALES     │
     ├──────────────────┼──────────────────┤
     │ SELLER DISCR. E. │ SDE MULTIPLE     │
     ├──────────────────┼──────────────────┤
     │ SDE MARGIN       │ FF&E             │
     └──────────────────┴──────────────────┘

   Price and financials are separate elements in the markup (a <p> and a <ul>),
   so the <ul> is display:contents — that dissolves it and lets its rows land
   in the card's own grid beside the price. It is the only way to get them into
   one grid without touching the renderer.

   Because the price takes column 1 of the first spec row, the financials'
   column parity is inverted: financial 1 sits in column 2, financial 2 in
   column 1, and so on. Hence the even-child column rule below, not odd.

   Cells carry their own rules rather than the <ul> carrying them, because the
   renderer always emits the list element — whitespace and all, so :empty will
   not catch it — even for a listing with no financial fields set. A stray
   hairline under an otherwise empty card is the bug that pattern avoids.

   Labels stack above figures. Inline, as first drawn, a cell is about 180px at
   three columns, which is not enough to set "Seller Discretionary Earnings"
   beside its value; letting only that one cell wrap left the two columns of a
   row visibly out of step.

   NOTE: the "Asking Price" label is generated here because the renderer emits
   the value alone, and an unlabelled figure in a labelled grid reads wrong. It
   is the one piece of copy in this file. To make it translatable, wrap the
   value in inc/listing-listing.php and delete the ::before rule below.
   ========================================================================== */

.listing-card-price,
.listing-card-financial {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	margin: 0;
	padding: 11px 17px 12px;
	border-bottom: 1px solid var(--color-grey-300);
	color: var(--color-ink)
}

/* Pinned: it must lead the grid, and the financials flow around it. */
.listing-card-price {
	grid-area: 2 / 1
}

/* Dissolved so the <li> rows become cells of the card grid. */
.listing-card-financials {
	display: contents
}

/* Column rule. Price is always column 1; of the financials, the even ones are. */
.listing-card-price,
.listing-card-financial:nth-child(even) {
	border-right: 1px solid var(--color-grey-300)
}

/* A final cell alone on its row spans instead, so no rule dangles mid-card. */
.listing-card-financial:nth-child(even):last-child {
	grid-column: 1 / -1;
	border-right: 0
}

/* Same, for a listing whose financial fields are all empty. */
.listing-card-item:not(:has(.listing-card-financial)) .listing-card-price {
	grid-column: 1 / -1;
	border-right: 0
}

.listing-card-price::before,
.listing-card-financial-label {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--color-blue)
}

.listing-card-price::before {
	content: 'Asking Price'
}

.listing-card-financial-value {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-ink);
	white-space: nowrap
}

/* The headline figure, so a step up from the cells beside it. "Market to
   Determine" goes here too, which is why this one is allowed to wrap. */
.listing-card-price {
	font-size: 16px
}


/* 10. Card — bullets (state A) and description fallback (state B)
   --------------------------------------------------------------------------
   Exactly one of these renders per card. Bullets come from card_bullet_1-3 and
   win when set; otherwise the trimmed description paragraph takes the slot.
   They share a grid row, the same padding and the same colour, so a grid
   mixing the two states stays even — the paragraph is a supported state, not a
   fallback that should look degraded. Only the leading differs, because prose
   wants more air than three short lines do.
   ========================================================================== */

.listing-card-bullets,
.listing-card-description {
	grid-area: 10 / 1 / 11 / -1;
	margin: 0;
	padding: 16px 17px 20px;
	color: var(--color-ink)
}

.listing-card-bullets {
	display: grid;
	align-content: start;
	gap: 9px;
	list-style: none
}

.listing-card-bullet {
	position: relative;
	padding-left: 17px;
	line-height: 1.45
}

.listing-card-bullet::before {
	content: '';
	position: absolute;
	top: .58em;
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--color-grey-900)
}

.listing-card-description {
	line-height: 1.6
}


/* 11. Card — actions footer
   --------------------------------------------------------------------------
   The tinted bar that closes the card. "Sign NDA" is conditional (only
   listings carrying an NDA link get it), so the divider hangs off that link
   rather than sitting between two assumed children.
   ========================================================================== */

.listing-card-actions {
	display: flex;
	flex-wrap: wrap;
	grid-area: 11 / 1 / 12 / -1;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 14px;
	padding: 14px 17px;
	background: var(--color-grey-100);
	border-top: 1px solid var(--color-grey-300)
}

.listing-card-details-btn,
.listing-card-nda-btn {
	display: inline-flex;
	align-items: center;
	letter-spacing: 2px;
	transition: color .2s var(--ease)
}

.listing-card-details-btn {
	color: var(--color-grey-700)
}

/* Sign NDA is a solid green button (ink text, bold), so it no longer
   needs the hairline divider that separated two text links. */
.listing-card-nda-btn {
	padding: 6px 12px;
	color: var(--color-ink);
	background: var(--color-green);
	transition: background-color .2s var(--ease)
}

.listing-card-details-btn:focus-visible,
.listing-card-details-btn:hover {
	color: var(--color-teal)
}

.listing-card-nda-btn:focus-visible,
.listing-card-nda-btn:hover {
	color: var(--color-ink);
	background: var(--color-green-hover)
}


/* 12. Load more, end-of-results, empty + error
   ========================================================================== */

.listing-listing .listing-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, calc(1.4286vw + 12.5714px), 40px)
}

.listing-listing .listing-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	background: var(--color-green);
	color: var(--color-ink);
	letter-spacing: 2.56px;
	cursor: pointer;
	transition: all .25s var(--ease)
}

.listing-listing .listing-more-btn:focus-visible,
.listing-listing .listing-more-btn:hover {
	background: var(--color-green-hover);
	color: var(--color-ink)
}

.listing-listing .listing-end {
	margin: 0;
	color: var(--color-grey-900);
	text-align: center
}

/* Shared by the no-results message and the AJAX error, which reuse one class. */
.listing-listing .listing-empty {
	margin: 0;
	padding-block: clamp(40px, 5vw, 72px);
	text-align: center;
	color: var(--color-grey-900)
}


/* 13. Loading + entrance animation
   ========================================================================== */

.listing-listing .listing-results-body.is-loading .listing-grid {
	opacity: .3;
	pointer-events: none
}

.listing-listing .listing-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: clamp(40px, 8vw, 96px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s var(--ease), visibility .25s var(--ease)
}

.listing-listing .listing-results-body.is-loading .listing-loader {
	opacity: 1;
	visibility: visible
}

.listing-listing .listing-spinner {
	width: 60px;
	aspect-ratio: 1;
	background: linear-gradient(90deg, var(--color-green) 50%, var(--color-blue) 0) top/100% 50% no-repeat, linear-gradient(90deg, var(--color-gold) 50%, var(--color-teal) 0);
	-webkit-mask: linear-gradient(var(--color-black) 0 0) 0 0/50% 50% no-repeat;
	animation: listing-spin 2s infinite
}

/* Load-more appends in place, so the button reports busy instead of the grid dimming. */
.listing-listing .listing-more-btn[aria-busy=true] {
	opacity: .75;
	pointer-events: none
}

.listing-listing .listing-more-btn[aria-busy=true]::after {
	--_g: no-repeat radial-gradient(farthest-side, var(--color-white) 90%, #0000);
	content: '';
	width: 20px;
	height: 20px;
	margin-left: 12px;
	aspect-ratio: 1;
	background: var(--_g), var(--_g), var(--_g);
	background-size: 25% 25%;
	animation: dot-spin 1s infinite
}

/* --enter-delay is set per card by listing-listing.js to stagger the batch. */
.listing-card-item.is-entering {
	animation: listing-card-in .45s var(--ease) both;
	animation-delay: var(--enter-delay, 0ms)
}

@keyframes listing-spin {
	0% {
		-webkit-mask-position: 0 0
	}

	25% {
		-webkit-mask-position: 100% 0
	}

	50% {
		-webkit-mask-position: 100% 100%
	}

	75% {
		-webkit-mask-position: 0 100%
	}

	100% {
		-webkit-mask-position: 0 0
	}
}

@keyframes listing-card-in {
	from {
		opacity: 0;
		transform: translateY(14px)
	}

	to {
		opacity: 1;
		transform: none
	}
}


/* 14. Responsive
   --------------------------------------------------------------------------
   Breakpoints match the ones already in this file. Three filters plus the
   search field do not fit one row below ~1200px, so the filter group drops to
   its own line earlier than the Blog Listing block's two filters do.
   ========================================================================== */

@media screen and (max-width:1199px) {

	.listing-filter-bar .listing-filter-bar-inner {
		gap: 14px 24px
	}

	.listing-listing .listing-search {
		flex: 1 1 320px
	}

	.listing-listing .listing-filters {
		flex: 1 1 100%;
		justify-content: flex-end;
		margin-left: 0
	}
}

@media screen and (max-width:1024px) {

	.listing-listing .listing-search {
		flex: 1 1 100%
	}

	.listing-listing .listing-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.listing-card-media {
		aspect-ratio: 4 / 3
	}

	.listing-listing .listing-sidebar {
		position: sticky;
		top: calc(150px + var(--wp-admin--admin-bar--height, 0px));
	}
}

@media screen and (max-width:767px) {

	.listing-listing .listing-sidebar {
		position: relative;
		top: unset;
	}

	.listing-listing .listing-grid {
		gap: 20px
	}

	.listing-listing .listing-results-layout {
		grid-template-columns: minmax(0, 1fr)
	}

	.listing-listing .listing-filters {
		justify-content: flex-start;
		gap: 12px
	}

	/* Clear moves after the dropdowns so the filters themselves lead the row. */
	.listing-listing .listing-clear {
		order: 2
	}

	.listing-listing .listing-filter {
		order: 1;
		flex: 1 1 auto
	}

	.listing-listing .listing-filter[data-listing-filter=price_max],
	.listing-listing .listing-filter[data-listing-filter=status] {
		min-width: 150px
	}

	.listing-listing .listing-filter-toggle {
		gap: 10px;
		padding-inline: 12px
	}

	.listing-listing .listing-results-body {
		min-height: 320px
	}

	/*
	 * One column at full width — a 5:4 hero would be taller than the phone.
	 * 16:9 keeps the image to a banner and the spec grid above the fold.
	 */
	.listing-card-media {
		aspect-ratio: 16 / 9
	}
}

@media screen and (max-width:600px) {

	.listing-listing .listing-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 12px
	}

	.listing-listing .listing-filter,
	.listing-listing .listing-filter[data-listing-filter=price_max],
	.listing-listing .listing-filter[data-listing-filter=status] {
		min-width: 0
	}

	.listing-listing .listing-clear {
		justify-content: center;
		padding-block: 4px
	}

	/* Full-bleed panel: the trigger is now full width, so anchoring right alone would look detached. */
	.listing-listing .listing-filter-panel {
		right: 0;
		left: 0;
		max-height: 260px
	}

	.listing-listing .listing-filter-option {
		white-space: normal
	}

	.listing-card-media {
		aspect-ratio: 3 / 2
	}
}

@media screen and (max-width:480px) {

	.listing-card-media {
		aspect-ratio: 4 / 3
	}

	/*
	 * The spec grid goes single column. At ~290px of card a two-up cell is
	 * about 130px, which a label like "Seller Discretionary Earnings" cannot
	 * hold even stacked above its figure. Every cell spans, so the column rule
	 * has nothing left to divide.
	 */
	.listing-card-item {
		grid-template-columns: minmax(0, 1fr)
	}

	.listing-card-price,
	.listing-card-financial {
		padding-inline: 14px;
		border-right: 0
	}

	.listing-card-bullets,
	.listing-card-description {
		padding: 14px 14px 18px
	}

	.listing-card-actions {
		padding-inline: 14px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.listing-card-nda-btn::before {
		height: 1px;
		width: 20px;
	}

	.listing-card-nda-btn {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.listing-card-industry,
	.listing-card-location {
		margin-inline: 14px
	}

	/*
	 * The listing ID moves above the location rather than sharing its line:
	 * below roughly 360px the two meet in the middle of the hero's foot. The
	 * title's clearance grows by one line to match.
	 */
	.listing-card-internal-id {
		justify-self: start;
		margin: 0 14px 33px
	}

	.listing-card-internal-id,
	.listing-card-location {
		max-width: 100%;
	}

	.listing-card-title {
		margin: 0 14px 57px
	}

}


/* 15. Reduced motion
   ========================================================================== */

@media screen and (prefers-reduced-motion:reduce) {

	.listing-card-item:hover,
	.listing-card-item:focus-within {
		transform: none
	}

	.listing-card-item:hover .listing-card-img,
	.listing-card-item:focus-within .listing-card-img {
		transform: none
	}

	.listing-card-item.is-entering {
		animation: none
	}

	.listing-listing .listing-more-btn[aria-busy=true]::after,
	.listing-listing .listing-spinner {
		animation-duration: 2s !important
	}
}

/* 16. Dark header — single-listing
   ==========================================================================
   The default .site-header sits transparent over a hero image and only
   picks up a translucent backdrop once .is-stuck fires. Listing detail
   pages render template-parts/header/site-header-dark.php instead, which
   adds .dark to the same markup, so everything below is a colour swap on
   top of the base header — no layout is redefined and the light header is
   untouched.

   The bar is solid at every scroll position, so .is-stuck must not repaint
   it and the backdrop blur (which costs a compositor layer for nothing
   behind an opaque surface) is switched off. Logo, nav links, CTA outline
   and burger bars are already white in the base rules and stay that way;
   the white dropdown panels are shared with the light header by design. */

:root {
	--header-dark-bg: #5A5B5B;
}

.site-header.dark,
.site-header.dark.is-stuck {
	background: var(--header-dark-bg);
	border-bottom: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media screen and (max-width:991px) {

	/* The drawer slides out from under an opaque bar, so it matches the bar
	   instead of the base --color-ink, which would read as a second panel. */
	.site-header.dark .main-nav {
		background: var(--header-dark-bg);
	}
}

/* 17. Listing hero — light two-column banner
   ==========================================================================
   The hero reuses .inner-banner for its markup, but that base is built for
   a dark photographic band: full-bleed image, a black gradient scrim, a
   tall min-height and content bottom-aligned inside it. The listing hero is
   the opposite — white, no scrim, text in a left column with the photo
   beside it — so the rules below neutralise those four base behaviours and
   rebuild the band as a grid. Everything is scoped to .listing-banner, so
   the post hero that shares .inner-banner is untouched.

   Sizes here were read off the approved comp at a 1440px viewport, where
   --container resolves to its 1340px maximum. ========================== */

.listing-banner.inner-banner {
	display: block;
	min-height: 0;
	background: var(--color-white);
	/* The dark header is fixed and opaque on this template, so the band
	   starts below it rather than sliding under it. */
	padding-block: calc(var(--header-h) + clamp(28px, 3.2vw, 56px)) clamp(40px, 4.4vw, 72px);
}

/* The scrim only makes sense over a photo; there is none behind this band. */
.listing-banner.inner-banner::before {
	content: none;
}

.listing-banner .listing-banner-wrap {
	display: grid;
	/* 1340px comp: a 632px text column, a 46px gutter and a 471px photo. */
	grid-template-columns: minmax(0, 1fr) minmax(0, .745fr);
	align-items: center;
	gap: clamp(28px, 3.4vw, 46px);
}

/* --- Text column ------------------------------------------------------- */

/* Status and industry share a row, with print/share pushed to the far end
   of the text column — not the full band, so they stay clear of the photo. */
.listing-banner .listing-banner-topline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.listing-banner .listing-banner-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

/* .blog-card-format ships a translucent-white chip for use over a photo;
   on white it has to become the solid green pill the comp shows. */
.listing-banner .listing-banner-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	background: var(--color-green);
	color: var(--color-ink);
}

.listing-banner .listing-banner-status::before {
	content: '';
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

.listing-banner .listing-banner-industry {
	margin: 0;
	color: var(--color-ink);
	letter-spacing: .16em;
}

.listing-banner .listing-banner-utilities {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

.listing-banner .listing-print-btn,
.listing-banner .listing-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	background: 0 0;
	border: 0;
	color: var(--color-grey-700);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s var(--ease);
}

.listing-banner .listing-print-btn:focus-visible,
.listing-banner .listing-print-btn:hover,
.listing-banner .listing-share-btn:focus-visible,
.listing-banner .listing-share-btn:hover {
	color: var(--color-green);
	text-decoration: none;
}

/* pointer-events keeps the SVG from becoming the click target inside the
   share button, so the delegated handler always sees the button itself. */
.listing-banner .listing-banner-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	pointer-events: none;
}

/* .inner-title already resolves the heading size, so only the colour
   and the rhythm around it need setting. */
.listing-banner .listing-banner-title {
	margin-block: 36px 22px;
	color: var(--color-ink);
}

/* Caption under the title. Comp used grey-500; that sat too close to
   white, so step to grey-700 — still between the light grey and ink. */
.listing-banner .listing-banner-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	color: var(--color-grey-500);
	font-size: 16px;
	letter-spacing: .04em;
}

.listing-banner .listing-banner-location {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}

.listing-banner .listing-banner-location .listing-banner-icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/* The comp draws a short rule between location and ID. The markup keeps a
   real em dash so the meta still reads without CSS; the glyph is indented
   out of the clipped box and the box itself becomes the rule. */
.listing-banner .listing-banner-meta-sep {
	display: inline-block;
	flex: 0 0 auto;
	width: 25px;
	height: 1px;
	background: currentColor;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.listing-banner .listing-banner-id {
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* A 20px lead paragraph in the comp, not the .text-16 the markup carries,
   and set in the title's own ink rather than a softer body grey. 1.5 keeps
   the three lines the comp shows from drifting apart at that size. */
.listing-banner .listing-banner-summary {
	/* 680px at 20px — the measure both comps wrap the lead on. */
	max-width: 34em;
	margin-block: 32px 0;
	color: var(--color-ink);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
}

.listing-banner .listing-banner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 32px;
}

.listing-banner .listing-banner-nda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	background: var(--color-green);
	border: 1px solid var(--color-green);
	color: var(--color-ink);
	letter-spacing: .14em;
	text-decoration: none;
	transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.listing-banner .listing-banner-nda-btn:focus-visible,
.listing-banner .listing-banner-nda-btn:hover {
	background: var(--color-green-hover);
	border-color: var(--color-green-hover);
	color: var(--color-ink);
	text-decoration: none;
}

/* The secondary action is a plain jump link to the form in the aside, so it
   reads as text rather than competing with the filled NDA button. */
.listing-banner .listing-banner-advisor-btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 2px;
	color: var(--color-ink);
	letter-spacing: .14em;
	text-decoration: none;
	transition: color .2s var(--ease);
}

.listing-banner .listing-banner-advisor-btn:focus-visible,
.listing-banner .listing-banner-advisor-btn:hover {
	color: var(--color-green);
	text-decoration: none;
}

.listing-banner .listing-banner-note {
	margin: 26px 0 0;
	color: var(--color-grey-500);
}

/* --- Photo column ------------------------------------------------------ */

/* The comp's photo stands roughly 48px proud of the text block top and
   bottom, which puts it near 480px once the column is 552px wide. */
.listing-banner .listing-banner-media {
	align-self: stretch;
	min-height: clamp(260px, 33vw, 480px);
	overflow: hidden;
}

.listing-banner .listing-banner-media .listing-video-play {
	display: block;
	height: 100%;
	overflow: hidden;
}

/* Same top-pinned overscan as .listing-card-img — long titles stretch this
   box tall enough to show a 16:9 photo's footer unless we clip it. */
.listing-banner .listing-banner-media img {
	display: block;
	width: 100%;
	height: 136%;
	object-fit: cover;
	object-position: top center;
}

/* --- Responsive -------------------------------------------------------- */

@media screen and (max-width:991px) {

	/* One column below the nav breakpoint, photo first so the page still
	   opens on an image the way the comp does on desktop. */
	.listing-banner .listing-banner-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.listing-banner .listing-banner-media {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.listing-banner .listing-banner-title {
		margin-block: 28px 18px;
	}

	.listing-banner .listing-banner-summary {
		margin-top: 28px;
	}
}

@media screen and (max-width:767px) {
	.listing-banner .listing-banner-meta {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}
}

@media screen and (max-width:575px) {

	/* Utilities drop under the tags rather than squeezing onto their row. */
	.listing-banner .listing-banner-utilities {
		margin-left: 0;
	}

	/* Full-width stacked buttons, so neither action is a small tap target. */
	.listing-banner .listing-banner-actions {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.listing-banner .listing-banner-advisor-btn {
		justify-content: center;
	}
}

/* 18. Listing detail — breadcrumb, body, overview, aside
   ==========================================================================
   The listing body markup shipped without any styling of its own, so this
   section dresses all of it: the breadcrumb bar above the hero, the
   two-column body grid, the overview table, the narrative sections, the
   real-estate panel and the advisor card.

   Geometry comes off the approved comp at a 1440px viewport, where
   --container resolves to 1340px: an 887px main column, an 18px gutter and
   a 435px aside. Those three are the only hard numbers; everything inside
   them is expressed in tokens so the columns can move without a rewrite.

   The accent is the theme's own --color-blue. An earlier pass read the
   comp's pixels as if they were CSS values and invented a darker blue from
   them, but the comps are captured in a wider gamut than sRGB, so every
   saturated colour samples duller than it was authored — the brand green
   lands at #81ad12 the same way. Neutrals come through unchanged, which is
   why the greys below are still read straight off the comp. ========== */

:root {
	--listing-accent: var(--color-blue);
	--listing-rule: #ededed;
	--listing-panel: #d4d4d4;
	/* The comp sets body copy in the same ink as its headings. */
	--listing-copy: var(--color-ink);
	--listing-aside-w: 435px;
	--listing-col-gap: 18px;
}

/* --- Breadcrumb -------------------------------------------------------- */

/* A static light bar, unlike .breadcrumb-wrapper, which is fixed and
   painted for white-on-photo. It carries the fixed header's height so the
   page below it starts in the right place. */
.listing-breadcrumb-bar {
	margin-top: var(--header-h);
	border-bottom: 1px solid var(--listing-rule);
	background: var(--color-white);
}

.listing-breadcrumb-bar .enlign-container {
	padding-block: 18px;
}

/* With the bar taking over the header offset, the hero only needs its own
   breathing room — see the padding it sets for itself in section 17. */
.listing-breadcrumb-bar+.listing-banner.inner-banner {
	padding-top: clamp(28px, 3.2vw, 56px);
}

.listing-breadcrumb-bar .breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.listing-breadcrumb-bar .breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The trail leads in dark and fades out: the links you can still follow
   carry the emphasis, and the page you are already on recedes. */
.listing-breadcrumb-bar a {
	color: var(--color-ink);
	font-weight: 500;
	text-decoration: none;
	transition: color .2s var(--ease);
}

.listing-breadcrumb-bar a:focus-visible,
.listing-breadcrumb-bar a:hover {
	color: var(--listing-accent);
	text-decoration: none;
}

.listing-breadcrumb-bar .breadcrumb-separator {
	color: var(--color-grey-500);
}

.listing-breadcrumb-bar .breadcrumb-item.is-current [aria-current] {
	color: var(--color-grey-500);
}

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

.listing-body {
	padding-block: 0 50px;
	background: var(--color-white);
}

/* GeneratePress makes .site-content a flex row. One listing's leftover
   <div class="section"> inside a <ul> (DONUT2) can shrink-wrap the
   content-area to the aside width and zero the main column. */
.single-listing .content-area,
.single-listing .site-main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.listing-body .listing-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--listing-aside-w);
	align-items: start;
	gap: var(--listing-col-gap);
	width: 100%;
}

.listing-main {
	min-width: 0;
	width: 100%;
}

/* --- Overview table ---------------------------------------------------- */

/* The comp doesn't show an asking-price line; this keeps the template's own
   one readable above the table instead of dropping the value silently. */
.listing-overview .listing-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35em;
	margin-bottom: 18px;
	color: var(--color-ink);
}

/* Two equal columns of label/value cells, hairlines between rows and a
   single divider down the middle. Cells are the grid items themselves, so
   the rule stays continuous however many rows there are. */
.listing-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--listing-rule);
}

.listing-overview-grid-wide {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 12px;
}

/* The label runs long here, so it holds its width and the prose flows
   beside it left-aligned, rather than both sides shrinking to fit. */
.listing-overview-grid-wide .listing-overview-row dt {
	flex: 0 0 auto;
	max-width: 42%;
}

.listing-overview-grid-wide .listing-overview-row dd {
	flex: 1 1 auto;
	text-align: left;
}

.listing-overview-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 47px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--listing-rule);
	border-right: 1px solid var(--listing-rule);
}

/* Only odd cells get the centre rule, so the last row of an odd-length
   table doesn't draw one into empty space. */
.listing-overview-grid .listing-overview-row:nth-child(odd) {
	border-left: 1px solid var(--listing-rule);
}

.listing-overview-grid-wide .listing-overview-row {
	align-items: center;
	border: 1px solid var(--listing-rule);
	border-top: 0;
}

.listing-overview-row dt {
	flex: 0 1 auto;
	color: var(--listing-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
}

.listing-overview-row dd {
	flex: 0 1 auto;
	margin: 0;
	color: var(--color-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
}

/* Day-by-day hours (GYM9) span the table so each day fits one line.
   Label stays top-aligned; values read left as a list. */
.listing-overview-row-hours {
	grid-column: 1 / -1;
	align-items: flex-start;
}

.listing-overview-grid .listing-overview-row-hours:nth-child(odd) {
	border-right: 0;
}

.listing-overview-row-hours dt {
	flex: 0 0 auto;
	max-width: 42%;
}

.listing-overview-row-hours dd,
.listing-hours-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--hours-rows, 4), auto);
	grid-auto-flow: column;
	column-gap: 32px;
	row-gap: 4px;
	text-align: left;
}

.listing-hours-line {
	min-width: 0;
}

/* --- Narrative sections ------------------------------------------------ */

.listing-main>section+section {
	margin-top: clamp(34px, 3.2vw, 46px);
	padding-top: clamp(34px, 3.2vw, 46px);
	border-top: 1px solid var(--listing-rule);
}

.listing-main>.listing-description {
	margin-top: clamp(40px, 3.8vw, 56px);
}

/* The overview table closes with a rule of its own, so the section after it
   would otherwise draw a second one a few pixels below. */
.listing-main>.listing-overview+section {
	padding-top: 0;
	border-top: 0;
}

/* Shared by "Summary" and "Related Asset" — a dotted accent label. */
.listing-section-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--listing-accent) !important;
	letter-spacing: .16em;
}

.listing-section-eyebrow::before {
	content: '';
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

.listing-main>section>h2 {
	margin: 0 0 18px;
	color: var(--color-ink);
}

.listing-main>section p,
.listing-description-content p,
.listing-re-copy p {
	color: var(--listing-copy);
	line-height: 1.7;
	margin: 0 0 1em;
}

.listing-main>section p:last-child,
.listing-description-content p:last-child,
.listing-re-copy p:last-child {
	margin-bottom: 0;
}

/* Pipedrive/HTML often drops an empty <p> before a nested list ("Specialized
   Services:" then a blank line). Hide those so the sub-list sits under the label. */
.listing-description-content p:empty,
.listing-description-content li>p:empty {
	display: none;
}

/* In-body subheads (Highlights, IP, Growth) are plain .section-title divs
   with no theme style — they were sitting flush against the copy above. */
.listing-description-content .section-title {
	margin: 1.35em 0 .55em;
	color: var(--color-ink);
	font-weight: 500;
	line-height: 1.4;
}

.listing-description-content .section-title:first-child {
	margin-top: 0;
}

/* Beat GeneratePress `ul { margin-left: 3em }` (60px at 20px type) so lists
   line up with the paragraphs instead of hanging in a gutter. */
.listing-main>section ol,
.listing-main>section ul,
.listing-description-content ol,
.listing-description-content ul,
.listing-re-copy ol,
.listing-re-copy ul {
	margin: 0 0 1em;
	padding-left: 1.3em;
	list-style: revert;
}

.listing-main>section li+li,
.listing-description-content li+li,
.listing-re-copy li+li {
	margin-top: .55em;
}

.listing-description-content li>ul,
.listing-description-content li>ol,
.listing-re-copy li>ul,
.listing-re-copy li>ol {
	margin: .45em 0 0;
	padding-left: 1.2em;
}

/* --- Real estate panel -------------------------------------------------- */

.listing-re-panel {
	padding: clamp(22px, 2.1vw, 30px);
	background: var(--listing-panel);
}

.listing-re-label {
	margin: 0 0 12px;
	color: var(--listing-accent) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.listing-re-panel .listing-re-copy p {
	color: var(--listing-copy);
	line-height: 1.7;
}

/* Same two-column read as the overview, but rules would fight the panel
   fill, so the rows are spaced instead. */
.listing-re-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px clamp(24px, 2.6vw, 40px);
	margin: clamp(22px, 2.1vw, 30px) 0 0;
}

.listing-re-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.listing-re-row dt {
	color: var(--listing-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.listing-re-row dd {
	margin: 0;
	color: var(--color-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
	text-transform: uppercase;
}

.listing-disclosure-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(22px, 2.1vw, 30px);
}

.listing-disclosure-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	background: var(--color-green);
	border: 1px solid var(--color-green);
	color: var(--color-ink);
	letter-spacing: .12em;
	text-decoration: none;
	transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.listing-disclosure-btn:focus-visible,
.listing-disclosure-btn:hover {
	background: var(--color-green-hover);
	border-color: var(--color-green-hover);
	color: var(--color-ink);
	text-decoration: none;
}

/* --- Advisor card ------------------------------------------------------- */

.listing-advisor-card {
	padding: 26px;
	background: var(--listing-accent);
	color: var(--color-white);
}

.listing-advisor-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--color-white);
	letter-spacing: .16em;
}

.listing-advisor-eyebrow::before {
	content: '';
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

.listing-advisor-profile {
	display: flex;
	align-items: flex-start;
	gap: 17px;
	padding-bottom: 22px;
	border-bottom: 1px solid #ffffff24;
}

.listing-advisor-photo {
	width: 100px;
	height: auto;
	flex: 0 0 auto;
	object-fit: cover;
}

.listing-advisor-identity {
	min-width: 0;
}

.listing-advisor-name {
	margin: 0 0 6px;
	color: var(--color-white);
}

.listing-advisor-location,
.listing-advisor-position {
	margin: 0;
	color: #ffffffd9;
	line-height: 1.5;
}

.listing-advisor-contact {
	margin: 0;
	padding-block: 18px;
	border-bottom: 1px solid #ffffff24;
}

.listing-advisor-contact-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.listing-advisor-contact-row+.listing-advisor-contact-row {
	margin-top: 12px;
}

.listing-advisor-contact-row dt {
	color: #ffffffd9;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.listing-advisor-contact-row dd {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	text-align: right;
}

.listing-advisor-contact-row dd a {
	color: var(--color-white);
	text-decoration: none;
}

.listing-advisor-contact-row dd a:focus-visible,
.listing-advisor-contact-row dd a:hover {
	color: var(--color-green);
}

/* The comp sets the address apart from the plain phone number. */
.listing-advisor-email-link {
	letter-spacing: .04em;
	text-decoration: underline !important;
	text-transform: uppercase;
	text-underline-offset: 3px;
}

.listing-advisor-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 22px;
}

.listing-advisor-nda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	background: var(--color-green);
	border: 1px solid var(--color-green);
	color: var(--color-ink);
	letter-spacing: .14em;
	text-decoration: none;
	transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.listing-advisor-nda-btn:focus-visible,
.listing-advisor-nda-btn:hover {
	background: var(--color-green-hover);
	border-color: var(--color-green-hover);
	color: var(--color-ink);
	text-decoration: none;
}

.listing-advisor-contact-btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 2px;
	color: var(--color-white);
	letter-spacing: .14em;
	text-decoration: none;
	transition: color .2s var(--ease);
}

.listing-advisor-contact-btn:focus-visible,
.listing-advisor-contact-btn:hover {
	color: var(--color-green);
	text-decoration: none;
}

.listing-advisor-note {
	margin: 18px 0 0;
	color: var(--color-white);
	font-size: 14px;
	line-height: 1.6;
}

/* --- Contact advisor form + back link ----------------------------------- */

/* The last section of the main column, so it picks up the hairline and the
   spacing every narrative section above it carries. It sits on a photo, which
   is why nothing here turns the form light: framework.css paints Gravity Forms
   white-on-dark by default and only .theme-light flips them. */
.listing-contact-advisor {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(24px, 2.9vw, 42px);
	background: var(--color-ink);
	/* The banner and card both jump here, so keep the heading clear of the
	   fixed header when the browser lands on it. */
	scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Photo and scrim are two layers, not one background, so the blur stays on
   the picture and never reaches the form. The negative inset keeps the blur
   from feathering the card's own edges back to the page. */
.listing-contact-advisor::before {
	content: '';
	position: absolute;
	inset: -40px;
	z-index: -2;
	background: url("/wp-content/uploads/2026/09/Contact-Advisor-bg.png") center/cover no-repeat;
	filter: blur(14px);
}

.contact-form.theme-dark .gform_wrapper.gravity-theme .ginput_complex label,
.contact-form.theme-dark .gform_wrapper.gravity-theme .field_sublabel_above .gfield_description,
.contact-form.theme-dark .gform_wrapper.gravity-theme .gfield-choice-input+label {
	color: var(--color-white);
}

/* Heaviest on the left, under the heading and the labels; the comp lets the
   desk read through on the right, where only the field rules sit. */
.listing-contact-advisor::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, #14151580 0%, #14151566 55%, #1415155c 100%);
}

/* Both beat .listing-main>section>h2 / >section p, which paint this column's
   own copy in ink. */
.listing-main>.listing-contact-advisor>h2 {
	margin: 0 0 12px;
	color: var(--color-white);
}

.listing-main>.listing-contact-advisor p {
	color: #ffffffd9;
}

.listing-contact-advisor-byline {
	margin: 0;
	line-height: 1.5;
}

/* Same 9/19 call as the other green buttons: ink on #92B814, not white. */
.listing-contact-advisor .gform_wrapper.gravity-theme .gform_footer button,
.listing-contact-advisor .gform_wrapper.gravity-theme .gform_footer input,
.listing-contact-advisor .gform_wrapper.gravity-theme .gform_footer button:hover,
.listing-contact-advisor .gform_wrapper.gravity-theme .gform_footer input:hover {
	color: var(--color-ink);
}

.listing-contact-advisor .gform_wrapper.gravity-theme .gfield_label,
.listing-contact-advisor .gform_wrapper.gravity-theme .gfield_required,
.listing-contact-advisor .gform_wrapper.gravity-theme .gfield_required_asterisk,
.listing-contact-advisor .gform_wrapper.gravity-theme .ginput_complex label {
	color: var(--color-white);
}

/* "Contact me by" runs its three choices across one line in the comp. The
   consent checkboxes above it are their own field type and stay stacked. */
.listing-contact-advisor .gfield--type-checkbox .gfield_checkbox,
.listing-contact-advisor .gfield--type-multi_choice .gfield_checkbox {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

.listing-contact-advisor .gfield--type-checkbox .gchoice,
.listing-contact-advisor .gfield--type-multi_choice .gchoice {
	align-items: center;
}

/* Consent copy is a sentence, not a choice label — the comp sets it smaller
   and dimmer than the "Email / Phone / Text message" row below it. */
.listing-contact-advisor .gform_wrapper.gravity-theme .ginput_container_consent label {
	font-size: 15px;
	line-height: 1.6;
	color: #ffffffd9;
}

.listing-back-wrap {
	padding-bottom: 50px;
}

/* Brand green, not the page's blue accent: the comp sets this the way it sets
   the other "back / view all" links. */
.listing-back {
	color: var(--color-green);
	letter-spacing: .12em;
}

.listing-back:focus-visible,
.listing-back:hover {
	color: var(--color-teal);
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width:1199px) {

	/* The 435px aside is a comp constant; below that width it has to give. */
	:root {
		--listing-aside-w: 340px;
		--listing-col-gap: 28px;
	}
}

@media screen and (max-width:991px) {

	.listing-body .listing-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* One column of label/value, so neither side is squeezed to a word. */
	.listing-overview-grid,
	.listing-re-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* .listing-overview-grid .listing-overview-row:nth-child(odd):not(:last-child) {
		border-right: 0;
	} */

	.listing-overview-row {
		border: 1px solid var(--listing-rule);
		border-top: 0;
	}

	.listing-overview-row-hours dd,
	.listing-hours-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

@media screen and (max-width:575px) {

	/* Label above value — side by side leaves too little for either. */
	.listing-overview-grid-wide .listing-overview-row,
	.listing-re-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.listing-overview-row dd,
	.listing-re-row dd {
		text-align: left;
	}

	.listing-advisor-profile {
		flex-direction: column;
	}

	.listing-advisor-actions,
	.listing-disclosure-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.listing-advisor-contact-btn,
	.listing-disclosure-btn {
		justify-content: center;
	}
}


/* ==========================================================================
   Related listings — single listing
   --------------------------------------------------------------------------
   Same shell as .related-posts (grey band, title, arrows, slick track that
   bleeds to the viewport edge) on the listing card renderer, with one thing
   the comp does differently: the cards are wider than a third of the
   container, so the third one runs past its right edge. That peek is what
   makes the row read as a slider rather than a finished grid of three.
   ========================================================================== */

.related-listings {
	--related-gap: 16px;
	/* Cards per container width. Deliberately not a whole number — see above. */
	--related-per-view: 2.6;
	overflow-x: clip;
	padding-block: 50px clamp(50px, calc(4.8193vw + .6024px), 70px);
	background: var(--color-grey-100);
}

.related-listings .related-listings-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: 30px;
}

.related-listings .related-listings-actions {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
}

.related-listings .related-listings-arrows {
	display: flex;
	align-items: center;
	gap: 20px;
}

.related-listings .related-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: 0 0;
	color: var(--color-ink);
	line-height: 1;
	cursor: pointer;
	transition: color .3s var(--ease);
}

.related-listings .related-arrow svg {
	width: clamp(34px, 3.4vw, 49px);
	height: auto;
}

.related-listings .related-arrow:not(.slick-disabled):focus-visible,
.related-listings .related-arrow:not(.slick-disabled):hover {
	color: var(--color-green);
}

/* Without JavaScript the cards are a plain grid inside the container; app.js
   turns the row into a slick slider on load and the grid switches off. */
.related-listings .related-slider {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--related-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-listings .related-slider.slick-initialized {
	display: block;
}

/* Lets the track run to the window edge, so the card past the container edge
   is clipped by the viewport rather than by the column. */
.related-listings .related-slider .slick-list {
	margin-right: calc(50% - 50vw);
}

.related-listings .related-slider .slick-track {
	display: flex;
	align-items: stretch;
}

.related-listings .related-slider .slick-slide {
	flex: 0 0 auto;
	width: calc((min(var(--container), 100vw - var(--gutter) * 2) - var(--related-gap) * 2) / var(--related-per-view));
	height: auto;
	margin-right: var(--related-gap);
}

/*
 * The card IS the slide here — the renderer's <article> is a direct child of
 * the track, and slick's rows:1 leaves it unwrapped. So slick.css's
 * `.slick-initialized .slick-slide { display: block }` lands straight on
 * .listing-card-item and outranks its own `display: grid`, which collapses
 * the whole card: the hero overlay (industry, ID, title, location) drops out
 * of the image and into the flow as white-on-white text, the spec grid loses
 * its two columns, and .listing-card-body / .listing-card-financials stop
 * dissolving, so their children never reach the card's rows at all.
 *
 * Restating the display is the whole fix. Scoped to this slider so the
 * listings archive — where no slick class exists — is untouched.
 */
.related-listings .related-slider .slick-slide.listing-card-item {
	display: grid;
}

/* Breakpoints follow the slick config in app.js, not the theme's usual ones,
   so the CSS width and the slide count change together. */
@media screen and (max-width:1024px) {

	.related-listings {
		--related-per-view: 1.8;
	}

	.related-listings .related-slider {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width:767px) {

	.related-listings .related-slider {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One card fills the column — no peek left to show at this width. */
	.related-listings .related-slider .slick-slide {
		width: min(var(--container), 100vw - var(--gutter) * 2);
	}

	.related-listings .related-listings-head {
		align-items: flex-start;
	}

	.related-listings .related-listings-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* ==========================================================================
   QA pass 9/28 (Brittany / Chris / Karyann QA doc)
   ========================================================================== */

/* Homepage "Where To Begin" text boxes, and the About Team / Partners cards:
   the whole box is the link, and the underline runs on hover anywhere in the
   box. The link goes static so its ::after can cover the box; the underline
   moves from ::before to a background so it doesn't need the link to be
   positioned. */
.where-to-begin .where-to-begin-grid .item:has(> .link-underline),
.team-wrap:has(> .link-underline),
.partner-wrap:has(> .link-underline) {
	position: relative
}

.where-to-begin .where-to-begin-grid .item > .link-underline,
.team-wrap > .link-underline,
.partner-wrap > .link-underline {
	position: static;
	padding-bottom: 4px;
	margin-bottom: -4px;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
	transition: background-size .2s var(--ease)
}

.where-to-begin .where-to-begin-grid .item > .link-underline::before,
.team-wrap > .link-underline::before,
.partner-wrap > .link-underline::before {
	display: none
}

.where-to-begin .where-to-begin-grid .item > .link-underline::after,
.team-wrap > .link-underline::after,
.partner-wrap > .link-underline::after {
	content: '';
	position: absolute;
	inset: 0
}

.where-to-begin .where-to-begin-grid .item:hover > .link-underline,
.where-to-begin .where-to-begin-grid .item:focus-within > .link-underline,
.team-wrap:hover > .link-underline,
.team-wrap:focus-within > .link-underline,
.partner-wrap:hover > .link-underline,
.partner-wrap:focus-within > .link-underline {
	background-size: 100% 2px
}

/* Green means clickable. Stage grid boxes with nothing to click (Exit
   Options, Is It Time to Sell, Our Approach) hover in a soft gold instead,
   ink text kept. */
.stage-grid .stage-grid-item:not(.no-hover):not(:has(a)):hover,
.stage-grid .stage-grid-item:not(.no-hover):not(:has(a)):focus-within {
	background: color-mix(in srgb, var(--color-gold) 50%, var(--color-white))
}

/* Contact "Who are you?": two rows of equal boxes, flush left, ink text
   (ink on green when picked, like the site's other radio buttons).
   The hidden radio took up space ahead of each label (10px ahead of Other),
   so it comes out of the flow. Other's text box drops to its own row. */
#field_4_7 .gfield_radio {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	position: relative
}

#field_4_7 .gfield_radio .gchoice {
	display: flex
}

#field_4_7 .gfield_radio .gchoice:has(.gchoice_other_control):last-child {
	display: contents
}

#field_4_7 .gfield_radio .gfield-choice-input {
	position: absolute;
	margin: 0
}

#field_4_7 .gfield_radio .gfield-choice-input + label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	text-align: center;
	color: var(--color-ink);
	border-color: var(--color-ink)
}

#field_4_7 .gfield_radio .gfield-choice-input:checked + label {
	color: var(--color-ink);
	border-color: var(--color-green)
}

#field_4_7 .gfield_radio .gchoice_other_control {
	display: none;
	grid-column: 1 / -1;
	max-width: none
}

#field_4_7 .gfield_radio .gfield-choice-input:checked ~ .gchoice_other_control {
	display: block;
	width: 100%
}