/** *************************************	Hand Coded by Jason Marsh: Q1 2024************************************** **/
/* fonts */@font-face { font-family:'SohneLight'; src:url('webfonts/sohne-light.woff2') format('woff2'), url('webfonts/sohne-light.woff') format('woff'); font-weight: normal; font-style: normal; font-display:swap; }@font-face { font-family:'SohneRegular'; src:url('webfonts/sohne-regular.woff2') format('woff2'), url('webfonts/sohne-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display:swap; }@font-face { font-family:'SohneSemiBold'; src:url('webfonts/sohne-semibold.woff2') format('woff2'), url('webfonts/sohne-semibold.woff') format('woff'); font-weight: normal; font-style: normal; font-display:swap; }@font-face { font-family:'SohneBold'; src:url('webfonts/sohne-bold.woff2') format('woff2'), url('webfonts/sohne-bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display:swap; }

/* Reset Box Model */*, *::before, *::after { box-sizing: border-box; }* { margin: 0; }body { line-height:1.5; -webkit-font-smoothing:antialiased; }img,picture,video,canvas,svg { display:block; max-width:100%; }input,button,textarea,select { font:inherit; }p,h1,h2,h3,h4,h5,h6 { overflow-wrap:break-word; }
/* Global Tag Styles */html { cursor:default; min-height:100vh; background-color:#04192c; scroll-behavior:smooth; overflow-anchor:none; }body { overflow-x:hidden; height:auto; min-height:100vh; max-height:fit-content; color:#b7cbd6; font-size:18px; line-height:26px; margin:0 auto; display:flex; flex-direction:column; position:relative; z-index:1; font-family:'SohneLight',sans-serif;  }h1,h2,h3,h4,h5,h6 { font-family:'SohneSemiBold','AvenirNext-DemiBold',sans-serif; font-weight:normal; }p { margin-top:18px; }a { text-decoration:none; }::selection { background-color:rgba(5,154,124,0.5); color:#fff; }:target { scroll-margin-top:60px; }
@media screen and (max-width:640px) {	html { padding: env(safe-area-inset); }	html,body { min-height:initial; }	body { height:100dvh; }}
/* Global Class Styles */.blur { filter:blur(10px); }.sl { font-family:'SohneLight','AvenirNext-Regular',sans-serif; }.sr { font-family:'SohneRegular','AvenirNext-Medium',sans-serif; }.ssb { font-family:'SohneSemiBold','AvenirNext-DemiBold',sans-serif; }.sb { font-family:'SohneBold','AvenirNext-Bold',sans-serif; }.noHover:hover { cursor:default !important; }

/* Layout Style #2 */#container { position:relative; z-index:1; width:100%; max-width:1280px; padding:0 70px; margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 0px 12px 2px #04192c; }	#container > div { display:flex; flex-direction:column; }/*	#container > div:first-child { max-height:100vh; flex:0 0 40%; position:sticky; top:0; }	#container > div:last-child { flex:0 0 58%; padding-bottom:80px; }*/
		/* Header */		header { flex:1; display:flex; justify-content:space-between; padding-top:60px; }		header h1,		header h2 { color:#e2e8f0; }		header h1 { font-family:'SohneSemiBold','AvenirNext-DemiBold',sans-serif; font-size:36px; line-height:36px; }		header h2 { font-family:'SohneRegular','AvenirNext-Medium',sans-serif; font-size:18px; line-height:24px; margin-top:12px; }		header p span:after { content:'\a'; white-space:pre; }		header .icons { display:flex; align-items:end; justify-content:space-between; }		header .icons a:not(:first-child) { margin-left:20px; }		header .icons a { color:#b7cbd6; font-size:18px; line-height:20px; letter-spacing:1px; display:inline-block; transition:color 0.5s ease; }		header .icons a img,		header .icons a svg { max-width:20px !important; }		header .icons a path { transition:fill 0.5s ease; }		header .icons a:hover { color:rgba(255,170,128,1); }		header .icons a:hover path { fill:rgba(255,170,128,1); }
		/* Main */		main { display:flex; flex-direction:column; flex:1; padding-top:80px; }			.about { padding:0 166px 60px; letter-spacing:-0.5px; display:flex; flex-direction:column; justify-content:center; }			.about h2 { font-size:68px; line-height:72px; }			.about p { font-size:24px; line-height:32px; }
			main > section:last-child { margin-bottom:0; }				main > section > div { position:relative; margin-top:60px; display:flex; justify-content:space-between; }				main > section > div:before { content:''; display:block; position:absolute; opacity:0; z-index:0; top:-24px; left:-24px; width:calc(100% + 48px); height:calc(100% + 48px); background-color:rgba(45,69,91,0.4); border:1px solid rgba(229,232,235,0.2); border-right-color:rgba(229,232,235,0.05); border-left-color:rgba(229,232,235,0.1); border-bottom-color:rgba(229,232,235,0.05); border-radius:8px; box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2); transition:opacity 0.3s ease; }				/*main > section > div:hover { cursor:pointer; }*/				/*main > section > div:hover:before { opacity:0.7; }*/				main > section > div > div { position:relative; z-index:1; display:flex; flex-direction:column; }				main > section > div > div.time { font-family:'SohneRegular','AvenirNext-Regular',sans-serif; flex:0 0 150px; margin-right:16px; flex-wrap:nowrap; color:#7890a6; font-size:12px; text-transform:uppercase; letter-spacing:1px; }				main > section > div > div.work { flex:1; }					main > section > div > div.work h1,					main > section > div > div.work h2 { font-size:18px; line-height:24px; }					main > section > div > div.work h1 { font-family:'SohneSemiBold','AvenirNext-DemiBold',sans-serif; color:#e2e8f0; letter-spacing:1px; }					main > section > div > div.work h2 { font-family:'SohneRegular','AvenirNext-Regular',sans-serif; color:#7890a6; }					main > section > div > div.work p { font-size:16px; line-height:22px; margin-top:8px; }					main > section > div > div.work ul { list-style:none; padding:0; display:inline-flex; flex-wrap:wrap; }						main > section > div > div.work ul li { white-space:nowrap; font-family:'SohneRegular','AvenirNext-Regular',sans-serif; font-size:14px; line-height:14px; letter-spacing:1px;  border-radius:9999px; padding:7px 12px 6px; margin-right:6px; margin-top:8px; }						main > section > div > div.work ul li.code { color:rgba(0,255,204,0.8); background-color:rgba(5,154,124,0.3); }						main > section > div > div.work ul li.skill { color:rgba(0,255,204,0.8); background-color:rgba(5,154,124,0.3); }						main > section > div > div.work ul li.soft { color:rgba(255,192,0,0.8); background-color:rgba(154,124,5,0.3); }						main > section > div > div.work ul li.misc { font-family:'SohneSemiBold','AvenirNext-DemiBold',sans-serif; color:#04192c; background-color:rgba(230,230,230,0.4); }
			nav { margin:0 auto; width:calc(100% - 332px); display:block; justify-content:space-evenly; position:sticky; top:0; z-index:9; background-color:#2e4255; padding:16px 0 15px; border-radius:999px; text-align:center; align-self:center; text-transform:uppercase; font-size:16px; line-height:16px; box-shadow:0 1px 2px 1px rgba(0,0,0,0.5); }			nav a { margin-right:10%; display:inline-block; color:#e3e8f0; text-shadow:1px 1px 1px #000; letter-spacing:1px; transition:color 0.5s ease, left 0.5s ease, margin-right 0.5s ease, width 0.5s ease; }			nav a:hover { color:rgba(255,170,128,1); }			nav a:first-of-type { width:0; overflow:hidden; margin-right:0; }			nav a.active { width:auto; overflow:visible; margin-right:10%; }			nav a:last-of-type { margin-right:0; }
			.clientele { margin-top:60px; display:flex; flex-wrap:wrap; justify-content:space-evenly; }			.clientele > div { flex:0 0 25%; }			.clientele > div.logos { flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:space-evenly; padding:20px; margin-bottom:40px; }			.clientele > div.logos img { max-width:256px; max-height:40px; padding:0 20px; margin:10px 0; display:inline-block; opacity:0.4; transition:opacity 0.5s ease; }			.clientele > div.logos img:hover { opacity:0.6; }			.clientele > div h1 { font-size:16px; line-height:18px; }			.clientele > div p { font-size:14px; line-height:normal; opacity:0.8; margin:0 0 24px; }			.clientele > div p span { display:block; padding-top:10px; }
			.projects { margin-top:50px; }			.showcase { position:relative; display:flex; margin-bottom:30px; }			.showcase .screen { max-width:fit-content; display:inline-block; background-color:#000; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.6); border-radius:8px; overflow:hidden; border:1px solid rgba(229,232,235,0.2); border-right-color:rgba(229,232,235,0.05); border-left-color:rgba(229,232,235,0.1); border-bottom-color:rgba(229,232,235,0.05); border-radius:8px; box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2); }			.showcase .screen > img { width:50vw; height:auto; max-width:640px; max-height:400px; opacity:0.7; mix-blend-mode:screen; }			.showcase .detail { position:absolute; right:0; top:0; height:100%; width:100%; max-width:50%; display:flex; flex-direction:column; justify-content:center; align-items:end; }			.showcase .detail > img { width:8vw; height:auto; max-width:150px; min-width:100px; max-height:100px; }			.showcase .detail > div { display:block; padding:20px; margin:20px 0; background-color:#123859; border-radius:8px; box-shadow:0 2px 2px 0 rgba(4,25,44,0.6); border:1px solid rgba(229,232,235,0.2); border-right-color:rgba(229,232,235,0.05); border-left-color:rgba(229,232,235,0.1); border-bottom-color:rgba(229,232,235,0.05); border-radius:8px; box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2); }			.showcase .detail > p { padding:0 20px; margin:0; }			.showcase:nth-of-type(2) { flex-direction:row-reverse; }			.showcase:nth-of-type(2) .detail { right:initial; left:0; align-items:start; }
			.experience { margin-top:60px; }			.experience > div:nth-of-type(1) { margin-top:0; }
			.kudos { position:relative; margin-top:100px; overflow-y:hidden; height:0; transition:height 0.5s linear; }			.kudos h1 { position:absolute; opacity:0; width:100%; font-weight:normal; font-size:18px; }			.kudos h1.animate { animation:fade 20s linear; }			.kudos h1 span { display:block; text-align:right; }			.kudos h1 span.sl { font-size:16px; }			.kudos h1 span:first-child { padding-top:10px; }
		/* Footer */		footer { display:flex; justify-content:space-between; padding-top:30px; margin:80px 0 40px; border-top:1px solid rgba(226,232,240,0.25); font-size:14px; line-height:16px; }		footer .cr { opacity:0.6; }		footer .icons { display:flex; align-items:end; justify-content:space-between; }		footer .icons a:not(:first-child) { margin-left:20px; }		footer .icons a { color:#b7cbd6; font-size:18px; line-height:20px; letter-spacing:1px; display:inline-block; transition:color 0.5s ease; }		footer .icons a img,		footer .icons a svg { max-width:20px !important; }		footer .icons a path { transition:fill 0.5s ease; }		footer .icons a:hover { color:rgba(255,170,128,1); }		footer .icons a:hover path { fill:rgba(255,170,128,1); }

@media screen and (max-width:1279px) {	main > section.about { padding:0 86px 60px; }	main > section.about h2 { font-size:56px; line-height:62px; }	main > section.about p { font-size:22px; line-height:30px; }	main > section > div { flex-wrap:wrap; }	.showcase {  }}
@media screen and (max-width:1023px) {	body, p { font-size:16px; }	#container { flex-direction:column; padding:0 50px; }		#container > div:first-child { flex:none; position:static; }			#container > div:first-child footer { padding-bottom:0; margin-top:30px; }		#container > div:last-child { flex:1; }		main > section > div:before { display:none; }	header { padding-top:40px; }	header h1 { font-size:28px; line-height:28px; }	header h2 { font-size:16px; line-height:22px; }
	/*header p span:after { display:none; }*/
	main { padding-top:50px; }		main > section.about { padding:0 60px 60px; min-height:0; }			main > section.about h2 { font-size:48px; line-height:52px; }			main > section.about p { font-size:18px; line-height:24px; }			main > section > div { flex-direction:column; }				main > section > div > div.time { flex:1; }					main > section > div > div.time > div:last-of-type { display:none; }				main > section > div > div.folio { margin-top:16px; flex:1; justify-content:initial; align-items:initial; text-align:left; }	main > nav { width:60vw; font-size:13px; line-height:13px; }	main > nav a:first-of-type { display:inline-block; }	main > nav a { margin-right:6%; }	main > nav a.active { margin-right:4%; }	main > .clientele { justify-content:space-between; }	main > .clientele > div { max-width:47%; flex:1; }
	.showcase { flex-direction:column-reverse !important; margin-bottom:0; padding-bottom:10px; margin-top:40px; }	.showcase .screen { width:100%; flex:1 0 100%; max-width:fit-content; display:inline-block; background-color:#000; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.6); border-radius:8px; overflow:hidden; border:1px solid rgba(229,232,235,0.2); border-right-color:rgba(229,232,235,0.05); border-left-color:rgba(229,232,235,0.1); border-bottom-color:rgba(229,232,235,0.05); border-radius:8px; box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2); }	.showcase .screen > img { width:100%; height:auto; opacity:0.7; mix-blend-mode:screen; }	.showcase .detail { max-width:100vw; position:static; flex-direction:row; justify-content:space-between; align-items:center !important; margin:0 0 10px; }	.showcase .detail > img { order:1; flex:0 0 20%; min-width:0; max-width:125px;  }	.showcase .detail > div { order:2; flex:0 0 75%; margin:0; }	.showcase .detail > div h1,	.showcase .detail > p { display:none; }}
@media screen and (max-width:640px) {	#container { flex-direction:column; padding:0 15px; }	header { flex-direction:column; flex:0 0 70%; padding-top:30px; }	header .icons { justify-content:start; margin-top:24px; }	main > section.about { padding:0 20px 60px; }	main > section.about h2 { font-size:36px; line-height:42px; }	main > nav { width:100%; font-size:13px; line-height:13px; }	main > nav a:first-of-type { display:inline-block; }	main > nav a { margin-right:6%; }	main > nav a.active { margin-right:4%; }	main > .clientele { justify-content:space-between; flex-direction:row; }	main > .clientele > div { max-width:50%; flex:0 0 50%; }	main > .clientele > div:last-child { max-width:100%; flex:0 0 100%; }	.kudos { margin-top:50px; overflow-y:initial; }	footer { margin-top:50px; }}
/* Bells & Whistles */.background-gradient { position:fixed; z-index:0; width:100vw; height:100vh; overflow:hidden; background-image:radial-gradient(circle at top, /*rgba(5,103,154,0.4)*/#123859,#04192c 80%); background-repeat:no-repeat; }.mouse-gradient { position:absolute; z-index:0; opacity:0; width:52.084vw; height:52.084vw; background-image:radial-gradient(circle at center, /*rgba(5,103,154,0.4)*/#0e2c48,transparent 50%); background-repeat:no-repeat; background-size:contain; background-position:center center; transition:opacity 1s ease; }.small-mobile { display:none; }
/* Keyframe Animations */@keyframes fade {
	0%,100% { opacity:0; }
	5%,95% { opacity:1; }
}

/* Media Queries */@media screen and (max-width:640px) {	html,body { min-height:initial; }	body, nav.active { height:100dvh; }	#wrapper { padding:15px; }	main #hero h1 { font-size:clamp(40px,10.5vw,60px); line-height:clamp(50px,13vw,70px); margin-bottom:20px; }		main #hero .n { letter-spacing:calc(-1px - 0.1vw); }		main #hero .y { letter-spacing:calc(-6px - 0.5vw); }	main #hero h5 { font-size:20px; line-height:26px; }}
@media screen and (max-height:480px) and (orientation:landscape) {	html { padding: env(safe-area-inset); }	html,body { min-height:initial; }	body { height:100dvh; }	#wrapper, .mouse-gradient { display:none; }
/*	.small-mobile { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; background-image:radial-gradient(circle at center, #04192c,#059a7c); }	.small-mobile { display:flex; }	.small-mobile img { max-width:400px; position:relative; bottom:30px; }	.small-mobile a { color:#e2e8f0; position:relative; bottom:10px; }	.small-mobile .note { position:absolute; bottom:20px; color:#e2e8f0; }*/
}