.entry-content > .wp-block-group:not(.has-background) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-group.has-ai-bug {
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 50vw;
    aspect-ratio: 1 / 1;
    transform: translateY(-60%);
    background-image: url(../../../images/KBD\ AI.svg);
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.wp-block-group.is-style-pre-footer {
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--base) 10.889%,
		var(--wp--preset--color--base-3) 100%
	);
	border-radius: 0 0 60px 60px;
	position: relative;
	z-index: 2;

	@media screen and (max-width: 768px) {
		border-radius: 0 0 30px 30px;
	}
}

/* Home stats band (Figma 179:175) — full viewport, content centered. The
   sections above and below overlap its edges with rounded corners, and JS sets
   --kbd-stats-shift so the content drifts slower than the page (parallax). */
.wp-block-group.is-style-home-stats {
	--kbd-column-rule-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #101617);
	position: relative;
	z-index: 1;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));

	@media screen and (max-width: 768px) {
		min-height: 70svh;
	}

	/* White dotted grid overlay (Figma Dot Pattern 179:183) — anchored top-left. */
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image: url(../../../images/home-stats-dots.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: left top;
		opacity: 0.7;
		mix-blend-mode: hard-light;
		-webkit-mask-image: radial-gradient(
			ellipse 120% 130% at 0% 0%,
			#000 0%,
			#000 40%,
			transparent 75%
		);
		mask-image: radial-gradient(
			ellipse 120% 130% at 0% 0%,
			#000 0%,
			#000 40%,
			transparent 75%
		);
	}

	> * {
		position: relative;
		z-index: 1;
	}

	> .wp-block-columns {
		transform: translate3d(0, var(--kbd-stats-shift, 0px), 0);
		will-change: transform;
	}

	.wp-block-heading,
	p {
		color: inherit;
	}

	/* Stat numbers a few points larger (KBD-28). Weight 550 (KBD-49). Tighter tracking (KBD-118). */
	.wp-block-heading {
		font-size: calc(clamp(56px, 6.5vw, 96px) * var(--kbd-scale, 1)) !important;
		font-weight: 550 !important;
		letter-spacing: -0.04em;
	}

	/* Supporting copy: thinner measure so it wraps sooner (KBD-28). Weight stays 300. */
	.wp-block-column > p,
	.wp-block-column > .wp-block-paragraph {
		max-width: 14em;
	}
}

/* Neighbours of the stats band overlap it with rounded corners, so it reads
   as being uncovered from above and covered from below. Only the touching
   corners are forced; the far corners keep whatever the editor sets. */
:is(.entry-content, .wp-block-post-content) > :has(+ .is-style-home-stats),
:is(.entry-content, .wp-block-post-content) > .is-style-home-stats + * {
	--kbd-stats-overlap: 60px;
	position: relative;
	z-index: 2;

	@media screen and (max-width: 768px) {
		--kbd-stats-overlap: 30px;
	}
}

:is(.entry-content, .wp-block-post-content) > :has(+ .is-style-home-stats) {
	border-bottom-left-radius: var(--kbd-stats-overlap) !important;
	border-bottom-right-radius: var(--kbd-stats-overlap) !important;
	margin-bottom: calc(var(--kbd-stats-overlap) * -1) !important;
	box-shadow: 0 16px 16px 0
		color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

:is(.entry-content, .wp-block-post-content) > .is-style-home-stats + * {
	border-top-left-radius: var(--kbd-stats-overlap) !important;
	border-top-right-radius: var(--kbd-stats-overlap) !important;
	margin-top: calc(var(--kbd-stats-overlap) * -1) !important;
	box-shadow: 0 -16px 16px 0
		color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.is-style-rounded-bottom {
	border-radius: 0 0 60px 60px;

	@media screen and (max-width: 768px) {
		border-radius: 0 0 30px 30px;
	}
}

/* When the pattern is used inside post content (not as a template part) */
body:not(.editor-styles-wrapper):not(.block-editor-page)
	:is(.entry-content, .wp-block-post-content)
	> .is-style-pre-footer {
	margin-bottom: -60px;

	@media screen and (max-width: 768px) {
		margin-bottom: -30px;
	}
}


/**
 * Scroll Content
 *
 */
.is-style-scroll-content {
	z-index: 4 !important;
	position: relative;
	* {
		margin-top: 0;
	}
}
body:not(.editor-styles-wrapper):not(.block-editor-page) .is-style-scroll-content.is-vertical {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%);

	>*{
		position: absolute;
		top: 0; 
		margin-top:0;
		will-change: transform;
	}
	> :first-child.animate {
		animation: scroll-up 15s linear infinite;
	}
	> :nth-child(2).animate {
		animation: scroll-up2 15s linear infinite;
	}
}
body:not(.editor-styles-wrapper):not(.block-editor-page) .is-style-scroll-content:not(.is-vertical) {
	overflow: hidden;
	display: flex;
  will-change: transform;


	>*{
		flex-shrink: 0;
		will-change: transform;
	}
	> .animate{
		animation: scroll-left var(--kbd-scroll-duration, 32s) linear infinite;
	}
}
	

@keyframes scroll-up {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-100%);
	}
}

@keyframes scroll-up2 {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes scroll-left {
	0% {
	  transform: translate3d(0, 0 ,0);
	}
	100% {
	  transform: translate3d(calc(-100% - 24px), 0 ,0);
	}
}

.wp-block-group[class*="has-background"] {
	--current-background-color: var(--wp--preset--color--base);
}

.wp-block-group.has-gradient-1-gradient-background {
	--current-background-color: var(--wp--preset--color--base-3);
}

.is-position-sticky:has(+ .is-style-card-stack) {
	top: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px)
	) !important;
	background-color: var(--wp--preset--color--base);
	z-index: 4;
}

.is-position-sticky:has(+ .is-style-card-stack) + .is-style-card-stack {
	--kbd-stack-inset: 0px;
}

.is-style-card-stack {
	--kbd-stack-heading: 0px;
	--kbd-stack-chrome: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px) +
			var(--kbd-stack-heading, 0px) + var(--kbd-stack-inset, 1.5rem)
	);
	--kbd-stack-max-height: calc(100dvh - var(--kbd-stack-chrome));
	--kbd-stack-scale: 1;
	--kbd-stack-blur: 0px;
	--kbd-stack-opacity: 1;
}

@media (min-width: 782px) {
	.is-style-card-stack.is-stack-active {
		gap: 0 !important;
	}

	.is-style-card-stack.is-stack-active > * {
		position: sticky;
		top: var(--kbd-stack-chrome);
		margin-block-end: var(--wp--preset--spacing--50, 3rem);
		z-index: var(--kbd-stack-z, 1);
		isolation: isolate;
		overflow: clip;
		max-height: var(--kbd-stack-max-height);
		min-height: 0;
		will-change: transform, filter, opacity;
		transform: scale(var(--kbd-stack-scale));
		transform-origin: center top;
		filter: blur(var(--kbd-stack-blur));
		opacity: var(--kbd-stack-opacity);

		&:last-child {
			margin-block-end: 0;
		}

		&.is-receding {
			pointer-events: none;
		}
	}

	.is-style-card-stack.is-stack-active > .wp-block-columns > .wp-block-column {
		min-height: 0;
		overflow: hidden;
	}

	.is-style-card-stack.is-stack-active > .wp-block-columns .wp-block-image {
		height: 100%;
		margin: 0;
	}

	.is-style-card-stack.is-stack-active > .wp-block-columns .wp-block-image img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-card-stack.is-stack-active > * {
		--kbd-stack-scale: 1 !important;
		--kbd-stack-blur: 0px !important;
		--kbd-stack-opacity: 1 !important;
	}
}

/*
 * Service Stack: service cards divided by hairlines. On desktop each card sticks
 * one peek lower than the last and covered cards fade (cardStack.js).
 */
.is-position-sticky:has(+ .is-style-service-stack) {
	top: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px)
	) !important;
	background-color: var(--wp--preset--color--base);
	z-index: 10;
}

/* Heading only sticks alongside an active (desktop) stack. */
.is-position-sticky:has(+ .is-style-service-stack:not(.is-stack-active)) {
	position: relative !important;
}

.is-style-service-stack {
	--kbd-service-stack-peek: calc(clamp(48px, 4.44vw, 64px) * var(--kbd-scale, 1));
	--kbd-stack-heading: 0px;
	--kbd-stack-opacity: 1;

	padding-inline: 0 !important;

	> * {
		box-sizing: border-box;
		margin-block: 0 !important;
		padding-inline: 0 !important;
		padding-block: var(--wp--preset--spacing--50, 3rem);
		background-color: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--stroke);
	}

	> :first-child {
		border-top: 0;
	}

	> :last-child {
		padding-block-end: 0;
	}

	.kbd-service-stack__title {
		margin: 0;
		font-family: var(--wp--preset--font-family--primary);
		font-size: clamp(56px, 8.89vw, 128px);
		font-weight: 450;
		line-height: 0.85;
		letter-spacing: -0.04em;
	}

	.kbd-service-stack__desc {
		max-width: calc(850px * var(--kbd-scale, 1));
		margin-bottom: 0;
		font-family: var(--wp--preset--font-family--primary);
		/* Body copy (KBD-116): same as a default paragraph. */
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 300;
		line-height: var(--wp--custom--line-height--body);
		letter-spacing: var(--wp--custom--letter-spacing--body);
		/* No one-word last lines (KBD-128/129/130). */
		text-wrap: pretty;
	}
}

@media (min-width: 782px) {
	.is-style-service-stack.is-stack-active > * {
		position: sticky;
		top: calc(
			var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px) +
				var(--kbd-stack-heading, 0px) +
				(var(--kbd-stack-z, 1) - 1) * var(--kbd-service-stack-peek)
		);
		z-index: var(--kbd-stack-z, 1);
		/* Short top padding so a covered card's peek shows the top of its title. */
		padding-block-start: calc(var(--kbd-service-stack-peek) * 0.2);
		transform: translateY(var(--kbd-stack-shift, 0px));

		> * {
			opacity: var(--kbd-stack-opacity);
		}

		&.is-receding {
			pointer-events: none;
		}
	}

	.is-style-service-stack.is-stack-active > :last-child {
		padding-block-end: var(--wp--preset--spacing--50, 3rem);
	}
}

.is-style-stacked-cards {
	> div {
		transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	}
	> .stuck:not(:last-child) {
		background-color: var(--wp--preset--color--base-3) !important;
		&:has(+ .stuck:not(:last-child)) {
			background-color: var(--wp--preset--color--contrast) !important;
			color: var(--wp--preset--color--base) !important;
		}
	}

}
.is-style-gets-uncovered-container {
	/* margin-top: -60px !important; */
	border-radius: 60px;
	position: relative !important;
	overflow: clip;
}

body:not(.editor-styles-wrapper):not(.block-editor-page) {
	:is(.entry-content, .wp-block-post-content)
		> *:has(~ .is-style-gets-uncovered):not(.is-style-gets-uncovered) {
		position: relative;
		z-index: 2;
	}

	/* Process owns pin/scroll-jack — never use sticky (blocks GSAP pin start). */
	.is-style-gets-uncovered:not(.wp-block-kbd-process) {
		position: sticky !important;
		top: auto !important;
		bottom: 0 !important;
		z-index: 1 !important;
	}

	.wp-block-kbd-process.is-style-gets-uncovered {
		position: relative;
		z-index: 1;
		/* Sit under the previous section so it can scroll away and reveal this one. */
		margin-top: -40vh;
	}

	.is-style-gets-uncovered-container > .is-style-gets-uncovered {
		z-index: 1 !important;
	}

	.is-style-gets-uncovered-container > :not(.is-style-gets-uncovered) {
		position: sticky !important;
		top: calc(
			var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px)
		) !important;
		z-index: 2 !important;
	}

	.wp-block-group:has(+ .is-style-gets-uncovered) {
		background-color: var(--wp--preset--color--base);
		box-shadow: 0 16px 16px 0
			color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	}

	@media screen and (max-width: 768px) {
		.is-style-gets-uncovered:not(.wp-block-kbd-process) {
			position: relative !important;
			margin-bottom: 0 !important;
		}

		.wp-block-kbd-process.is-style-gets-uncovered {
			position: relative;
			margin-top: 0;
		}

		.is-style-gets-uncovered > :first-child {
			margin-top: var(--wp--preset--spacing--60);
		}

		.kbd-gets-uncovered-next {
			margin-top: 0 !important;
		}
	}
}

/* Process pin-spacer: JS adds .kbd-process-uncover-above (nested :has() is invalid). */
.kbd-process-uncover-above:has(+ .pin-spacer) {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 16px 16px 0
		color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.is-style-uncovers-next {
	z-index: 6 !important;
			box-shadow: 0px 72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;

	& + .wp-block-group:not(.is-style-gets-uncovered) { 
		position: sticky !important;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px)) !important;
		margin-top: -50vh !important;
		z-index: 5 !important;
	}
}

.wp-group-block:has(+ .is-style-uncovers-previous) {
	z-index: 5 !important;
	position: sticky !important;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px)) !important;



}


.is-style-uncovers-previous {
	z-index: 6 !important;
		box-shadow: 0px -72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;


		& + .wp-block-group { 
		position: relative;
		z-index: 6 !important;
	}
}

.is-style-gets-covered {
	position: sticky  !important;
	margin-top: -60px !important;
	z-index: 5 !important;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px) - 60px) !important;
	@media screen and (max-width: 768px) {
		margin-top: -30px !important;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px) - 30px) !important;

	}
}

.is-style-sticky-bottom {
	position: sticky  !important;
	bottom: 0 !important;
}

.is-style-top-green-shadow {
	box-shadow: 0px -72px 72px 20px color-mix(in srgb, var(--wp--preset--color--accent-2) 50%, transparent) !important;
}

.wp-block-group.is-linked a.wp-block-group__link {
	max-width: 100vw;
}



.is-style-overflow-clip {
	overflow: clip;
}

.is-style-service-accordion {
	position: relative;
		overflow: clip;

	& > :not(:first-child) {
		box-sizing: border-box;
		transition: height 0.3s, content-visibility 0.3s, display 0.3s, opacity 0.3s, margin-top 0.3s;  
		transition-behavior: allow-discrete;

	
	}

	&.is-open {
		z-index: 10;
		& > :not(:first-child) {
			opacity: 1;
			height: auto;
			@starting-style {
				opacity: 0;
				height: 0;  
				margin-top: 0;
			}
		}
	}

	&:not(.is-open) {
		& > :not(:first-child) {
			opacity: 0;
			height: 0;  
			display: none;
			margin-top: 0;
		}
	}


}

.is-style-service-accordion .is-style-service-card-info {
	margin-top: calc(var(--card-padding-top, 0px) * -1);
	margin-bottom: calc(var(--card-padding-bottom, 0px) * -1);
	margin-right: calc(var(--card-padding-right, 0px) * -1);

}



:root {
  interpolate-size: allow-keywords;
}

/*
 * Page Hero — Figma 202:33 / 202:51.
 * Full-bleed section + spacing|40 gutters (same as header/footer).
 * Children stay in the centered contentSize column — do not force
 * margin-left: 0 (that pins text to the gutter and breaks wide viewports).
 */
.is-style-page-hero {
	box-sizing: border-box;
	width: 100%;
	/* Same gutters as header / footer / service-cards (spacing|40). */
	padding-inline: var(--wp--preset--spacing--40);
	/* Space from the nav’s bottom edge to hero copy — background still fills this padding.
	 * --kbd-header-bar-bottom is 0 without the overlay bar, so this is 100px on full-width too. */
	padding-top: calc(var(--kbd-header-bar-bottom, 0px) + var(--kbd-hero-content-gap, 100px)) !important;
	padding-block-start: calc(var(--kbd-header-bar-bottom, 0px) + var(--kbd-hero-content-gap, 100px)) !important;
	color: var(--wp--preset--color--contrast, #101617);
	text-align: left;
}

/*
 * Fill the constrained content column (theme contentSize), centered like
 * header/footer. Text stays left-aligned via text-align on the section.
 */
.is-style-page-hero.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1813px);
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-style-page-hero .wp-block-heading,
.is-style-page-hero h1 {
	/* Keep horizontal auto margins from constrained layout. */
	margin-block: 0;
	/* Figma: 156px / 140 leading / -6.24 tracking / weight 550 */
	font-size: calc(clamp(48px, 10.83vw, 156px) * var(--kbd-scale, 1)) !important;
	font-weight: 550 !important;
	letter-spacing: -0.04em !important;
	line-height: calc(140 / 156) !important;
	color: var(--wp--preset--color--contrast, #101617);
	text-align: left;
	text-wrap: balance;
}

.is-style-page-hero .wp-block-heading :is(strong, em),
.is-style-page-hero h1 :is(strong, em) {
	font-size: inherit !important;
	font-style: normal;
	font-weight: 550 !important;
	line-height: inherit;
	letter-spacing: inherit;
}

/*
 * Green trailing period — real in-flow text so fade-letters wraps it as the
 * last .char and it fades in after the final letter. JS injects the accent
 * span when missing (ensurePageHeroAccentPeriod). ::after is editor/no-JS
 * fallback only.
 */
.is-style-page-hero .kbd-home-hero__heading-accent,
.is-style-page-hero .kbd-page-hero__heading-accent,
.is-style-page-hero .kbd-home-hero__heading-accent .char,
.is-style-page-hero .kbd-page-hero__heading-accent .char {
	color: var(--wp--preset--color--accent, #49d31b);
}

.is-style-page-hero
	.wp-block-heading:not(
		:has(.kbd-home-hero__heading-accent, .kbd-page-hero__heading-accent)
	)::after,
.is-style-page-hero
	h1:not(
		:has(.kbd-home-hero__heading-accent, .kbd-page-hero__heading-accent)
	)::after {
	content: '.';
	color: var(--wp--preset--color--accent, #49d31b);
}

.is-style-page-hero .kbd-page-hero__lede,
.is-style-page-hero > p:not(.is-style-green-dot),
.is-style-page-hero > .wp-block-group > p:not(.is-style-green-dot) {
	/* Type comes from theme.json paragraph styles. */
	margin-block-start: var(--wp--preset--spacing--50, 3rem) !important;
	margin-block-end: 0;
	text-align: left;
}

/* Hide legacy green-dot eyebrow if still present in saved content. */
.is-style-page-hero > p.is-style-green-dot,
.is-style-page-hero > .is-style-green-dot {
	display: none;
}

.is-style-page-hero .kbd-home-hero__muted {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #101617) 40%, transparent);
}

@media screen and (max-width: 768px) {
	.is-style-page-hero .wp-block-heading,
	.is-style-page-hero h1 {
		line-height: 0.9 !important;
		text-wrap: pretty;
	}
}

.is-style-post-hero {
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--wp--preset--spacing--40);
	padding-top: calc(var(--kbd-header-bar-bottom, 0px) + var(--kbd-hero-content-gap, 100px)) !important;
	padding-block-start: calc(var(--kbd-header-bar-bottom, 0px) + var(--kbd-hero-content-gap, 100px)) !important;
	color: var(--wp--preset--color--contrast, #101617);
}

.is-style-post-hero.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1813px);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Figma (1440): 17px category pill, 28px above the title */
.is-style-post-hero .kbd-post-hero__category {
	display: flex;
	margin: 0 0 calc(31.11px * var(--kbd-scale, 1));

	a {
		display: inline-flex;
		align-items: center;
		height: calc(42.22px * var(--kbd-scale, 1));
		padding-inline: calc(16.67px * var(--kbd-scale, 1));
		border-radius: 999px;
		background: var(--wp--custom--color--tag);
		color: var(--wp--preset--color--contrast, #101617);
		font-size: calc(18.89px * var(--kbd-scale, 1));
		font-weight: var(--wp--custom--font-weight--medium);
		letter-spacing: -0.02em;
		line-height: 1.1;
		text-decoration: none;
	}

	/* One pill: the first category */
	a:not(:first-of-type),
	.wp-block-post-terms__separator {
		display: none;
	}
}

/* Figma: light 40px series name over a 62.9px title, both at 1.1 leading */
.is-style-post-hero .wp-block-post-title {
	max-width: calc(1036px * var(--kbd-scale, 1));
	margin-block: 0;
	font-size: var(--wp--custom--font-size--article-heading) !important;
	font-weight: var(--wp--custom--font-weight--medium) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--contrast, #101617);
	text-align: left;
	text-wrap: pretty;
}

.is-style-post-hero .wp-block-post-title .kbd-post-title__lead {
	display: block;
	font-size: var(--wp--custom--font-size--article-kicker);
	font-weight: var(--wp--custom--font-weight--light);
	letter-spacing: -0.0315em;
}

.is-style-homepage-hero:not(.block-editor-block-list__block) {
	height: calc(300vh - var(--wp-admin--admin-bar--height, 0px));
	justify-content: flex-start !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 0 !important;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);


	& .hero-content {
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) );
		align-content: center;
		justify-content: flex-start;
		width: 100%;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
	}


	& .masked-hero-mask {
		position: sticky;
		width: 100%;
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		top: var(--wp-admin--admin-bar--height, 0px);
		background-color: var(--wp--preset--color--contrast);
		mask-image: radial-gradient(black 50%, transparent 50.1%);
		mask-position: center center;
		mask-repeat: no-repeat;
		mask-size: 1em 1em;
		margin-top: calc(-100vh ) !important;
	}

	& .masked-hero {
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));

		overflow: clip;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		position: absolute;
		inset: 0;

		background-image: radial-gradient(176.3% 133.81% at 24.79% 4.28%, var(--wp--preset--color--accent-2) 23.69%, var(--wp--preset--color--accent) 72.52%, var(--wp--preset--color--contrast) 100%) !important;
		/* background-size: cover !important; */
		background-position: center center !important;
		background-repeat: no-repeat !important;

		background-size: cover;

		&:before {
			content: "";
			background-image: url(../../../images/hero-circle.svg);
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			position: absolute;
			inset: 0;
			width: 100vw;
			aspect-ratio: 1;
			left: calc(var(--background-position-left) - 50vw);
			top: calc(var(--background-position-top) - 50vw);
			transform: scale(calc(0.8 + var(--background-position-progress) * .75));
		}
		mark {
			color: transparent !important;
		}

		& > * {
			color: var(--wp--preset--color--base) !important;
		}

		& .kbd-underline {
			background-image: linear-gradient(to right, var(--wp--preset--color--base) 0%,var(--wp--preset--color--base) 98%);
			text-shadow: none;
		}
	}
}

.wp-block-group-is-layout-grid.is-style-case-study-grid {
	& > * > * {
		inset: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		overflow: clip;
		border-radius: calc(clamp(15px, 2vw, 30px) * var(--kbd-scale, 1));
		& > img {

			inset: 0;
			height: 100%;
			width: 100%;
		}
	}

	&:has(.has-aspect-ratio:is([style*="aspect-ratio:555"],[style*="aspect-ratio: 555"]):first-child  + .has-aspect-ratio:is([style*="aspect-ratio:785"],[style*="aspect-ratio: 785"])) {
		grid-template-columns: 555fr 785fr;
		aspect-ratio: 1360 / 764;
		grid-template-rows: 1fr 1fr;
		gap: min(1.5vw, 20px);

		& > * {
			grid-column: span 1 !important;
		}

	}

	&:has(.has-aspect-ratio:is([style*="aspect-ratio:555"],[style*="aspect-ratio: 555"]):first-child  + .has-aspect-ratio:is([style*="aspect-ratio:401"],[style*="aspect-ratio: 401"])) {
		grid-template-columns: 555fr 401fr;
		grid-template-rows: 401fr 401fr;

		aspect-ratio: 996/764;
		max-height: 990px;
		gap: min(4vw, 51px);

		& > * {
			grid-column: span 1 !important;
		}


	}

	&:has(.has-aspect-ratio:is([style*="aspect-ratio:785"],[style*="aspect-ratio: 785"]:first-child) + .has-aspect-ratio:is([style*="aspect-ratio:555"],[style*="aspect-ratio: 555"])) {
		grid-template-columns: 785fr 555fr;
		aspect-ratio: 1360 / 764;
		grid-template-rows: 1fr 1fr;
		gap: min(1.5vw, 20px);

		& > * {
			grid-column: span 1 !important;
		}

	}


	&:has(.has-aspect-ratio:is([style*="aspect-ratio:401"],[style*="aspect-ratio: 401"]:first-child) + .has-aspect-ratio:is([style*="aspect-ratio:555"],[style*="aspect-ratio: 555"])) {
		grid-template-columns: 401fr 555fr;
		grid-template-rows: 401fr 401fr;

		aspect-ratio: 996/764;
		gap: min(4vw, 51px);
		max-height: 990px;

		& > * {
			grid-column: span 1 !important;
		}


	}


	/*
	 * A Lottie Cover keeps its aspect ratio, so cells stacked beside a taller
	 * spanning cell can come up short. Stretch it to its grid area instead;
	 * its animation is set to cover, so it crops to fill. Both axes stretch,
	 * or the ratio would widen it from the stretched height past its column.
	 */
	& > .wp-block-gb-lottiecover {
		align-self: stretch;
		justify-self: stretch;
	}

	/* Same fade-up as .is-style-fade-up; JS adds .in-viewport. */
	&:not(.block-editor-block-list__block) {
		& > * {
			opacity: 0;
			translate: 0 40px;
			transition: opacity 0.33s ease-in-out, translate 0.33s ease-in-out;
		}
	}

	&.in-viewport > * {
		translate: 0 0 !important;
		opacity: 1 !important;
	}


}

/*
 * Full Width Parallax and Full Width Static covers run full width and tuck
 * under the rounded, shadowed edges of the sections around them. Only
 * Parallax moves on scroll (the :root rules below).
 */
:is(.wp-block-group, .wp-block-columns):has( + :is(.is-style-full-width-behind, .is-style-full-width-static)) {
	border-bottom-left-radius: 60px !important;
	border-bottom-right-radius: 60px !important;
	z-index: 6 !important;
	position: relative !important;	

	@media screen and (max-width: 768px) {
		border-bottom-left-radius: 30px !important;
		border-bottom-right-radius: 30px !important;
	}

		
	box-shadow: 0px 72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;


	&:not(.has-background) {
		background-color: var(--wp--preset--color--base) !important;
	}

	& + :is(.is-style-full-width-behind, .is-style-full-width-static) {
	
		margin-top: -60px !important;
		z-index: 5 !important;		

		@media screen and (max-width: 768px) {
			margin-top: -30px !important;
		}

	}


}

:root .is-style-full-width-behind {

	overflow: clip;

	.wp-block-cover__image-background,
	> .wp-block-cover__video-background,
	> .kbd-video-fit,
	> .kbd-cover-video-poster,
	> .lottie-element {
		scale: 1.2 !important;
	}
}

/*
 * Scroll-driven parallax runs with the scroll itself, so it never trails a
 * frame behind like a scroll listener. Same travel as the script fallback in
 * frontend/index.js: 25% of the scroll distance, scaled 1.2 with the layer.
 */
@keyframes kbd-cover-parallax {
	from {
		translate: 0 -30vh;
	}
	to {
		translate: 0 30%;
	}
}

@supports (animation-timeline: view()) {
	:root :is(.wp-block-cover, .wp-block-gb-lottiecover).is-style-full-width-behind {
		view-timeline: --kbd-cover-parallax block;
		/* Measure against the full viewport, not the header's scroll-padding. */
		view-timeline-inset: 0;

		> .wp-block-cover__image-background,
		> .wp-block-cover__video-background,
		> .kbd-video-fit,
		> .kbd-cover-video-poster,
		> .lottie-element {
			animation: kbd-cover-parallax linear both;
			animation-timeline: --kbd-cover-parallax;
			will-change: translate;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	:root :is(.wp-block-cover, .wp-block-gb-lottiecover).is-style-full-width-behind {
		> .wp-block-cover__image-background,
		> .wp-block-cover__video-background,
		> .kbd-video-fit,
		> .kbd-cover-video-poster,
		> .lottie-element {
			animation: none;
		}
	}
}

/*
 * Any other block above a parallax cover (a card, an image, a Lottie Cover)
 * cannot carry the section's rounded edge, so the cover draws it: a strip of
 * the section color with the same radius and shadow a group would give it.
 */
:is(.wp-block-cover, .wp-block-gb-lottiecover):is(.is-style-full-width-behind, .is-style-full-width-static):not(:first-child):not(:is(.wp-block-group, .wp-block-columns) + *)::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: 60px;
	background-color: var(--wp--preset--color--base);
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	box-shadow: 0px 72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	pointer-events: none;

	@media screen and (max-width: 768px) {
		height: 30px;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
	}
}

/* A section between two parallax covers casts both shadows. One box-shadow would replace the other. */
:is(.is-style-full-width-behind, .is-style-full-width-static) + :is(.wp-block-group, .wp-block-columns):has(+ :is(.is-style-full-width-behind, .is-style-full-width-static)) {
	box-shadow:
		0px 72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent),
		0px -72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;
}

:is(.is-style-full-width-behind, .is-style-full-width-static) + :is(.wp-block-group, .wp-block-columns) {
	border-top-left-radius: 60px !important;
	border-top-right-radius: 60px !important;
	z-index: 6 !important;
	position: relative !important;		
	box-shadow: 0px -72px 36px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;
	margin-top: -60px !important;

	@media screen and (max-width: 768px) {
		border-top-left-radius: 30px !important;
		border-top-right-radius: 30px !important;
		margin-top: -30px !important;
	}


	&:not(.has-background) {
		background-color: var(--wp--preset--color--base) !important;
	}
}

.has-global-padding :is(.wp-block-group, .wp-block-columns):has( + :is(.is-style-full-width-behind, .is-style-full-width-static)){

	margin-right: calc(var(--wp--style--root--padding-right) + var(--wp--preset--spacing--30) * -1) !important;
	margin-left: calc(var(--wp--style--root--padding-left) + var(--wp--preset--spacing--30) * -1) !important;
	width: calc(100% + var(--wp--preset--spacing--30) * 2) !important;
	max-width: none !important;
}
.has-global-padding :is(.is-style-full-width-behind, .is-style-full-width-static) {
	margin-left: calc(var(--wp--style--root--padding-left) + var(--wp--preset--spacing--30) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) + var(--wp--preset--spacing--30) * -1) !important;
	width: calc(100% + var(--wp--preset--spacing--30) * 2) !important;
	max-width: none !important;
}
.has-global-padding :is(.is-style-full-width-behind, .is-style-full-width-static) + :is(.wp-block-group, .wp-block-columns) {

	margin-right: calc(var(--wp--style--root--padding-right) + var(--wp--preset--spacing--30) * -1) !important;
	margin-left: calc(var(--wp--style--root--padding-left) + var(--wp--preset--spacing--30) * -1) !important;
	width: calc(100% + var(--wp--preset--spacing--30) * 2) !important;
	max-width: none !important;
}

/*
 * Columns (e.g. a gallery row) next to a parallax cover takes the same edge as
 * a group. It has no padding of its own, so pad it back to the width it had
 * before growing to the section edge: the content size (or wide size) on wide
 * screens, the section padding below that. Percentages are of the section's
 * content width, which is what the columns sat in.
 */
.has-global-padding .wp-block-columns:has( + :is(.is-style-full-width-behind, .is-style-full-width-static)),
.has-global-padding :is(.is-style-full-width-behind, .is-style-full-width-static) + .wp-block-columns {
	--kbd-columns-size: var(--wp--style--global--content-size);
	padding-inline: max(
		var(--wp--preset--spacing--30),
		calc((100% - var(--kbd-columns-size)) / 2 + var(--wp--preset--spacing--30))
	) !important;

	&.alignwide {
		--kbd-columns-size: var(--wp--style--global--wide-size);
	}

	&.alignfull {
		--kbd-columns-size: 100%;
	}
}

.wp-block-columns:has( + :is(.is-style-full-width-behind, .is-style-full-width-static)) {
	padding-bottom: var(--wp--preset--spacing--60) !important;
	margin-bottom: 0 !important;
}

:is(.is-style-full-width-behind, .is-style-full-width-static) + .wp-block-columns {
	padding-top: var(--wp--preset--spacing--60) !important;
}


@media screen and (max-width: 768px) {
	.wp-block-group {
		max-width: 100vw;

		&[style*="border-bottom-right-radius:60px"] {
			border-bottom-right-radius: 30px !important;
		}
		&[style*="border-bottom-left-radius:60px"] {
			border-bottom-left-radius: 30px !important;
		}
		&[style*="border-top-right-radius:60px"] {
			border-top-right-radius: 30px !important;
		}
		&[style*="border-top-left-radius:60px"] {
			border-top-left-radius: 30px !important;
		}
		&[style*="border-radius:60px"],&[style*="border-radius: 60px"] {
			border-radius: 30px !important;
		}
	}

	.wp-block-group.is-nowrap:not(.is-vertical):has(> p.is-style-green-dot){
		flex-direction: column !important;
	}
}

.is-style-slide-on-scroll {

	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}

	& > * {
		width: 100%;
		flex-shrink: 0;
		box-sizing: border-box;
	}

}

body:not(.editor-styles-wrapper):not(.block-editor-page) .is-style-slide-on-scroll.slide-on-scroll--active {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: clip;
	scroll-behavior: auto;
	scroll-padding-inline: var(--wp--preset--spacing--30);
}

.slide-on-scroll-wrapper-content {
	position: sticky;
	top: calc(var(--header-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
	overflow-x: clip;
}

.slide-on-scroll-wrapper {
	overflow: clip;
	box-sizing: border-box;
}

.is-style-slide-on-scroll:not(.block-editor-block-list__block) {
	/* &:before {
		content: "";
		min-width: 100vw;
		display: block;
		height: 100%;
	} */
}

.is-style-service-slide:not(.block-editor-block-list__block):not(.slide-on-scroll-panel) {
	overflow: clip;

	& h2 {
		opacity: 0;
		transform: translateX(100%);
		transition: all 0.5s ease-out;
	}

	& .wp-block-column:first-child {
		opacity: 0;
		transform: translateX(100%);
		transition: all 0.5s ease-out 0.2s;
	}

	& .wp-block-column:last-child {
		opacity: 0;
		transform: translateY(50%);
		transition: all 0.5s ease-out 0.5s;
	}

	&.is-visible {
		& h2 {
			opacity: 1;
			transform: translateX(0);
		}
		& .wp-block-column:first-child {
			opacity: 1;
			transform: translateX(0);
		}
		& .wp-block-column:last-child {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* Slide-on-scroll panels: GSAP scrubs the whole panel (no legacy child transforms) */
.is-style-slide-on-scroll.slide-on-scroll--active .slide-on-scroll-panel {
	overflow: clip;
	will-change: transform;
	isolation: isolate;

	& h2,
	& .wp-block-column,
	& > .wp-block-group,
	& > .wp-block-columns,
	& > * {
		transition: none;
	}

	& h2,
	& .wp-block-column {
		opacity: 1;
	}

	/* Staggered child entrances (right → left) */
	& h2,
	& .wp-block-column,
	& > .wp-block-group,
	& > .wp-block-columns,
	& > *:not(.slide-on-scroll-panel) {
		will-change: transform;
	}
}
/*
 * Case study copy (Copy Intro / Copy Body patterns): one blank line between
 * blocks, subheads sit tight on their text. Type sizes are template-wide in
 * heading.css and paragraph.css.
 */
.wp-block-group.kbd-case-study-copy {
	/* Text column starts at the left edge of the sitewide content box */
	& > * {
		max-width: calc(1036px * var(--kbd-scale, 1));
		margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
		margin-inline-end: auto !important;
	}

	/* Figma: the h2 runs past the text column, up to the full content width */
	& > h2 {
		max-width: var(--wp--style--global--content-size);
	}

	& > * + * {
		margin-block-start: 1lh;
	}

	& > h2 + * {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	& > h3 + * {
		margin-block-start: 0;
	}
}

/* Inside another group (e.g. between galleries in Body) the parent already pads the sides */
:where(.wp-block-group) .wp-block-group.kbd-case-study-copy {
	padding-inline: 0;
}

/*
 * Callout block style (posts: "Why it matters for design"). Figma at 1440:
 * green hairline card, headings 30px on 34px (weight 300), everything else
 * 24px on 34px.
 */
.wp-block-group.is-style-callout {
	box-sizing: border-box;
	padding: calc(31.11px * var(--kbd-scale, 1)) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--color--tag);
	border-radius: calc(33.33px * var(--kbd-scale, 1));

	& > * {
		margin-block: 0;
		letter-spacing: 0;
	}

	& > * + * {
		margin-block-start: 1lh;
	}

	/*
	 * .wp-block-heading outranks the post subhead rule in heading.css. Figma
	 * says 450, but our 450 file renders heavier than the Figma trial font.
	 */
	& > .wp-block-heading {
		font-size: var(--wp--custom--font-size--article-intro);
		font-weight: var(--wp--custom--font-weight--light);
		line-height: calc(34 / 30);
	}

	& > :not(.wp-block-heading) {
		font-size: var(--wp--custom--font-size--article-callout);
		font-weight: var(--wp--custom--font-weight--light);
		line-height: calc(34 / 24);
	}
}

/* Beats the white fill on unstyled top-level content groups; a background picked in the editor still wins */
body .wp-block-group.is-style-callout:not(.has-background) {
	background-color: var(--wp--preset--color--base-4);
}

/*
 * Newsprint editor: the post editor and the Resources listing page (spotted by
 * its "Sort by" row) get the same grey canvas as the page (body.kbd-newsprint
 * in style.css), with the same white callouts and no white hero band.
 */
.editor-styles-wrapper:is(.post-type-post, :has(.kbd-resources__filter)) {
	background-color: var(--wp--preset--color--base-4, #F7F8F7);
}

/*
 * In the editor the header bar sits in the flow instead of floating over the
 * page, so the post page doesn't need the frontend's header offset on top.
 */
:root body.editor-styles-wrapper .wp-block-group.is-style-post-page {
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-block-start: var(--wp--preset--spacing--30) !important;
}

.editor-styles-wrapper:has(.kbd-resources__filter) .wp-block-group.is-style-page-hero.has-base-background-color {
	background-color: transparent !important;
}

/* On the grey newsprint page (and its editor) the callout flips to white (Figma) */
body.kbd-newsprint .wp-block-group.is-style-callout:not(.has-background),
.editor-styles-wrapper:is(.post-type-post, :has(.kbd-resources__filter)) .wp-block-group.is-style-callout:not(.has-background) {
	background-color: var(--wp--preset--color--base);
}

/*
 * Single-post editor: the "Listing Card (editor only)" preview (templates/
 * single.html) — the post's real featured image, title and excerpt laid out
 * like a Resources listing card, editable in place. Never rendered on the
 * frontend (kbd_hide_listing_fields), so this styling is editor-only.
 */
.editor-styles-wrapper .wp-block-group.kbd-listing-fields {
	width: min(100%, calc(651px * var(--kbd-scale, 1)));
	margin-block-end: var(--wp--preset--spacing--40);
	padding: 0;
	background: none;

	&::before {
		content: "Listing card";
		display: block;
		margin-block-end: 8px;
		color: var(--wp--preset--color--contrast-2, #717d81);
		font-size: 13px;
		letter-spacing: 0;
		line-height: 1.4;
	}

	& > * {
		margin-block: 0;
	}

	& .kbd-listing-fields__image {
		aspect-ratio: 597 / 305;
		overflow: hidden;
		border-radius: calc(22.22px * var(--kbd-scale, 1));
		background: var(--wp--preset--color--base, #fff);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.components-placeholder {
			height: 100%;
			min-height: 0;
		}
	}

	& .kbd-listing-fields__title {
		margin-block-start: calc(14.44px * var(--kbd-scale, 1));
		font-size: calc(clamp(20px, 1.929vw, 27.78px) * var(--kbd-scale, 1));
		font-weight: var(--wp--custom--font-weight--medium);
		letter-spacing: 0;
		line-height: calc(28 / 25);
	}

	/* Cards never use the "read more" link text */
	& .kbd-listing-fields__excerpt .wp-block-post-excerpt__more-text,
	& .kbd-listing-fields__excerpt .wp-block-post-excerpt__more-link {
		display: none;
	}

	& .kbd-listing-fields__excerpt {
		margin-block-start: calc(3.33px * var(--kbd-scale, 1));
	}

	& .kbd-listing-fields__excerpt,
	& .kbd-listing-fields__excerpt p {
		font-size: var(--wp--custom--font-size--article-body);
		font-weight: var(--wp--custom--font-weight--light);
		letter-spacing: 0;
		line-height: calc(27 / 22);
	}
}