@charset "UTF-8";
@import url("reset.css");
/* BrendanBehan.design
   Created by Brendan P. Behan 2010-2013, 2022-2025 
   https://brendanbehan.design/ */

/* Set 'rem'
-------------------------------------------- */
html, body 		{ font-size: 16px; }

/* Colors
-------------------------------------------- */
:root {
	--black: 		#000000;
	--gunmetal:		#333333;
	--gray-dark:	#555555;
	--gray:			#bbbbbb;
	--ash:			#dddddd;
	--lt-gray:		#eeeeee;
	--barely-gray:	#efefef;
	--white: 		#ffffff;
	--red:			#D93A2B;
	--orange: 		#F2762E;
	--yellow:		#F2BB13;
	--green:		#42BB13;
	--pink:			#D91480;
	--purple:		#4C1E59;
	--cardboard:	#A5845E;
}
body 			{ background-color: var(--white); }
header 			{ background-color: var(--lt-gray); }
footer 			{ background-color: var(--ash); }
.cookie-banner 	{ background-color: var(--gray); }

.form-page header {
	box-shadow: 0px 1px 2px var(--white);
}

a,
:link,
:visited 					{ color: var(--pink); }
a:hover,
:link:hover,
:visited:hover 				{ color: var(--orange); }
nav li a:hover,
nav li.selected a 			{ color: var(--black); }
footer a, 
footer :link, 
footer :visited 			{ color: var(--gunmetal); }
.lower-nav a:hover,
.lower-nav :link:hover,
.lower-nav :visited:hover 	{ color: var(--pink); }

body, blockquote, p,
h1, h2, h3, h4, h5, h6, 
button.close-btn  {
	color: var(--gunmetal);
}

section.lead-statement,
section.lead-statement+.transition-upper {
	background-color: var(--yellow);
}
.lead-statement h2 {
	color: var(--pink);
}
.lead-statement p {
	color: var(--black);
}
section.design-approach-statement,
section.design-approach-statement+.transition-upper {
	background-color: var(--ash);
}
.design-approach-statement h2 {
	color: var(--pink);
}
.digital-branding-statement h2 {
	color: var(--orange);
}
.design-approach-statement h3,
.digital-branding-statement h3 {
	color: var(--purple);
}
.portfolio-grid-entry .heading p {
	color: var(--yellow);
}
.inactive {
	color: var(--gray);
}

.animated-headline {
	background-color: var(--ash);
	box-shadow: 0.75rem 0.75rem var(--red);
	/* antialiasing */
    -webkit-backface-visibility: hidden; /* Removes jagged edges resulting from transform */
	backface-visibility: hidden;
	outline: 1px solid transparent;
	will-change: transform;
	-webkit-perspective: 1000;
	perspective: 1000;
}
.animation-wrapper .frame {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(45deg, var(--purple), var(--orange), var(--yellow));
	color: transparent;
}
@media (max-width: 35rem) {
	.animated-headline {
		box-shadow: 0.5rem 0.5rem var(--red);
	}
}
@media (min-width: 52rem) {
	.animation-wrapper {
		display: inline-block;
	}
}

p.red, q.red, span.red				{ color: var(--red); }
p.orange, q.orange, span.orange 	{ color: var(--orange); }
p.yellow, q.yellow, span.yellow 	{ color: var(--yellow); }
p.purple, q.purple, span.purple 	{ color: var(--purple); }
p.pink, q.pink, span.pink			{ color: var(--pink); }

div.red,
section.red,
blockquote.red {
	background-color: var(--red);
	color: var(--white);
}
div.orange,
section.orange,
blockquote.orange {
	background-color: var(--orange);
	color: var(--white);
}
div.yellow,
section.yellow,
blockquote.yellow {
	background-color: var(--yellow);
	color: var(--black);
}
div.purple,
section.purple,
blockquote.purple {
	background-color: var(--purple);
}
div.purple p,
section.purple p,
blockquote.purple p {
	color: var(--white);
}
div.pink,
section.pink,
blockquote.pink {
	background-color: var(--pink);
	color: var(--white);
}
div.lt-gray,
section.lt-gray,
blockquote.lt-gray {
	background-color: var(--lt-gray);
}
.lt-gray h1,
.lt-gray h2,
.lt-gray h3,
.lt-gray h4,
.lt-gray h5,
.lt-gray h6 {
	color: var(--dkgray);
}
div.ash,
section.ash,
blockquote.ash {
	background-color: var(--ash);
}
form input, 
form textarea {
    border-bottom: 1px solid var(--yellow);
    background-color: var(--lt-gray);
}
button {
	border: 1px solid var(--purple);
	color: var(--purple);
}
label,
button.submit-button,
button.call-to-action-button a {
	color: var(--purple);
}
button:focus-visible {
	outline-width: 3px;
}
label sup {
	color: var(--red);
}

/* Backgrounds
-------------------------------------------- */
.cardboard {
	background: var(--cardboard) url("/_img/bg/cardboard-1024x768.jpg") 50% top;
}

/* Fonts and Text-Handling
-------------------------------------------- */
body {
	font-family: "proxima-nova", "Helvetica LT Std", Helvetica, Arial, sans-serif;
	text-align: left;
	-webkit-text-size-adjust: none;
	writing-mode: horizontal-tb;
}
blockquote.formula,
.formula p,
span.code,
blockquote.formula > h2,
blockquote.formula > h3,
blockquote.formula > h4 		{ font-weight: 300; }
body,
h1, h2, h3, h4, h5, h6, .title,
p, blockquote, code,
ol, ul, li, table,
.author 					 	{ font-weight: 400; }
strong, b 						{ font-weight: 700; }
em, i,
hgroup h1 > span 				{ font-style: italic; }
u 								{ text-decoration: underline; }
center,
h1,
hgroup h2,
h2.credit,
h2.subtitle,
.portfolio-entry h2,
.portfolio-entry h3,
.center-text,
.copyright 						{ text-align: center; }

h1 					{ font-size: 46px; }
h2 					{ font-size: 32px; }
hgroup h2,
h2.subtitle,
h3,
h2.credit 			{ font-size: 24px; }
h4,
blockquote h2 		{ font-size: 22px; }
h5,
ol, ul, li,
nav ol, nav ul,
label,
blockquote h3,
.submit-button,
.call-to-action-button		{ font-size: 20px; }
.home-page p,
.portfolio-entry h3,
header h2,
.brand-wrapper h2 	{ font-size: 18px; }
form,input,
h6,
blockquote h4,
h3.sup-headline,
.author,
.dateline 			{ font-size: 16px; }
p, blockquote,
table 				{ font-size: 16px; }
html, body 			{ font-size: 16px; }
.nav-breadcrumbs li,
caption,
.caption,
.copyright p		{ font-size: 14px; }
.nav-breadcrumbs li::after,
.cookie-banner p 	{ font-size: 12px; }

@media (min-width: 34.25rem) {
	h1 						{ font-size: 64px; }
	h2 						{ font-size: 48px; }
	hgroup h2,
	h2.subtitle,
	.lead-statement h2 		{ font-size: 36px; }
	.portfolio-grid-entry h2 {font-size: 26px; }
	h3,
	h2.credit 				{ font-size: 24px; }
	h4,
	blockquote h2 			{ font-size: 20px; }
	h5,
	ol, ul, li,
	nav ol, nav ul,
	blockquote h3,
	.home-page p,
	.submit-button,
	.call-to-action-button	{ font-size: 20px; }
	.portfolio-entry h3,
	header h2,
	.brand-wrapper h2,
	header nav li 	 		{ font-size: 18px; }
	form,input,
	h6,
	blockquote h4,
	h3.sup-headline,
	.author,
	.dateline,
	.nav-breadcrumb li 		{ font-size: 16px; }
	p, blockquote,
	table 					{ font-size: 16px; }
	.caption,
	.copyright p 			{ font-size: 14px; }
	.nav-breadcrumbs li::after { font-size: 14px; }
	.cookie-banner p 		{ font-size: 12px; }
}

@media (min-width: 52rem) {
	h1 						{ font-size: 88px; }
	h2 						{ font-size: 64px; }
	hgroup h2,
	h2.subtitle,
	.lead-statement h2 		{ font-size: 48px; }
	h3,
	h2.credit 				{ font-size: 36px; }
	.portfolio-grid-entry h2 {font-size: 32px; }
	h4,
	blockquote h2 			{ font-size: 28px; }
	h5,
	ol, ul, li,
	nav ol, nav ul,
	blockquote h3,
	.home-page p,
	.submit-button,
	.call-to-action-button	{ font-size: 24px; }
	.portfolio-entry h3,
	header h2,
	.brand-wrapper h2 		{ font-size: 22px; }
	form,input,
	h6,
	blockquote h4,
	h3.sup-headline,
	.author,
	.dateline,
	.nav-breadcrumbs li 	{ font-size: 20px; }
	.nav-breadcrumbs li::after,
	p, blockquote,
	table 					{ font-size: 18px; }
	.copyright p 			{ font-size: 14px; }
	.cookie-banner p 		{ font-size: 12px; }
}

sup,
h1 sup,
h2 sup,
h3 sup,
h4 sup,
h5 sup,
h6 sup {
	vertical-align: super;
	line-height: 0;
}
h1 sup,
p sup,
blockquote sup,
.nav-breadcrumbs span.code sup {
	font-size: 64%;
}
h2 sup,
h3 sup,
h4 sup,
h5 sup,
h6 sup {
	font-size: 42%;
}
h1 sup,
.nav-breadcrumbs span.code sup {
	margin-inline-start: 0.2em;
}

nav li {
	font-weight: 400;
}
header nav li {
	font-family: "proxima-nova", sans-serif;
}
footer nav li {
	font-family: rig-solid-bold-fill, "Helvetica LT Std", Helvetica, Arial, serif;
}

h1 {
	font-family: rig-solid-bold-fill, "Helvetica LT Std", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
h2, h3, h4, h5, h6, .title,
.column-layout .heading p {
	font-family: dolly-new, "Bogart", Baskerville, "Times New Roman", Times, serif;
}
.brand-text,
h1.brand-text,
h2.brand-text,
h3.brand-text {
	font-family: "new-hero", sans-serif;
}
blockquote, p, 
ul, ol, li,
table,
hgroup h2,
h2.subtitle,
h2.credit,
.portfolio-entry h2+h3 {
	font-family: "proxima-nova", "Helvetica LT Std", Helvetica, Arial, sans-serif;
}
blockquote.formula,
.formula p,
span.code,
blockquote.formula > h2,
blockquote.formula > h3,
blockquote.formula > h4 {
	font-family: "Museo-300", Georgia, "Times New Roman", Times, serif;
}
.lp section h2 {
    font-family: bd-supper, "proxima-nova", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.lp section h2 {
	line-height: 1.3em;
}
.portfolio-grid-entry h2 {
	line-height: 1.4em;
}
blockquote, p, 
ul, ol, li,
table,
input, textarea,
.lp p {
	line-height: 1.5em;
}
hgroup h1,
hgroup h2,
.author,
.dateline,
.nav-breadcrumbs {
	line-height: 1.1em;
}
ul.link-list,
ol.link-list {
	margin-block: 2rem 3.5rem;
}

button, select,
hgroup h2,
h2.subtitle,
h2.credit {
    text-transform: none;
}
hgroup h1 > span {
	text-transform: lowercase;
}
.sup-headline {
	text-transform: uppercase;
}

form label,
form button,
button a,
blockquote.code,
blockquote.code blockquote,
blockquote.code p {
	font-family: "Inconsolata",monospace;
}
button a,
button.submit-button {
	letter-spacing: 1px;
}
input,
textarea {
	text-align: left;
	writing-mode: horizontal-tb;
}

.animated-headline h2,
.animated-headline h3,
.animated-headline h4,
.animated-headline h5,
.animated-headline h6,
.animated-headline p {
	font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}
.animated-headline p {
	font-size: 1.5rem;
}
.animation-wrapper {
	font-family: "new-hero", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 600;
	-webkit-backface-visibility: hidden; /* Removes jagged edges resulting from transform */
	backface-visibility: hidden;
}

@media (min-width: 30rem) {
	.animated-headline p {
		font-size: 2rem;
	}
}
@media (min-width: 36rem) {
	.animated-headline p {
		font-size: 2.5rem;
	}
}
@media (min-width: 42rem) {
	.lead-statement h2 {
		font-size: 3rem;
	}
}
@media (min-width: 64rem) {
	.lead-statement h2 {
		font-size: 4.125rem;
	}
}
@media (min-width: 68rem) {
	.lead-statement h2 {
		font-size: 4.5rem;
	}
	.animated-headline p {
		font-size: 3.75rem;
	}
}

.RigSolidBoldReverse {
	font-family: rig-solid-bold-reverse, sans-serif;
	font-weight: 700;
	font-style: normal;
}
.RigSolidLightFill {
	font-family: rig-solid-light-fill, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.MrsEavesOTBoldItalic {
	font-family: mrs-eaves, serif;
	font-weight: 700;
	font-style: italic;
}
.MrsEavesOTRoman {
	font-family: mrs-eaves, serif;
	font-weight: 400;
	font-style: normal;
}
.MrsEavesOTBold {
	font-family: mrs-eaves, serif;
	font-weight: 700;
	font-style: normal;
}
.MrsEavesOTItalic {
	font-family: mrs-eaves, serif;
	font-weight: 400;
	font-style: italic;
}
.MrsEavesRomanSmallCaps {
	font-family: mrs-eaves-roman-small-caps, serif;
	font-weight: 400;
	font-style: normal;
}

.DollyProRegularSmallCaps {
	font-family: dolly-small-caps-new, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.MrEavesModOTBook {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 300;
	font-style: normal;
}
.MrEavesModOTBookItalic {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 300;
	font-style: italic;
}
.MrEavesModOTReg {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.MrEavesModOTRegItalic {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 400;
	font-style: italic;
}
.MrEavesModOTBold {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.MrEavesModOTBoldItalic {
	font-family: "mr-eaves-modern", sans-serif;
	font-weight: 700;
	font-style: italic;
}

/* Structure
-------------------------------------------- */
html, body { min-height: 100vh; }
body {
	display: grid;
	grid-template-rows: min-content 1fr;
	overflow-x: hidden;
}
header,
footer > .inner-wrapper {
	align-content: center;
	display: flex;
	flex-wrap: wrap;
}
main, .main,
.site-wrapper {
	overflow: hidden;
}
header {
	height: 2rem;
	flex-direction: row;
	justify-content: center;
	inset: 0;
	padding-block: 0.75rem;
	position: fixed;
	text-overflow: clip;
	width: 100%;
	z-index: 9000;
}
footer > .inner-wrapper {
	justify-content: space-around;
	padding-block-start: 2rem;
	padding-inline: 2rem;
}
footer > .inner-wrapper,
footer .copyright {
	margin-inline: 1.25rem;
}
footer > .inner-wrapper ul,
footer > .inner-wrapper nav {
	margin-inline-end: 0rem;
}
header li,
header h2 {
	line-height: 3rem;
	vertical-align: middle;
}
footer {
	clear: both;
	padding: 2rem 0rem 1rem;
}
.controlled-frame footer {
	bottom: 0;
	padding: 0rem 0rem 1rem;
	position: absolute;
	width: 100%;
}
.controlled-frame footer > .inner-wrapper {
	display: none;
	padding-block-start: 0.75rem
}
.controlled-frame .footer-transition-upper {
	inset: auto 0 3.3125rem;
	position: absolute;
    z-index: 0;
}
hgroup {
	height: auto;
	margin-top: 48px;
	margin-block: 3rem 0rem;
	padding-right: 40px;
	padding-left: 40px;
	padding-block: 2.5rem;
}
.lp hgroup {
	margin-bottom: 48px;
	margin-block-end: 3rem;
	padding-bottom: 72px;
	padding-block-end: 4.5rem;
}
.nav-breadcrumbs+hgroup {
	margin-block-start: 0rem;
}
.form-page hgroup,
.controlled-frame hgroup {
	padding-block: 0rem;
}
.controlled-frame hgroup {
	margin-top: 58px;
	margin-bottom: 58px;
	margin-block: 3.625rem;
}
.form-result-page hgroup {
	padding-block-end: 0rem;
}
.main {
	padding-top: 118px;
	padding-block-start: 7.375rem; /* requires enough padding to clear fixed primary-nav */
}
.post .main,
.page .main {
	padding-bottom: 80px;
	padding-block-end: 5rem;
	padding-right: 16px;
	padding-left: 16px;
	padding-inline: 1rem;
}
.post .main {
	padding-top: 64px;
	padding-block-start: 4rem;
}
.controlled-frame .main {
	padding-top: 64px;
	padding-block-start: 4rem;
}
.main ul, 
.main ol, 
.main li {
	margin-top: 24px;
	margin-bottom: 24px;
	margin-block: 1.5rem;
}

nav {
	display: flex;
	flex-direction: row;
    position: relative;
}
nav ul,
nav ol,
nav li {
	display: flex;
}
nav ol {
	flex-direction: column;
}
nav li {
	height: 4rem;
}
nav li {
	margin-bottom: 10px;
	margin-block-end: 0.625rem;
	padding-right: 8px;
	padding-left: 8px;
	padding-inline: 0.5rem;
}
.primary-nav {
	--gap: 2em;
	margin-top: 12px;
	margin-block-start: 0.75rem;
	margin-left: 0;
	margin-inline-start: 0rem;
	z-index: 1000;
}
.collapsed .primary-nav[data-visible="false"] {
	inset-block-start: 0rem;
	transform: translateX(400%);
}
.collapsed .primary-nav[data-visible="true"],
.primary-nav[data-visible="true"] {
	transform: translateX(0%);
}
.collapsed .primary-nav {
	transition: transform 350ms ease-in;
}
.collapsed .primary-nav {
	background: hsla(0,0%,93%,0.97);
	/*border-radius: 0 0 0.25rem 0.25rem;*/
	margin-top: 16px; /* Safari Display Bug Test Fix - suspected rem issue */
	margin-block-start: 1rem;
	padding: 0rem 1rem;
	position: absolute;
	inset: 3rem 2rem auto auto;
	transform: translateX(300%);
	transition: transform 250ms ease-in;
}
button,
.burger-wrapper {
	position: relative;
}
.mobile-nav-toggle {
	aspect-ratio: 1;
    border-image: none;
    border-radius: 0.25rem;
    border-style: none;
	border-width: 0px;
	display: none;
    padding: 0.125rem;
	position: absolute;
	right: 2rem;
	width: 2rem;
	z-index: 9999;
}
.collapsed .mobile-nav-toggle {
	display: inline-block;
}
.burger-wrapper {
	height: 1.5rem;
}
header.collapsed {
	height: 2rem;
	padding-block: 1rem;
}

nav li:last-child {
	margin-inline-end: 0rem;
}
.nav-breadcrumbs {
	margin-block-end: 0rem;
	min-height: 1rem;
	padding-block-end: 0rem;
}
.nav-breadcrumbs li {
	display: inline-block;
	margin-block: 0rem;
	margin-inline-end: 1rem;
}
.nav-breadcrumbs li.active {
	margin-inline-end: 0rem;
}
.nav-breadcrumbs li::after {
	content: " >";
}
.nav-breadcrumbs li:last-child::after {
	content: none;
}

.lower-nav,
.social-nav {
	padding-block-end: 2.5rem;
}
.controlled-frame .lower-nav,
.controlled-frame .social-nav {
	padding: 0rem;
}
.controlled-frame footer .social-nav {
	min-width: inherit;
}
.brand-wrapper li {
	display: inline-block;
}
header .brand-wrapper li {
	margin-block-end: 0rem;
}
footer .brand-wrapper li {
	margin-block-end: 2rem;
}
header .brand-wrapper li,
footer .brand-wrapper li {
    margin-inline-end: 1rem;
}
header .logomark-img {
	display: block;
	height: 2rem;
}
header .logo-img {
    height: 2.75rem;
}
header .logo-img,
.collapsed .logo-img {
	display: none;
}
footer .logomark-img {
    height: 3rem;
}
.collapsed .brand-wrapper li {
	height: auto;
	margin-bottom: 0rem;
	margin-inline-end: 0rem;
	min-height: auto;
}
.collapsed .logomark-img {
	display: block;
}
.brand-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.burger-wrapper div {
	background-color: var(--purple);
    border-radius: 1rem;
    height: 4px;
    left: 0px;
    position: absolute;
    transition: all 0.3s ease 0s;
    transform-origin: center center;
    width: 100%;
}
.burger-wrapper :nth-child(1) {
    top: 0px;
    transition: all 0.1s ease 0s;
}
.burger-wrapper :nth-child(2) {
    top: calc(50% - 2px);
    transition: all 0.2s ease 0s;
}
.burger-wrapper :nth-child(3) {
    bottom: 0px;
    transition: all 0.3s ease 0s;
}
.mobile-nav-toggle:hover {
	background-color: rgba(0,0,0,0.1);
	border-color: var(--pink);
}
.mobile-nav-toggle:hover .burger-wrapper :nth-child(1) {
	background-color: var(--red);
}
.mobile-nav-toggle:hover .burger-wrapper :nth-child(2) {
	background-color: var(--orange);
}
.mobile-nav-toggle:hover .burger-wrapper :nth-child(3) {
	background-color: var(--yellow);
}

.full-width {
	width: 100%;
}
.full-width img.section-transition {
	margin-inline-start: -3%;
	max-width: 106%;
	width: 106%;
}

.call-to-action-wrapper {
    display: flex;
    justify-content: center;
	margin-block-start: 3rem;
}
button.submit-button,
button.call-to-action-button {
	padding: 16px 32px;
	/*outline: 0;*/
	position: relative;
	background-color: rgba(0, 0, 0, 0);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.submit-button:after,
.call-to-action-button:after {
	content: "";
	background-color: var(--yellow);
	width: 100%;
	z-index: -1;
	position: absolute;
	height: 100%;
	top: 7px;
	left: 7px;
	transform: rotate(-2deg) scale(1.05);
	transition: 0.2s;
}
.submit-button:hover:after,
.call-to-action-button:hover:after {
	top: 0px;
	left: 0px;
	transform: rotate(0deg) scale(1.00);
}

[class^="icon-"]:before, 
[class*=" icon-"]:before {
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
}
[class^="icon-"], 
[class*=" icon-"] {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	line-height: 14px;
	vertical-align: text-top;
}
.icon-derivative,
.icon-pi {
	width: 0.8em;
	height: 1em;
	text-indent: -999em;
}
.icon-derivative {
	background: url("/_img/calculus/d-dx-16px.png") no-repeat 1px 1px;
	height: 2em;
	width: 1.4em;
}
.icon-pi {
	background: url("/_img/calculus/icon-pi-16pt.png") no-repeat 1px 1px;
}

@media (max-width: 48rem) {
	header {
		justify-content: space-around;
		padding-block: 1rem;
	}
	header .brand-wrapper li {
		margin-inline-end: 0rem;
	}
	.primary-nav {
		background: hsla(0,0%,93%,0.97);
		border-radius: 0 0 0.25rem 0.25rem;
		margin-block-start: 1rem;
		padding: 0rem 1rem;
		position: absolute;
    	inset: 3rem 2rem auto auto;
		transform: translateX(300%);
		transition: transform 250ms ease-in;
	}
	.home-page nav,
	.home-page nav ol,
	.home-page nav ul {
		height: 10rem;
	}
	.mobile-nav-toggle {
		display: inline-block;
	}
	.main {
		padding-top: 4.5rem;
	}
	hgroup {
		margin-block-start: 1rem;
	}
	.post hgroup {
		padding-block: 2rem;
	}
	.controlled-frame hgroup {
		margin: 1.625rem 0rem;
	}
	footer {
		padding-block-start: 1.625rem;
	}
	footer > .inner-wrapper {
		padding-inline: 1rem;
	}
	.controlled-frame footer nav,
	.controlled-frame footer nav ol {
		height: 9rem;
	}
	.lower-nav, 
	.social-nav {
		padding-block-end: 1rem;
	}
	footer .social-nav {
		display: none;
	}
	.nav-breadcrumbs li {
		margin-inline-end: 0.75rem;
		max-width: 32%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
@media (max-width: 35.5rem) {
	.controlled-frame .footer-transition-upper {
		inset: auto 0 4.625rem;
	}
}
@media (min-width: 28rem) {
	footer .logomark-img {
		height: 4rem;
	}
}
@media (min-width: 48rem) {
	header {
		height: 4rem;
		height: fit-content;
	}
	header .logo-img {
		display: block;
	}
	header .logomark-img {
		display: none;
	}
	header nav ol {
		flex-direction: row;
	}
	header.collapsed nav ol {
		flex-direction: column;
	}
	header nav,
	header nav ol,
	header nav li {
		height: fit-content;
	}
	header nav li {
		margin-block-end: 0rem;
		margin-inline-end: 1.25rem;
	}
	header.collapsed nav,
	header.collapsed nav ol {
		height: 12rem;
	}
	header.collapsed nav li {
		font-size: 20px;
		height: 4rem;
		line-height: 3rem;
		margin-block-end: 0.625rem;
		margin-inline-end: 1rem;
	}
	header.collapsed nav li:last-child {
		margin-inline-end: 0rem;
	}
	.post .main {
		padding-block-start: 6.5rem;
	}
	.social-nav,
	.nav-breadcrumbs {
		align-content: center;
		display: flex;
		justify-content: center;
	}
	.primary-nav {
		margin-inline-start: 1.5rem;
	}
	.submit-button,
	.call-to-action-button {
		padding: 1rem 3.5rem;
	}
	footer .logomark-img {
		height: 7rem;
	}
}
@media (min-width: 52rem) {
	header {
		height: 5.25rem;
		height: fit-content;
	}
	header .logo-img {
		height: 3rem;
	}
	header li,
	header h2 {
		line-height: 3rem;
	}
	header nav li {
		margin-inline-end: 2.25rem;
	}
	header .brand-wrapper li,
	footer .brand-wrapper li {
		margin-inline-end: 2rem;
	}
	.post .main {
		padding-block-start: 8.5rem;
	}
	footer .logomark-img {
		height: 5rem;
	}
	footer nav,
	footer nav ol {
		height: 4rem;
	}
	footer nav ol {
		flex-direction: row;
	}
	footer nav li {
		margin-block-end: 0rem;
		margin-inline-end: 2.25rem;
	}
}
@media (min-width: 56rem) {
	header .brand-wrapper li,
	footer .brand-wrapper li {
		margin-inline-end: 3rem;
	}
}

p,
h1, h2, h3, h4, h5, h6 {
	display: block;
}
p {
    margin-block: 1rem;
    margin-inline: 0rem;
}
blockquote {
	margin-block: 1.5rem;
}
h1 {
	margin-block-end: 0.5rem;
}
h2, h3, h4, h5, h6 {
	margin-block-end: 0.5rem;
	padding-block-start: 1.5rem;
}
hgroup h1,
hgroup h2 {
	padding-inline: 0rem;
	padding-block-start: 0rem;
}
hgroup h2,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5,
blockquote h6 {
	margin-block: 0rem;
	padding-block-start: 0.5rem;
}
.portfolio-entry h3 {
	padding-block-start: 0rem;
}

@media (min-width: 52rem) {
	hgroup h1,
	hgroup h2 {
		padding-inline: 2.5rem;
	}
	hgroup {
		padding-block: 4.5rem;
	}
}

.post-wrapper > h2:first-child {
	margin-top: 0em;
}
h2.has-sup-headline {
	padding-top: 0.75rem;
}
h3.sup-headline {
	padding: 0rem;
}
.animated-headline h2,
.animated-headline h3,
.animated-headline h4,
.animated-headline h5,
.animated-headline h6,
.animated-headline p {
	max-height: 1.5em;
    overflow: hidden;
	padding-block: 1rem;
    text-wrap: nowrap;
}
.rolling-can-page h3.directions {
	margin: 0rem;
	padding-block-start: 0rem;
}
.rolling-can-page h3.directions+p {
	margin: 0rem;
}

.column-layout .vignette-wrapper {
	position: relative;
	width: 250px;
} 
.vignette-wrapper > .vignette {
	background: transparent; 
	box-shadow:inset 0px 0px 46px rgba(0,0,0,.7);
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%; 
	z-index: 1; 
} 
.vignette-wrapper > img { 
	position: relative;
	width: 100%;
	z-index: -1; 
}

blockquote { 
	padding-inline: 2.5rem;
}
blockquote p,
blockquote p blockquote,
blockquote blockquote {
	margin-block-end: 0.5rem;
}
blockquote p {
	margin-block-start: 0rem;
}
blockquote blockquote { 
	margin-block-start: 0.5rem;
}
blockquote p blockquote.last,
blockquote p.last blockquote,
blockquote > p:last-of-type {
	margin-block-end: 0rem;
}
blockquote.code,
blockquote.formula,
p.code {
	background: url("../_img/bg/bg-diagonal-lines-45x2-.5.png") repeat;
	-webkit-border-radius: 1rem;
	border-radius: 1rem;
	margin-inline: 1rem;
	padding-block: 1rem;
	padding-inline: 1rem;
	overflow-wrap: break-word;
}

caption,
.caption {
	display: block;
	margin-block: 1rem;
}

.form-area {
	margin-block-end: 6rem;
}
form {
	margin: 1rem auto 2rem;
	width: 42.5rem;
}
form label {
	margin-block-end: 0.3rem;
	margin-inline-end: 0.5rem;
}
form > div {
	display: flex;
	justify-content: space-between;
	margin-block-end: 2rem;
}
input[type="text"],
textarea {
    padding: 0.75rem 1rem;
}
input, 
textarea {
	border: unset;
	cursor: text;
	display: inline-block;
    transition: .3s;
	width: inherit;
}
textarea {
	appearance: textarea;
}
.contact-form textarea {
	min-height: 174px;
}

div.flex,
.column-layout {
	display: flex;
}
.column-layout {
	flex-flow: row nowrap;
    justify-content: center;
	margin-block: 3rem;
}
.column-layout.flush {
	gap: 0rem;
}
form .column,
.column-layout .column {
	display: flex;
	flex-flow: column nowrap;
}
form .column {
	flex: 0 1 20rem;
}
.column-layout .column {
	flex: 1 1 0;
}
.column-layout.vignette-demonstration-wrapper .column {
	width: 15.625rem;
}
.column-layout .column > .wrapper {
    display: flex;
    flex-flow: column nowrap;
	gap: 2rem;
    justify-content: center;
}
.branding-flow.column-layout .column > .wrapper {
	aspect-ratio: 2;
}
.column-layout .column img {
	max-height: 4rem;
	max-width: 100%;
}
.column img.icon {
	width: 25%;
	align-content: center;
}
.branding-flow .column {
	border: solid 1px #ddd;
}
.branding-flow .column+.column {
	border-left: none;
}
.four-columns .column-text p {
	font-size: 18px;
	color: #555;
}
.column-layout.branding-flow .column .column-img {
    align-content: center;
    display: flex;
	flex-wrap: wrap;
	height: 7rem;
	justify-content: center;
}
.column-layout.branding-flow .column .column-text {
    background-color: #efefef;
    border-top: solid #ddd 1px;
	height: 4rem;
    margin-block-start: 1rem;
    padding-block-start: 0.5rem;
}

.main .wrapper.horizontal {
	margin-block-end: 1rem;
}
.lp section {
    align-items: center;
	display: flex;
    justify-content: center;
}
.home-page section {
	padding: 7.5rem 3rem;
}
section > h2:first-child,
section > h3:first-child,
section > h4:first-child,
section > h5:first-child,
section > h6:first-child {
	margin-block-start: 0rem;
	margin-bottom: 0rem;
}
.lp section.lead-statement {
	min-height: 30rem;
}
section.form-result {
	padding-bottom: 6rem;
}

img { display: block; }
.post .main img { max-width: 100%; }
img.center { 
	margin-left: auto; 
	margin-right: auto; 
}
section img {
	margin: 3rem auto 0rem;
}
.home-page section img {
    max-height: 15rem;
	max-width: 15rem;
}
section.portfolio-entry img,
.portfolio-grid-entry img {
	margin-block-start: 0rem;
	max-height: inherit;
}
section.portfolio-entry img {
	max-width: inherit;
}
.portfolio-grid-entry img.screenshot {
	max-width: 100%;
}

section.portfolio-entry {
	height: 346px;
	position: relative;
}
.portfolio-entry a {
	display: block;
	height: 100%;
}
.portfolio-entry h2,
.portfolio-entry h3 {
	position: relative;
	z-index: 1;
}
.portfolio-entry img {
	position: absolute;
    z-index: -1;
    inset: 55% 50%;
    opacity: 0;
    transform: translate3D(-50%,-47%,0) scale(.9);
    transition: all .8s cubic-bezier(.42,0,0,1.15);
}
.portfolio-entry:hover img {
	opacity: 0.5;
	transform: translate3D(-50%,-50%,0) scale(.94);
}
.portfolio-entry h2 {
	margin-block: 0rem;
	padding-block: 8.4375rem 0rem;
}
.portfolio-entry h2,
.portfolio-entry h3 {
	text-shadow: none;
	transition: text-shadow .8s cubic-bezier(.42,0,0,1.15);
}
.portfolio-entry:hover h2,
.portfolio-entry:hover h3 {
	text-shadow: 0px 0px 4px #ffffff;
}

.portfolio-grid-wrapper,
.portfolio-grid-entry,
.portfolio-grid-entry .frame-entry-title,
.portfolio-grid-entry .frame-text-content,
.portfolio-grid-entry .frame-meta-info,
.portfolio-grid-entry .frame-entry-cover,
.frame-entry-links .container,
.frame-entry-links .container > div,
.frame-entry-links .container a,
.frame-entry-links .container div div {
	display: flex;
	position: relative;
}
.portfolio-grid-entry .frame-entry-title {
	flex-flow: column wrap;
}
.portfolio-grid-wrapper,
.portfolio-grid-entry,
.frame-entry-primary-info,
.portfolio-grid-entry .frame-entry-links,
.frame-entry-links .container > div {
    position: relative;
    width: 100%;
}

.portfolio-grid-wrapper {
	place-content: flex-start;
    align-items: flex-start;
    flex: 0 0 auto;
    flex-flow: column nowrap;
    gap: 3rem;
    height: min-content;
    padding: 0rem;
	opacity: 1;
    transform: perspective(1200px) translateX(0px) translateY(0px) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
}
.portfolio-grid-entry,
.portfolio-grid-entry .frame-entry-cover,
.portfolio-grid-entry .frame-entry-links {
	border-color: var(--yellow);
    border-style: dashed;
}
.portfolio-grid-entry {
	border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
}
.portfolio-grid-entry .frame-entry-cover {
	border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    border-top-width: 0px;
}
.portfolio-grid-entry .frame-entry-links {
	border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
}
.portfolio-grid-entry {
    place-content: flex-start;
    align-items: flex-start;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    gap: 0rem;
    height: min-content;
    padding: 0rem;
}
.portfolio-grid-entry .frame-text-content {
    flex: 1 0 0px;
    flex-flow: column nowrap;
    gap: 0rem;
    justify-content: center;
    overflow: hidden;
    padding: 0rem;
}
.portfolio-grid-entry .frame-entry-title {
	padding-block: 2rem;
	padding-inline: 1.5rem;
}
.primary-descriptor h2 {
	padding-block-start: 0rem;
}
.secondary-descriptor p {
	margin-block: 0rem;
}
.portfolio-grid-entry .frame-entry-cover {
    align-content: center;
    align-items: center;
    align-self: stretch;
    flex: 1 0 0px;
    flex-flow: row nowrap;
    gap: 0rem;
    height: auto;
    justify-content: center;
    overflow: hidden;
    padding: 1.25rem;
}
.portfolio-grid-entry .frame-entry-cover > div {
	flex: 1 0 0px;
    height: auto;
    overflow: hidden;
    position: relative;
}
.portfolio-grid-entry .frame-entry-links {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    height: min-content;
    justify-content: flex-start;
    overflow: hidden;
}
.frame-entry-links .container {
	flex: auto;
    height: auto;
    position: relative;
	white-space: pre;
    width: auto;
}
.frame-entry-links .container,
.frame-meta-info .column,
.frame-meta-info {
    padding-block: 1rem;
}
.frame-entry-links .container,
.frame-meta-info .column {
    padding-inline: 1.5rem;
}
.frame-entry-links .container > div {
	align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: none;
    flex-flow: row nowrap;
    gap: 0rem;
    height: min-content;
    justify-content: flex-start;
    padding: 0rem;
}
.frame-entry-links .container div div {
	place-content: center flex-start;
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.25rem;
    height: min-content;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0px;
    position: relative;
    text-decoration: none;
	outline: none;
    flex-direction: column;
    flex-shrink: 0;
    transform: none;
    opacity: 1;
}
.frame-meta-info {
	flex-wrap: wrap;
}
.frame-meta-info .column {
	align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: auto;
    flex-flow: column nowrap;
    gap: 0.25rem;
    height: min-content;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    width: auto;
}
.frame-meta-info .column .container {
    flex: none;
    height: auto;
    overflow: visible;
    position: relative;
    width: auto;
	outline: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    transform: none;
}
.portfolio-grid-entry .container p {
	white-space: normal;
}
.frame-meta-info p {
	margin-block: 0rem;
}

@media (max-width: 35rem) {
	.portfolio-grid-wrapper,
	.portfolio-grid-entry,
	.portfolio-grid-entry .frame-text-content,
	.portfolio-grid-entry .frame-entry-cover {
		border-bottom: dashed 1px var(--yellow);
		flex-flow: row wrap;
	}
	.portfolio-grid-entry .frame-entry-cover > div {
		flex: 1 1 auto;
		padding: 0.5rem;
	}
	.portfolio-grid-entry .frame-entry-cover {
		display: contents;
		padding: 0.5rem;
	}
	.portfolio-grid-entry img.screenshot {
		max-width: 100%;
	}
	.portfolio-grid-entry h2 {
		font-size: 22px;
	}
}
@media (max-width: 32rem) {
	.frame-entry-links .container a {
		display: grid;
	}
}
/*@media (max-width: 28rem) {
	.portfolio-grid-entry h2 {
		font-size: 24px;
	}
}*/
@media (min-width: 68rem) {
	.portfolio-grid-entry img.screenshot {
		max-width: 499.5px;
	}
}
@media (min-width: 75rem) {
	.portfolio-grid-wrapper {
		gap: 4rem;
	}
}

.img-wrapper {
	display: block;
	padding: 2rem;
	clear: both;
}

.main .wrapper.horizontal,
.post-wrapper {
	padding-inline: 1rem;
}
.post-wrapper {
	padding-block-end: 3rem;
}

.services-link,
.about-link,
.linkedin-link {
	display: none !important;
}

.copyright p {
	margin-bottom: 0px;
}

video, object {
	margin-block: 2rem auto;
}

.cookie-banner {
    align-items: center;
	box-sizing: border-box;
	display: flex;
    padding: 10px;
    position: fixed;
    z-index: 300000;
}
.cookie-banner {
	bottom: 0;
	left: 0;
    right: 0;
}
button.close-btn {
    background: transparent;
	border: 0;
    padding: 5px 10px;
	text-align: center;
	white-space: nowrap;
}
.close-btn:after {
    content: "x";
    font-family: Helvetica, Arial, sans-serif;
    font-size: 35px;
    font-weight: 100;
    line-height: .5em;
}

.animated-headline {
	margin-block: 2rem 8rem;
    transform: rotateZ(-2deg);
}

.hide,
.home-page .home-link,
.cookie-banner.hide,
.services-link,
.about-link,
.linkedin-link {
	display: none;
}

.clear { 
	clear: both;
}
.align-right,
.align-left {
	display: inline-block;
	width: auto;
}
.align-right {
	float: right;
}
.align-left {
	float: left;
	clear: left;
}

@media (max-width: 30rem) {
	.home-page section {
		padding: 5rem 2rem;
	}
	.home-page section img {
		max-height: 12rem;
		max-width: 12rem;
	}
}
@media (max-width: 35rem) {
	.animated-headline {
		margin-block: 0rem 5rem;
	}
	.img-wrapper {
		padding: 0rem 2rem 2rem;
	}
}
@media (max-width: 40rem) {
	.wrapper.horizontal {
    	padding: 0rem 0.5rem;
	}
}
@media (min-width: 40.0625rem) {
	.post .main,
	.page .main {
		margin-inline: 2rem;
	}
	.cookie-banner {
		align-content: center;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 10px 15px;
	}
}
@media (max-width: 45rem) {
	form,
	form .column {
		width: inherit;
	}
	.contact-page hgroup,
	form {
		margin-inline: 1rem;
	}
	form .column {
		margin-block-end: 2rem;
		margin-inline: auto;
	}
	form .two-columns,
	.column-layout,
	.column-layout .column {
		display: block;
	}
	form .two-columns {
		margin-block-end: 0rem;
	}
	.column-layout .column {
		margin-inline: auto;
	}
	.column-layout .column > .wrapper {
		padding-block-start: 1rem;
	}
	.column img.icon {
		width: 6rem;
	}
	.branding-flow .column {
		width: 75%;
	}
	.column-layout.branding-flow .column .column-img {
		height: auto;
	}
	.branding-flow .column+.column {
		border-left: solid 1px #cccccc;
		border-top: none;
	}
}
@media (min-width: 45rem) {
	.img-wrapper.float-right {
		float: right;
	}
	.img-wrapper.float-left {
		float: left;
	}
	section .float-right img,
	section .float-left img {
		margin-block-end: 4rem;
	}
	.column-layout.branding-flow .column .column-text {
		align-content: center;
		display: flex;
		flex-wrap: wrap;
		height: 6rem;
		justify-content: center;
		padding-block-start: 0rem;
	}
}
@media (min-width: 52rem) {
	.main .wrapper.horizontal,
	.post-wrapper {
		padding-inline: 3.75rem;
	}
	.home-page section img {
		max-height: 18.75rem;
		max-width: 18.75rem;
	}
	blockquote.code,
	blockquote.formula,
	p.code {
		margin-inline: 1.25rem;
		padding-block: 1rem 1.25rem;
		padding-inline: 1.25rem;
	}
}
@media (min-width: 55rem) {
	.column-layout.branding-flow .column .column-text {
		display: block;
		height: 4rem;
		padding-block-start: 0.5rem;
	}
}
@media (min-width: 62.5625rem) {
	footer > .inner-wrapper ul,
	footer > .inner-wrapper nav {
		margin-inline-end: 0rem;
	}
}
@media (min-width: 68rem) {
	.post .main,
	.page .main {
		width: 65rem;
		margin-inline: auto;
	}
	.home-page section img {
		max-height: 21.5rem;
		max-width: 21.5rem;
	}
}
@media (min-width: 75rem) {
	section > .inner-wrapper {
		width: 71.25rem;
	}
	.home-page section img {
		max-height: 23.5rem;
		max-width: 23.5rem;
	}
}

/* Links
-------------------------------------------- */
a, :link, :visited 	{ text-decoration: none; }
a img 				{ border: none; }

/* Cursors & Buttons
-------------------------------------------- */
html, body {
    outline: none;
    cursor: url("../_img/cursor-circle.png"),auto;
    cursor: -webkit-image-set(url("../_img/cursor-circle.png") 1x,url("../_img/cursor-circle-x2.png") 2x) 0 0,pointer;
}
a,
:link,
a:hover,
button.close-btn,
button.submit-button,
button.call-to-action-button,
button span,
.brand-wrapper a img { 
	cursor: pointer;
}
button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
	appearance: button;
    cursor: pointer;
	display: inline-block;
}
a:focus-visible,
:link:focus-visible,
button.close-btn:focus-visible,
button.submit-button:focus-visible,
button.call-to-action-button:focus-visible,
button span:focus-visible,
.brand-wrapper a img:focus-visible,
button:focus-visible, .button:focus-visible,
input:focus-visible, 
textarea:focus-visible {
	outline: 3px solid var(--purple);
}