/* Start custom CSS *//* GRO About page. The gro-… class names are V4 global classes (Class Manager). */

/* Hero: the same soft glow as the home page. */
.gro-hero {
	background-image: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--e-global-color-secondary, #EE0000) 22%, transparent) 0%, transparent 70%);
}

/* Even line lengths in titles, so a word is never left alone on the last line. */
.elementor-47451 :is(h1, h2) {
	text-wrap: balance;
}

/* Hero stats rise in one after another. This is CSS rather than an Interaction so nothing above the fold flashes before the script runs. */
@keyframes gro-rise {
	from { opacity: 0; translate: 0 12px; }
}
.elementor-47451 .gro-hero .gro-stat {
	animation: gro-rise 0.6s ease-out 0.15s backwards;
}
.elementor-47451 .gro-hero .gro-stat:nth-child(2) { animation-delay: 0.23s; }
.elementor-47451 .gro-hero .gro-stat:nth-child(3) { animation-delay: 0.31s; }
.elementor-47451 .gro-hero .gro-stat:nth-child(4) { animation-delay: 0.39s; }

/* Vision and mission icons: Lucide line icons (ISC licence), drawn in the current colour.
   Elementor uses every container's ::before for its background overlay, so the icons use ::after. */
.gro-feature-icon::after {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--gro-icon) center / contain no-repeat;
	mask: var(--gro-icon) center / contain no-repeat;
}
.gro-ico-eye { --gro-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.gro-ico-flag { --gro-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E"); }

/* Ticks in the bio lists. */
.gro-check-item::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var(--e-global-color-primary, #0004A1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Read full bio": no default marker, a chevron that turns, and "Show less" while open. */
.gro-bio summary {
	list-style: none;
}
.gro-bio summary::-webkit-details-marker {
	display: none;
}
.elementor details > .gro-bio-toggle > * {
	width: auto;
}
.gro-bio-toggle::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: -3px 0 0 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease-out;
}
details[open] > .gro-bio-toggle::after {
	margin-top: 3px;
	transform: rotate(225deg);
}
/* The label swaps on the text itself: Elementor keeps every container's ::before for its background overlay. */
details[open] > .gro-bio-toggle .e-paragraph-base {
	font-size: 0;
}
details[open] > .gro-bio-toggle .e-paragraph-base::after {
	content: "Show less";
	content: "Show less" / "";
	font-size: 15px;
}
.gro-bio-toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gro-bio summary:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #0004A1);
	outline-offset: 2px;
	border-radius: 4px;
}
@keyframes gro-open {
	from { opacity: 0; translate: 0 -4px; }
}
details[open] > .gro-bio-body {
	animation: gro-open 0.3s ease-out;
}

/* The founder photo stays in view beside the long story wherever they sit side by side. */
@media (min-width: 768px) {
	.elementor-47451 [data-id="1d5fe49e"] {
		position: sticky;
		top: 32px;
	}
}

/* Motion. The scroll-in animations are Elementor Interactions on the elements; this adds the rest.
   Sections clip sideways so images sliding in from the side can't make phones scroll horizontally. */
.elementor-47451 .gro-section {
	overflow-x: clip;
}

/* Cards lift a little on hover. This uses `translate`, not `transform`,
   because the scroll animations leave an inline transform on these elements. */
.elementor.elementor-47451 .gro-card {
	transition: translate 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}
@media (hover: hover) {
	.elementor.elementor-47451 .gro-card:hover {
		translate: 0 -4px;
		border-color: color-mix(in srgb, var(--e-global-color-primary, #0004A1) 28%, #E4E4E4);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 4, 161, 0.08);
	}
}

/* Reduced motion: show everything straight away. The animation script doesn't check this setting itself. */
@media (prefers-reduced-motion: reduce) {
	.elementor-47451 [data-interaction-id][style*="opacity"],
	.elementor-47451 [data-interaction-id][style*="transform"] {
		opacity: 1 !important;
		transform: none !important;
	}
	.elementor-47451 .gro-hero .gro-stat,
	details[open] > .gro-bio-body {
		animation: none;
	}
	.elementor.elementor-47451 .gro-card {
		transition: none;
		translate: none !important;
	}
}/* End custom CSS */