@import url(fontawesome-all.min.css);

/*
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}`	

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #023e8a;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body, input, select, textarea {
		color: rgba(255, 255, 255, 0.55);
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16.5pt;
		font-weight: normal;
		line-height: 1.75;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 13pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 360px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
		color: inherit;
		text-decoration: none;
	}

		a.slogo-link {
			border-bottom: none !important;
		}

		a:hover {
			border-bottom-color: transparent;
			color: #ffffff;
		}

	strong, b {
		color: #ffffff;
		font-weight: bold;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 0.5em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 0.5em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2.75em;
	}

		h1.major {
			margin: 0 0 0.6em 0;
			position: relative;
			padding-bottom: 0.1em;
		}

			h1.major:after {
				background-image: -moz-linear-gradient(to right, #0162eb, #00c0fa);
				background-image: -webkit-linear-gradient(to right, #0162eb, #00c0fa);
				background-image: -ms-linear-gradient(to right, #0162eb, #00c0fa);
				background-image: linear-gradient(to right, #0162eb, #00c0fa);
				-moz-transition: max-width 0.2s ease;
				-webkit-transition: max-width 0.2s ease;
				-ms-transition: max-width 0.2s ease;
				transition: max-width 0.2s ease;
				border-radius: 0.2em;
				bottom: 0;
				content: '';
				height: 0.05em;
				position: absolute;
				right: 0;
				width: 100%;
			}

	h2 {
		font-size: 2.5em;
	}

	h3 {
		font-size: 1.1em;
	}

	h4 {
		font-size: 1em;
	}

	h5 {
		font-size: 0.8em;
	}

	h6 {
		font-size: 0.6em;
	}

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 2em;
		}

		h2 {
			font-size: 2rem;
		}

		h3 {
			font-size: 1em;
		}

		h4 {
			font-size: 0.8em;
		}

		h5 {
			font-size: 0.6em;
		}

		h6 {
			font-size: 0.6em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px rgba(255, 255, 255, 0.15);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(255, 255, 255, 0.05);
		border-radius: 0.25em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.15);
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.375em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.375em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.375em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.375em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -0.75em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 0.75em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.75em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.75em;
				}

		.row {
			margin-top: 0;
			margin-left: -1.5em;
		}

			.row > * {
				padding: 0 0 0 1.5em;
			}

			.row.gtr-uniform {
				margin-top: -1.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 1.5em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -2.25em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 2.25em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -2.25em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 2.25em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -3em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 3em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -3em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 3em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

/* Box */

	.box {
		border-radius: 0.25em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button,
.wq-btn {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: border-color 0.2s ease;
	-webkit-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
	background-color: transparent;
	border: solid 1px !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	border-radius: 3em;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-block;
	font-size: 0.6em;
	font-weight: bold;
	height: calc(4.75em + 2px);
	letter-spacing: 0.25em;
	line-height: 4.75em;
	outline: 0;
	padding: 0 3.75em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

	input[type="submit"]:after,
	input[type="reset"]:after,
	input[type="button"]:after,
	button:after,
	.button:after,
	.wq-btn:after{
		-moz-transform: scale(0.25);
		-webkit-transform: scale(0.25);
		-ms-transform: scale(0.25);
		transform: scale(0.25);
		pointer-events: none;
		-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
		-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
		-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
		transition: opacity 0.2s ease, transform 0.2s ease;
		background: #ffffff;
		border-radius: 3em;
		content: '';
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	input[type="submit"].icon:before,
	input[type="reset"].icon:before,
	input[type="button"].icon:before,
	button.icon:before,
	.button.icon:before,
	.wq-btn.icon:before {
		margin-right: 0.75em;
	}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.4em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 0.8em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #ffffff;
			color: #023e8a !important;
		}

			input[type="submit"].primary:after,
			input[type="reset"].primary:after,
			input[type="button"].primary:after,
			button.primary:after,
			.button.primary:after {
				display: none;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			cursor: default;
			opacity: 0.5;
			pointer-events: none;
		}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			border-color: rgba(255, 255, 255, 0.55) !important;
		}

			input[type="submit"]:hover:after,
			input[type="reset"]:hover:after,
			input[type="button"]:hover:after,
			button:hover:after,
			.button:hover:after {
				opacity: 0.05;
				-moz-transform: scale(1);
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}

			input[type="submit"]:hover:active,
			input[type="reset"]:hover:active,
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				border-color: #ffffff !important;
			}

				input[type="submit"]:hover:active:after,
				input[type="reset"]:hover:active:after,
				input[type="button"]:hover:active:after,
				button:hover:active:after,
				.button:hover:active:after {
					opacity: 0.1;
				}



	/* Clone of theme button for non-anchor controls */
	.btn-relay {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease;
		-webkit-transition: border-color 0.2s ease;
		-ms-transition: border-color 0.2s ease;
		transition: border-color 0.2s ease;
		background-color: transparent;
		border: solid 1px !important;
		border-color: rgba(255, 255, 255, 0.15) !important;
		border-radius: 3em;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.6em;
		font-weight: bold;
		height: calc(4.75em + 2px);
		letter-spacing: 0.25em;
		line-height: 4.75em;
		outline: 0;
		padding: 0 3.75em;
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		/* ripple/overlay effect */
		.btn-relay::after {
			-moz-transform: scale(0.25);
			-webkit-transform: scale(0.25);
			-ms-transform: scale(0.25);
			transform: scale(0.25);
			pointer-events: none;
			-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
			-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
			-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
			transition: opacity 0.2s ease, transform 0.2s ease;
			background: #ffffff;
			border-radius: 3em;
			content: '';
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		/* icon spacing, size variants, fit width */
		.btn-relay.icon::before {
			margin-right: 0.75em;
		}

		.btn-relay.fit {
			width: 100%;
		}

		.btn-relay.small {
			font-size: 0.4em;
		}

		.btn-relay.large {
			font-size: 0.8em;
		}

		/* primary variant */
		.btn-relay.primary {
			background-color: #ffffff;
			color: #023e8a !important;
		}

			.btn-relay.primary::after {
				display: none;
			}

		/* disabled state for non-form element */
		.btn-relay.disabled,
		.btn-relay[aria-disabled="true"] {
			cursor: default;
			opacity: 0.5;
			pointer-events: none;
		}

		/* hover/active */
		.btn-relay:hover {
			border-color: rgba(255, 255, 255, 0.55) !important;
		}

			.btn-relay:hover::after {
				opacity: 0.05;
				-moz-transform: scale(1);
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}

			.btn-relay:hover:active {
				border-color: #ffffff !important;
			}

				.btn-relay:hover:active::after {
					opacity: 0.1;
				}



		/* Solid, heavier variant (does not alter base .btn-relay) */
		.btn-relay.btn-relay--solid {
			background-color: #023e8a; /* solid fill */
			color: #FFF !important;
			font-size: 0.9em; /* larger text inside button */
			font-weight: 800; /* heavier than bold */
			height: 3rem; /* decouple from em scaling */
			line-height: 2.75rem; /* keeps vertical centering */
			padding: 0 2rem; /* narrower pill */
			border-radius: 2rem; /* proportional rounding */
		}





/*Features*/


/* One-column stack: desc on top, grid below (same width) */
.features-layout {
	display: grid;
	grid-template-areas:
		"desc"
		"grid";
	grid-template-columns: 1fr;
	row-gap: 1rem;            /* space between desc and cards */
	align-items: start;
}

/* Statement bar (full-width, horizontal content) */
.desc-col {
	grid-area: desc;
	background: #023e8a;
	color: #fff;
	padding: 1.5rem;
	border-radius: 0.75rem;
	display: flex;            /* horizontal by default */
	align-items: center;
	gap: 0.75rem;
	box-shadow:
		0 1px 0 #ffffff inset,
		0 20px 40px rgba(2, 62, 138, 0.18),
		0 2px 6px rgba(2, 62, 138, 0.18);
}
.desc-col p { margin: 0; color: #fff; }

/* Feature grid — no lateral offsets; same width as desc-col */
.features-grid {
	grid-area: grid;
	margin: 0; /* remove previous left margin */
	display: grid;
	grid-template-columns: repeat(2, minmax(280px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1em;
	align-content: start;
}

/* Feature cards: embossed, white text */
.feature-card {
	position: relative;
	padding: 2rem 2rem 1.75rem calc(1.5rem + 2.75rem + 1.5rem); /* ensures a fixed 1rem gap */
	border-radius: 1rem;
	background: linear-gradient(165deg, #0162eb 0%, #023e8a 100%);
	box-shadow: 0 1px 0 #F7F9FC inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 12px 28px rgba(2, 62, 138, 0.30), 0 4px 10px rgba(2, 62, 138, 0.20);
}

/* Icon treatment */
.feature-card .icon {
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	line-height: 2.75rem;
	text-align: center;
	border-radius: 50%;
	background: #F7F9FC;
	color: #023e8a;
	box-shadow:
		0 1px 0 #ffffff inset,
		0 -1px 0 rgba(0,0,0,0.06) inset,
		0 8px 16px rgba(2, 62, 138, 0.25);
}

/* Responsive */
@media (max-width: 900px) {
	.features-grid {
		grid-template-columns: 1fr;
	}
	/* optional separators when stacked */
	.features-grid > .feature-card + .feature-card {
		border-top: 2px solid #023e8a;
	}
}



/* Form */

	form {
		margin: 0 0 2em 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3em);
			margin: -1.5em 0 2em -1.5em;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5em 0 0 1.5em;
				width: calc(100% - 1.5em);
			}

		form > .fields > .field textarea {
			display: block;
			width: 100%;
			max-width: 100%;
			min-height: 8rem; /* initial height */
			max-height: 35rem; /* hard cap */
			resize: vertical; /* allow only vertical resize */
			overflow: auto; /* scroll after hitting max-height */
			box-sizing: border-box;
		}

				form > .fields > .field.half {
					width: calc(50% - 0.75em);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5em);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375em);
				}

		@media screen and (max-width: 480px) {

			form > .fields {
				width: calc(100% + 3em);
				margin: -1.5em 0 2em -1.5em;
			}

				form > .fields > .field {
					padding: 1.5em 0 0 1.5em;
					width: calc(100% - 1.5em);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.5em);
					}

		}

	label {
		color: #ffffff;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 0.7em 0;
		display: block;
		font-size: 1.1em;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 0.25em;
		border: none;
		border: solid 1px rgba(255, 255, 255, 0.15);
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.15)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #023e8a;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

		body.is-ie textarea {
			min-height: 10em;
		}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: rgba(255, 255, 255, 0.55);
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: normal;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 0.25em;
				border: solid 1px rgba(255, 255, 255, 0.15);
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #ffffff;
			border-color: #ffffff;
			color: #00c0fa;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	input[type="checkbox"] + label:before {
		border-radius: 0.25em;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.major {
			width: 2.5em;
			height: 2.5em;
			display: block;
			background: #ffffff;
			border-radius: 100%;
			color: #023e8a;
			text-align: center;
			line-height: 2.5em;
			margin: 0 0 1.3em 0;
		}

			.icon.major:before {
				font-size: 1.25em;
			}

				.wrapper.style1 .icon.major:before {
					color: #0162eb;
				}

				.wrapper.style1-alt .icon.major:before {
					color: #00b4d8;
				}

				.wrapper.style2 .icon.major:before {
					color: #48cae4;
				}

				.wrapper.style2-alt .icon.major:before {
					color: #90e0ef;
				}

				.wrapper.style3 .icon.major:before {
					color: #00c0fa;
				}

				.wrapper.style3-alt .icon.major:before {
					color: #0077b6;
				}

/* Image */

	.image {
		border-radius: 0.25em;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 0.25em;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px rgba(255, 255, 255, 0.15);
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: bold;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}

/* Contact */

	ul.contact {
		list-style: none;
		padding: 0;
	}

		ul.contact > li {
			padding: 0;
			margin: 1.5em 0 0 0;
		}

			ul.contact > li:first-child {
				margin-top: 0;
			}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 0.75em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li > a, ul.icons li > span {
				border: 0;
			}

				ul.icons li > a .label, ul.icons li > span .label {
					display: none;
				}

/* Menu */

	ul.menu {
		list-style: none;
		padding: 0;
	}

		ul.menu > li {
			border-left: solid 1px rgba(255, 255, 255, 0.15);
			display: inline-block;
			line-height: 1;
			margin-left: 1.5em;
			padding: 0 0 0 1.5em;
		}

			ul.menu > li:first-child {
				border-left: 0;
				margin: 0;
				padding-left: 0;
			}

		@media screen and (max-width: 480px) {

			ul.menu > li {
				border-left: 0;
				display: block;
				line-height: inherit;
				margin: 0.5em 0 0 0;
				padding-left: 0;
			}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		color: rgba(255, 255, 255, 0.35);
		position: relative;
		margin: 0 0 1.5em 0;
	}

	header h2 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.5em;
	}

	header h3 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
		line-height: 1.5em;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: 0.9em;
		margin-top: -0.6em;
		line-height: 1.5em;
	}

	/* Split */

	.split {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}

		.split > * {
			width: calc(50% - 2.5em);
		}

		.split > :nth-child(2n - 1) {
			padding-right: 2.5em;
			border-right: solid 1px rgba(255, 255, 255, 0.15);
		}

		.split > :nth-child(2n) {
			padding-left: 2.5em;
		}

		.split.style1 > :nth-child(2n - 1) {
			width: calc(66.66666% - 2.5em);
		}

		.split.style1 > :nth-child(2n) {
			width: calc(33.33333% - 2.5em);
		}

	@media screen and (max-width: 1680px) {

		.split > * {
			width: calc(50% - 2em);
		}

		.split > :nth-child(2n - 1) {
			padding-right: 2em;
		}

		.split > :nth-child(2n) {
			padding-left: 2em;
		}

		.split.style1 > :nth-child(2n - 1) {
			width: calc(66.66666% - 2em);
		}

		.split.style1 > :nth-child(2n) {
			width: calc(33.33333% - 2em);
		}
	}

	@media screen and (max-width: 980px) {

		.split {
			display: block;
		}

			.split > * {
				border-top: solid 1px rgba(255, 255, 255, 0.15);
				margin: 4em 0 0 0;
				padding: 4em 0 0 0;
				width: 100% !important;
			}

			.split > :nth-child(2n - 1) {
				border-right: 0;
				padding-right: 0;
			}

			.split > :nth-child(2n) {
				padding-left: 0;
			}

			.split > :first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}
	}

	@media screen and (max-width: 736px) {

		.split > * {
			margin: 3em 0 0 0;
			padding: 3em 0 0 0;
		}
	}

	/* Spotlights */

	.spotlights > section {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		min-height: 22.5em;
	}

	body.is-ie .spotlights > section {
		min-height: 0;
	}

	.spotlights > section > .image {
		background-position: center center;
		background-size: cover;
		border-radius: 0;
		display: block;
		position: relative;
		width: 25em;
	}

		.spotlights > section > .image img {
			border-radius: 0;
			display: block;
		}

		.spotlights > section > .image:before {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			background: rgba(49, 36, 80, 0.9);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

	.spotlights > section > .content {
		padding: 4em 5em 2em 5em;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		width: 50em;
		-ms-flex: 1;
	}

		.spotlights > section > .content > .inner {
			-moz-transform: translateX(0) translateY(0);
			-webkit-transform: translateX(0) translateY(0);
			-ms-transform: translateX(0) translateY(0);
			transform: translateX(0) translateY(0);
			-moz-transition: opacity 1s ease, -moz-transform 1s ease;
			-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
			-ms-transition: opacity 1s ease, -ms-transform 1s ease;
			transition: opacity 1s ease, transform 1s ease;
			opacity: 1;
		}

	.spotlights > section:nth-child(2) {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.spotlights > section:nth-child(3) {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.spotlights > section.inactive > .image:before,
	body.is-preload .spotlights > section > .image:before {
		opacity: 1;
	}

	.spotlights > section.inactive > .content > .inner,
	body.is-preload .spotlights > section > .content > .inner {
		-moz-transform: translateX(-1em);
		-webkit-transform: translateX(-1em);
		-ms-transform: translateX(-1em);
		transform: translateX(-1em);
		opacity: 0;
	}

	@media screen and (max-width: 1680px) {

		.spotlights > section > .content {
			padding: 4em 4em 2em 4em;
		}
	}

	@media screen and (max-width: 980px) {

		.spotlights > section {
			display: block;
		}

			.spotlights > section > .image {
				width: 100%;
				height: 50vh;
			}

			.spotlights > section > .content {
				width: 100%;
			}

			.spotlights > section.inactive > .content > .inner,
			body.is-preload .spotlights > section > .content > .inner {
				-moz-transform: translateY(1em);
				-webkit-transform: translateY(1em);
				-ms-transform: translateY(1em);
				transform: translateY(1em);
			}
	}

	@media screen and (max-width: 736px) {

		.spotlights > section > .image {
			height: 50vh;
			min-height: 15em;
		}

		.spotlights > section > .content {
			padding: 3em 2em 1em 2em;
		}
	}

	/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px rgba(255, 255, 255, 0.15);
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.05);
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #ffffff;
			font-size: 1em;
			font-weight: bold;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px rgba(255, 255, 255, 0.15);
		}

		table tfoot {
			border-top: solid 2px rgba(255, 255, 255, 0.15);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(255, 255, 255, 0.15);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

	/* Wrapper */

	.wrapper {
		position: relative;
	}

		/* Base: mobile & tablets — no centering (your “fixed” state) */
		.wrapper > .inner {
			padding: 5em 5em 3em 5em;
			max-width: 100%;
			width: 75em;
			margin-inline: 0; /* ← important */
		}

	/* Desktop-only centering */
	@media (min-width: 1281px) {
		.wrapper > .inner {
			margin-inline: auto; /* center only when wide */
		}
	}


	@media screen and (max-width: 1680px) {

		.wrapper > .inner {
			padding: 4em 4em 2em 4em;
		}
	}

	@media screen and (max-width: 1280px) {

		.wrapper > .inner {
			width: 100%;
		}
	}

	@media screen and (max-width: 736px) {

		.wrapper > .inner {
			padding: 3em 2em 1em 2em;
		}
	}

	.wrapper.alt {
		background-color: #03045e;
	}

	.wrapper.style1 {
		background-color: #0162eb;
	}



	.wrapper.style1-alt {
		background-color: #023e8a;
	}

	.wrapper.style2 {
		background-color: #1c3d58;
	}

	.wrapper.style2-alt {
		background-color: #00b4d8;
	}

	.wrapper.style3 {
		background-color: #1c3d58;
	}

	.wrapper.style3-alt {
		background-color: #00b4d8;
	}

	.wrapper.fullscreen {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		min-height: 100vh;
	}

	body.is-ie .wrapper.fullscreen {
		height: 100vh;
	}

	@media screen and (max-width: 1280px) {

		.wrapper.fullscreen {
			min-height: calc(100vh - 2.5em);
		}

		body.is-ie .wrapper.fullscreen {
			height: calc(100vh - 2.5em);
		}
	}

	@media screen and (max-width: 736px) {

		.wrapper.fullscreen {
			padding: 2em 0;
			min-height: 0;
		}

		body.is-ie .wrapper.fullscreen {
			height: auto;
		}
	}

	.wrapper.fade-up > .inner {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
		transition: opacity 1s ease, transform 1s ease;
		opacity: 1.0;
	}

	.wrapper.fade-up.inactive > .inner,
	body.is-preload .wrapper.fade-up > .inner {
		opacity: 0;
		-moz-transform: translateY(1em);
		-webkit-transform: translateY(1em);
		-ms-transform: translateY(1em);
		transform: translateY(1em);
	}

	.wrapper.fade-down > .inner {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
		transition: opacity 1s ease, transform 1s ease;
		opacity: 1.0;
	}

	.wrapper.fade-down.inactive > .inner,
	body.is-preload .wrapper.fade-down > .inner {
		opacity: 0;
		-moz-transform: translateY(-1em);
		-webkit-transform: translateY(-1em);
		-ms-transform: translateY(-1em);
		transform: translateY(-1em);
	}

	.wrapper.fade > .inner {
		-moz-transition: opacity 1s ease;
		-webkit-transition: opacity 1s ease;
		-ms-transition: opacity 1s ease;
		transition: opacity 1s ease;
		opacity: 1.0;
	}

	.wrapper.fade.inactive > .inner,
	body.is-preload .wrapper.fade > .inner {
		opacity: 0;
	}



	.wq-gradient-intro {
		--bg-a: #0b1f4b;
		--bg-b: #023e8a;
		--bg-c: #0161eb;
		--ink: #0B1220;
		--muted: #6b7280;
		--ring: rgba(1, 97, 235, 0.18);
		color: #fff;
		/* SVG on top, gradients underneath */
		background-image: url("images/intro.svg"), radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.07), transparent 60%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 46%, var(--bg-c) 100%);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center, 100% -10%, center;
		background-size: cover, auto, cover;
	}

	.wq-gradient {
		--bg-a: #0b1f4b;
		--bg-b: #023e8a;
		--bg-c: #0161eb;
		--ink: #0B1220;
		--muted: #6b7280;
		--ring: rgba(1, 97, 235, 0.18);
		color: #fff;
		/* SVG on top, gradients underneath */
		background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.07), transparent 60%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 46%, var(--bg-c) 100%);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center, 100% -10%, center;
		background-size: cover, auto, cover;
	}

	.wq-gradient2 {
		/* push the palette toward #0161eb */
		--bg-a: #0b2d6e; /* deep blue anchor */
		--bg-b: #0156e5; /* cobalt-mid */
		--bg-c: #0161eb; /* brand cobalt (dominant) */
		--bg-d: #5aa0ff; /* bright blue tail */
		--ink: #0B1220;
		--muted: #6b7280;
		--ring: rgba(1, 97, 235, 0.22);
		color: #fff;
		/* SVG on top, gradients underneath */
		background-image: radial-gradient(900px 480px at 100% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
		/* heavier weighting toward #0161eb */
		linear-gradient( 112deg, var(--bg-a) 0%, var(--bg-b) 36%, var(--bg-c) 68%, var(--bg-d) 100% );
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center, 100% -10%, center;
		background-size: cover, auto, cover;
	}


	/* next section: pale bluish off-white */
	.wq-soft {
		--section-bg: #EFF4FF; /* ice blue */
		--section-ink: #0B1220; /* your ink */
		background: var(--section-bg);
	}

	/* Keep this (or your existing): */
	.wq-soft--cogs {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		/* tune opacity in one place */
		--cogs-opacity: 1; /* increase/decrease to taste */
	}

		/* Ensure content stays above */
		.wq-soft--cogs > .inner {
			position: relative;
			z-index: 1;
		}

	/* FULL-HEIGHT decorative images */
	.wq-cogs {
		position: absolute;
		top: 0;
		height: 100%; /* <-- makes image span top-to-bottom of the section */
		width: auto; /* preserve aspect ratio; prevents “zoomed-in” look */
		max-height: 100%;
		max-width: none; /* allow natural width from the height scaling */
		object-fit: contain; /* safe; not strictly needed with explicit height/width */
		pointer-events: none;
		user-select: none;
		z-index: 0;
		opacity: var(--cogs-opacity);
	}

	/* Pin to edges + keep artwork aligned */
	.wq-cogs--left {
		left: 0;
		object-position: left center;
	}

	.wq-cogs--right {
		right: 0;
		object-position: right center;
	}

/* alternative: fit width of section, never tied to height */
	.wq-cogs--top {
		top: 0;
		left: 50%;
		width: 100%;
		height: auto !important;
		transform: translateX(-50%); /* no scale */
		transform-origin: center top;
	}

	.wq-cogs--bottom { 
	  top:auto; bottom:0; left:50%;
	  width:100%; height:auto !important;
	  transform: translateX(-50%); 
	  transform-origin:center bottom;
	}

	.wq-soft--cogs:has(> .wq-cogs--bottom) {
		padding-block-end: clamp(2.5rem, 6vw, 3.5rem);
	}



	/* Mobile adjustments (if needed) */
	@media (max-width: 980px) {
		.wq-cogs {
			opacity: 0.28;
		}
	}

	@media (max-width: 736px) {
		.wq-cogs {
			display: none;
		}
	}



	/* Indigo headings & paragraphs, centred text */
	.darktext-h {
		color: #023e8a !important;
	}


	.darktext-p {
		color: #375983 !important;
	}




	/* Dark footer gradient that blends with .wq-gradient above it */
	.wq-gradient-alt {
		/* deeper version of your brand ramp */
		--bg-a: #050f27; /* near-navy black (darker than #0b1f4b) */
		--bg-b: #0a1b3d; /* dark steel blue (darker than #023e8a) */
		--bg-c: #0a2f7a; /* muted cobalt (darker than #0161eb) */
		/* text/accents tuned for dark surfaces */
		--ink: #eef6ff;
		--muted: #8fa3c2;
		--ring: rgba(1, 97, 235, 0.22);
		color: #fff;
		position: relative;
		isolation: isolate;
		/* keep the same stacking order so it visually relates to .wq-gradient */
		background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.035), transparent 62%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
		background-repeat: no-repeat, no-repeat;
		background-position: 100% -10%, center;
		background-size: auto, cover;
		/* solid fallback ensures nothing “wins” over the gradient */
		background-color: var(--bg-a);
	}


	/* Helpful footer-specific polish (optional, keep if this class is used on #footer) */
	.wq-footer.wq-gradient-alt a {
		color: #cfe8ff;
	}

		.wq-footer.wq-gradient-alt a:hover,
		.wq-footer.wq-gradient-alt a:focus {
			color: #e9f4ff;
			text-decoration-color: rgba(0,192,250,0.65);
		}

	.wq-footer.wq-gradient-alt {
		box-shadow: 0 -1px 0 rgba(255,255,255,0.05) inset; /* micro inner lip, hides any seam */
	}







	/* Header */
	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: #0162eb;
		cursor: default;
		padding: .8em 2em;
		padding-bottom: 0em
	}

		#header > .title {
			border: 0;
			color: #ffffff;
			display: block;
			font-size: 1.25em;
			font-weight: bold;
		}

		#header > nav {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			text-align: right;
		}

			#header > nav > ul {
				margin: 0;
				padding: 0;
			}

				#header > nav > ul > li {
					display: inline-block;
					margin-left: 2em;
					padding: 0;
					vertical-align: middle;
				}

					#header > nav > ul > li:first-child {
						margin-left: 0;
					}

					#header > nav > ul > li a {
						border: 0;
						color: rgba(255, 255, 255, 0.35);
						display: inline-block;
						font-size: 0.6em;
						font-weight: bold;
						letter-spacing: 0.25em;
						text-transform: uppercase;
					}

						#header > nav > ul > li a:hover {
							color: rgba(255, 255, 255, 0.55);
						}

						#header > nav > ul > li a.active {
							color: #ffffff;
						}

	@media screen and (max-width: 736px) {

		#header {
			padding: 1em 2em;
		}
	}

	@media screen and (max-width: 480px) {

		#header {
			display: block;
			padding: 0 2em;
			text-align: left;
		}

			#header .title {
				font-size: 1.25em;
				padding: 1em 0;
			}

			#header > nav {
				border-top: solid 1px rgba(255, 255, 255, 0.15);
				text-align: inherit;
			}

				#header > nav > ul > li {
					margin-left: 1.5em;
				}

					#header > nav > ul > li a {
						height: 6em;
						line-height: 6em;
					}
	}

	/* Wrapper (main) */

	#sidebar + #wrapper {
		margin-left: 15em;
	}

	@media screen and (max-width: 1280px) {

		#sidebar + #wrapper {
			margin-left: 0;
			padding-top: 3.5em;
		}
	}

	@media screen and (max-width: 736px) {

		#sidebar + #wrapper {
			padding-top: 0;
		}
	}

	#header + #wrapper > .wrapper > .inner {
		margin: 0 auto;
	}

	/* Footer */

	#sidebar + #wrapper + #footer {
		margin-left: 15em;
	}

	@media screen and (max-width: 1280px) {

		#sidebar + #wrapper + #footer {
			margin-left: 0;
		}
	}

	#footer > .inner a {
		border-bottom-color: rgba(255, 255, 255, 0.15);
	}

		#footer > .inner a:hover {
			border-bottom-color: transparent;
		}

	#footer > .inner .menu {
		font-size: 0.8em;
		color: rgba(255, 255, 255, 0.15);
	}

	#header + #wrapper + #footer > .inner {
		margin: 0 auto;
	}

	/* Sidebar */

	#sidebar .logo {
		display: block;
		margin-left: auto; /* center horizontally */
		margin-right: auto; /* center horizontally */
		margin-top: auto; /* center on main axis (column) */
		margin-bottom: 1.5em; /* center on main axis (column) */
		align-self: center; /* vertical centering when sidebar switches to row */
		max-width: 100%;
		height: auto;
	}


	#sidebar {
		padding: 2.5em 2.5em 0.5em 2.5em;
		background: #023e8a;
		cursor: default;
		height: 100vh;
		left: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		position: fixed;
		text-align: right;
		top: 0;
		width: 15em;
		z-index: 10000;
		/* gradient background */
		--bg-a: #050f27; /* near-navy black (darker than #0b1f4b) */
		--bg-b: #0a1b3d; /* dark steel blue (darker than #023e8a) */
		--bg-c: #0a2f7a; /* muted cobalt (darker than #0161eb) */
		/* text/accents tuned for dark surfaces */
		/* keep the same stacking order so it visually relates to .wq-gradient */
		background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.035), transparent 62%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
		background-repeat: no-repeat, no-repeat;
		/* solid fallback ensures nothing “wins” over the gradient */
		background-color: var(--bg-a);
	}

		#sidebar > .inner {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			min-height: 100%;
			opacity: 1;
			width: 100%;
		}

	body.is-ie #sidebar > .inner {
		height: 100%;
	}

	#sidebar nav > ul {
		list-style: none;
		padding: 0;
	}

		#sidebar nav > ul > li {
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			-moz-transition: opacity 0.15s ease, -moz-transform 0.75s ease;
			-webkit-transition: opacity 0.15s ease, -webkit-transform 0.75s ease;
			-ms-transition: opacity 0.15s ease, -ms-transform 0.75s ease;
			transition: opacity 0.15s ease, transform 0.75s ease;
			margin: 1.5em 0 0 0;
			opacity: 1;
			padding: 0;
			position: relative;
		}

			#sidebar nav > ul > li:first-child {
				margin: 0;
			}

			#sidebar nav > ul > li:nth-child(1) {
				-moz-transition-delay: 0.45s;
				-webkit-transition-delay: 0.45s;
				-ms-transition-delay: 0.45s;
				transition-delay: 0.45s;
			}

			#sidebar nav > ul > li:nth-child(2) {
				-moz-transition-delay: 0.65s;
				-webkit-transition-delay: 0.65s;
				-ms-transition-delay: 0.65s;
				transition-delay: 0.65s;
			}

			#sidebar nav > ul > li:nth-child(3) {
				-moz-transition-delay: 0.85s;
				-webkit-transition-delay: 0.85s;
				-ms-transition-delay: 0.85s;
				transition-delay: 0.85s;
			}

			#sidebar nav > ul > li:nth-child(4) {
				-moz-transition-delay: 1.05s;
				-webkit-transition-delay: 1.05s;
				-ms-transition-delay: 1.05s;
				transition-delay: 1.05s;
			}

			#sidebar nav > ul > li:nth-child(5) {
				-moz-transition-delay: 1.25s;
				-webkit-transition-delay: 1.25s;
				-ms-transition-delay: 1.25s;
				transition-delay: 1.25s;
			}

			#sidebar nav > ul > li:nth-child(6) {
				-moz-transition-delay: 1.45s;
				-webkit-transition-delay: 1.45s;
				-ms-transition-delay: 1.45s;
				transition-delay: 1.45s;
			}

			#sidebar nav > ul > li:nth-child(7) {
				-moz-transition-delay: 1.65s;
				-webkit-transition-delay: 1.65s;
				-ms-transition-delay: 1.65s;
				transition-delay: 1.65s;
			}

			#sidebar nav > ul > li:nth-child(8) {
				-moz-transition-delay: 1.85s;
				-webkit-transition-delay: 1.85s;
				-ms-transition-delay: 1.85s;
				transition-delay: 1.85s;
			}

			#sidebar nav > ul > li:nth-child(9) {
				-moz-transition-delay: 2.05s;
				-webkit-transition-delay: 2.05s;
				-ms-transition-delay: 2.05s;
				transition-delay: 2.05s;
			}

			#sidebar nav > ul > li:nth-child(10) {
				-moz-transition-delay: 2.25s;
				-webkit-transition-delay: 2.25s;
				-ms-transition-delay: 2.25s;
				transition-delay: 2.25s;
			}

			#sidebar nav > ul > li:nth-child(11) {
				-moz-transition-delay: 2.45s;
				-webkit-transition-delay: 2.45s;
				-ms-transition-delay: 2.45s;
				transition-delay: 2.45s;
			}

			#sidebar nav > ul > li:nth-child(12) {
				-moz-transition-delay: 2.65s;
				-webkit-transition-delay: 2.65s;
				-ms-transition-delay: 2.65s;
				transition-delay: 2.65s;
			}

			#sidebar nav > ul > li:nth-child(13) {
				-moz-transition-delay: 2.85s;
				-webkit-transition-delay: 2.85s;
				-ms-transition-delay: 2.85s;
				transition-delay: 2.85s;
			}

			#sidebar nav > ul > li:nth-child(14) {
				-moz-transition-delay: 3.05s;
				-webkit-transition-delay: 3.05s;
				-ms-transition-delay: 3.05s;
				transition-delay: 3.05s;
			}

			#sidebar nav > ul > li:nth-child(15) {
				-moz-transition-delay: 3.25s;
				-webkit-transition-delay: 3.25s;
				-ms-transition-delay: 3.25s;
				transition-delay: 3.25s;
			}

			#sidebar nav > ul > li:nth-child(16) {
				-moz-transition-delay: 3.45s;
				-webkit-transition-delay: 3.45s;
				-ms-transition-delay: 3.45s;
				transition-delay: 3.45s;
			}

			#sidebar nav > ul > li:nth-child(17) {
				-moz-transition-delay: 3.65s;
				-webkit-transition-delay: 3.65s;
				-ms-transition-delay: 3.65s;
				transition-delay: 3.65s;
			}

			#sidebar nav > ul > li:nth-child(18) {
				-moz-transition-delay: 3.85s;
				-webkit-transition-delay: 3.85s;
				-ms-transition-delay: 3.85s;
				transition-delay: 3.85s;
			}

			#sidebar nav > ul > li:nth-child(19) {
				-moz-transition-delay: 4.05s;
				-webkit-transition-delay: 4.05s;
				-ms-transition-delay: 4.05s;
				transition-delay: 4.05s;
			}

			#sidebar nav > ul > li:nth-child(20) {
				-moz-transition-delay: 4.25s;
				-webkit-transition-delay: 4.25s;
				-ms-transition-delay: 4.25s;
				transition-delay: 4.25s;
			}

	#sidebar nav a {
		-moz-transition: color 0.2s ease;
		-webkit-transition: color 0.2s ease;
		-ms-transition: color 0.2s ease;
		transition: color 0.2s ease;
		border: 0;
		color: rgba(255, 255, 255, 0.35);
		display: block;
		font-size: 0.6em;
		font-weight: bold;
		letter-spacing: 0.25em;
		line-height: 1.75;
		outline: 0;
		padding: 1.35em 0;
		position: relative;
		text-decoration: none;
		text-transform: uppercase;
	}

		#sidebar nav a:before, #sidebar nav a:after {
			border-radius: 0.2em;
			bottom: 0;
			content: '';
			height: 0.2em;
			position: absolute;
			right: 0;
			width: 100%;
		}

		#sidebar nav a:before {
			display: none;
		}

		#sidebar nav a:after {
			background-image: -moz-linear-gradient(to right, #0162eb, #00c0fa);
			background-image: -webkit-linear-gradient(to right, #0162eb, #00c0fa);
			background-image: -ms-linear-gradient(to right, #0162eb, #00c0fa);
			background-image: linear-gradient(to right, #0162eb, #00c0fa);
			-moz-transition: max-width 0.2s ease;
			-webkit-transition: max-width 0.2s ease;
			-ms-transition: max-width 0.2s ease;
			transition: max-width 0.2s ease;
			max-width: 0;
		}

		#sidebar nav a:hover {
			color: rgba(255, 255, 255, 0.55);
		}

		#sidebar nav a.active {
			color: #ffffff;
		}

			#sidebar nav a.active:after {
				max-width: 100%;
			}

	body.is-preload #sidebar > .inner {
		opacity: 0;
	}

	body.is-preload #sidebar nav ul li {
		-moz-transform: translateY(2em);
		-webkit-transform: translateY(2em);
		-ms-transform: translateY(2em);
		transform: translateY(2em);
		opacity: 0;
	}


	/* --- Sidebar border (white/grey) --- */
	/* Paste AFTER your existing #sidebar rules */
	#sidebar {
		/* layered edge: inner highlight + inner midline + soft ambient */
		box-shadow: inset -1px 0 0 rgba(255,255,255,0.65), /* bright hairline on the content edge */
		inset -2px 0 0 rgba(255,255,255,0.20), /* secondary soft line for depth */
		8px 0 24px rgba(12,18,32,0.22); /* ambient separation to main canvas */
		isolation: isolate; /* contain pseudo-element layering */
	}


	/* Mobile/top-bar layout: convert the edge to a bottom rule */
	@media (max-width: 980px) {
		#sidebar {
			box-shadow: inset 0 -1px 0 rgba(255,255,255,0.65), inset 0 -2px 0 rgba(255,255,255,0.20), 0 8px 24px rgba(12,18,32,0.22);
		}
	}




	/*Sidebar Dropdown*/
	/* --- Dropdown host --- */
	#sidebar nav > ul > li.has-submenu {
		position: relative;
	}

		/* Space for the caret at the far right */
		#sidebar nav > ul > li.has-submenu > a {
			padding-right: 1.6em; /* keeps your underline effect; just adds caret space */
			position: relative; /* for caret absolute positioning */
		}

			/* Caret: a right-pointing triangle that rotates down on hover */
			#sidebar nav > ul > li.has-submenu > a .wq-caret {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%) rotate(0deg);
				transition: transform .25s ease;
				width: .7em;
				height: .7em;
				display: inline-block;
			}

				#sidebar nav > ul > li.has-submenu > a .wq-caret::before {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-style: solid;
					/* triangle pointing right */
					border-width: .32em 0 .32em .48em;
					border-color: transparent transparent transparent currentColor;
				}

			/* Rotate caret when open (hover/focus-within for keyboard) */
			#sidebar nav > ul > li.has-submenu:hover > a .wq-caret,
			#sidebar nav > ul > li.has-submenu:focus-within > a .wq-caret,
			#sidebar nav > ul > li.has-submenu.is-open > a .wq-caret,
			#sidebar nav > ul > li.has-submenu > a[aria-expanded="true"] .wq-caret {
				transform: translateY(-50%) rotate(90deg); /* right-facing ➜ down-facing */
			}

	/* --- Submenu container --- */
	#sidebar nav ul.submenu {
		list-style: none;
		margin: 0;
		padding: 0 0 .4em 0;
		max-height: 0; /* collapsed */
		overflow: hidden;
		opacity: 0;
		transform: translateY(-0.25em);
		transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
	}

	/* Open on hover or when links inside receive focus */
	#sidebar nav > ul > li.has-submenu:hover > ul.submenu,
	#sidebar nav > ul > li.has-submenu:focus-within > ul.submenu {
		max-height: 15em; /* large enough to fit items; adjust if needed */
		opacity: 1;
		transform: translateY(0);
	}

	/* Submenu items: indent + gentle cascade animation */
	#sidebar nav ul.submenu > li {
		margin: 0;
		padding: 0;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity .25s ease, transform .25s ease;
	}

	#sidebar nav > ul > li.has-submenu:hover ul.submenu > li,
	#sidebar nav > ul > li.has-submenu:focus-within ul.submenu > li {
		opacity: 1;
		transform: none;
	}

	/* Staggered reveal (50 ms steps) */
	#sidebar nav ul.submenu > li:nth-child(1) {
		transition-delay: 50ms;
	}

	#sidebar nav ul.submenu > li:nth-child(2) {
		transition-delay: 100ms;
	}

	#sidebar nav ul.submenu > li:nth-child(3) {
		transition-delay: 150ms;
	}

	#sidebar nav ul.submenu > li:nth-child(4) {
		transition-delay: 200ms;
	}

	#sidebar nav ul.submenu > li:nth-child(5) {
		transition-delay: 250ms;
	}
	/* Also open when JS marks the parent as .is-open */
	#sidebar nav > ul > li.has-submenu.is-open > ul.submenu {
		max-height: 15em; /* same as hover open */
		opacity: 1;
		transform: translateY(0);
	}

	/* Reveal submenu items when .is-open (matches your staggered rules) */
	#sidebar nav > ul > li.has-submenu.is-open ul.submenu > li {
		opacity: 1;
		transform: none;
	}



	/* Submenu link styling (inherits your base link styles, slightly adjusted) */
	#sidebar nav ul.submenu a {
		/* inherits color, caps, underline animation from #sidebar nav a */
		padding: .7em 0 .7em 1em; /* indent */
		font-size: 0.55em; /* just a touch smaller than 0.6em */
		letter-spacing: 0.2em;
		position: relative;
	}






	@media screen and (max-width: 1280px) {

		#sidebar {
			display: none;
		}
	}

/* =========================================================
   MOBILE SIDEBAR (REWRITTEN WITH VEIL / FOCUS EMPHASIS)
   DOM expectation (order): #mSidebarToggle, #m-sidebar, #m-sidebar-backdrop
   Z-order: toggle(10003) > drawer(10002) > veil(10001) > page
   ========================================================= */

/* --- Defaults: hide mobile UI on desktop --- */
#m-sidebar,
#m-sidebar-backdrop,
#mSidebarToggle {
	display: none;
}

/* --- Backdrop (veil) base: present but inert until mobile rules apply --- */
#m-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55); /* neutral grey veil */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease, background-color 220ms ease;
	z-index: 10001; /* below drawer */
}

/* Respect users preferring fewer transparency effects */
@media (prefers-reduced-transparency: reduce) {
	#m-sidebar-backdrop {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(0,0,0,0.6);
	}
}

/* High-contrast systems */
@media (forced-colors: active) {
	#m-sidebar-backdrop {
		background: CanvasText;
		opacity: 0.75;
	}
}

/* ---- Layout constants so width/height stay in sync with your sidebar rules ---- */
body.page-index {
	--sidebar-w: 15em; /* matches desktop sidebar width */
	--topbar-h: 3.5em; /* matches desktop top bar height */
}

/* ≥1281px: fixed left sidebar; push page content right so it sits alongside */
@media screen and (min-width: 1281px) {
	body {
		padding-left: var(--sidebar-w);
	}
}

/* ≤736px: mobile drawer + veil take over */
@media screen and (max-width: 1280px) {

	/* Always instantiate the backdrop on mobile so sibling selectors can animate it */
	#m-sidebar-backdrop {
		display: block;
	}

		/* Visible state via class (JS) */
		#m-sidebar-backdrop.is-visible {
			opacity: 1;
			pointer-events: auto;
		}

	/* Pure-CSS activation: show veil when drawer is open or focused.
     Requires #m-sidebar … #m-sidebar-backdrop sibling ordering. */
	#m-sidebar.is-open ~ #m-sidebar-backdrop,
	#m-sidebar:focus-within ~ #m-sidebar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}


	/* Optional scroll-lock when drawer is open (toggle .no-scroll on html/body) */
	html.no-scroll,
	body.no-scroll {
		overflow: hidden;
		overscroll-behavior: contain;
		touch-action: none;
	}

	/* --- Toggle button --- */
	#mSidebarToggle {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		position: fixed;
		top: .75rem;
		left: .75rem;
		z-index: 10003; /* above drawer + veil */
	}

	/* --- Off-canvas drawer --- */
	#m-sidebar {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(84vw, 15em); /* cap matches desktop width */
		padding: 2.5em 2.5em 0.5em; /* mirrors desktop spacing */
		text-align: right; /* mirrors desktop alignment */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%); /* hidden by default */
		transition: transform 240ms ease;
		box-shadow: 2px 0 18px rgba(0,0,0,0.22);
		z-index: 10002;
		/* Darkened gradient (harmonised with brand) */
		--bg-a: #050f27; /* deeper than #0b1f4b */
		--bg-b: #0a1b3d; /* deeper than #023e8a */
		--bg-c: #0a2f7a; /* muted cobalt vs #0161eb */
		background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.035), transparent 62%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
		background-repeat: no-repeat, no-repeat;
		background-color: var(--bg-a); /* solid fallback */
	}

		#m-sidebar.is-open {
			transform: translateX(0);
		}

		/* Drawer inner scaffold */
		#m-sidebar .inner {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 100%;
			width: 100%;
			opacity: 1;
			transition: opacity 1s ease; /* matches desktop fade rhythm */
		}

		/* --- Responsive logo in the mobile drawer --- */
		#m-sidebar .logo {
			display: block;
			max-width: 100%;
			height: auto;
			width: auto;
			margin: 0 auto 1.25rem; /* center + spacing */
			flex: 0 0 auto;
		}

		/* If logo is placed as <li class="logo"> … */
		#m-sidebar nav > ul > li.logo {
			margin: 0 0 1rem 0;
		}

			#m-sidebar nav > ul > li.logo > img,
			#m-sidebar nav > ul > li.logo > a > img {
				display: block;
				max-width: 100%;
				height: auto;
			}

		/* --- Nav list structure (mirrors desktop) --- */
		#m-sidebar nav > ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex; /* enforce flex on mobile */
			flex-direction: column; /* vertical stack */
			align-items: stretch; /* li fills row */
			flex-wrap: nowrap;
		}

			#m-sidebar nav > ul > li {
				margin: 1.5em 0 0 0;
				padding: 0;
				position: relative;
				display: block;
				flex: 0 0 auto;
				width: 100%;
				opacity: 1;
				transform: translateY(0);
				transition: opacity .15s ease, transform .75s ease;
			}

				#m-sidebar nav > ul > li:first-child {
					margin-top: 0;
				}

		/* --- Links (kept in sync with desktop) --- */
		#m-sidebar nav a {
			border: 0;
			display: block;
			color: rgba(255,255,255,0.35);
			font-size: 0.6em;
			font-weight: bold;
			letter-spacing: 0.25em;
			line-height: 1.75;
			padding: 1.35em 0;
			text-decoration: none;
			text-transform: uppercase;
			position: relative;
			outline: 0;
			transition: color .2s ease;
		}

			#m-sidebar nav a::before,
			#m-sidebar nav a::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 0.2em;
				border-radius: 0.2em;
			}


			#m-sidebar nav a::after {
				background-image: linear-gradient(to right, #0162eb, #00c0fa);
				max-width: 0;
				transition: max-width .2s ease;
			}

			#m-sidebar nav a:hover {
				color: rgba(255,255,255,0.55);
			}

			#m-sidebar nav a.active {
				color: #fff;
			}

				#m-sidebar nav a.active::after {
					max-width: 100%;
				}


		/* --- Mobile Dropdowns --- */
		#m-sidebar nav > ul > li.has-submenu {
			position: relative;
		}

			/* Space for caret */
			#m-sidebar nav > ul > li.has-submenu > a {
				padding-right: 1.6em;
				position: relative;
			}

				/* Caret */
				#m-sidebar nav > ul > li.has-submenu > a .wq-caret {
					position: absolute;
					right: 0;
					top: 50%;
					width: .7em;
					height: .7em;
					transform: translateY(-50%) rotate(0deg);
					transition: transform .25s ease;
					display: inline-block;
				}

					#m-sidebar nav > ul > li.has-submenu > a .wq-caret::before {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: .32em 0 .32em .48em; /* triangle → */
						border-color: transparent transparent transparent currentColor;
					}

		/* Collapsed submenu */
		#m-sidebar nav ul.submenu {
			list-style: none;
			margin: 0;
			padding: 0 0 .4em 0;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transform: translateY(-0.25em);
			transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
		}

		/* Open state (class-driven on mobile; JS sets inline max-height) */
		#m-sidebar nav > ul > li.has-submenu.is-open > a .wq-caret {
			transform: translateY(-50%) rotate(90deg);
		}

		#m-sidebar nav > ul > li.has-submenu.is-open > ul.submenu {
			opacity: 1;
			transform: translateY(0);
		}

		/* Submenu items + stagger (optional) */
		#m-sidebar nav ul.submenu > li {
			margin: 0;
			padding: 0;
			opacity: 0;
			transform: translateY(-6px);
			transition: opacity .25s ease, transform .25s ease;
		}

		#m-sidebar nav > ul > li.has-submenu.is-open ul.submenu > li {
			opacity: 1;
			transform: none;
		}

		#m-sidebar nav ul.submenu > li:nth-child(1) {
			transition-delay: 50ms;
		}

		#m-sidebar nav ul.submenu > li:nth-child(2) {
			transition-delay: 100ms;
		}

		#m-sidebar nav ul.submenu > li:nth-child(3) {
			transition-delay: 150ms;
		}

		#m-sidebar nav ul.submenu > li:nth-child(4) {
			transition-delay: 200ms;
		}

		#m-sidebar nav ul.submenu > li:nth-child(5) {
			transition-delay: 250ms;
		}

		/* Submenu link tweaks */
		#m-sidebar nav ul.submenu a {
			padding: .7em 0 .7em 1em;
			font-size: 0.55em;
			letter-spacing: 0.2em;
			position: relative;
		}

		/* ===== Scroll-driven submenu state (coexists with JS click state) ===== */

		/* --- Fallback for browsers WITHOUT :has() — uses .spy-open from scroll-spy JS --- */
		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu.spy-open > ul.submenu {
			opacity: 1;
			transform: translateY(0);
			max-height: 80vh; /* no !important — let JS inline heights win */
		}

		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu.spy-open > a .wq-caret {
			transform: translateY(-50%) rotate(90deg);
		}

		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu.spy-open ul.submenu > li {
			opacity: 1;
			transform: none;
		}

		/* Default-close when neither JS-open nor spy-open */
		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(.spy-open) > ul.submenu {
			max-height: 0; /* no !important — JS can open via inline px */
			opacity: 0;
			transform: translateY(-0.25em);
		}

		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(.spy-open) > a .wq-caret {
			transform: translateY(-50%) rotate(0deg);
		}

		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(.spy-open) ul.submenu > li {
			opacity: 0;
			transform: translateY(-6px);
		}

	/* --- Progressive enhancement when :has() is supported --- */
	@supports selector(:has(*)) {
		/* 1) Auto-open the group that contains the active link,
     but ONLY when the user hasn't manually opened anything. */
		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu:has(ul.submenu a.active) > ul.submenu {
			opacity: 1;
			transform: translateY(0);
			max-height: 80vh; /* no !important — let JS inline heights win */
		}

		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu:has(ul.submenu a.active) > a .wq-caret {
			transform: translateY(-50%) rotate(90deg);
		}

		#m-sidebar.is-open:not(.user-opened) nav > ul > li.has-submenu:has(ul.submenu a.active) ul.submenu > li {
			opacity: 1;
			transform: none;
		}
		/* 2) Default-close groups that are neither active nor JS-open. */
		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(:has(ul.submenu a.active)) > ul.submenu {
			max-height: 0; /* no !important — JS can open via inline px */
			opacity: 0;
			transform: translateY(-0.25em);
		}

		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(:has(ul.submenu a.active)) > a .wq-caret {
			transform: translateY(-50%) rotate(0deg);
		}

		#m-sidebar.is-open nav > ul > li.has-submenu:not(.is-open):not(:has(ul.submenu a.active)) ul.submenu > li {
			opacity: 0;
			transform: translateY(-6px);
		}
	}



}

/* ≤736px: desktop sidebar is hidden; no layout offset (mobile drawer handles overlay) */
@media screen and (max-width: 1280px) {
	body {
		padding: 0;
	}
}



/* ----------------------------------------------------- COOKIES BANNER------------------------------------*/
:root {
	/* Brand tokens (fallbacks if your site variables are absent) */
	--wq-blue-900: var(--wq-blue-900, #023e8a);
	--wq-blue-700: var(--wq-blue-700, #0161eb);
	--wq-cyan-500: var(--wq-accent-1, #00c0fa);
	--wq-bg-900: var(--wq-bg, #0a1120);
	--wq-card: color-mix(in oklab, white 6%, transparent);
	--wq-ring: color-mix(in oklab, white 10%, transparent);
	--wq-text: var(--wq-text, #eaf0ff);
	--wq-muted: color-mix(in oklab, var(--wq-text) 62%, transparent);
	--wq-success: var(--wq-accent-success, #16a34a);
	--wq-radius: 18px;
	--wq-shadow: 0 18px 36px rgba(2, 14, 42, .5);
}

.wq-cookie {
	font: inherit;
	color: var(--wq-text);
}

	.wq-cookie * {
		box-sizing: border-box;
	}

/* Banner (bottom sheet) */
.wq-cookie--banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9999;
	display: none;
	padding: clamp(.5rem, 1.5vw, 1rem);
}

	.wq-cookie--banner[aria-hidden="false"] {
		display: block;
	}

.wq-cookie__box {
	--bg-a: #050f27; /* near-navy black (darker than #0b1f4b) */
	--bg-b: #0a1b3d; /* dark steel blue (darker than #023e8a) */
	--bg-c: #0a2f7a; /* muted cobalt (darker than #0161eb) */
	/* text/accents tuned for dark surfaces */
	--ink: #eef6ff;
	--muted: #8fa3c2;
	--ring: rgba(1, 97, 235, 0.22);
	color: #fff;
	position: relative;
	isolation: isolate;
	/* keep the same stacking order so it visually relates to .wq-gradient */
	background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.035), transparent 62%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: 100% -10%, center;
	background-size: auto, cover;\
	/* solid fallback ensures nothing “wins” over the gradient */
	background-color: var(--bg-a);
	margin: 0 auto;
	max-width: 1100px;
	border: 1px solid var(--wq-ring);
	border-radius: var(--wq-radius);
	box-shadow: var(--wq-shadow);
	padding: clamp(1rem, 2vw, 1.25rem);
}

.wq-cookie__grid {
	display: grid;
	gap: 1rem;
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.wq-cookie__grid {
		grid-template-columns: 3fr 2fr;
		gap: 1.25rem;
	}
}

.wq-cookie__title {
	margin: 0 0 .35rem 0;
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	letter-spacing: .2px;
	/* subtle white "glow stroke" */
	text-shadow: 0 0 .65px #fff, 0 0 .65px #fff, 0 0 6px rgba(255,255,255,.08);
}

.wq-cookie__desc {
	margin: 0;
	color: var(--wq-muted);
}

.wq-cookie__buttons {
	display: grid;
	gap: .5rem;
	align-content: start;
	grid-template-columns: 1fr;
}

@media (min-width: 420px) {
	.wq-cookie__buttons {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.wq-btn--outline {
	color: var(--wq-text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wq-ring);
}

.wq-cookie__links {
	margin-top: .5rem;
	font-size: .9rem;
	color: var(--wq-muted);
}

	.wq-cookie__links a {
		color: var(--wq-cyan-500);
		text-underline-offset: 2px;
	}

/* --- Banner layout: stack content; desc full width; buttons below on left --- */
.wq-cookie--banner .wq-cookie__grid {
	display: grid; /* override any prior flex/2-col grid */
	grid-template-columns: 1fr; /* single column across the full box */
	grid-auto-rows: min-content;
	row-gap: .65rem;
}

/* Ensure title/desc/links occupy the full width row */
.wq-cookie--banner .wq-cookie__title,
.wq-cookie--banner .wq-cookie__desc,
.wq-cookie--banner .wq-cookie__links {
	grid-column: 1 / -1;
}

/* Buttons below the description (and links), left-aligned */
.wq-cookie--banner .wq-cookie__buttons {
	grid-column: 1 / -1; /* same full-width row, but content aligns left */
	justify-self: start; /* anchor button group to the left edge */
	display: flex; /* keep your existing .wq-btn styles; lay them out inline */
	flex-wrap: wrap; /* wrap gracefully on narrow widths */
	gap: .5rem; /* tidy spacing between buttons */
	margin-top: .25rem; /* subtle separation from text */
}


/* Modal overlay */
.wq-cookie--modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	background: color-mix(in oklab, black 40%, transparent);
	padding: 1rem;
	overflow: auto;
}

	.wq-cookie--modal[aria-hidden="false"] {
		display: grid;
		place-items: center;
	}

.wq-cookie__dialog {
	--bg-a: #050f27; /* near-navy black (darker than #0b1f4b) */
	--bg-b: #0a1b3d; /* dark steel blue (darker than #023e8a) */
	--bg-c: #0a2f7a; /* muted cobalt (darker than #0161eb) */
	/* text/accents tuned for dark surfaces */
	--ink: #eef6ff;
	--muted: #8fa3c2;
	--ring: rgba(1, 97, 235, 0.22);
	color: #fff;
	position: relative;
	isolation: isolate;
	/* keep the same stacking order so it visually relates to .wq-gradient */
	background-image: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.035), transparent 62%), linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: 100% -10%, center;
	background-size: auto, cover;
	/* solid fallback ensures nothing “wins” over the gradient */
	background-color: var(--bg-a);
	width: min(860px, 96vw);
	border: 1px solid var(--wq-ring);
	border-radius: var(--wq-radius);
	box-shadow: var(--wq-shadow);
	padding: clamp(1rem, 2vw, 1.25rem);
}

.wq-cookie__section + .wq-cookie__section {
	margin-top: .85rem;
}

.wq-cat {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .35rem .75rem;
	padding: .75rem;
	border-radius: 14px;
	background: color-mix(in oklab, var(--wq-card), transparent 0%);
	box-shadow: inset 0 0 0 1px var(--wq-ring);
}

.wq-cat__meta {
	color: var(--wq-muted);
	font-size: .95rem;
	grid-column: 1 / -1;
	margin-top: -.25rem;
}

.wq-switch {
	--h: 28px;
	--w: 52px;
	position: relative;
	width: var(--w);
	height: var(--h);
	border-radius: var(--h);
	background: color-mix(in oklab, var(--wq-card), black 12%);
	box-shadow: inset 0 0 0 1px var(--wq-ring);
}

	.wq-switch input {
		position: absolute;
		opacity: 0;
		inset: 0;
	}

.wq-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(var(--h) - 6px);
	height: calc(var(--h) - 6px);
	background: white;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,.35);
	transition: left .15s ease;
}

.wq-switch input:checked + .wq-switch__thumb {
	left: calc(var(--w) - var(--h) + 3px);
	background: #bfc9da;
}

.wq-switch input:disabled + .wq-switch__thumb {
	background: #bfc9da;
	box-shadow: none;
}

.wq-cookie__footer {
	display: grid;
	gap: .5rem;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 1rem;
}

@media (max-width: 520px) {
	.wq-cookie__footer {
		grid-template-columns: 1fr;
	}
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
	.wq-btn {
		transition: none;
	}

	.wq-switch__thumb {
		transition: none;
	}
}

/* ≥1280px: move cookie banner into the main column (15em right of left edge)
   and size the box to the available width there */
@media (min-width: 1280px) {
	.wq-cookie--banner {
		left: 15em; /* override inset's left=0 */
		right: 0;
		bottom: 0;
		top: auto;
	}

		/* Fill the available column while respecting paddings; stays centered */
		.wq-cookie--banner .wq-cookie__box {
			/* available width = viewport - sidebar - banner paddings */
			width: calc(100vw - 15em - 2 * clamp(.5rem, 1.5vw, 1rem));
			max-width: 1100px; /* keep your design cap */
			margin-left: auto; /* keep centered within the main column */
			margin-right: auto;
		}
}



 /* ----------------------- End Cookies ----------------------------------------*/



	/* Intro */

	#intro h1 .h1-line {
		display: block;
	}


	/* h1 copies p style*/
	#intro .inner .h1--subtle {
		font: inherit; /* keep paragraph family/weight/line-height */
		color: inherit;
		font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem); /* bigger, responsive */
		margin: 1em 0 1.5em;
		margin-left: 0.25em; /* shift right by 1em inside the flow */
	}


	#intro .inner {
		text-align: left; /* align all inner content to the left */
	}


	#intro p {
		font-size: 1.25em;
	}

	@media screen and (max-width: 980px) {

		#intro p br {
			display: none;
		}
	}

	@media screen and (max-width: 736px) {

		#intro p {
			font-size: 1em;
		}
	}

	@media screen and (max-width: 1280px) {

		#intro {
			background-attachment: scroll;
		}
	}
	/* Tablet and below: cap by viewport width to avoid cut-off */
	@media screen and (max-width: 980px) {
		#intro .logo {
			max-width: min(85vw, 400px);
		}
	}

	/* Small phones: a slightly tighter cap */
	@media screen and (max-width: 736px) {
		#intro .logo {
			max-width: min(90vw, 340px);
		}
	}

	/* Section 1 */
	/* Only affect the cards, not the grid layout */
	#one .features > section {
		display: flex;
		flex-direction: column;
	}

		/* Push the actions block to the bottom of each card */
		#one .features > section .actions {
			margin-top: auto;
			/* center the button horizontally */
			display: flex;
			justify-content: center;
		}

			/* keep list tidy */
			#one .features > section .actions li {
				margin: 0;
				list-style: none;
			}

		#one .features > section .actions {
			margin-top: auto;
			display: flex;
			justify-content: center;
			flex-wrap: wrap; /* allow multiple buttons to wrap onto new lines */
			gap: 0.5rem; /* even spacing when wrapping */
		}

			/* Ensure list items don't constrain width */
			#one .features > section .actions li {
				margin: 0;
				list-style: none;
				flex: 0 1 auto;
				max-width: 100%;
			}
			/* The key fix: allow wrapping and size-to-text */

			#one .features > section .actions .button {
				display: inline-flex; /* shrink to fit text */
				align-items: center;
				justify-content: center;
				white-space: normal !important; /* override theme’s nowrap */
				overflow-wrap: anywhere; /* handle long words/URLs */
				word-break: break-word;
				min-width: 0 !important; /* cancel any theme min-width */
				width: fit-content; /* expand with text */
				max-width: 100%; /* don’t overflow the card */
				text-align: center;
				line-height: 1.25;
			}








	/* Section 1 brand tailoring*/
	/* --- Gradient wrapper --- */
	.voice-box {
		/* full-background gradient using your requested #0161eb */
		background: linear-gradient(135deg, #0161eb 0%, var(--wq-accent-1, #00c0fa) 100%);
		padding: 2px; /* gradient border thickness */
		border-radius: 1.25rem;
		box-shadow: 0 10px 40px rgba(0,0,0,.25);
		margin: 0.5rem
	}

	.voice-box__inner {
		background: var(--wq-card-bg, rgba(0,0,0,.35));
		border: 1px solid var(--wq-card-border, rgba(255,255,255,.15));
		border-radius: inherit;
		padding: clamp(1rem, 2vw, 1.5rem);
		color: var(--wq-text, #fff);
	}

	/* --- Headline & subcopy --- */
	.voice-box__title {
		margin: 0 0 .3rem 0;
		font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
		font-weight: 700;
		letter-spacing: .2px;
		line-height: 1.2;
	}

	.voice-box__subtitle {
		margin: 0 0 1.25rem 0;
		color: var(--wq-muted, rgba(255,255,255,.78));
		line-height: 1.55;
	}

	/* --- Grid layout --- */
	.voice-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(0.9rem, 1.6vw, 1.25rem);
	}

	/* Tablet → 2 cols, Mobile → 1 col */
	@media (max-width: 1280px) {
		.voice-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 736px) {
		.voice-grid {
			grid-template-columns: 1fr;
		}
	}

	/* --- Cards --- */
	.voice-card {
		display: flex;
		flex-direction: column;
		gap: .75rem;
		padding: clamp(1rem, 1.5vw, 1.25rem);
		background: var(--wq-card-bg, rgba(255,255,255,.03));
		border: 1px solid var(--wq-card-border, rgba(255,255,255,.15));
		border-radius: 1rem;
		transition: transform .18s ease, box-shadow .18s ease;
	}

		.voice-card:hover,
		.voice-card:focus-within {
			transform: translateY(-2px);
			box-shadow: 0 8px 28px rgba(0,0,0,.25);
		}

	.voice-name {
		margin: 0;
		font-size: 1.06rem;
		font-weight: 600;
	}

	/* --- Audio control --- */
	.voice-card audio {
		display: block;
		width: 100%;
		height: 40px;
		border-radius: .75rem;
		outline: none;
	}

		/* WebKit chrome theming (non-breaking elsewhere) */
		.voice-card audio::-webkit-media-controls-panel {
			background: rgba(255,255,255,.06);
			border-radius: .75rem;
		}

	/* Accessible focus ring */
	.voice-card :is(audio, button, a):focus-visible {
		outline: 2px solid #0161eb;
		outline-offset: 2px;
		border-radius: .5rem;
	}









	/*section 2 */
	/* Hide the default disclosure marker */

/* =========================================================
   ONE-AUTOMATION FLOW (solid #0161eb cards + <h3> banner)
   ========================================================= */

/* ===== Flow layout (desktop: 2 cols + gutter) ===== */
#one-automation .flow {
	--thick: 3em;
	--card-w: clamp(240px, 27vw, 320px);
	--gutter: clamp(6rem, 14vw, 15rem);
	--row-gap: 5.5em;
	--stagger-left: 0.75em;
	--stagger-right: 3.75em;
	--headroom: clamp(2rem, 8vh, 6rem);
	position: relative;
	max-width: min(1200px, 95vw);
	margin: calc(var(--top-gap) - var(--thick) * 0.5) auto 0;
	padding-top: calc(var(--thick) * 0.5 + var(--headroom));
	margin-inline: auto;
	justify-content: center;
	display: grid;
	grid-template-columns: var(--card-w) var(--gutter) var(--card-w);
	column-gap: 0;
	row-gap: var(--row-gap);
	z-index: 0;
}

/* Scroll→reveal tuning (defaults; overridden below for ≤1280px) */
#flow-snake {
	--reveal-lead: 180px; /* delay before reveal starts */
	--reveal-stretch: 1.4; /* >1 = slower overall */
	--reveal-smooth-alpha: 0.10; /* lower = more glide */
}

/* Slightly faster reveal until the first box (global default) */
#one-automation #flow-snake {
	--pre-first-boost: 2; /* 1 = off */
	/* Optional: uncomment to force where “early” ends (otherwise auto-detected)
     --pre-first-end-frac: 0.18;  /* 0..1 along the path */
}

/* Step word styling used inside <h3> if desired */
.h3-step-word {
	color: #ffffff !important;
	font-size: 0.85em;
	font-weight: bold;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	line-height: inherit;
	display: inline-block;
	vertical-align: baseline;
}

#one-automation {
	padding-bottom: 3em;
}

	/* ===== SVG trunk (shared) ===== */
	#one-automation .flow-canvas {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
	}

	#one-automation .flow-path {
		fill: none;
		stroke: url(#flowGrad);
		stroke-width: var(--thick);
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: drop-shadow(0 12px 24px rgba(1,97,235,.18));
	}

	/* ===== Cards: solid + banner-as-h3 ===== */
	#one-automation .step {
		--stagger-y: 0px; /* set by odd/even */
		--lift: 0px; /* hover lift */

		position: relative;
		z-index: 1;
		isolation: isolate;
		width: 100%;
		min-height: clamp(10.5em, 9vw, 15em);
		background: #0161eb; /* solid card */
		color: #fff; /* default text */
		border: 1px solid #023e8a; /* crisp edge */
		border-radius: 1rem;
		box-shadow: 0 16px 34px rgba(3,14,30,0.16);
		padding: 1rem;
		opacity: 0; /* hidden until the trunk “touches” */
		transform: translateY(calc(var(--stagger-y) + var(--lift)));
		transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	}

		/* Banner = the <h3> itself (bleeds to edges; auto height) */
		#one-automation .step > h3 {
			position: relative;
			background: #023e8a;
			color: #fff;
			margin: -1rem -1rem 0; /* bleed full width, sit at top */
			padding: 0.75rem 1rem; /* banner interior spacing */
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			line-height: 1.25;
		}

		/* Body copy */
		#one-automation .step > p,
		#one-automation .step > ul,
		#one-automation .step > ol {
			color: rgba(255,255,255,0.92);
		}

		/* Stagger columns (desktop) */
		#one-automation .step:nth-of-type(odd) {
			grid-column: 1;
			--stagger-y: var(--stagger-left);
		}

		#one-automation .step:nth-of-type(even) {
			grid-column: 3;
			--stagger-y: var(--stagger-right);
		}

		/* Reveal when touched by trunk */
		#one-automation .step.is-live {
			opacity: 1;
			--lift: 0px;
			box-shadow: 0 20px 44px rgba(3,14,30,0.18);
		}

		/* Subtle hover lift */
		#one-automation .step:where(:hover, :focus-within) {
			--lift: -2px;
			box-shadow: 0 22px 48px rgba(3,14,30,0.20);
		}

/* === Stacked layout + vertical trunk (≤1280px) === */
@media (max-width: 1280px) {
	/* Faster, snappier reveal mapping for narrow layouts */
	#flow-snake {
		--reveal-stretch: 1.08; /* smaller = faster */
		--reveal-line-frac: 0.90; /* reveal line at 90% vh */
		--reveal-lead: 120px;
		--pre-first-boost: 1.22;
		--pre-first-end-frac: 0.18;
		--reveal-smooth-alpha: 0.18; /* snappier interpolation */
	}

	/* Slightly faster reveal until the first box (global default) */
	#one-automation #flow-snake {
		--pre-first-boost: 10; /* 1 = off */
		/* Optional: uncomment to force where “early” ends (otherwise auto-detected)
     --pre-first-end-frac: 0.18;  /* 0..1 along the path */
	}

	/* Stack cards in a single centered column */
	#one-automation .flow {
		position: relative;
		display: grid !important;
		grid-template-columns: min(92vw, 620px) !important;
		justify-content: center !important;
		row-gap: 3.5em !important; /* space so trunk is visible between cards */
		margin-inline: auto !important;
	}

	/* Neutralise left/right placement + desktop stagger */
	#one-automation .step,
	#one-automation .step:nth-of-type(odd),
	#one-automation .step:nth-of-type(even) {
		grid-column: 1 !important;
		transform: translateY(var(--lift)) !important; /* keep hover lift but kill stagger */
		width: 100% !important;
		min-height: auto !important;
	}

	/* Keep the “touch-to-reveal” semantics on narrow layouts */
	#one-automation .step {
		opacity: 0 !important;
	}

		#one-automation .step.is-live {
			opacity: 1 !important;
		}

	/* Re-assert the solid card look */
	#one-automation .step {
		background: #0161eb !important;
		color: #fff !important;
		border: 1px solid #023e8a !important;
		border-radius: 1rem !important;
		padding: 1rem !important;
		box-shadow: 0 18px 36px rgba(3,14,30,0.18) !important;
		isolation: isolate;
		z-index: 1;
		overflow: visible !important;
	}

		/* Banner keeps same look */
		#one-automation .step > h3 {
			background: #023e8a !important;
			color: #fff !important;
			margin: -1rem -1rem 0 !important;
			padding: 0.75rem 1rem !important;
			line-height: 1.25 !important;
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
		}

		#one-automation .step > p,
		#one-automation .step > ul,
		#one-automation .step > ol {
			color: rgba(255,255,255,0.92) !important;
		}

	/* Canvas layering (SVG behind cards) */
	#one-automation .flow .flow-canvas {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		pointer-events: none !important;
		z-index: 0 !important;
	}

	/* Trunk stroke (solid colour on narrow if no gradient defs) */
	#one-automation #flowPath {
		stroke: #0161eb !important;
		stroke-width: 3em !important; /* match thick */
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
		fill: none !important;
		opacity: 1 !important;
	}

	/* TRUE ports via CSS masks: show trunk through card edges */
	@supports (-webkit-mask: none) or (mask: none) {
		#one-automation .step {
			--portR: 1.5em; /* radius = half of 3em stroke */
			--holeH: calc(var(--portR) * 2);
			-webkit-mask: radial-gradient(circle var(--portR) at 50% -1px, transparent 98%, #000 99%) top center / 100% var(--holeH) no-repeat, radial-gradient(circle var(--portR) at 50% calc(100% + 1px), transparent 98%, #000 99%) bottom center / 100% var(--holeH) no-repeat, linear-gradient(#000, #000);
			mask: radial-gradient(circle var(--portR) at 50% -1px, transparent 98%, #000 99%) top center / 100% var(--holeH) no-repeat, radial-gradient(circle var(--portR) at 50% calc(100% + 1px), transparent 98%, #000 99%) bottom center / 100% var(--holeH) no-repeat, linear-gradient(#000, #000);
		}
			/* Optional: no bottom port on the very last card */
			#one-automation .step:last-of-type {
				-webkit-mask: radial-gradient(circle var(--portR) at 50% -1px, transparent 98%, #000 99%) top center / 100% var(--holeH) no-repeat, linear-gradient(#000, #000);
				mask: radial-gradient(circle var(--portR) at 50% -1px, transparent 98%, #000 99%) top center / 100% var(--holeH) no-repeat, linear-gradient(#000, #000);
			}
	}

	/* Fallback when mask not supported: hide pseudo “ports” entirely */
	@supports not ((-webkit-mask: none) or (mask: none)) {
		#one-automation .step::before,
		#one-automation .step::after {
			display: none !important;
			content: none !important;
		}
	}

	/* Bottom spacing so the section doesn't collide with the next */
	#one-automation {
		padding-bottom: 2em !important;
	}
}













	/* Founders section */

	#three {
		background-color: #023e8a;
	}

		#three .founders {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			gap: 3rem;
			flex-wrap: wrap;
		}

		#three .founder {
			text-align: center;
		}

			#three .founder img {
				width: 350px; /* adjust as needed */
				height: 350px; /* must match width for a perfect circle */
				border-radius: 50%;
				object-fit: cover;
				display: block;
				margin: 0 auto;
			}

			#three .founder figcaption {
				margin-top: 0.75rem;
				font-weight: 600;
				letter-spacing: 0.02em;
			}

			#three .founder .actions {
				margin-top: 0.75rem;
			}

	/* ---- Section 4 - AI agent ---- */



	/* Center the button row directly under the Quentin box,
   and add 1.5rem space between them */
	.Quentin-box + .center-below-features {
		margin: 1.5rem auto auto; /* <-- requested spacing */
	}



	/* Founder page */

	/*this is for matching the buttons to the slogo size*/
	#header {
		--slogo-h: 4rem;
	}

		#header .slogo {
			height: var(--slogo-h);
			width: auto;
			max-width: 300px;
			display: block;
			margin: 0 0 20px 0; /* keep your bottom spacing */
		}


		/* --- Kill any underline on the logo link, even if it propagates from ancestors --- */
		#header a.slogo-link,
		#header a.slogo-link * {
			/* neutralise any propagated text-decoration */
			text-decoration: none !important;
			text-decoration-line: none !important;
			text-decoration-style: solid !important;
			text-decoration-color: transparent !important;
			text-underline-offset: 0 !important;
			text-decoration-thickness: 0 !important;
		}

			@media (max-width: 736px) {
				/* Stack logo above nav and center it */
				#header {
					display: flex; /* if it's already flex, this just overrides direction */
					flex-direction: column; /* stack children vertically */
					align-items: center; /* center the logo horizontally */
				}

					/* Center the logo block itself */
					#header .slogo {
						margin: 0 auto 20px; /* centered, keep your bottom spacing */
					}
			}

			@media (max-width: 736px) {
				#header {
					padding-top: 1.5rem;
					--slogo-h: 3.5rem;
				}
			}

			#header nav a.match-slogo {
		display: inline-flex; /* flex container for the text */
		align-items: center; /* vertical centre */
		justify-content: center; /* horizontal centre */
		height: var(--slogo-h); /* same as your logo height source */
		padding: 0 0.9rem;
		line-height: 1;
		text-align: center;
		white-space: nowrap; /* optional: prevent wrapping in nav */
	}


	/* Make the nav a single row on mobile and let buttons wrap text */
	@media (max-width: 736px) {
		#header nav ul {
			display: flex;
			flex-wrap: nowrap; /* keep all three on one line */
			gap: 0.5rem;
			padding: 0;
			margin: 0;
		}

		#header nav li {
			flex: 1 1 0; /* three equal-width cells */
			min-width: 0; /* allow shrinking below intrinsic width */
			list-style: none;
		}

		#header nav a.match-slogo {
			display: flex; /* fill the li cell */
			width: 100%;
			min-width: 0;
			justify-content: center;
			align-items: center;
			/* height behaviour: at least the logo height, but can grow if text wraps */
			min-height: var(--slogo-h);
			height: auto;
			padding: 0 0.6rem;
			line-height: 1.1;
			text-align: center;
			/* allow multi-line text so the row doesn't wrap */
			white-space: normal; /* overrides your desktop nowrap */
			word-break: break-word; /* safety for long words */
		}
	}

	@media (max-width: 736px) {
		#header nav li {
			margin-block: 1rem; /* space above & below each button cell */
		}
	}


	/* Founder Linked in formatting*/
	/* Keep the icon neatly aligned to the heading text */
	#main .major {
		display: inline-flex;
		align-items: baseline; /* align with the text baseline instead of centering */
		gap: 0.5rem;
		flex-wrap: nowrap; /* keep icon on the same line */
		white-space: nowrap; /* hard-stop wrapping */
	}

	/* (optional) let it wrap on very narrow screens */
	@media (max-width: 520px) {
		#main .major {
			flex-wrap: wrap;
			white-space: normal;
		}
	}

	/* Size/spacing for the icon anchor (HTML5 UP uses ::before to render the icon) */
	#main .major .li-icon {
		line-height: 1;
		font-size: 0.5em; /* slightly smaller than the H1 text */
		border-radius: 0.4rem;
		padding: 0.15em 0.35em; /* hit area for focus/hover */
		text-decoration: none;
		outline: none;
		transition: box-shadow 180ms ease, filter 180ms ease;
	}

		/* Smooth transform for the icon glyph itself */
		#main .major .li-icon::before {
			transition: text-shadow 180ms ease, transform 180ms ease;
		}

		/* Hover/focus glow (LinkedIn blue) */
		#main .major .li-icon:hover::before,
		#main .major .li-icon:focus-visible::before {
			text-shadow: 0 0 6px rgba(0,119,181,0.9), 0 0 14px rgba(0,119,181,0.7), 0 0 24px rgba(0,119,181,0.5);
			transform: translateY(-1px);
		}

		/* Optional: visible focus ring for keyboard users */
		#main .major .li-icon:focus-visible {
			box-shadow: 0 0 0 3px rgba(0,119,181,0.35);
		}


	/* Founder 1 image formatting*/
	/* 1) Make .inner expand to wrap floated children */
	.inner.fit-media::after {
		content: "";
		display: block;
		clear: both;
	}

	/* 2) Keep images responsive inside their span wrappers */
	#main .image img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* 3) Sensible float widths + margins on wide screens */
	@media (min-width: 980px) {
		#main .image.left,
		#main .image.right {
			max-width: clamp(14rem, 38%, 28rem);
		}

		#main .image.left {
			float: left;
			margin: 0 2rem 1rem 0;
		}

		#main .image.right {
			float: right;
			margin: 0 0 1rem 2rem;
		}
	}

	/* 4) Stack on small screens to avoid crowding */
	@media (max-width: 979.98px) {
		#main .image.left,
		#main .image.right {
			float: none;
			max-width: 100%;
			margin: 1rem 0;
		}
	}





	/* Quentin Section*/
	/* Quentin — 3D elevated card with subtle #ffdb58 highlights */
	.Quentin-box,
	.quentin-box { /* alias in case of lowercase usage */
		/* Tunables */
		--qb-pad: clamp(16px, 3.5vw, 28px);
		--qb-radius: 16px;
		--qb-gold: var(--wq-gold, #ffdb58);
		--qb-blue-1: var(--wq-accent-2, #0162eb);
		--qb-blue-2: var(--wq-accent-1, #00c0fa);
		position: relative;
		border-radius: var(--qb-radius);
		overflow: hidden;
		/* Gradient border with gold glints */
		border: 1px solid transparent;
		background-image:
		/* fill layers (subtle lighting + depth) */
		radial-gradient(120% 140% at 8% 0%, rgba(255,219,88,.18), rgba(255,219,88,0) 32%), linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 45%, rgba(0,0,0,.08) 100%), linear-gradient(160deg, var(--qb-blue-2) 0%, var(--qb-blue-1) 62%, #0b2f66 100%),
		/* border layer (conic gold sheen) */
		conic-gradient(from 210deg at 50% -10%, rgba(255,219,88,.7) 0deg, rgba(255,219,88,0) 60deg, rgba(255,219,88,0) 320deg, rgba(255,219,88,.55) 360deg);
		background-origin: padding-box, padding-box, padding-box, border-box;
		background-clip: padding-box, padding-box, padding-box, border-box;
		/* Depth */
		box-shadow: 0 22px 36px rgba(1, 20, 60, .45), /* ambient */
		0 6px 12px rgba(1, 20, 60, .35), /* contact */
		0 0 0 1px rgba(255,255,255,.05) inset, /* inner micro-contrast */
		0 1px 0 rgba(255,219,88,.28) inset; /* subtle top bevel */
		/* 3D hover */
		transform: perspective(1000px) rotateX(0) rotateY(0) translateY(0);
		transform-style: preserve-3d;
		transition: transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
	}

		/* Inner lighting veil */
		.Quentin-box::before,
		.quentin-box::before {
			content: '';
			position: absolute;
			inset: 1px;
			border-radius: calc(var(--qb-radius) - 1px);
			pointer-events: none;
			background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
			mix-blend-mode: screen;
			opacity: .18;
		}

		/* Moving specular sheen (subtle, gold-tinted) */
		.Quentin-box::after,
		.quentin-box::after {
			content: '';
			position: absolute;
			inset: -10%;
			pointer-events: none;
			background: linear-gradient(75deg, rgba(255,219,88,0) 35%, rgba(255,219,88,.18) 47%, rgba(255,219,88,0) 60%);
			filter: blur(14px);
			transform: translate3d(-28%,0,0) rotate(1deg);
			transition: transform .6s ease, opacity .4s ease;
			opacity: .35;
		}

		/* Hover tilt + slightly stronger lift */
		.Quentin-box:hover,
		.quentin-box:hover {
			transform: perspective(1000px) rotateX(1.2deg) rotateY(-1.2deg) translateY(-2px);
			box-shadow: 0 28px 44px rgba(1, 20, 60, .50), 0 10px 18px rgba(1, 20, 60, .38), 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,219,88,.30) inset;
		}

			.Quentin-box:hover::after,
			.quentin-box:hover::after {
				transform: translate3d(8%,0,0) rotate(1deg);
				opacity: .45;
			}

		/* Layout */
		.Quentin-box > section,
		.quentin-box > section {
			position: relative;
			display: grid;
			grid-template-columns: minmax(160px, 240px) 1fr;
			align-items: center;
			gap: var(--qb-pad);
			padding: var(--qb-pad);
		}

		/* Image: 3D pop + soft frame */
		.Quentin-box img,
		.quentin-box img {
			grid-row: 1 / -1;
			width: 100%;
			height: auto;
			display: block;
			border-radius: 12px;
			margin: 0; /* cancel legacy margins (e.g., .mascot-margin) */
			background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.15));
			box-shadow: 0 14px 28px rgba(0,0,0,.35), 0 1px 0 rgba(255,219,88,.22) inset;
			transform: translateZ(30px);
			transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
		}

		.Quentin-box:hover img,
		.quentin-box:hover img {
			transform: translateZ(42px) rotateY(.6deg) rotateX(-.2deg);
		}

		/* Copy */
		.Quentin-box .qb-copy h3,
		.Quentin-box .qb-copy p,
		.Quentin-box .qb-copy a,
		.quentin-box .qb-copy h3,
		.quentin-box .qb-copy p,
		.quentin-box .qb-copy a {
			color: var(--wq-text, #fff);
			margin: 0;
		}

		.Quentin-box .qb-copy h3,
		.quentin-box .qb-copy h3 {
			font-weight: 700;
			margin-bottom: 0.6rem;
			position: relative;
		}

			.Quentin-box .qb-copy h3::after,
			.quentin-box .qb-copy h3::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -.35rem;
				width: clamp(80px, 50%, 160px);
				height: 3px;
				border-radius: 2px;
				background: linear-gradient(90deg, var(--qb-gold) 0%, rgba(255,219,88,0) 90%);
				opacity: .60;
			}

		.Quentin-box .qb-copy p + p,
		.quentin-box .qb-copy p + p {
			margin-top: 0.75rem;
		}

		/* Telephone link: crisp, with focus ring */
		.Quentin-box .tel-link,
		.quentin-box .tel-link {
			text-decoration: none;
			font-weight: 800;
			letter-spacing: .3px;
			text-shadow: 0 0 0 rgba(255,219,88,0);
			background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
			transition: text-shadow .25s ease, background-size .25s ease, color .25s ease;
		}

			.Quentin-box .tel-link:hover,
			.quentin-box .tel-link:hover {
				text-shadow: 0 0 18px rgba(255,219,88,.45);
				background-size: 100% 2px;
			}

		.Quentin-box:focus-within,
		.quentin-box:focus-within {
			box-shadow: 0 28px 44px rgba(1, 20, 60, .50), 0 10px 18px rgba(1, 20, 60, .38), 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,219,88,.30) inset, 0 0 0 3px rgba(255,219,88,.28); /* accessible gold focus hint */
		}

	/* Responsive: stack cleanly on small screens */
	@media (max-width: 720px) {
		.Quentin-box > section,
		.quentin-box > section {
			grid-template-columns: 1fr;
		}

		.Quentin-box img,
		.quentin-box img {
			max-width: 320px;
			justify-self: start;
		}
	}

	/* Motion safety */
	@media (prefers-reduced-motion: reduce) {
		.Quentin-box,
		.quentin-box {
			transition: box-shadow .25s ease;
			transform: none !important;
		}

			.Quentin-box:hover,
			.quentin-box:hover {
				transform: none !important;
			}

			.Quentin-box::after,
			.quentin-box::after {
				transition: none;
			}

			.Quentin-box img,
			.quentin-box img {
				transition: box-shadow .25s ease;
				transform: none !important;
			}
	}













	/*FAQs*/

	/* Reset a counter for each FAQ block */
	.content {
		counter-reset: faq;
	}

		/* Summary styled like h4, white text */
		.content details > summary {
			display: block;
			font-size: 1.25rem; /* match your h4 if different */
			line-height: 1.4;
			font-weight: 700;
			letter-spacing: 0.02em;
			margin: 0 0 0.75rem;
			cursor: pointer;
			list-style: none; /* Firefox marker */
			color: #fff; /* make the summary text white */
		}

			/* Hide WebKit default marker */
			.content details > summary::-webkit-details-marker {
				display: none;
			}

			/* Leading number (auto-incremented) */
			.content details > summary::before {
				counter-increment: faq;
				content: counter(faq) ". ";
				margin-right: 0.5rem;
			}

			/* Chevron indicator on the right */
			.content details > summary::after {
				content: "▸";
				float: right;
				transition: transform 200ms ease;
			}

		/* Rotate chevron when open */
		.content details[open] > summary::after {
			transform: rotate(90deg);
		}

		/* Accessible focus outline that matches the white text */
		.content details > summary:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
			border-radius: 0.25rem;
		}





	/*Contact form*/


	.segmented {
		border: 0;
		margin: 0;
		padding: 0;
	}

		.segmented legend {
			font-weight: 600;
			margin-bottom: .5rem;
		}

	.segmented__group {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.segmented__option {
		position: relative;
		display: inline-flex;
		align-items: center;
	}

		.segmented__option input {
			position: absolute;
			inset: 0;
			opacity: 0;
			pointer-events: none;
		}

		.segmented__option span {
			display: inline-block;
			padding: .65em 1.1em;
			border: 1px solid rgba(255,255,255,0.15); /* matches your .button border */
			border-radius: 3em; /* matches your .button radius */
			line-height: 1;
			font-weight: 600;
			letter-spacing: .02em;
			user-select: none;
			transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
		}

		.segmented__option:hover span {
			transform: translateY(-1px);
		}

		.segmented__option input:focus-visible + span {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		.segmented__option input:checked + span {
			background-color: rgba(255,255,255,0.12);
			border-color: rgba(255,255,255,0.35);
		}

		/* 1) Prevent 100%-width span + padding from overflowing */
		.segmented__option span {
			box-sizing: border-box;
		}

	/* 2) Mobile: force one row and scale text/padding to fit */
	@media (max-width: 480px) {
		.segmented__group {
			flex-wrap: nowrap; /* single row */
			gap: .35rem; /* tighter spacing on mobile */
		}

		.segmented__option {
			flex: 1 1 0; /* equal-width columns */
			min-width: 0; /* allow shrinking */
		}

			.segmented__option span {
				width: 100%;
				text-align: center;
				padding: .5em .6em; /* tighter padding to save width */
				font-size: clamp(.75rem, 2.8vw, .9rem); /* scales down on very small viewports */
				letter-spacing: .01em; /* tighten tracking */
				white-space: nowrap; /* keep each label on one line */
			}
	}
	/* Center any .actions that contains a .submit button */
	.actions:has(> li > .submit) {
		display: flex; /* ensure flex */
		justify-content: center !important;
		gap: var(--gap, 0.75rem);
	}


























	/*Fulscreen popups*/
	/* ===== Fake Zoom Overlay ===== */
	:root {
		--zoom-radius: 1rem;
		--zoom-dur: 480ms;
		--zoom-ease: cubic-bezier(.2,.7,.2,1);
		--zoom-backdrop: rgba(3, 14, 30, 0.58);
		--zoom-sheet-bg: radial-gradient(900px 480px at 100% -10%, rgba(255,255,255,0.07), transparent 60%), linear-gradient( 120deg, var(--bg-a, #0b1f4b) 0%, var(--bg-b, #023e8a) 46%, var(--bg-c, #0161eb) 100% );
	}

	/* Prevent background scroll when overlay is open */
	html.zoom-lock, body.zoom-lock {
		overflow: hidden !important;
	}

	/* Overlay root appears only while active (inserted by JS) */
	.zoom-overlay {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: grid;
		grid-template: 1fr / 1fr;
	}

	/* Backdrop layer */
	.zoom-overlay__backdrop {
		grid-area: 1 / 1;
		background: var(--zoom-backdrop);
		opacity: 0;
		transition: opacity var(--zoom-dur) ease;
	}

	/* The “sheet” that looks like your box, then grows to fullscreen */
	.zoom-overlay__sheet {
		grid-area: 1 / 1;
		background: var(--zoom-sheet-bg);
		color: inherit;
		border-radius: var(--zoom-radius);
		box-shadow: 0 20px 60px rgba(0,0,0,.35);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		/* Fullscreen size; we animate via transform from the source rect */
		width: 100vw;
		height: 100dvh;
		/* FLIP: start at --initial-transform, end at identity */
		transform: var(--initial-transform);
		transform-origin: 0 0;
		transition: transform var(--zoom-dur) var(--zoom-ease), border-radius var(--zoom-dur) var(--zoom-ease);
	}

	/* When entering: fade in backdrop, square off corners, transform to identity */
	.zoom-overlay[data-state="enter"] .zoom-overlay__backdrop {
		opacity: 1;
	}

	.zoom-overlay[data-state="enter"] .zoom-overlay__sheet {
		border-radius: 0;
		transform: none;
	}

	/* Sheet content wrapper */
	.zoom-overlay__content {
		/* Give some breathing room when fullscreen */
		padding: clamp(1rem, 2vw + 1rem, 2.5rem);
	}

	/* A small top-right toolbar inside the sheet */
	.zoom-overlay__toolbar {
		position: sticky;
		top: 0;
		display: flex;
		justify-content: flex-end;
		gap: .5rem;
		padding: .75rem;
		background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
		z-index: 1;
	}

	.zoom-close {
		all: unset; /* remove everything else */
		display: inline-grid; /* easy centering */
		place-items: center;
		inline-size: var(--zc-w, 2.25rem); /* fixed width */
		block-size: var(--zc-h, 2.25rem); /* fixed height */
		font-weight: 700; /* bold text */
		font-size: 1.5rem; /* visually larger text */
		line-height: 1; /* no extra vertical slack */
		border-radius: .75rem;
		padding: .15rem;
		background: rgba(255,255,255,.12);
		color: #fff;
		backdrop-filter: blur(6px);
	}

		.zoom-close:focus {
			outline: 2px solid #fff7;
			outline-offset: 2px;
		}

	/* Respect reduced motion preferences */
	@media (prefers-reduced-motion: reduce) {
		.zoom-overlay__backdrop,
		.zoom-overlay__sheet {
			transition: none !important;
		}
	}

	/* --- Sidebar-aware fullscreen layout for the zoom overlay --- */
	/* Define your sidebar width once (match your actual sidebar). */
	html.page-index {
		--sidebar-w: 15em
	}

	/* Always keep sheet in border-box so padding doesn't cause overflow */
	.zoom-overlay__sheet {
		box-sizing: border-box;
	}

	/* Apply only when the sidebar is visible (match your breakpoint). */
	@media (min-width: 980px) { /* or 1280px if that's where your sidebar appears */
		/* Keep the sidebar above the overlay if needed */
		/* #sidebar { z-index: 10000; } .zoom-overlay { z-index: 9999; } */

		/* Shift content away from the sidebar */
		.zoom-overlay__sheet {
			/* leave the sheet positioned at the viewport origin for FLIP correctness,
       but reserve space for the sidebar using logical padding */
			padding-inline-start: max(var(--sidebar-w), env(safe-area-inset-left));
		}

		/* Keep the sticky toolbar aligned with the visible content column */
		.zoom-overlay__toolbar {
			padding-inline-start: calc(max(var(--sidebar-w), env(safe-area-inset-left)) + 0.75rem);
		}

		/* Optional: prevent any overlay pixels (backdrop or sheet) from painting
     under the sidebar area. This is purely visual; remove if you want the
     dim to cover beneath the sidebar too. */
		.zoom-overlay__backdrop,
		.zoom-overlay__sheet {
			clip-path: inset(0 0 0 var(--sidebar-w));
		}
	}





















	/* Info */
	/* ---------- Our Integrations (self-contained) ---------- */


	/* Card sizing knobs */
	.integrations {
		--card-w: 250px;
		--card-h: 250px;
	}

	/* ---------- Sizing knobs ---------- */
	.integrations {
		--card-w: 200px;
		--card-h: 220px;
		/* logo sizing */
		--logo-h: 2.75rem; /* cap-height for brand marks */
		--logo-row-h: calc(var(--logo-h) + .75rem); /* fixed logo row height to align captions */
		/* caption alignment */
		--caption-gap: 1rem; /* space between logos and caption */
		--caption-min-h: 3.25rem; /* consistent caption block height */
		/* heading alignment */
		--h3-rows: 2; /* reserve N lines for the heading */
		--h3-lh: 1.2; /* heading line-height multiplier */
	}

	/* ---------- Logo card ---------- */
.logo-card {
	/* layout (preserved) */
	display: grid;
	grid-template-rows: var(--logo-row-h) auto;
	grid-template-columns: 1fr;
	row-gap: var(--caption-gap);
	place-items: center;
	align-content: start;
	/* sizing */
	width: 100%;
	height: var(--card-h);
	padding: 1rem;
	--r: .75rem; /* corner radius */
	border-radius: var(--r);
	/* gradient fill + gradient border (requested) */
	border: 1px solid transparent; /* required so border-box background shows */
	/* 3-D foundation */
	position: relative;
	transform: perspective(900px) translateZ(0) rotateX(0deg) rotateY(0deg);
	transform-style: preserve-3d;
	/* layered elevation: soft ambient + contact shadow + inner micro-contrast */
	box-shadow:
	/* contact shadow (close to surface) */
	0 6px 10px rgba(0,0,0,.20),
	/* ambient shadow (larger, softer) */
	0 18px 36px rgba(0,0,0,.22),
	/* faint inner edge to crispen content */
	0 0 0 1px rgba(255,255,255,.06) inset;
	/* motion/interaction */
	transition: transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s ease, filter .35s ease, background .35s ease;
	will-change: transform, box-shadow, filter;
	background: #0161eb
}

		/* top “specular” highlight for realism */
		.logo-card::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			pointer-events: none;
		}


		/* soft floor glow to anchor the card to the page (3-D cue) */
		.logo-card::after {
			content: "";
			position: absolute;
			left: 50%;
			bottom: -12px; /* just below the card */
			width: 70%;
			height: 28px;
			transform: translateX(-50%);
			border-radius: 50%;
			background: radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%);
			filter: blur(6px);
			opacity: .70;
		}

		/* Hover/keyboard focus: increase elevation + subtle tilt */
		.logo-card:is(:hover, :focus-visible) {
			transform: perspective(900px) translateY(-2px) translateZ(8px) rotateX(3deg) rotateY(-3deg);
			box-shadow: 0 10px 18px rgba(0,0,0,.22), 0 28px 54px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
		}

		/* Visible, accessible focus ring that coexists with the gradient border */
		.logo-card:focus-visible {
			outline: 2px solid rgba(1,98,235,.85);
			outline-offset: 2px;
		}

		/* Optional: lift the logo slightly on hover for added depth */
		.logo-card img {
			transition: transform .35s cubic-bezier(.2,.65,.2,1), filter .35s ease;
			transform: translateZ(0);
		}

		.logo-card:is(:hover, :focus-visible) img {
			transform: translateZ(14px) scale(1.03);
		}

	/* Respect reduced-motion preferences */
	@media (prefers-reduced-motion: reduce) {
		.logo-card,
		.logo-card img {
			transition: none;
			transform: none;
		}
	}

	/* Logos: vertically centered within the fixed logo row */
	.logo-card > img {
		grid-row: 1;
		display: block; /* avoid baseline alignment quirks */
		align-self: center;
		justify-self: center;
		max-width: 80%;
		height: auto;
		max-height: var(--logo-h);
		object-fit: contain;
		opacity: .9;
		transition: transform .2s ease, opacity .2s ease, filter .2s ease;
	}

	/* Caption: TOP-centered; h3 and p tops aligned across cards */
	.logo-card > figcaption {
		grid-row: 2;
		grid-column: 1 / -1; /* span all explicit columns */
		justify-self: stretch; /* occupy full spanned width */
		width: 100%;
		min-height: var(--caption-min-h);
		/* Top-center alignment and consistent start lines */
		display: grid;
		grid-template-rows: calc(var(--h3-rows) * var(--h3-lh) * 1em) auto; /* fixed h3 block height */
		align-items: start; /* children align to top of their grid areas */
		align-content: start; /* pack rows at the top of the caption block */
		justify-items: center; /* center horizontally */
		text-align: center;
		font-size: .95rem;
		line-height: 1.2;
		opacity: .95;
		margin: 0; /* no extra variability */
	}

		.logo-card > figcaption h3 {
			font-size: 1em; /* inherit figcaption sizing */
			line-height: var(--h3-lh);
			margin: 0 0 .25rem 0;
			/* Reserve exactly --h3-rows lines so <p> starts at same Y across cards */
			height: calc(var(--h3-rows) * var(--h3-lh) * 1em);
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: var(--h3-rows);
			align-self: start; /* belt-and-braces */
		}

		.logo-card > figcaption p {
			margin: 0;
			align-self: start;
		}

	/* ---------- Multi-image layout ---------- */
	/* Exactly TWO logos: symmetric grid with middle divider */
	.logo-card:has(> img:nth-of-type(2)):not(:has(> img:nth-of-type(3))) {
		grid-template-columns: 1fr auto 1fr; /* logo | divider | logo */
		column-gap: var(--img-gap);
		align-items: center; /* keep both logos level */
		justify-items: center;
	}

		.logo-card:has(> img:nth-of-type(2)):not(:has(> img:nth-of-type(3))) > img:first-of-type {
			grid-column: 1;
			grid-row: 1;
		}

		.logo-card:has(> img:nth-of-type(2)):not(:has(> img:nth-of-type(3))) > img:last-of-type {
			grid-column: 3;
			grid-row: 1;
		}

	/* THREE logos: even columns, level/centered */
	.logo-card:has(> img:nth-of-type(3)):not(:has(> img:nth-of-type(4))) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--img-gap);
		align-items: center;
		justify-items: center;
	}

	/* FOUR+ logos: even columns, level/centered */
	.logo-card:has(> img:nth-of-type(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--img-gap);
		align-items: center;
		justify-items: center;
	}

	/* Hover affordance on capable devices */
	@media (hover: hover) and (pointer: fine) {
		.logo-card:hover img {
			transform: translateY(-1px) scale(1.02);
			filter: none;
			opacity: 1;
		}
	}

	/* Motion + mobile tuning */
	@media (prefers-reduced-motion: reduce) {
		.logo-strip img {
			transition: none;
		}
	}

	@media (max-width: 480px) {
		.integrations {
			--logo-h: 2.2rem;
			--logo-row-h: calc(var(--logo-h) + .6rem);
			--card-w: 100%;
			--card-h: 180px;
			--caption-min-h: 3rem;
		}
	}


		/* The grid item that should stretch from its auto start to the end of the row */
		.logo-strip li.contact-us {
			grid-column: auto / -1; /* ← fills the remaining columns on this row */
			align-self: stretch;
			justify-self: stretch;
			min-width: 0;
		}


	/* Fixed-height, width-flexible container + container queries enabled */
	.contact-us-card {
		display: grid;
		place-items: center;
		text-align: center;
		width: 100%;
		height: var(--contact-h, var(--card-h)); /* constant vertical size */
		padding: clamp(1rem, 1.5vw, 1.25rem);
		border-radius: .75rem;
		background: #023e8a;
		/* Let child text scale by available inline size */
		container-type: inline-size; /* enables cqi units below */
		min-width: 0; /* allow content to shrink */
		min-height: 0;
	}

		/* Caption layout; keep content centered inside the fixed-height box */
		.contact-us-card figcaption {
			display: grid;
			align-content: center; /* vertical centering within fixed height */
			justify-items: center;
			gap: .6rem;
			margin: 0;
			min-width: 0;
		}

			.contact-us-card figcaption h3,
			.contact-us-card figcaption p {
				margin: 0;
				text-wrap: balance;
				overflow-wrap: anywhere;
				hyphens: auto;
				/* Fallback fluid sizing (for browsers without container queries) */
				font-size: clamp(0.9rem, 0.85rem + 0.5vw, 1.1rem);
				line-height: 1.2;
			}

	/* Prefer container-query scaling (takes precedence in modern browsers) */
	@container (inline-size > 0) {
		.contact-us-card figcaption h3 {
			/* Scales with the card’s width, but bounded for readability */
			font-size: clamp(1rem, 2.8cqi, 1.35rem);
			line-height: 1.15;
		}

		.contact-us-card figcaption p {
			font-size: clamp(0.9rem, 2.2cqi, 1.1rem);
			line-height: 1.2;
		}
	}

	/* If you need spacing above relay button without changing its styling: */
	.contact-us-card .actions {
		margin-top: .25rem;
	}

	/* Keep a constant vertical size; width is free to expand */
	.contact-us-card,
	.Contact-us-card {
		width: 100%;
		height: var(--contact-h, var(--card-h)); /* fixed vertical size */
	}


	/* Mobile row span (if you use a mobile override) */
	@media (max-width: 480px) {
		.logo-strip > li.contact-us {
			grid-column: 1 / -1;
		}
	}




	/*integration cards marquee*/
	/* Tokens (falls back to sensible defaults if your vars exist elsewhere) */
	:root {
		--gap: clamp(12px, 1.2vw, 18px);
		--card-w: clamp(230px, 28vw, 300px);
		--logo-h: 44px;
		--radius: 12px;
		--pad: 16px;
		--wq-card-bg: rgba(255,255,255,0.03);
		--wq-card-border: rgba(255,255,255,0.15);
		--wq-text: #fff;
		--wq-card-shadow: 0 6px 10px rgba(0,0,0,.20), 0 18px 36px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
	}

	/* Viewport for the marquee */
	.integrations-marquee {
		position: relative;
		overflow: hidden;
		padding-block: 6px; /* tiny breathing room to avoid clip on focus outline */
		/* optional soft edge fade; drop if unwanted */
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}

	/* The animated strip = two tracks side-by-side */
	.marquee-content {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		will-change: transform;
	}

	/* A single track of cards */
	.marquee-track {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--gap);
		list-style: none;
		margin: 0;
		padding: 0;
		padding-inline-end: var(--gap);
	}

		/* Each card occupies a fixed inline size so the loop is stable */
		.marquee-track > li {
			flex: 0 0 var(--card-w);
		}

	/* Card shell: preserves your internal formatting (h3 + p etc.) */
	.logo-card {
		height: 100%;
		padding: var(--pad);
		border-radius: var(--radius);
		outline: 1px solid var(--wq-card-border);
		color: var(--wq-text);
		display: grid;
		grid-template-rows: auto 1fr;
		row-gap: 12px;
		text-align: center;
	}

		/* Put multiple brand marks on one row without altering your HTML */
		.logo-card > img {
			display: inline-block;
			vertical-align: middle;
			max-height: var(--logo-h);
			width: auto;
			object-fit: contain;
			margin: 0 8px 0 0;
			filter: contrast(1.05) brightness(.95);
			opacity: .9;
		}

			.logo-card > img:last-of-type {
				margin-right: 0;
			}

		.logo-card figcaption {
			margin: 0;
		}

			.logo-card figcaption h3 {
				margin: 0 0 4px 0;
				font-size: 1rem;
				line-height: 1.2;
			}

			.logo-card figcaption p {
				margin: 0;
				font-size: .95rem;
				line-height: 1.35;
			}


	/* Accessibility: if user prefers reduced motion, just stop the animation */
	@media (prefers-reduced-motion: reduce) {
		.marquee-content {
			transform: none !important;
		}
	}

	/* Ensure flex items never expand past the fixed var(--card-w) on mobile */
	.marquee-track > li {
		min-width: 0; /* allow contents to shrink inside the fixed slot */
		width: var(--card-w); /* explicit width to match flex-basis */
		flex: 0 0 var(--card-w);
	}

	/* Prevent grid children inside the card from forcing overflow */
	.logo-card {
		min-width: 0; /* key on iOS: let grid shrink below min-content */
		contain: layout; /* isolate layout to avoid transform + reflow artifacts */
	}

	.marquee-track {
		gap: var(--gap);
		padding-inline-end: var(--gap);
	}


	.marquee-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 14px;
		/* dots are now interactive */
		pointer-events: auto;
	}

		.marquee-dots .marquee-dot {
			/* reset button look */
			-webkit-appearance: none;
			appearance: none;
			border: 0;
			background: rgba(255,255,255,.28);
			width: 10px;
			height: 10px;
			border-radius: 50%;
			padding: 0;
			margin: 0;
			opacity: .7;
			cursor: pointer;
			transform: scale(1);
			transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
		}

			.marquee-dots .marquee-dot.is-active {
				background: var(--wq-accent-2, #0162eb);
				opacity: 1;
				transform: scale(1.55);
			}

			/* accessible focus */
			.marquee-dots .marquee-dot:focus-visible {
				outline: 2px solid var(--wq-accent-2, #0162eb);
				outline-offset: 2px;
				opacity: 1;
			}



















	/* FACT CARDS*/
	/* --- Tokens (fall back to your existing ones if present) --- */
	:root {
		--wq-accent-1: #00c0fa;
		--wq-accent-2: #0162eb;
		--wq-card-bg: rgba(255,255,255,0.03);
		--wq-card-border: rgba(255,255,255,0.15);
		--wq-text: #ffffff;
		--wq-muted: rgba(255,255,255,0.78);
	}

	/* Visually hidden for headings kept for a11y */
	.visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		border: 0;
	}

	/* Meta updated stamp */
	.evidence-updated {
		margin: .4rem 0 0;
		color: var(--wq-muted);
		font-size: .95rem;
	}

	/* Card */
	/* Evidence grid = same layout rhythm as .wq-feature-grid */
	.evidence-grid {
		--gap: clamp(.8rem, 2vw, 1.25rem);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
		gap: var(--gap);
		align-items: stretch;
		margin-bottom: calc(var(--gap) * 2);
		margin: 1rem 0 0 0;
		list-style: none;
		padding: 0;
	}

	/* Evidence card container = clone of .logo-card.wq-feature (visuals only) */
	.evidence-card {
		position: relative;
		padding: 1.1rem 1.1rem 1.2rem;
		border-radius: 18px;
		border: 1px solid transparent; /* enables gradient border */
		background: linear-gradient(var(--wq-card-bg), var(--wq-card-bg)) padding-box, linear-gradient(135deg, rgba(0,192,250,.28), rgba(1,98,235,.28)) border-box;
		box-shadow: 0 6px 18px -10px rgba(0,0,0,.6);
		transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
		color: var(--wq-text);
		isolation: isolate; /* keeps glow under control */
		overflow: hidden;
	}

		/* Hover / focus visuals (text styles remain unchanged) */
		.evidence-card:hover,
		.evidence-card:focus-within {
			transform: translateY(-2px);
			box-shadow: 0 12px 28px -12px rgba(1,98,235,.45), 0 2px 10px -6px rgba(0,192,250,.35);
			background: linear-gradient(var(--wq-card-bg), var(--wq-card-bg)) padding-box, linear-gradient(135deg, rgba(0,192,250,.45), rgba(1,98,235,.45)) border-box;
		}

		/* A11y focus ring */
		.evidence-card:focus-within {
			outline: 2px solid color-mix(in oklab, var(--wq-accent-2) 70%, white);
			outline-offset: 3px;
		}

	.evidence-head {
		margin: calc(-1.1rem) calc(-1.1rem) .6rem;
		padding: .85rem 1.1rem;
		background: #023e8a; /* #1c3d58 banner */
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
	}

	.evidence-kicker {
		margin: 0 0 .25rem 0;
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--wq-muted);
		font-size: .95rem;
	}

	.evidence-claim {
		margin: 0;
		line-height: 1.15;
		white-space: normal !important; /* override any global nowrap */
		overflow-wrap: anywhere; /* robust wrapping, even for long tokens */
	}

		.evidence-claim .num {
			font-size: 2.5em;
			font-weight: 800;
			margin-right: 0;
		}

	/* CTA, unchanged — ensure the full-width card spans the grid like before */
	.evidence-cta-card {
		grid-column: 1 / -1;
	}

.wq-note {
	display: block;
	font-size: .78rem;
	line-height: 1.3;
	opacity: .8;
}



/*--------------- NEW FACT CARDS infographics--------------------------*/

/* Green emphasis for the phrase “captures missed calls” */
.wq-green {
	color: var(--wq-green, #22c55e);
	font-weight: 600;
}


/* ---- Odds Ratio Graphic ---- */
.wq-or {
	--wq-green: var(--wq-accent-success, #16a34a);
	--wq-muted: rgba(255,255,255,0.18);
	--wq-text: var(--wq-text, #eaf0ff);
	--or: 7; /* set inline; controls the ratio */
	/* Reserve a tiny gutter so end-caps never clip without changing outer card geometry */
	--cap-gutter: 2ch;
	display: grid;
	gap: .45rem;
	width: 100%;
	max-width: 520px;
	padding-right: var(--cap-gutter);
	margin-top: .5rem; /* slightly more space above the infographic */
}

.wq-or__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wq-text);
}

.wq-or__rows {
	position: relative;
	display: grid;
	grid-template-columns: max-content 1fr; /* one shared label column, one shared bar column */
	align-items: center;
	row-gap: .5rem; /* vertical spacing between rows */
	column-gap: .6rem; /* space between label and bar */
}


.wq-or__row {
	display: contents; /* lets each label+bar pair use the shared columns above */
}

.wq-or__label {
	font-size: .9rem;
	opacity: .85;
	white-space: nowrap;
	text-align: right; /* right-align text inside the label column */
	justify-self: end; /* push the label up against the bar column */
}

/* Bars share a common scale: total width corresponds to (1 + OR) units. */
.wq-or__bar {
	--unit: 1; /* overridden below */
	position: relative; /* positioning context for end-cap */
	overflow: visible; /* allow end-cap to sit just beyond the edge */
	height: .6rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wq-green), var(--wq-green));
	/* width = unit / (1+OR) of the container, capped at 100% */
	width: calc((var(--unit) / (var(--or) + 1)) * 100%);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 14px rgba(0,0,0,0.25);
	justify-self: start; /* start at the same x-position across rows */
}

.wq-or__bar--baseline {
	--unit: 1;
	background: linear-gradient(90deg, var(--wq-muted), var(--wq-muted));
}

.wq-or__bar--variant {
	--unit: calc(var(--or));
	background: linear-gradient(90deg, var(--wq-green), var(--wq-green));
}

/* End-cap labels anchored to each bar’s right edge (e.g., ×1, ×7) */
.wq-or__cap {
	position: absolute;
	left: 100%; /* pin to bar end */
	top: 50%;
	transform: translateY(-50%);
	margin-left: .35rem; /* small gap from bar edge */
	font-weight: 700;
	font-size: .82rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--wq-text, #eaf0ff);
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}



/* Tunables */
.evidence-graphic {
	--icon-gap: clamp(0.06rem, 0.45vw, 0.16rem);
	width: 100%;
	margin: .25em 0 .5rem;
	/* allow the shadow to render outside */
	overflow: visible;
}

	/* Wrapper: apply bleed once */
	.evidence-graphic .infogrid {
		/* assuming you have a custom property for bleed: --bleed */
		width: calc(100% + var(--bleed, 0px) * 2);
		margin-inline: calc(var(--bleed, 0px) * -1);
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		gap: var(--icon-gap);
	}

		/* Graphics normalize + ring-following shadow */
		.evidence-graphic .infogrid > :is(img, picture, svg) {
			display: block;
			width: 100%;
			height: auto;
			/* Shadow that follows the non-transparent pixels */
			filter:
			/* soft “edge highlight” analogue of
		   0 0 0 1px rgba(255,255,255,0.08) inset */
			drop-shadow(0 0 0 rgba(255,255,255,0.08))
			/* outer lift: 0 6px 14px rgba(0,0,0,0.25) */
			drop-shadow(0 6px 14px rgba(0,0,0,0.25));
		}

@supports selector(:has(*)) {
	/* Single item: no grid (lighter layout, same full-width strip) */
	.evidence-graphic .infogrid {
		display: block;
	}
		/* Multi-item: switch grid on demand */
		.evidence-graphic .infogrid:has(> :nth-child(2)) {
			display: grid;
			grid-template-columns: repeat(9, 1fr);
			gap: var(--icon-gap);
		}
}




/* Head remains stacked; a two-column grid aligns each claim with its pie */

/* Donut pie — GREEN; orientation reverted (no fixed “from …” angle) */
/* Donut pie — make it a full pie (no hole) */
.evidence-pie {
	--size: 100px;
	--wq-green: #22c55e;
	--fg: var(--wq-green);
	--bg: rgba(255,255,255,0.18);
	--hole: var(--wq-card-bg, rgba(255,255,255,0.03)); /* now unused, can keep or delete */
	--ring: rgba(255,255,255,0.06);
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	/* REPLACE the background line with the one below */
	background: conic-gradient(var(--fg) calc(var(--pct) * 1%), var(--bg) 0);
	box-shadow:
	/* coloured ring edges (current behaviour) */
	0 0 0 1px var(--ring), inset 0 0 0 0.5px var(--ring),
	/* SAME shading as your card: soft inner highlight + drop shadow */
	0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 14px rgba(0,0,0,0.25);
	justify-self: end;
}


/* Responsive: keep layout, just scale pies a bit */
@media (max-width: 736px) {
	.evidence-pie {
		--size: 64px;
	}
}

/* Two-column pairing: claim | pie */
.evidence-head--rows .evidence-grid {
	display: grid;
	grid-template-columns: 1fr auto; /* wide column for text, narrow for chart */
	column-gap: 1.5rem;
	row-gap: var(--pie-gap, 1.5rem);
	align-items: start;
	margin-top: 0;
	/* Flip the visual inline direction so the second child (pie)
	   lands on the left, first child (claim) on the right */
	direction: rtl;
}

/* Restore normal text direction inside children */
.evidence-head--rows .evidence-claim,
.evidence-head--rows .evidence-pie {
	align-self: start;
	direction: ltr;
}

/* (Optional hard pin if something else overrides it) */
.evidence-head--rows .evidence-claim,
.evidence-head--rows .evidence-pie {
	align-self: start;
}






	/* Contact Us*/
	/* ===== Contact section (self-contained, no global overrides) ===== */
	.wq-contact {
		--bg-a: #0b1f4b; /* deep navy */
		--bg-b: #023e8a; /* brand deep blue */
		--bg-c: #0161eb; /* brand cobalt */
		--ink: #0B1220; /* dark text inside white card */
		--muted: #6b7280; /* subtle helper text */
		--ring: rgba(1, 97, 235, 0.18);
		color: #fff;
		background: linear-gradient(120deg, var(--bg-a) 0%, var(--bg-b) 46%, var(--bg-c) 100%);
		padding: clamp(3rem, 6vw, 6rem) 0;
	}

		/* Contact form label colour */
		.wq-contact .wq-contact__form .wq-field > label {
			color: #023e8a;
		}

	.wq-contact__inner {
		width: min(1120px, 100% - 6vw);
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1.1fr minmax(460px, 560px);
		gap: clamp(2rem, 5vw, 6rem);
		align-items: start;
	}

	/* Left copy */
	.wq-contact__eyebrow {
		letter-spacing: 0.12em;
		text-transform: uppercase;
		opacity: 0.85;
		margin: 0 0 1rem 0;
		font-weight: 700;
	}

	.wq-contact__eyebrow {
		position: relative;
		display: inline-block;
		padding-bottom: .35rem;
	}

		.wq-contact__eyebrow::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -0.1px;
			width: 100%;
			height: 3px; /* subtle thickness */
			border-radius: 999px;
			background-image: linear-gradient(to right, #0162eb, #00c0fa);
			opacity: .85; /* subtle look */
			transition: none; /* ensure no hover animation */
		}


	/* If you want it always visible instead of on hover, use this line instead: */
	/* .wq-contact__eyebrow::after{ max-width:100%; } */


	.wq-contact__headline {
		margin: 2em, 0,0 0;
		line-height: 1.05;
		font-size: clamp(2.2rem, 3.8vw, 3.1rem);
		font-weight: 800;
	}

	.wq-contact__subheadline {
		margin: 0rem 0 0 0;
		line-height: 1.1;
		font-size: clamp(1.6rem, 2.6vw, 2.2rem);
		font-weight: 800;
	}

	.wq-contact__kicker {
		margin-top: 1.1rem;
		font-size: 1rem;
		opacity: .9;
	}

	/* Card/form */
	.wq-contact__form {
		background: #ffffff;
		color: var(--ink);
		border-radius: 14px;
		padding: clamp(1.25rem, 3vw, 2rem);
		box-shadow: 0 10px 20px rgba(0,0,0,.18), 0 30px 60px rgba(0,0,0,.22);
	}

	.wq-form-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 1.25rem;
	}

	.wq-field {
		display: flex;
		flex-direction: column;
	}

		.wq-field.full {
			grid-column: 1 / -1;
		}

	.wq-contact__form label {
		font-size: .92rem;
		font-weight: 600;
		margin: 0 0 .35rem 0;
	}

	.wq-contact__form .req {
		color: #e11d48;
		font-weight: 700;
	}

	/* Inputs */
	.wq-contact__form input[type="text"],
	.wq-contact__form input[type="email"],
	.wq-contact__form input[type="url"],
	.wq-contact__form select,
	.wq-contact__form textarea {
		display: block;
		width: 100%;
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		background: #fff;
		color: var(--ink);
		padding: .7rem .85rem;
		font-size: 1rem;
		line-height: 1.25;
	}

	.wq-contact__form select {
		height: 44px;
	}

	.wq-contact__form input[type="text"],
	.wq-contact__form input[type="email"],
	.wq-contact__form input[type="url"] {
		height: 44px;
	}

	.wq-contact__form textarea {
		min-height: 120px;
		resize: vertical;
	}

		.wq-contact__form input:focus,
		.wq-contact__form select:focus,
		.wq-contact__form textarea:focus {
			outline: none;
			border-color: #0161eb;
			box-shadow: 0 0 0 3px var(--ring);
		}

	/* Strong, scoped override placed AFTER your theme CSS */
	.wq-field.full textarea#message {
		height: auto; /* cancel any fixed height */
		min-height: 50px; /* cancel oversized mins */
		max-height: 350px; /* the cap you want */
		overflow-y: auto; /* scroll instead of growing */
		resize: vertical; /* let users resize, but capped by max-height */
		box-sizing: border-box;
	}



	/* Hidden by default; reveal via [hidden] toggle */
	.wq-field--other[hidden] {
		display: none !important;
	}

	/* If your grid uses narrower columns, allow the “Where?” input to fit well */
	.wq-field--other input {
		width: 100%;
	}


	/* Helper/legal + actions */
	.wq-legal {
		margin: .75rem 0 1rem 0;
		font-size: .9rem;
		color: var(--muted);
	}

		.wq-legal a {
			color: #0161eb;
			text-decoration: underline;
		}

	.wq-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: .25rem;
	}

	.wq-recaptcha {
		width: 304px;
		height: 78px;
		border: 1px solid #d1d5db;
		border-radius: 6px;
		background: #f9fafb;
		font-size: .78rem;
		color: #6b7280;
		display: grid;
		place-items: center;
	}

	/* Button */
	.wq-btn {
		background-color: #0161eb; /* filled blue */
		border-color: #0161eb !important; /* keep same 1px border but blue */
		color: #fff !important; /* ensure white text */
	}

		.wq-btn:hover {
			filter: brightness(1.05);
		}

		.wq-btn:active {
			transform: translateY(1px);
		}

	.wq-status {
		margin-top: .75rem;
		font-size: .9rem;
	}

	/* Anti-bot input */
	.wq-honey {
		display: none !important;
	}

.wq-contact__form.was-validated .wq-field :is(input, select, textarea):invalid {
	outline: 2px solid #e63946;
	outline-offset: 2px;
}

	/* Responsive */
	@media (max-width: 980px) {
		.wq-contact__inner {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.wq-actions {
			flex-direction: column;
			align-items: stretch;
		}

		.wq-recaptcha {
			width: 100%;
			height: 84px;
		}
	}



















/* FOOTER — compact, non-redundant */
.wq-footer {
	--wq-gap: clamp(1rem, 2vw, 1.5rem);
	color: var(--wq-footer-text);
}

	.wq-footer .inner {
		display: grid;
		grid-template-columns: minmax(260px, 1.2fr) /* brand */
		minmax(220px, 1fr) /* contacts */
		minmax(260px, 1.3fr); /* nav */
		gap: calc(var(--wq-gap) * 2) var(--wq-gap);
		padding-block: 2.25rem;
	}

/* Brand */
.wq-footer__logo img {
	display: block;
	max-width: 210px;
	height: auto;
	margin: 0 0 1rem;
}

.wq-footer__blurb {
	color: var(--wq-footer-muted);
	margin: 0 0 1rem;
	line-height: 1.55;
}

/* Contact stack (Social / Email / Phone / Address) – own column now */
.wq-footer__contacts {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border-top: none;
}

.wq-footer__block {
	margin: 0;
}

.wq-footer__contacts .wq-footer__block + .wq-footer__block {
	border-top: 1px solid rgba(255,255,255,.18);
	margin-top: .75rem;
	padding-top: .75rem;
}

.wq-footer__brand h3,
.wq-footer__contacts h3 {
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	margin: 0 0 .45rem;
}

.wq-footer__social {
	display: flex;
	gap: .85rem;
	list-style: none;
	padding: 0;
	margin: .50rem 0 0;
}

	.wq-footer__social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 999px;
		background: rgba(255,255,255,.08);
	}

.wq-address {
	font-style: normal;
	line-height: 1.55;
}

/* Single-column Link nav (3rd column) */
.wq-footer__nav {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

	.wq-footer__nav h3 {
		font-size: .9rem;
		font-weight: 700;
		letter-spacing: .02em;
		color: #fff;
		margin: .35rem 0 .25rem;
	}

		.wq-footer__nav h3:first-of-type {
			margin-top: 0;
		}

	.wq-footer__nav ul {
		list-style: none;
		margin: 0 0 .35rem;
		padding: 0;
	}

	.wq-footer__nav li {
		margin: .2rem 0;
	}

/* Meta (Trusted by / Verified by side-by-side; images underneath) */
.wq-footer__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wq-gap);
	padding-top: .75rem;
	border-top: 1px solid rgba(255,255,255,.12);
}

	.wq-footer__meta .wq-label {
		display: inline-block;
		font-size: .85rem;
		font-weight: 700;
		color: var(--wq-footer-muted);
		margin-bottom: .5rem;
	}

	.wq-footer__meta .wq-logos,
	.wq-footer__meta .wq-badges {
		display: flex;
		align-items: center;
		gap: 1rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.wq-footer__meta img {
		height: 5rem;
		width: auto;
		opacity: .9;
	}

/* Bottom line */
.wq-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .95rem;
	color: var(--wq-footer-muted);
}

/* Responsive */
@media (max-width: 1100px) {
	.wq-footer .inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Let nav drop onto its own row under brand/contacts */
	.wq-footer__nav {
		margin-top: .5rem;
	}
}

@media (max-width: 820px) {
	.wq-footer .inner {
		grid-template-columns: 1fr;
	}

	.wq-footer__meta {
		grid-template-columns: 1fr; /* stack trust/verify on small screens */
	}

	.wq-footer__social a {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 520px) {
	.wq-footer__legal {
		flex-direction: column;
		gap: .35rem;
		text-align: center;
	}
}











/* ---- Base card (no-JS and JS final state) – mirrors logo-card ---- */
body.blog .features article {
	/* logo-card variables */
	--logo-row-h: auto;
	--caption-gap: 0.75rem;
	--card-h: auto;
	--r: 0.75rem;
	/* layout */
	display: grid;
	/* explicit footer row for the actions */
	grid-template-rows: var(--logo-row-h) minmax(0, 1fr) auto;
	grid-template-columns: 1fr;
	row-gap: var(--caption-gap);
	place-items: stretch;
	align-content: start;
	/* sizing */
	width: 100%;
	height: var(--card-h);
	padding: 1.25rem 1.25rem 1.4rem;
	border-radius: var(--r);
	/* gradient fill + gradient border (logo-card style) */
	border: 1px solid transparent;
	background: radial-gradient(900px 480px at 100% -10%, rgba(255, 255, 255, 0.035), transparent 62%), linear-gradient(120deg, var(--bg-a, #001028) 0%, var(--bg-b, #01285a) 44%, var(--bg-c, #0161eb) 100%);
	/* 3-D foundation (same as logo-card) */
	position: relative;
	transform: perspective(900px) translateZ(0) rotateX(0deg) rotateY(0deg) translateY(10px);
	transform-style: preserve-3d;
	/* layered elevation: ambient + contact + inner edge */
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.20), 0 18px 36px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	/* motion/interaction */
	opacity: 0; /* hidden by default; JS will reveal in sequence */
	transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.2, 0.65, 0.2, 1), box-shadow 0.35s ease, filter 0.35s ease, background 0.35s ease;
	will-change: transform, box-shadow, filter, opacity;
	overflow: hidden;
}

	/* Final, visible state applied by JS */
	body.blog .features article.wq-card-visible {
		opacity: 1;
		transform: perspective(900px) translateZ(0) rotateX(0deg) rotateY(0deg) translateY(0);
	}