/*  Homepage hero diagram - [cogent_hero_diagram]
	Stage is 900x275 (banner px); foreground image sits at 37.25,27.2 within it, 829x220.
================================================== */

.cogent-hero-diagram-section {
	background-size: cover !important;
}

.cogent-hero-diagram-h1 {
	color: white !important;
	font-weight: 400;
	font-family: 'opensans-regular',Helvetica,Arial,sans-serif  !important;
	text-transform: none  !important;
	text-align: center  !important;
}

.cogent-hero-diagram-h1 strong{
	font-family: 'opensans-semibold',Helvetica,Arial,sans-serif  !important;
	font-weight: 600  !important;
}

.cogent-hero-diagram {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	aspect-ratio: 900 / 275;
}

.cogent-hero-diagram .chd-foreground {
	position: absolute;
	left: 4.139%;
	top: 9.891%;
	width: 92.111%;
	max-width: none;
	height: auto;
	pointer-events: none;
}

.cogent-hero-diagram .chd-icon {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border: 0;
}

/* Icon nudges - translate % is of the icon's own size, so it scales with the diagram */
.cogent-hero-diagram .chd-icon:nth-of-type(1) { translate: -5% 14%; }  /* wind turbine: right, up */


/* icons are inline SVGs (see cogent_hero_diagram_icon_svg)
   absolute so the svg can't stretch the link: iOS Safari fell back to a 150px
   height for height:100% inside an aspect-ratio box, pushing icons down */
.cogent-hero-diagram .chd-icon svg {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .25s ease, filter .25s ease;
}

.cogent-hero-diagram .chd-icon:hover svg,
.cogent-hero-diagram .chd-icon:focus-visible svg {
	transform: scale(1.12);
	filter: brightness(1.25) drop-shadow(0 0 6px rgba(149, 184, 223, .55));
}

.cogent-hero-diagram .chd-icon:focus-visible {
	outline: 2px solid #95b8df;
	outline-offset: 4px;
	border-radius: 4px;
}

/*  Tooltip - text comes from the link's aria-label
	Sits on the outer side of each icon so it doesn't cover the diagram
================================================== */
.cogent-hero-diagram .chd-icon::after {
	content: attr(aria-label);
	position: absolute;
	top: 50%;
	z-index: 10;
	padding: 5px 10px;
	border: 1px solid rgba(149, 184, 223, .5);
	border-radius: 4px;
	background: rgba(4, 18, 42, .92);
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.cogent-hero-diagram .chd-icon--left::after {
	right: calc(100% + 10px);
	transform: translate(4px, -50%);
}

.cogent-hero-diagram .chd-icon--right::after {
	left: calc(100% + 10px);
	transform: translate(-4px, -50%);
}

.cogent-hero-diagram .chd-icon:hover::after,
.cogent-hero-diagram .chd-icon:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

/* narrow screens: no room beside the outer icons, so show tooltips above */
@media only screen and (max-width: 767px) {
	.cogent-hero-diagram .chd-icon::after,
	.cogent-hero-diagram .chd-icon--left::after,
	.cogent-hero-diagram .chd-icon--right::after {
		top: auto;
		right: auto;
		bottom: calc(100% + 8px);
		left: 50%;
		font-size: 12px;
		transform: translate(-50%, 4px);
	}
	.cogent-hero-diagram .chd-icon--left::after {
		left: 0;
		transform: translate(0, 4px);
	}
	.cogent-hero-diagram .chd-icon--right::after {
		left: auto;
		right: 0;
		transform: translate(0, 4px);
	}
	.cogent-hero-diagram .chd-icon:hover::after,
	.cogent-hero-diagram .chd-icon:focus-visible::after {
		transform: translate(0, 0);
	}
}

/*  v2 - data flow light [cogent_hero_diagram_v2]
	Light traces the figure-eight once per cycle, one step at a time:
	  0 left gear, 1 top-left arrow, 2 middle gear, 3 bottom-right arrow,
	  4 right gear, 5 top-right arrow, 6 middle gear, 7 bottom-left arrow
	then rests until the next cycle. Gear sweeps take 10% of the cycle and
	arrow streaks 9%: 12s cycle = ~1.2s / ~1.1s each, ~6.7s rest at the end.
================================================== */
.cogent-hero-diagram--sheen {
	--chd-sheen-cycle: 12s;     /* full sequence + rest */
	--chd-sheen-start: 1s;      /* delay before the first sweep after page load */
	--chd-flow-step: .6s;       /* offset between each step in the sequence */
	--chd-sheen-strength: .85;  /* overall brightness, 0-1 */
}

/*  Gear sheen
	A light streak sweeps once around each gear, clipped to a soft halo of
	the gear outline (img/gear-sheen-mask.svg). The mask stays put on
	.chd-sheen; only the pseudo-elements rotate. The middle gear sweeps
	twice per cycle (steps 2 and 6), the second time on ::after.
	Hidden unless the browser supports CSS masks - unmasked, the sweep would
	show as a rotating square of light over each gear.
================================================== */

.cogent-hero-diagram .chd-sheen {
	display: none;
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--chd-sheen-strength);
	mix-blend-mode: screen;
	-webkit-mask: url('img/gear-sheen-mask.svg') center / 100% 100% no-repeat;
	mask: url('img/gear-sheen-mask.svg') center / 100% 100% no-repeat;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
	.cogent-hero-diagram .chd-sheen {
		display: block;
	}
}

.cogent-hero-diagram .chd-sheen::before,
.cogent-hero-diagram .chd-sheen--middle::after {
	content: '';
	position: absolute;
	inset: -25%;
	background: conic-gradient(
		from 0deg,
		rgba(149, 184, 223, 0) 0deg,
		rgba(149, 184, 223, 0) 250deg,
		rgba(190, 215, 245, .7) 330deg,
		#fff 354deg,
		rgba(255, 255, 255, 0) 360deg
	);
	opacity: 0;
	animation: chd-sheen-sweep var(--chd-sheen-cycle) linear infinite;
	animation-delay: var(--chd-sheen-start);
}

.cogent-hero-diagram .chd-sheen--middle::before {
	animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 2);
}

.cogent-hero-diagram .chd-sheen--right::before {
	animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 4);
}

.cogent-hero-diagram .chd-sheen--middle::after {
	animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 6);
}

@keyframes chd-sheen-sweep {
	0%   { transform: rotate(0deg);   opacity: 0; }
	2.5% {                            opacity: 1; }
	7.5% {                            opacity: 1; }
	10%  { transform: rotate(360deg); opacity: 0; }
	100% { transform: rotate(360deg); opacity: 0; }
}

/*  Arrow streaks (arrow-flow.svg, inlined)
	Each arrow has a wide soft glow and a narrow bright core travelling along
	its centreline toward the arrowhead. Paths use pathLength="100"; the core
	runs 22 units behind the glow's start so both share a leading edge.
	Softness comes from the blur filters in arrow-flow.svg.
================================================== */
.cogent-hero-diagram .chd-flow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	opacity: var(--chd-sheen-strength);
	mix-blend-mode: screen;
}

.cogent-hero-diagram .chd-flow-arrow path,
.cogent-hero-diagram .chd-flow-cross path {
	fill: none;
	stroke-linecap: round;
	opacity: 0;
	animation: var(--chd-sheen-cycle) linear infinite;
	animation-delay: inherit;
}

.cogent-hero-diagram .chd-flow .chd-flow-glow {
	stroke: rgba(170, 210, 255, .4);
	stroke-width: 14;
	stroke-dasharray: 28 200;
	animation-name: chd-flow-glow;
}

.cogent-hero-diagram .chd-flow .chd-flow-core {
	stroke: rgba(232, 243, 255, .85);
	stroke-width: 4;
	stroke-dasharray: 6 214;
	animation-name: chd-flow-core;
}

.cogent-hero-diagram .chd-flow-arrow--tl { animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 1); }
.cogent-hero-diagram .chd-flow-arrow--br { animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 3); }
.cogent-hero-diagram .chd-flow-arrow--tr { animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 5); }
.cogent-hero-diagram .chd-flow-arrow--bl { animation-delay: calc(var(--chd-sheen-start) + var(--chd-flow-step) * 7); }

@keyframes chd-flow-glow {
	0%   { stroke-dashoffset: 28;   opacity: 0; }
	1.5% {                          opacity: 1; }
	7%   {                          opacity: 1; }
	9%   { stroke-dashoffset: -100; opacity: 0; }
	100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes chd-flow-core {
	0%   { stroke-dashoffset: 6;    opacity: 0; }
	1.5% {                          opacity: 1; }
	7%   {                          opacity: 1; }
	9%   { stroke-dashoffset: -122; opacity: 0; }
	100% { stroke-dashoffset: -122; opacity: 0; }
}

/* each version shows only its own streak groups from the shared arrow-flow.svg */
.cogent-hero-diagram--sheen .chd-flow-cross,
.cogent-hero-diagram--sheen .chd-flow-ring,
.cogent-hero-diagram--cross .chd-flow-arrow,
.cogent-hero-diagram--cross .chd-flow-ring,
.cogent-hero-diagram--ring .chd-flow-arrow,
.cogent-hero-diagram--ring .chd-flow-cross {
	display: none;
}

/*  v3 - crossing arrows [cogent_hero_diagram_v3]
	Two streaks start together at the left and right gears, run along the
	top arrows, cross (hidden) under the middle gear and carry on down the
	bottom arrows to the opposite gear, then rest. No gear sheen.
	Each path is two arrows long, so dashes are half v2's length.
	Reuses v2's variable names, which .chd-flow and the paths read.

	Changing the pause: the keyframes below are percentages of the cycle, so
	set --chd-sheen-cycle AND the three keyframe stops together to keep the
	same ~2.2s trip (changing only the cycle also changes the streak speed):
	  cycle   pause   fade-in end   fade-out start   trip end
	  4s      ~1.8s   6%            48%              54%
	  5s      ~2.8s   5%            38%              43%   <- current
	  6s      ~3.8s   4%            32%              36%
	  8s      ~5.8s   3%            24%              27%
================================================== */
.cogent-hero-diagram--cross {
	--chd-sheen-cycle: 5s;      /* trip + rest - see table above */
	--chd-sheen-start: 1s;      /* delay before the first trip after page load */
	--chd-sheen-strength: .85;  /* overall brightness, 0-1 */
}

.cogent-hero-diagram--cross .chd-flow-cross {
	animation-delay: var(--chd-sheen-start);
}

.cogent-hero-diagram--cross .chd-flow .chd-flow-glow {
	stroke-dasharray: 14 200;
	animation-name: chd-cross-glow;
}

.cogent-hero-diagram--cross .chd-flow .chd-flow-core {
	stroke-dasharray: 3 211;
	animation-name: chd-cross-core;
}

/* stops: 0% start, fade-in end, fade-out start, trip end - keep in step with --chd-sheen-cycle */
@keyframes chd-cross-glow {
	0%   { stroke-dashoffset: 14;   opacity: 0; }
	5%   {                          opacity: 1; }
	38%  {                          opacity: 1; }
	43%  { stroke-dashoffset: -100; opacity: 0; }
	100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes chd-cross-core {
	0%   { stroke-dashoffset: 3;    opacity: 0; }
	5%   {                          opacity: 1; }
	38%  {                          opacity: 1; }
	43%  { stroke-dashoffset: -111; opacity: 0; }
	100% { stroke-dashoffset: -111; opacity: 0; }
}

/*  v4 - continuous crossing arrows [cogent_hero_diagram_v4]
	Same as v3 (the container also has the --cross class) but with no pause:
	the cycle is just the ~2.15s trip, so each streak arrives at the opposite
	gear as the next one leaves it. The restart happens while both streaks are
	faded out under the outer gears, so the loop has no visible jump.
	To change the speed, change --chd-sheen-cycle only (shorter = faster).
================================================== */
.cogent-hero-diagram--loop {
	--chd-sheen-cycle: 2.15s;   /* one trip; same speed as v3 */
}

.cogent-hero-diagram--loop .chd-flow .chd-flow-glow {
	animation-name: chd-loop-glow;
}

.cogent-hero-diagram--loop .chd-flow .chd-flow-core {
	animation-name: chd-loop-core;
}

@keyframes chd-loop-glow {
	0%   { stroke-dashoffset: 14;   opacity: 0; }
	12%  {                          opacity: 1; }
	88%  {                          opacity: 1; }
	100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes chd-loop-core {
	0%   { stroke-dashoffset: 3;    opacity: 0; }
	12%  {                          opacity: 1; }
	88%  {                          opacity: 1; }
	100% { stroke-dashoffset: -111; opacity: 0; }
}

/*  v5 - three streaks around the figure-eight [cogent_hero_diagram_v5]
	One closed lap (the .chd-flow-ring path, pathLength 100) with a repeating
	dash pattern: 3 dashes per lap = one every 33.333 units. Moving the
	pattern by one period loops seamlessly, so there's no fade or restart;
	the streaks simply pass under the gears (masked).
	Same speed as v3/v4: a lap is two of their trips, 2 x 2.15s = 4.3s.
	Dashes are half of v3/v4's because the path is twice as long, so the
	streaks look the same size. Core leads: it sits 5.5 units behind the
	glow's start so both share a front edge.
	v6 (4 streaks) is --ring-4 with a 25-unit period, below.
================================================== */
.cogent-hero-diagram--ring {
	--chd-ring-lap: 4.3s;       /* time for one streak to go all the way round; same speed as v3/v4 */
	--chd-sheen-strength: .85;  /* overall brightness, 0-1 */
}

.cogent-hero-diagram .chd-flow-ring path {
	fill: none;
	stroke-linecap: round;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.cogent-hero-diagram--ring-3 .chd-flow .chd-flow-glow {
	stroke-dasharray: 7 26.3333;
	animation-name: chd-ring3-glow;
	animation-duration: calc(var(--chd-ring-lap) / 3);
}

.cogent-hero-diagram--ring-3 .chd-flow .chd-flow-core {
	stroke-dasharray: 1.5 31.8333;
	animation-name: chd-ring3-core;
	animation-duration: calc(var(--chd-ring-lap) / 3);
}

@keyframes chd-ring3-glow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -33.3333; }
}

@keyframes chd-ring3-core {
	from { stroke-dashoffset: -5.5; }
	to   { stroke-dashoffset: -38.8333; }
}

/*  v6 - four streaks around the figure-eight [cogent_hero_diagram_v6]
	Same as v5 (shares --ring and --chd-ring-lap) with 4 dashes per lap:
	one every 25 units.
================================================== */
.cogent-hero-diagram--ring-4 .chd-flow .chd-flow-glow {
	stroke-dasharray: 7 18;
	animation-name: chd-ring4-glow;
	animation-duration: calc(var(--chd-ring-lap) / 4);
}

.cogent-hero-diagram--ring-4 .chd-flow .chd-flow-core {
	stroke-dasharray: 1.5 23.5;
	animation-name: chd-ring4-core;
	animation-duration: calc(var(--chd-ring-lap) / 4);
}

@keyframes chd-ring4-glow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -25; }
}

@keyframes chd-ring4-core {
	from { stroke-dashoffset: -5.5; }
	to   { stroke-dashoffset: -30.5; }
}

@media (prefers-reduced-motion: reduce) {
	.cogent-hero-diagram .chd-sheen,
	.cogent-hero-diagram .chd-flow {
		display: none;
	}
	.cogent-hero-diagram .chd-icon svg,
	.cogent-hero-diagram .chd-icon::after {
		transition: none;
	}
	.cogent-hero-diagram .chd-icon:hover svg,
	.cogent-hero-diagram .chd-icon:focus-visible svg {
		transform: none;
	}
}