html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	scroll-behavior: smooth; /* Optional, adds smooth scrolling */
  scroll-padding-top: 72px; /* Applies the offset to all anchor links */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN COLOR VARIABLES [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

:root {
	--background-color: #f9f4ee;
	--text-primary: #0e0f23;
	--text-secondary: #6e7e97;
	--white: #ffffff;
	--frosted: #ffffffec;
	--transparent: #ffffff00;
	--green: #2dd4bf;
	--passive-green: #2dd4bf25;
	--yellow: #fbbf24;
	--passive-yellow: #fbbf2444;
	--violet: #a78bfa;
	--passive-violet: #a78bfa44;
	--cta: #ff6b5a;
	--passive-cta: #ff6b5a44;
	--flat: #1a1a2d;
	--soft-border: #efe8df;
	--dark-border: #303040;
	--muted: #cecfd3;
	--dark: #09091c;
	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "DM Serif Display", ui-serif, Georgia, serif;
	--time: 0.3s;
}

.darkmode {
	--background-color: #0e0f23;
	--text-primary: #f9f4ee;
	--frosted: #060611ec;
	--dark: #060611;
	--soft-border: #27284a;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END COLOR VARIABLES [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN HTML BASE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

html {
	font-size: 16px;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END HTML BASE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

.wrapper {
  width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN YOU TUBE EMBED [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
	margin-top: 30px;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END YOU TUBE EMBED [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN FLEX CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

.flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END FLEX CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN MOBILE HIDE/SHOW [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

.webhide {
	display: none;
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END MOBILE HIDE/SHOW [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN NAMED ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

body {
  background-color: var(--background-color);
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  background-image: url('../images/bgtexture.png');
  background-blend-mode: overlay;
	/*transition: var(--time);*/
}

header {
	padding: 20px 0;
	font-family: var(--font-serif);
	font-weight: 800;
	font-style: normal;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 0 0px #00000000;
	backdrop-filter: blur(0px);
	z-index: 50;
	animation: headlock linear both;
	animation-timeline: scroll(root);
	animation-range: 0px 50px;
	animation-duration: var(--time);
}

@keyframes headlock {
	from {background-color: var(--transparent); padding: 20px 0px; box-shadow: 0 0 0px #00000000; backdrop-filter: blur(0px);}
	to {background-color: var(--frosted); padding: 15px 0px; box-shadow: 0 0 10px #00000044; backdrop-filter: blur(10px);}
}

header a:link, header a:visited, header a:active {
	text-decoration: none;
	transition: var(--time);
	color: var(--text-primary);
}

header a:hover {
	transition: var(--time);
	color: var(--cta);
}

/* ------------------------------------------------------ Start Darkmode Toggle ------------------------------------------------------ */

.test {
	padding-left: 24px !important;
}

header div#darkmode {
  position: absolute;
  left: calc(50% - 43.5px);
	color: var(--text-primary);
}

header div#darkmode input#darkcheck {
	display: none;
}

header div#darkmode label {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

header div#darkmode label span.sun {
  font-size: 1.35rem;
  display: block;
  margin: -3px 0 0;
}

header div#darkmode label span.moon {

}

header div#darkmode label div#pill {
	width: 44px;
	height: 20px;
	border-radius: 20px;
	background-color: #f9f4ee;
	/*border: 1px solid var(--hard-border);*/
	box-shadow: 1px 1px 5px inset #00000044;
	display: flex;
	align-items: center;
	padding-left: 2px;
	box-sizing: border-box;
	/*transition: var(--time);*/
}


header div#darkmode label div#pill div#selector {
	height: 16px;
	width: 16px;
	background-color: var(--text-secondary);
	border-radius: 50%;
	box-sizing: border-box;
}

/* Actions when Darkmode Toggle is Selected */

/*input#darkcheck:checked ~ label div#pill {
	padding-left: 24px;
	transition: var(--time);
}*/

/* ------------------------------------------------------ //End Darkmode Toggle ------------------------------------------------------ */

header nav {
	font-family: var(--font-sans);
	font-size: 1rem;
}

header nav input#hamcheck {
	display: none; /* Hide Checkbox*/
}

header nav ul {
	gap: 40px
}

header nav ul li a:link, header nav ul li a:visited, header nav ul li a:active {
	font-weight: 400;
	display: inline-block;
	color: var(--text-secondary);
	position: relative;
}

header nav ul li a:not(.cta)::after {
	content: "";
	position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: currentColor; /* Matches text color */
  transform: scaleX(0);
  transform-origin: bottom left; /* Starts drawing from the left */
  transition: transform 0.3s ease-out; /* Animation speed */
}

header nav ul li a:hover {
	color: var(--cta);
	transition: var(--time);
}

header nav ul li a:hover::after {
	transform: scaleX(1);
}

main {

}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

footer {
	padding: 100px 0 50px;
	background-color: var(--dark);
	color: var(--background-color);
	border-top: 1px solid var(--dark-border);
	border-bottom: 1px solid var(--dark-border);
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END NAMED ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN ID ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

#logo {
	font-size: 1.3rem;
	font-weight: 500;
	transition: var(--time);
}

#logo:hover #brand {
	transform: rotate(-10deg);
	transition: var(--time);
}

#brand {
	background-color: var(--cta);
	padding: 7px;
	border-radius: 10px;
	font-size: 1.7rem;
	margin-right: 10px;
	transition: var(--time);
}

#available {
  background-color: var(--passive-green);
  margin: 0 auto 20px;
  padding: 10px;
  border-radius: 30px;
  text-align: center;
  color: var(--green);
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 230px;
  justify-content: center;
}

#available #avlight {
	background-color: var(--green);
	border-radius: 50%;
	height: 10px;
	width: 10px;
	margin-right: 10px
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END ID ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN CLASS ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

.brand {
	background-color: var(--cta);
}

.cta, .cta:link, .cta:visited, .cta:active {
	font-weight: 800;
	position: relative;
	background-color: var(--cta);
	color: var(--white);
	padding: 10px 30px;
	border-radius: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: var(--time);
	box-shadow: 0 0 0 #00000000;
}

.cta::after {
	content: "\276F";
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	padding: 0 7px;
	height: 100%;
	background-color: #E24735;
	border-radius: 0 50px 50px 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: var(--time);
	width: fit-content;
}

.cta:hover {
	transition: var(--time);
	transform: translateY(-3px);
	box-shadow: 0 5px 10px #00000044;
	padding: 10px 35px 10px 25px;
}

.cta:hover::after, nav ul li a.cta:hover::after {
	transition: var(--time);
	opacity: 1;
	transform: translateX(none);
}

.secondary {
	font-weight: 800;
	background-color: var(--text-secondary);
	color: var(--white);
	padding: 10px 30px;
	border-radius: 20px;
	text-decoration: none;
	transition: var(--time);
}

.secondary::after {
	content: "\276F";
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	padding: 0 7px;
	height: 100%;
	background-color: #546989;
	border-radius: 0 50px 50px 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: var(--time);
}

.secondary:hover {
	transition: var(--time);
	transform: translateY(-3px);
	box-shadow: 0 5px 10px #00000044;
	padding: 10px 35px 10px 25px;
}

.secondary:hover::after {
	transition: var(--time);
	opacity: 1;
}

.highlight {
	color: var(--cta);
}

.green {
	color: var(--green);
}

.violet {
	color: var(--violet);
}

.red {
	color: var(--cta);
}

.yellow {
	color: var(--yellow);
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END CLASS ELEMENTS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN PAGE SECTIONS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* ------------------------------------------------------ Hero Section ------------------------------------------------------ */

section#hero {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

section#hero div#centerstage {
	max-width: 700px;
	margin: 0 auto;
}

section#hero div#centerstage h1 {
	font-size: 6rem;
	color: var(--text-primary);
	font-family: var(--font-serif);
	text-align: center;
}

section#hero div#centerstage h2 {
	font-size: 1.6rem;
	font-family: var(--font-sans);
	text-align: center;
	color: var(--text-secondary);
	margin-top: 40px;
	line-height: 2.3rem;
}

section#hero div#centerstage div.flex {
	justify-content: center;
	margin-top: 30px;
	gap: 30px;
	font-size: 1.35rem;
}

/* ------------------------------------------------------ Sponsor Section ------------------------------------------------------ */

section#sponsors {
	background-color: var(--white);
	border-top: 1px solid var(--soft-border);
	border-bottom: 1px solid var(--soft-border);
	padding: 50px 0 40px;
	position: relative;
}

section#sponsors h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-secondary);
}

section#sponsors div#carousel {
	width: 100%;
	margin: 30px auto;
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

section#sponsors div#carousel::-webkit-scrollbar {
	display: none;
}

section#sponsors ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 80px;
	animation: spin 30s infinite linear;
	padding-right: 80px;
}

section#sponsors ul li {
	font-size: 1.8rem;
	font-weight: 500;
	font-family: var(--font-serif);
	color: var(--muted);
	white-space: nowrap;
	height: 32px;
}

section#sponsors ul li:hover {
	color: var(--cta);
	transition: var(--time);
	cursor: default;
}

@keyframes spin {
	from {translate: 0;}
	to {translate: -100%;}
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#sponsors {
	background-color: var(--dark);
	border-top: 1px solid var(--hard-border);
	border-bottom: 1px solid var(--hard-border);
}

/* ------------------------------------------------------ Metrics Section ------------------------------------------------------ */

section#metrics {
  width: 100%;
  background-color: var(--text-primary);
  box-sizing: border-box;
  padding: 150px 0;
  background-image: url(../images/bgdots.png);
  background-blend-mode: color-dodge;
  background-position: top center;
}

section#metrics h1 {
	color: var(--background-color);
	font-family: var(--font-serif);
	text-align: center;
	font-size: 4rem;
	padding: 30px 0 40px;
}

section#metrics h2 {
	color: var(--text-secondary);
	text-align: center;
	font-size: 1.25rem;
	font-weight: 500;
}

section#metrics h3 {
	color: var(--cta);
	text-transform: uppercase;
	text-align: center;
	font-weight: 500;
}

section#metrics div#examples {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 40px;
	margin-top: 40px;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
}

section#metrics div#examples a.kpi {
	box-sizing: border-box;
	background-color: var(--flat);
	border: 1px solid var(--dark-border);
	color: var(--background-color);
	padding: 40px;
	border-radius: 20px;
	width: 25%;
	text-decoration: none;
	box-shadow: 0 0 0 #00000000;
	transition: var(--time);
}

section#metrics div#examples a.kpi:hover {
	box-shadow: 0 10px 20px #00000088;
	transform: translateY(-10px);
	transition: var(--time);
}

section#metrics div#examples a.kpi h3 {
	text-transform: none;
	padding: 10px;
	text-align: left;
	display: inline-block;
	border-radius: 5px;
	margin-bottom: 10px;
}

section#metrics div#examples a.kpi:nth-child(1) h3 {
	color: var(--yellow);
	background-color: var(--passive-yellow);
}

section#metrics div#examples a.kpi:nth-child(2) h3 {
	color: var(--violet);
	background-color: var(--passive-violet);
}

section#metrics div#examples a.kpi:nth-child(3) h3 {
	color: var(--green);
	background-color: var(--passive-green);
}

section#metrics div#examples a.kpi:nth-child(4) h3 {
	color: var(--cta);
	background-color: var(--passive-cta);
}

section#metrics div#examples a.kpi div.metric {
	font-size: 3rem;
	font-weight: 700;
	padding: 20px 0;
}

section#metrics div#examples a.kpi:nth-child(1) div.metric, section#metrics div#examples a.kpi:nth-child(1) div.lmore {
	color: var(--yellow);
}

section#metrics div#examples a.kpi:nth-child(2) div.metric, section#metrics div#examples a.kpi:nth-child(2) div.lmore {
	color: var(--violet);
}

section#metrics div#examples a.kpi:nth-child(3) div.metric, section#metrics div#examples a.kpi:nth-child(3) div.lmore {
	color: var(--green);
}

section#metrics div#examples a.kpi:nth-child(4) div.metric, section#metrics div#examples a.kpi:nth-child(4) div.lmore {
	color: var(--cta);
}

section#metrics div#examples a.kpi p {
	color: var(--background-color);
	font-size: 0.9rem;
	line-height: 1.4rem;
}

section#metrics div#examples a.kpi div.lmore {
  padding: 20px 0px 0px;
  display: inline-block;
}

section#metrics div#allwork {

}

section#metrics div#allwork a.cta {
	display: block;
	margin: 40px auto;
	width: fit-content;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#metrics {
	background-color: var(--background-color);
}

body.darkmode section#metrics h1 {
	color: var(--text-primary);
}

body.darkmode section#metrics div#examples a.kpi {
	background-color: var(--dark);
}

body.darkmode section#metrics div#examples a.kpi p {
	color: var(--text-primary);
}

/* ------------------------------------------------------ Articles Section ------------------------------------------------------ */

section#articles {
	background-color: var(--background-color);
	padding: 150px 0;
}

section#articles div#arthead {
	margin-bottom: 30px;
}

section#articles div#arthead h3 {
	color: var(--green);
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}

section#articles div#arthead a:link, section#articles div#arthead a:visited, section#articles div#arthead a:active {
	color: var(--text-secondary);
	transition: var(--time);
	text-decoration: none;
	font-weight: 500;
}

section#articles div#arthead a:hover {
	color: var(--cta);
	transition: var(--time);
}

section#articles h1 {
	font-family: var(--font-serif);
	font-size: 4rem;
	margin-bottom: 30px;
}

section#articles h2 {
	color: var(--text-secondary);
	font-size: 1.25rem;
	line-height: 1.75rem;
}

section#articles div#newspaper {
	margin-top: 30px;
	gap: 40px;
	align-items: stretch;
	box-sizing: border-box;
}

section#articles div#newspaper a.articlesnip {
	box-sizing: border-box;
	padding: 40px;
	background-color: var(--white);
	border-radius: 20px;
	border: 1px solid var(--soft-border);
	flex: 1;
	text-decoration: none;
	color: var(--text-primary);
	box-shadow: 0 0 0 #00000000;
	transition: var(--time);
}

section#articles div#newspaper a:hover.articlesnip {
	transition: var(--time);
	box-shadow: 0 10px 20px #00000044;
	transform: translateY(-10px);
}

section#articles div#newspaper a.articlesnip div.mast {
	font-size: 0.8rem;
}

section#articles div#newspaper a.articlesnip div.mast div.type {
	padding: 10px;
	border-radius: 20px;
	font-weight: 700;
}

section#articles div#newspaper a.articlesnip:nth-child(1) div.mast div.type {
	color: var(--green);
	background-color: var(--passive-green);
}

section#articles div#newspaper a.articlesnip:nth-child(2) div.mast div.type {
	color: var(--cta);
	background-color: var(--passive-cta);
}

section#articles div#newspaper a.articlesnip:nth-child(3) div.mast div.type {
	color: var(--violet);
	background-color: var(--passive-violet);
}

section#articles div#newspaper a.articlesnip div.mast {
  text-align: right;
  line-height: 1.1rem;
}

section#articles div#newspaper a.articlesnip h3 {
	margin: 30px 0;
	font-family: var(--font-serif);
	font-size: 2.1rem;
}

section#articles div#newspaper a.articlesnip p {
  font-size: 1rem;
  line-height: 1.5rem;
	display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

section#articles div#newspaper a.articlesnip div.readmore {
  font-weight: 700;
  margin-top: 30px;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#articles {
	background-color: var(--dark);
}

body.darkmode section#articles h1 {
	color: var(--text-primary);
}

body.darkmode section#articles div#newspaper a.articlesnip {
	background-color: var(--background-color);
	border: 1px solid var(--text-secondary);
}

/* ------------------------------------------------------ Call to Action Section ------------------------------------------------------ */

section#calltoaction {
	background-color: var(--text-primary);
	padding: 150px 0;
	background-image: url(../images/bgdots.png);
  background-blend-mode: color-dodge;
  background-position: top center;
}

section#calltoaction h2 {
	text-align: center;
	color: var(--background-color);
	font-family: var(--font-serif);
	font-size: 2.5rem;
}

section#calltoaction p {
	color: var(--text-secondary);
	font-size: 1.25rem;
	text-align: center;
	margin-top: 30px;
	font-weight: 400;
}

section#calltoaction a.cta {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  font-size: 1.25rem;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#calltoaction {
	background-color: var(--background-color);
}

body.darkmode section#calltoaction h2 {
	color: var(--text-primary);
}

/* ------------------------------------------------------ Work Page Sections ------------------------------------------------------ */
/* ------------------------------------------------------ Work Page Sections ------------------------------------------------------ */
/* ------------------------------------------------------ Work Page Sections ------------------------------------------------------ */
/* ------------------------------------------------------ Work Page Sections ------------------------------------------------------ */

section#work, section#casestudy {
	padding: 150px 0 150px;
}

section#work div.backhome, section#casestudy div.backhome {
	padding-bottom: 50px;
}

section#work div.backhome a:link, section#work div.backhome a:visited, section#work div.backhome a:link:active, section#casestudy div.backhome a:link, section#casestudy div.backhome a:visited, section#casestudy div.backhome a:link:active {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
	transition: var(--time);
}

section#work div.backhome a:hover, section#casestudy div.backhome a:hover {
	color: var(--cta);
	transition: var(--time);
}

section#work div.headlines, section#casestudy div.headlines {

}

section#work div.headlines h2, section#casestudy div.headlines h2 {
	color: var(--cta);
	text-transform: uppercase;
	font-weight: 500;
}

section#work div#book {
	padding: 50px 0;
}

section#work div#book.flex {
	gap: 50px;
	align-items: stretch;
	flex-wrap: wrap;
}

section#work div#book a.card {
	background-color: var(--white);
	border-radius: 20px;
	border: 1px solid var(--soft-border);
	box-sizing: border-box;
	color: var(--text-primary);
	text-decoration: none;
	transition: var(--time);
	flex-basis: calc(33% - 30px);
	overflow: hidden;
}

section#work div#book a.card img {
	max-width: 100%;
}

section#work div#book a.card div.padwrap {
	padding: 20px 40px 40px;
}

section#work div#book a.card:hover {
	transition: var(--time);
	box-shadow: 0 10px 20px #00000044;
	transform: translateY(-10px);
}

section#work div#book a.card:hover div.cardcta {
	color: var(--cta);
	transition: var(--time);
}

section#work div#book a.card div.cardheader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

section#work div#book a.card div.cardheader span.company {
	padding: 10px;
	border-radius: 50px;
	font-weight: 500;
	font-size: 0.9rem;
}

section#work div#book a.card:nth-child(1) div.cardheader span.company {
	background-color: var(--passive-green);
	color: var(--green);
}

section#work div#book a.card:nth-child(2) div.cardheader span.company {
	background-color: var(--passive-violet);
	color: var(--violet);
}

section#work div#book a.card:nth-child(3) div.cardheader span.company {
	background-color: var(--passive-yellow);
	color: var(--yellow);
}

section#work div#book a.card:nth-child(4) div.cardheader span.company {
	background-color: var(--passive-violet);
	color: var(--violet);
}

section#work div#book a.card:nth-child(5) div.cardheader span.company {
	background-color: var(--passive-cta);
	color: var(--cta);
}

section#work div#book a.card:nth-child(6) div.cardheader span.company {
	background-color: var(--passive-green);
	color: var(--green);
}

section#work div#book a.card div.cardheader span.year {
	font-weight: 700;
	color: var(--text-secondary);
}

section#work div#book a.card h2 {
	font-size: 2.2rem;
	font-family: var(--font-serif);
	padding: 20px 0;
}

section#work div#book a.card p {
	font-size: 1.1rem;
	color: var(--text-secondary);
	line-height: 1.5rem;
	padding-bottom: 20px;
}

section#work div#book a.card div.successpoint {
	font-weight: 700;
	font-size: 1.5rem;
	padding: 20px;
	border-radius: 20px;
	width: fit-content;
}

section#work div#book a.card:nth-child(1) div.successpoint {
	background-color: var(--passive-green);
	color: var(--green);
}

section#work div#book a.card:nth-child(2) div.successpoint {
	background-color: var(--passive-violet);
	color: var(--violet);
}

section#work div#book a.card:nth-child(3) div.successpoint {
	background-color: var(--passive-yellow);
	color: var(--yellow);
}

section#work div#book a.card:nth-child(4) div.successpoint {
	background-color: var(--passive-violet);
	color: var(--violet);
}

section#work div#book a.card:nth-child(5) div.successpoint {
	background-color: var(--passive-cta);
	color: var(--cta);
}

section#work div#book a.card:nth-child(6) div.successpoint {
	background-color: var(--passive-green);
	color: var(--green);
}

section#work div#book a.card div.successpoint span.explaination{
	font-size: 1rem;
	color: var(--text-primary);
	font-weight: 400;
}

section#work div#book a.card .tags {
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  gap: 10px;
  flex-wrap: wrap;
}

section#work div#book a.card div.tags div.tag {
	font-weight: 500;
	border-radius: 10px;
	padding: 10px;
	color: var(--text-primary);
	background-color: var(--soft-border);
	font-size: 0.7rem;
	align-content: center;
}

section#work div#book a.card div.cardcta {
	font-weight: 500;
	margin-top: 20px;
}

/* ------------------------------------------------------ Case Study Section ------------------------------------------------------ */
/* ------------------------------------------------------ Case Study Section ------------------------------------------------------ */
/* ------------------------------------------------------ Case Study Section ------------------------------------------------------ */

section#casestudy div.headlines div.flex {
	justify-content: flex-start;
	gap: 20px;
}

section#casestudy div.company {
	padding: 10px;
	border-radius: 50px;
	font-weight: 500;
	font-size: 0.9rem;
	background-color: var(--passive-cta);
	color: var(--cta);
}

section#casestudy  div.date {
	color: var(--text-secondary);
	font-weight: 500;
}

section#work div.headlines h1, section#casestudy div.headlines h1 {
	font-family: var(--font-serif);
	font-size: 4rem;
	padding: 30px 0;
	color: var(--text-primary);
}

section#work div.headlines h3, section#casestudy div.headlines h3 {
	color: var(--text-secondary);
	font-size: 1.25rem;
	line-height: 1.65rem;
	text-transform: none;
	font-weight: normal;
}

section#casestudy div#stage {
	margin: 50px 0;
	text-align: center;
}

section#casestudy div#stage.flex {
	flex-direction: row;
	gap: 50px;
}

section#casestudy div#stage img {
	max-width: 80%;
	box-shadow: 0 10px 20px #00000044;
	border-radius: 20px;
	overflow: hidden;
}

section#casestudy div#stage div.aboutimg {
  width: calc(25% - 25px);
  background-color: #fff;
  border-radius: 20px;
  height: 240px;
  background-size: cover;
  background-position: top center;
	box-shadow: 0 10px 20px #00000044;
}

section#casestudy div#stage div.aboutimg img {
	display: none;
}

section#casestudy div#stage div.aboutimg:nth-child(1) {
	background-image: url(../images/about1.jpg);
}

section#casestudy div#stage div.aboutimg:nth-child(2) {
	background-image: url(../images/heroesslide8.png);
}

section#casestudy div#stage div.aboutimg:nth-child(3) {
	background-image: url(../images/about2.jpg);
}

section#casestudy div#stage div.aboutimg:nth-child(4) {
	background-image: url(../images/about3.jpg);
}

section#casestudy div#details {
	border-top: 1px solid #99a;
	border-bottom: 1px solid #99a;
	padding: 30px 10px;
	margin-bottom: 50px;
}

section#casestudy div#details.flex {
	justify-content: flex-start;
	gap: 70px;
}

section#casestudy.contact div#details.flex {
	justify-content: space-between;
}

section#casestudy div#details div.datapoint {
}

section#casestudy div#details div.datapoint h4 {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 1rem;
  padding-bottom: 10px;
  text-transform: uppercase;
}

section#casestudy div#details div.datapoint p {
	color: var(--text-primary);
	font-size: 0.9rem
}

section#casestudy h2 {
	font-family: var(--font-serif);
	font-size: 2.2rem;
	margin-top: 30px;
	color: var(--text-primary);
}

section#casestudy h3 {
	font-weight: 500;
	font-size: 1.1rem;
	text-transform: uppercase;
}

section#casestudy h3.bushead {
	color: var(--cta);
}

section#casestudy h3.storyhead {
	color: var(--green);
}

section#casestudy h3.nextproject {
	color: var(--violet);
}

section#casestudy div#businesskpis {
	margin: 50px 0;
}

section#casestudy div#businesskpis.flex {
	gap: 40px;
	align-items: stretch;
}

section#casestudy div#businesskpis div.kpi {
	flex-basis: calc(25% - 25px);
	background-color: var(--frosted);
	padding: 30px;
	box-sizing: border-box;
	border-radius: 20px;
	border: 1px solid var(--soft-border);
	color: var(--text-primary);
}

section#casestudy.contact div#businesskpis div.kpi {
	flex-basis: 33%;
}

section#casestudy div#businesskpis div.kpi div.icon {
	color: var(--cta);
	font-size: 1.6rem;
}

section#casestudy div#businesskpis div.kpi div.icon img {
	max-width: 20px;
}

section#casestudy div#businesskpis div.kpi div.bigvalue {
	font-weight: 600;
	font-family: var(--font-serif);
	font-size: 2.25rem;
	padding: 10px 0;
}

section#casestudy div#businesskpis div.kpi h4{
	font-size: 1rem;
	font-weight: 600;
	padding: 0 0 10px;
	font-family: var(--font-sans);
}

section#casestudy div#businesskpis div.kpi p {
	font-size: 0.9rem;
}

section#casestudy div#businesskpis div.kpi ul {
	padding-left: 20px;
}

section#casestudy div#businesskpis div.kpi li {
	padding-top: 10px;
	list-style: disc;
}

section#casestudy div#businesskpis div.kpi li:nth-child(1) {
	padding-top: 10px;
}

section#casestudy div#businesskpis div.kpi a:link, section#casestudy div#businesskpis div.kpi a:visited, section#casestudy div#businesskpis div.kpi a:active {
	text-decoration: none;
	color: var(--cta);
	transition: var(--time);
}

section#casestudy div#businesskpis div.kpi a:hover {
	color: var(--violet);
	transition: var(--time);
}

section#casestudy div#mag.flex {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 50px;
}

section#casestudy.contact div#mag.flex {
	align-items: stretch;
}

section#casestudy article {
  margin-bottom: 50px;
  background: var(--frosted);
  padding: 20px 50px 50px;
  border-radius: 20px;
  margin-top: 30px;
  max-width: 900px;
	border: 1px solid var(--soft-border);
}

section#casestudy.contact article {
	margin-bottom: 0;
}

section#casestudy article a:link, section#casestudy article a:visited, section#casestudy article a:active {
	color: var(--green);
	font-weight: 700;
	transition: var(--time);
}

section#casestudy article a:hover {
	color: var(--cta);
	transition: var(--time);
}

section#casestudy article h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1.2rem;
	padding: 30px 0 0;
	color: var(--text-primary);
}

section#casestudy article p {
	color: var(--text-primary);
	line-height: 1.5rem;
	font-size: 1rem;
	max-width: 900px;
	padding: 30px 0 0;
}

section#casestudy article p img {
  max-width: 100%;
  border-radius: 20px;
}

section#casestudy article p.herolayout {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

section#casestudy article p.herolayout img {
	width: 50%;
}

section#casestudy article ul {
	padding-left: 20px;
}

section#casestudy article ul li {
	padding-top: 20px;
	list-style: disc;
	font-size: 1rem;
	color: var(--text-primary);
}

section#casestudy aside {
	background-color: var(--frosted);
	padding: 50px;
	border-radius: 20px;
	margin-top: 30px;
	color: var(--text-primary);
	width: 20%;
	border: 1px solid var(--soft-border);
}

section#casestudy aside.about {
	width: 30%;
}

section#casestudy aside h4 {
  font-size: 1.1rem;
  font-family: var(--font-serif);
  padding-bottom: 20px;
}

section#casestudy aside p {
  font-size: 0.9rem;
  font-family: var(--font-sans);
  padding-bottom: 20px;
  line-height: 1.3rem;
}

section#casestudy aside.about div.flex:nth-child(2) {
	margin: 0;
	font-size: 0.9rem;
	gap: 20px;
}

section#casestudy aside.about div.flex div.left {
	width: 50%;
}

section#casestudy aside.about div.flex div.right {
	width: 50%;
}

section#casestudy aside ul {

}

section#casestudy aside ul li {
	padding: 10px 0 0;
}

section#casestudy aside a:link.figbtn, section#casestudy aside a:active.figbtn, section#casestudy aside a:visited.figbtn {
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 20px;
	border: 1px solid var(--text-secondary);
	margin-bottom: 20px;
	color: var(--text-primary);
	background-color: var(--background-color);
	transition: var(--time);
}

section#casestudy aside a.cta {
	display: block;
	width: fit-content;
	margin: 35px auto 0;
}

section#casestudy aside a:hover.figbtn {
	background-color: var(--soft-border);
	transition: var(--time);
}

section#casestudy aside .figbtn.flex {
	gap: 20px;
}

section#casestudy aside .figbtn img {
	width: 35px;
}

section#casestudy aside p.small {
  font-size: 0.7rem;
  padding: 0;
  line-height: 1rem;
}

section#casestudy a:link#nextproject, section#casestudy a:visited#nextproject, section#casestudy a:active#nextproject {
  background-color: var(--frosted);
  border-radius: 20px;
  padding: 50px;
  width: 100%;
  display: block;
  text-decoration: none;
  margin-top: 30px;
  box-sizing: border-box;
	transition: var(--time);
	color: var(--text-primary);
	border: 1px solid var(--soft-border);
}

section#casestudy a:hover#nextproject {
	box-shadow: 0 10px 20px #00000044;
	transform: translateY(-10px);
	transition: var(--time);
	color: var(--text-primary);
	border: 1px solid var(--soft-border);
}

section#casestudy a#nextproject div.nexthead {

}

section#casestudy a#nextproject div.nexthead.flex div.flex {
	gap: 10px;
}

section#casestudy a#nextproject div.nexthead.flex div.encora {
	font-weight: 500;
	color: var(--text-primary);
	transition: var(--time);
}

section#casestudy a:hover#nextproject div.nexthead.flex div.encora {
	color: var(--violet);
	transition: var(--time);
}

section#casestudy a#nextproject h2 {
	margin-top: 0;
}

section#casestudy a#nextproject p {
	margin-top: 30px;
	line-height: 1.5rem;
  font-size: 1rem;
  max-width: 900px;
}

section#casestudy a#nextproject div.company {
	color: var(--violet);
	background-color: var(--passive-violet);
}

section#casestudy div.flex:nth-child(2), section#casestudy div.flex:nth-child(2) div.left div.flex {
	align-items: flex-start;
	margin-top: 30px;
	justify-content: flex-start;
}

section#casestudy div.flex:nth-child(2) div.left div.flex {
	gap: 20px;
}

section#casestudy div.flex div.left {
	width: 75%;
}

section#casestudy div.flex div.right {
	width: 25%;
}

section#casestudy div.flex div.right img {
	max-width: 100%;
}

section#casestudy div.flex:nth-child(2) div.left div.skill {
  padding: 10px;
  border-radius: 50px;
  background-color: var(--background-color);
  font-size: 0.8rem;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#work div#book a.card {
	background-color: var(--dark);
	border: 1px solid var(--text-secondary);
}

body.darkmode section#work div#book a.card div.tags div.tag {
	color: var(--text-primary);
}

/* ------------------------------------------------------ Testimonials Section ------------------------------------------------------ */
/* ------------------------------------------------------ Testimonials Section ------------------------------------------------------ */
/* ------------------------------------------------------ Testimonials Section ------------------------------------------------------ */

section#casestudy.about {
	padding: 150px 0 50px;
}

section#testimonials {
	width: 100%;
  background-color: var(--text-primary);
  box-sizing: border-box;
  padding: 50px 0 150px;
  background-image: url(../images/bgdots.png);
  background-blend-mode: color-dodge;
  background-position: top center;
	border-top: 10px solid var(--text-secondary);
}

section#testimonials h1 {
  color: var(--background-color);
  font-family: var(--font-serif);
  text-align: left;
  font-size: 4rem;
  padding: 30px 0 40px;
}

section#testimonials div.flex {
	gap: 50px;
	align-items: stretch;
}

section#testimonials div.flex div.testimonial {
  box-sizing: border-box;
  background-color: var(--flat);
  border: 1px solid var(--dark-border);
  color: var(--background-color);
  padding: 40px;
  border-radius: 20px;
  width: 33%;
  text-decoration: none;
  box-shadow: 0 0 0 #00000000;
  transition: var(--time);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

section#testimonials div.flex div.testimonial p {
	font-size: 1.05rem;
	line-height: 1.8rem;
	position: relative;
}

section#testimonials div.flex div.testimonial p:first-child::before {
	content: "\201d";
	position: absolute;
	left: -10px;
	top: -10px;
	color: var(--yellow);
	font-size: 2rem;
}

section#testimonials div.flex div.testimonial p:first-child::after {
	content: "\201d";
	position: absolute;
	bottom: -2q0px;
	right: -10px;
	color: var(--yellow);
	font-size: 2rem;
}

section#testimonials div.flex div.testimonial p:nth-child(2) {
	padding-top: 30px;
	font-size: 1rem;
}

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

section#casestudy.contact div#businesskpis.flex {
  gap: 40px;
  align-items: stretch;
	margin: 30px 0 50 px;
}

section#casestudy.contact article {
	padding: 50px;
}

section#casestudy.contact article h4 {
	padding: 0;
	font-size: 1.35rem;
}

section#casestudy.contact article .conmess {
	margin: 0 auto 30px;
	max-width: 900px;
}

section#casestudy.contact article form {
  background-color: var(--background-color);
  padding: 50px;
  border-radius: 15px;
	margin: 0 auto;
	max-width: 900px;
	box-sizing: border-box;
	background-image: url(../images/bgtexture2.png);
}

section#casestudy.contact article form label{
	width: 100%;
	display: block;
	color: var(--text-primary);
	font-family: var(--font-serif);
	font-size: 1.14rem;
}

section#casestudy.contact article form label input[type="email"], section#casestudy.contact article form label input[type="text"] {
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--soft-border);
  margin: 5px 0 20px;
	font-family: var(--font-sans);
	box-sizing: border-box;
}

section#casestudy.contact article form label textarea{
  width: 100%;
  border: solid 1px var(--soft-border);
  border-radius: 20px;
  height: 80px;
  margin: 5px 0;
	font-family: var(--font-sans);
	padding: 10px;
	resize: none;
	box-sizing: border-box;
}

section#casestudy.contact article form button {
  border: none;
  font-size: 1.25rem;
  margin: 30px auto 0px;
  border-radius: 50px;
  display: block;
}

section#casestudy.contact aside {

}

section#casestudy.contact aside h2 {
  font-size: 1.9rem;
  margin: 0 0 40px;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode section#testimonials {
	background-color: var(--background-color);
}

body.darkmode section#testimonials h1 {
	color: var(--text-primary);
}

body.darkmode section#testimonials div.testimonial {
	background-color: var(--dark);
}

body.darkmode section#testimonials div.testimonial p {
	color: var(--text-primary);
}

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

footer div.flex {
	align-items: flex-start;
}

footer div.cell {
	flex: 1;
	box-sizing: border-box;
	align-content: flex-start;
}

footer div.cell:nth-child(2), footer div.cell:nth-child(3), footer div.cell:nth-child(4) {
	padding-left: 50px;
	border-left: 1px dashed var(--dark-border);
}

footer div.cell p{
	max-width: 230px;
	line-height: 1.4rem;
}

footer div.cell a.flex {
	justify-content: left;
	font-size: 1.1rem;
	margin-bottom: 20px;
	text-decoration: none;
}

footer div.cell a.flex #smbrand {
	background-color: var(--cta);
	border-radius: 7px;
	padding: 7px;
	margin-right: 10px;
}

footer div.cell a.flex #smsitename {
	font-family: var(--font-serif);
	text-decoration: none;
	color: var(--background-color);
}

footer div.cell h4 {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	margin-bottom: 20px;
	margin-top: 7px;
}

footer div.cell ul li {
	padding: 0 0 10px;
}

footer div.cell ul li a:link, footer div.cell ul li a:active, footer div.cell ul li a:visited {
	color: var(--text-secondary);
	text-decoration: none;
	transition: var(--time);
}

footer div.cell ul li a:hover {
	color: var(--cta);
	transition: var(--time);
}

footer div#finale {
	color: var(--text-secondary);
	font-size: 0.7rem;
	padding-top: 50px;
	border-top: 1px solid var(--dark-border);
	margin-top: 100px;
}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

body.darkmode footer {
	color: var(--text-primary);
}

body.darkmode footer div.cell a.flex #smsitename {
	color: var(--text-primary);
}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END PAGE SECTIONS [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

@media all and (max-width: 1400px) and (min-width: 1200px) {

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.wrapper {
	  width: 100%;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.webhide {
		display: none;
	}

	section#casestudy div#mag.flex {
	  align-items: stretch;
	}

	section#casestudy article.about {
		margin-bottom: 0;
	}

	section#casestudy aside.about {
		width: 40%;
	}

}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

@media all and (max-width: 1199px) and (min-width: 1024px) {

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.wrapper {
	  width: 100%;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.webhide {
		display: none;
	}

	section#metrics div#examples {
		flex-wrap: wrap;
	}

	section#metrics div#examples a.kpi {
	  flex: 1 1 calc(50% - 20px);
	}

	section#articles div#newspaper {
	  flex-wrap: wrap;
	  flex-direction: column;
	}

	section#work div#book a.card {
		flex-basis: calc(50% - 25px);
	}

	section#casestudy div#stage.flex {
	  flex-direction: row;
	  gap: 30px;
	}

	section#casestudy div#businesskpis div.kpi {
		font-size: 0.8rem;
	}

	section#casestudy.contact div#businesskpis div.kpi h4 {
		font-size: 0.8rem;
	}

	section#casestudy div#mag.flex {
	  flex-direction: column-reverse;
		gap: 0px;
	}

	section#casestudy.about div#mag.flex, section#casestudy.contact div#mag.flex {
	  flex-direction: column;
		gap: 0px;
	}

	section#casestudy article {
	 max-width: 100%;
	 margin-bottom: 0;
 	}

	section#casestudy article p {
		max-width: 100%;
	}

	section#casestudy aside {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
	}

	section#casestudy.contact aside {
    flex-wrap: wrap;
		gap: 0 30px;
  }

	section#casestudy.contact aside h4 {
	  text-align: center;
	}

	section#casestudy aside.about {
		width: 100%;
	}

	section#casestudy aside.about div.flex:nth-child(2) {
		flex-direction: row;
	}

	section#casestudy aside.about div.flex div.left, section#casestudy aside.about div.flex div.right {
		width: 100%;
	}

	section#casestudy aside.about div.flex div.left ul, section#casestudy aside.about div.flex div.right ul {
		display: flex;
		flex-direction: row;
		gap: 10px;
		flex-wrap: wrap;
	}

	section#casestudy.contact aside h2 {
	  text-align: center;
	  width: 100%;
	  display: block;
	}

	footer div.cell {
	  flex: max-content;
	}

}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

@media all and (max-width: 1023px) and (min-width: 800px) {

	body {
		font-size: 14px;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.wrapper {
	  width: 100%;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.webhide {
		display: none;
	}

	header div#darkmode {
	  position: relative;
	  left: auto;
	}

	header nav ul {
	  gap: 30px;
	}

	section#metrics div#examples {
		flex-wrap: wrap;
	}

	section#metrics div#examples a.kpi {
	  flex: 1 1 calc(50% - 20px);
	}

	section#articles div#newspaper {
	  flex-wrap: wrap;
	  flex-direction: column;
	}

	section#calltoaction p {
	  line-height: 1.7rem;
	}

	section#work div#book a.card {
		flex-basis: calc(50% - 25px);
	}

	section#casestudy div#stage img {
  	max-width: 90%;
	}

	section#casestudy div#stage.flex {
	  flex-direction: row;
	  gap: 30px;
		flex-wrap: wrap;
	}

	section#casestudy div#stage div.aboutimg {
		width: calc(50% - 15px);
	}

	section#casestudy.contact div#businesskpis.flex {
		gap: 20px;
		flex-wrap: nowrap;
		margin-top: 30px;
	}

	section#casestudy.about div#mag.flex, section#casestudy.contact div#mag.flex {
	  flex-direction: column;
		gap: 0px;
	}

	section#casestudy div#businesskpis div.kpi h4 {
	  font-size: 0.8rem;
	  font-weight: 400;
	  padding: 0 0 10px;
	  font-family: var(--font-sans);
	}

	section#casestudy.about div#details.flex {
	  justify-content: flex-start;
	  gap: 50px;
	}

	section#casestudy div#businesskpis.flex {
  	flex-wrap: wrap;
	}

	section#casestudy div#businesskpis div.kpi {
	  flex-basis: calc(50% - 20px);
	}

	section#casestudy div#mag.flex {
	  flex-direction: column-reverse;
		gap: 0px;
	}

	section#casestudy article {
		max-width: 100%;
	}

	section#casestudy article p {
		max-width: 100%;
	}

	section#casestudy article {
	 max-width: 100%;
	 margin-bottom: 0;
 }

	section#casestudy article p {
		max-width: 100%;
	}

	section#casestudy aside {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
	}

	section#casestudy aside.about {
		width: 100%;
	}

	section#casestudy aside.about div.flex:nth-child(2) {
		flex-direction: row;
	}

	section#casestudy aside.about div.flex div.left, section#casestudy aside.about div.flex div.right {
		width: 100%;
	}

	section#casestudy aside.about div.flex div.left ul, section#casestudy aside.about div.flex div.right ul {
		display: flex;
		flex-direction: row;
		gap: 10px;
		flex-wrap: wrap;
	}

	section#casestudy.contact aside {
    flex-wrap: wrap;
		gap: 0 30px;
		padding: 30px 20px;
	  justify-content: space-evenly;
  }

	section#casestudy.contact aside h4 {
	  text-align: center;
		font-size: 0.8rem;
	}

	section#casestudy.contact aside p {
		text-align: center;
		font-size: 0.68rem;
	}

	section#casestudy.contact aside h2 {
	  text-align: center;
	  width: 100%;
	  display: block;
		margin-bottom: 20px;
		font-size: 1.5rem;
	}

	section#testimonials div.flex {
	  gap: 50px;
	  align-items: stretch;
		flex-direction: column;
	}

	section#testimonials div.flex div.testimonial {
	  width: 100%;
	}

	footer div.flex {
		flex-wrap: wrap;;
	}

	footer div.cell {
    flex-basis: 50%;
    padding: 50px;
  }

	footer div.cell:nth-child(3) {
		border-left: none;
	}

}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

@media all and (max-width: 799px) and (min-width: 384px) {

	body {
		font-size: 14px;
		background-image: url('../images/bgtexturemob.png');
		background-blend-mode: normal;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.wrapper {
	  width: 100%;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.mobhide {
		display: none;
	}

	.webhide {
		display: none;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN MOBILE NAV CSS ONLY [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	header div#logo {
		font-size: 1.1rem;
	}

	header div#darkmode {
		right: 75px;
		left: inherit;
	}

	label.hamburger {
		cursor: pointer;
		display: flex;
		align-items: center;
		height: 30px;
		width: 30px;
	}

	label.hamburger span.hambun {
		display: block;
		background-color: var(--text-primary);
		height: 4px;
		width: 30px;
		cursor: pointer;
		position: relative;
		transition: var(--time);
	}

	label.hamburger span.hambun::before, label.hamburger span.hambun::after {
		content: "";
		position: absolute;
		display: block;
		background-color: var(--text-primary);
		height: 4px;
		width: 30px;
		cursor: pointer;
		transition: var(--time);
	}

	label.hamburger span.hambun::before {
		top: 10px;
	}

	label.hamburger span.hambun::after {
		top: -10px;
	}

	nav ul.flex {
    flex-direction: column;
    gap: 0px;
    position: fixed;
    top: 71px;
		width: 100%;
    right: 0;
		background-color: var(--white);
		backdrop-filter: blur(10px);
		display: flex;
		height: 0px;
		overflow: hidden;
		transition: height var(--time) ease;
  }

	nav ul.flex li {
			width: 100%;
			border-bottom: 1px solid var(--soft-border);
	}

	nav ul.flex li a {
		padding: 20px 0;
		width: 100%;
		font-weight: 400;
		text-align: center;
	}

	nav ul.flex li a::after {
		content: "";
		display: none;
	}

	nav ul.flex li a.cta {
		color: var(--text-secondary);
		background-color: var(--transparent);
		border-radius: 0;
		padding: 20px 0;
		font-weight: 400;
		text-align: center;
	}

	nav ul.flex li a.cta:hover, nav ul.flex li a:hover {
		transition: 0;
		transform: none;
		box-shadow: 0 0 0 #00000000;
		padding: 20px 0;
		background-color: var(--cta);
		color: var(--white);
	}

	input#hamcheck:checked ~ ul.flex {
	  /*Show Mobile Nav on Checked Box (click)*/
		height: 228px;
		transition: height var(--time);
		box-sizing: border-box;
		box-shadow: 0 10px 10px #00000044;
		border-top: 1px solid var(--soft-border);
	}

	input#hamcheck:checked ~ .hamburger .hambun {
		background-color: var(--transparent);
		transition: var(--time);
	}

	input#hamcheck:checked ~ .hamburger .hambun::before {
    transform: rotate(-45deg);
    top:0;
		transition: var(--time);
	}

	input#hamcheck:checked ~ .hamburger .hambun::after {
    transform: rotate(45deg);
    top:0;
		transition: var(--time);
	}

	body:has(input#hamcheck:checked) {
		/* Pauses screen scroll when menu is displayed*/
	  overflow: hidden;
	}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

	body.darkmode nav ul.flex {
		background-color: var(--text-primary);
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END MOBILE NAV CSS ONLY [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	/* ------------------------------------------------------ Hero Section ------------------------------------------------------ */

	section#hero {
	  height: auto;
	  padding: 95px 0 50px;
	}

	section#hero div#centerstage h1 {
		font-size: 3.4rem;
	}

	section#hero div#centerstage h2 {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.8rem;
  }

	section#hero div#centerstage div.flex {
		flex-direction: column;
		gap: 20px;
	}

	section#hero div#centerstage div.flex .cta, section#hero div#centerstage div.flex .secondary {
		width: 200px;
		text-align: center;
	}

	/* ------------------------------------------------------ Sponsors Section ------------------------------------------------------ */

	/* ------------------------------------------------------ Metrics Section ------------------------------------------------------ */

	section#metrics {
	  padding: 50px 0;
	}

	section#metrics h1 {
	  font-size: 2rem;
	}

	section#metrics h2 {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	section#metrics div#examples {
		flex-wrap: nowrap;
		flex-direction: column;
	}

	section#metrics div#examples a.kpi {
	  width: 100%;
	}

	/* ------------------------------------------------------ Articles Section ------------------------------------------------------ */

	section#articles {
	  padding: 50px 0;
	}

	section#articles h1 {
	  font-size: 2.3rem;
	}

	section#articles h2 {
	  font-size: 1.1rem;
	}

	section#articles div#newspaper {
	  flex-wrap: wrap;
	  flex-direction: column;
		gap: 20px;
	}

	section#articles div#newspaper a.articlesnip {
		padding: 20px;
	}

	section#articles div#newspaper a.articlesnip div.mast {
	  text-align: left;
	  line-height: 1.1rem;
	}

	section#articles div#newspaper a.articlesnip div.flex {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* ------------------------------------------------------ Call to Action Section ------------------------------------------------------ */

	section#calltoaction {
		padding: 50px 0;
	}

	section#calltoaction p {
	  line-height: 1.7rem;
	}

	/* ------------------------------------------------------ 2nd Page Work Section ------------------------------------------------------ */

	section#work, section#casestudy, section#casestudy.about {
		padding: 100px 0 50px;
	}

	section#work div.backhome, section#casestudy div.backhome {
	  padding-bottom: 30px;
	}

	section#work div.headlines h1, section#casestudy div.headlines h1 {
	  font-size: 3rem;
	  padding: 20px 0;
	}

	section#work div.headlines h3 {
	  font-size: 1rem;
	}

	section#work div#book {
	  padding: 30px 0;
	}

	section#work div#book.flex {
		gap: 30px;
	}

	section#work div#book a.card {
		flex-basis: 100%;
	}

	section#work div#book a.card div.padwrap {
		padding: 20px 20px 30px;
	}

	section#work div#book a.card div.tags div.tag {
	  font-size: 0.85rem;
	}

	/* ------------------------------------------------------ 3rd Page Case Study Section ------------------------------------------------------ */

	section#casestudy div#stage img {
  	max-width: 100%;
	}

	section#casestudy div#stage.flex {
	  flex-direction: column;
	  gap: 20px;
		flex-wrap: wrap;
	}

	section#casestudy div#stage div.aboutimg {
		width: 100%;
		height: auto;
	}

	section#casestudy div#stage div.aboutimg img {
		display: block;
		max-width: 100%;
	}

	section#casestudy div#stage div.aboutimg:nth-child(1) {
	  background-image: url(../images/about1.jpg);
	  max-height: 430px;
	  overflow: hidden;
	}

	section#casestudy.about div#mag.flex {
	  flex-direction: column;
		gap: 0px;
	}

	section#casestudy div#details.flex {
	  justify-content: start;
	  gap: 30px;
	  flex-direction: column;
	  align-items: baseline;
	}

	section#casestudy aside a:link.figbtn, section#casestudy aside a:active.figbtn, section#casestudy aside a:visited.figbtn {
	  justify-content: flex-start;
	  width: fit-content;
	}

	section#casestudy div#businesskpis.flex, section#casestudy.contact div#businesskpis.flex {
  	flex-wrap: wrap;
		gap: 20px;
		margin-top: 20px;
	}

	section#casestudy div#businesskpis div.kpi, section#casestudy.contact div#businesskpis div.kpi {
	  flex-basis: 100%;
	}

	section#casestudy div#mag.flex {
	  flex-direction: column-reverse;
		gap: 0px;
	}

	section#casestudy.contact div#mag.flex {
	  flex-direction: column;
		gap: 0px;
	}

	section#casestudy article {
    max-width: 100%;
    padding: 0 20px 20px;
  }

	section#casestudy.contact article {
	  padding: 30px;
	}

	section#casestudy article p {
		max-width: 100%;
	}

	section#casestudy article p.herolayout {
		flex-direction: column;
	}

	section#casestudy article p.herolayout img {
		width: 100%;
	}

	section#casestudy.contact article form {
		padding: 30px;
	}

	section#casestudy.contact article form label textarea {
		height: 140px;
	}

	section#casestudy aside, section#casestudy.about aside.about {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

	section#casestudy.contact aside {
		padding: 30px;
	}

	section#casestudy.contact aside h4 {
		padding-bottom: 10px;
	}

	section#casestudy.about aside.about {
		margin-top: 0;
		padding: 30px;
  }

	section#casestudy aside.about div.flex:nth-child(2) {
		flex-direction: row;
		font-size: 0.85rem;
	}

	section#casestudy a:link#nextproject, section#casestudy a:visited#nextproject, section#casestudy a:active#nextproject {
		padding: 20px;
	}

	section#casestudy a#nextproject div.nexthead {
	  flex-direction: column;
		align-items: baseline;
	}

	section#casestudy a#nextproject div.nexthead.flex div.encora {
		padding-left: 10px;
	}

	section#casestudy a#nextproject div.nexthead.flex div.flex {
    gap: 10px;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    width: 100%;
  }

	section#casestudy div.flex:nth-child(2) {
	  align-items: flex-start;
	  margin-top: 20px;
	  justify-content: flex-start;
		flex-direction: column-reverse;
		gap: 20px;
	}

	section#casestudy div.flex:nth-child(2) div.left div.flex {
		align-items: flex-start;
	  margin-top: 20px;
	  justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	section#casestudy div.flex div.left {
	  width: 100%;
	}

	section#casestudy div.flex div.right {
	  width: 100%;
	}

	/* ------------------------------------------------------ Testimonials Section ------------------------------------------------------ */

	section#testimonials {
		padding: 50px 0;
	}

	section#testimonials h1 {
		font-size: 2.8rem;
		padding-top: 0;
	}

	section#testimonials div.flex {
	  gap: 30px;
	  align-items: stretch;
		flex-direction: column;
	}

	section#testimonials div.flex div.testimonial {
		width: 100%;
		padding: 25px;
	}

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

	footer {
		padding: 50px 0;
	}

	footer div.flex {
		flex-wrap: wrap;
		flex-direction: column;
		align-content: center;
	}

	footer div.cell {
    box-sizing: border-box;
  }

	footer div.cell p {
	  max-width: 100%;
	  line-height: 1.4rem;
	}

	footer div.cell:nth-child(1), footer div.cell:nth-child(2), footer div.cell:nth-child(3), footer div.cell:nth-child(4) {
    border-left: none;
    padding: 10px 0;
    flex: 1 1 0;
    width: 100%;
  }

	footer div#finale {
		margin-top: 50px;
	}

	footer div#finale div.flex {
		gap: 20px;
		text-align: center;
		flex: 1 1 0;
	}

	footer div#finale div.flex div {
		width: 100%;
	}

}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */
/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] NEW MEDIA SIZE [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

@media all and (max-width: 383px) and (min-width: 0px) {

	body {
		font-size: 14px;
		background-image: url('../images/bgtexturemob.png');
		background-blend-mode: normal;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.wrapper {
	  width: 100%;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END WRAPPER CONTROL [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	.mobhide {
		display: none;
	}

	.webhide {
		display: block;
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] BEGIN MOBILE NAV CSS ONLY [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	header div#logo {
		font-size: 1.1rem;
	}

	header div#darkmode {
		right: 75px;
		left: inherit;
	}

	label.hamburger {
		cursor: pointer;
		display: flex;
		align-items: center;
		height: 30px;
		width: 30px;
	}

	label.hamburger span.hambun {
		display: block;
		background-color: var(--text-primary);
		height: 4px;
		width: 30px;
		cursor: pointer;
		position: relative;
		transition: var(--time);
	}

	label.hamburger span.hambun::before, label.hamburger span.hambun::after {
		content: "";
		position: absolute;
		display: block;
		background-color: var(--text-primary);
		height: 4px;
		width: 30px;
		cursor: pointer;
		transition: var(--time);
	}

	label.hamburger span.hambun::before {
		top: 10px;
	}

	label.hamburger span.hambun::after {
		top: -10px;
	}

	nav ul.flex {
    flex-direction: column;
    gap: 0px;
    position: fixed;
    top: 71px;
		width: 100%;
    right: 0;
		background-color: var(--white);
		backdrop-filter: blur(10px);
		display: flex;
		height: 0px;
		overflow: hidden;
		transition: height var(--time) ease;
  }

	nav ul.flex li {
			width: 100%;
			border-bottom: 1px solid var(--soft-border);
	}

	nav ul.flex li a {
		padding: 20px 0;
		width: 100%;
		font-weight: 400;
		text-align: center;
	}

	nav ul.flex li a::after {
		content: "";
		display: none;
	}

	nav ul.flex li a.cta {
		color: var(--text-secondary);
		background-color: var(--transparent);
		border-radius: 0;
		padding: 20px 0;
		font-weight: 400;
		text-align: center;
	}

	nav ul.flex li a.cta:hover, nav ul.flex li a:hover {
		transition: 0;
		transform: none;
		box-shadow: 0 0 0 #00000000;
		padding: 20px 0;
		background-color: var(--cta);
		color: var(--white);
	}

	input#hamcheck:checked ~ ul.flex {
	  /*Show Mobile Nav on Checked Box (click)*/
		height: 228px;
		transition: height var(--time);
		box-sizing: border-box;
		box-shadow: 0 10px 10px #00000044;
		border-top: 1px solid var(--soft-border);
	}

	input#hamcheck:checked ~ .hamburger .hambun {
		background-color: var(--transparent);
		transition: var(--time);
	}

	input#hamcheck:checked ~ .hamburger .hambun::before {
    transform: rotate(-45deg);
    top:0;
		transition: var(--time);
	}

	input#hamcheck:checked ~ .hamburger .hambun::after {
    transform: rotate(45deg);
    top:0;
		transition: var(--time);
	}

	body:has(input#hamcheck:checked) {
		/* Pauses screen scroll when menu is displayed*/
	  overflow: hidden;
	}

/* -DMS--DMS--DMS--DMS- Darkmode Styles -DMS--DMS--DMS--DMS- */

	body.darkmode nav ul.flex {
		background-color: var(--text-primary);
	}

/* [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] //END MOBILE NAV CSS ONLY [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][] */

	/* ------------------------------------------------------ Hero Section ------------------------------------------------------ */

	section#hero {
	  height: auto;
	  padding: 95px 0 50px;
	}

	section#hero div#centerstage h1 {
		font-size: 3.4rem;
	}

	section#hero div#centerstage h2 {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.8rem;
  }

	section#hero div#centerstage div.flex {
		flex-direction: column;
		gap: 20px;
	}

	section#hero div#centerstage div.flex .cta, section#hero div#centerstage div.flex .secondary {
		width: 200px;
		text-align: center;
	}

	/* ------------------------------------------------------ Sponsors Section ------------------------------------------------------ */

	/* ------------------------------------------------------ Metrics Section ------------------------------------------------------ */

	section#metrics {
	  padding: 50px 0;
	}

	section#metrics h1 {
	  font-size: 2rem;
	}

	section#metrics h2 {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	section#metrics div#examples {
		flex-wrap: nowrap;
		flex-direction: column;
	}

	section#metrics div#examples a.kpi {
	  width: 100%;
	}

	/* ------------------------------------------------------ Articles Section ------------------------------------------------------ */

	section#articles {
	  padding: 50px 0;
	}

	section#articles h1 {
	  font-size: 2.3rem;
	}

	section#articles h2 {
	  font-size: 1.1rem;
	}

	section#articles div#newspaper {
	  flex-wrap: wrap;
	  flex-direction: column;
		gap: 20px;
	}

	section#articles div#newspaper a.articlesnip {
		padding: 20px;
	}

	section#articles div#newspaper a.articlesnip div.mast {
	  text-align: left;
	  line-height: 1.1rem;
	}

	section#articles div#newspaper a.articlesnip div.flex {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* ------------------------------------------------------ Call to Action Section ------------------------------------------------------ */

	section#calltoaction {
		padding: 50px 0;
	}

	section#calltoaction p {
	  line-height: 1.7rem;
	}

	/* ------------------------------------------------------ 2nd Page Work Section ------------------------------------------------------ */

	section#work, section#casestudy, section#casestudy.about {
		padding: 100px 0 50px;
	}

	section#work div.backhome, section#casestudy div.backhome {
	  padding-bottom: 30px;
	}

	section#work div.headlines h1, section#casestudy div.headlines h1 {
	  font-size: 3rem;
	  padding: 20px 0;
	}

	section#work div.headlines h3 {
	  font-size: 1rem;
	}

	section#work div#book {
	  padding: 30px 0;
	}

	section#work div#book.flex {
		gap: 30px;
	}

	section#work div#book a.card {
		flex-basis: 100%;
	}

	section#work div#book a.card div.padwrap {
		padding: 20px 20px 30px;
	}

	section#work div#book a.card div.tags div.tag {
	  font-size: 0.85rem;
	}

	/* ------------------------------------------------------ 3rd Page Case Study Section ------------------------------------------------------ */

	section#casestudy div#stage img {
  	max-width: 100%;
	}

	section#casestudy div#stage.flex {
	  flex-direction: column;
	  gap: 20px;
		flex-wrap: wrap;
	}

	section#casestudy div#stage div.aboutimg {
		width: 100%;
		height: auto;
	}

	section#casestudy div#stage div.aboutimg img {
		display: block;
		max-width: 100%;
	}

	section#casestudy div#stage div.aboutimg:nth-child(1) {
	  background-image: url(../images/about1.jpg);
	  max-height: 430px;
	  overflow: hidden;
	}

	section#casestudy.about div#mag.flex, section#casestudy.contact div#mag.flex {
	  flex-direction: column;
		gap: 0px;
	}

	section#casestudy div#mag.flex {
	  flex-direction: column-reverse;
		gap: 0px;
	}

	section#casestudy div#details.flex {
	  justify-content: start;
	  gap: 30px;
	  flex-direction: column;
	  align-items: baseline;
	}

	section#casestudy aside a:link.figbtn, section#casestudy aside a:active.figbtn, section#casestudy aside a:visited.figbtn {
	  justify-content: flex-start;
	  width: fit-content;
	}

	section#casestudy div#businesskpis.flex, section#casestudy.contact div#businesskpis.flex {
  	flex-wrap: wrap;
		gap: 20px;
		margin-top: 20px;
	}

	section#casestudy div#businesskpis div.kpi, section#casestudy.contact div#businesskpis div.kpi {
    flex-basis: 100%;
  }

	section#casestudy div#businesskpis div.kpi h4 {
	  font-size: 0.75rem;
	}

	section#casestudy article {
    max-width: 100%;
    padding: 0 20px 20px;
  }

	section#casestudy.contact article {
		padding: 30px;
	}

	section#casestudy article p {
		max-width: 100%;
	}

	section#casestudy article p.herolayout {
		flex-direction: column;
	}

	section#casestudy article p.herolayout img {
		width: 100%;
	}

	section#casestudy aside, section#casestudy.about aside.about {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

	section#casestudy.about aside.about {
		margin-top: 0;
  }

	section#casestudy.contact aside {
		padding: 30px;
	}

	section#casestudy.contact aside h2 {
	  font-size: 1.9rem;
	  margin: 0 0 40px;
	}

	section#casestudy.contact aside h4 {
    padding-bottom: 10px;
  }

	section#casestudy aside.about div.flex:nth-child(2) {
		flex-direction: row;
	}

	section#casestudy a:link#nextproject, section#casestudy a:visited#nextproject, section#casestudy a:active#nextproject {
		padding: 20px;
	}

	section#casestudy a#nextproject div.nexthead {
	  flex-direction: column;
		align-items: baseline;
	}

	section#casestudy a#nextproject div.nexthead.flex div.encora {
		padding-left: 10px;
	}

	section#casestudy a#nextproject div.nexthead.flex div.flex {
    gap: 10px;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    width: 100%;
  }

	section#casestudy div.flex:nth-child(2) {
	  align-items: flex-start;
	  margin-top: 20px;
	  justify-content: flex-start;
		flex-direction: column-reverse;
		gap: 20px;
	}

	section#casestudy div.flex:nth-child(2) div.left div.flex {
		align-items: flex-start;
	  margin-top: 20px;
	  justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	section#casestudy div.flex div.left {
	  width: 100%;
	}

	section#casestudy div.flex div.right {
	  width: 100%;
	}

	section#casestudy.contact article form {
		background-image: none;
		background-color: var(--transparent);
		padding: 0;
	}

	section#casestudy.contact article form label textarea {
		height: 140px;
	}

	/* ------------------------------------------------------ Testimonials Section ------------------------------------------------------ */

	section#testimonials {
		padding: 50px 0;
	}

	section#testimonials h1 {
		font-size: 2.8rem;
		padding-top: 0;
	}

	section#testimonials div.flex {
	  gap: 30px;
	  align-items: stretch;
		flex-direction: column;
	}

	section#testimonials div.flex div.testimonial {
		width: 100%;
		padding: 25px;
	}

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

	footer {
		padding: 50px 0;
	}

	footer div.flex {
		flex-wrap: wrap;
		flex-direction: column;
		align-content: center;
	}

	footer div.cell {
    box-sizing: border-box;
  }

	footer div.cell p {
	  max-width: 100%;
	  line-height: 1.4rem;
	}

	footer div.cell:nth-child(1), footer div.cell:nth-child(2), footer div.cell:nth-child(3), footer div.cell:nth-child(4) {
    border-left: none;
    padding: 10px 0;
    flex: 1 1 0;
    width: 100%;
  }

	footer div#finale {
		margin-top: 50px;
	}

	footer div#finale div.flex {
		gap: 20px;
		text-align: center;
		flex: 1 1 0;
	}

	footer div#finale div.flex div {
		width: 100%;
	}

}