body.responsive
{
	overflow: visible;
}

.site-top
{
	position: sticky;
	top: 0px;
	z-index: 1001;
	background: white;
}

.site-top .header-fixed
{
	position: relative;
	top: auto;
}

.site-top .header-fixed.with-shadow
{
	border-bottom: 0px;
}

.page-scrolled .site-top .header-fixed
{
	box-shadow: inset 0px -1px 0px #f0f0f0;
}

.maintenance
{
	display: none;
	padding: 10px 0px;
	background: #fffbc8;
	color: #666;
	text-align: center;
	font-size: 16px;
	line-height: 30px;
	cursor: pointer;
}

.maintenance.shown
{
	display: block;
}

.maintenance:hover
{
	text-decoration: underline;
}

.maintenance .content
{
	margin-top: 0px;
	margin-bottom: 0px;
}


.header .page-label
{
	display: inline-block;
	visibility: hidden;
	pointer-events: none;
	position: relative;
	top: 2px;
	vertical-align: top;
	margin-left: 8px;
	padding: 4px 10px 6px;
	border-radius: 5px;
	color: #0080e0;
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
	text-decoration: none;
}

.page-scrolled .header .page-label
{
	visibility: visible;
	pointer-events: auto;
}

.header .page-label:hover
{
	background: #f0f0f0;
}

.header .page-label:active
{
	background: #d0d0d0;
}


@media (max-width: 380px)
{
	.header .page-label
	{
		margin-left: 0px;
		padding-left: 6px;
		padding-right: 6px;
		font-size: 18px;
	}
}

.site-top .button,
.site-top .buttons span,
.responsive .button,
.updates-page .item .link
{
	border-radius: 6px;
}

@media (max-width: 480px)
{
	.header .page-label
	{
		box-sizing: border-box;
		max-width: calc(100% - 195px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.contact-page .header .page-label
	{
		font-size: 18px;
	}
}

.page-intro,
.page-cta
{
	background: linear-gradient(180deg, #f4f8fc 0%, #edf2f8 100%);
}

.page-intro .content
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 24px;
	padding-bottom: 20px;
}

.page-intro .intro-heading
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.page-intro .intro-copy
{
	min-width: 0px;
}

.page-intro .title
{
	margin: 0px;
}

.page-intro .hero .description
{
	margin: 12px 0px 0px;
}

.responsive .page-intro .title,
.responsive .page-intro .description
{
	text-align: left;
}

/*
 * Only small pieces of each drawing move. Lights, sparks, puffs and glows show only while
 * things move, so at rest, and with reduced motion, each drawing looks exactly as drawn.
 */
.page-intro .intro-illustration
{
	position: relative;
	flex-shrink: 0;
	height: 176px;
	margin: -20px 0px -12px;
	pointer-events: none;
}

.page-intro .intro-illustration .art-base
{
	display: block;
	width: auto;
	height: 100%;
}

.page-intro .intro-illustration .art-piece,
.page-intro .intro-illustration .art-spot
{
	display: block;
	position: absolute;
}

.page-intro .intro-illustration .art-piece
{
	height: auto;
}

.page-intro .intro-illustration .art-spot
{
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: 0;
}

.page-intro .intro-illustration .art-overlay
{
	opacity: 0;
}

.page-intro .rocket-flame
{
	left: 9.06%;
	top: 47.44%;
	width: 36.57%;
	transform-origin: 93% 18%;
}

.page-intro .rocket-puff
{
	left: 13.67%;
	top: 81.25%;
	width: 4.45%;
	background: radial-gradient(circle, rgba(246, 247, 249, 0.95) 0 34%, rgba(214, 220, 228, 0.8) 56%, rgba(214, 220, 228, 0) 72%);
}

.page-intro .maintenance-screwdriver
{
	left: 79.62%;
	top: 48.58%;
	width: 7.17%;
	transform-origin: 63% 81%;
}

.page-intro .maintenance-hand
{
	left: 10.75%;
	top: 51.99%;
	width: 8.49%;
}

.page-intro .maintenance-flash
{
	left: 40.75%;
	top: 20.17%;
	width: 6.04%;
	background: radial-gradient(circle, #fffbe0 0 20%, #ffd23d 40%, rgba(255, 120, 40, 0.5) 60%, rgba(255, 120, 40, 0) 72%);
}

.page-intro .maintenance-spark
{
	--dx: 10px;
	--dy: -9px;
	left: 43.02%;
	top: 23.58%;
	width: 1.51%;
	background: radial-gradient(circle, #fff7c0 0 30%, #ffb020 60%, rgba(255, 176, 32, 0) 72%);
}

.page-intro .maintenance-spark.spark-2
{
	--dx: 14px;
	--dy: 1px;
}

.page-intro .maintenance-spark.spark-3
{
	--dx: 5px;
	--dy: -14px;
}

.page-intro .contact-plane
{
	left: 4.90%;
	top: 12.50%;
	width: 26.01%;
	transform-origin: 63% 89%;
}

.page-intro .contact-light
{
	left: 35.12%;
	top: 56.70%;
	width: 4.69%;
	background: radial-gradient(circle, #fff3c4 0 22%, #ffc83d 42%, rgba(255, 176, 32, 0.45) 60%, rgba(255, 176, 32, 0) 72%);
}

.page-intro .intro-illustration .contact-glow
{
	left: 36.89%;
	top: 21.88%;
	width: 31.98%;
	height: 31.25%;
	aspect-ratio: auto;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7) 45%, rgba(140, 200, 255, 0.45) 75%, rgba(140, 200, 255, 0));
}

@media (prefers-reduced-motion: no-preference)
{
	.page-intro .rocket-flame
	{
		animation: art-flicker 1.4s ease-in-out infinite;
	}

	.page-intro .rocket-puff
	{
		animation: art-puff 2.4s ease-out infinite;
	}

	.page-intro .rocket-puff.puff-2
	{
		animation-delay: -0.8s;
	}

	.page-intro .rocket-puff.puff-3
	{
		animation-delay: -1.6s;
	}

	.page-intro .maintenance-screwdriver
	{
		animation: art-twist 2.8s ease-in-out infinite;
	}

	.page-intro .maintenance-hand
	{
		animation: art-tremble 3.2s linear infinite;
	}

	.page-intro .maintenance-flash
	{
		animation: art-flash 1.6s linear infinite;
	}

	.page-intro .maintenance-spark
	{
		animation: art-spark 1.8s ease-out infinite;
	}

	.page-intro .maintenance-spark.spark-2
	{
		animation-delay: -0.6s;
	}

	.page-intro .maintenance-spark.spark-3
	{
		animation-delay: -1.2s;
	}

	.page-intro .contact-plane
	{
		animation: art-glide 4s ease-in-out infinite;
	}

	.page-intro .contact-light
	{
		animation: art-pulse 2.4s ease-in-out infinite;
	}

	.page-intro .contact-glow
	{
		animation: art-glow 4s ease-in-out infinite;
	}
}

@keyframes art-flicker
{
	0%, 100% {
		opacity: 0.15;
		transform: scale(0.99);
	}
	18% {
		opacity: 0.6;
		transform: scale(1.04);
	}
	34% {
		opacity: 0.3;
		transform: scale(1.01);
	}
	52% {
		opacity: 0.7;
		transform: scale(1.06);
	}
	70% {
		opacity: 0.25;
		transform: scale(1.02);
	}
	86% {
		opacity: 0.55;
		transform: scale(1.04);
	}
}

@keyframes art-puff
{
	0% {
		opacity: 0;
		transform: translate(0px, 0px) scale(0.4);
	}
	15% {
		opacity: 0.85;
	}
	100% {
		opacity: 0;
		transform: translate(-24px, 6px) scale(1.6);
	}
}

@keyframes art-twist
{
	0%, 50%, 100% {
		transform: rotate(0deg);
	}
	12% {
		transform: rotate(-9deg);
	}
	25% {
		transform: rotate(0deg);
	}
	37% {
		transform: rotate(-9deg);
	}
}

@keyframes art-tremble
{
	0%, 58%, 78%, 100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
	62% {
		transform: translate(-1px, 0px) rotate(-4deg);
	}
	66% {
		transform: translate(1px, 1px) rotate(3deg);
	}
	70% {
		transform: translate(-1px, 0px) rotate(-3deg);
	}
	74% {
		transform: translate(1px, 0px) rotate(2deg);
	}
}

@keyframes art-flash
{
	0%, 100% {
		opacity: 0.2;
		transform: scale(0.8);
	}
	12% {
		opacity: 1;
		transform: scale(1.15);
	}
	24% {
		opacity: 0.35;
		transform: scale(0.9);
	}
	40% {
		opacity: 0.9;
		transform: scale(1.05);
	}
	55% {
		opacity: 0.15;
		transform: scale(0.85);
	}
	70% {
		opacity: 1;
		transform: scale(1.2);
	}
	85% {
		opacity: 0.4;
		transform: scale(0.95);
	}
}

@keyframes art-spark
{
	0% {
		opacity: 1;
		transform: translate(0px, 0px) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(0.4);
	}
}

@keyframes art-glide
{
	0%, 100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(3deg);
	}
}

@keyframes art-pulse
{
	0%, 100% {
		opacity: 0;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes art-glow
{
	0%, 55%, 100% {
		opacity: 0;
	}
	75% {
		opacity: 0.8;
	}
}

@media (max-width: 840px)
{
	.page-intro .intro-illustration
	{
		display: none;
	}
}

@media (max-width: 380px)
{
	.contact-page .header .page-label
	{
		font-size: 16px;
		padding-left: 0px;
		padding-right: 0px;
	}

	.contact-page .page-label-suffix
	{
		display: none;
	}
}
