/* Start custom CSS *//* GRO FAQ 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-47558 :is(h1, h2) {
	text-wrap: balance;
}

/* FAQ: a chevron that turns when the answer is open. */
.gro-faq summary {
	list-style: none;
}
.gro-faq summary::-webkit-details-marker {
	display: none;
}
.gro-faq-q::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin: -4px 6px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
}
details[open] > .gro-faq-q {
	color: var(--e-global-color-primary, #0004A1);
}
details[open] > .gro-faq-q::after {
	margin-top: 4px;
	transform: rotate(225deg);
}
.gro-faq summary:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #0004A1);
	outline-offset: 2px;
}

/* Links inside answers. */
.gro-faq-a a {
	color: var(--e-global-color-primary, #0004A1);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The jump links land just above each section's title. */
.elementor-47558 section[id] {
	scroll-margin-top: 8px;
}

/* Motion. The scroll-in animations are Elementor Interactions on the elements. */
.elementor-47558 .gro-section {
	overflow-x: clip;
}

/* Reduced motion: show everything straight away. The animation script doesn't check this setting itself. */
@media (prefers-reduced-motion: reduce) {
	.elementor-47558 [data-interaction-id][style*="opacity"],
	.elementor-47558 [data-interaction-id][style*="transform"] {
		opacity: 1 !important;
		transform: none !important;
	}
}/* End custom CSS */