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

/* The hero line rises in under the title. 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-47492 .gro-hero .gro-hero-lead {
	animation: gro-rise 0.6s ease-out 0.15s backwards;
}

/* Form fields. */
.gro-input::placeholder {
	color: #8A8FA3;
	opacity: 1;
}
/* Red only after someone has typed in or left a field, never on a fresh form. */
.elementor .gro-field .gro-input:user-invalid {
	border-color: #D92D20;
}

/* Option boxes: native radio buttons in the brand colour; the chosen box is highlighted. */
.elementor .gro-choice .gro-radio {
	appearance: auto;
	-webkit-appearance: radio;
	background: none;
	border: 0;
	accent-color: var(--e-global-color-primary, #0004A1);
}
.elementor .gro-choice:has(.gro-radio:checked) {
	border-color: var(--e-global-color-primary, #0004A1);
	background-color: color-mix(in srgb, var(--e-global-color-primary, #0004A1) 6%, #FFFFFF);
}
/* Five roles in two columns: the last one spans the row instead of sitting alone. */
.elementor-47492 [data-id="61027925"] > :last-child {
	grid-column: 1 / -1;
}
.elementor .gro-choice:has(.gro-radio:focus-visible) {
	border-color: var(--e-global-color-primary, #0004A1);
	box-shadow: 0 0 0 3px rgba(0, 4, 161, 0.15);
}

/* Motion. The scroll-in animation is an Elementor Interaction on the form card; this adds the rest. */
.elementor-47492 .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-47492 [data-interaction-id][style*="opacity"],
	.elementor-47492 [data-interaction-id][style*="transform"] {
		opacity: 1 !important;
		transform: none !important;
	}
	.elementor-47492 .gro-hero .gro-hero-lead {
		animation: none;
	}
}/* End custom CSS */