@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height:auto;
	font-family: "Inter Tight", Arial, sans-serif;
  	font-optical-sizing: auto;
	line-height: 1.6;
	background-color: #fff;
	font-size: 18px;
}


ul, ol {
	margin-left:3rem;
	margin-bottom: 2rem;
}

li::marker, li::marker {
  color: #2c7792;
}


a {
	text-decoration: none;
	color: inherit;
}


img {
	max-width: 100%;
	display: block;
}


.grid-container {
	display: grid;
	gap: 2rem;
}


.grid-12 {
	grid-template-columns: repeat(12, 1fr);
}

.grid-6 {
	grid-template-columns: repeat(6, 1fr);
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}


.full-width {
	grid-column: 1 / -1;
}

/* Column span classes */
.col-span-1 {
	grid-column: span 1;
}
.col-span-2 {
	grid-column: span 2;
}
.col-span-3 {
	grid-column: span 3;
}
.col-span-4 {
	grid-column: span 4;
}
.col-span-5 {
	grid-column: span 5;
}
.col-span-6 {
	grid-column: span 6;
}
.col-span-7 {
	grid-column: span 7;
}
.col-span-8 {
	grid-column: span 8;
}
.col-span-9 {
	grid-column: span 9;
}
.col-span-10 {
	grid-column: span 10;
}
.col-span-11 {
	grid-column: span 11;
}
.col-span-12 {
	grid-column: span 12;
}

/* Center content utility */
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	margin-bottom: 0.5rem;
	color:#2c7792;
}

h1{
	font-size: 3rem;
	margin:0;
	font-weight: 900;
	line-height: 3.8rem;
}

h2{
	font-size: 1.75rem;
}

h3{
	font-size: 1.25rem;
}

p {
	margin-bottom: 1.25rem;
}

/* === Buttons === */
button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	cursor: pointer;
	border-radius: 0.25rem;
}

button:hover {
	background-color: #0056b3;
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

.mt-lg {
	margin-top: clamp(48px, 25vh, 1000px); /*Min, Preferred, Max*/
}

.mb-lg {
	margin-bottom: clamp(48px, 15vh, 1000px); /*Min, Preferred, Max*/
}

.pt-lg {
	margin-top: clamp(48px, 15vh, 1000px); /*Min, Preferred, Max*/
}

.pb-lg {
	margin-bottom: clamp(48px, 15vh, 1000px); /*Min, Preferred, Max*/
}

.home header{
	min-height:calc(100vh - 2rem);
	display: flex;
  	align-items: center;
	padding:2rem 0 2rem 0;
}

.wrapper{
	width:100%;
}

.stripe{
	background-color:#eaf2f4;
	overflow: hidden;
}

.centered-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.slash{
	padding: 0 0.5rem 0 0.5rem;
	color:#34748b;
}

.my-title{
	font-size: 1.75rem;
	margin-top: 0.25rem;;
	font-style: italic;
	font-weight: 200;
	color:#34748b;
	line-height: 2rem;
}

.about-me{
	font-size: 1.5rem;
}

.about-me .description{
	margin-top:2rem;
	margin-bottom:2rem;
	font-weight: 400;
	border-left: 5px solid #eaf2f4;
	padding-left: 2rem;
}

.about-me .experience{
	font-size: 1rem;
	font-weight: 300;
	color:#595959;
}

.links{
	margin:0;
	margin-top:2rem;
	display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 1rem;
	height: auto;
	text-align: right;
	justify-content: flex-start;
}
.links a{
	display: block;
	background-size: auto 100%;
	background-position: left;
	background-repeat: no-repeat;
	width:42px;
	height:42px;
	border-radius: 50%;
	transition:background-color 0.2s ease-in-out;
	border:1.5px solid #2c7792;
	position: relative;
}

.links .linkedin,
.links .linkedin::after{
	background-image: url("../img/linkedin.svg");
}

.links .email,
.links .email::after{
	background-image: url("../img/email.svg");
}

.links a:hover{
	background-color: #2c7792;
}
.links a:hover::after{
	opacity: 1;
}
.links a::after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: block;
	background-size: auto 100%;
	background-position: right;
	background-repeat: no-repeat;
	z-index: 1;
	opacity: 0;
	transition:opacity 0.2s ease-in-out;
}

.case-study-page header .links{
	justify-content: end;
	margin: 0;
	height: 100%;
}

header .box{
	color: #34748b;
	font-weight: 600;
	text-align: right;
}

#feature-quote{
	background-color:#eaf2f4;
	padding-top:4rem;
	padding-bottom: 4rem;
}

#feature-quote .quote-container{
	margin-top:0;
}

#case-studies{
	margin-top: clamp(48px, 6rem, 1000px); /*Min, Preferred, Max*/
}

.case-study{
	align-items: center;
	margin-top:4rem;
	cursor: pointer;
}

.case-study img{
	transition:transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
	border-radius: 5px;
}

.case-study:hover img{
	transform:scale(1.015);
	box-shadow: 0 2px 8px 0 #c4d9e0;
}

.stripe .case-study:hover img{
	box-shadow: 0 2px 8px 0 #c4d9e0;
}

.case-study .content{
	margin-left:2rem;
}
/*
.case-study .image{
	background-color: #eaf2f4;
	padding: 0.5rem;
	margin-top: 2rem;
	border-radius: .3rem;
}*/

.case-study .company,
.case-study-page .company{
	font-size: 0.8rem;
	background-image: url('../img/THD.jpg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	height:22px;
	padding-left:36px;
	display: flex;
	align-items: center;
	font-weight: 300;
	color:#595959;
}

.case-study-page .case-study .company{
	margin-top:1rem;
	margin-bottom: 0rem;
}


.case-study .company-gt,
.case-study-page .company-gt{
	background-image: url('../img/gt.png');
}

.case-study .company-td,
.case-study-page .company-td{
	background-image: url('../img/TD.png');
}

.case-study h3{
	margin:0;
	margin-top:0.75rem;
	margin-bottom: 0.75rem;
}


.case-study-page .case-study h3{
	margin-top:0;
	margin-bottom: 0;
}

.case-study .description{
	font-size: 1rem;
	margin-bottom:0.5rem;
}

.case-study .tags{
	font-size: 0.8rem;
	display: block;
	margin:0;
	font-weight: 300;
	color:#595959;
}

.case-study .button{
	margin-top:2rem;
	padding:0.6rem 1rem 0.6rem 1rem;
	border:1.5px solid #34748b;
  	display: inline-block;
	font-size: 1rem;
	color:#34748b;
	cursor: pointer;
	transition:background-color 0.2s ease-in-out,
		color 0.2s ease-in-out;
	border-radius: 5px;
}
.case-study .button:hover{
	background-color:#34748b;
	color:#fff;
}

#skills .compass,
#skills .magnifying-glass,
#skills .pen{
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
	padding-left:2.5rem;
}

#skills .magnifying-glass{
	background-image: url("../img/magnifying-glass.svg");
}

#skills .compass{
	background-image: url("../img/compass.svg");
}

#skills .pen{
	background-image: url("../img/pen.svg");
}

#skills .centered-content{
	padding-top: 20vh;
	padding-bottom: 20vh;
	position: relative;
	gap: 2rem;
}

#skills h2{
	display: inline-block;
	white-space: nowrap;
	flex: 0 1 auto;
}


.slash-list {
	display: flex;
	flex-wrap: wrap;
	flex:1;
	line-height: 3rem;
	font-weight: 300;
}

.slash-list span {
  position: relative;
  white-space: nowrap;
}

.slash-list span:not(.last-in-column)::after {
	content: " / ";
	margin:0 1rem 0 1rem;
	visibility: visible;
	color:#34748b;
}

.slash-list .last-in-column::after {
	content: " / ";
	margin:0 1rem 0 1rem;
	visibility: hidden;
}

#more-design-work .gallery {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: auto;
	margin-top:4rem;
}

#more-design-work .gallery > div{
  	object-fit: cover;
	background-color:#eaf2f4;
}


#more-design-work .gallery img {
  	width: 100%;
  	height: auto;
}

#more-design-work .gallery .mobile,
#case-studies .mobile{
	grid-column: span 2;
	padding: 0.5rem;
	border-radius: 1.5rem;
	position: relative;
}

#more-design-work .gallery .mobile img{
	border-radius: 1.25rem;
}

#more-design-work .gallery .mobile::before {
	position: absolute;
	content: " ";
	display: block;
	top:2.9%;
	left:40%;
	background:#eaf2f4;
	z-index: 10;
	width:20%;
	height:2.5%;
	border-radius: 1rem;
}

#more-design-work .gallery .mobile::after {
	position: absolute;
	content: " ";
	display: block;
	bottom:3%;
	left:32.5%;
	background:#fff;
	z-index: 10;
	width:35%;
	height:0.75%;
	border-radius: 5px;
	mix-blend-mode: screen;
	opacity: 0.85;
}

#more-design-work .gallery .desktop {
  	grid-column: span 3;
	padding: 1.5rem .3rem .3rem .3rem;
	border-radius: 0.5rem 0.5rem .3rem .3rem;
	position: relative;
}
#more-design-work .gallery .desktop::before {
	position: absolute;
	content: "\2022\2022\2022";
	display: block;
	top:0;
	left:10px;
	color:#c7dadf;
	z-index: 10;
}

#more-design-work .quote-container{
	max-width: 80%;
	margin:0 auto;
	margin-top:8rem;
}

#more-design-work .gallery .desktop:nth-child(1):last-child,
#more-design-work .gallery .desktop:nth-child(3):last-child,
#more-design-work .gallery .desktop:nth-child(5):last-child{
  grid-column: 1 / -1;
}


.gallery .desktop > *:nth-child(3):last-child,
.gallery .desktop > *:nth-child(5):last-child {
  grid-column: 1 / -1;
}

#facilitating-success .grid-container{
	gap: 4rem;
}

#facilitating-success .gallery {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
}

#facilitating-success .gallery img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.quote-container{
	position: relative;
	margin-top:4rem;
}

.case-study-page .quote-container{
	margin-top:2rem;
	margin-bottom: 2rem;
	margin-left:4rem;
}


.quote{
	font-style: italic;
	font-weight: 200;
	margin-left:60px;
	color:#34748b;
}

.quote{
	font-weight: 400;
}

.quote::before{
	background-image: url("../img/quotes.png");
	background-size: 60px 26px;
	width:30px;
	height:25px;
	content:"";
	position: absolute;
	top:0;
	left:0px;
	font-size: 5rem;
	font-weight: 500;
	opacity: 20%;
}
.quote::after{
	background-color:#34748b;
	height: calc(100% - 35px);
	content:"";
	width:3px;
	display: block;
	position: absolute;
	opacity: 20%;
	left:14px;
	top:35px;
	bottom:0;
	
}

.quote .author{
	text-align: right;
	display: block;
	font-style: normal;
	margin-top: 0.5rem;
}

.quote.two-col{
	column-count: 2;
	column-gap: 4rem;
}

.stripe .centered-content{
	padding-top: 20vh;
	padding-bottom: 20vh;
}

.research h3,
#skills h3{
	margin-top:2rem;
}

.research .gallery img {
	width: 100%;
	height: auto;
	background-color:#eaf2f4;
	padding: 0.5rem;
	margin-top:2rem;
	border-radius: .3rem;
}

.section{
	width:66%;
}

.case-study-page h1{
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.case-study-page h1, 
.case-study-page h2, 
.case-study-page h3, 
.case-study-page h4, 
.case-study-page h5, 
.case-study-page h6 {
	margin-top:4rem;
	margin-bottom: 1rem;
}

.case-study-page header .centered-content{
	padding-top:2rem;
	padding-bottom:2rem;
	border-bottom: 5px solid #eaf2f4;
}

.case-study-page .name{
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 0rem;
	color:#2c7792;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.case-study-page .my-title{
	font-size: 1.15rem;
	margin-top: -0.5rem;;
	font-style: italic;
	font-weight: 200;
	color:#34748b;
	transition: all 0.2s ease-in-out;
}

.case-study-page img.full{
	width:100%;
	height:auto;
}

.case-study-page header{
	position: sticky;
	top:0;
	background: #fff;
	z-index: 999;
}

.case-study-page header.shrink .name{
	font-size: 1.2rem;
	transition: all 0.2s ease-in-out;
}
.case-study-page header.shrink .my-title{
	font-size: 0.69rem;
	transition: all 0.2s ease-in-out;
}
.case-study-page header.shrink .centered-content{
	padding-top:1rem;
	padding-bottom:1rem;
	transition: all 0.2s ease-in-out;
}

#ppt {
  aspect-ratio: 16 / 9;
  width:100%;
  height:auto;
  position: relative;
  display: block;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
	
  background-color: #eaf2f4;
  padding: 0.5rem;
  margin-top: 2rem;
  border-radius: .3rem;
}

@media (orientation: portrait) {
	#ppt{
		height:75vh;
	}
}

#ppt .fancybox__container {
	position: absolute;
	z-index: 1;
}
#ppt .fancybox__backdrop {
	position: absolute;
}

#ppt .fancybox__caption{
	padding-left:40px;
	padding-right: 40px;
}

#ppt .fancybox__footer{
	position: relative;
}

body .fancybox__content{
	padding:0;
	background:none transparent;
}
body .fancybox__container,
body .fancybox__backdrop{
	background:#eaf2f4;
}
body .f-thumbs__slide{
	border-radius: 5px;
}
body .f-thumbs__slide.is-nav-selected{
	border: 2px solid #2c7792;
}
body .f-button:hover:not([disabled]){
	background: rgba(44, 119, 146, 0.9);
}
body .is-compact .fancybox__content>.f-button.is-close-btn{
	color:#fff;
	background: rgba(44, 119, 146, 0.9);
}
body .f-button{
	color: rgba(44, 119, 146, 0.9);
}
body .f-button svg{
	filter:none;
}
body .fancybox__content>.f-button.is-close-btn{
	--f-button-hover-color:#fff;
}

body .fancybox__caption{
	color:#2c7792;
}

body .is-compact .fancybox__footer{
	background:transparent;
}


h2.next-cs{
	margin-top:0;
}

footer{
	font-size: 0.75rem;
	color:#34748b;
	padding-bottom:2rem;
	background-color: #eaf2f4;
}

.case-study-page footer div{
	margin:0 2rem 0 2rem;
}

.case-study-page a[data-fancybox] img{
	transition: transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
.case-study-page a[data-fancybox] img:hover{
	transform:scale(1.015);
	box-shadow: 0 2px 8px 0 #c4d9e0;
}

.case-study-page .impact{
	border:1.5px solid #2c7792;
	padding:2rem;
	margin-top: 4rem;
}
.case-study-page .impact h2{
	margin-top:0;
}

.case-study-page .impact strong{
	color:#2c7792;
}


footer.centered-content{
	margin-top:4rem;
	margin-bottom:2rem;
}

html.with-fancybox body{
	touch-action:auto !important;
}

#login-section{
	padding:1rem 4rem 1rem 4rem;
	border-radius: 2rem;
	border:2px solid #eaf2f4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom:4rem;
	background-color: #eaf2f4;
	
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.login-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#login-icon{
	background-image: url("../img/lock.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width:56px;
	height:70px;
	display: inline-block;
	margin-right:0.5rem;
}

#login-section h3{
	margin-bottom:0.25rem;
	margin-top:0;
}

#password{
	all: unset;
	box-sizing: border-box;
	width:10rem;
	height:1.5rem;
	border-radius: 5px 0 0 5px;
	border:1px solid #c7dadf;
	border-right:none;
	margin:0;
	padding:3px 5px 3px 5px;
	background: #fff;
}

#password.fail{
	border-color:#912d2d;
}

#password-submit{
	all: unset;
	box-sizing: border-box;
	background: #2c7792;
	background-image: url("../img/right-arrow.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	
	width:2rem;
	height:1.5rem;
	border-radius: 0 5px 5px 0;
	margin: 0;
}

#login-section .input-row {
  display: flex;
  align-items: center;
}

#login-section p{
	font-size: 0.65rem;
	margin-top:0.5rem;
	color:#595959;
	margin-bottom: 0;
}

#login-section a{
	color:#2c7792;
	text-decoration: underline;
}

#login-section .error{
	color:#912d2d;
	font-size: 0.8rem;
	background-image:url("../img/error.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	padding-left:1.75rem;
	margin-top:0.25rem;
}

#authenticated{
	background-color: #edf2eb;
	color:#3f8918;
	border-radius: 2rem;
	padding:1rem 1rem 1rem 5rem;
	display: flex;
	flex-direction: column;
	margin-bottom:4rem;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	
	background-image:url("../img/unlock.svg");
	background-repeat: no-repeat;
	background-position: 2rem 1rem;
	background-size:32px 40px;
}

#authenticated a{
	text-decoration: underline;
}

#authenticated h3{
	color:#3f8918;
	margin-top:0;
	margin-bottom:0.25rem;
}