/* FONTS */

@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue-Thin.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: HelveticaNeue;
	src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* GENERAL */

:root {
    --foreground: #000000;
    --background: #ffffff;
    --background-shaded: #f5f5f5;
    --dark-foreground: var(--background);
    --dark-background: var(--foreground);
	--black: #000000;
	--white: #FFFFFF;
	--light-grey: #f5f5f5;
	--sugar-tree: #a19b9b;
	--dark-blue: #162d57;
	--teal: #00A499;
	--red: #F9423A;
	--purple: #772583;
	--today: var(--purple);
	--tomorrow: var(--red);
	--office: var(--teal);
	--primary: var(--purple);
	--primary-interaction: color-mix(in lab, var(--purple) 80%, var(--foreground));
	--fs--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
	--fs--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
	--fs-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
	--fs-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
	--fs-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
	--fs-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
	--fs-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
	--fs-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
    --page-margin-inline: 4rem;
    --border-radius: 5px;
	--narrower-max-width: 1050px;
	--max-width: 1200px;
	--wider-max-width: 1350px;
}
html {
	scroll-padding-block-start: 8.7rem;
}
body.today {
	--primary: var(--purple);
}
body.tomorrow {
	--primary: var(--purple);
}
.dark,
.x-section.dark,
.x-section.dark .x-text,
.dark .x-col,
.dark .x-text,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .h1,
.dark .h2,
.dark .h3,
.dark .h4,
.dark .h5,
.dark .h6,
.dark blockquote {
    --foreground: var(--dark-foreground);
    --background: var(--dark-background);
}
.dark {
    --foreground: var(--dark-foreground);
}
.x-section.grey,
.x-section.gray,
.x-section.light-grey,
.x-section.light-gray {
	background-color: var(--light-grey);
}
body,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
li,
.x-text,
.x-container h1,
.x-container h2,
.x-container h3,
.x-container h4,
.x-container h5,
.x-container h6,
.x-container p,
.x-container th,
.x-container td,
.x-container li,
.x-section h1,
.x-section h2,
.x-section h3,
.x-section h4,
.x-section h5,
.x-section h6,
.x-section p,
.x-section th,
.x-section td,
.x-section li {
    font-family: HelveticaNeue, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: normal;
}
h1,
h2,
nav a {
    text-wrap: balance;
}
h1,
h2 {
    font-weight: 400;
}
h3 {
    font-weight: 600;
}
body,
.x-section .x-text,
.x-section li,
.x-section p,
.x-section h3,
.x-section h4,
.x-section h5,
.x-section h6,
.x-section th {
    font-weight: 400;
    line-height: 120%;
}
body,
.x-section p,
.x-section li,
.x-section input,
.x-section select,
.x-section textarea,
.x-section th,
.x-section td,
.x-section h6 {
    font-size: var(--fs-0);
}
.x-container h1,
.x-section h1 {
    font-size: var(--fs-3);
    line-height: 120%;
}
.x-container h2,
.x-section h2 {
    font-size: var(--fs-2);
    line-height: 120%;
}
.x-container h3,
.x-section h3 {
    font-size: var(--fs-2);
	font-weight: 500;
}
.x-container h4,
.x-section h4 {
    font-size: var(--fs-2);
}
.x-container h1,
.x-section h1,
.x-container h2,
.x-section h2 {
	color: var(--primary);
	font-weight: 500;
	margin-block: 2rem;
}
.today .x-section h1,
.today .x-section h2,
.tomorrow .x-section h1,
.tomorrow .x-section h2,
.today.tomorrow .x-section h1,
.today.tomorrow .x-section h2 {
	color: var(--today);
}
.x-section h2 + p {
	font-size: var(--fs-4);
	font-weight: 300;
	line-height: 120%;
}
.x-section h5,
.x-section h6 {
	font-size: var(--fs-3);
	line-height: 120%;
	font-weight: 400;
}
.x-section p.large,
.x-section .x-text.large,
.x-text.large p,
.x-section span.large {
	font-size: var(--fs-3);
	line-height: 120%;
	font-weight: 300;
}
.x-section p.medium,
.x-section .x-text.medium,
.x-text.medium p,
.x-section span.medium {
	font-size: calc(var(--fs-2) * 0.93);
	line-height: 120%;
	font-weight: 300;
}
.x-section p.small,
.x-section .x-text.small,
.x-section span.small {
    font-size: var(--fs--1);
	line-height: 120%;
	font-weight: 400;
}
a,
.content a,
.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a,
.content .h1 a,
.content .h2 a,
.content .h3 a,
.content .h4 a,
.content .h5 a,
.content .h6 a {
    color: var(--primary);
    transition: 0.3s color linear, 0.3s background-color linear, 0.3s filter linear;
}
.dark a,
.content .dark a,
.content .dark h1 a,
.content .dark h2 a,
.content .dark h3 a,
.content .dark h4 a,
.content .dark h5 a,
.content .dark h6 a,
.content .dark .h1 a,
.content .dark .h2 a,
.content .dark .h3 a,
.content .dark .h4 a,
.content .dark .h5 a,
.content .dark .h6 a {
    color: var(--dark-foreground);
}
a:hover,
.content a:hover,
.content h1 a:hover,
.content h2 a:hover,
.content h3 a:hover,
.content h4 a:hover,
.content h5 a:hover,
.content h6 a:hover,
.content .h1 a:hover,
.content .h2 a:hover,
.content .h3 a:hover,
.content .h4 a:hover,
.content .h5 a:hover,
.content .h6 a:hover {
    color: var(--primary-interaction);
}

.dark a:hover,
.content .dark a:hover,
.content .dark h1 a:hover,
.content .dark h2 a:hover,
.content .dark h3 a:hover,
.content .dark h4 a:hover,
.content .dark h5 a:hover,
.content .dark h6 a:hover,
.content .dark .h1 a:hover,
.content .dark .h2 a:hover,
.content .dark .h3 a:hover,
.content .dark .h4 a:hover,
.content .dark .h5 a:hover,
.content .dark .h6 a:hover {
    color: var(--dark-foreground);
	filter: opacity(85%);
}
svg {
	width: 100%;
	height: auto;
}

/* HEADER */

.home .masthead .x-navbar {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
}
.masthead .x-container.max {
	max-width: 1330px;
}
.masthead .x-navbar {
	box-shadow: 0 3px 5px #00000000;
	transition: 0.3s box-shadow linear;
}
.masthead .x-navbar-fixed-top {
	box-shadow: 0 5px 9px #00000032;
}
.home .masthead .x-navbar-fixed-top {
	box-shadow: 0 5px 9px color-mix(in lab, var(--primary) 30%, #0000);
}
.masthead .x-brand {
	color: var(--dark-blue);
	width: min(5rem, 50%);
	margin-block: 2.1rem 0;
}
.home .masthead .x-brand {
	color: var(--foreground);
}
.masthead .x-brand svg {
	fill: var(--dark-blue);
}
.home .masthead .x-brand svg {
	fill: var(--foreground);
}
.masthead .x-navbar .desktop .x-nav li,
.masthead .x-navbar .desktop .x-nav a,
.masthead .x-navbar .desktop .x-nav > li > a {
	font-size: var(--fs-0);
}
.masthead .x-navbar .desktop .x-nav a > span {
	box-shadow: 0 2px 0 0 #0000;
	transition: 0.3s box-shadow linear;
}
.masthead .x-navbar .desktop .x-nav > li > a:hover > span,
.masthead .x-navbar .desktop .x-nav > li.x-active > a > span,
.masthead .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
	box-shadow: 0 2px 0 0 var(--foreground);
}
.masthead.masthead-inline .x-navbar .desktop .sub-menu {
	box-shadow: 0 0 4px 3px #00000021;
	border-radius: var(--border-radius);
	padding-block: 0.5em;
	min-width: 17em;
	inset-block-start: 78px;
}
.masthead .desktop .sub-menu li > a {
	margin-block: 0;
	padding-block: 0.2em;
}
.masthead .x-navbar .desktop .sub-menu li::before,
.masthead .x-navbar .desktop .sub-menu li::after {
	display: none;
}
.masthead .x-btn-navbar {
	color: var(--dark-foreground);
	background-color: var(--dark-background);
	border-radius: 50%;
	box-shadow: none;
	aspect-ratio: 1;
}
.masthead .x-navbar .mobile .x-nav li > a {
	margin-block: 0;
	border: 0 none;
	border-block-end: 1px solid;
	font-size: var(--fs-1);
}
.masthead .x-navbar .mobile .x-nav li:first-child > a {
	border-block-start: 1px solid;
}
.masthead .x-navbar .mobile .x-nav .menu-item-has-children li:first-child > a {
	border-block-start: 0 none;
}

/* BACKGROUNDS */

.role {
	--grey-dots: url("/wp-content/uploads/2023/11/dots-our-role.jpg");
}
.solutions {
	--grey-dots: url("/wp-content/uploads/2023/11/dots-solutions.jpg");
}
.careers {
	--grey-dots: url("/wp-content/uploads/2024/04/bg-careers.jpg");
}
.contact {
	--grey-dots: url("/wp-content/uploads/2023/11/dots-contact.jpg");
}
.page.light-dots .entry-content::before {
	position: absolute;
	content: '';
	background: linear-gradient(180deg, #FFF0 0%, #FFF 85%) no-repeat scroll 0 0 / 100% auto, transparent var(--grey-dots, url("/wp-content/uploads/2024/11/Light-Spots.jpg")) no-repeat scroll 0 0 / 100% auto;
	inset: 0;
	z-index: 1;
	width: 100vw;
	height: auto;
	display: block;
	pointer-events: none;
	mix-blend-mode: multiply;
}

/* FOOTER */

footer.x-colophon.bottom {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	color: var(--foreground);
	background: linear-gradient(-24deg, #0000 0%, #000D 85%) no-repeat scroll 0 0 / 100% auto, var(--background) url("/wp-content/uploads/2023/11/bg-footer.jpg") no-repeat scroll 50% 0% / cover;
	padding-block: clamp(3.1rem, 7vw, 4.7rem) 2.4rem;
	font-size: var(--fs-0);
	line-height: 120%;
	text-align: start;
}
footer.x-colophon.bottom .x-container.max {
	max-width: var(--wider-max-width);
}
footer.x-colophon.bottom .x-colophon-content {
	margin-block: 0;
	margin-inline: auto;
	letter-spacing: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 3em 1em;
}
footer.x-colophon .x-colophon-content > * {
	flex: 8 0 calc(50% - 7em);
	margin-block: 0;
}
footer.x-colophon .company-name,
footer.x-colophon .slogan {
	color: var(--foreground);
	font-size: var(--fs-2);
	font-weight: 300;
	margin-block-end: 0;
}
footer.x-colophon .x-colophon-content > .slogan,
footer.x-colophon .x-colophon-content > .social,
footer.x-colophon .credit {
	text-align: end;
}
footer.x-colophon .x-colophon-content > .slogan,
footer.x-colophon .x-colophon-content > .social {
	justify-content: flex-end;
	display: flex;
}
footer.x-colophon .x-colophon-content > .company-name {
	flex: 1 0 2em;
}
footer.x-colophon .x-colophon-content > .slogan {
	flex: 2 0 calc(100% - 5em);
}
footer.x-colophon .x-colophon-content > .slogan + nav {
	flex: 8 0 calc(50% - 5em);
}
footer.x-colophon .x-colophon-content > .social {
	flex: 1 0 8rem;
	align-items: flex-end;
}
footer.x-colophon .x-colophon-content > .social + nav {
	margin-block-start: 1rem;
}
footer.x-colophon h2,
footer.x-colophon h3 {
	font-size: var(--fs-2);
	font-weight: 400;
}
footer.x-colophon nav ul,
footer.x-colophon nav li {
	display: inline-flex;
	flex-wrap: wrap;
}
footer.x-colophon .x-container {
	gap: 2rem;
}
footer.x-colophon nav ul {
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	margin-block: 0;
	gap: 0 1.2em;
}
footer.x-colophon nav li,
footer.x-colophon nav a {
	display: inline-flex;
	flex-wrap: wrap;
}
footer.x-colophon .slogan + nav li {
	flex: 1 0 90%;
}
footer.x-colophon nav a {
	padding-block: 0.5em;
	padding-inline: 0;
}
footer.x-colophon .social,
footer.x-colophon .slogan + nav li {
	font-size: var(--fs-2);
}
footer.x-colophon .social + nav {
	flex: 1 0 100%;
	border-block: 1px solid #C05EB68C;
}
footer.x-colophon .social + nav ul {
	padding-block: 0.5em;
}
footer.x-colophon .social + nav li {
	padding-block: 0.5em;
}
footer.x-colophon .social + nav li a {
	margin-block: 0;
	padding-block: 0.3em;
}
footer.x-colophon .copyright,
footer.x-colophon .credit {
	font-size: var(--fs--2);
}
footer.x-colophon a.logo {
	display: flex;
	width: min(70px, 100%);
}
footer.x-colophon .social a {
	padding-block: 0.5em;
	align-content: center;
	font-size: var(--fs-1);
}
footer.x-colophon svg {
	width: 100%;
	height: auto;
}
@media (width >= 768px) {
	footer.x-colophon .company-name,
	footer.x-colophon .slogan {
		font-size: var(--fs-3);
		margin-block-end: 3rem;
	}
	footer.x-colophon .slogan + nav li {
		flex: 1 1 auto;
	}
	footer.x-colophon nav a {
		padding-inline: 0.5em;
	}
	footer.x-colophon nav li:first-child a {
		padding-inline-start: 0;
	}
	footer.x-colophon nav li:last-child a {
		padding-inline-end: 0;
	}
	footer.x-colophon .social + nav ul {
		padding-block: 0;
	}
	footer.x-colophon .x-colophon-content > .social {
		flex: 1 0 5rem;
		align-items: flex-start;
	}
	footer.x-colophon .x-colophon-content > .social + nav {
		margin-block-start: 4rem;
	}
}

/* TITLE */

#title.dark {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	background-color: var(--background);
}
#title.dark .x-text,
#title.dark .x-text h2,
#title.dark .x-text h3,
#title.dark .x-text p {
	color: var(--foreground);
}
#title.full .x-container.max {
	width: 84%;
	max-width: 1100px;
}
#title.indent .x-container.max {
	width: 81%;
	max-width: var(--narrower-max-width);
	margin-inline: auto;
}
#title p {
	font-size: var(--fs-5);
	font-weight: 300;
	line-height: 120%;
	text-wrap: pretty;
}
.home #title p {
	font-size: var(--fs-4);
}
#title .rotate {
	transition: 0.3s opacity linear, 0.3s color linear;
}
#title .hide {
	color: var(--primary);
	display: block;
	opacity: 0;
}
#title.full {
	min-height: calc(100dvh - 8.7rem);
}
#title.full .x-text {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;
	justify-content: flex-start;
	align-items: center;
	text-wrap: balance;
}
#title.full .narrow {
	width: min(100%, 45ch);
}
#title.full h2 {
	font-size: calc(var(--fs-5) * 1.6);
	font-weight: 400;
	margin-block: clamp(10rem, calc(40vw - var(--fs-5)), 27rem) clamp(7rem, calc(22vw - var(--fs-5)), 20rem);
	flex: 1 0 100%;
}
#title.full p {
	margin-block: 0;
}
#title.full p:last-child {
	font-size: var(--fs-2);
	align-self: flex-end;
}

/* STATEMENT / INTRODUCTION */

#featured-image {
	width: calc(100% - 2rem);
	max-width: var(--wider-max-width);
}
#featured-image .x-video,
#featured-image .x-image,
#featured-image .x-video iframe,
#featured-image .x-image img {
	aspect-ratio: 16 / 9;
	background-color: var(--dark-background);
}
#featured-image.short .x-video,
#featured-image.short .x-image,
#featured-image.short .x-video iframe,
#featured-image.short .x-image img {
	aspect-ratio: 2 / 1;
}
#featured-image .x-image img {
	object-fit: cover;
	object-position: 50% 0%;
}
#statement {
	background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #000C 15%, #0000 25%, #0000 55%, #000 85%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
}
#statement.solution {
	background: linear-gradient(180deg, #FFF 0%, #FFF 11.5%, #000C 11.5%, #0000 22%, #0000 55%, #000 85%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
}
#statement.role {
	background: linear-gradient(180deg, #FFF 0%, #FFF 11.5%, #000C 11.5%, #0000 22%, #0000 55%, #000 85%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-dots-2.jpg") no-repeat scroll 33% 0% / cover;
}
#statement.green-blue {
	background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #0000 15%, #0000 55%, #000 80%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-light-dots-3.jpg") no-repeat scroll 50% calc(50% + 9rem) / cover;
}
#statement.dark-plain {
	background: var(--dark-background);
}
#statement .text .x-col {
	flex: 1 0 80%;
}
#statement .slick-slider {
	background-color: var(--dark-background);
}
#statement .x-row.text {
	max-width: var(--narrower-max-width);
}
#statement.dark .text {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	padding-block: clamp(6rem, 6vw, 15rem);
}
#statement .text {
	margin-block-end: 0;
}
#statement .slick-slider .slide,
#statement .swiper-slider .slide {
	margin: 0;
	line-height: 100%;
}
#statement .slick-slider img,
#statement .swiper-slider img {
	display: block;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin: 0;
}
#statement.dark h2 {
	color: var(--dark-foreground);
}
#statement p {
	text-wrap: pretty;
}
#statement h2 + p {
	margin-block-start: 2rem;
}
#statement.dark h2 + p {
	font-weight: 300;
}
#statement.contact h3 {
	font-size: var(--fs-0);
	font-weight: 500;
	margin-block: 1rem 0.8rem;
}
#statement .x-row img {
	width: 100%;
	max-width: none;
	height: auto;
}
#statement p:last-child .cta {
	font-weight: 500;
}
#statement.dark .fade-in {
	-webkit-mask-image: linear-gradient(#0000 0%, #0000 0.5%, #00000085 21%, #000001 58%, #000000DF 100%);
	mask-image: linear-gradient(#0000 0%, #0000 0.5%, #00000085 21%, #000001 58%, #000000DF 100%);
}
#statement .medium {
	font-size: calc(var(--fs-1) * 1.1);
	line-height: 130%;
}
#statement .filter {
	margin-block: 0 3rem;
}
@media (width < 600px) {
	#featured,
	#statement {
		padding-block-end: 2rem;
	}
	#featured .x-col,
	#statement .x-col {
		flex: 1 0 calc(100% - var(--page-margin-inline));
		padding-block-end: 0;
	}
	#featured .x-col:nth-child(2),
	#statement .x-col:nth-child(2) {
		margin-block-start: 0.3rem;
	}
}
@media (width >= 768px) {
	#statement {
		background: linear-gradient(180deg, #FFF 0%, #FFF 25%, #000C 25%, #0000 35%, #0000 55%, #000 85%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
	}
	#statement.solution {
		background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #000C 15%, #0000 35%, #0000 55%, #000 85%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
	}
	#statement.role {
		background: linear-gradient(180deg, #FFF 0%, #FFF 25%, #000C 25%, #0000 35%, #0000 75%, #000 100%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-dots-2.jpg") no-repeat scroll 33% 0% / cover;
	}
	#statement .text .x-col {
		flex: 1 0 40%;
		margin-block-end: 1rem;
		padding-block-end: 0;
	}
	#statement .text.staggered .x-col:nth-child(2n) {
		margin-block-start: clamp(4rem, 13vw, 16rem);
	}
	.about #statement .text.staggered .x-col:nth-child(2n) {
		margin-block-start: clamp(4rem, 10vw, 12rem);
	}
	.careers #statement .text.staggered .x-col:nth-child(2n) {
		margin-block-start: clamp(15rem, 25vw, 24rem);
	}
	.home #statement .x-row img {
		width: 100dvw;
	}
	.home #statement .text.staggered,
	.solutions #statement .text.staggered {
		padding-inline: 5rem;
	}
}
@media (width >= 900px) {
	#statement.green-blue {
		background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #0000 15%, #0000 55%, #000 80%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-light-dots-3.jpg") no-repeat scroll 50% calc(100% + 15rem) / cover;
	}
}
@media (width >= 1600px) {
	#statement {
		background: linear-gradient(180deg, #FFF 0%, #FFF 30%, #000C 30%, #0000 43%, #0000 55%, #000 90%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
	}
	#statement.solution {
		background: linear-gradient(180deg, #FFF 0%, #FFF 23%, #000C 23%, #0000 38%, #0000 55%, #000 90%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Statement-Dots-Red-Purple-Black.jpg") no-repeat scroll 100% 0% / cover;
	}
	#statement.role {
		background: linear-gradient(180deg, #FFF 0%, #FFF 30%, #000C 30%, #0000 43%, #0000 75%, #000 100%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-dots-2.jpg") no-repeat scroll 33% 0% / cover;
	}
}

/* QUOTE */

#quote.dark {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	background-color: var(--background);
}
#quote {
	background: linear-gradient(180deg, #FFF 0%, #FFF 13%, #000 13%, #000 25%, #0000 38%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Shoreham-Pylon-Silhouette-At-Dusk-Gradient.jpg") no-repeat scroll 50% 100% / 100% auto;
}
#numbers + #quote {
	background: linear-gradient(180deg, #000 0%, #000 5%, #0000 38%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Shoreham-Pylon-Silhouette-At-Dusk-Gradient.jpg") no-repeat scroll 50% 100% / 100% auto;
}
#quote .x-text.large,
#quote .x-text.large p {
	font-weight: 300;
	font-size: var(--fs-5);
	line-height: 120%;
}
#quote .x-text.medium,
#quote .x-text.medium p {
	font-weight: 300;
	font-size: calc(var(--fs-2) * 0.93);
	line-height: 140%;
	text-wrap: pretty;
}
#quote .x-row:nth-child(2) {
	margin-block-end: 4rem;
}
#quote .x-col:nth-child(2) .credit {
	font-size: var(--fs-0);
	margin-block-start: 2.8rem;
}
#quote .size-thumbnail {
	border-radius: 50%;
	aspect-ratio: 1;
	display: inline-block;
	width: 1.9em;
	margin-block: 0;
	margin-inline: 0 1em;
}
@media (width < 600px) {
	#quote .x-col {
		flex: 1 0 calc(100% - var(--page-margin-inline));
		padding-block-end: 0;
	}
	#quote .x-col:nth-child(2) {
		margin-block-start: 0.3rem;
	}
}
@media (width >= 768px) {
	#quote {
		background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #000 15%, #000 38%, #0000 54%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Shoreham-Pylon-Silhouette-At-Dusk-Gradient.jpg") no-repeat scroll 50% calc(105% + 5rem) / 100% auto;
	}
	#numbers + #quote {
		background: linear-gradient(180deg, #000 0%, #0000 38%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Shoreham-Pylon-Silhouette-At-Dusk-Gradient.jpg") no-repeat scroll 50% 100% / 100% auto;
	}
	#quote .x-row.narrow {
		max-width: calc(var(--max-width) * 0.95);
	}
	#quote.dark .text .x-col {
		flex: 1 0 40%;
	}
	#quote .text.staggered .x-col:nth-child(2n) {
		margin-block-start: clamp(4rem, 19vw, 22rem);
	}
}
@media (width >= 900px) {
	#quote.green-blue {
		background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #0000 15%, #0000 55%, #000 80%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2023/11/bg-light-dots-3.jpg") no-repeat scroll 50% calc(100% + 15rem) / cover;
	}
}
@media (width >= 1600px) {
	#quote {
		background: linear-gradient(180deg, #FFF 0%, #FFF 20%, #000 20%, #000 42%, #0000 58%) no-repeat scroll 0 0 / cover, var(--background) url("/wp-content/uploads/2024/11/Shoreham-Pylon-Silhouette-At-Dusk-Gradient.jpg") no-repeat scroll 50% calc(110% + 7rem) / 100% auto;
	}
}

/* WHAT WE DO */

#what h2 {
	font-size: calc(var(--fs-2) * 1.05);
	font-weight: 700;
}
#what .primary {
	color: var(--primary);
}
#what .narrow {
	width: min(100%, 600px);
	margin-inline: 0 auto;
}
#what .large {
	font-size: var(--fs-3);
}

/* SOLUTIONS */

.solutions.x-section {
	--background: var(--light-grey);
}
.solutions.teal {
	--foreground: var(--teal);
}
.solutions.x-section h2,
.solutions.x-section .cta {
	font-size: var(--fs-2);
	font-weight: 500;
}
.solutions.x-section h2,
.solutions.x-section h3,
.solutions.x-section p,
.solutions.x-section a,
.solutions.x-section a:hover {
	color: var(--foreground);
}
.solutions.x-section h3 {
	font-weight: 500;
	border-block-end: 1px solid;
	width: min(12ch, 100%);
	text-wrap: balance;
}
.solutions.x-section h3 + p {
	font-size: var(--fs-1);
	font-weight: 300;
	margin-block: 1rem;
}
@media (width >= 768px) {
	#solutions.x-section {
		width: min(var(--max-width), 100%);
		margin-inline: auto;
		position: relative;
		margin-block: -6rem 0;
	}
	.solutions.x-section h3 {
		min-height: 6.1em;
	}
}
@media (width < 600px) {
	.solutions .solutions.x-section .x-col {
		flex-basis: 100%;
	}
	.solutions.x-section h3 {
		width: auto;
		padding-block-end: 0.5em;
	}
}

/*  50 / 50 */

.half-half.shadow .x-row {
	box-shadow: 0 0.3rem 2.1rem 0.1rem #00000057;
}
#careers.teal,
.half-half.teal,
.half-half.teal.dark {
	--foreground: var(--dark-foreground);
	--background: var(--teal);
}
.half-half.dark .primary-background {
	--foreground: var(--dark-foreground);
	--background: var(--primary);
	background-color: var(--background);
}
.half-half.teal .x-col,
.half-half.teal.dark .x-col {
	color: var(--foreground);
	background-color: var(--teal);
}
.half-half .primary-background .x-text {
	color: var(--foreground);
}
.half-half .featured-site-enclosure {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.half-half.teal .x-col h2,
.half-half.teal .x-col h3,
.half-half.teal .x-col p,
.half-half.teal .x-col a {
	color: var(--foreground);
}
.half-half .x-frame.square,
.half-half .x-frame.square .x-frame-inner,
.half-half .x-frame.square iframe,
.half-half .image,
.half-half .x-col > .x-image,
.half-half .image img,
.half-half .x-col > .x-image img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
}
.half-half .image img,
.half-half .x-col > .x-image img {
	object-fit: cover;
	display: block;
}
.half-half .x-text {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-block: 3.2rem 0;
	margin-inline: 3.2rem;
	aspect-ratio: 1;
	gap: 3rem;
	height: auto;
}
.home .half-half .x-text {
	aspect-ratio: 0.92;
}
.half-half .x-text p {
	margin-block: 0;
	font-size: var(--fs-2);
}
.home .half-half .x-text p {
	font-size: calc(var(--fs-1) * 1.1);
	font-weight: 300;
}
.half-half .x-text :first-child {
	flex: 1;
}
#careers.half-half .image img,
#careers.half-half .x-col > .x-image,
#careers.half-half .x-col > .x-image img,
#careers.half-half .x-col:first-child .x-text {
	aspect-ratio: 4 / 3;
}
.half-half .text {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding-block: 2.1rem 1.8rem;
	align-items: flex-start;
}
.half-half.featured .text {
	gap: 1.3rem;
}
.half-half .featured-site-enclosure .image {
	order: 1;
}
.half-half .featured-site-enclosure .text {
	order: 2;
}
.half-half .text div,
.half-half .text h2,
.half-half .text h3,
.half-half .text p,
.half-half .text ul {
	color: var(--foreground);
	margin-block: 0;
	margin-inline: 2.6rem;
}
.half-half .text a {
	color: var(--foreground);
}
.half-half .text h2 a:hover {
	color: var(--foreground);
	text-decoration: underline;
}
.half-half .category-name {
	font-size: var(--fs-1);
	font-weight: 500;
}
.half-half .text p {
	font-size: var(--fs-2);
	font-weight: 400;
}
.half-half .text h2 + p,
.half-half .text h3 + p {
	font-size: var(--fs-4);
}
.half-half .text > .tags {
	margin-block: clamp(1.8rem, 13%, 4rem) 0;
	flex: 0 1 calc(100% - 10rem);
}
.half-half .cta {
	font-weight: 500;
	align-self: flex-end;
}
.featured .half-half .text p {
	font-size: var(--fs-2);
}
.featured .half-half .text h2 + p {
	font-size: var(--fs-3);
}
.featured .half-half .cta {
	position: absolute;
	inset-inline-end: -0.6em;
}
.home .half-half .cta {
	font-weight: 400;
}
@media (width >= 768px) {
	.half-half .featured-site-enclosure .text {
		order: 1;
	}
	.half-half .featured-site-enclosure .image {
		order: 2;
	}
	.half-half .featured-site-enclosure > * {
		display: flex;
		align-items: flex-start;
		flex: 1 0 40%;
		margin: 0;
	}
	.half-half .text,
	.half-half .image {
		aspect-ratio: 1;
	}
	.half-half .text .feature {
		margin-block-end: 0.8rem;
	}
	.half-half .x-text {
		margin-inline-end: 6rem;
	}
}

/* HOW */

#how.dark {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	background-color: var(--background);
}
#how.dark .x-text,
#how.dark h2,
#how.dark h3,
#how.dark p {
	color: var(--foreground);
}
#how h2 {
	font-weight: 500;
	font-size: var(--fs-2);
}
#how h3,
#how .large {
	font-size: var(--fs-3);
}
#how h3 {
	font-weight: 500;
	margin-block: 2rem;
}
#how .large {
	font-weight: 300;
}
#how .cta {
	font-size: var(--fs-2);
	font-weight: 400;
}
#how .narrow {
	width: min(100%, 700px);
	margin-inline: 0 auto;
}
@media (width >= 768px) {
	#how .x-text {
		padding-inline: 5rem;
	}
}

/* CHALLENGES */

#challenges .x-row.purple,
#challenges .x-row.red {
	color: var(--dark-foreground);
}
#challenges .x-row.purple {
	background: var(--purple) url("/wp-content/uploads/2024/11/Purple-Dots-Panel.jpg") no-repeat scroll 100% 100% / cover;
}
#challenges .x-row.red {
	background: var(--red) url("/wp-content/uploads/2024/11/Vivid-Red-Dots-Panel.jpg") no-repeat scroll 100% 100% / cover;
}
#challenges .x-row.purple .x-col,
#challenges .x-row.red .x-col {
	padding-block: 4rem;
	padding-inline: 4rem;
}
#challenges .x-row.purple .x-text,
#challenges .x-row.red .x-text {
	width: min(100%, 16.15em);
	margin-inline: 0 auto;
}
#challenges .panel {
	width: 100%;
	margin-block-end: 2rem;
}
#challenges .panel .x-text {
	background-color: var(--background);
	padding-block: 1.6rem 2rem;
	padding-inline: 1.8rem;
}
#challenges .panel .x-image {
	padding-inline: 0;
	padding-block-end: 0;
}
#challenges h2,
#challenges h3 {
	color: var(--primary);
}
#challenges h2 {
	font-size: var(--fs-2);
}
#challenges .panel h3,
#challenges .panel p {
	font-weight: 300;
}
#challenges .panel h3 {
	font-size: var(--fs-3);
	margin-block: 0 1.4rem;
}
#challenges .panel p {
	font-size: var(--fs-1);
}
#challenges .panel p:last-child {
	margin-block-end: 0;
}
#challenges .panel .x-image img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
@media (width >= 768px) {
	#challenges .x-row.narrow {
		max-width: calc(var(--max-width) * 0.95);
	}
	#challenges .panel .x-text p:last-child {
		min-height: 2.4em;
	}
	#challenges {
		display: flex;
		flex-wrap: wrap;
	}
	#challenges .x-row {
		flex: 1 0 100%;
	}
	#challenges .x-row.purple,
	#challenges .x-row.red {
		order: 1;
		position: relative;
		margin-block: -13rem 4rem;
		z-index: 100;
	}
	#challenges .x-row:first-child {
		order: 2;
	}
	#challenges .x-row.panels {
		order: 3;
	}
}

/* OUR APPROACH */

.approach.dark .x-text h2 {
	color: var(--foreground);
}
.approach .x-text .large {
	font-size: var(--fs-4);
	margin-block: 0.5em 0.8em;
}
.approach .x-frame-inner:has(.x-video) {
	background-color: var(--dark-background);
}
.approach .x-video {
	clip-path: circle(37%);
}
@media (width < 600px) {
	.approach .x-row > .x-row-inner > .x-col {
		flex-basis: calc(100% - var(--page-margin-inline));
	}
}

/* DEVELOPMENT PROJECTS */

.development-projects h2 {
	font-size: var(--fs-2);
}
.development-projects .large,
.development-projects .large p {
	font-size: var(--fs-3);
	font-weight: 300;
}
.development-projects .medium,
.development-projects .medium p {
	font-size: var(--fs-1);
}
.development-projects .cta {
	color: var(--foreground);
	font-weight: 500;
}
.development-projects .panel h3,
.development-projects .panel p {
	font-size: var(--fs-0);
}
.development-projects .panel h3 {
	font-weight: 600;
	color: var(--primary);
	margin-block: 0 1.4rem;
}
.development-projects .panel p {
	font-weight: 300;
}
.development-projects .panel .x-image {
	margin-block-end: 1.8rem;
}
.development-projects .panel .x-image img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
@media (width < 600px) {
	.development-projects .x-col {
		flex: 1 0 calc(100% - var(--page-margin-inline));
	}
}
@media (width >= 768px) {
	.development-projects.narrow .x-row,
	.development-projects .x-row.narrow {
		max-width: calc(var(--max-width) * 0.95);
	}
}

/* CONTACT FORM */

.dark #contact {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
}
#contact .wpforms-container {
	margin: 0;
}
#contact button,
#contact textarea,
#contact select,
#contact input {
	color-scheme: dark;
	accent-color: var(--primary);
}
#contact label,
#contact input,
#contact select,
#contact textarea,
#contact p,
#contact .wpforms-form-container .wpforms-form,
#contact .wpforms-form-container .wpforms-field-label,
#contact .wpforms-form-container .wpforms-form .wpforms-field-label {
	color: var(--foreground);
	font-size: var(--fs-0);
	line-height: 130%;
	font-weight: 400;
	border-radius: 0;
	transition: 0.3s color linear, 0.3s background-color linear, 0.3s border-color linear, 0.3s box-shadow linear;
}
#contact textarea,
#contact select,
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"] {
	color: var(--foreground);
	background-color: transparent;
	border-block-end: 1px solid var(--primary);
}
#contact label {
	margin-block: 0 0.3rem;
}
#contact textarea,
#contact button {
	border: 1px solid var(--primary);
}
#contact button {
	border: 2px solid;
	background-color: transparent;
	font-weight: 400;
	padding-inline: 2em;
}
#contact a {
	text-decoration: underline;
}
#contact textarea:focus,
#contact select:focus,
#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact input[type="tel"]:focus {
	border: 0 none;
	border-block-end: 1px solid var(--foreground);
	outline: none;
	box-shadow: none;
}
#contact textarea:focus {
	border: 1px solid var(--primary);
	outline: none;
	box-shadow: none;
}
#contact textarea:focus-within,
#contact select:focus-within,
#contact input[type="text"]:focus-within,
#contact input[type="email"]:focus-within,
#contact input[type="tel"]:focus-within {
	outline: none;
	border-block-end: 1px solid var(--foreground);
	box-shadow: 0 2px 0 0 var(--foreground);
	background-color: color-mix(in lab, var(--background) 90%, transparent);
}
#contact textarea:focus-within {
	outline: none;
	border: 1px solid var(--foreground);
	box-shadow: 0 2px 0 0 var(--foreground);
	background-color: color-mix(in lab, var(--background) 90%, transparent);
}
#contact #wpforms-534-field_5-container .wpforms-field-label {
	position: absolute;
	visibility: hidden;
}
#contact .wpforms-has-error > em.wpforms-error {
	position: absolute;
	font-size: 0.01rem;
	background-color: transparent;
	inset: 0 0 auto auto;
	z-index: 1;
	text-align: end;
	color: transparent;
}
#contact .wpforms-has-error > .wpforms-error::before {
	color: var(--red);
}

/* CTA */

a.cta svg {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 1em;
	height: 1em;
	transform-origin: 50% 50%;
}
a.cta .arrow-ne svg {
	rotate: 315deg;
	inset-block-start: 0.1em;
}
a.cta .start svg {
	margin-inline-end: 0.3em;
}
a.cta .end svg {
	margin-inline-start: 0.3em;
}
.dark a.cta svg,
.dark a.cta:hover svg {
	fill: var(--dark-foreground);
}

/* CROSS LINKS */

.cross-links.wider .x-row {
	max-width: var(--wider-max-width);
}
.cross-links .x-col {
	aspect-ratio: 1;
	background: color-mix(in lab, #6e5299, #ecd1d8) linear-gradient(45deg, #6e5299 0%, #ecd1d8 100%) no-repeat scroll 50% 50% / cover;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.cross-links .x-col.first,
.cross-links .x-col.first .x-bg-layer-lower-image {
	background-position-x: 0%;
}
.cross-links .x-col.second,
.cross-links .x-col.second .x-bg-layer-lower-image {
	background-position-x: 50%;
}
.cross-links .x-col.third,
.cross-links .x-col.third .x-bg-layer-lower-image {
	background-position-x: 100%;
}
.cross-links .x-col .cta {
	display: flex;
	flex: 1 0 1rem;
	flex-direction: column;
	align-items: flex-start;
	color: var(--foreground);
	font-size: var(--fs-3);
	font-weight: 500;
	text-wrap: balance;
	line-height: 120%;
	gap: 0.6em;
	padding-block: 6%;
	padding-inline: clamp(2rem, 5vw, 8rem);
	box-shadow: 0 0 0 1px var(--background) inset;
	text-shadow: 2px 2px 1px #dfe2e725, -2px 2px 1px #dfe2e725, -2px -2px 1px #dfe2e725, 2px -2px 1px #dfe2e725;
}
.cross-links .cta .arrow {
	display: inline-flex;
	align-content: center;
	align-self: center;
	margin-inline: auto;
}

/* MAP */

#map.dark {
    --foreground: var(--dark-foreground);
    --background: var(--dark-background);
	background-color: var(--background);
}
#map .x-row:last-child .x-col {
	position: relative;
}
#map .x-row + .x-row {
	margin-block-start: 4rem;
}
#map.dark h2 {
	color: var(--foreground);
}
#map h2 + p {
	font-size: var(--fs-3);
}
#map-canvas {
	background-color: var(--background-shaded);
	width: 100%;
	aspect-ratio: 5 / 3;
	outline: solid 2px var(--background-shaded);
}
#map.dark #map-canvas {
	background-color: var(--background);
	outline: solid 2px var(--background);
}
#map .map-key {
	position: absolute;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1.3rem;
	list-style: none;
	justify-content: flex-start;
	margin-block: 0.9rem 2rem;
	margin-inline: auto 0;
	padding-inline: 0;
	width: fit-content;
	inset-inline-end: 4.1rem;
	z-index: 1;
}
#map .map-key li,
#map-canvas .gm-style-mtc-bbw .gm-style-mtc:last-of-type > button {
	flex: fit-content;
	width: auto;
	display: inline-block;
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
	border: 1px solid var(--sugar-tree);
	color: var(--foreground);
	background: var(--background);
}
#map .map-key li:not(:has(a)) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding-inline: 0.6em;
	padding-block: 0.2em;
	line-height: 160%;
}
#map .map-key a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7em;
}
#map .map-key .icon {
	position: relative;
	width: 1em;
	height: 1em;
	inset-block-end: 0.15em;
}
#map.dark .map-key .icon svg {
	fill: var(--dark-foreground);
}
#map.dark .map-key .icon circle:last-child {
	scale: 2.6;
	transform-origin: 50% 50%;
}
#map.dark .map-key .today .icon circle:last-child {
	fill: var(--today);
}
#map.dark .map-key .tomorrow .icon circle:last-child {
	fill: var(--tomorrow);
}
#map.dark .map-key .office .icon circle:last-child {
	fill: var(--office);
}
#map .map-key svg {
	width: 100%;
	height: auto;
}
#map-filter p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-block: 0;
}
#map-filter label,
#map-filter input {
	flex: 1 0 100%;
	font-size: var(--fs-0);
	max-width: none;
	margin-block: 0;
}
#map-filter input {
	color-scheme: light;
	color: var(--foreground);
	background-color: transparent;
	border: 0 none;
	box-shadow: none;
	padding-inline: 0;
	border-block-end: 2px solid var(--sugar-tree);
}
#map-filter input:focus {
	box-shadow: none;
}
#map-filter input:focus-within {
	border-block-end-color: var(--foreground);
	box-shadow: none;
}
#map-filter input::placeholder {
	color: var(--sugar-tree);
	opacity: 1;
}
#map .marker,
#map .yNHHyP-marker-view {
	z-index: 500;
}
#map .yNHHyP-marker-view:has(.popover) {
	z-index: 501;
}
#map .marker {
	transform-origin: 50% 50%;
	transition: 0.3s scale ease-in-out;
}
#map .popover {
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	width: auto;
	background-color: var(--dark-background);
	padding-inline: 1.4em;
	padding-block: 0.6em 0.8em;
	line-height: 100%;
	translate: -4.5rem 2.6rem;
	box-shadow: 0 0.3rem 0.5rem #0003;
	border: 0 none;
	transform-origin: 50% 0%;
	transition: 0.2s scale ease-out, 0.2s filter linear;
	pointer-events: none;
	z-index: 510;
}
#map .marker:hover {
	scale: 1.18;
}
#map .marker .circle {
	transition: 0.3s filter linear;
}
#map .marker:hover .circle {
	filter: blur(10px);
}
#map .marker .dot,
#map .marker .plus {
	transform-origin: 50% 50%;
	transition: 0.25s scale ease-out, 0.18s rotate linear, 0.2s fill-opacity linear, 0.2s fill linear;
}
#map .marker .dot {
	fill: var(--dark-foreground);
}
#map .marker.office .dot {
	fill: #F1F1F1;
}
#map .marker .plus {
	fill-opacity: 0;
	scale: 0;
	rotate: -20deg;
}
#map .marker:hover .dot {
	fill-opacity: 0;
	scale: 0;
}
#map .marker:hover .plus {
	fill: var(--dark-foreground);
	fill-opacity: 1;
	scale: 0.85;
	rotate: 0deg;
	transition-delay: 0.3s;
}
#map.dark .marker.today:hover .plus {
	fill: var(--today);
}
#map.dark .marker.tomorrow:hover .plus {
	fill: var(--tomorrow);
}
#map.dark .marker.office:hover .plus {
	fill: var(--office);
}
#map .popover.hide {
	scale: 1 0;
	filter: opacity(0%);
}
#map .popover.today {
	background-color: var(--today);
}
#map .popover.tomorrow {
	background-color: var(--tomorrow);
}
#map .popover.office {
	background-color: var(--office);
}
#map .popover.today,
#map .popover.tomorrow,
#map .popover.office {
	background-color: var(--dark-background);
}
#map .popover:has(.plus) {
	padding-inline-end: 3.6em;
}
#map .popover::before {
	content: '';
	position: absolute;
	border-inline: 0.8em solid transparent;
	border-block-end: 0.8em solid var(--dark-background);
	inset-block-start: -0.8em;
	height: 0.8em;
}
#map .popover.today::before {
	border-block-end-color: var(--today);
}
#map .popover.tomorrow::before {
	border-block-end-color: var(--tomorrow);
}
#map .popover.office::before {
	border-block-end-color: var(--office);
}
#map .popover.today::before,
#map .popover.tomorrow::before,
#map .popover.office::before {
	border-block-end-color: var(--dark-background);
}
#map .popover h3 {
	font-size: var(--fs-1);
	font-weight: 300;
	margin-block: 0;
	min-width: 10ch;
	text-align: center;
	text-wrap: balance;
}
#map .popover .plus {
	display: inline-block;
	position: absolute;
	inset-block-start: 0.25em;
	inset-inline-end: 0.55em;
}
@media (orientation: portrait) and (width < 600px) {
	#map {
		max-width: none;
		width: auto;
	}
	#map .x-row:first-child .x-col:last-child {
		display: none;
	}
	#map .x-row:last-child {
		margin-inline: 0;
		width: auto;
		max-width: none;
	}
	#map .map-key {
		width: min(50%, 11.15em);
		gap: 0.3em;
		font-size: var(--fs--1);
		margin-block: 0;
		inset-block-start: 4.2rem;
		inset-inline: 0.8rem auto;
	}
	#map .map-key li {
		font-size: var(--fs--1);
		background-color: color-mix(in lab, var(--sugar-tree) 10%, var(--background));
	}
	#map-canvas {
		aspect-ratio: auto;
		width: 100vw;
		height: calc(100dvh - 10rem);
	}
}
@media (width < 600px) {
	#map .x-col {
		flex: 1 0 calc(100% - var(--page-margin-inline));
	}
}

/* SITE INFORMATION */

.site-information {
	--inline-padding: 2.2rem;
	width: min(34rem, 100%);
	border: 0 none;
	padding-block: 2rem 0;
	padding-inline: 0;
	box-shadow: none;
	color: var(--foreground);
	background-color: var(--purple);
	flex-wrap: wrap;
	gap: 1.8rem 0.8rem;
	align-items: flex-end;
}
#map .site-information {
	font-size: var(--fs-0);
	width: min(31rem, 100%);
	gap: 0.9rem 0.8rem;
}
.site-information {
	background-color: #F7F7F7;
	box-shadow: 3px 3px 30px #2e2e2e1a;
	border-radius: 5px;
}
.site-information[open] {
	display: flex;
}
.site-information::backdrop {
	background-color: #dedede70;
}
.site-information > * {
	flex: 1 0 80%;
	margin-block: 0;
	margin-inline: var(--inline-padding);
}
.site-information > .close {
	position: absolute;
	inset: 0.9rem 1rem auto auto;
	margin-inline: 0;
	width: 3.3rem;
	height: 3.3rem;
	opacity: 1;
	z-index: 10;
}
.site-information > .name a,
.site-information > .close a,
.site-information > .name a:hover,
.site-information > .close a:hover {
	color: var(--foreground);
}
.site-information > .close a {
	display: block;
	padding: 1rem;
}
.site-information > .close a:hover path {
	stroke-width: 2;
}
.site-information > .category {
	order: 1;
	font-weight: 600;
}
.site-information > .category:has(a) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	font-weight: 500;
}
.site-information.today .category {
	color: var(--today);
}
.site-information.tomorrow .category {
	color: var(--tomorrow);
}
.site-information.office .category {
	color: var(--office);
}
.site-information > .category a {
	color: color-mix(in lab, var(--foreground) 40%, var(--background));
	padding-block-end: 0.2em;
	border-block-end: 2px solid transparent;
	transition: 0.3s color linear, 0.3s border-color linear;
}
.site-information > .category .today.current {
	color: var(--today);
	border-block-end-color: var(--today);
}
.site-information > .category .tomorrow.current {
	color: var(--tomorrow);
	border-block-end-color: var(--tomorrow);
}
#map .site-information > .category {
	font-size: var(--fs--1);
	margin-block: 0 0.8em;
}
.site-information > .name {
	order: 2;
	font-size: var(--fs-4);
	font-weight: 400;
	line-height: 110%;
}
#map .site-information > .name {
	font-size: var(--fs-3);
}
.site-information > .subtitle {
	order: 3;
	font-weight: 300;
	margin-block: -0.2em 0.2em;
}
.site-information > .tags,
.site-information > .meta {
	order: 4;
	flex: 1 0 60%;
}
.site-information > .tags,
.site-information > .meta ul {
	padding-inline: 0;
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-weight: 300;
}
#map .site-information > .tags {
	font-size: var(--fs-0);
	font-weight: 200;
}
.featured .site-information > .tags,
.list .site-information > .tags {
	gap: 1rem;
}
.site-information > .meta ul {
	margin-inline: 0;
	margin-block: 0.6rem;
}
.site-information > .tags li,
.site-information > .meta li {
	flex: 1 0 80%;
	line-height: 130%;
	font-weight: 300;
	padding-inline: 0;
}
.site-information > .tags li {
	font-size: var(--fs-1);
	padding-block: 0.3em 0.5em;
	border-block: 1px solid;
}
.site-information > .meta li {
	font-size: var(--fs-0);
	padding-block: 0.5em 0.7em;
	border-block-end: 1px solid color-mix(in lab, var(--foreground) 40%, var(--background));;
}
.site-information .meta ul > li::before {
	inset-block-start: 0.4em;
}
#map .site-information > .tags li + li {
	border-block-start: 0 none;
}
.featured .site-information > .tags li,
.list .site-information > .tags li,
.list .site-information > .meta li {
	flex: 0 0 fit-content;
	padding-inline: 1em;
	border-inline: 1px solid;
}
.featured .site-information > .tags li,
#map .site-information > .tags li {
	font-size: var(--fs-0);
}
.featured .site-information > .tags li {
	font-weight: 400;
}
#map .site-information > .tags li {
	border-block-color: #ffffff95;
}
.site-information > .cta {
	position: absolute;
	color: var(--dark-foreground);
	order: 5;
	font-weight: 500;
	inset-block-end: 1.3em;
	z-index: 2;
}
.featured .site-information .cta,
.list .site-information .cta {
	font-size: var(--fs-1);
	text-align: end;
}
.site-information > .cta a {
	display: block;
	color: var(--dark-foreground);
}
.featured .site-information .cta a,
.list .site-information > .cta a {
	width: var(--fs-4);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid;
}
.featured-site-enclosure .site-information .cta a {
	border: 0 none;
}
.featured .site-information .cta,
.list .site-information .cta:has(.icon) {
	text-align: end;
}
.featured .site-information .cta .icon,
.list .site-information .cta .icon {
	translate: 0.09em 0.02em;
	transition: 0.3s translate ease-in-out 0.15s;
}
.featured .site-information .cta a:hover .icon,
.list .site-information .cta a:hover .icon {
	translate: 0.20em -0.09em;
}
.site-information > .cta svg {
	width: 1em;
	height: auto;
	translate: 0 0.15em;
	rotate: -45deg;
	transition: 0.3s translate ease-in-out 0.15s;
	margin-inline-end: 0.3em;
}
.site-information > .cta a:hover svg {
	translate: 0.15em 0;
}
.site-information > .image,
.site-information > .image img {
	aspect-ratio: 5 / 2;
}
.list .site-information > .image,
.list .site-information > .image img {
	aspect-ratio: 1.8;
}
.site-information > .image {
	position: relative;
	display: flex;
	margin-block: 1rem 0;
	margin-inline: 0;
	order: 6;
	background-color: #00000042;
}
.site-information:has(.cta) > .image::before {
	position: absolute;
	display: block;
	content: '';
	inset: 0;
	background-image: linear-gradient(40deg, #000f 0%, #00000044 90%);
	box-shadow: 0 -4rem 4rem #0003 inset;
	z-index: 1;
}
.list .site-information:has(.cta) > .image::before {
	background-image: linear-gradient(40deg, #0000006b 0%, #00000014 90%);
	box-shadow: 0 -4rem 4rem #0002 inset;
}
.site-information > .image img {
	display: block;
	object-fit: cover;
	margin: 0;
}
.site-information .hide,
.site-information > .cta.hide {
	display: none;
}
@media (width >= 768px) {
	.featured-site-enclosure .site-information .cta a {
		border: 1px solid;
	}
}
@media (width >= 1000px) {
	.site-information {
		margin-inline: 3rem auto;
	}
	.site-information.right {
		margin-inline: auto 3rem;
	}
}
@media (width >= 1400px) {
	.site-information {
		margin-inline: calc(50vw - 17rem * 2.7) auto;
	}
	.site-information.right {
		margin-inline: auto calc(50vw - 17rem * 2.7);
	}
}

/* INDIVIDUAL SITES/SOLUTIONS */

#statement.solution .description p {
	font-size: calc(var(--fs-1) * 1.1);
	line-height: 130%;
	font-weight: 300;
}
#statement.solution .description p:first-child {
	font-size: var(--fs-3);
}
#statement.dark .description p a {
	text-decoration: underline;
}
#statement .solutions .today-tomorrow.list {
	margin-block: 0;
	gap: 4rem;
}
#statement .solutions .site-key-info {
	display: flex;
	flex-wrap: wrap;
	padding-block: 0;
	gap: var(--fs-0);
}
#statement .solutions .site-key-info.hide {
	display: none;
}
#statement .solutions .site-key-info h3,
#statement .solutions .site-key-info ul,
#statement .solutions .site-key-info li,
#statement .solutions .site-key-info p {
	color: var(--dark-foreground);
	margin-block: 0;
}
#statement .solutions .site-key-info .image {
	order: 1;
}
#statement .solutions .site-key-info h3 {
	order: 2;
	font-size: var(--fs-3);
	font-weight: 400;
}
#statement .solutions .site-key-info .meta {
	order: 3;
}
#statement .solutions .site-key-info .cta.bookmark {
	order: 4;
	margin-block: 0.3rem 0;
}
#statement.solution .cta {
	font-size: var(--fs-1);
	font-weight: 500;
}
#statement.solution .narrow .x-text {
	width: min(32.7rem, 100%);
	margin-inline: auto;
}
#statement.solution ul + h2,
#statement.solution ul + h3,
#statement.solution .meta + h2,
#statement.solution .meta + h3 {
	margin-block-start: 5rem;
}
#statement.solution ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-block-start: 1px solid;
	margin-block: 1rem 2.5rem;
	margin-inline: 0;
	padding-inline: 0;
}
#statement .solutions .site-key-info .meta ul {
	margin-block: 0;
}
#statement.solution li {
	flex: 1 0 100%;
	border-block-end: 1px solid;
	padding-block: 0.8em;
	margin-inline: 0;
	padding-inline: 0;
	line-height: 160%;
}
#statement .solutions .site-key-info .meta li {
	padding-block: 0.6em;
}
.site-information .meta li,
#statement.solution .meta li {
	position: relative;
	padding-inline-start: 2.2em;
}
.site-information .meta li::before,
#statement.solution .meta li::before {
	display: block;
	position: absolute;
	content: '';
	width: 1.3em;
	height: auto;
	aspect-ratio: 1;
	background: transparent scroll no-repeat 50% 50% / auto 100%;
	inset: 0.9em auto auto 0;
}
.site-information .meta .commissioned::before,
#statement.solution .meta .commissioned::before,
.site-information .meta .established::before,
#statement.solution .meta .established::before,
.site-information .meta .operational::before,
#statement.solution .meta .operational::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSAxNEMxIDE0IDIuMDExMjIgMTMgNS4wNDQ4NyAxM0M4LjA3ODUzIDEzIDEwLjEwMSAxNSAxMy4xMzQ2IDE1QzE2LjE2ODMgMTUgMTcuMTc5NSAxNCAxNy4xNzk1IDE0VjJDMTcuMTc5NSAyIDE2LjE2ODMgMyAxMy4xMzQ2IDNDMTAuMTAxIDMgOC4wNzg1MyAxIDUuMDQ0ODcgMUMyLjAxMTIyIDEgMSAyIDEgMkwxIDIxIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}
.site-information .meta .location::before,
#statement.solution .meta .location::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS4wODk3NSAxMkMxMC43NjUyIDEyIDEyLjEyMzQgMTAuNjU2OSAxMi4xMjM0IDlDMTIuMTIzNCA3LjM0MzE1IDEwLjc2NTIgNiA5LjA4OTc1IDZDNy40MTQzIDYgNi4wNTYwOSA3LjM0MzE1IDYuMDU2MDkgOUM2LjA1NjA5IDEwLjY1NjkgNy40MTQzIDEyIDkuMDg5NzUgMTJaIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOS4wODk3NSAyMUMxMy4xMzQ2IDE3IDE3LjE3OTUgMTMuNDE4MyAxNy4xNzk1IDlDMTcuMTc5NSA0LjU4MTcyIDEzLjU1NzYgMSA5LjA4OTc1IDFDNC42MjE5IDEgMSA0LjU4MTcyIDEgOUMxIDEzLjQxODMgNS4wNDQ4NyAxNyA5LjA4OTc1IDIxWiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
}
.site-information .meta .technology::before,
#statement.solution .meta .technology::before,
.site-information .meta .energy-generation::before,
#statement.solution .meta .energy-generation::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxOSAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNzg3NyAxTDEuNTQ1NzQgMTEuNjg3OUMxLjE4MzggMTIuMTA2NCAxLjAwMjgyIDEyLjMxNTcgMS4wMDAwNiAxMi40OTI1QzAuOTk3NjU1IDEyLjY0NjEgMS4wNjg3IDEyLjc5MjMgMS4xOTI3MyAxMi44ODg5QzEuMzM1NCAxMyAxLjYxODA4IDEzIDIuMTgzNDYgMTNIOS43NUw4LjcxMjM0IDIxTDE3Ljk1NDMgMTAuMzEyMUMxOC4zMTYyIDkuODkzNTggMTguNDk3MiA5LjY4NDI5IDE4LjQ5OTkgOS41MDc1NEMxOC41MDIzIDkuMzUzODggMTguNDMxMyA5LjIwNzcgMTguMzA3MyA5LjExMTExQzE4LjE2NDYgOSAxNy44ODE5IDkgMTcuMzE2NSA5SDkuNzVMMTAuNzg3NyAxWiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
}
.site-information .meta .key-statistics::before,
#statement.solution .meta .key-statistics::before,
.site-information .meta .key-stats::before,
#statement.solution .meta .key-stats::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy42Mzc3NCAxMUgyLjc3MDA2QzIuMTUwNDggMTEgMS44NDA2OSAxMSAxLjYwNDA0IDExLjEyMTFDMS4zOTU4OCAxMS4yMjc2IDEuMjI2NjQgMTEuMzk3NiAxLjEyMDU4IDExLjYwNjdDMSAxMS44NDQ0IDEgMTIuMTU1NSAxIDEyLjc3NzhWMTkuMjIyMkMxIDE5Ljg0NDUgMSAyMC4xNTU2IDEuMTIwNTggMjAuMzkzM0MxLjIyNjY0IDIwLjYwMjQgMS4zOTU4OCAyMC43NzI0IDEuNjA0MDQgMjAuODc4OUMxLjg0MDY5IDIxIDIuMTUwNDggMjEgMi43NzAwNiAyMUg3LjYzNzc0TTcuNjM3NzQgMjFIMTQuMjc1NU03LjYzNzc0IDIxTDcuNjM3NzQgNy4yMjIyMkM3LjYzNzc0IDYuNTk5OTQgNy42Mzc3NCA2LjI4ODggNy43NTgzMiA2LjA1MTEyQzcuODY0MzggNS44NDIwNSA4LjAzMzYyIDUuNjcyMDcgOC4yNDE3OCA1LjU2NTU1QzguNDc4NDMgNS40NDQ0NCA4Ljc4ODIyIDUuNDQ0NDQgOS40MDc4IDUuNDQ0NDRIMTIuNTA1NEMxMy4xMjUgNS40NDQ0NCAxMy40MzQ4IDUuNDQ0NDQgMTMuNjcxNCA1LjU2NTU1QzEzLjg3OTYgNS42NzIwNyAxNC4wNDg4IDUuODQyMDUgMTQuMTU0OSA2LjA1MTEyQzE0LjI3NTUgNi4yODg4IDE0LjI3NTUgNi41OTk5NCAxNC4yNzU1IDcuMjIyMjJWMjFNMTQuMjc1NSAyMUgxOS4xNDMyQzE5Ljc2MjcgMjEgMjAuMDcyNSAyMSAyMC4zMDkyIDIwLjg3ODlDMjAuNTE3MyAyMC43NzI0IDIwLjY4NjYgMjAuNjAyNCAyMC43OTI2IDIwLjM5MzNDMjAuOTEzMiAyMC4xNTU2IDIwLjkxMzIgMTkuODQ0NSAyMC45MTMyIDE5LjIyMjJWMi43Nzc3OEMyMC45MTMyIDIuMTU1NSAyMC45MTMyIDEuODQ0MzYgMjAuNzkyNiAxLjYwNjY4QzIwLjY4NjYgMS4zOTc2MSAyMC41MTczIDEuMjI3NjMgMjAuMzA5MiAxLjEyMTFDMjAuMDcyNSAxIDE5Ljc2MjcgMSAxOS4xNDMyIDFIMTYuMDQ1NUMxNS40MjYgMSAxNS4xMTYyIDEgMTQuODc5NSAxLjEyMTFDMTQuNjcxNCAxLjIyNzYzIDE0LjUwMjEgMS4zOTc2MSAxNC4zOTYxIDEuNjA2NjhDMTQuMjc1NSAxLjg0NDM2IDE0LjI3NTUgMi4xNTU1IDE0LjI3NTUgMi43Nzc3OFY2LjU1NTU2IiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}
.site-information .meta .capacity::before,
#statement.solution .meta .capacity::before,
.site-information .meta .system::before,
#statement.solution .meta .system::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMUM0IDcuMTM0MDEgNy4xMzQwMSA0IDExIDRNMTUuNDk5OSA2LjVMMTAuOTk5OSAxMU0yMSAxMUMyMSAxNi41MjI4IDE2LjUyMjggMjEgMTEgMjFDNS40NzcxNSAyMSAxIDE2LjUyMjggMSAxMUMxIDUuNDc3MTUgNS40NzcxNSAxIDExIDFDMTYuNTIyOCAxIDIxIDUuNDc3MTUgMjEgMTFaTTEyIDExQzEyIDExLjU1MjMgMTEuNTUyMyAxMiAxMSAxMkMxMC40NDc3IDEyIDEwIDExLjU1MjMgMTAgMTFDMTAgMTAuNDQ3NyAxMC40NDc3IDEwIDExIDEwQzExLjU1MjMgMTAgMTIgMTAuNDQ3NyAxMiAxMVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
}
.site-information .meta .key-statistics:has(.stat),
#statement.solution .meta .key-statistics:has(.stat),
.site-information .meta .key-stats:has(.stat),
#statement.solution .meta .key-stats:has(.stat) {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 0;
}
.site-information .meta .key-statistics:has(.stat) :first-child,
#statement.solution .meta .key-statistics:has(.stat) :first-child,
.site-information .meta .key-stats:has(.stat) :first-child,
#statement.solution .meta .key-stats:has(.stat) :first-child {
	grid-area: 1 / 1 / 3 / 2;
}
.site-information .meta .key-statistics:has(.stat) :nth-child(2),
#statement.solution .meta .key-statistics:has(.stat) :nth-child(2),
.site-information .meta .key-stats:has(.stat) :nth-child(2),
#statement.solution .meta .key-stats:has(.stat) :nth-child(2) {
	grid-area: 1 / 2 / 2 / 3;
}
.site-information .meta .key-statistics:has(.stat) :nth-child(3),
#statement.solution .meta .key-statistics:has(.stat) :nth-child(3),
.site-information .meta .key-stats:has(.stat) :nth-child(3),
#statement.solution .meta .key-stats:has(.stat) :nth-child(3) {
	grid-area: 2 / 2 / 3 / 3;
}
#statement.solution .tag.ensuring-reliable-energy,
#statement.solution .tag.solving-short-term-energy-gaps,
#statement.solution .tag.removing-carbon-in-energy-sources {
	background: transparent no-repeat scroll 0% 50% / 5.3em auto;
	padding-block: 2.6em;
	padding-inline-start: 6.4em;
}
#statement.solution .tag.ensuring-reliable-energy {
	background-image: url("/wp-content/uploads/2024/11/Cooling-Towers-In-Line-Square.jpg");
}
#statement.solution .tag.solving-short-term-energy-gaps {
	background-image: url("/wp-content/uploads/2024/11/Engineer-Electrical-Testing-Square.jpg");
}
#statement.solution .tag.removing-carbon-in-energy-sources {
	background-image: url("/wp-content/uploads/2024/11/Cooling-Tower-with-Steam-Square.jpg");
}
#statement .solutions .image a {
	position: relative;
	display: block;
}
#statement .solutions .image .cta {
	position: absolute;
	inset: auto 1em 1em auto;
	border: 1px solid;
	padding: 0.5rem;
	z-index: 10;
}
#statement .solutions .image .cta svg {
	width: 1em;
	rotate: -45deg;
}
#statement .list .cta.bookmark .button {
	display: inline-flex;
	font-size: var(--fs-0);
	font-weight: 400;
	color: var(--dark-foreground);
	background-color: var(--today);
	padding-block: 0.6em;
	padding-inline: 1.35em;
	align-content: center;
	justify-content: center;
}
#statement .arrow-s svg {
	rotate: 90deg;
	width: 0.85em;
	translate: 0.4em 0.1em;
}
#featured.solution {
	padding-block: 6rem;
}
#featured .x-btn {
	color: var(--foreground);
	width: min(10rem,50%);
	display: block;
	margin-inline: auto;
	background-color: transparent;
	height: auto;
	border: 1px solid;
	text-shadow: none;
	border-radius: 0;
	margin-block: 4rem 0;
}
#featured .x-col:has(> .none),
#featured .x-col:has(> .empty),
#featured .x-btn .icon {
	display: none;
}
.solution .screen-reader-text.x-section .x-text {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
}
.solution .net-zero p,
.solution .net-zero h2 + p {
	font-size: calc(var(--fs-1) * 1.1);
	font-weight: 300;
}
@media (width < 600px) {
	#featured .x-col,
	#statement .x-col {
		flex: 1 0 calc(100% - var(--page-margin-inline));
	}
	.solution .net-zero .x-row-inner > .x-col {
		flex-basis: 100%;
	}
}
@media (width >= 600px) {
	.solution .net-zero h2 {
		font-size: var(--fs-3);
	}
	.solution .net-zero .x-image img {
		display: block;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		object-position: 50% 0%;  
	} 	
}
@media (width >= 900px) {
	#statement.solution .narrow .x-text {
		width: min(32.7rem, 90%);
	}
}

/* VACANCIES */

#vacancies:has(.empty),
#vacancies:has(.none) {
	display: none;
}
#vacancies .x-row:first-child .x-col:nth-child(2) .x-text {
	font-size: var(--fs-1);
	font-weight: 500;
	text-align: end;
	color: var(--foreground);
}
#vacancies .list {
	display: flex;
	margin-inline: 0;
	padding-inline: 0;
	list-style: none;
	flex-wrap: wrap;
	border-block-start: 1px solid;
	gap: 0;
}
#vacancies .list li {
	display: flex;
	flex-wrap: wrap;
	flex: 1 0 100%;
	border-block-end: 1px solid;
	padding-block: 0.8em;
	margin-inline: 0;
	padding-inline: 0;
	line-height: 160%;
}
#vacancies .list li > * {
	flex: 1.5 0 4rem;
}
#vacancies .list li > .position {
	flex: 2.3 0 4rem;
}
#vacancies .list li > .link {
	flex: 1 0 4rem;
	font-weight: 500;
	align-self: flex-end;
	text-align: end;
}
#vacancies .list li > .link a {
	color: var(--foreground);
}
#vacancies .list li > .link a:hover {
	color: var(--primary);
}

/* VPI IN NUMBERS */

#numbers {
	background: var(--background) url("/wp-content/uploads/2023/11/dots-solutions.jpg") no-repeat scroll 50% 50% / cover;
}
#numbers.portfolio {
	background-image: none;
}
#numbers h2,
#numbers .number {
	color: var(--teal);
}
#numbers .x-row + .x-row {
	padding-block: 4rem;
}
#numbers h2,
#numbers .x-row + .x-row .x-text,
#numbers .x-row + .x-row p {
	font-weight: 400;
	text-align: center;
}
#numbers .number,
#numbers .details {
	display: block;
	text-wrap: balance;
}
#numbers .number {
	font-size: calc(var(--fs-5) * 1.5);
	font-weight: 300;
	line-height: 150%;
}
#numbers .x-text:has(.details),
#numbers p:has(.details) {
	perspective: 952px;
	perspective-origin: 105% 76%;
}
#numbers .details {
	margin-inline: auto;
	width: min(100%, 15ch);
	transform: scaleX(1.1) scaleY(0.7) scaleZ(1.1) rotateX(-15deg) rotateY(30deg) rotateZ(-6deg) translateX(4px) translateY(3px) skewY(0deg);
	transition: 0.15s opacity linear, 0.3s transform ease-in-out;
	opacity: 0;
}
#numbers.active .details {
	transform: none;
	opacity: 1;
}
#numbers .x-col:nth-child(6n-5) .details {
	transition-delay: 0.2s;
}
#numbers .x-col:nth-child(6n-4) .details {
	transition-delay: 1.2s;
}
#numbers .x-col:nth-child(6n-3) .details {
	transition-delay: 2.2s;
}
#numbers .x-col:nth-child(6n-2) .details {
	transition-delay: 3.2s;
}
#numbers .x-col:nth-child(6n-1) .details {
	transition-delay: 4.2s;
}
#numbers .x-col:nth-child(6n) .details {
	transition-delay: 5.2s;
}
@media (width >= 600px) {
	#numbers h2 {
		text-align: start;
	}
}
@media (width >= 1000px) {
	#numbers .number {
		font-size: calc(var(--fs-5) * 1.9);
	}
}

/* TEAM */

.x-col > .team,
.team.stories {
	display: flex;
	margin-inline: auto;
	padding-inline: 0;
	list-style: none;
	flex-wrap: wrap;
	gap: 0;
	width: min(900px, 100%);
}
.team.stories {
	width: auto;
}
.team.dark {
	--foreground: var(--dark-foreground);
}
.team a .icon {
	width: 1em;
	height: auto;
}
.team a.prev .icon {
	rotate: 180deg;
}
.team .x-text:has(.carousel-navigation) {
	position: relative;
}
.team .carousel-navigation {
	font-size: var(--fs-3);
	position: absolute;
	inset: 0 0 auto auto;
	width: 6em;
	z-index: 2;
	text-align: end;
}
.team .carousel-navigation a + a {
	margin-inline-start: 0.6em;
}
.team .x-col > .carousel-navigation:first-child {
	position: relative;
	inset-block-start: 1rem;
	width: min(calc(900px - 3rem), calc(100% - 1.5rem));
	height: 4rem;
	margin-block: 0 -4rem;
	margin-inline: auto;
	z-index: 2;
}
.team .x-col > .carousel-navigation:first-child a {
	color: var(--dark-foreground);
}
.team-list .slick-track {
	background-color: var(--red);
}
.team li,
.x-col .team > div:not(.slick-list),
.team.stories .slick-slider {
	display: flex;
	flex-wrap: wrap;
	margin-inline: 0;
	padding-inline: 0;
	gap: 0;
	align-items: center;
}
.team.dark li,
.team > div:has(> .text),
.team.dark .slick-slider,
.team.stories.dark .slick-slider {
	color: var(--dark-foreground);
	background: var(--red) url("/wp-content/uploads/2024/11/Vivid-Red-Dots-Panel.jpg") no-repeat scroll 50% 50% / cover;
}
.team .text,
.team .photo {
	flex: 1 0 100%;
}
.team .text {
	color: var(--foreground);
	padding-inline: 2rem;
	font-weight: 300;
}
.team .photo {
	order: 1;
}
.team.stories .text {
	gap: 0.5rem;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-end;
}
.solution #team .text,
.solution #team li .text,
.solution #team .slick-slider .text {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;  
}
.team .text .biography,
.team .text .position {
	font-size: var(--fs-0);
	font-weight: 300;
}
.team.stories .text .biography,
.solution .team .text .biography {
	order: 1;
	font-size: var(--fs-1);
}
.team .text .name {
	font-size: var(--fs-2);
	font-weight: 500;
	margin-block: 2.3rem 1rem;
}
.team .text .name:first-child {
	margin-block-start: clamp(1rem, 10%, 2.6rem);
}
.solution #team .slick-slider .text .name {
	margin-block-start: 0;
}
.solution #team .slick-slider .slick-track .text .name {
	margin-block-start: clamp(1rem, 10%, 2.6rem);
}
.team.stories .text .name {
	order: 2;
	margin-block: 1.3rem 0.3rem;
}
.team.stories .text .position {
	order: 3;
	font-size: var(--fs--1);
}
.team li .text,
.team.stories .slick-slider .text {
	padding-block: 2rem;
	padding-inline: 3rem;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: flex-start;
	order: 2;
}
.team .text > * {
	flex: 1 0 80%;
}
.team .text :last-child {
	margin-block-end: 0;
}
.team.dark h3,
.team.dark li h3,
.team.stories .slick-slider h3 {
	color: var(--dark-foreground);
}
.team.dark p:last-child,
.team.dark li p:last-child,
.team.stories.dark .slick-slider p:last-child {
	margin-block-end: 0;
}
.team .photo img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}
@media (width >= 768px) {
	.team .text {
		padding-inline: 0;
	}
	#stories.team.stories {
		margin-block-start: -12.1rem;
	}
	.team.stories .x-row:first-child {
		margin-block: 3rem -6.3rem;
		z-index: 10;
	}
	.team.stories .x-row:first-child .x-text,
	.team.stories .x-row:first-child h2 {
		color: var(--dark-foreground);
	}
	.team.stories .x-row:first-child h2 {
		font-size: var(--fs-1);
	}
	.team.stories .x-row:first-child a,
	.team.stories .x-row:first-child a:hover {
		color: var(--dark-background);
	}
	.team.stories .x-row:first-child .x-text {
		margin-inline: 3rem;
	}
	.team .text,
	.team .photo {
		flex-basis: 45%;
	}
	.team .photo,
	.team li .photo,
	.team .slick-slider .photo {
		order: 2;
	}
	.team .text,
	.team li .text,
	.team .slick-slider .text {
		order: 1;
		padding-inline: 3rem 4rem;
	}
	.team.stories li .photo,
	.team.stories .slick-slider .photo {
		flex: 1 0 10rem;
	}
	.team.stories .text,
	.team.stories li .text,
	.team.stories .slick-slider .text {
		flex: 2 0 10rem;
	}
	.team.stories .biography {
		margin-block-start: clamp(3rem, 10%, 5rem);
	}
	.team .photo img {
		aspect-ratio: 0.8;
	}
}
@media (width >= 850px) {
	.team .photo img {
		aspect-ratio: 1;
	}
	.team.stories .photo img {
		aspect-ratio: 0.75;
	}
}
@media (width >= 1050px) {
	.team.stories .photo img {
		aspect-ratio: 0.9;
	}
}
@media (width >= 1200px) {
	.team.stories .x-row:first-child .x-col:first-child {
		flex-basis: 60%;
	}
	.team .carousel-navigation {
		font-size: var(--fs-2);
	}
}

/* HISTORY */

#history.dark {
	background: var(--background) url("/wp-content/uploads/2024/11/History-Dots.jpg") scroll no-repeat 100% 0% / 100% auto;
}
#history.dark > div {
	background-color: transparent;
}
#history .x-row:first-child h2 {
	margin-block-start: 4rem;
}
#history-list {
	--dot-size: 0.8rem;
	--inline-margin-size: 3rem;
	gap: var(--inline-margin-size);
	list-style: none;
	margin-block: var(--inline-margin-size);
	margin-inline: 0;
	padding-inline: 0;
	position: relative;
}
#history-list::before {
	inset: 0 calc(var(--dot-size) * 0.5) 0 auto;
	position: absolute;
	background-image: linear-gradient(0deg, #FFF0 0%, #FFF 20%, #FFF 80%, #FFF0 100%);
	z-index: 1;
	width: 1px;
	height: auto;
	content: '';
}
#history h2,
#history .x-text p {
	color: var(--dark-foreground);
	text-align: center;
}
#history h2 {
	margin-block-end: 2.7rem;
}
#history .x-text p {
	font-size: var(--fs-2);
	width: min(100%, 40ch);
	margin-inline: auto;
	font-weight: 300;
}
#history-list-enclosure {
	max-height: fit-content;
}
#history-list-enclosure.hidden {
	overflow: hidden;
	max-height: clamp(65rem, 110vh, 92rem);
	width: 100%;
	padding-inline: 0;
	margin-inline: auto;
	-webkit-mask-image: linear-gradient(var(--background) 25%, transparent);
	mask-image: linear-gradient(var(--background) 25%, transparent);
	transition: 0.6s max-height ease;
}
#history-list,
#history-list li {
	display: flex;
	flex-wrap: wrap;
}
#history-list li,
#history-list p,
#history-list h3 {
	flex: 1 0 100%;
	text-align: start;
	margin-block: 0;
	font-size: var(--fs-0);
}
#history-list li,
#history-list p,
#history-list .link a,
#history-list-reveal a,
#history-list-reveal a span {
	color: color-mix(in lab, var(--background-shaded) 79%, var(--background));
}
#history-list .title,
#history-list .link a:hover,
#history-list-reveal a:hover,
#history-list-reveal a:hover span {
	color: var(--foreground);
	font-weight: 400;
}
#history-list li {
	position: relative;
	margin-inline: 0;
	padding-inline: 0 var(--inline-margin-size);
	gap: 1.2rem;
}
#history-list li::after {
	position: absolute;
	content: '';
	border-radius: 50%;
	width: var(--dot-size);
	height: var(--dot-size);
	inset: calc(31vw - var(--inline-margin-size)) 0 auto auto;
	background-color: var(--foreground);
}
#history-list .image {
	order: 1;
	margin-block-end: 0.8rem;
}
#history-list .date {
	order: 2;
	font-size: var(--fs--1);
}
#history-list .title {
	order: 3;
}
#history-list .excerpt {
	order: 4;
}
#history-list .link {
	order: 5;
	margin-block-start: 1rem;
}
#history-list .link a {
	transition: 0.2s color linear;
}
#history-list .link a > .icon,
#history-list-reveal.top .icon.arrow {
	display: inline-block;
	width: 0.9em;
	height: auto;
}
#history-list .link a > .icon {
	rotate: 315deg;
	margin-inline-end: 0.4em;
}
#history-list .link a > .icon svg,
#history-list-reveal.top .icon.arrow svg {
	width: 100%;
	height: auto;
	stroke: var(--foreground);
}
#history-list .image img {
	display: block;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	margin: 0;
}
#history-list-reveal {
	text-align: center;
	list-style: none;
}
#history-list-reveal a,
#history-list-reveal a span {
	display: block;
	transition: 0.3s color linear;
}
#history-list-reveal a {
	font-size: var(--fs-0);
	line-height: 140%;
}
#history-list-reveal .icon.arrow,
#history-list-reveal.top .icon.plus {
	display: none;
}
#history-list-reveal.top .icon.arrow {
	display: inline-block;
}
#history-list-reveal.top .icon.arrow svg {
	rotate: 270deg;
}

@media (width >= 900px) {
	#history-list::before {
		inset: 0 0 0 auto;
	}
	#history-list li::after {
		inset: min(calc(16vw - var(--inline-margin-size)), 160px) calc(var(--inline-margin-size) * -1 - var(--dot-size) * 0.55) auto auto;
	}
	#history-list::before {
		inset: 0 0 0 50%;
	}
	#history-list li {
		flex: 1 0 calc(50% - var(--inline-margin-size));
		padding-inline: 0;
	}
	#history-list li:first-child {
		padding-block-start: 7rem;
	}
	#history-list li:first-child::after {
		inset-block-start: min(calc(16vw - var(--inline-margin-size) + 7rem), calc(160px + 7rem));
	}
	#history-list li:last-child {
		padding-block-end: 7rem;
	}
	#history-list li:nth-child(2n-1) {
		margin-inline: 0 calc(50% + var(--inline-margin-size));
	}
	#history-list li:nth-child(2n) {
		margin-inline: calc(50% + var(--inline-margin-size)) 0;
	}
	#history-list li:nth-child(2n)::after {
		inset-inline: calc(var(--inline-margin-size) * -1 - var(--dot-size) * 0.45) auto;
	}
	#history-list li + li {
		margin-block: -12.6rem 0;
	}
}

/* POWER TODAY / POWER TOMORROW */

#today-tomorrow.light-grey {
	background-color: var(--light-grey);
}
#today-tomorrow .x.three-col:first-child h2 {
	color: var(--foreground);
	font-weight: 500;
}
#today-tomorrow .x.three-col:first-child h2 + p {
	font-size: var(--fs-3);
}
#today-tomorrow h2 {
	font-size: var(--fs-2);
	font-weight: 400;
}
#today-tomorrow .center h2 {
	text-align: center;
}
#today-tomorrow h2 .separator,
#statement .filter .separator {
	visibility: hidden;
}
#today-tomorrow h2 a,
#statement .filter a {
	transition: 0.3s filter linear, 0.3s border-color linear;
	border-block-end: 3px solid transparent;
}
#today-tomorrow h2 a {
	filter: grayscale(100%) brightness(0%);
}
#statement .filter a {
	filter: grayscale(100%) brightness(500%);
}
#today-tomorrow h2 .selected,
#statement .filter .selected,
#today-tomorrow h2 a:hover,
#statement .filter a:hover {
	filter: none;
}
#today-tomorrow h2 .selected,
#statement .filter .selected {
	border-block-end-color: inherit;
}
#today-tomorrow [data-category="today"],
#statement .filter [data-category="today"],
#statement .filter [data-category="tomorrow"],
#today-tomorrow .list .today h3,
#today-tomorrow .list .today h3 a,
#today-tomorrow .list.today .today.tomorrow h3,
#today-tomorrow .list.today .today.tomorrow h3 a {
	color: var(--today);
}
#today-tomorrow [data-category="tomorrow"],
#today-tomorrow .list .tomorrow h3,
#today-tomorrow .list .tomorrow h3 a {
	color: var(--tomorrow);
}
#today-tomorrow .list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-inline: auto;
	padding-inline: 0;
	gap: 2.9rem 2.6rem;
	max-width: var(--narrower-max-width);
}
.shadow .list .site-information {
	box-shadow: 0 0.25rem 1.7rem 0.06rem #00000057;
}
.list .site-information {
	position: relative;
	color: var(--foreground);
	background-color: var(--background);
	background-image: none;
	width: auto;
	flex: 1 0 100%;
	margin-inline: auto;
	padding-block: 2.2rem 0;
}
.site-information .meta li::before {
	filter: invert(100%);
}
.list .site-information h3,
.list .site-information .tags {
	margin-inline: var(--inline-padding);
}
.list .site-information h3 {
	margin-block: 0 1.7rem;
}
.list .site-information .tags {
	margin-block-end: 2.6rem;
}
.list .site-information .tag {
	font-size: var(--fs--1);
	color: var(--sugar-tree);
	border: 1px solid var(--sugar-tree);
}
.careers .list .site-information .tags {
	min-height: 6.6rem;
	align-items: flex-start;
}
.careers .list .site-information .tag {
	font-size: var(--fs-0);
}
.featured .site-information .cta,
.list .site-information .cta {
	position: absolute;
	display: flex;
	inset: auto -0.5rem 1.7rem auto;
	width: clamp(3rem, 12%, 7rem);
	height: auto;
	aspect-ratio: 1;
	z-index: 10;
	justify-content: flex-end;
	align-items: flex-end;
}
@media (width >= 768px) {
	.list .site-information {
		flex: 1 0 calc(50% - 2rem);
	}
	.list .site-information:has(li + li + li) > .image {
		aspect-ratio: 2.15;
	}
}
@media (width >= 1000px) {
	.site-information {
		max-width: calc(50% - 2rem);
	}
	.list .site-information {
		margin-inline: 0 auto;
	}
	#today-tomorrow .list.three .site-information {
		flex-basis: calc(33.33% - 2rem);
		max-width: calc(33.33% - 2rem);
	}
	#today-tomorrow .list.three .site-information .tags {
		min-height: 6.2rem;
		align-items: center;
	}
}

/* ACCORDION: FAQ AND BENEFITS */

#faq .x-row,
#faq .x-row {
	width: 85%;
	max-width: min(1000px, 100%);
}
#faq h2,
#benefits h2 {
	font-size: var(--fs-2);
	font-weight: 500;
	color: var(--foreground);
}
#faq .x-acc > .x-acc-item {
	border-block: 2px solid var(--foreground);
}
#faq .x-acc > .x-acc-item + .x-acc-item,
#benefits .x-acc > .x-acc-item + .x-acc-item {
	margin-block-start: 0;
	border-block-start: 0 none;
}
#faq .x-acc-header .x-acc-header-text,
#benefits .x-acc-header .x-acc-header-text {
	color: var(--foreground);
	font-size: var(--fs-1);
	font-weight: 400;
}
#faq .x-acc-item > .x-acc-header {
	padding-inline: 0;
}
#faq .x-acc-header .x-acc-header-text {
	color: var(--primary);
	font-weight: 600;
}
#benefits .x-acc-header .x-acc-header-text {
	padding-inline-start: 2.2em;
}
#faq .x-acc-header .x-acc-header-text::before,
#benefits .x-acc-header .x-acc-header-text::before {
	display: block;
	position: absolute;
	content: '';
	width: 1.3em;
	height: auto;
	aspect-ratio: 1;
	background: transparent scroll no-repeat 0% 0% / auto 100%;
	inset-inline-start: 0.9em;
}
#well-being .x-acc-header .x-acc-header-text::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggc3Ryb2tlPSIjMDAwMDBBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43IiBkPSJNMTYgMjkuMzNjNy4zNjMgMCAxMy4zMzMtNS45NjkgMTMuMzMzLTEzLjMzMyAwLTcuMzYzLTUuOTctMTMuMzMzLTEzLjMzNC0xMy4zMzMtNy4zNjMgMC0xMy4zMzMgNS45Ny0xMy4zMzMgMTMuMzMzIDAgNy4zNjQgNS45NyAxMy4zMzQgMTMuMzMzIDEzLjMzNFoiLz48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yIiBzdHJva2Utd2lkdGg9IjEuNyIgZD0iTTE2IDI5LjMzYzcuMzYzIDAgMTMuMzMzLTUuOTY5IDEzLjMzMy0xMy4zMzMgMC03LjM2My01Ljk3LTEzLjMzMy0xMy4zMzQtMTMuMzMzLTcuMzYzIDAtMTMuMzMzIDUuOTctMTMuMzMzIDEzLjMzMyAwIDcuMzY0IDUuOTcgMTMuMzM0IDEzLjMzMyAxMy4zMzRaIi8+PHBhdGggc3Ryb2tlPSIjMDAwMDBBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43IiBkPSJNMTUuOTk1IDEyLjA4OGMtMS4zMzMtMS41NTgtMy41NTYtMS45NzctNS4yMjYtLjU1LTEuNjcgMS40MjYtMS45MDUgMy44MTItLjU5NCA1LjUuODQgMS4wOCAyLjk5MiAzLjA4NSA0LjQzIDQuMzg2LjQ3OC40MzMuNzE3LjY1IDEuMDAzLjczNi4yNDYuMDc1LjUyNy4wNzUuNzczIDAgLjI4Ny0uMDg3LjUyNi0uMzAzIDEuMDA0LS43MzYgMS40MzgtMS4zIDMuNTktMy4zMDUgNC40My00LjM4NiAxLjMxLTEuNjg4IDEuMTA0LTQuMDg5LS41OTUtNS41LTEuNjk4LTEuNDEyLTMuODkyLTEuMDA4LTUuMjI1LjU1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1vcGFjaXR5PSIuMiIgc3Ryb2tlLXdpZHRoPSIxLjciIGQ9Ik0xNS45OTUgMTIuMDg4Yy0xLjMzMy0xLjU1OC0zLjU1Ni0xLjk3Ny01LjIyNi0uNTUtMS42NyAxLjQyNi0xLjkwNSAzLjgxMi0uNTk0IDUuNS44NCAxLjA4IDIuOTkyIDMuMDg1IDQuNDMgNC4zODYuNDc4LjQzMy43MTcuNjUgMS4wMDMuNzM2LjI0Ni4wNzUuNTI3LjA3NS43NzMgMCAuMjg3LS4wODcuNTI2LS4zMDMgMS4wMDQtLjczNiAxLjQzOC0xLjMgMy41OS0zLjMwNSA0LjQzLTQuMzg2IDEuMzEtMS42ODggMS4xMDQtNC4wODktLjU5NS01LjUtMS42OTgtMS40MTItMy44OTItMS4wMDgtNS4yMjUuNTVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
}
#financial .x-acc-header .x-acc-header-text::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43IiBkPSJNNCAyOC4wMDNoMjRtLTIwLTRWMTMuMzM2bTUuMzMzIDEwLjY2N1YxMy4zMzZtNS4zMzQgMTAuNjY3VjEzLjMzNk0yNCAyNC4wMDNWMTMuMzM2bTIuNjY3LTRMMTYuNTY1IDMuMDIzYy0uMjA1LS4xMjgtLjMwNy0uMTkyLS40MTctLjIxN2EuNjY2LjY2NiAwIDAgMC0uMjk2IDBjLS4xMS4wMjUtLjIxMi4wODktLjQxNy4yMTdMNS4zMzMgOS4zMzZoMjEuMzM0WiIvPjwvc3ZnPg==");
}
#home .x-acc-header .x-acc-header-text::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS43IiBkPSJNMTIgMjguMDAxdi05Ljg2N2MwLS43NDYgMC0xLjEyLjE0NS0xLjQwNWExLjM0IDEuMzQgMCAwIDEgLjU4My0uNTgzYy4yODUtLjE0NS42NTktLjE0NSAxLjQwNS0uMTQ1aDMuNzM0Yy43NDYgMCAxLjEyIDAgMS40MDUuMTQ1LjI1LjEyOC40NTUuMzMyLjU4My41ODMuMTQ1LjI4NS4xNDUuNjU5LjE0NSAxLjQwNXY5Ljg2N00xNC42OSAzLjY4NiA1LjY0NyAxMC43MmMtLjYwNC40Ny0uOTA3LjcwNS0xLjEyNCAxLS4xOTMuMjYtLjMzNy41NTQtLjQyNC44NjZDNCAxMi45NCA0IDEzLjMyMiA0IDE0LjA4OHY5LjY0NmMwIDEuNDk0IDAgMi4yNC4yOSAyLjgxLjI1Ni41MDMuNjY0LjkxIDEuMTY2IDEuMTY2LjU3LjI5MSAxLjMxNy4yOTEgMi44MS4yOTFoMTUuNDY3YzEuNDk0IDAgMi4yNCAwIDIuODExLS4yOS41MDItLjI1Ni45MS0uNjY0IDEuMTY1LTEuMTY2LjI5MS0uNTcuMjkxLTEuMzE3LjI5MS0yLjgxdi05LjY0N2MwLS43NjYgMC0xLjE0OS0uMDk5LTEuNTAyYTIuNjY0IDIuNjY0IDAgMCAwLS40MjQtLjg2N2MtLjIxNy0uMjk0LS41Mi0uNTI5LTEuMTI0LTFMMTcuMzEgMy42ODdjLS40NjktLjM2NC0uNzAzLS41NDYtLjk2MS0uNjE2YTEuMzM0IDEuMzM0IDAgMCAwLS42OTcgMGMtLjI2LjA3LS40OTMuMjUyLS45NjIuNjE2WiIvPjwvc3ZnPg==");
}
#faq .x-acc > .x-acc-item > div > .x-acc-content,
#benefits .x-acc > .x-acc-item > div > .x-acc-content {
	border: 0 none;
}
#faq .x-acc-header-indicator,
#benefits .x-acc-header-indicator,
#faq .x-active .x-acc-header-indicator,
#benefits .x-active .x-acc-header-indicator {
	color: transparent;
	rotate: 0deg;
	transform: none;
	transition: none;
}
#faq .x-acc-header-indicator::before,
#benefits .x-acc-header-indicator::before {
	display: block;
	position: absolute;
	content: '';
	width: 1.1em;
	height: auto;
	aspect-ratio: 1;
	background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAyMDAwIDEwMDAiPjxwYXRoIGQ9Ik00NzYuMjIyIDgxMy4wOTFWNTIzLjI2N0gxODYuOTh2LTQ3LjYyNGgyODkuMjQyVjE4Ni45OGg0Ni40NjZ2Mjg4LjY2MmgyOTAuNDA0djQ3LjYyNEg1MjIuNjg3djI4OS44MjVoLTQ2LjQ2NXptMTMzNy4xNTItMjg5LjgyNEgxMTg2Ljk4di00Ny42MjRoNjI2LjM5NCIvPjwvc3ZnPg==") scroll no-repeat 0% 50% / auto 100%;
	rotate: -90deg;
	transform: none;
	transition: 0.3s rotate ease-in-out;
}
#faq .x-active .x-acc-header-indicator::before,
#benefits .x-active .x-acc-header-indicator::before {
	background-position-x: 100%;
	rotate: 0deg;
	transform: none;
}
#faq .x-acc-content,
#benefits .x-acc-content {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem
}
#faq .x-acc-content {
	margin-block: 0 1.4rem;
	padding-block: 0;
}
#faq .x-acc-content > *,
#benefits .x-acc-content > * {
	flex: 1 0 100%;
}
#faq .x-acc-content > *,
#benefits .x-acc-content > * {
	flex: 1 0 100%;
}
#faq .x-acc-header-text .x-icon,
#benefits .x-acc-header-text .x-icon {
	font-size: 1.2rem;
	margin-inline-end: 1.3em;
}
#faq h4,
#benefits h4,
#faq p,
#benefits p {
	font-size: var(--fs-0);
	margin-block: 0.7em;
	line-height: 120%;
}
#faq h4,
#benefits h4 {
	font-weight: 500;
	margin-block-end: 0.3em;
}
#faq h4 + p,
#benefits h4 + p {
	margin-block-start: 0.3em;
}
#faq .x-text p,
#benefits .x-text p {
	font-weight: 400;
}
@media (width >= 768px) {
	#faq .x-acc-content > *,
	#benefits .x-acc-content > * {
		flex: 1 0 40%;
	}
}

/* GRADUATES */

#graduates h2,
#graduates .cta {
	font-size: var(--fs-1);
	font-weight: 500;
}
#graduates.dark h2 {
	color: var(--dark-foreground);
}
#graduates h2 + p {
	font-size: var(--fs-3);
}
#graduates p.narrow {
	margin-inline: 0 auto;
	max-width: min(100%, 750px);
}
#graduates .x-image {
	margin-inline: 0;
}
#graduates .x-image img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
#graduates .x-text {
	margin-block: 0 2.5rem;
	margin-inline: 3rem;
}
#graduates .x-text h3 {
	margin-block: 0 2.1rem;
	font-size: var(--fs-2);
	font-weight: 500;
}
@media (width >= 768px) {
	#graduates .x-text {
		min-height: 15.8em;
	}
}

/* JOIN THE TEAM */

#join h2,
#join .cta {
	font-size: var(--fs-1);
	font-weight: 500;
}
@media (width >= 768px) {
	#join .x-text {
		width: min(44rem, 55%);
		margin-inline-start: auto;
	}
}

/* NEWS */

.vpi-posts {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	gap: 0;
}
.vpi-posts > li {
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
	flex: 1 0 100%;
	transition: 0.3s filter linear, 0.4s translate ease 0.15s;
}
.vpi-posts > li:hover {
	filter: brightness(110%);
	translate: 0 -5px;
}
.archive .x-header-landmark,
.single .x-header-landmark,
.archive .x-landmark,
.single .x-landmark {
	margin: 0;
	padding: 0;
	border: 0 none;
	width: auto;
}
.archive .x-header-landmark,
.single .x-header-landmark {
	margin-block: 3.7rem 3rem;
}
.featured h3 {
	font-size: var(--fs-4);
	font-weight: 500;
}
.featured.hide-press-release .x-row + .x-row .press-release {
	display: none;
}
.featured.hide-press-release .x-row + .x-row .x-col:first-child {
	flex: 1 0 100%;
}
.featured-enclosure {
	position: relative;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}
.featured-enclosure .image {
	flex: 1 0 100%;
	z-index: 1;
	position: relative;
}
.featured-enclosure .image img {
	width: 100%;
	height: auto;
}
.featured-enclosure .text {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.featured-enclosure .categories,
.featured-enclosure .title,
.featured-enclosure .reading-time,
.featured-enclosure .date,
.featured-enclosure .cta {
	flex: 1 0 100%;
}
.featured-enclosure .title,
.archive .vpi-posts .title,
.press-release .vpi-posts .title {
	margin-block: 0 2rem;
	margin-inline: 0 auto;
	font-size: var(--fs-2);
	font-weight: 400;
	text-wrap: balance;
}
.archive .vpi-posts .categories,
.press-release .vpi-posts .categories,
.featured-enclosure .text > h3:first-child,
.featured-enclosure .text > p:first-child {
	margin-block-start: clamp(2rem, 5%, 9rem);
}
.featured-enclosure .text > .cta:last-child {
	margin-block: clamp(2.6rem, 6%, 6rem) 0;
	align-self: flex-end;
	display: none;
}
.featured-enclosure .title a {
	color: var(--foreground);
}
.featured-enclosure .title a:hover {
	color: color-mix(in lab, var(--sugar-tree) 10%, var(--foreground));
	text-decoration: underline;
	text-underline-offset: 0.1em;
	text-decoration-color: color-mix(in lab, var(--sugar-tree) 70%, var(--foreground));
}
.featured-enclosure .cta {
	margin-block-start: clamp(6rem, 9vw, 18rem);
}
.featured-enclosure.case-study .cta,
.featured-enclosure.solution .cta {
	margin-block-start: clamp(2rem, 3vw, 8rem);
}
.featured-enclosure .cta .button {
	border: 1px solid;
	background-color: transparent;
	text-shadow: none;
	border-radius: 0;
	line-height: 120%;
	padding-block: 0.8em;
	padding-inline: 1.4em;
}
.featured-enclosure .cta .icon.svg-arrow {
	width: 3rem;
	height: auto;
	rotate: -45deg;
	transition: 0.3s translate ease-in-out 0.15s;
}
.solution .featured-enclosure .cta .icon.svg-arrow {
	width: 2.2rem;
}
.featured-enclosure .cta a:hover {
	color: var(--foreground);
}
.featured-enclosure .cta a:hover .icon.svg-arrow {
	translate: 0.2em -0.2em;
}
.category-filter {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: flex-start;
	align-items: flex-start;
	margin-block: 1.7rem;
	margin-inline: 0;
	padding: 0;
	gap: 1rem;
}
.category-filter li {
	display: flex;
	font-size: var(--fs-sm);
	flex: 1 0 fit-content;
	max-width: fit-content;
	margin: 0;
	padding: 0;
}
.category-filter .count {
	font-size: var(--fs--2);
	position: absolute;
	inset-block-end: 1.3em;
	inset-inline-end: 0.2em;
	filter: opacity(0%);
	transition: 0.3s filter linear;
}
.category-filter a:hover .count,
.category-filter .selected .count {
	filter: none;
}
.category-filter li a,
.x-pagination li a,
.x-pagination .current {
	border-radius: 0;
}
.category-filter a {
	position: relative;
	color: var(--primary);
	border: 1px solid var(--primary);
	padding-block: 0.5em;
	padding-inline: 1.2em;
}
.category-filter a:hover {
	color: var(--primary-interaction);
	border: 1px solid var(--primary-interaction);
}
.category-filter .selected a,
.x-pagination .current {
	color: var(--background);
	background-color: var(--primary);
}
.category-filter .selected a:hover {
	color: var(--background);
	background-color: var(--primary-interaction);
}
.archive .vpi-posts {
	gap: 3.5rem 2.3rem;
}
.archive .vpi-posts .hide {
	display: none;
	filter: opacity(0%);
}
.archive .hentry {
	margin-block: 0;
}
.archive .vpi-posts li {
	flex-basis: 22rem;
}
.archive .vpi-posts li,
.press-release .vpi-posts li {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem 0.5rem;
}
.archive .vpi-posts .image,
.press-release .vpi-posts .image,
.archive .vpi-posts .categories,
.press-release .vpi-posts .categories,
.archive .vpi-posts .title,
.press-release .vpi-posts .title,
.archive .vpi-posts .reading-time {
	flex: 1 0 99%;
	color: var(--foreground);
}
.archive .vpi-posts .image,
.press-release .vpi-posts .image,
.archive .vpi-posts .title,
.press-release .vpi-posts .title,
.archive .vpi-posts .reading-time,
.press-release .vpi-posts .reading-time,
.archive .vpi-posts .date,
.press-release .vpi-posts .date {
	margin-block: 0;
}
.archive .vpi-posts .categories,
.press-release .vpi-posts .categories,
.archive .vpi-posts .reading-time,
.press-release .vpi-posts .reading-time,
.archive .vpi-posts .date,
.press-release .vpi-posts .date {
	margin-block: clamp(0.9rem, 5%, 7.9rem);
}
.archive .vpi-posts a,
.press-release .vpi-posts a {
	color: var(--foreground);
}
.archive .vpi-posts li .image,
.press-release .vpi-posts li .image {
	order: 1;
}
.archive .vpi-posts .categories,
.press-release .vpi-posts .categories {
	order: 2;
	font-weight: 400;
}
.archive .vpi-posts .title,
.press-release .vpi-posts .title {
	order: 3;
}
.archive .vpi-posts .reading-time,
.press-release .vpi-posts .reading-time {
	order: 4;
	flex: 0 1 auto;
}
.archive .vpi-posts .date,
.press-release .vpi-posts .date {
	order: 5;
	flex: 1 1 auto;
}
.archive .vpi-posts .date::before,
.press-release .vpi-posts .date::before,
.featured-enclosure .reading-time + time::before {
	color: var(--sugar-tree);
	content: '•';
	position: relative;
	display: inline-block;
	width: 1em;
	margin-inline: 0.5em 0.3em;
}
.x-pagination li a,
#vpi-posts-pagination a {
	color: var(--primary);
	border: 1px solid var(--primary);
}
.x-pagination li a:hover,
.x-pagination .current a,
.x-pagination a.current,
#vpi-posts-pagination a:hover,
#vpi-posts-pagination .current a,
#vpi-posts-pagination a.current {
	color: var(--background);
	border: 1px solid var(--primary);
}
@media (width >= 600px) {
	.archive .vpi-posts li,
	.press-release .vpi-posts li {
		border-block-end: 1px solid;
		padding-block-end: 1.6rem;
	}
	.archive .vpi-posts .categories,
	.press-release .vpi-posts .categories,
	.archive .vpi-posts .reading-time,
	.press-release .vpi-posts .reading-time,
	.archive .vpi-posts .date,
	.press-release .vpi-posts .date {
		margin-block: 0;
	}
	.archive .vpi-posts .categories,
	.press-release .vpi-posts .categories,
	.archive .vpi-posts .reading-time,
	.press-release .vpi-posts .reading-time,
	.archive .vpi-posts .date,
	.press-release .vpi-posts .date {
		font-size: var(--fs--1);
	}
	.featured-enclosure {
		--foreground: var(--dark-foreground);
		--background: var(--dark-background);
	}
	.featured-enclosure .image img {
		aspect-ratio: 1.9;
		object-fit: cover;
	}
	.featured-enclosure .text {
		position: absolute;
		color: var(--foreground);
		background: linear-gradient(114deg, #0000009c 24%, #0000007c 44%, #0000001a 100%) no-repeat scroll 0 0 / cover;
		padding-block: clamp(2rem, 10vw, 10rem) clamp(2rem, 6vw, 6rem);
		padding-inline: clamp(0.2rem, 5vw, 3rem);
		gap: 0.8em;
		inset: 0;
		z-index: 1;
	}
	.featured-enclosure.case-study .text,
	.featured-enclosure.solution .text {
		background: linear-gradient(98deg, #000 28%, #00000061 100%) no-repeat scroll 0 0 / cover;
		padding-block: clamp(1.2rem, 3vw, 3.1rem);
	}
	.featured-enclosure a,
	.featured-enclosure .categories,
	.featured-enclosure .title,
	.featured-enclosure .title a,
	.featured-enclosure .reading-time,
	.featured-enclosure .date,
	.featured-enclosure .cta,
	.featured-enclosure .cta .button {
		color: var(--foreground);
		margin-block: 0;
	}
	.featured-enclosure .title {
		flex: 0 1 min(100%, 45rem);
		font-size: var(--fs-3);
	}
	.archive .vpi-posts .title,
	.press-release .vpi-posts .title {
		order: 3;
		font-size: var(--fs-1);
		font-weight: 500;
		margin-block-end: 0.9rem;
	}
	.featured-enclosure .reading-time + time::before {
		color: var(--primary);
		width: 1em;
		margin-inline: 1em 0.3em;
	}
	.featured #press-release h3 {
		font-size: var(--fs-1);
		font-weight: 500;
		margin-block: 0 0.18em;
	}
	.featured-enclosure .text > .cta:last-child {
		display: inline-flex;
	}
}
@media (width >= 768px) {
	.archive .vpi-posts li {
		max-width: calc(33.333% - 2rem);
	}
}

/* NEWS ARTICLE */

.single-post .entry-header {
	margin-block: 2rem 5rem;
}
.single-post .entry-content {
	margin-block: 0 3rem;
	padding-block-end: 5.1rem;
	border-block-end: 1px solid color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
}
.single-post .entry-header,
.single-post .entry-header ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}
.single-post .entry-header > * {
	flex: 1 0 calc(100% - 1rem);
}
.single-post .entry-header ul {
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	gap: 0.9rem;
}
.single-post .entry-header li {
	flex: 1;
	margin-inline: 0;
	padding-inline: 0;
}
.single-post .entry-header .p-categories {
	order: 1;
	margin-block: 0;
}
.single-post .entry-header .entry-title {
	color: var(--foreground);
	order: 2;
	font-size: var(--fs-5);
	font-weight: 300;
	margin-block: 0.2em 0.4em;
	line-height: 115%;
}
.single-post .entry-header .p-meta {
	order: 3;
	gap: 2rem;
}
.single-post .entry-header .p-meta li {
	flex: 0 0 auto;
}
.single-post .entry-header .p-meta,
.single-post .entry-header .p-categories a,
.single-post .entry-header .reading-time,
.single-post .entry-header .date {
	color: var(--sugar-tree);
}
.single-post .entry-header .p-categories li,
.single-post .entry-header .reading-time,
.single-post .entry-header .date {
	font-size: var(--fs-0);
}
.single-post .entry-header .p-categories li {
	font-weight: 600;
}
.single-post .entry-header .x-framework-icon {
	display: none;
}
.single-post .entry-header .reading-time .icon {
	position: relative;
	width: 0.8em;
	height: 0.8em;
	inset-block-start: 0.05em;
	margin-inline-end: 0.4em;
}
.single-post .entry-featured {
	padding: 0;
	border: 0 none;
	margin-block: 4rem 1.6rem;
}
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content blockquote p,
.single-post .entry-content li {
	color: var(--foreground);
	font-size: var(--fs-0);
	line-height: 135%;
	font-weight: 300;
}
.single-post .entry-content p,
.single-post .entry-content li {
	margin-block: 1.2em;
}
.single-post .entry-content .wp-block-pullquote:has(cite),
.single-post .entry-content .wp-block-pullquote:has(cite),
.single-post .entry-content .wp-block-pullquote__citation:has(cite),
.single-post .entry-content .wp-block-pullquote__citation:has(cite) {
	margin-block-end: 2.6rem;
}
.single-post .entry-content .wp-block-pullquote:has(cite) p,
.single-post .entry-content .wp-block-pullquote:has(cite) li,
.single-post .entry-content .wp-block-pullquote__citation:has(cite) p,
.single-post .entry-content .wp-block-pullquote__citation:has(cite) li {
	margin-block-end: 0.8em;
}
.single-post blockquote,
.single-post .wp-block-pullquote {
	margin-block: 0;
	margin-inline: 3rem 0;
	padding-block: 0;
	padding-inline: 0;
	border: 0 none;
}
.single-post .wp-block-pullquote {
	margin-inline: 3rem;
}
.single-post .wp-block-pullquote blockquote {
	color: var(--primary);
	font-size: var(--fs-4);
	font-weight: 300;
	border: 0 none;
	margin-inline: 0;
	text-align: start;
	width: min(34ch, 100%);
}
.single-post .wp-block-pullquote blockquote p,
.single-post .wp-block-pullquote blockquote li {
	color: var(--primary);
	font-size: inherit;
}
.single-post .wp-block-pullquote cite,
.single-post .wp-block-pullquote footer,
.single-post .wp-block-pullquote__citation {
	font-size: var(--fs-0);
	line-height: 130%;
	text-transform: none;
	display: block;
}
.single-post .wp-block-pullquote cite strong,
.single-post .wp-block-pullquote footer strong,
.single-post .wp-block-pullquote__citation strong {
	font-weight: 600;
	display: block;
}
.single-post .social-share {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	align-content: flex-end;
	margin-block: 0;
	margin-inline: auto 0;
	display: flex;
}
.single-post .social-share li {
	padding-inline: 0;
	margin-inline: 0;
	display: inline-block;
	flex: 0 1 2.6rem;
	aspect-ratio: 1;
}
.single-post .social-share a {
	display: flex;
	align-content: center;
	justify-content: center;
	color: color-mix(in lab, var(--sugar-tree) 80%, var(--background));
	border: 1px solid color-mix(in lab, var(--sugar-tree) 80%, var(--background));
	aspect-ratio: 1;
}
.single-post .social-share .icon {
	--foreground-fill: var(--sugar-tree);
	color: var(--sugar-tree);
	aspect-ratio: 1;
	width: 40%;
	height: auto;
	display: block;
	margin-inline: auto;
}
.single-post .social-share a:hover {
	color: color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
	border: 1px solid color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
}
.single-post .social-share a:hover .icon {
	color: color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
}
.single-post #about {
	border-block-start: 1px solid color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
	padding-block-start: 6rem;
	margin-block-start: 4.3rem;
}
.single-post #about h3 {
	font-size: var(--fs-0);
	font-weight: 300;
}
.single-post #about .x-global-block:not(:first-of-type) {
	margin-block: 2.2rem 0;
}
.single-post .entry-footer.cf {
	display: none;
}
@media (width >= 900px) {
	.single-post .entry-header {
		margin-inline: 4rem;
	}
	.single-post .entry-content {
		margin-inline: auto;
		width: min(100%, 90ch);
	}
}

/* RELATED NEWS/POSTS */

#related-news .x-container.max {
	max-width: var(--wider-max-width);
}
#related-news h2 {
	color: var(--foreground);
}
#related-news a {
	color: var(--foreground);
	background-color: var(--background);
	padding-block-end: 1.3rem;
	border-block-end: 1px solid;
	gap: 1.3rem;
}
#related-news .recent-posts {
	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	gap: 3rem;
}
#related-news .recent-posts > li {
	flex-basis: 13.2rem;
}
#related-news a:hover {
	color: color-mix(in lab, var(--sugar-tree) 80%, var(--foreground));
}
#related-news .image img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
#related-news .image {
	order: 1;
}
#related-news .title,
#related-news .date,
#related-news .reading-time {
	padding-inline: 1.3rem;
}
#related-news .title {
	order: 2;
	font-size: var(--fs-1);
	margin-block: 1rem 0;
	font-weight: 500;
}
#related-news .date,
#related-news .reading-time {
	font-size: var(--fs--1);
}
#related-news .date {
	order: 3;
	flex: 2 1 5em;
}
#related-news .reading-time {
	order: 4;
	flex: 0 1 12em;
	align-self: flex-end;
}
#related-news .reading-time .icon {
	--foreground-fill: var(--sugar-tree);
	color: var(--sugar-tree);
	aspect-ratio: 1;
	width: 1em;
	height: auto;
	display: block;
	margin-inline: 0 0.7em;
}

/* NEWS ARCHIVE */

.archive .x-container.max.width .x-main.full {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2rem;
}
.archive .x-container.max.width div::before {
	display: none;
}
.archive .x-container.max.width .x-main.full ul {
	display: inline-flex;
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	gap: 1.7rem;
}
.archive .x-container.max.width .x-main.full .entry-featured {
	padding: 0;
	border: 0 none;
}
.archive .x-container.max.width .x-main.full .icon {
	width: 1em;
	height: auto;
	aspect-ratio: 1;
}
.archive .x-container.max.width .x-main.full .x-framework-icon {
	display: none;
}

/* SPOTLIGHT PAGES */

.parent-spotlight .masthead .x-btn-navbar,
.parent-spotlight .masthead .x-nav-wrap.desktop,
.parent-spotlight footer.x-colophon.bottom nav,
.parent-spotlight footer.x-colophon.bottom .company-name,
.parent-spotlight footer.x-colophon.bottom .slogan,
.parent-spotlight footer.x-colophon.bottom .social {
	display: none;
}
.parent-spotlight {
	overflow: initial;
}
.parent-spotlight .cs-content {
	position: relative;
}
.parent-spotlight .masthead,
.parent-spotlight section.dark,
.parent-spotlight .sticky-share.dark {
	--background: var(--dark-background);
	--foreground: var(--dark-foreground);
}
.parent-spotlight .masthead .x-brand svg {
	fill: var(--dark-foreground);
}
.parent-spotlight .x-section h2 {
	color: var(--purple);
}
.parent-spotlight h3,
.parent-spotlight p,
.parent-spotlight li,
.parent-spotlight .x-text {
	font-size: var(--fs-1);
	font-weight: 300;
}
.parent-spotlight .dark h2 {
	fill: var(--dark-foreground);
}
.parent-spotlight h2.large,
.parent-spotlight h3.large,
.parent-spotlight .large {
	font-size: var(--fs-5);
	font-weight: 300;
	color: var(--foreground);
}
.parent-spotlight h3 {
	font-size: var(--fs-4);
	margin-block: 0 1.8rem;
	margin-inline: 0 auto;
	width: min(24ch, 100%);
	text-wrap: balance;
}
.parent-spotlight .medium {
	font-size: var(--fs-2);
}
.parent-spotlight .columns:has(p + p) > p {
	break-inside: avoid;
}
.parent-spotlight .x-col:has(.x-image + *) .x-image {
	margin-block: 0 3rem;
}
.parent-spotlight .dots-grey .x-bg-layer-lower-image {
	mask-image: linear-gradient(0deg, #0000, #00000014 9%, #00000012 91%, #00000000);
	rotate: 180deg;
}
.parent-spotlight #hero.dark .x-bg {
	background-color: var(--dark-background);
}
.parent-spotlight #hero .x-bg-layer-lower-image {
	mask-image: linear-gradient(90deg, #0000 30%, #0000002F 76%, #000);
}
.parent-spotlight #hero .x-col {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.parent-spotlight #hero .x-col .x-text {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 2.2rem;
}
.parent-spotlight #hero .x-col h1,
.parent-spotlight #hero .x-col h2,
.parent-spotlight #hero .x-col p {
	flex: 1 0 90%;
	text-align: center;
	margin-block: 0;
}
.parent-spotlight #hero.dark h1,
.parent-spotlight #hero.dark h2,
.parent-spotlight #hero.dark p,
.parent-spotlight #hero.dark a {
	color: var(--dark-foreground);
}
.parent-spotlight #hero h2,
.parent-spotlight #hero p {
	font-size: var(--fs-3);
	font-weight: 400;
}
.parent-spotlight #hero .share-links {
	font-size: var(--fs-0);
}
.parent-spotlight #hero h1 {
	font-size: clamp(2.9rem, 3.2vw + 2.7rem, 7.5rem);
	line-height: 110%;
	font-weight: 200;
}
.parent-spotlight #about h2,
.parent-spotlight #about p {
	font-size: var(--fs-2);
}
.parent-spotlight #about p {
	font-weight: 300;
}
.parent-spotlight #sticky-share {
	position: sticky;
	inset-block-end: 0;
	display: none;
}
.parent-spotlight .sticky-share.dark {
	background-color: var(--dark-background);
	z-index: 200;
}
.parent-spotlight .sticky-share.dark .x-text {
	color: var(--dark-foreground);
}
.parent-spotlight .sticky-share .x-text {
	width: min(1256px, 95%);
	margin-inline: auto;
}
.parent-spotlight .sticky-share .x-text p {
	font-weight: 700;
}
.parent-spotlight .share-links {
	font-size: var(--fs-0);
}
.parent-spotlight .button.square {
	display: inline-flex;
	aspect-ratio: 1;
	width: 1.4em;
	justify-content: center;
	align-items: center;
	color: var(--background);
	background-color: var(--foreground);
	border-radius: 4px;
}
.parent-spotlight .share-links .button {
	margin-inline-start: 0.9em;
}
.parent-spotlight .share-links .button:first-of-type {
	margin-inline-start: 1.3em;
}
.parent-spotlight .button.square svg {
	flex: 0 1 0.9em;
	min-width: 0.9em;
	position: relative;
	inset-block-start: 0.1em;
}
.parent-spotlight .button.square .foreground-fill {
	fill: var(--background);
}
.parent-spotlight .x-section:has(.x-col.sticky + .x-col) .sticky {
	position: relative;
	align-self: stretch;
}
.parent-spotlight .x-section:has(.x-col.sticky + .x-col) .sticky .x-text {
	position: sticky;
	inset-block-start: 9rem;
}
.parent-spotlight .x-section:has(.x-col.sticky + .x-col) .sticky h2 {
	margin-block: 0;
}
.parent-spotlight .x-section .columns p:first-child {
	margin-block-start: 0;
}
.parent-spotlight .x-section .columns p:last-child {
	margin-block-end: 0;
}
.parent-spotlight #numbers {
	margin-block: 4rem 0;
	background: none;
}
.parent-spotlight #numbers ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	gap: 2em;
}
.parent-spotlight #numbers li {
	flex: 1 0 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.parent-spotlight #numbers .details {
	width: auto;
	font-size: var(--fs-0);
}
.parent-spotlight .fact-list {
	display: flex;
	flex-wrap: wrap;
	margin-block: 4rem 2rem;
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	gap: 3rem;
}
.parent-spotlight .fact-list li {
	flex: 1 0 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.parent-spotlight .fact-list .check-circle {
	display: inline-flex;
	font-size: 0.8em;
	line-height: 100%;
	width: 1.2em;
	border-radius: 50%;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
}
.parent-spotlight .fact-list .check-circle.primary {
	background-color: var(--primary);
	color: var(--dark-foreground);
}
.parent-spotlight .fact-list .check-circle .x-icon {
	scale: 0.65;
}
.parent-spotlight #share.dark .x-bg {
	background-color: var(--dark-background);
}
.parent-spotlight #share.dark .x-bg-layer-lower-image {
	mask-image: linear-gradient(0deg, #00000021, #00000075);
}
.parent-spotlight #share .share-links .button:first-of-type {
	margin-inline-start: 0;
}
.parent-spotlight #subscription {
	background: linear-gradient(-24deg, #0000 0%, #000D 85%) no-repeat scroll 0 0 / 100% auto, var(--background) url("/wp-content/uploads/2023/11/bg-footer.jpg") no-repeat scroll 50% 0% / cover;
}
.parent-spotlight #subscribe p {
	margin-block: 0 2rem;
}
.parent-spotlight #subscribe .required {
	position: relative;
	font-size: 0.5em;
	color: var(--primary);
	inset-block-end: 0.9rem;
}
.parent-spotlight #subscribe textarea,
.parent-spotlight #subscribe select,
.parent-spotlight #subscribe input[type="text"],
.parent-spotlight #subscribe input[type="email"],
.parent-spotlight #subscribe input[type="tel"] {
	font-size: 1.2rem;
	color: var(--foreground);
	background-color: transparent;
	margin-block: 0;
	padding-inline: 0;
	border: 0 none;
	box-shadow: 0 -1px var(--foreground) inset;
}
.parent-spotlight #subscribe input[type="checkbox"] {
	position: relative;
	accent-color: var(--primary);
	margin-block: 0;
	margin-inline: 0 0.5rem;
	inset-block-end: 0.2em;
}
.parent-spotlight #subscribe label {
	margin-block: 0 0.3rem;
}
.parent-spotlight #subscribe p:is(.name,.email) label {
	color: var(--primary);
	margin-block: 0;
}
.parent-spotlight #subscribe .subscribe label {
	font-size: 1.3rem;
	line-height: 130%;
}
.parent-spotlight #subscribe .subscribe .wpcf7-list-item {
	margin: 0;
	padding: 0;
}
.parent-spotlight #subscribe .privacy-notice {
	font-size: 1.2rem;
}
.parent-spotlight #subscribe button svg {
	width: 1em;
	position: relative;
	inset-block-start: 0.2em;
	inset-inline-start: 0.2em;
}
.parent-spotlight #subscribe .wpcf7-not-valid-tip {
	color: var(--primary);
	margin-block: 0.2em 0;
	padding-inline-start: 0.3em;
	border-inline-start: 4px solid var(--primary);
}
.parent-spotlight #subscribe .sent .wpcf7-response-output {
	background-color: var(--dark-background);
	border: 0 none;
	color: var(--dark-foreground);
}
@media (width < 600px) {
	.parent-spotlight .x-row > .x-row-inner > .x-col {
		flex-basis: 100%;
	}
}
@media (width >= 768px) {
	.parent-spotlight #hero .x-col {
		justify-content: start;
	}
	.parent-spotlight #hero .x-col h1,
	.parent-spotlight #hero .x-col h2,
	.parent-spotlight #hero .x-col p {
		text-align: start;
	}
	.parent-spotlight #hero .x-col .x-text > #hero-share-links {
		text-align: end;
	}
	.parent-spotlight .fact-list .check-circle {
		display: flex;
		margin-block-end: 1rem;
		margin-inline: 0 auto;
	}
	.parent-spotlight #subscribe p {
		margin-block: 0 1.5rem;
	}
}
@media (width >= 900px) {
	.parent-spotlight #hero .x-col .x-text {
		gap: 1.2rem;
	}
	.parent-spotlight #sticky-share {
		display: block;
	}
	.parent-spotlight .x-section.shift-left .x-col,
	.parent-spotlight .x-section.shift-right .x-col {
		flex: 1 0 3rem;
	}
	.parent-spotlight .x-section.shift-left .x-col {
		flex: 1 0 3rem;
		margin-inline-end: calc(25% + 2rem);
	}
	.parent-spotlight .x-section.shift-right .x-col {
		margin-inline-start: calc(25% + 2rem);
	}
	.parent-spotlight .narrow {
		width: min(70ch, 100%);
		margin-inline: 0 auto;
	}
	.parent-spotlight .columns {
		column-width: 70ch;
		column-gap: 3.3em;
	}
	.parent-spotlight #humber-zero .narrow {
		width: min(55ch, 100%);
	}
	.parent-spotlight #special .narrow {
		width: min(45ch, 100%);
	}
	.parent-spotlight #value .narrow {
		width: min(45rem, 100%);
	}
	.parent-spotlight #share .narrow {
		width: min(38ch, 100%);
	}
	.parent-spotlight #scale .columns {
		column-width: 50ch;
	}
	.parent-spotlight .x-section.shift-left .columns,
	.parent-spotlight .x-section.shift-right .columns {
		column-width: 45ch;
	}
	.parent-spotlight #numbers li {
		flex-basis: calc(33% - 3em);
	}
	.parent-spotlight .fact-list li {
		flex: 1 0 45%;
	}
	.parent-spotlight #subscribe .name .wpcf7-form-control-wrap {
		display: inline-block;
		width: calc(50% - 1rem);
		margin-inline: 0 1rem;
	}
	.parent-spotlight #subscribe .name .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
		margin-inline: 1rem 0;
	}
}
@media (width >= 1000px) {
	.parent-spotlight #numbers .number {
		font-size: var(--fs-5);
	}
}

/* DOCUMENTATION */

.documentation h1 {
	font-size: var(--fs-4);
}
.documentation h2 {
	font-size: var(--fs-2);
}
.documentation h3 {
	font-size: var(--fs-1);
}
.documentation h2 + p {
	font-size: var(--fs-0);
}
.documentation .x-text > ol {
	margin-inline: 0;
}
.documentation table {
	width: clamp(20em, 100%, 60em);
	margin-inline: -5.5rem 0;
}
.documentation table th,
.documentation table td {
	font-size: var(--fs--1);
	border: 1px solid color-mix(in lab, var(--foreground) 40%, var(--background));
	vertical-align: top;
}
.documentation table thead th {
	padding-block: 1.5em;
	padding-inline: 0.85em;
}
.documentation table td {
	padding-block: 1em;
	padding-inline: 0.85em;
}
.documentation table tr:has(:last-child:nth-child(2)) > :first-child {
	width: 26%;
}
.documentation table tr:has(:last-child:nth-child(2)) > :last-child {
	width: 74%;
}
.documentation .x-text > ol > li::before {
	color: var(--primary);
}
.documentation thead tr {
	color: var(--dark-foreground);
	background-color: var(--dark-background);
}
.documentation .x-text ol {
	counter-reset: item;
}
.documentation .x-text ol li {
	display: block;
	margin-block-end: 1.5rem;
}
.documentation .x-text > ol > li:not(:first-child) {
	margin-block-start: 2rem;
}
.documentation .x-text ol li ol,
.documentation .x-text ol li table {
	margin-block-start: 1rem;
}
.documentation .x-text ol li::before {
    content: counters(item, '.') '.';
    counter-increment: item;
	margin-inline-end: 1rem;
	font-weight: 500;
}
.documentation .x-text ol li h2,
.documentation .x-text ol li h3 {
	display: inline-block;
	margin-block: 0;
}
.documentation .x-text ol li h2,
.documentation .x-text ol li:has(> h2)::before {
	font-size: var(--fs-1);
	font-weight: 700;
}
.documentation .x-text ol li h3,
.documentation .x-text ol li h4,
.documentation .x-text ol li:has(> h3)::before,
.documentation .x-text ol li:has(> h4)::before {
	font-size: var(--fs--1);
}
.documentation .x-text ol li h3,
.documentation .x-text ol li:has(> h3)::before {
	font-weight: 500;
}
.documentation .files li + li {
	margin-block-start: 2rem;
}
.documentation .files .cd {
	display: inline-block;
	color: color-mix(in lab, var(--primary) 70%, var(--background));
	font-size: 0.94em;
	font-weight: 600;
	min-width: 7.8ch;
}
@media (width >= 600px) {
	.documentation table {
		margin-inline: inherit;
	}
	.documentation table th,
	.documentation table td {
		font-size: var(--fs--1);
	}
}
.compliance .files {
	list-style: none;
}

/* SLICK SLIDER */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slider > div + div,
.slick-slider > p + p,
.slick-slider > li + li {
	display: none;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
	display: flex;
	flex-wrap: wrap;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* CORNERSTONE */

.tco-user-1 .tco-control-section-heading, 
.tco-user-1 .tco-control-section-heading + .tco-control-group {
	outline: 2px solid #F00;
}