/* ===================================
	Our services (About page): intro image with the rings, the service cards and the tab bar.
	Script: blocks/our-services/script.mjs (scroll-linked green fill, tab pill, sticky tab bar).
=================================== */

.section_big_circle {
	position: relative;
}
.section_our_services .section_description {
	margin-bottom: 50px;
}
.section_our_services .container {
	width: 100%;
	padding: 0 49px !important;
}
.section_our_services .services_intro {
	border-radius: 20px;
	margin: 0 45px;
	padding-bottom: 21%;
	position: relative;
	overflow: hidden;
}

/* ===================================
	Service cards
	Only the card being read is green. The green washes in from the top as the card becomes
	current and drains back out as you move on; text colours follow, slightly behind it.
=================================== */
.section_our_services .service_box {
	color: var(--wp--preset--color--black);
	padding: 60px 45px 0;
	display: flex;
	flex-direction: column-reverse;
	margin-top: -246px;
	gap: 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.section_our_services .service_box_inner {
	display: grid;
	grid-template-columns: 34% 22% 22% 22%;
	gap: 0;
	margin-bottom: 50px;
	align-items: start;
	background: var(--wp--preset--color--xtralightgrey);
	border-radius: 20px;
	padding: 45px 70px;
	overflow: hidden;
	position: relative;
}
/* the green wash when the scroll-linked fill is off (no JS): a scale, not a height */
.section_our_services .service_box_inner::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--darkgreen);
	position: absolute;
	left: 0;
	top: 0;
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform 1100ms var(--ease-in-out);
}
.section_our_services .service_box_inner.active::before {
	transform: none;
}
.section_our_services .service_box_inner.active {
	color: var(--wp--preset--color--white);
}
.section_our_services .service_box_inner,
.section_our_services .service_box_inner .service_title,
.section_our_services .service_box_inner .srv_col_title,
.section_our_services .service_box_inner .srv_col_text {
	transition: color 800ms var(--ease-out) 220ms;
}

/* card title (green) */
.section_our_services .service_box_inner .service_title {
	grid-column: 1 / -1;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--darkgreen);
	margin-bottom: 40px;
	position: relative;
}
.section_our_services .service_box_inner.active .service_title {
	color: var(--wp--preset--color--white);
}

/* columns */
.section_our_services .service_box_inner .srv_col {
	text-align: left;
	position: relative;
}
.section_our_services .service_box_inner .srv_col_title {
	color: var(--wp--preset--color--black);
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	padding-bottom: 15px;
}
.section_our_services .service_box_inner.active .srv_col_title {
	color: var(--wp--preset--color--white);
}
.section_our_services .service_box_inner .srv_col_title.service_column1_title {
	text-transform: uppercase;
	font-weight: 700;
}
/* gradient rule under each column title */
.section_our_services .service_box_inner .srv_col_title::after {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	background: var(--wp--preset--gradient--green-neon-gradient);
	margin-top: 10px;
	transition: background-color 800ms var(--ease-out) 220ms;
}
.section_our_services .service_box_inner.active .srv_col_title::after {
	background: var(--wp--preset--color--white);
}
.section_our_services .service_box_inner .srv_col_text {
	line-height: 22px;
	color: var(--wp--preset--color--darkblue);
	padding-right: 35px;
}
.section_our_services .service_box_inner.active .srv_col_text {
	color: var(--wp--preset--color--white);
}
.section_our_services .service_box_inner .srv_col_text.service_column4_text {
	padding-right: 0;
}
.section_our_services .service_box_inner .srv_col_text.service_column1_text {
	max-width: 350px;
	line-height: 123.81%;
	letter-spacing: -0.42px;
}

/* Scroll-linked green (script.mjs): --fill (0..1, spring-smoothed) is how much of the card is
	green, filling from the top as it arrives and draining as the next one arrives. The green is a
	copy of the card (.svc-overlay: green, white text) clipped to the filled part, so text is the
	right colour on both sides of the edge; the card itself never changes. */
.section_our_services.is-scrubbed .service_box_inner::before {
	content: none;
}
.section_our_services.is-scrubbed .service_box_inner .svc-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--darkgreen);
	clip-path: inset(0 0 calc((1 - var(--fill, 0)) * 100%) 0);
	pointer-events: none;
	transition: none;
}
.section_our_services.is-scrubbed .service_box_inner .svc-overlay * {
	transition: none;
}

/* ===================================
	Tabs
	One green pill (.tab-indicator) slides between the tabs to follow the current card; its
	position and size follow springs (script.mjs), only its fade is CSS. Hover is a light tint.
=================================== */
.services_tab_holder {
	min-height: 96px;
	padding-bottom: 40px;
}
.services_tab {
	transition: transform 0.4s var(--ease-out);
}
.services_tab_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}
.services_tab_inner a {
	display: inline-flex;
	padding: 7px 19px 8px 18px;
	justify-content: center;
	align-items: center;
	gap: 3px;
	border-radius: 85px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black) !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.48px;
	text-decoration: none;
	position: relative;
	z-index: 1;
	transition:
		background-color var(--dur-short) var(--ease-out),
		color var(--dur-short) var(--ease-out);
}
/* the sliding pill provides the green; the tab itself stays clear when active */
.services_tab_inner a.active {
	background: transparent;
	color: var(--wp--preset--color--white) !important;
}
@media (hover: hover) and (pointer: fine) {
	.services_tab_inner a:hover:not(.active) {
		background: #e6f6ea;
		color: var(--wp--preset--color--black) !important;
	}
}
.services_tab_inner .tab-indicator {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	border-radius: 85px;
	background: var(--wp--preset--color--darkgreen);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-short) var(--ease-out);
}
.services_tab_inner .tab-indicator.is-visible {
	opacity: 1;
}

/* ===================================
	Responsive
=================================== */
@media (max-width: 1500px) {
	.section_our_services .service_box_inner {
		grid-template-columns: 31% 23% 23% 23%;
		padding: 45px;
	}
}
@media (max-width: 1200px) {
	.section_our_services .service_box_inner {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30px 0;
	}
	.section_our_services .service_box_inner .service_title {
		margin-bottom: 0;
	}
	.section_our_services .service_box_inner .srv_col.column1 {
		grid-column: 1 / -1;
	}
	.section_our_services .service_box_inner .srv_col_text.service_column1_text {
		max-width: 100%;
		padding-right: 0;
	}
}
@media (max-width: 1024px) {
	.section_our_services .services_intro {
		padding-bottom: 30%;
	}
	.section_our_services .service_box_inner {
		grid-template-columns: 1fr 1fr;
		padding: 30px;
	}
	.section_our_services .service_box_inner .srv_col.column1 {
		grid-column: 1;
	}
	.section_our_services .service_box_inner .srv_col_text.service_column1_text {
		max-width: 350px;
		padding-right: 35px;
	}
}
@media (max-width: 768px) {
	.section_our_services .services_intro {
		padding-bottom: 220px;
	}
	.section_our_services .container {
		padding: 0 30px !important;
	}
}
@media (max-width: 700px) {
	.section_our_services .service_box_inner {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.section_our_services .services_intro {
		margin: 0 20px;
	}
	.section_our_services .service_box {
		padding: 60px 20px 0;
	}
	.section_our_services .container {
		padding: 0 20px !important;
	}
}
@media (max-width: 480px) {
	.services_tab_inner {
		gap: 6px;
	}
	.services_tab_inner a {
		padding: 6px 13px 7px;
		font-size: 14px;
	}
}
/* the background image is 1920px wide: past that, cover so it doesn't end in a seam */
@media (min-width: 1921px) {
	.section_our_services .services_intro {
		background-size: cover;
		background-position: center top;
	}
}

/* ===================================
	Rings on the intro image
	Hidden until revealed (reveal.js adds .o-anim-ready), then each ring slides in from 80px to
	the right of its place, one after the other, spaced --space apart.
=================================== */
.circle_animation {
	--space: 60px;
	display: block;
	max-height: 700px;
	min-height: 230px;
	height: 37vw;
	aspect-ratio: 1;
	position: absolute;
	right: max(-22%, -400px); /* -22% alone pushes the rings off the edge on very wide screens */
	top: -20px;
}
.circle_animation .circle_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	aspect-ratio: 1;
	border-radius: 100%;
	position: relative;
	z-index: 1;
}
.circle_animation span.crl,
.circle_animation span.crl_lines {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 100%;
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.circle_animation span.crl {
	opacity: 0;
	transform: translateX(80px);
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl,
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl_lines {
	animation-name: slideToPosition;
	animation-duration: 0.3s;
	animation-fill-mode: both;
	animation-timing-function: var(--ease-out);
	animation-play-state: running;
	animation-delay: 0s;
	opacity: 1;
	--final-x: calc(var(--space) * -1);
}
/* each ring's final position and delay */
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(1) {
	--final-x: calc(var(--space) * -1);
	animation-delay: 0.03s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(2) {
	--final-x: calc(var(--space) * -2);
	animation-delay: 0.06s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(3) {
	--final-x: calc(var(--space) * -3);
	animation-delay: 0.09s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(4) {
	--final-x: calc(var(--space) * -4);
	animation-delay: 0.12s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(5) {
	--final-x: calc(var(--space) * -5);
	animation-delay: 0.15s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(6) {
	--final-x: calc(var(--space) * -6);
	animation-delay: 0.18s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(7) {
	--final-x: calc(var(--space) * -7);
	animation-delay: 0.21s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(8) {
	--final-x: calc(var(--space) * -8);
	animation-delay: 0.24s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(9) {
	--final-x: calc(var(--space) * -9);
	animation-delay: 0.27s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(10) {
	--final-x: calc(var(--space) * -10);
	animation-delay: 0.3s;
}
.circle_animation.o-anim-ready:not(.hidden-animated) span.crl:nth-child(11) {
	--final-x: calc(var(--space) * -11);
	animation-delay: 0.33s;
}

@keyframes slideToPosition {
	0% {
		opacity: 0;
		transform: translate(calc(var(--final-x) + 80px)); /* starts 80px right of its place */
		filter: blur(4px);
	}
	100% {
		opacity: 1;
		transform: translate(var(--final-x));
		filter: blur(0px);
	}
}

@media only screen and (max-width: 1820px) {
	.circle_animation {
		--space: 8.5%;
	}
}
@media (max-width: 1400px) {
	.circle_animation {
		height: 44vw;
		right: -38%;
	}
}

/* ===================================
	Sticky tab bar (desktop)
	The tabs stay at the top of the screen while you read the cards, so the green pill visibly
	follows the current card. Once stuck (.is-stuck, script.mjs) the row sits on a frosted white
	bar so the tabs read over the green cards. Desktop only: smaller screens wrap the tabs onto
	several rows. overflow: hidden on .service_box would make it a scroll container and disable
	sticky; clip crops the same way without that.
=================================== */
@media (min-width: 1025px) {
	.section_our_services .service_box {
		overflow: clip;
	}
	.section_our_services .services_tab_holder {
		position: sticky;
		top: 20px;
		z-index: 3;
	}
	.section_our_services .services_tab_inner {
		width: fit-content;
		margin: -5px;
		padding: 5px;
		border-radius: 999px;
		transition:
			background-color var(--dur-short) var(--ease-out),
			box-shadow var(--dur-short) var(--ease-out);
	}
	.section_our_services .services_tab_holder.is-stuck .services_tab_inner {
		background-color: rgba(255, 255, 255, 0.78);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
		box-shadow: 0 8px 28px rgba(25, 39, 43, 0.12);
	}
}