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


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 {
	-webkit-appearance: none;
	appearance: none;
}

/* Skip to Content Link (Accessibility) */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: #fff;
	padding: 0.75em 1.5em;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	font-weight: 700;
	z-index: 10000;
	transition: top 0.2s ease;
}

.skip-to-content:focus {
	top: 0;
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* Basic */

:root {
	/* Colors */
	--color-primary: #4682b4;
	--color-primary-deep: #36648b;
	--color-accent: #5a9bd4;
	--color-accent-bg: #4ebf6b;
	--color-accent-warm: #f97316;
	--color-text: #1f2937;
	--color-text-secondary: #374151;
	--color-fg: #334155;
	--color-fg-light: #4b5563;
	--color-bg: #f8fafc;
	--color-surface: #ffffff;
	--color-border: #e2e8f0;
	--color-frost: #cbd5e1;

	/* Typography */
	--font-body: 'Open Sans', sans-serif;
	--font-heading: 'Open Sans Condensed', sans-serif;
}

/* Logo Image Utilities */
.logo-img {
	max-height: 50px;
	width: auto;
	vertical-align: middle;
}

.logo-img-small {
	max-height: 30px;
	width: auto;
	vertical-align: middle;
}

	html {
		box-sizing: border-box;
	}

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

	/* Accessibility Focus State - only show for keyboard navigation */
	a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
		outline: 2px solid var(--color-primary-deep);
		outline-offset: 2px;
	}

	/* Remove outline for mouse clicks */
	a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
		outline: none;
	}

	body {
		background: var(--color-bg);
	}

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

	/* Smooth page fade-in to mask navigation flicker */
	@keyframes pageLoad {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	body {
		animation: pageLoad 0.1s ease-out;
	}

	/* Fade out when navigating away */
	body.navigating-away {
		opacity: 0;
		transition: opacity 0.05s ease-out;
	}

	body, input, textarea, select {
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		color: var(--color-fg);
		font-size: 13pt;
		line-height: 1.7em;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-fg);
		margin: 0 0 0.5em 0;
		line-height: 1.3;
	}

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

	h2 {
		font-size: 1.65em;
	}

		h2.major {
			position: relative;
			border-top: solid 5px var(--color-border);
			font-size: 1.65em;
			text-align: center;
			margin: 0 0 3em 0;
			top: 0.775em;
		}

			h2.major span {
				background: #fff;
				position: relative;
				display: inline-block;
				top: -0.775em;
				padding: 0 1.25em 0 1.25em;
			}

	h3, h4 {
		font-size: 1.25em;
	}

	a {
		color: var(--color-primary-deep);
		text-decoration: underline;
		overflow-wrap: break-word;
		word-break: break-word;
	}

		a:hover {
			text-decoration: none;
		}

	b, strong {
		font-weight: 700;
		color: var(--color-fg);
	}

	/* Utility */

	.img-profile-medium {
		width: 180px;
		height: auto;
	}

	.link-plain {
		text-decoration: none;
		color: inherit;
	}

	i, em {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

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

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

	hr {
		border: 0;
		border-top: solid 2px var(--color-border);
		margin: 0 0 3em 0;
	}

	blockquote {
		border-left: solid 5px var(--color-border);
		padding: 1em 0 1em 1.5em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1.75em;
	}

/* Section/Article */

	section, article {
		margin-bottom: 6em;
	}

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

	header > p {
		display: block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-frost);
	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 64em;
	}

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

			.container {
				width: 75em;
			}

		}

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

			.container {
				width: calc(100% - 100px);
			}

		}

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

			.container {
				width: calc(100% - 100px);
			}

		}

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

			.container {
				width: calc(100% - 40px);
			}

		}

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

			.container {
				width: calc(100% - 30px);
			}

		}

/* Row (Minimal - only used classes retained) */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
		margin-top: -50px;
		margin-left: -50px;
	}

		.row > * {
			box-sizing: border-box;
			padding: 50px 0 0 50px;
		}

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

		.row.gtr-200 {
			margin-top: -100px;
			margin-left: -100px;
		}

			.row.gtr-200 > * {
				padding: 100px 0 0 100px;
			}

		/* Responsive: xlarge (max-width: 1680px) */
		@media screen and (max-width: 1680px) {
			.row {
				margin-top: -40px;
				margin-left: -40px;
			}

				.row > * {
					padding: 40px 0 0 40px;
				}

			.row.gtr-200 {
				margin-top: -80px;
				margin-left: -80px;
			}

				.row.gtr-200 > * {
					padding: 80px 0 0 80px;
				}
		}

		/* Responsive: large (max-width: 1280px) */
		@media screen and (max-width: 1280px) {
			.row {
				margin-top: -35px;
				margin-left: -35px;
			}

				.row > * {
					padding: 35px 0 0 35px;
				}

			.row.gtr-200 {
				margin-top: -70px;
				margin-left: -70px;
			}

				.row.gtr-200 > * {
					padding: 70px 0 0 70px;
				}
		}

		/* Responsive: medium (max-width: 980px) */
		@media screen and (max-width: 980px) {
			.row {
				margin-top: -30px;
				margin-left: -30px;
			}

				.row > * {
					padding: 30px 0 0 30px;
				}

			.row.gtr-200 {
				margin-top: -60px;
				margin-left: -60px;
			}

				.row.gtr-200 > * {
					padding: 60px 0 0 60px;
				}
		}

		/* Responsive: small (max-width: 736px) */
		@media screen and (max-width: 736px) {
			.row {
				margin-top: -20px;
				margin-left: -20px;
			}

				.row > * {
					padding: 20px 0 0 20px;
				}

			.row.gtr-200 {
				margin-top: -40px;
				margin-left: -40px;
			}

				.row.gtr-200 > * {
					padding: 40px 0 0 40px;
				}
		}

		/* Responsive: xsmall (max-width: 360px) */
		@media screen and (max-width: 360px) {
			.row {
				margin-top: -15px;
				margin-left: -15px;
			}

				.row > * {
					padding: 15px 0 0 15px;
				}

			.row.gtr-200 {
				margin-top: -30px;
				margin-left: -30px;
			}

				.row.gtr-200 > * {
					padding: 30px 0 0 30px;
				}
		}

/* Image */

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

		.image img {
			display: block;
			width: 100%;
			border-radius: 8px;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

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

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

@media screen and (min-width: 981px) {
	.image.left {
		float: left;
		display: inline-block;
		margin: 0 2em 2em 0;
	}
}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-webkit-appearance: none;
		display: inline-block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		background: var(--color-primary-deep);
		color: #fff;
		border: 0;
		line-height: 1em;
		border-radius: 8px;
		outline: 0;
		cursor: pointer;
		transition: background-color .2s ease-in-out;
		font-size: 1.25em;
		padding: 0.85em 1.85em;
		text-align: center;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background: #5a9bd4;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background: var(--color-primary-deep);
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background: var(--color-frost);
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background: var(--color-frost);
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background: #94a3b8;
			}

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

/* List */

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

		ul li {
			padding-left: 0.5em;
		}

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

		ol li {
			padding-left: 0.25em;
		}

/* Divided */

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

		ul.divided > li {
			border-top: solid 2px var(--color-border);
			padding-top: 2.35em;
			margin-top: 2.35em;
			padding-left: 0;
		}

			ul.divided > li:first-child {
				border-top: 0;
				padding-top: 0;
				margin-top: 0;
			}

/* Actions */

	ul.actions {
		list-style: none;
		padding-left: 0;
		text-align: center;
		margin: 2em 0 0 0;
	}

		ul.actions li {
			display: inline-block;
			margin: 0 0 0 1em;
			padding-left: 0;
		}

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

/* Contact */

	ul.contact {
		list-style: none;
		padding-left: 0;
		cursor: default;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		ul.contact li {
			display: inline-flex;
			margin: 0 0.25em 0 0.25em;
			padding-left: 0;
		}

			ul.contact li a {
				transition: background-color .2s ease-in-out;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48px;
				height: 48px;
				border-radius: 6px;
				outline: 0;
				background: var(--color-frost);
			}

				ul.contact li a:before {
					color: var(--color-bg);
					font-size: 32px;
					line-height: 1;
				}

			/* Custom X (formerly Twitter) icon */
			ul.contact li a.fa-x-logo:before {
				content: "𝕏";
				font-family: sans-serif;
				font-weight: 700;
				font-size: 28px;
				line-height: 1;
			}

/* Forms */

	form label {
		display: block;
		margin: 0 0 1em 0;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-fg);
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		display: block;
		width: 100%;
		border-radius: 8px;
		border: solid 2px var(--color-border);
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			border-color: var(--color-primary);
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {
		line-height: 3em;
		padding: 0 1em;
	}

	form textarea {
		min-height: 9em;
		padding: 1em;
	}

	form ::-webkit-input-placeholder {
		color: #555 !important;
	}

	form ::placeholder {
		color: #555 !important;
	}

/* Tables */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tr {
				border-top: solid 2px var(--color-border);
			}

				table.default tr:first-child {
					border-top: 0;
				}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				padding: 0.5em 1em 0.5em 1em;
				margin: 0 0 1em 0;
				font-family: 'Open Sans Condensed', sans-serif;
				font-weight: 700;
				text-transform: uppercase;
				color: var(--color-fg);
			}

			table.default thead {
				background: var(--color-border);
				color: #fff;
			}

/* Icons */

	.icon {
		text-decoration: 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:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

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

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

/* Page Wrapper */

	#page-wrapper > section {
		margin-bottom: 0;
	}

/* Nav - Fixed navigation bar with integrated logo */

	body {
		padding-top: 60px;
	}

	#nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
		width: 100%;
		height: 60px;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
	}

		#nav .nav-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 2em;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		#nav .nav-logo {
			display: flex;
			align-items: center;
			text-decoration: none;
			gap: 0.5em;
		}

		#nav .nav-logo img {
			height: 38px;
			width: auto;
		}

		#nav .nav-links {
			display: flex;
			align-items: center;
		}

		#nav ul {
			display: flex;
			gap: 0.25em;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		#nav li {
			display: inline-block;
			margin: 0;
			position: relative;
		}

			#nav li > ul {
				display: none;
			}

			#nav li a, #nav li span {
				display: block;
				text-decoration: none;
				color: var(--color-fg);
				padding: 0.5em 1.25em;
				border-radius: 6px;
				transition: background-color 0.15s ease, color 0.15s ease;
				outline: 0;
				font-size: 0.95em;
			}

			#nav li:hover a, #nav li:hover span {
				background: var(--color-primary);
				color: #fff;
			}

			#nav li.current a {
				background: var(--color-primary-deep);
				color: #fff;
			}

			#nav li a:focus-visible {
				outline: 2px solid var(--color-primary);
				outline-offset: 2px;
			}

/* Footer */

	#footer {
		text-align: center;
		padding: 4em 0 4em 0;
		min-height: 100px; /* Prevent layout shift when content is injected */
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
	}

		#footer a {
			color: inherit;
		}

		#footer .contact li a {
			color: rgba(30, 60, 90, 0.85);
			border-color: rgba(30, 60, 90, 0.3);
			background: rgba(255, 255, 255, 0.15);
			transition: all 0.2s ease;
		}

		#footer .contact li a:hover {
			color: rgba(30, 60, 90, 1);
			background: rgba(255, 255, 255, 0.3);
			border-color: rgba(30, 60, 90, 0.5);
		}

		#footer h2.major {
			margin: 0 0 1.5em 0;
		}

			#footer h2.major span {
				background: var(--color-primary);
			}

/* XLarge */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
				line-height: 1.75em;
			}

	}

/* Large */

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

		/* Basic */

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

		/* Footer */

			#footer {
				padding: 6em 0 6em 0;
			}

	}

/* Medium */

	#navPanel, #titleBar {
		display: none;
	}

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

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

		/* Desktop Nav hidden on mobile */

			#nav {
				display: none;
			}

		/* Mobile Nav */

			body {
				padding-top: 60px;
			}

			#page-wrapper {
				backface-visibility: hidden;
				transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				padding-bottom: 1px;
			}

			#titleBar {
				backface-visibility: hidden;
				transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				display: block;
				height: 60px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10003;
				background-color: var(--color-surface);
				box-shadow: 0 2px 5px rgba(0,0,0,0.08);
			}

				#titleBar .title {
					display: block;
					position: relative;
					font-family: 'Open Sans Condensed', sans-serif;
					font-weight: 700;
					text-transform: uppercase;
					font-size: 1.25em;
					line-height: 60px;
					color: #1e293b;
					z-index: 1000;
					text-align: center;
				}

				#titleBar .title a {
					display: inline-block;
					text-decoration: none;
					color: inherit;
					padding: 0 0.35em;
					-webkit-tap-highlight-color: transparent;
				}

				#titleBar .title a:focus-visible {
					outline: 2px solid rgba(59, 130, 246, 0.6);
					outline-offset: 4px;
					border-radius: 6px;
				}

				#titleBar .title a:focus:not(:focus-visible) {
					outline: none;
					box-shadow: none;
				}

				#titleBar .title a:active {
					transform: none;
					filter: none;
					background: transparent;
					outline: none;
					box-shadow: none;
				}

				#titleBar .toggle {
					text-decoration: none;
					position: absolute;
					right: 0;
					top: 0;
					width: 60px;
					height: 60px;
					z-index: 1001;
					-webkit-tap-highlight-color: transparent;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				#titleBar .toggle:focus,
				#titleBar .toggle:focus-visible {
					outline: none;
					box-shadow: none;
				}

				#titleBar .hamburger {
					width: 22px;
					height: 16px;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				#titleBar .hamburger-line {
					display: block;
					width: 100%;
					height: 2px;
					background: var(--color-primary-deep);
					border-radius: 1px;
					transition: all 0.45s ease;
					transform-origin: center;
				}

				/* Hamburger → X animation when panel is visible */
				.navPanel-visible #titleBar .hamburger-line:nth-child(1) {
					transform: translateY(7px) rotate(45deg);
				}

				.navPanel-visible #titleBar .hamburger-line:nth-child(2) {
					opacity: 0;
				}

				.navPanel-visible #titleBar .hamburger-line:nth-child(3) {
					transform: translateY(-7px) rotate(-45deg);
				}

				/* Backdrop overlay */
				#navBackdrop {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(15, 23, 42, 0.6);
					z-index: 10001;
					opacity: 0;
					visibility: hidden;
					transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
					will-change: opacity, visibility;
				}

				.navPanel-visible #navBackdrop {
					opacity: 1;
					visibility: visible;
				}

			#navPanel {
				backface-visibility: hidden;
				transform: translateX(280px);
				transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				will-change: transform;
				display: block;
				height: 100%;
				right: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 280px;
				max-width: 85vw;
				z-index: 10002;
				background-color: #0f172a;
				background-image: linear-gradient(180deg, rgba(54, 100, 139, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				font-family: 'Open Sans Condensed', sans-serif;
				font-weight: 700;
				text-transform: uppercase;
				font-size: 1.25em;
				box-shadow: inset 3px 0px 10px 0px rgba(15, 23, 42, 0.4);
				padding-top: 60px;
			}

				#navPanel nav {
					position: relative;
					z-index: 1000;
				}

				#navPanel .link {
					display: block;
					text-decoration: none;
					height: 44px;
					line-height: 44px;
					padding: 0 1em 0 1em;
					color: rgba(226, 232, 240, 0.9);
					border-top: solid 1px rgba(226, 232, 240, 0.08);
					font-size: 0.8em;
					outline: none;
					box-shadow: none;
				}

				#navPanel .link:hover {
					background: rgba(70, 130, 180, 0.08);
					color: var(--color-border);
				}

				#navPanel .link.active,
				#navPanel .link.current {
					background: rgba(70, 130, 180, 0.15);
					color: #5a9bd4;
					border-left: 3px solid var(--color-primary);
					padding-left: calc(1em - 3px);
				}

				#navPanel .link:focus,
				#navPanel .link:focus-visible,
				#navPanel .link:active {
					outline: none;
					box-shadow: none;
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				transform: translateX(-280px);
			}

			body.navPanel-visible #titleBar {
				transform: translateX(-280px);
			}

			body.navPanel-visible #navPanel {
				transform: translateX(0);
			}

			/* Disable nav panel transitions during redirect to avoid flicker */
			body.navPanel-redirect #page-wrapper,
			body.navPanel-redirect #titleBar,
			body.navPanel-redirect #navPanel {
				transition: none !important;
			}

	}

/* Small */

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

		/* Basic */

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

			h2 {
				font-size: 1.25em;
			}

				h2.major {
					font-size: 1.25em;
					margin: 0 0 2em 0;
				}

					h2.major span {
						padding: 0 1em;
					}

		/* Section/Article */

			section, article {
				margin-bottom: 2em;
			}

			.image.left {
				float: none;
				display: block;
				margin: 0 auto 2em auto;
				text-align: center;
			}

			.image.left img {
				margin: 0 auto;
			}

		/* Button */

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

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

		/* Actions */

			ul.actions li {
				display: block;
				margin: 1em 0 0 0;
			}

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

		/* Footer */

			#footer {
				padding: 3em 0;
			}

	}

/* Small */

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

		/* Basic */

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

	}

/* Profile Layout */

	.profile-layout {
		display: flex;
		align-items: flex-start;
		gap: 2em;
	}

	.profile-image {
		flex: 0 0 300px;
	}

	.profile-image img {
		width: 100%;
		height: auto;
		border-radius: 8px;
		display: block;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	}

	.profile-content {
		flex: 1;
	}

	/* Side-by-side with smaller image for screens between 600px and 980px */
	@media screen and (max-width: 980px) and (min-width: 600px) {
		.profile-image {
			flex: 0 0 200px;
		}
	}

	/* Stacked layout only for narrow screens (phones) */
	@media screen and (max-width: 599px) {
		.profile-layout {
			display: block;
		}
		
		.profile-image {
			margin: 0 auto 2em auto;
			width: 200px;
			text-align: center;
		}
	}

/* ==========================================================================
   SPA Sections
   ========================================================================== */

/* Base SPA Section */
	.spa-section {
		padding: 5em 0;
		scroll-margin-top: 4em;
	}

/* Hero Section */
	.spa-hero {
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
		color: #fff;
		text-align: center;
		padding: 8em 0 6em 0;
		margin-top: 0;
	}

	.spa-hero .hero-content {
		max-width: 800px;
		margin: 0 auto;
	}

	.spa-hero h1 {
		font-size: 2.8em;
		font-weight: 700;
		margin: 0 0 0.5em 0;
		color: #fff;
		text-transform: none;
		letter-spacing: -0.02em;
		line-height: 1.2;
	}

	.spa-hero p {
		font-size: 1.3em;
		margin: 0 0 1.5em 0;
		opacity: 0.95;
		line-height: 1.6;
	}

	.spa-hero .button.primary {
		background: #fff;
		color: var(--color-primary-deep);
		font-size: 1.1em;
		padding: 1em 2.5em;
		border: none;
		font-weight: 700;
		transition: all 0.2s ease;
	}

	.spa-hero .button.primary:hover {
		background: #e0f0ff;
		color: #1e4a6e;
	}

	@media screen and (max-width: 736px) {
		.spa-hero {
			padding: 5em 1.5em 4em 1.5em;
		}

		.spa-hero h1 {
			font-size: 2em;
		}

		.spa-hero p {
			font-size: 1.1em;
		}

		.spa-about,
		.spa-services,
		.spa-contact {
			padding-left: 1.5em;
			padding-right: 1.5em;
		}
	}

/* About Section */
	.spa-about {
		background: var(--color-surface);
	}

	.spa-about .profile-layout {
		max-width: 1000px;
		margin: 0 auto;
	}

	.spa-about h2 {
		margin-bottom: 0.75em;
	}

	.spa-about p {
		margin-bottom: 1em;
		line-height: 1.7;
	}

	.spa-about .cta-text {
		margin-top: 1.5em;
		font-size: 1.1em;
	}

/* Services Section */
	.spa-services {
		background: var(--color-bg);
	}

	.section-header {
		text-align: center;
		margin-bottom: 3em;
	}

	.section-header h1,
	.section-header h2 {
		font-size: 2.2em;
		margin-bottom: 0.5em;
	}

	.section-header p {
		font-size: 1.2em;
		color: var(--color-text-secondary);
		max-width: 600px;
		margin: 0 auto;
		text-transform: none;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5em;
		max-width: 1100px;
		margin: 0 auto;
	}

	.service-card {
		background: var(--color-surface);
		border-radius: 12px;
		padding: 2.5em;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
		border: 1px solid var(--color-border);
		border-top: 4px solid var(--color-primary);
	}

	.service-icon {
		width: 60px;
		height: 60px;
		border-radius: 12px;
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5em;
		margin-bottom: 1.25em;
	}

	.service-card h3 {
		font-size: 1.5em;
		margin-bottom: 0.75em;
		color: var(--color-text);
	}

	.service-card > p {
		color: var(--color-text-secondary);
		line-height: 1.7;
		margin-bottom: 1.25em;
	}

	.service-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.5em;
	}

	.service-list li {
		padding-left: 1.5em;
		position: relative;
		color: var(--color-text-secondary);
		font-size: 0.95em;
	}

	.service-list li::before {
		content: '✓';
		position: absolute;
		left: 0;
		color: var(--color-accent-warm);
		font-weight: 700;
	}

	.services-cta {
		text-align: center;
		margin-top: 3em;
		padding-top: 2em;
	}

	.services-cta p {
		font-size: 1.2em;
		color: var(--color-text-secondary);
		margin-bottom: 1.25em;
	}

	.services-cta .button {
		display: inline-block;
		padding: 0.9em 2.5em;
		font-size: 1em;
	}

	@media screen and (max-width: 980px) {
		.services-grid {
			grid-template-columns: 1fr;
			gap: 2em;
		}
	}

	@media screen and (max-width: 736px) {
		.service-card {
			padding: 1.75em;
		}

		.services-cta {
			margin-top: 2em;
			padding: 0 1em;
		}

		.services-cta p {
			font-size: 1.1em;
			margin-bottom: 1em;
		}

		.services-cta .button {
			padding: 0.75em 2em;
			font-size: 0.95em;
			width: auto;
			max-width: 280px;
		}
	}

/* Contact Section */
	.spa-contact {
		background: var(--color-surface);
	}

	.contact-content {
		max-width: 600px;
		margin: 0 auto;
		text-align: center;
	}

	.contact-info {
		display: flex;
		justify-content: center;
		gap: 3em;
		margin-bottom: 2.5em;
	}

	.contact-item {
		display: flex;
		align-items: center;
		gap: 1em;
		text-align: left;
	}

	.contact-item i {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: var(--color-bg);
		color: var(--color-primary);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.2em;
		flex-shrink: 0;
		transition: color 0.2s ease;
	}

	.contact-icon-link {
		display: flex;
		text-decoration: none;
	}

	.contact-icon-link:hover i {
		color: var(--color-accent-warm);
	}

	.contact-item strong {
		display: block;
		font-size: 0.85em;
		color: var(--color-text-secondary);
		margin-bottom: 0.25em;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.contact-item a {
		color: var(--color-text);
		text-decoration: none;
		font-weight: 600;
		font-size: 1.05em;
	}

	.contact-item a:hover {
		color: var(--color-primary);
	}

	.contact-cta .button.primary.large {
		font-size: 1.15em;
		padding: 1.1em 3em;
		background: var(--color-accent-warm);
	}

	.contact-cta .button.primary.large:hover {
		background: #ea580c;
	}

	@media screen and (max-width: 736px) {
		.contact-info {
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
		}

		.contact-item {
			width: 100%;
			max-width: 280px;
		}
	}

/* ==========================================================================
   Blog Styles
   ========================================================================== */

/* Page Header */
	.page-header {
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
		color: #fff;
		text-align: center;
		padding: 6em 0 4em 0;
	}

	.page-header h1 {
		font-size: 2.5em;
		margin: 0 0 0.25em 0;
		color: #fff;
	}

	.page-header p {
		font-size: 1.2em;
		opacity: 0.9;
		margin: 0;
	}

/* Blog Grid */
	.blog-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2em;
		max-width: 1000px;
		margin: 0 auto;
	}

	@media screen and (max-width: 736px) {
		.blog-grid {
			grid-template-columns: 1fr;
		}
	}

/* Blog Card */
	.blog-card {
		background: var(--color-surface);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
		border: 1px solid var(--color-border);
	}

	.blog-card-content {
		padding: 2em;
	}

	.blog-card h2 {
		font-size: 1.4em;
		margin: 0.5em 0;
		line-height: 1.3;
	}

	.blog-card h2 a {
		color: var(--color-text);
		text-decoration: none;
	}

	.blog-card h2 a:hover {
		color: var(--color-primary);
	}

	.blog-card > .blog-card-content > p {
		color: var(--color-text-secondary);
		margin-bottom: 1em;
		line-height: 1.6;
	}

	.read-more {
		font-weight: 700;
		color: var(--color-primary-deep);
		text-decoration: none;
	}

	.read-more:hover {
		text-decoration: underline;
	}

/* Blog Meta */
	.blog-meta {
		display: flex;
		gap: 1em;
		font-size: 0.85em;
	}

	.blog-date {
		color: var(--color-text-secondary);
	}

	.blog-category {
		color: var(--color-primary);
		font-weight: 600;
	}

/* Blog Post */
	.blog-post {
		padding-top: 3em;
	}

	.blog-post-header {
		max-width: 700px;
		margin: 0 auto 2em auto;
		text-align: left;
	}

	.blog-post-header h1 {
		font-size: 2.2em;
		line-height: 1.3;
		margin: 0.5em 0 0 0;
	}

	.blog-post-content {
		max-width: 700px;
		margin: 0 auto;
	}

	.blog-post-content .lead {
		font-size: 1.2em;
		color: var(--color-text-secondary);
		line-height: 1.7;
		margin-bottom: 2em;
	}

	.blog-post-content h2 {
		font-size: 1.5em;
		margin: 2em 0 0.75em 0;
	}

	.blog-post-content h3 {
		font-size: 1.2em;
		margin: 1.5em 0 0.5em 0;
	}

	.blog-post-content p {
		line-height: 1.8;
		margin-bottom: 1em;
	}

	.blog-post-content ul {
		margin: 1em 0 1.5em 1.5em;
	}

	.blog-post-content li {
		margin-bottom: 0.5em;
		line-height: 1.6;
	}

	.blog-post-footer {
		max-width: 700px;
		margin: 3em auto 0 auto;
		padding-top: 2em;
	}

/* Blog Post Extended Styles
================================== */

	/* H4 Headings */
	.blog-post-content h4 {
		font-size: 1.1em;
		font-weight: 700;
		margin: 1.25em 0 0.5em 0;
		color: var(--color-fg);
	}

	/* Blockquotes */
	.blog-post-content blockquote {
		margin: 1.5em 0;
		padding: 1em 1.5em;
		border-left: 4px solid var(--color-primary);
		background: rgba(70, 130, 180, 0.05);
		font-style: italic;
		color: var(--color-fg-light);
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.blog-post-content blockquote p {
		margin-bottom: 0;
	}

	.blog-post-content blockquote p:last-child {
		margin-bottom: 0;
	}

	/* Inline Code */
	.blog-post-content code:not([class*="language-"]) {
		background: rgba(0, 0, 0, 0.05);
		padding: 0.15em 0.4em;
		border-radius: 3px;
		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
		font-size: 0.9em;
		color: #c7254e;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Tables - horizontal scroll on mobile */
	.blog-post-content table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Code Blocks - Prism.js overrides - force consistent sizing */
	pre[class*="language-"],
	pre[class*="language-"] *,
	pre[class*="language-"] *::before,
	pre[class*="language-"] *::after,
	.line-numbers-rows,
	.line-numbers-rows > span,
	.line-numbers-rows > span::before {
		font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	pre[class*="language-"] {
		margin: 1.5em 0;
		border-radius: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background: #2d2d2d;
		padding: 1em;
		white-space: pre-wrap;
		word-wrap: break-word;
		word-break: break-word;
	}

	pre[class*="language-"] code {
		color: #ccc;
		background: transparent;
	}

	/* Line numbers border */
	.line-numbers .line-numbers-rows {
		border-right: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Nested Lists - 3 levels */
	.blog-post-content ul {
		list-style-type: disc;
	}

	.blog-post-content ul ul {
		list-style-type: circle;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	.blog-post-content ul ul ul {
		list-style-type: square;
	}

	/* Ordered lists */
	.blog-post-content ol {
		margin: 1em 0 1.5em 1.5em;
		list-style-type: decimal;
	}

	.blog-post-content ol ol {
		list-style-type: lower-alpha;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	.blog-post-content ol ol ol {
		list-style-type: lower-roman;
	}

	/* Images with lightbox */
	.blog-post-content a.glightbox .blog-image {
		cursor: zoom-in;
	}

	.blog-post-content .blog-image {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 1.5em auto;
		cursor: default;
		border-radius: 4px;
		transition: opacity 0.2s ease;
	}

	.blog-post-content a.glightbox .blog-image:hover {
		opacity: 0.9;
	}

	/* Image Captions */
	.blog-post-content .blog-image-caption {
		display: block;
		text-align: center;
		font-size: 0.9em;
		color: var(--color-fg-light);
		margin-top: -1em;
		margin-bottom: 1.5em;
		font-style: italic;
	}

	/* Image figure wrapper */
	.blog-post-content figure {
		margin: 1.5em 0;
	}

	.blog-post-content figure img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.blog-post-content figcaption {
		text-align: center;
		font-size: 0.9em;
		color: var(--color-fg-light);
		margin-top: 0.5em;
		font-style: italic;
	}

	/* Floated figures for text wrap */
	.blog-post-content figure.float-right {
		float: right;
		max-width: 50%;
		margin: 0 0 1.5em 1.5em;
	}

	.blog-post-content figure.float-right + p,
	.blog-post-content figure.float-left + p {
		margin-top: 0;
	}

	.blog-post-content figure.float-right .blog-image,
	.blog-post-content figure.float-left .blog-image {
		margin: 0;
	}

	.blog-post-content figure.float-left {
		float: left;
		max-width: 50%;
		margin: 0 1.5em 1.5em 0;
	}

	/* Code blocks clear floats */
	.blog-post-content pre {
		clear: both;
	}

	/* Responsive: disable floats on mobile */
	@media screen and (max-width: 736px) {
		.blog-post-content figure.float-right,
		.blog-post-content figure.float-left {
			float: none;
			max-width: 100%;
			margin: 1.5em 0;
		}
	}

	/* Side-by-side figures */
	.blog-post-content .figures-row {
		display: flex;
		gap: 1.5em;
		margin: 1.5em 0;
	}

	.blog-post-content .figures-row figure {
		flex: 1;
		margin: 0;
	}

	.blog-post-content .figures-row .blog-image {
		margin: 0;
	}

	@media screen and (max-width: 736px) {
		.blog-post-content .figures-row {
			flex-direction: column;
		}
	}

	/* Update Notices */
	.blog-update-notice {
		background: rgba(78, 191, 107, 0.1);
		border: 1px solid var(--color-accent-bg);
		border-radius: 4px;
		padding: 1em 1.25em;
		margin: 1.5em 0;
		font-size: 0.95em;
	}

	.blog-update-notice strong {
		color: var(--color-accent-bg);
	}

	/* Prev/Next Navigation */
	.blog-post-nav {
		max-width: 700px;
		margin: 3em auto;
		padding: 2em 0;
		border-top: 1px solid var(--color-border);
		display: flex;
		justify-content: space-between;
		gap: 2em;
	}

	.blog-post-nav a {
		color: var(--color-primary-deep);
		text-decoration: none;
		font-size: 0.95em;
		display: flex;
		align-items: flex-start;
		gap: 0.5em;
		transition: color 0.2s ease;
		line-height: 1.4;
	}

	.blog-post-nav a:hover {
		color: var(--color-accent);
	}

	.blog-post-nav .prev {
		text-align: left;
	}

	.blog-post-nav .next {
		text-align: right;
		margin-left: auto;
	}

	.blog-post-nav a span {
		flex-shrink: 0;
	}

	.blog-post-nav .arrow {
		font-size: 1.1em;
	}

/* Blog Pagination
================================== */

	.blog-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1em;
		margin: 3em 0;
		padding: 2em 0;
	}

	.blog-pagination a,
	.blog-pagination span {
		padding: 0.5em 1em;
		border: 1px solid var(--color-border);
		border-radius: 4px;
		text-decoration: none;
		font-size: 0.9em;
		transition: all 0.2s ease;
	}

	.blog-pagination a {
		color: var(--color-fg);
	}

	.blog-pagination a:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
		color: white;
	}

	.blog-pagination .current {
		background: var(--color-primary);
		border-color: var(--color-primary);
		color: white;
	}

	.blog-pagination .disabled {
		color: var(--color-fg-light);
		cursor: not-allowed;
		opacity: 0.5;
	}

/* RSS Feed Link
================================== */

	.blog-rss-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		color: var(--color-primary-deep);
		text-decoration: none;
		font-size: 0.9em;
	}

	.blog-rss-link:hover {
		text-decoration: underline;
	}

	.blog-rss-link svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

/* GLightbox overrides
================================== */

	.glightbox-container .gslide-description {
		background: rgba(0, 0, 0, 0.8);
	}

	.glightbox-container .gslide-title {
		font-family: 'Open Sans', sans-serif;
		font-size: 0.95em;
	}

	/* Make close button more visible */
	.glightbox-clean .gclose {
		width: 40px !important;
		height: 50px !important;
	}

	.glightbox-clean .gclose svg {
		width: 25px !important;
		height: 25px !important;
		stroke: #fff !important;
	}

	.glightbox-clean .gclose path,
	.glightbox-clean .gclose line {
		stroke: #fff !important;
		fill: none !important;
	}

	.glightbox-clean .gclose,
	.glightbox-clean .gnext,
	.glightbox-clean .gprev {
		background-color: rgba(255, 255, 255, 0.25) !important;
	}

	.glightbox-clean .gclose:hover,
	.glightbox-clean .gnext:hover,
	.glightbox-clean .gprev:hover {
		background-color: rgba(255, 255, 255, 0.5) !important;
	}

	.glightbox-clean .gnext path,
	.glightbox-clean .gprev path {
		fill: #fff !important;
	}

/* Mobile Code Block Scrolling
================================== */

	@media screen and (max-width: 736px) {
		.blog-post-content pre[class*="language-"] {
			font-size: 0.8em;
			padding: 1em;
			margin-left: -1em;
			margin-right: -1em;
			border-radius: 0;
		}

		.blog-post-nav {
			gap: 1em;
		}

		.blog-post-nav a {
			flex: 1;
			max-width: 50%;
		}

		.blog-post-nav .prev {
			justify-content: flex-start;
		}

		.blog-post-nav .next {
			justify-content: flex-end;
			margin-left: auto;
		}

		.blog-grid {
			grid-template-columns: 1fr;
		}
	}