@import 'variables_new.css';

body.portfolio {
	h2 {
		grid-column: span 12;
		margin-bottom: calc(var(--grid-gutter) * -1);
		/* margin-bottom: var(--space-2xs-xs); */
		text-transform: uppercase;
	}
}

h5 {
	margin-bottom: 0;
	margin-top: var(--space-xs);
}

#with-bleed.portfolio #portfolio-intro {
	/* align-items: baseline; */
	align-self: end;
	justify-self: end;
	margin-bottom: var(--space-l-xl);

	.headshot {
		/* background-color: lime; */
		align-items: flex-start;
		display: flex;
		justify-content: center;
		bottom: 0;
		grid-column: span 3;
		text-align: center;
		/* margin-bottom: -40px; */
		/* width: 80%; */
		/* position: absolute; */
		/* margin-bottom: -60px; */

		img {
			width: 90%;
		}
	}
}

#portfolio-header {
	font-size: var(--step-5);
	grid-column-start: 4;
	grid-column-end: 13;
	margin-bottom: 0;
	margin-top: 0;
	/* text-transform: uppercase; */
	text-wrap-style: auto;

	span {
		color: transparent;
		background-clip: text;
		background-image: var(--hdr-gradient);
	}
}

/* body.portfolio #home-header {
	margin-bottom: var(--space-m-l);
} */

#with-bleed .u-grid:has(#home-header) {
	margin-bottom: var(--grid-gutter);
}

#with-bleed #overview {
	/* display: grid; */
	/* gap: var(--grid-gutter); */
	/* grid-template-columns: repeat(12, 1fr); */
	/* max-width: var(--grid-max-width); */
	/* margin-bottom: var(--grid-gutter); */

	background-color: var(--blue-med-dark);

	background-image: var(--hdr-blue-gradient);
	/* border: 1px solid var(--blue-dark); */
	color: var(--white);
	box-shadow: var(--inner-shadow-3);
	margin-bottom: var(--space-m-l);


	.bleed-content {
		margin-bottom: 0;
	}

	h2 {
		grid-column: span 12;
		text-align: center;
	}

	h3 {
		/* margin-top: var(--space-2xs); */
	}

	h3+p {
		margin-top: 0;
	}

	.icon {
		display: block;
		text-align: center;

		svg {
			height: var(--space-xl-2xl);
			width: var(--space-xl-2xl);
		}
	}

	p {
		font-size: var(--step-0);
	}

	section {
		grid-column: span 4;
		padding: var(--space-m-l) var(--space-xs);
	}

	section:hover {

		/* box-shadow: var(--shadow-2); */
		/* border-bottom-left-radius: var(--space-xs-s); */
		/* border-bottom-right-radius: var(--space-xs-s); */

		svg {
			/* color: var(--black); */
		}
	}
}


#leadership-principles-head {
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: repeat(12, 1fr);
	max-width: var(--grid-max-width);

	h2 {
		margin-bottom: var(--grid-gutter);
	}

	hr {
		border-top: 1px solid var(--black);
		grid-column: span 2;
		height: 1px;
		width: 100%;
	}

	p {
		grid-column: span 8;
		margin-bottom: var(--space-l);
		margin-top: 0;
	}
}

#with-bleed #leadership-principles-head {
	margin-bottom: 0;
}


#leadership-principles {

	/* grid-row-start: 1; */
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: repeat(12, 1fr);
	max-width: var(--grid-max-width);
	margin-bottom: var(--space-m-l);

	article {
		/* aspect-ratio: 1 / 1; // uncomment to get to nice square cards */
		background-color: var(--gray-light);
		/* background-image: var(--hdr-gradient); */
		border-color: var(--white);
		border-width: 0;
		border-bottom-right-radius: var(--space-xs-s);
		border-bottom-left-radius: var(--space-xs-s);
		border-bottom: var(--space-2xs) solid var(--blue-dark);
		/* border-top: var(--space-2xs) solid var(--blue-light); */
		/* box-shadow: var(--shadow-2); */
		grid-column: span 4;
		overflow: hidden;
		padding: var(--space-xs);
		/* rotate: -2deg; */
		transition: .33s ease-in;
		vertical-align: top;

		h3 {
			color: var(--blue-dark);
			/* display: none; */
			font-size: var(--step-2);
			margin: var(--space-2xs);
			transition: .33s ease-in;
			/* border-radius: var(--space-xs-s); */
			/* object-fit: cover; */
			transform-origin: top center;
			/* transition: .33s ease-in; */
		}

		:hover {

			/* padding: 1em; */

			a {
				display: block;
				margin: 0;
				transition: .33s ease-out;
			}
		}
	}

	article:nth-child(4) {
		grid-column-start: 3;
		grid-column-end: 7;
	}

	article:nth-child(5) {
		grid-column-start: 7;
		grid-column-end: 11;
	}

	article:hover {
		/* background-color: var(--blue-light); */
		/* box-shadow: var(--shadow-4); */
		/* padding: var(--space-s); */

		/* rotate: -1deg; */
		transition: .33s ease-out;

		a:link,
		a:visited,
		a:visited {
			color: var(--white);
			text-decoration: none;
		}

		a:has(> img) {
			display: block;
			/* margin: var(--space-2xs); */
			transition: .33s ease-out;
		}


		h3 {
			/* color: var(--blue-med-dark); */
			display: block;
			/* font-size: var(--step-2); */
			/* transition: .33s ease-in; */
			padding: 0;
			transform-origin: center;
			transition: .33s ease-out;

			vertical-align: top;
		}

		p {
			color: var(--black);
			display: block;
		}

		img {
			aspect-ratio: 1.6180/1; /* Golden ratio */
			/* border: var(--space-2xs-xs) solid var(--black); */
			/* border-radius: var(--space-xs-s); */
			/* margin: 10px; */
			padding: 0;
			transform-origin: center;
			transition: .33s ease-out;

			vertical-align: top;
		}
	}

	article:nth-child(1):hover {
		/* rotate: -1deg; */
	}

	article:nth-child(2):hover {
		/* margin-bottom: var(--space-3xs); */
		/* margin-top: calc(var(--space-3xs) * -1); */
	}

	article:nth-child(3):hover {
		/* rotate: 1deg; */
	}

	article:nth-child(4):hover {
		/* rotate: 1deg; */
	}

	article:nth-child(5):hover {
		/* margin-bottom: calc(var(--space-3xs) * -1); */
		/* margin-top: var(--space-3xs); */
	}

	article:nth-child(6):hover {
		/* rotate: -1deg; */
	}


	p {
		color: var(--blue-dark);
		/* display: none; */
		margin: var(--space-2xs);
		transition: .33s ease-in;
	}

	img {
		aspect-ratio: 1 / 1;
		border-radius: var(--space-xs-s);
		object-fit: cover;
		transform-origin: top center;
		transition: .33s ease-in;
		/* grid-column-start: 1; */
		/* grid-column-end: 6; */ 
		/* grid-column: span 3; */
		/* grid-row: span 2; */
		/* float: left; */
		/* width: 20%; */
	}
}

#case-studies {
	display: grid;
	grid-column: span 12;
	grid-template-columns: subgrid;
	row-gap: var(--grid-gutter);

	article {
		aspect-ratio: 1 / 1;
		background-color: var(--black);
		border-radius: var(--space-xs-s);
		box-shadow: var(--shadow-2);
		color: var(--white);
		grid-column: span 4;
		overflow: hidden;
		transition: .33s ease-in;
		vertical-align: top;

		:hover {
			/* padding: 1em; */

			a {
				display: block;
				margin: 0;
				transition: .33s ease-out;
			}
		}
	}

	article.placeholder {
		padding: var(--space-2xs);

		h3 {
			margin-top: var(--space-m-l);
		}
	}

	article.placeholder:hover {
		h3 {
			margin-top: var(--space-m-l);
		}
	}

	a:link,
	a:visited,
	a:visited {
		color: var(--white);
		text-decoration: none;
	}

	article:hover {
		box-shadow: var(--shadow-4);
		padding: var(--space-2xs);

		transition: .33s ease-out;

		a:has(> img) {
			display: block;
			/* margin: var(--space-2xs); */
			transition: .33s ease-out;
		}

		h3 {
			display: block;

			transition: .33s ease-in;
		}

		p {
			display: block;
			transition: .33s ease-in;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		img {
			aspect-ratio: 1.6180/1; /* Golden ratio */
			/* border: var(--space-2xs-xs) solid var(--black); */
			/* border-radius: var(--space-xs-s); */
			/* margin: 10px; */
			padding: 0;
			transform-origin: center;
			transition: .33s ease-out;

			vertical-align: top;
		}
	}

	h3 {
		/* display: none; */
		font-size: var(--step-1);
		margin: var(--space-2xs);
		transition: .33s ease-in;
	}

	p {
		color: var(--white);
		/* display: none; */
		font-size: var(--step-0);
		margin: var(--space-2xs);
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	img {
		aspect-ratio: 1.6180/1;
		border-radius: var(--space-xs-s);
		object-fit: cover;
		transform-origin: top center;
		transition: .33s ease-in;
		/* grid-column-start: 1; */
		/* grid-column-end: 6; */
		/* grid-column: span 3; */
		/* grid-row: span 2; */
		/* float: left; */
		/* width: 20%; */
	}
}

#case-studies-condensed,
.methods-processes,
.my-approach,
#published-reccs,
#team-stats {
	/* grid-row-start: 1; */
	display: grid;
	grid-column: span 12;
	/* grid-template-columns: subgrid; */
	row-gap: var(--grid-gutter);
}

#case-studies-condensed {
	h2 {
		grid-column: span 12;
	}

	align-items: top;
	/* container-name: links; */
	/* container-type: inline-size; */
	display: grid;
	/* grid-auto-rows: 180px 1fr auto; */
	grid-auto-rows: 1fr;
	/* grid-column: span 4; */
	/* grid-row: span 21; */
	/* grid-template-columns: subgrid; */
	/* grid-template-rows: 18, 1fr; */
	grid-template-columns: subgrid;
	row-gap: var(--grid-gutter);

	article {
		align-content: center;
		background-color: var(--gray-light);
		box-shadow: var(--shadow-1);
		border-radius: var(--space-xs-s);
		display: flex;
		/* border: 1px dotted red; */
		/* grid-auto-rows: 180px 1fr auto; */
		grid-column: span 4;
		/* grid-row: span 4; */
		/* height: 1fr; */
		line-height: 1;
		overflow: hidden;
		padding-right: var(--space-xs-s);
		position: relative;
		transition: .33s ease-in;

		/* vertical-align: middle; */

		a {
			cursor: pointer;
			display: flex;
			font-size: var(--step-0);
			/* max-height: 80%; */
			/* overflow: hidden; */
			position: relative;
			/* top: var(--space-2xs-xs); */
			width: 100%;

			span.link-icon {
				color: var(--blue);
				display: block;
				margin: auto;
				margin-left: var(--space-2xs-xs);
				margin-right: var(--space-2xs-xs);
				position: relative;

				svg {
					width: 1em;
				}
			}


			span.link-text {
				display: -webkit-box;
				margin: auto var(--space-2xs-xs) auto 0;
				overflow: hidden;
				/* transition: .33s ease-in; */
				/* transition:	margin 2s ease-in-out; */
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				width: 100%;
			}
		}

		a:visited,
		a:visited svg {
			color: var(--blue);
		}

		.link-notes {
			font-size: var(--step-0);
			display: none;
			overflow: hidden;
			/* transition: .33s ease-out; */
			transition: display .66s ease-in;
			visibility: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; /* Need to reduce to 2 in smaller viewport 📝 */

			/* width: 100%; */

			span {
				font-size: var(--step--1);
			}
		}


		a:link,
		a:visited {
			color: var(--black);
			text-decoration: none;
		}

		a:hover {}
	}
}

#case-studies-condensed article:hover {
	background-color: var(--blue-med-dark);
	box-shadow: var(--shadow-5);
	transition: .33s ease-out;

	a {
		/* transition: .33s ease-in; */
		z-index: 500;

		span.link-text {
			color: var(--white);
			/* display: block; */
			font-family: 'BebasNeueProBold', sans-serif;
			font-weight: 500;
			margin-top: var(--space-xs-m);
			/* transition: margin 2s ease-in-out; */
			-webkit-line-clamp: 1;
			width: 100%;
		}

	}

	a:link,
	a:visited {
		color: var(--white);
		text-decoration: none;

		span.link-icon {
			color: var(--white);
		}
	}

	a:visited,
	a:visited svg {
		color: var(--white);
	}

	span.link-notes {}
}

#case-studies-condensed article:hover .link-notes {
	clear: left;
	color: var(--white);
	display: -webkit-box;
	/* height: 100px; */
	left: calc((var(--space-2xs-xs) * 2) + 1em);
	margin: auto var(--space-xs-s) auto 0;
	margin-top: 2.5lh;
	overflow: hidden;
	position: absolute;
	visibility: visible;
	transition: display .33s ease-out;
	z-index: 100;
}

.section-intro {
	background-color: var(--blue-200);
	border-radius: var(--space-xs-s);
	box-shadow: var(--shadow-1);
	/* color: var(--white); */
	font-size: var(--step-0);
	grid-column: span 4;
	padding: var(--space-xs-s);
	padding-top: 0;
	
	h4:first-of-type {
		padding-top: var(--space-xs-s);
	}
}

.methods-processes {
	display: grid;
	grid-column: span 12;
	grid-template-columns: subgrid;
	row-gap: var(--space-xl-2xl);

	>h3 {
		grid-column: span 12;
		margin-top: 0;
	}

	section {
		/* background-color: var(--gray-light); */
		border-radius: var(--space-xs-s);
		/* box-shadow: var(--shadow-2); */
		display: grid;
		grid-column: span 12;
		grid-template-columns: subgrid;

		article {
			/* aspect-ratio: 1 / 1; */
			/* background-color: var(--orange); */
			border-radius: var(--space-xs-s);
			/* box-shadow: var(--shadow-2); */
			font-size: var(--step-0);
			grid-column: span 4;
			/* grid-row: span 1; */
			/* overflow: hidden; */
			/* margin-top: var(--space-2xs); */
			padding: var(--space-xs-s);
			transition: .33s ease-in;
			vertical-align: top;
		}

		h3 {
			grid-column: span 12;
			margin-top: 0;
		}

		h4 {
			margin-top: 0;
		}


		ol,
		ul {
			margin-top: var(--space-2xs-xs);
			padding-left: var(--space-xs-s);
		}
	}

	section.image-headers {
		background-color: transparent;
		padding: 0;

		article {
			background-color: var(--gray-light);
			border-bottom: var(--space-3xs) solid var(--gray-med-dark);
			padding: 0;

			h4,
			p,
			ol,
			ul {
				padding-left: var(--space-xs-s);
				padding-right: var(--space-xs-s);
			}

			ol,
			ul {
				margin-left: var(--space-xs-s);
				/* margin-right: var(--space-xs-s); */
			}
		}

		h3 {
			margin-bottom: var(--space-xs-s);
		}

		.col-header {
			/* border-radius: var(--space-xs-s); */
			border-width: 0;
			border-bottom-right-radius: var(--space-xs-s);
			border-bottom-left-radius: var(--space-xs-s);
			border-top-right-radius: var(--space-xs-s);
			border-top-left-radius: var(--space-xs-s);
			/* border-bottom: var(--space-3xs) solid var(--gray-med-dark); */
			border-top: var(--space-3xs) solid var(--gray-med-dark);
			height: var(--space-4xl);
			/* margin-left: calc( var(--space-xs-s) * -1); */
			/* margin-right: calc( var(--space-xs-s) * -1); */
			margin-bottom: var(--space-s-m);
			/* max-width: calc(100% + var(--spacex-s)); */

			aspect-ratio: 1.6180/1;
			object-fit: cover;
			transform-origin: top center;
			transition: .33s ease-in;
			width: 100%
		}
	}
}

.case-study-table {
	/* border: 1px dotted var(--black); */
	font-size: var(--step-0);
	margin-top: var(--space-xs-s);
	width: 66%;

	td {
		padding-bottom: var(--space-2xs);
		border-bottom: 1px dotted var(--gray-light);
	}

}

#branching-career-path h3,
#process-multi-track h3 {
	margin-bottom: var(--space-xs-s);
}

section.one-two {
	background-color: var(--blue-light);
	padding: 0;

	article {
		background-color: var(--orange);
		grid-column: span 8;
		margin-top: 0;
	}

	.content {
		/* background-color: var(--orange); */
		/* background-image: url('/uploads/images/2018/09/Designer-Career-Paths-2018-1024x752.png'); */
		grid-column: span 8;
		margin-top: 0;

		img {
			aspect-ratio: 4 / 3;
			border-radius: var(--space-xs-s);
			object-fit: cover;
			box-shadow: var(--shadow-2);
		}
	}

	.callout {
		background-color: var(--white);
		border-radius: var(--space-xs-s);
		padding: var(--space-xs-s);
		/* font-style: italic; */
	}
}

section.two-one {
	/* background-color: var(--blue-light); */
	padding: 0;

	article {
		grid-column: span 8;
		margin-top: 0;
	}

	.content {
		/* background-color: var(--orange); */
		/* background-image: url('/uploads/images/2018/09/Designer-Career-Paths-2018-1024x752.png'); */
		grid-column: span 8;
		margin-top: 0;

		img {
			aspect-ratio: 4 / 3;
			border-radius: var(--space-xs-s);
			object-fit: cover;
			box-shadow: var(--shadow-2);
		}
	}

	.callout {
		background-color: var(--white);
		border-radius: var(--space-xs-s);
		padding: var(--space-xs-s);
		/* font-style: italic; */
	}
}



#with-bleed .my-approach {
	/* background-color: lime; */
	display: grid;
	grid-column: span 12;
	grid-template-columns: subgrid;

	.u-grid {
		margin-bottom: 0;
	}

	section {

		display: grid;
		grid-column: span 12;
		grid-template-columns: subgrid;
	}

	.container {
		grid-column: span 12;
		/* grid-column-start: 2; */
		/* grid-column-end: 12; */
		width: 100%;
		grid-template-columns: subgrid;
		display: grid;
		row-gap: 0;

		details {
			margin: 0;
			grid-column: span 12;

			/* display: grid; */
			/* gap: var(--grid-gutter); */
			/* grid-template-columns: repeat(12, 1fr); */
		}

		summary {
			font-family: 'BebasNeueProBold', sans-serif;
			font-size: var(--step-3);
			line-height: .7em;
			grid-column: span 12;
			/* color: var(--gray-med-dark); */
			/* margin: 0 var(--space-s-l); */
			padding: var(--space-xs-s) 0;

			div {
				/* background-color: brown; */
				border-bottom: 1px solid var(--gray-light);
				font-weight: 500;
				padding-bottom: 0;
			}
		}

		summary:hover {
			/* color: var(--text); */

			color: transparent;
			background-clip: text;
			background-image: var(--hdr-blue-gradient);
			font-size: var(--step-4);
			line-height: 1.4em;
			/* margin-left: 0; */
			transition: .33s ease-out;
		}

		summary:hover::after {
			/* border-color: var(--blue); */
			color: var(--text);
			font-size: var(--step-3);
		}

		[open] summary {
			/* color: var(--text); */

			color: transparent;
			background-clip: text;
			background-image: var(--hdr-blue-gradient);
			font-size: var(--step-4);
			margin-left: 0;
			margin-right: 0;
			padding-left: 0;

		}

		[open] summary::after {
			color: var(--text);
		}

		.details-wrapper {
			/* grid-column: span 12; */
			justify-self: center;
			margin: 0 auto;
			max-width: 80%;
		}
	}

	h2 {
		place-self: center;
	}

}

/* This requires specifying the body id #with-bleed for specificity */
#with-bleed #team-stats {
	background-color: var(--blue-med-dark);
	background-image: url('/assets/map.png');
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	color: var(--white);
	overflow: hidden;

	h2 {
		align-self: center;
		justify-self: center;
		font-size: var(--step-4);
		grid-column: span 4;
		margin-top: 0;
		vertical-align: middle;
	}

	h3 {
		font-size: var(--step-5);
		margin: 0;
	}

	h4 {
		font-size: var(--step-2);
		margin-top: 0;
	}

	p {
		font-size: var(--step-0);
		margin-top: 0;
	}

	#team-content {
		margin-bottom: var(--space-xs);
	}

	#team-stats-highlights {
		display: grid;
		grid-column: span 4;

		div {
			margin-bottom: var(--space-xs);
		}

		div:nth-child(1) {
			margin-top: var(--space-s-m);
		}
	}

	#team-images {
		display: flex;
		flex-direction: column;
		grid-column: span 4;
		justify-content: space-between;
		align-items: center;
		max-height: 500px;

		img {
			aspect-ratio: 4 / 3;
			box-shadow: var(--shadow-3);
			object-fit: cover;
			border: var(--space-2xs) solid var(--white);
			margin-bottom: calc(var(--space-s) * -1);
			max-width: 80%;
		}

		img:nth-child(odd) {
			rotate: 5deg;
		}

		img:nth-child(even) {
			rotate: -2deg;
		}

		img:nth-child(1) {
			margin-top: calc(var(--space-m) * -1);
			rotate: 2deg;
		}

		img:nth-child(2) {
			margin-left: var(--space-xs);
			margin-top: calc(var(--space-l) * -1);
			rotate: -1deg;
		}

		img:nth-child(3) {
			margin-left: calc(var(--space-xs) * -1);
			margin-top: calc(var(--space-l) * -1);
			rotate: 2deg;
		}

		img:nth-child(3),
		img:nth-child(5) {
			z-index: 10;
		}

		img:nth-child(4) {
			rotate: -1deg;
		}
	}

}

#team-stats-graphs {
	display: none; /* delete this when stats ready */
	background-color: var(--orange);
	border-radius: var(--space-xs-s);
	grid-column: span 12;
}

#with-bleed #ai-design {
	/* background-color: var(--yellow); */
	/* margin-bottom: 0; */
	background-color: var(--gray-light);
	/* border-bottom: 2px solid var(--gray-med-dark); */
	/* border-top: 1px solid var(--gray-med-dark); */
	/* background-image: var(--hdr-blue-gradient); */
	box-shadow: var(--inner-shadow-2);
	/* padding-bottom: var(--space-l); */

	.bleed-content {

		margin-bottom: 0;
	}

	h2 {
		grid-column-start: 4;
		grid-column-end: 10;
	}

	.icon {
		display: block;
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row: span 2;
		grid-row: 2;
		margin-top: calc(var(--space-m-l) * -0.8);
		text-align: right;

		svg {
			height: var(--space-2xl-3xl);
			width: var(--space-2xl-3xl);
		}

	}

	.bleed-content #general-thoughts{
		grid-column-start: 4;
		grid-column-end: 10
	}

	.bleed-content>#role-of-ai,
	.bleed-content>#designing-ai,
	.bleed-content>#internal-ai {
		/* display: none; */
		grid-column: span 6;
	}

	.bleed-content #built {

		display: grid;
		grid-column: span 12;
		grid-template-columns: subgrid;
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
		row-gap: var(--space-s);

		article {
			/* grid-column-start: 2; */
			/* grid-column-end: 12; */
			display: grid;
			grid-column: span 10;
			grid-template-columns: subgrid;
			margin-bottom: var(--space-xl-2xl);

			h4,
			p {
				grid-column-start: 6;
				grid-column-end: 12;
			}

			h4,
			p { margin-top: 0 }

			/* .icon { */
			/* 	grid-column: span 12; */
			/* 	grid-row: 3; */
			/* 	margin-top: var(--space-l-xl); */
			/* 	text-align: center; */
			/* } */

			img {
				aspect-ratio: 1.6180/1;
				border-radius: var(--space-xs-s);
				box-shadow: var(--shadow-1);
				grid-column-start: 2;
				grid-column-end: 6;
				grid-row: span 2;
				object-fit: cover;
			}
		}


		h3 {
			grid-column: span 12;
			margin-bottom: var(--space-s);
			text-align: center;
		}
		
		/* article:nth-child(6) {
			grid-column: span 5;
			
			h4,
			p {
				grid-column-start: 2;
				grid-column-end: 6;
			}
		}
		
		article:nth-child(7) {
			grid-column-start: 6;
			grid-column-end: 11;
			
			h4,
			p {
				grid-column-start: 1;
				grid-column-end: 11;
			}
		} */
	}

	.bleed-content #ai-tools-i-use {
		grid-column: span 12;

		p {
			margin-top: 0;
		}
	}

	.bleed-content #ai-tools-i-use {
		/* box-shadow: var(--inner-shadow-2); */
		background-color: var(--white);
		border-radius: var(--space-xs-s);
		display: grid;
		grid-column: span 12;
		grid-template-columns: subgrid;
		row-gap: var(--space-s);
		font-size: var(--step-0);
		margin-bottom: var(--space-l);
		margin-top: var(--space-l);
		margin-left: var(--space-s-l);
		margin-right: var(--space-s-l);

		h3 {
			grid-column: span 12;
			margin-bottom: var(--space-xs-s);
			text-align: center;

		}

		h4 {
			margin-bottom: 0;
			margin-top: 0;
		}

		p {
			margin-top: 0;
		}

		article {
			/* background-color: lime; */
			border-radius: var(--space-xs-s);
			grid-column: span 4;
			margin: 0 var(--space-xs) var(--space-xs) var(--space-xs);
		}

		article:nth-child(2){
			/* background-color: red; */
			margin-right: 0;
		}

		article:nth-child(5) {
			/* background-color: red; */
			margin-left: 0;
		}
	}

	.bleed-content #ai-tools-i-use article {
		/* aspect-ratio: 1 / 1; */
		/* background-color: var(--white); */
		/* border-radius: var(--space-xs-s); */
		font-size: var(--step-0);
		grid-column: span 3;
		/* padding: var(--space-xs-s); */
		transition: .33s ease-in;
		vertical-align: top;
	}
}

/* Icons */

.icon svg {
	display: inline;
	height: 1em;
	position: relative;
	vertical-align: text-bottom;
	width: 1em;
}


#with-bleed .u-grid.callout {
	margin-bottom: 0;
}

.recommendation {
	/* aspect-ratio: 2 / 1; */
	/* font-style: italic; */
	margin-bottom: 0;

	article {
		/* background-color: var(--orange); */
	}

	.quote {
		/* aspect-ratio: 2 / 1; */
		/* margin-left: 0; */
		background-color: transparent;
		border: 4px solid var(--gray-light);
		border-radius: var(--space-xs-s);
		box-shadow: none;
		/* margin-left: calc(var(--space-xl-2xl) * 0.5); */
		margin-left: 0;
		margin-top: calc(var(--space-xl-2xl) * -0.5);
		padding-top: calc(var(--space-xl-2xl) * 0.5);

		blockquote {
			padding-top: var(--space-2xs);
		}

		blockquote,
		figcaption {
			/* margin-left: calc(var(--space-xl-2xl) * 0.5); */
			margin-left: 0;
		}

		figcaption::after {
			color: var(--text);
		}
	}

	.quote-image {
		display: grid;
		margin-bottom: 0;

		img {
			aspect-ratio: 1 / 1;
			border: 4px solid var(--gray-light);
			border-radius: 50px;
			box-shadow: var(--inner-shadow-1);
			/* margin-top: 80px; */
			/* height: 150px; */
			object-fit: cover;
			place-self: center;
			width: var(--space-2xl);
		}
	}
}

.recommendation.short {
	grid-column: span 4;
}

.recommendation.med {
	/* aspect-ratio: 1 / 1; */
	/* aspect-ratio: 2 / 1; */
	/* background-color: var(--blue-light); */
	grid-column: span 6;
	margin-bottom: calc(var(--space-xl-2xl) * -1);
}

.recommendation.long {
	/* grid-column: span 8; */
	grid-column-start: 3;
	grid-column-end: 11;
}

.published {
	/* aspect-ratio: 2 / 1; */
	background-color: var(--gray-light);
	border-radius: var(--space-xs-s);
	color: var(--black);
	font-size: var(--step-0);
	display: grid;
	/* grid-template-columns: subgrid; */
	/* place-items: center; */
	grid-column: span 6;
	row-gap: 0;
	padding: var(--space-xs-s);
	transition: .33s ease-out;
	/* justify-content: center; */
	/* align-items: center; */

	article {
		display: grid;
		grid-column: span 12;
		grid-template-columns: repeat(12, 1fr);
		row-gap: var(--space-xs);
		/* place-self: center; */
		width: 100%;

		.publication {
			font-size: var(--step-0);
		}
	}

	.published-content {
		grid-column-start: 3;
		grid-column-end: 13;
		grid-row: 1;
		padding-left: var(--space-xs-s);
	}

	h3 {
		font-size: var(--step-3);
		margin-top: 0;
		/* margin-left: var(--space-xs-s); */
	}

	img {
		border-radius: var(--space-xs-s);
		filter: grayscale(1);
		grid-column-start: 1;
		grid-column-end: 3;
		/* grid-row-start: 1; */
		/* grid-row-end: 3; */
		/* margin: var(--space-xs-s) 0; */
		transition: .33s ease-out;
		width: var(--space-xl-2xl);
	}

	.publication {
		/* grid-column-start: 3; */
		/* grid-column-end: 13; */
		/* grid-row: 2; */
		/* margin:0; */
		/* margin-left: var(--space-xs-s); */
	}

	.summary {
		display: none;
	}

	a,
	a:link,
	a:visited {
		color: var(--text);
		text-decoration: none;
		transition: .33s ease-out;
	}

	a:hover {
		color: var(--orange);
		transition: .33s ease-out;
	}
}

.published:hover {
	/* background-color: var(--yellow); */
	box-shadow: var(--shadow-3);
	transition: .33s ease-out;

	a,
	a:link,
	a:visited {
		text-decoration: underline;
		transition: .33s ease-out;
	}

	img {
		filter: grayscale(0);
		transition: .33s ease-out;
	}
}

/*
	==========[ Case Study Page ]==========
*/

.case-study-highlight {
	/* background-color: var(--blue-med-dark); */
	/* border-bottom: 1px solid var(--gray-med-dark); */
	display: grid;
	grid-column: span 4;
	/* grid-template-columns: subgrid; */
	grid-template-columns: repeat(12, 1fr);
	padding-bottom: var(--space-xs);
	text-align: center;

	h3 {
		grid-column: span 12;
		text-align: center;
	}

	div {
		border-right: 1px solid var(--gray-med-dark);
		grid-column: span 4;
	}

	div:last-child {
		border-right: 0;
	}

	.stat-label {
		display: block;
		font-size: var(--step-0);
	}

	.stat-value {
		display: block;
		font-size: var(--step-3);
		font-family: 'BebasNeueProBold', sans-serif;
		font-weight: 500;
	}

}

.case-study-highlight.two-cols {
	div {
		grid-column: span 6;
	}
}

#case-study-teams  {
	font-size: var(--step-0);
	text-align: left;

	div {
		border-right: 0;
		/* padding-left: var(--space-xs-s); */
		/* padding-right: var(--space-xs-s); */
	}
}

body.case-study {
	.callout {
		/* background-color: lime; */
		color: var(--blue-med-dark);
		float: right;
		font-family: 'BebasNeueProBold', sans-serif;
		font-size: var(--step-3);
		font-weight: 500;
		line-height: 1.1;
		margin-bottom: var(--space-l);
		margin-left: var(--space-l);
		margin-right: -3em;
		margin-top: .666em;
		width: 8em;
		/* grid-column-start: 10; */
	}

	.screen-mobile {
		margin-left: -4em;
		width: 8em;
	}

	.image-style-align-right.screen-mobile {
		margin-left: initial;
		margin-right: -4em;
		padding-left: var(--space-xs);
	}

	.company-desc {
		background-color: var(--gray-light);
		border-radius: var(--space-xs-s);
		float: right;
		font-size: var(--step-0);
		/* margin-left: initial; */
		margin-bottom: var(--space-l);
		margin-left: var(--space-l);
		margin-right: -7em;
		padding: var(--space-xs);
		width: 14em;

		h4 {
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	.case-study-highlight + .company-desc,
	h2 + .company-desc {
		margin-top: 1em;
	}

	video {
		border-radius: var(--space-xs-s);
		box-shadow: var(--shadow-2);
	}

	#visual {
		grid-column: span 12;
		grid-row: initial;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--grid-gutter);
		margin-top: var(--grid-gutter);

		article,
		article:nth-of-type(3n+3) {
			grid-column: span 4;
			grid-row: initial;
		}
	}

}

body.entry.case-study .entry-content {
	/* background-color: blue; */
	/* display: grid; */
	/* grid-column-start: 1; */
	/* grid-column-end: 13; */
	/* grid-template-columns: subgrid; */
	/*  */
	/* .chunk { */
	/* 	display: grid; */
	/* 	grid-template-columns: subgrid; */
	/* 	grid-column-start: 3; */
	/* 	grid-column-end: 11; */
	/* 	 */
	/* } */
}

.portfolio-link {
	background-color: var(--gray-light);
	border-radius: var(--space-xs-s);
	font-family: 'BebasNeueProBold', sans-serif;
	font-weight: 500;
	grid-column-start: 6;
	grid-column-end: 8;
	text-align: center;

	a:link,
	a:visited,
	a:visited {
		display: block;
		text-decoration: none;
	}
}

.portfolio-link:hover {
	background-color: var(--blue);

	a:link,
	a:visited,
	a:visited,
	a:hover {
		color: var(--white);
	}
}

/*
	==========[ Media Queries ]==========
*/

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

	#with-bleed #overview {
		section:nth-child(1) {
			padding-left: var(--space-s-l);
		}

		section:nth-child(3) {
			padding-right: var(--space-s-l);
		}
	}

}

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

	#with-bleed #team-stats h2 {
		/* grid-column-start: 2; */
		/* grid-column-end: 5; */
		padding-left: var(--space-s-l);
	}
}


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

	#with-bleed.portfolio #portfolio-intro {
		.headshot {
			display: none;
		}
	}

	#portfolio-header {
		grid-column-start: 1;
		grid-column-end: 13;
	}

	#case-studies {
		article {
			grid-column: span 6;
		}
	}

	#leadership-principles {
		article {
			grid-column: span 6;
		}

		article:nth-child(4) {
			grid-column-start: inherit;
			grid-column-end: inherit;
			grid-column: span 6;
		}

		article:nth-child(5) {
			grid-column-start: 4;
			grid-column-end: 10;
		}

	}

	.bleed-content #ai-tools-i-use {
		article {
			grid-column: span 6;
		}
	}

	.bleed-content #built article {

	}

	#leadership-principles-head p {
		grid-column: span 12;

	}

	#with-bleed #team-stats h2 {
		justify-self: start;
		grid-column-start: 1;
		grid-column-end: 9;
		grid-row: 1;
		margin-top: var(--space-s-l);
	}

	#with-bleed #team-stats #team-stats-highlights {
		grid-column-start: 1;
		grid-column-end: 9;
		grid-row: 2;
		padding-left: var(--space-s-l);
	}

	#with-bleed #team-stats #team-images {
		grid-row: span 2;
	}


	.section-intro {
		background-color: transparent;
		box-shadow: none;
		color: var(--text);
		grid-column: span 12;

		h4 {
			font-size: var(--step-3);
		}
	}

	.methods-processes section.two-one .callout {
		background-color: var(--blue-light);
	}

	.methods-processes h3 {
		font-size: var(--step-3);
	}

	.methods-processes section article {
		grid-column: span 6;
	}

	section.two-one .content {
		grid-column: span 12;
	}

	.recommendation.long {
		/* grid-column: span 8; */
		grid-column-start: 2;
		grid-column-end: 12;
	}

	#case-studies article p,
	#case-studies article:hover p {
		display: none;
	}

	#with-bleed #ai-design .bleed-content h2,
	#with-bleed #ai-design .bleed-content>#general-thoughts,
	#with-bleed #ai-design .bleed-content #built {
		grid-column-start: 2;
		grid-column-end: 12;
	}

	#with-bleed #ai-design .bleed-content h2 {
		margin-top: 0;
	}

	#with-bleed #ai-design .bleed-content .icon {
		display: block;
		grid-column-start: 1;
		grid-column-end: 13;
		grid-row: 1;
		margin-top: var(--space-m-l);
		text-align: center;
	}

	#with-bleed #ai-design .bleed-content #ai-tools-i-use {
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
	}

	#with-bleed #ai-design .bleed-content #ai-tools-i-use article {
		grid-column: span 6;
	}

	body.case-study .callout {
		display: none;
	}

	body.case-study 	.screen-mobile {
		margin-left: 0;
		width: 6em;
	}

}

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


	.portfolio-link {
		grid-column-start: 5;
		grid-column-end: 9;
	}

	#with-bleed .my-approach .container summary {
		margin: 0;
	}

	#with-bleed #ai-design .bleed-content #built {
		grid-column-start: 1;
		grid-column-end: 13;
	}

	#with-bleed #team-stats h2 {
		grid-column-end: 13;
	}

	#with-bleed #team-stats #team-stats-highlights {
		grid-column-start: 1;
		grid-column-end: 13;
		padding-right: var(--space-s-l);
	}

	#with-bleed #team-stats #team-images  {
		flex-direction: row;
		grid-column: span 12;

		img {

			border: var(--space-3xs) solid var(--white);
			margin-bottom: calc(var(--space-s) * -1);
			max-width: 33%;
		}

		img:nth-child(1) {
			margin-left: calc(var(--space-xs) * -0.4);
		}

		img:nth-child(2) {
			margin-left: calc(var(--space-xs) * -1.2);
		}

		img:nth-child(3) {
			margin-top: var(--space-3xs);
		}
	}


	body.case-study .company-desc {
		margin-right: initial;
	}

}

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

	#leadership-principles article,
	#leadership-principles article:nth-child(4),
	#leadership-principles article:nth-child(5),
	#with-bleed #overview section,
	.methods-processes section article,
	.published,
	.recommendation.med {
		grid-column: span 12;
	}

	#case-studies {
		article {
			grid-column-start: 3;
			grid-column-end: 11;

			p {
				display: block
			}
		}

		article:hover {
			p {
				display: block;
			}
		}

		h2 {
			margin-bottom: var(--space-3xs);
			text-align: center
		}
	}


	.image-headers article {
		margin-bottom: var(--space-m);
	}


	#with-bleed #ai-design .bleed-content #ai-tools-i-use {
		article {
			grid-column: span 12;
		}
	}

	#with-bleed #ai-design .bleed-content #built article {
		grid-column: span 12;

		h4,
		p {
			grid-column-start: 2;
			grid-column-end: 12;
		}

		img {

			grid-column-start: 2;
			grid-column-end: 12;
			grid-row: 2;
			margin-top: var(--space-xs);
			margin-bottom: var(--space-m);
		}
	}

	.recommendation.long {
		grid-column: span 12;
	}

	.recommendation.med {
		margin-bottom: 0;
	}

	#with-bleed .my-approach .container summary {
		/* font-size: var(--step3); */
		line-height: .9em;
	}
}

@media screen and (max-width: 500px) {
	body.case-study .company-desc {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

/*
	==========[ Dark mode styles ]==========
*/

:root.theme-dark {
	body {
		/* color: var(--black); */

	}

	.company-desc {
		background-color: var(--gray-med-dark);
	}

	h2,
	h3,
	#home-header,
	#leadership-principles-head,
	.entry-content {
		/* color: var(--white); */
		color: var(--text);
	}

	.methods-processes {

		.section-intro,
		.image-headers {
			color: var(--black);
		}
	}

	#with-bleed #ai-design,
	#with-bleed #ai-design h2,
	#with-bleed #ai-design h3 {
		color: var(--black);
	}

	#with-bleed #ai-design h4 {
		margin-top: 0;
	}

	.published {

		a:link,
		a:visited {
			color: var(--black);
		}

		a:hover {
			color: var(--orange)
		}
	}

	.recommendation .quote {

		border-width: 2px;
	}

	#with-bleed #overview {
		background-color: var(--blue-med-dark);
	}

	#with-bleed .my-approach .container details summary {
		color: var(--gray-light);
	}

	#with-bleed .my-approach .container details summary:hover {
		color: var(--white);
	}

	@media screen and (max-width: 900px) {
		.methods-processes {
			.section-intro {
				color: var(--white);
			}

			.callout {
				color: var(--black);
			}
		}
	}
	
	.portfolio-link {
		a:link,
		a:visited,
		a:visited,
		a:hover {
			color: var(--blue); 
		}
	}
	
	.portfolio-link:hover {
		background-color: var(--blue);
		color: var(--white);
	
		a:link,
		a:visited,
		a:visited,
		a:hover {
			color: var(--white);
		}
	}
}