/* Bonus Vision — design tokens kept from the original Hyperspace-based site. */

:root {
	--bg: #253149;
	--blue: #4167a6;
	--blue-dark: #335081;
	--teal: #3f8eb3;
	--green: #4ca07e;
	--nav-track: #2e3c5a;
	--text: rgba(255, 255, 255, 0.55);
	--muted: rgba(255, 255, 255, 0.35);
	--faint: rgba(255, 255, 255, 0.15);
	--tint: rgba(255, 255, 255, 0.05);
	--white: #fff;
	--font-body: "Montserrat", sans-serif;
	--font-heading: "Roboto", sans-serif;
	--sidebar-width: 18em;
	--topbar-height: 3.5em;
	--reveal: 1s ease;
}

/* Base ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: none;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16.5pt/1.75 var(--font-body);
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	color: var(--white);
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.5;
}

h1 { font-size: 2.75em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

p { margin: 0 0 2em; }
b, strong { color: var(--white); font-weight: 700; }

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--muted);
	transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

a:hover { color: var(--white); border-bottom-color: transparent; }

address { font-style: normal; }
ul { margin: 0 0 2em; padding: 0; list-style: none; }

/* Sidebar navigation ---------------------------------------------------- */

#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: var(--sidebar-width);
	height: 100vh;
	padding: 2.5em;
	background: var(--bg);
	text-align: right;
	transition: opacity 1s ease;
}

#sidebar ul { margin: 0; }
#sidebar li { margin-top: 1.5em; transition: opacity 0.15s ease, transform 0.75s ease; }
#sidebar li:first-child { margin-top: 0; }
#sidebar li:nth-child(1) { transition-delay: 0.45s; }
#sidebar li:nth-child(2) { transition-delay: 0.65s; }
#sidebar li:nth-child(3) { transition-delay: 0.85s; }
#sidebar li:nth-child(4) { transition-delay: 1.05s; }

#sidebar a {
	position: relative;
	display: block;
	padding: 1.35em 0;
	border: 0;
	color: var(--muted);
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.25em;
	line-height: 1.75;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

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

#sidebar a::before { background: var(--nav-track); }
#sidebar a::after {
	max-width: 0;
	background-image: linear-gradient(to right, var(--blue), var(--green));
	transition: max-width 0.2s ease;
}

#sidebar a:hover { color: var(--text); }
#sidebar a.is-active { color: var(--white); }
#sidebar a.is-active::after { max-width: 100%; }

/* Before the page is ready the sidebar fades/slides in (as the original did). */
body:not(.is-ready) #sidebar { opacity: 0; }
body:not(.is-ready) #sidebar li { opacity: 0; transform: translateY(2em); }

/* Panels ---------------------------------------------------------------- */

main, #footer { margin-left: var(--sidebar-width); }

.panel { position: relative; }
.panel > .inner { width: 75em; max-width: 100%; padding: 5em 5em 3em; }

.style1 { background: var(--blue); }
.style1-alt { background: var(--blue-dark); }
.style2 { background: var(--teal); }
.style3 { background: var(--green); }

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

/* Scroll reveal: elements start hidden and get .is-visible from main.js. */
.reveal {
	opacity: 0;
	transform: translateY(1em);
	transition: opacity var(--reveal), transform var(--reveal);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* Intro ----------------------------------------------------------------- */

#intro {
	background-image: url("/logo.svg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 40% 40%;
	background-attachment: fixed;
}

#intro .tagline { font-size: 1.25em; }
.values li { padding: 0.5em 0; }
.values li:first-child { padding-top: 0; }

/* Spotlights (Who we are) ----------------------------------------------- */

.spotlight {
	display: flex;
	min-height: 22.5em;
}

.spotlight:nth-child(2) { background: rgba(0, 0, 0, 0.05); }
.spotlight:nth-child(3) { background: rgba(0, 0, 0, 0.1); }

.testimonial {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 25em;
	flex-shrink: 0;
	margin: 0;
	padding: 4em 5em 2em;
	background: rgba(70, 72, 82, 0.2);
	font-style: italic;
}

.testimonial footer {
	margin-bottom: 2em;
	color: var(--white);
	font-family: var(--font-heading);
	font-style: normal;
}

.spotlight .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50em;
	max-width: 100%;
	padding: 4em 5em 2em;
}

.spotlight .reveal { transform: translateX(-1em); }
.spotlight .reveal.is-visible { transform: none; }

/* Features (What we do) ------------------------------------------------- */

.features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 2em;
	border: 1px solid var(--faint);
	border-radius: 0.25em;
	background: var(--tint);
}

.features section {
	position: relative;
	padding: 3.5em 3em 1em 7em;
	border-top: 1px solid var(--faint);
}

.features section:nth-child(-n + 2) { border-top: 0; }
.features section:nth-child(2n) { border-left: 1px solid var(--faint); }

.features .icon {
	position: absolute;
	top: 3em;
	left: 3em;
	width: 2.5em;
	height: 2.5em;
	padding: 0.65em;
	border-radius: 50%;
	background: var(--white);
	fill: none;
	stroke: var(--green);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.features section:nth-child(1) .icon { transition-delay: 0.15s; }
.features section:nth-child(2) .icon { transition-delay: 0.3s; }
.features section:nth-child(3) .icon { transition-delay: 0.45s; }
.features section:nth-child(4) .icon { transition-delay: 0.6s; }
.features section:nth-child(5) .icon { transition-delay: 0.75s; }
.features section:nth-child(6) .icon { transition-delay: 0.9s; }

.reveal:not(.is-visible) .features .icon { opacity: 0; transform: scale(0.5); }

/* Contact --------------------------------------------------------------- */

.contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: 2em;
	padding-top: 2em;
	border-top: 1px solid var(--faint);
}

.contact > li { margin: 0; }
.contact a { border: 0; }

.icons { display: flex; gap: 0.75em; }
.icons svg {
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Footer ---------------------------------------------------------------- */

#footer .inner { padding: 5em 5em 3em; }
#footer p { margin: 0; color: var(--faint); font-size: 0.8em; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1680px) {
	body { font-size: 13pt; }
	.panel > .inner, #footer .inner { padding: 4em 4em 2em; }
	.spotlight .content { padding: 4em 4em 2em; }
}

@media (max-width: 1280px) {
	body { font-size: 12pt; }
	html { scroll-padding-top: var(--topbar-height); }
	main, #footer { margin-left: 0; }
	main { padding-top: var(--topbar-height); }
	.panel > .inner { width: 100%; }
	.fullscreen { min-height: calc(100vh - var(--topbar-height)); }

	/* Sidebar becomes a fixed top bar. */
	#sidebar {
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: var(--topbar-height);
		padding: 0;
		text-align: center;
	}

	#sidebar ul { display: flex; gap: 2em; height: 100%; }
	#sidebar li { margin: 0; }
	#sidebar a { padding: 0; line-height: var(--topbar-height); }
	#sidebar a::after { background-image: none; background-color: var(--green); }
}

@media (max-width: 980px) {
	.spotlight { display: block; }
	.testimonial, .spotlight .content { width: 100%; }
	.spotlight .reveal { transform: translateY(1em); }
}

@media (max-width: 736px) {
	h1 { font-size: 2em; }
	h2 { font-size: 1.25em; }
	h3 { font-size: 1em; }
	#sidebar { display: none; }
	html { scroll-padding-top: 0; }
	main { padding-top: 0; }
	.panel > .inner, #footer .inner, .testimonial, .spotlight .content { padding: 3em 2em 1em; }
	.fullscreen { min-height: 0; padding: 2em 0; }
	.features { grid-template-columns: 1fr; }
	.features section { padding: 3em 2em 1em 6em; }
	.features section:nth-child(2) { border-top: 1px solid var(--faint); }
	.features section:nth-child(2n) { border-left: 0; }
	.features .icon { top: 2.5em; left: 2em; }
}

@media (max-width: 360px) {
	body { font-size: 11pt; }
}

/* Fixed backgrounds are expensive on touch devices, and scroll-reveal
   motion should respect the user's preference. */
@media (hover: none) {
	#intro { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .features .icon, #sidebar, #sidebar li { transition: none; }
}