#mainblurb-keywords-row, #mainblurb-keywords-row .mainblurb-keyword {
	color: #0a2342 !important;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
}
 #mainblurb-keywords-row {
  position: fixed;
  top: calc(5rem + 0.5em); /* 5rem = logo font size, adjust as needed */
  left: 2rem;
  transform: none;
  width: max-content;
  max-width: 90vw;
  z-index: 10001;
}
/* Mainblurb keywords row under logo */
#mainblurb-keywords-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5em; /* reduced spacing between keywords */
	margin-top: 0.5em;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.4s;
}
#mainblurb-keywords-row.visible {
	opacity: 1 !important;
	pointer-events: auto !important;
}
/* Force keywords to always stay visible - override any JavaScript changes */
#mainblurb-keywords-row {
	opacity: 1 !important;
	pointer-events: auto !important;
}
#mainblurb-keywords-row .mainblurb-keyword {
	color: #0a2342 !important;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	background: #fff;
	padding: 0 0.2em;
	border-radius: 0.2em;
	box-shadow: 0 2px 8px 0 rgba(10,35,66,0.04);
	z-index: 1001;
	font-size: 1em;
	transition: background 0.3s, box-shadow 0.3s;
}
/* Logo always visible at top left - no animation */
#company-name {
	position: fixed;
	left: 2rem;
	top: 2rem;
	bottom: auto;
	font-size: 5rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	color: #0a2342 !important;
	transform: translateY(0);
	z-index: 10000;
	/* Always visible at top, no scroll animation */
}
#mainblurb-keywords-row .mainblurb-keyword {
	font-size: 1em;
}
/* Mainblurb keyword styling */
.mainblurb-keyword {
	color: #0a2342 !important;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	background: #fff;
	padding: 0 0.2em;
	border-radius: 0.2em;
	transition: opacity 0.3s, box-shadow 0.3s, background 0.3s;
	box-shadow: 0 2px 8px 0 rgba(10,35,66,0.04);
	z-index: 1001;
}
html, body {
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar, html::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera, Edge (Chromium) */
}

/* Hide vertical scrollbar for all browsers */
body {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar {
	body {
		margin: 0;
		font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
		background: #fff;
		color: var(--blue-dark);
		min-height: 100vh;
		overflow-x: hidden;
	}
	display: none; /* Chrome, Safari, Opera */
}
:root {
	--blue-dark: #0a2342;
	--blue-mid: #19335a;
	--white-bone: #f8f8f5;
	--white-crisp: #ffffff;
	#scroll-content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		position: relative;
		z-index: 1;
		background: #fff;
		color: var(--blue-dark);
	}
	--accent1: #4fd1c5;
	--accent2: #fbbf24;
	--accent3: #f87171;
}

body {
	margin: 0;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	background: #fff !important;
	color: var(--blue-dark) !important;
	min-height: 100vh;
	overflow-x: hidden;
}

#scroll-content {
	display: flex;
	.feature-section:first-child {
		background: #fff;
		color: var(--blue-dark);
	}
	flex-direction: column;
	width: 100vw;
	position: relative;
	z-index: 1;
}

#features, #compelling {
	width: 100vw;
}


#contact {
	min-height: 100vh;
	display: flex;
	.compelling-section {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		color: var(--blue-dark);
		font-size: 2rem;
		font-weight: 500;
		opacity: 0;
		border: none;
		transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
	}
	align-items: center;
	justify-content: center;
	background: #f8f8f5;
	color: var(--blue-dark);
	font-size: 1.5rem;
	border-top: 2px solid #4fd1c5;
}

#footer {
	min-height: 30vh;
	#contact {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		color: var(--blue-dark);
		font-size: 1.5rem;
		border-top: 2px solid #4fd1c5;
	}
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #19335a;
	color: var(--white-bone);
	font-size: 1rem;
	border-top: 2px solid #4fd1c5;
}

#company-name {
	position: fixed;
	left: 2rem;
	top: 2rem;
	bottom: auto;
	font-size: 4rem;
	font-family: 'Roboto Flex', sans-serif;
	font-weight: 400;
	color: #0a2342 !important;
	z-index: 100;
	transform: translateY(0);
	transition: transform 1.8s cubic-bezier(.77,0,.18,1);
}

#main-blurb {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.2rem;
	text-align: center;
	color: var(--white-crisp);
	background: rgba(10,35,66,0.99); /* more opaque to fully hide text behind */
	padding: 2rem 3rem;
	border-radius: 1.5rem;
	box-shadow: 0 8px 32px rgba(10,35,66,0.2);
	z-index: 999;

	opacity: 1;
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
	pointer-events: auto;
}
#main-blurb #blurb-features {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: center;
}
#main-blurb .feature-item {
	color: #0a2342 !important;
	background: #fff;
	padding: 0.6rem 1rem;
	border-radius: 0.75rem;
	box-shadow: 0 4px 16px rgba(10,35,66,0.08);
	font-size: 1.4rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	max-width: 70vw;
	line-height: 1.3;
	opacity: 1;
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
}

#main-blurb-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	gap: 3rem;
	align-items: flex-start;
	justify-content: center;
	z-index: 9999;
}
#main-blurb-wrapper #main-blurb, #main-blurb-wrapper #main-blurb-duplicate {
	position: static !important;
	transform: none !important;
	width: auto;
	max-width: 40vw;
}
/* Mobile full-width overrides */
html.is-mobile #main-blurb {
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50%;
	transform: translate(-50%, -50%) !important; /* keep vertical centering while allowing full width */
	border-radius: 0; /* optional: edge-to-edge; remove if not desired */
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
html.is-mobile #main-blurb-wrapper {
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	gap: 1.5rem;
	flex-direction: column; /* stack on mobile */
	align-items: center;
}
/* Mobile scrollbox to contain main + duplicate blurbs without covering logo/footer */
html.is-mobile #mobile-blurb-scrollbox {
	position: fixed;
	top: calc(5rem + 3.5rem); /* below logo + keywords row */
	left: 0;
	right: 0;
	bottom: 15vh; /* leave space so footer can appear */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0.5rem 0 1rem 0;
	z-index: 500; /* below footer (12000) and below any high overlay, above background */
}
html.is-mobile #mobile-blurb-scrollbox::-webkit-scrollbar { display: none; }
html.is-mobile #mobile-blurb-scrollbox { scrollbar-width: none; }
html.is-mobile #mobile-blurb-scrollbox #main-blurb-wrapper {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	gap: 1.25rem;
	padding: 0 0.75rem;
}
html.is-mobile #mobile-blurb-scrollbox #main-blurb,
html.is-mobile #mobile-blurb-scrollbox #main-blurb-duplicate {
	position: static !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
	border-radius: 1rem; /* keep some rounding inside box */
}
html.is-mobile #mobile-blurb-scrollbox #main-blurb-duplicate { font-size: 1.5rem; }
/* Mobile: position company name (logo) at top center */
html.is-mobile #company-name {
	top: 1rem !important;
	bottom: auto !important;
	left: 50% !important;
	transform: translate(-50%, 0) !important;
	font-size: 3.5rem; /* optional adjust */
	margin-bottom: 0 !important;
}
/* Mobile: center keywords row below centered logo */
html.is-mobile #mainblurb-keywords-row {
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	max-width: 90vw !important;
	text-align: center;
	justify-content: center;
	margin-top: 0 !important;
}

/* Mobile: lift footer slightly (half font size ~0.5rem) */
html.is-mobile #main-footer {
	top: auto !important;
	bottom: 0.5rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important; /* keep horizontal centering only */
	width: 100vw !important;
	max-width: 100vw !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	font-size: 0.7rem !important;
	line-height: 1.1 !important;
}

/* Mobile vertical centering container to ensure space for contact panel */
html.is-mobile body {
	min-height: 100vh;
	/* Revert flex centering which was causing off-screen issues on some mobile browsers */
	display: block;
	padding: 0;
}
/* Ensure core mobile elements remain fixed & centered */
html.is-mobile #company-name { position: fixed !important; }
html.is-mobile #mainblurb-keywords-row { position: fixed !important; }
html.is-mobile #message-rotator { position: fixed !important; }
html.is-mobile #contact-panel { position: fixed !important; }
html.is-mobile #contact-panel { margin-top: 0; }

/* Contact panel (appears after last message) */
#contact-panel-wrapper { width: 100%; display: flex; justify-content: center; }
#contact-panel {
	position: relative;
	margin: 2rem auto 3rem auto;
	max-width: 640px;
	background: #ffffff;
	color: #0b2c52; /* Dark blue text */
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	z-index: 5000;
	text-align: center;
}
#contact-panel.visible { opacity: 1; transform: translateY(0); }
#contact-panel .contact-inner { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
#contact-panel .contact-line { font-weight: 500; }
#contact-panel .contact-line a { color: #0b4b9e; text-decoration: none; font-weight: 600; }
#contact-panel .contact-line a:hover { text-decoration: underline; }

html.is-mobile #contact-panel-wrapper { display: flex; justify-content: center; }
html.is-mobile #contact-panel {
	width: 92vw;
	max-width: 92vw;
	left: 50%;
	transform: translate(-50%, 16px);
}
html.is-mobile #contact-panel.visible { transform: translate(-50%, 0); }
/* Rotating features/messages container - works on all screen sizes */
#message-rotator {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 70%; /* will be adjusted dynamically via JS for precise below-blurb placement */
	width: 90vw;
	max-width: 600px; /* larger max-width for desktop */
	text-align: center;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-size: 1.1rem;
	color: #0a2342;
	background: rgba(255,255,255,0.9);
	padding: 0.75rem 1rem;
	border-radius: 0.85rem;
	box-shadow: 0 4px 18px rgba(10,35,66,0.08);
	z-index: 400; /* below footer (12000) and below blurb (9999) */
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
#message-rotator.visible { 
	opacity: 1; 
	pointer-events: auto;
}
/* Mobile-specific adjustments for the rotator */
html.is-mobile #message-rotator {
	width: 90vw;
	max-width: 90vw;
	font-size: 1.1rem;
}
html.is-mobile #main-blurb-wrapper #main-blurb,
html.is-mobile #main-blurb-wrapper #main-blurb-duplicate {
	width: 100vw !important;
	max-width: 100vw !important;
	border-radius: 0;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
html.is-mobile #main-blurb-duplicate {
	font-size: 1.6rem; /* scale slightly down for mobile readability */
}
#main-blurb-duplicate {
	background: #fff;
	color: #0a2342;
	padding: 2rem 3rem;
	border-radius: 1.5rem;
	box-shadow: 0 8px 32px rgba(10,35,66,0.08);
	font-size: 2rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
}
#duplicate-messages {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	align-items: center; /* center messages horizontally */
}

.message-item {
	background: #ffffff; /* changed to white */
	color: #0a2342;
	padding: 0.8rem 1.1rem;
	border-radius: 0.75rem;
	box-shadow: 0 2px 12px rgba(10,35,66,0.06);
	font-size: 1.2rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	line-height: 1.35;
	transition: opacity 0.6s cubic-bezier(.77,0,.18,1);
	text-align: center; /* center text inside message */
}
#main-blurb {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.2rem;
	text-align: center;
	color: var(--blue-dark);
	background: #fff;
	padding: 2rem 3rem;
	border-radius: 1.5rem;
	box-shadow: 0 8px 32px rgba(10,35,66,0.08);
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
	pointer-events: auto;
	width: auto;
	max-width: 90vw;
	left: 50%;
	right: auto;
}

.compelling-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: #0a2342 !important;
	text-align: center !important;
	font-size: 2rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	opacity: 0;
	/* border removed */
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
}
.compelling-section.visible {
	opacity: 1;
}

#contact {
	background: #fff !important;
	color: #0a2342 !important;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
	padding: 3rem 0 1rem 0;
	text-align: center;
	font-size: 1.2rem;
	z-index: 1;
	position: relative;
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
	pointer-events: none;
}
#contact.visible {
	opacity: 1;
	pointer-events: auto;
}
#footer {
	background: var(--blue-mid);
	color: var(--white-bone);
	text-align: center;
	padding: 1rem 0 0.5rem 0;
	font-size: 1rem;
}
#footer a {
	color: var(--accent1);
	margin: 0 0.5rem;
	text-decoration: underline;
}
footer {
	background: #fff !important;
	color: #0a2342 !important;
	text-align: center;
	padding: 1rem 0 0.5rem 0;
	font-size: 1rem;
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif !important;
}
footer a {
	color: #0a2342 !important;
	margin: 0 0.5rem;
	text-decoration: underline;
}

/* Ensure main footer uses dark blue text and links */
#main-footer { 
	color: #0a2342 !important; 
	opacity: 1 !important;
	pointer-events: auto !important;
	position: fixed !important;
	bottom: 1rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 12000 !important;
	background: #fff !important;
}
#main-footer a { color: #0a2342 !important; }