/*
	Cyberflight Studios
	Shared Site Shell

	Provides shared layout, navigation, background, and transition
	behavior for Cyberflight Studios pages and applications.

	Page-specific presentation lives in homepage.css, 
	site-pages.css, or the appropriate application stylesheet.
*/

/* ============================================================
   Fonts
============================================================ */

/* Source Sans 3 files use the local family name "Source Sans Pro". */

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../webfonts/SourceSans3-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../webfonts/SourceSans3-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../webfonts/SourceSans3-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../webfonts/SourceSans3-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   Browser Reset
============================================================ */

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;
}

/* ============================================================
   Shared Design Tokens
============================================================ */

:root {
	/* Navigation */
	--cf-nav-size: 2.5rem;
	--cf-back-icon-size: 1.35rem;
	--cf-home-icon-size: 1.15rem;

	/* Shared content width */
	--cf-content-max-width: 960px;

	/* Shared colors */
	--cf-shell-text: #ffffff;
	--cf-nav-hover: rgba(255, 255, 255, 0.075);
	--cf-nav-active: rgba(255, 255, 255, 0.175);

	/* Shared motion */
	--cf-transition-speed: 0.2s;
	--cf-page-transition-speed: 0.4s;
}


/* ============================================================
   Shared Box Sizing
============================================================ */

html {
	box-sizing: border-box;
}

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

/* ============================================================
   Base Page Styles
============================================================ */

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

	body {
		background: #1b1f22;
	}

/* Basic - Mobile */

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

		html, body {
			min-width: 320px;
			overflow-x: clip;
			width: 100%;
			max-width: 100%;
		}

	}

/* ============================================================
   Typography
============================================================ */

html {
	font-size: 16pt;
}

body, input, select, textarea {
	color: #ffffff;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
}

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

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

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

em, i {
	font-style: italic;
}

p {
	margin: 0 0 2rem 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

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

	h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
		border-bottom: solid 1px #ffffff;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -ms-max-content;
		width: max-content;
		padding-bottom: 0.5rem;
		margin: 0 0 2rem 0;
	}

h1 {
	font-size: 2.25rem;
	line-height: 1.3;
	letter-spacing: 0.5rem;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: 0.5rem;
}

h3 {
	font-size: 1rem;
}

h4 {
	font-size: 0.8rem;
}

h5 {
	font-size: 0.7rem;
}

h6 {
	font-size: 0.6rem;
}

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

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

blockquote {
	border-left: solid 4px #ffffff;
	font-style: italic;
	margin: 0 0 2rem 0;
	padding: 0.5rem 0 0.5rem 2rem;
}

code {
	background: rgba(255, 255, 255, 0.075);
	border-radius: 4px;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0.25rem;
	padding: 0.25rem 0.65rem;
}

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

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

hr {
	border: 0;
	border-bottom: solid 1px #ffffff;
	margin: 2.75rem 0;
}

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

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

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

/* Type - Small Desktop */

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

		html {
			font-size: 12pt;
		}

	}

/* Type - Tablet */

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

	html {
		font-size: 11pt;
	}

	h1 {
		font-size: 1.75rem;
		line-height: 1.4;
	}

	h2 {
		font-size: 1.25em;
		line-height: 1.5;
	}

}

/* Type - Small Mobile */

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

	html {
		font-size: 10pt;
	}

}

/* ============================================================
   Content Headings
============================================================ */

/* Content Headings - Mobile */

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

		#main article h2.major {
			font-size: 1rem;
			letter-spacing: 0.14rem;
			line-height: 1.35;
			word-break: break-word;
			overflow-wrap: anywhere;
		}		

	}

/* ============================================================
   Forms
============================================================ */

	form {
		margin: 0 0 2rem 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% + 3rem);
			margin: -1.5rem 0 2rem -1.5rem;
		}

			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.5rem 0 0 1.5rem;
				width: calc(100% - 1.5rem);
			}

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

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

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

	label {
		color: #ffffff;
		display: block;
		font-size: 0.8rem;
		font-weight: 300;
		letter-spacing: 0.2rem;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
	}

	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;
		-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: solid 1px #ffffff;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		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 {
			background: rgba(255, 255, 255, 0.075);
			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='%23ffffff' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75rem;
		padding-right: 2.75rem;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #1b1f22;
		}

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

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

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

	textarea {
		padding: 0.75rem 1rem;
	}

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

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			color: #ffffff;
			cursor: pointer;
			display: inline-block;
			font-size: 0.8rem;
			font-weight: 300;
			margin: 0 0 0.5rem 0;
			padding-left: 2.65rem;
			padding-right: 0.75rem;
			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 {
				-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				border-radius: 4px;
				border: solid 1px #ffffff;
				content: '';
				display: inline-block;
				height: 1.65rem;
				left: 0;
				line-height: 1.65rem;
				position: absolute;
				text-align: center;
				top: -0.15rem;
				width: 1.65rem;
			}

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

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

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

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

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

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

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

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

/* Form - Mobile */

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

		form > .fields {
			width: 100%;
			margin: 0;
		}

			form > .fields > .field,
			form > .fields > .field.half,
			form > .fields > .field.third,
			form > .fields > .field.quarter {
				width: 100%;
				padding-left: 0;
			}
	}

/* ============================================================
   Content Boxes
============================================================ */

	.box {
		border-radius: 4px;
		border: solid 1px #ffffff;
		margin-bottom: 2rem;
		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;
		}

/* ============================================================
   Images
============================================================ */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image:before {
			pointer-events: none;
			background-image: url("../../images/overlay.png");
			background-color: rgba(19, 21, 25, 0.5);
			border-radius: 4px;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.image img {
			border-radius: 4px;
			display: block;
		}

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

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

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

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

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

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

		.image.main {
			display: block;
			margin: 2.5rem 0;
			width: 100%;
		}

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

/* Image - Tablet */

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

	.image.main {
		margin: 2rem 0;
	}

}

/* Image - Mobile */

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

	.image.main {
		margin: 1.5rem 0;
	}

}

/* ============================================================
   Lists
============================================================ */

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

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2rem 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 #ffffff;
				padding: 0.5em 0;
			}

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

	dl {
		margin: 0 0 2rem 0;
	}

		dl dt {
			display: block;
			font-weight: 600;
			margin: 0 0 1rem 0;
		}

		dl dd {
			margin-left: 2rem;
		}

/* ============================================================
   Action Groups
============================================================ */

/* Layout and spacing for groups of buttons and action links. */

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

		ul.actions li {
			padding: 0 0 0 1rem;
			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.3rem 0 0 0;
			}

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

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

			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%;
			}

/* Actions - Mobile */

@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: 1rem 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.5em;
				}

}
/* ============================================================
   Icon Rendering
============================================================ */

/* Base Font Awesome rendering for .icon elements. */

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 {
			border-radius: 100%;
			box-shadow: inset 0 0 0 1px #ffffff;
			display: inline-block;
			height: 2.25rem;
			line-height: 2.25rem;
			text-align: center;
			width: 2.25rem;
		}

			ul.icons li a:hover {
				background-color: rgba(255, 255, 255, 0.075);
			}

			ul.icons li a:active {
				background-color: rgba(255, 255, 255, 0.175);
			}

/* ============================================================
   Icon Lists
============================================================ */

/* Layout and appearance of linked icons inside ul.icons. */

.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: inherit;

	text-transform: none !important;

	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon > .label {
	display: none;
}

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

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

/* ============================================================
   Tables
============================================================ */

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

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

	table tbody tr {
		border: solid 1px #ffffff;
		border-left: 0;
		border-right: 0;
	}

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

	table td {
		padding: 0.75em 0.75em;
	}

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

	table thead {
		border-bottom: solid 2px #ffffff;
	}

	table tfoot {
		border-top: solid 2px #ffffff;
	}

	table.alt {
		border-collapse: separate;
	}

		table.alt tbody tr td {
			border: solid 1px #ffffff;
			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;
		}

/* ============================================================
   Buttons
============================================================ */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 1px #ffffff;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8rem;
		font-weight: 300;
		height: 2.75rem;
		letter-spacing: 0.2rem;
		line-height: 2.75rem;
		outline: 0;
		padding: 0 1.25rem 0 1.35rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(255, 255, 255, 0.075);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(255, 255, 255, 0.175);
		}

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

		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.6rem;
			height: 2.0625rem;
			line-height: 2.0625rem;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #ffffff;
			color: #1b1f22 !important;
			font-weight: 600;
		}

		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 {
			pointer-events: none;
			cursor: default;
			opacity: 0.25;
		}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button {
		line-height: calc(2.75rem - 2px);
	}

/* ============================================================
Page Banners
============================================================ */

/* Natural image proportions below 737px; cropped 190px banners above. */

	.page-banner {
		display: block;
		margin: 0 0 2rem 0;
		overflow: hidden;
		border-radius: 12px;
	}

	.page-banner img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
		border-radius: 12px;
	}

/* Page Header Banners - Desktop */

/* 300px (down from natural ~420px; earlier trials were 190px and a
   120px pass) is the "crop": cover keeps the image at its width-driven
   scale, so a shorter window just trims sky from the top and bottom
   without zooming the content. The image's top edge stays flush with
   the tile's top edge; the cover surplus is trimmed from the bottom.
   object-position Y is available to re-frame the composition. */

@media screen and (min-width: 737px) {

	.page-banner {
		height: 300px;
	}

	.page-banner img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

}

/* ============================================================
   Standalone Page Layout
   ============================================================ */

/*
	Provides the shared outer wrapper used by Cyberflight Studios
	content pages and standalone applications.

	The homepage intentionally uses its own wrapper styling in homepage.css.
*/

body.standalone-page {
	min-height: 100vh;
}

body.standalone-page #wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	position: relative;

	min-height: 100vh;
	width: 100%;

	padding: 4rem 2rem;

	z-index: 3;
}

body.standalone-page #wrapper::before {
	content: '';
	display: block;
}


/* Standalone Page Shell - Small Desktop */

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

	body.standalone-page #wrapper {
		padding: 3rem 2rem;
	}

}


/* Standalone Page Shell - Tablet */

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

	body.standalone-page #wrapper {
		padding: 2rem 1rem;
	}

}


/* Standalone Page Shell - Mobile */

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

	body.standalone-page #wrapper {
		padding: 1rem;
	}

}

/* ============================================================
   Standalone Content Container
============================================================ */

/*
	Provides the shared content container used by Cyberflight Studios
	standalone pages.

	Page-specific content and components remain in their own stylesheets.
*/

body.standalone-page #main {
	flex-grow: 1;
	flex-shrink: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	position: relative;

	width: 100%;
	max-width: 100%;

	z-index: 3;

	opacity: 1;
	transform: none;
}

body.standalone-page #main article {
	display: block;

	position: relative;

	width: 60rem;
	max-width: 100%;

	padding: 5.5rem 2.5rem 1.5rem 2.5rem;

	background-color: rgba(27, 31, 37, 0.85);
	border: 1px solid #3b414c;
	border-radius: 12px;

	opacity: 1;
	transform: none;
}


/* Standalone Main Content - Tablet */

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

	body.standalone-page #main article {
		padding: 4.75rem 2rem 0.5rem 2rem;
	}

	#main article .page-back,
	#main article .page-home {
		top: 20px;
	}

	#main article .page-back {
		left: 20px;
	}

	#main article .page-home {
		right: 20px;
	}

}


/* Standalone Main Content - Mobile */

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

	body.standalone-page #main article {
		padding: 4.5rem 1.5rem 0.5rem 1.5rem;
	}

	#main article .page-back,
	#main article .page-home {
		top: 20px;
	}

	#main article .page-back {
		left: 20px;
	}

	#main article .page-home {
		right: 20px;
	}

}

/* ============================================================
   Page Navigation
============================================================ */

/*
	Canonical Back and Home controls used throughout
	Cyberflight Studios standalone pages.

	NOTE: services/graduation, services/realestate and
	services/videography still use the old standalone template
	(no floating-boxes intro tile) and rely on these absolute
	positions plus the JS-injected Home button in main.js.
	If those pages are converted to the shared header component,
	this absolute-position block becomes dead code and can go.
*/

#main article .page-back,
#main article .page-home {
	position: absolute;
	top: 30px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--cf-nav-size);
	height: var(--cf-nav-size);

	border: 0;
	border-radius: 50%;
	background: transparent;

	color: var(--cf-shell-text);
	line-height: 1;

	text-decoration: none;
	cursor: pointer;

	transition: background-color var(--cf-transition-speed) ease-in-out;
}

#main article .page-back {
	left: 30px;
	font-size: var(--cf-back-icon-size);
}

#main article .page-home {
	right: 30px;
	font-size: var(--cf-home-icon-size);
}

#main article .page-back:hover,
#main article .page-home:hover {
	color: var(--cf-shell-text);
	background-color: var(--cf-nav-hover);
}

#main article .page-back:active,
#main article .page-home:active {
	background-color: var(--cf-nav-active);
}

#main article .page-back:focus-visible,
#main article .page-home:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ============================================================
   Background
============================================================ */

/* Video sources and posters come from HTML.
   The reduced-motion background image is defined here. */

#bg {
	transform: scale(1);
	-webkit-backface-visibility: hidden;

	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100vh;

	z-index: 1;
	overflow: hidden;
}

#bg::before,
#bg::after {
	content: '';
	display: block;

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}


/* Background Overlay */

#bg::before {
	transition: background-color 2.5s ease-in-out;
	transition-delay: 0.75s;

	background-image:
		linear-gradient(
			to top,
			rgba(19, 21, 25, 0.5),
			rgba(19, 21, 25, 0.5)
		),
		url("../../images/overlay.png");

	background-size: auto, 256px 256px;
	background-position: center, center;
	background-repeat: no-repeat, repeat;

	z-index: 2;
}


/* Static Background Fallback */

#bg::after {
	display: none;

	transform: scale(1.125);

	transition:
		transform 0.325s ease-in-out,
		filter 0.325s ease-in-out;

	background-image: url("../../images/bg.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	z-index: 1;
}

body.is-preload #bg::before {
	background-color: #000000;
}


/* Background Video */

#bg video {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	z-index: 1;
}


/* Background - Reduced Motion */

@media (prefers-reduced-motion: reduce) {

	#bg video {
		display: none;
	}

	#bg::after {
		display: block;
	}

}

/* ============================================================
   Footer
============================================================ */

#footer {
	-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
	-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
	-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
	transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
	width: 100%;
	max-width: 100%;
	margin-top: 2rem;
	text-align: center;
	}

	#footer .copyright {
		letter-spacing: 0.2rem;
		font-size: 0.6rem;
		opacity: 0.75;
		margin-bottom: 0;
		text-transform: uppercase;
	}

	body.is-preload #footer {
		opacity: 0;
	}

/* ============================================================
   Shared Mobile Constraints
============================================================ */

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

			#wrapper,
			#header,
			#main,
			#footer {
				width: 100%;
				max-width: 100%;
			}
		}

/* ============================================================
   Page States and Transitions
============================================================ */

/*
Provides the shared fade-in and fade-out behavior used when
loading and navigating between Cyberflight Studios pages.
*/

body {
opacity: 1;
transition: opacity var(--cf-page-transition-speed) ease;
}

body.is-preload {
opacity: 0;
}
body.is-preload *,
body.is-preload *::before,
body.is-preload *::after {
animation: none !important;
transition: none !important;
}

/* ============================================================
   Reduced Motion
============================================================ */

@media (prefers-reduced-motion: reduce) {

	body {
		transition: none;
	}

	.page-back,
	.page-home {
		transition: none;
	}

}

/* ============================================================
   Floating Box Layout (opt-in)
============================================================ */

/*
	Opt in per page via the body class "floating-boxes". The article
	shell becomes a transparent container and content lives in floating
	boxes, matching the booking page.

	Box anatomy (booking-parity):
	- .intro-tile  — the slim header tile: nav bar only (plus the banner image on
	  pages that have one); intro content follows below
	- .content-box — generic floating panel for prose/sections
	Card grids (.service-item, .gallery-item) already box themselves.
*/

body.standalone-page.floating-boxes #main article {
	background: none;
	border: 0;
	padding: 0;
}

/* The booking page keeps its own class names but shares this header
   component's styling through the co-listed selectors below. Slim
   padding is the norm for every tile: the banner fills it edge-to-edge
   via negative margins on banner pages, and non-banner pages (drone,
   terms, ...) hold just the bar in the same compact shell. */

.intro-tile,
body.cf-booking .booking-intro-tile {
	background: rgba(27, 31, 37, 0.85);
	border: 1px solid #3b414c;
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 26px;
	position: relative;
}

/* Unified nav bar (all pages): back disc, section menu, home disc in
   one pill that shares a single backdrop and white border. The pill
   spans its container's full width, so the discs always sit at the
   edges and the menu's auto margins center it — identical geometry on
   banner pages (bar absolute over the image) and non-banner pages
   (bar as a static row). Booking keeps its own class names but
   co-lists every rule; the confirmation panels use the generic class. */

.page-nav,
body.cf-booking .booking-intro-tile .booking-page-nav,
body.cf-booking .confirm-panel .page-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 auto;
	padding: 8px 10px;
	background: rgba(27, 31, 37, 0.55);
	border: 1px solid #ffffff;
	border-radius: 999px;

	/* Pixel-locked: sizes in px and the site typeface set explicitly, so
	   pages that restyle the root element (booking sets a 17px CFBooking
	   root) can't inflate or re-typeface the shared bar. Page zoom still
	   scales it; browser user font-size preferences do not. */
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
}

/* The menu placeholder inherits the menu's space-occupying job, so the
   home disc sits flush right from the first paint — before the fragment
   fetch finishes, the bar would otherwise flash as [back][home] next to
   each other on the left and snap apart on injection. */

.page-nav > div[data-include],
.booking-page-nav > div[data-include] {
	flex: 1 1 0%;
}

#main article .intro-tile .page-back,
#main article .intro-tile .page-home,
body.cf-booking .booking-intro-tile .booking-page-back,
body.cf-booking .booking-intro-tile .booking-page-home {
	position: static;
}

/* Hero header: on banner-bearing tiles the banner image becomes the
   tile's face, flush with every edge. The 102px window is content-
   exact: the 74px bar plus the 14px tile gutter on each side, so the
   padding around the pill matches the tile's edge padding on all four
   sides. The bar overlays the image with that same 14px inset; object-
   position center keeps thin, pre-cropped source images centered.
   Gallery sub-page titles render below the boxed hero; non-banner
   tiles hold just the bar in the same slim shell.

   TODO(future improvement): hoist this whole tile into
   components/header.html (like footer.html), passing per-page bits
   (banner image, back target) via data- attributes, so every page's
   header is a single placeholder line. */

.intro-tile:has(> .page-banner) .page-banner,
body.cf-booking .booking-intro-tile .page-banner {
	max-width: none;
	height: 102px;
	margin: -14px;
	border-radius: 12px;
}

.intro-tile:has(> .page-banner) .page-banner img,
body.cf-booking .booking-intro-tile .page-banner img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
}

/* Inside banner tiles the bar overlaps the image, pinned to the same
   14px gutter the base tile padding gives every page; left+right pins
   the stretch so the discs sit at the image's edges. z-index is needed
   because Dimension's .image class positions the banner span too, and
   being later in the DOM it would otherwise paint over the bar. */

.intro-tile:has(> .page-banner) .page-nav,
body.cf-booking .booking-intro-tile .booking-page-nav {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	width: auto; /* stretch between the insets; a fixed width would
	                defeat right: 14px and push the pill past the edge */
	z-index: 2;
}

/* Disc buttons keep their circular look inside the bar; positioned
   static, so no corner math anywhere. The confirmation panels' home
   button joins them. */

#main article .intro-tile .page-back,
#main article .intro-tile .page-home,
body.cf-booking .booking-intro-tile .booking-page-back,
body.cf-booking .booking-intro-tile .booking-page-home,
body.cf-booking .confirm-panel .booking-page-home {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border: 1px solid #ffffff;
	border-radius: 50%;
	background: rgba(27, 31, 37, 0.55);

	color: #ffffff;
	line-height: 1;

	text-decoration: none;
	cursor: pointer;

	transition: background-color var(--cf-transition-speed) ease-in-out;
}

#main article .intro-tile .page-back,
body.cf-booking .booking-intro-tile .booking-page-back {
	font-size: 21.6px;
}

#main article .intro-tile .page-home,
body.cf-booking .booking-intro-tile .booking-page-home,
body.cf-booking .confirm-panel .booking-page-home {
	font-size: 18.4px;
}

#main article .intro-tile .page-back:hover,
#main article .intro-tile .page-home:hover,
body.cf-booking .booking-intro-tile .booking-page-back:hover,
body.cf-booking .booking-intro-tile .booking-page-home:hover,
body.cf-booking .confirm-panel .booking-page-home:hover {
	background: rgba(27, 31, 37, 0.75);
}

#main article .intro-tile .page-back:active,
#main article .intro-tile .page-home:active,
body.cf-booking .booking-intro-tile .booking-page-back:active,
body.cf-booking .booking-intro-tile .booking-page-home:active,
body.cf-booking .confirm-panel .booking-page-home:active {
	background: rgba(27, 31, 37, 0.9);
}

#main article .intro-tile .page-back:focus-visible,
#main article .intro-tile .page-home:focus-visible,
body.cf-booking .booking-intro-tile .booking-page-back:focus-visible,
body.cf-booking .booking-intro-tile .booking-page-home:focus-visible,
body.cf-booking .confirm-panel .booking-page-home:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Section menu (components/page-nav.html): the 4-button menu that sits
   centered inside the unified nav bar. Chrome (border, backdrop,
   rounding) comes from the bar itself; the menu supplies only the
   items. Styled to match the homepage nav. The current-section link is
   filled white via .is-active, added by highlightPageNav() in
   html-include.js. */

/* The fragment root is the ul itself, so all menu selectors target it
   directly (no inner wrapper). */

.page-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 0;
	list-style: none;
	padding-left: 0;
}

/* Dividers frame the menu block: lines at both ends (between the discs
   and the buttons) and between each pair. */

.page-menu li {
	padding-left: 0;
	border-left: solid 1px #ffffff;
}

.page-menu li:last-child {
	border-right: solid 1px #ffffff;
}

/* Labels center on their own — needed because the min-width leaves
   shorter labels ("ABOUT") hugging the left when the text is a plain
   block, unlike the homepage nav where every label runs longer.
   Sizing: one notch below the homepage H1 scale keeps the nav as the
   page's strongest interactive element; discs scale to match. */

.page-menu li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 152px;
	height: 56px;
	padding: 0 32px;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 15px;
	border-bottom: 0;
	color: #ffffff;
}


.page-menu li a.is-active {
	background-color: #ffffff;
	color: #1b1f25;
}

/* Equal-specificity hover/active rules would out-rank the fill above
   on source order alone, so the active link gets its own to keep the
   highlight visible while hovered. */

.page-menu li a.is-active:hover {
	background-color: #e6e6e6;
}

.page-menu li a.is-active:active {
	background-color: #d9d9d9;
}

.page-menu li a:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

.page-menu li a:active {
	background-color: rgba(255, 255, 255, 0.175);
}

/* Gallery sub-page titles: their h2.major sits outside the header tile
   (below the boxed hero), so the tile is always exactly the image face
   plus the overlaid bar. */

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

	.page-menu li {
		flex: 1 0 50%;
		border-left: 0;
	}

	.page-menu li:last-child {
		border-right: 0;
	}

	.page-menu li a {
		min-width: 0;
		width: 100%;
		padding: 0;
		text-align: center;
	}

	.page-menu li:nth-child(odd) a {
		border-right: solid 1px #ffffff;
	}

	.page-menu li:nth-child(n+3) a {
		border-top: solid 1px #ffffff;
	}

	.page-menu li a.is-active {
		color: #1b1f25;
	}

}

body.standalone-page.floating-boxes .content-box {
	background: rgba(27, 31, 37, 0.85);
	border: 1px solid #3b414c;
	border-radius: 12px;
	padding: 2rem 2.5rem;
	margin-bottom: 26px;
}

body.standalone-page.floating-boxes .gallery-grid,
body.standalone-page.floating-boxes .services-grid {
	margin-top: 0;
	margin-bottom: 26px;
}

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

	.intro-tile,
	body.cf-booking .booking-intro-tile {
		padding: 12px;
	}

	.intro-tile:has(> .page-banner) .page-banner,
	body.cf-booking .booking-intro-tile .page-banner {
		margin: -12px;
	}

	.intro-tile:has(> .page-banner) .page-nav,
	body.cf-booking .booking-intro-tile .booking-page-nav {
		top: 12px;
		left: 12px;
		right: 12px;
	}

	body.standalone-page.floating-boxes .content-box {
		padding: 1.5rem;
	}

}

/* Below 480px the bar wraps: the discs share the top row
   (space-between) and the 2x2 menu takes the second row, all inside
   the same pill. The window grows to hold the wrapped pill with the
   same 12px top/bottom symmetry (pill 163px + 2 x 12px = 187px). */

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

	.page-nav,
	body.cf-booking .booking-intro-tile .booking-page-nav,
	body.cf-booking .confirm-panel .page-nav {
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 6px;
	}

	.page-menu {
		order: 3;
		width: 100%;
	}

	.intro-tile:has(> .page-banner) .page-banner,
	body.cf-booking .booking-intro-tile .page-banner {
		height: 187px;
	}

}