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,font,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{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
img { display: block }
*, *:before, *:after { box-sizing: border-box;  }
html { -webkit-text-size-adjust: 100%; font-size:62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased;}

:root {
	--maxw: 1320px;
	--widemax: 1700px;
	--widepercent: 90%;
	--marginbottom: 90px;
	--timing: .2s;
	--shadow: 0px 8px 24px 0px rgba(31, 28, 25, 0.30);
	
	--overlayON: rgba(63,145,210,.4);
	--overlayOFF: rgba(63,145,210,0);
	
	--DCGDarkGray: #59534E;
	--DCGLightGray: #CCCAC8;
	--DCGOffBlack: #1F1C19;
	--DCGMagenta: #FF436E;
	--DCGBlue: #003282;
	--DCGLightBlue: #0E92D8;
	--DCGPaper: #FAF7F0;
	--DCGDarkPaper: #F3F1E4;
}

/* new-hero 400, 600, 700, 800
new-hero-italic (for <em>) 400
new-kansas 300
*/

body {
	font-size: 1.6rem;
	color: var(--DCGOffBlack);
	font-family: "new-hero",sans-serif;
	font-weight: 400;
	background: var(--DCGPaper);
}

section {
	width: var(--widepercent);
	max-width: var(--maxw);
	margin: 0 auto;
	position: relative;
}

.section-wide {
	width: 100%;
	max-width: var(--widemax);
	margin: 0 auto;
}

.subnav {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	padding: 20px 0;
	margin-bottom: -10px;
}

	.subnav a { display: block; font-size: 1.2rem; text-decoration: none; color: var(--DCGDarkGray); }
	.subnav a:hover { text-decoration: underline; }

.topnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

	.topnav-links {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: clamp(10px,2.7vw,40px);
	}
	
	.nav-link {
		font-size: clamp(1.4rem,2vw,1.8rem);
		font-weight: 600;
		color: var(--DCGOffBlack);
		text-decoration: none;
		padding-bottom: 5px;
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}
	
	.nav-link-on, .nav-link:hover {
		border-bottom: 2px solid var(--DCGMagenta);
	}
	
.hamb-nav {
	display: none;
	justify-content: space-between;
	align-items: center;
	margin: 10px auto;
	height: 60px;
}

	.hamb-logo { width: 70px; }	
	/* .hamb-menu { width: 40px; height: 40px; background:url(../img/menu.svg) no-repeat 50% 50%; background-size: 36px;} */
	.hamb-menu { width: 32px; height: 32px;  display: flex; flex-direction: column; justify-content: space-between; align-items: center; border: 1px solid transparent; }
	
		.close-line { width: 32px; height: 4px; background: var(--DCGOffBlack);  opacity: 1; }

		.menuToClose .close-line-two { animation: hambFade calc(var(--timing) * .5); animation-fill-mode: forwards; animation-timing-function: ease-out;}
		.menuToClose .close-line-one { animation: hambRotateDown calc(var(--timing) * 1.25); animation-fill-mode: forwards; animation-timing-function: ease-out;}
		.menuToClose .close-line-three { animation: hambRotateUp calc(var(--timing) * 1.25); animation-fill-mode: forwards;animation-timing-function: ease-out; }

	@keyframes hambFade { 100% { opacity: 0; } }
	@keyframes hambRotateDown { 100% { transform: rotate(45deg) scaleX(1.3) translate(0px, -2px); transform-origin: left;} }
	@keyframes hambRotateUp { 100% { transform: rotate(-45deg) scaleX(1.3) translate(-1px, 2px); transform-origin: left; } }

.hambBG {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: var(--DCGPaper);
}

	.hamb-main-links, .hamb-subnav { display: flex; flex-direction: column; gap: 30px; margin-bottom: 30px; padding-left: 23px; }
	.hamb-main-links { padding-top: 20px; }
	.hamb-subnav {  gap: 20px; }
	
	.hamb-link {
		display: inline;
		color: var(--DCGOffBlack);
		font-size: 2rem;
		font-weight: 400;
		text-decoration: underline;
		text-underline-offset: 6px;
		text-decoration-color: var(--DCGMagenta);
		font-weight: 600;
	}
	
	.hamb-subnav-link {
		display: block;
		color: var(--DCGDarkGray);
		font-size: 1.6rem;
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-color: var(--DCGMagenta);
		font-weight: 600;
	}

.hero, .hero-static {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding-bottom: 40px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	height: 730px;
	overflow: hidden;
	margin-bottom: calc(1.4 * var(--marginbottom));
}

	.hero-static { padding-bottom: var(--marginbottom); }

.home-video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.hero-overlay {
	background: rgba(0,0,0,.7);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}

.hero-noise {
	background: url(../img/img-noise-1700x730.png) no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	display: none;
}

.hero-text-box {
	max-width: var(--maxw);
	margin: 0 auto;
	width: var(--widepercent);
	position: relative;
	z-index: 5;
}

.hero-static .hero-text-box { max-width: 600px; margin: 0;}
	.print-hero .hero-text-box { max-width: 880px; }

.hero-static .hero-text { line-height: 1;}
.hero-static .eyebrow {font-family: "new-hero",sans-serif; color: var(--DCGPaper); margin-bottom: 1em;  }

.hero-static::after {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-image:linear-gradient(to top, rgba(0,0,0,.8) 0, rgba(0,0,0,.8) 30%, rgba(0,0,0,0));
}


/* .home-hero { background-image:url(../img/home-hero2.jpg); } */

.strategy-hero { background-image:url(../img/strategy-hero.jpg); }
.print-hero { background-image:url(../img/print-hero.jpg); }

.hero-text {
	color: var(--DCGPaper);
	font-family: "new-kansas",serif;
	font-size: clamp(4rem,7vw,8rem);
	line-height: 1.1em;
}

	.hero-static .hero-text { 	font-size: clamp(4.8rem,7vw,8rem); }

	.hero-text-mobile { 
		display: none; 
		background: var(--DCGDarkPaper);
		font-size: 3.6rem;
		font-family: "new-kansas",serif;
		padding: 1em .75em;
		line-height: 1.1em;
		margin-bottom: 100px;
	}

.hero-text-only {
	max-width: 975px;
}

	.hero-text-only .eyebrow { color: var(--DCGOffBlack); margin-bottom: 1.5em;}
	.hero-text-only h1 { font-size: clamp(5rem, 5vw, 8rem); line-height: 1.05em; margin-bottom: .4em; text-wrap: balance; }
	.hero-text-only h2 { font-family: "new-kansas",serif;font-size: clamp(3rem,4vw,4.8rem); font-weight: normal; }
	.hero-text-only p { margin-bottom: 3em; }
		
.two-cols {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: clamp(20px, 5vw, 100px);
	margin-bottom: var(--marginbottom);
}

	.two-cols-reverse {
		flex-direction: row-reverse;
	}

.col {
	width: 50%;
}

.col-img {
	position: relative;
	box-shadow: var(--shadow);
}

.bip { position: absolute; top: 0; left: 0; transform: translate(-100px,-90px); }

	.bip-growth { transform: translate(-170px, -120px) scale(.75);}

.col-hero { width: 100%; position: relative; z-index: 2; }

.three-cols {
	display: flex;
	justify-content: space-between;
	gap: clamp(20px, 5vw, 60px);
	margin-bottom: var(--marginbottom);
}

	.service-col {
		width: 33.33333%;
		background: var(--DCGDarkPaper);
		padding: 40px 30px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.capabilities-col {
		width: 33.33333%;
	}
	
	.eyebrow {
		font-weight: 800;
		text-transform: uppercase;
		font-size: clamp(1.3rem,2vw,2rem);
		letter-spacing: 1px;
		margin-bottom: .5em;
		color: var(--DCGBlue);
	}
	

.cta-plain {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--DCGMagenta);
	margin-top: auto;
}

.cta {
	font-size: clamp(1.3rem,2vw,1.8rem);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--DCGOffBlack);
}

	.cta img {
		filter:brightness(0);
		transition: all var(--timing) ease-out;
	}
	
	.cta:hover img { filter: brightness(1); transform:rotate(45deg)}

.case-study {
	margin-bottom: var(--marginbottom);
	text-decoration: none;
	color: var(--DCGOffBlack);
	display: block;
}

	.col .case-study { margin-bottom: 0;}

	.case-study-label {
		font-size: 1.2rem;
		color: var(--DCGDarkGray);
		padding-bottom: 5px;
		border-bottom: 2px solid var(--DCGDarkGray);
		margin-bottom: 16px;
		text-transform: uppercase;
		font-weight: 700;
	}

	.case-study-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20px;
		min-height: 40px; /* for two line titles */
	}
	
	.case-study-client {
		font-size: 3.6rem;
		font-weight: 600;
	}
	
	.case-study-title {
		font-size: 2rem;
		font-weight: 600;
	}
	
	.case-study-tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 400px;
		flex-shrink: 0;
		gap: 10px;
	}

	.case-study-tag {
		font-size: 1.6rem;
		width: 45%;
	}
	
	.case-study-image {
		position: relative;
		box-shadow: var(--shadow);
	}
	
	.case-study-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:var(--overlayOFF);  transition: all var(--timing); z-index: 2;}
	.case-studies-small .case-study-client { font-size: 2.4rem; }
	.case-studies-small .case-study-title { font-size: 1.8rem; max-width: 180px; line-height: 1.2em; }

	.case-study:hover .case-study-overlay { background:var(--overlayON);}
	
	.case-study-arrow {
		position: absolute;
		bottom: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		border-radius: 20px 0 0 0;
		background:url(../img/cta-arrow-magenta-45.svg) no-repeat;
		background-size: contain;
		background-position: -40px -40px;
		transition: all var(--timing) ease-out;
		z-index: 3;
	}
	
	.case-study-more {
		position: absolute;
		right: 5px;
		bottom: -20px;
		font-size: 1.3rem;
		font-weight: 600;
		text-align: right;
		opacity: 0;
		transition: all var(--timing) ease-out;
	}
	
	.case-study:hover .case-study-arrow { background-position: 0 0; z-index: 3; }
	.case-study:hover .case-study-more { opacity: 1; }
	

.blackBG {
	background: var(--DCGOffBlack);
	padding: var(--marginbottom) 0;
	margin-bottom: var(--marginbottom);
	overflow: hidden;
}

	.agency-intro .eyebrow { color: var(--DCGMagenta); font-size: clamp(1.6rem,3vw,2.4rem);}
	.agency-intro h2, .agency-intro h1 { 
		color: var(--DCGPaper); 
		font-family: "new-kansas",serif;
		font-size: clamp(3.5rem, 4vw, 4.8rem);
		max-width: 800px;
		font-weight: 300;
		line-height: 1.2em;
	}
	
	.agency-bip {
		position: absolute;
		bottom: -50%;
		right: 0;
		max-width: 850px;
		width: 100%;
	}
	
.cta-box,
.contact-form input[type="submit"] {
	color: var(--DCGBlue);
	border: 2px solid var(--DCGBlue);
	padding: 14px 20px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	background-image:linear-gradient(to right, var(--DCGBlue), var(--DCGBlue));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: all var(--timing) ease-out;
	background-color: transparent;
	font-size: 1.6rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.contact-form ul.no-list.hs-error-msgs.inputs-list {
	color: red;
	margin-top: -1rem;
	margin-bottom: 2rem;

	label {
		font-size: 1.4rem;
	}
}


	.blackBG .cta-box { 
		color: var(--DCGMagenta);
		border: 2px solid var(--DCGMagenta);
		background-image:linear-gradient(to right, var(--DCGMagenta), var(--DCGMagenta));
	}

	.cta-box div { display: flex; gap: 8px; align-items: center;}
	.cta-box div img {
		transition-delay: calc(var(--timing) * .5), calc(var(--timing) * .5);
		transition-property: transform, filter;
		transition-timing-function: ease-out;
		transition-duration: var(--timing), 0s;
	}
	
	.cta-box:hover,
	.contact-form input[type="submit"]:hover { background-size: 100% 100%; color: #fff;}
	.cta-box:hover div img { transform: rotate(45deg); filter:brightness(0) invert(1); }

.h2 + .cta-box { margin-top: 40px; }

.blog-posts {
	display: flex;
	align-items: flex-start;
	gap: clamp(30px,3vw,60px);
	margin-bottom: var(--marginbottom);
	
}
	.blog-posts .eyebrow { color: var(--DCGDarkGray); margin-bottom: 1em;}
	
	.blog-post-title { position: relative; font-size: clamp(1.6rem,2vw,2rem); line-height: 1.4em; transition: all var(--timing) ease-out;text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;  }
		
	.blog-post-image img { width: 100%; margin-bottom: 30px; }

	.blog-post-primary { width: 50%; text-decoration: none; display: block; color: var(--DCGOffBlack); font-weight: 600;}
		.blog-post-primary .blog-post-image { box-shadow: var(--shadow); }
	
	.blog-posts-secondary { width: 50%; display: flex; flex-direction: column; gap: clamp(30px,3vw,60px);color: var(--DCGOffBlack); font-weight: 600; }
	
	.blog-post-secondary { text-decoration: none; display: flex; gap: 30px; align-items: center; color: var(--DCGOffBlack);}
	
		.blog-post-secondary .blog-post-image { width: 40%; max-width: 200px; box-shadow: var(--shadow); flex-shrink: 0;}
		.blog-post-secondary .blog-post-image img { margin-bottom: 0;  }
	
	.blog-posts-secondary .cta-plain { width: 110px; align-self: flex-end; }
	.blog-view-all-mobile { display: none;  }
	
	.blog-post-image { position: relative; }
	.blog-post-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:var(--overlayOFF);  transition: all var(--timing) ease-out;}
	
	.blog-hover:hover .blog-post-overlay { background:var(--overlayON); transition: all var(--timing) ease-out; }
	.blog-hover:hover .blog-post-title { text-decoration: underline; text-decoration-color: var(--DCGMagenta); text-underline-offset: 3px; }
	
	.blog-arrow {
		border-radius: 10px 0 0 0;
		width: 20px;
		height: 20px;
		display: inline-block;
		background:url(../img/cta-arrow-magenta-45.svg) no-repeat;
		background-size: 14px;
		background-position: -16px -16px;
		transition: all var(--timing) ease-out;
		text-decoration: underline;
		text-decoration-color: transparent;
	}
	
	.blog-hover:hover .blog-post-title .blog-arrow { background-position: 100% 100%; text-decoration-color: var(--DCGMagenta); }

.darkPaperBG {
	padding: var(--marginbottom) 0;
	margin-bottom: var(--marginbottom);
	overflow: hidden;
	position: relative;
	background-color: var(--DCGDarkPaper);
}

	.darkPaperBG.homeContact {
		background:  var(--DCGDarkPaper) url(../img/bip-home-contact.svg) no-repeat;
		background-position: 85% calc(100% + 220px);
		background-size: 780px;
	}

	.darkPaperBG.strategyContact {
		background:  var(--DCGDarkPaper) url(../img/bip-strategy-contact.svg) no-repeat;
		background-position: 85% calc(100% + 130px);
		background-size: 470px;
	}

	.darkPaperBG.printContact {
		background:  var(--DCGDarkPaper) url(../img/bip-print-contact.svg) no-repeat;
		background-position: 85% calc(100% + 155px);
		background-size: 620px;
	}

	.darkPaperBG.techContact {
		background:  var(--DCGDarkPaper) url(../img/bip-tech-contact.svg) no-repeat;
		background-position: 85% 100%;
		background-size: 540px;
	}

	.blackBG.agencyContact {
		background:  var(--DCGOffBlack) url(../img/bip-agency-contact.svg) no-repeat;
		background-position: 85% calc(100% + 100px);
		background-size: 850px;
	}

	.darkPaperBG .agency-intro h2 { color: var(--DCGOffBlack); text-wrap: balance; max-width: 60%; margin-bottom: .5em;  }

	.contact-bip { position: absolute; bottom: 0; right: 0; width: 50%; max-width: 780px;}

.footer {
	margin-bottom: var(--marginbottom);
}

	.footer-logoNav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.footer-logo { display: block; }
	.footer-primary-links { display: flex; gap: 20px; justify-content: flex-end;}
		.footer-nav-link { font-size: 1.6rem; font-weight: 600; text-decoration: none; color: var(--DCGOffBlack); border-bottom: 2px solid transparent; padding-bottom: 4px; }
		.footer-nav-link:hover { border-bottom: 2px solid var(--DCGMagenta);}

	.footer-secondary-links { border-bottom: 1px solid var(--DCGLightGray); padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
		.footer-secondary-left { display: flex; gap: 40px;}
		.footer-secondary-left a { text-decoration: none; color: var(--DCGOffBlack); font-size: 1.6rem; border-bottom: 1px solid transparent; padding-bottom: 2px; border-bottom: 2px solid transparent;}
		.footer-secondary-left a:hover { border-bottom: 2px solid var(--DCGMagenta);}
		
		.footer-social { display: flex; gap: 20px; }
			.social img { width: 30px; height: 30px; }
			.social { transition: all calc(var(--timing) * .5); }
			.social:hover { background:var(--DCGMagenta); }

	.legal { font-size: 12px; color: var(--DCGDarkGray) }
	.legal a { color: var(--DCGOffBlack); text-decoration: none; font-weight: 600; border-right: 1px solid var(--DCGLightGray); padding-right: 1em; margin-right: 1em; }


.cookie-bannerBG {
	position: fixed;
	z-index: 5;
	bottom: 0;
	background: var(--DCGPaper);
	border-top: 1px solid var(--DCGDarkGray);
	padding: 1em 0;
	width: 100%; 
}

	.cookie-banner {
		display: flex;
		align-items: center;
		gap: 20px;
		width: var(--widepercent);
		max-width: var(--maxw);
		margin: 0 auto;
		justify-content: space-between;
		line-height: 1.3em;
	}
	
		.cookie-banner div { font-size: clamp(1.3rem,2vw, 1.6rem); }
	
.cookie-button {
	background:var(--DCGBlue);
	color: #fff;
	padding: .75em 1em;
	font-weight: 600;
	text-decoration: none;
	flex-shrink: 0;
}

video {
	width: 1700px;
}

.tabs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--DCGLightGray);
	margin-bottom: 40px;
}

	.tab-nav {
		font-weight: 800;
		font-size: clamp(1.2rem, 1.2vw, 1.6rem);
		color: var(--DCGOffBlack);
		text-decoration: none;
		padding-bottom: 10px;
		border-bottom: 4px solid transparent;
		display: inline-block;
		position: relative;
		top: 7px;
		transition: border-color var(--timing);
	}

	.tab-nav-on, .tab-nav:hover {
		color: var(--DCGBlue);
		border-bottom: 4px solid var(--DCGBlue);
	}
	
	.tab {
		display: flex;
		gap: 100px;
		justify-content: space-between;
		align-items: center;
	}
	
		.tab h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
	
	.tab-text { width: 35%; }

	.tab-image {
		width: 65%;
		box-shadow: var(--shadow);
	}
	
		.tab-image img { width: 100%; }

.check-item {
	background: url(../img/check-green.svg) no-repeat;
	min-height: 40px;
	display: flex;
	align-items: center;
	padding-left: 50px;
	font-size: clamp(1.6rem,3vw,2rem);
	margin-bottom: 1em;
	font-weight: 600;
}

p + .check-item { margin-top: 2em;}

.tech-hero-image {
	padding: var(--marginbottom) 0;
}

.tech-hero-image img { margin: 0 auto; width: 100%; box-shadow: var(--shadow); }

.tech-capabilities {
	display: flex;
	gap: clamp(30px,3vw,60px);
	flex-wrap: wrap;
}

	.tech-capability { width: 30%; background: var(--DCGPaper); padding: 40px 30px;}
	.tech-capability h3 { color: var(--DCGBlue); text-transform: uppercase; font-weight: 800;  font-size: clamp(1.4rem,1.8vw,2rem);}
	.tech-capability p { font-size: clamp(1.4rem,1.8vw,2rem); }
	
.tech-security {
	padding: 180px 0 var(--marginbottom) 0;
	position: relative;
	overflow: visible hidden;
}

.bip-wrapper { position: relative; overflow: hidden;}

.tech-bip {
	position: absolute;
	top: -40px;
	left: 7.5%;
	width: clamp(130px,12vw,200px);
}

.tech-security h2 {font-family: "new-kansas",serif; font-size: clamp(4rem,4vw,6rem); font-weight: 300; margin-bottom: .5em; line-height: 1;}

.tech-box {
	border-top: 1px solid var(--DCGDarkPaper);
	border-right: 1px solid var(--DCGDarkPaper);
	border-left: 1px solid var(--DCGDarkPaper);
	padding: 6% 6% 30px 6%;
}

	.tech-box .check-item:last-of-type { margin-bottom: 0; }

.tech-logos {
	display: flex;
	background: var(--DCGDarkPaper);
	padding: clamp(15px, 3vw, 50px);
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--DCGDarkPaper);
	border-right: 1px solid var(--DCGDarkPaper);
	border-left: 1px solid var(--DCGDarkPaper);
	gap: 10px;
}

.tech-logos-fineprint { font-size: 1.2rem; padding: 20px 50px; }

.agency-hero {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.agency-on-video { position: relative; z-index: 5;}

.agency-head {
	font-family: "new-kansas",serif;
	font-size: clamp(5rem, 5vw, 8rem);
	line-height: 1.05em;
	margin-bottom: .4em;
	color: var(--DCGPaper);
}

.agency-capabilities {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

	.agency-capability {
		width: 46%;
		color: var(--DCGPaper);
		margin-bottom: 6%;
	}
	
	.agency-capability h3 { font-size: clamp(1.6rem,3vw,2rem); }
	.agency-capability p { font-size: clamp(1.4rem,3vw,1.6rem); }

/* ABOUT */

.about {
	max-width: 90%;
	margin: var(--marginbottom) auto var(--marginbottom) auto;
}

	.about h1 { font-size: clamp(4rem, 5vw, 5.6rem); line-height: 1em; margin-bottom: .5em;}
	.about p { max-width: 800px; }

.about-logos { display: flex; flex-wrap: wrap; gap: 0;}
	.about-logos img { width: 16.6667%; }

.people {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: space-between;
}

	.person {
		width: 30%;
	}
	
	.person img { width: 100%; margin-bottom: 20px; }
	
	.person-name {
		font-weight: 700;
		font-size: clamp(1.5rem, 2vw, 2.5rem);
		text-transform: uppercase;
		margin-bottom: .4em;
	}
	
	.person-title {
		font-weight: 600;
		color: var(--DCGDarkGray);
		font-size: clamp(1.3rem, 2vw, 1.8rem);
		line-height: 1.3em;
	}

/* CONTACT */

.contact-wrap {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	border-bottom: 1px solid var(--DCGLightGray);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.contact-text { display: flex; flex-direction: column; }

.contact-head {
	color: var(--DCGBlue);
	font-size: clamp(1.5rem, 3vw, 1.8rem);
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: .5em;
	line-height: 1.2em;
}

	.contact-text p {font-size: clamp(1.3rem, 3vw, 1.6rem); }
	.contact-text p a { color: inherit; transition: all .125s; }
		.contact-text p a:hover { color: var(--DCGMagenta);}
	p + .contact-head { margin-top: 2em; }

.contact-text img { width: 80%; margin-top: auto; }

.select-css,
.contact-form select {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.8em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin-bottom: 1.3em;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: 2px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right .7em top 50%;
	background-size: .65em auto;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}

/* PODCAST */

.podcast-description { border-bottom: 1px solid var(--DCGLightGray); padding-bottom: 30px;max-width: 800px; margin: 30px auto; }

	.podcast-description p { font-size: clamp(1.6rem, 3vw, 2rem); }
	.podcast-description p:last-child { margin-bottom: 0; }
	.podcast-logo { float: left; max-width: 300px; margin: 0 2em 1em 0; width: 35%; min-width: 200px; }


.podcasts { max-width: 800px; margin: 30px auto;}
.podcast { border-bottom: 1px solid var(--DCGLightGray); padding-bottom: 30px; margin-bottom: 30px; }
.podcast h2 { margin-bottom: 0;}
.podcasts p {  font-size: 1.5rem;}
.podcasts p a { color: var(--DCGBlue); }

.listen-logos { display: flex; gap: 20px; flex-wrap: wrap; }
	.listen-logo img { height: 44px; }

/* https://blog.shahednasser.com/how-to-style-an-audio-element/ */
audio::-webkit-media-controls-panel { background-color: rgba(255,67,110,.5); }

label {
	font-size: 1.6rem;
	margin-bottom: 8px;
	display: block;
}

	.inline-label,
	.hs-form-booleancheckbox label { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; line-height: 1.3em; }

	.hs-form-booleancheckbox label { 
		margin: 0;
		padding: 0;
	}

	.hs-form-booleancheckbox label span {
		margin-bottom: -3px;
	}


.contact-form {
	max-width: 530px;
	flex: 1 1 0;
}

.contact-form .hs_recaptcha {
	margin-block: 2rem;
}

.textEntry,
.contact-form input[type="text"],
.contact-form input[type="email"] {
	font-size: 16px;
	padding: .85em;
	display: block;
	margin-bottom: 1.3em;
	border-radius: 3px;
	background: #fbfbfb;
	-webkit-appearance: none;
	border: 0;
	width: 100%;
	border: 1px solid var(--DCGLightGray);
}

.textEntry:focus, .textArea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
	background: #fff;
}

.textArea,
.contact-form textarea {
	-webkit-appearance: none;
	appearance: none;
	background: #fbfbfb;
	border-radius: 3px;
	font-size: 16px;
	font-family: "Helvetica",sans-serif;
	width: 100%;
	padding: .5em;
	margin-bottom: 1em;
}

.contact-form textarea {
	height: 72px;
}

.dcgCheckbox,
.contact-form input[type="checkbox"] {
	appearance: none;
	border-radius: 2px;
	width:20px;
	height: 20px;
	border: 1px solid var(--DCGBlue);
	background: #fff;
	margin-right: 5px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.dcgCheckbox:checked,
.contact-form input[type="checkbox"]:checked {
  background: var(--DCGBlue) url(../img/check.svg) 50% 50% no-repeat;
  background-size: 14px;
}

.locations { 
	display: flex;
	padding-bottom: 40px;
	flex-wrap: wrap; 
	max-width: 90%;
	margin: 0 auto var(--marginbottom) auto;
	gap: 30px 20px;
	justify-content: space-between;
}

.location {
	width: calc(33.3333% - 20px);
	border: 1px solid var(--DCGDarkGray);
	padding: 1.5em 1.5em .5em 1.5em;
}

	.location-head { color: var(--DCGBlue); font-size: clamp(1.6rem, 2vw, 1.9rem); font-weight: 700; text-transform: uppercase; line-height: 1.2em; margin-bottom: 1em; }
	.location-subhead {  color: var(--DCGDarkGray); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.2em; font-weight: 600; margin-bottom: .25em;  }
	.location-detail { font-size: clamp(1.4rem, 2vw, 1.6rem); line-height: 1.4em; margin-bottom: 1em;}
	.location:empty { border: 0;}

.privacy { max-width: 800px; margin: 40px auto; }

	.privacy h1 { font-size: clamp(3rem, 4vw, 5rem); }
	.privacy h2 { font-size: clamp(1.6rem,2vw,2rem); margin-bottom: .4em; margin-top: 1.4em;}
	.privacy p { font-size: clamp(1.5rem,2.4vw,1.8rem); }

h1 {
	font-family: "new-kansas",serif;
	font-size: clamp(1.9rem, 2vw, 3.6rem);
	line-height: 1.3em;
	font-weight: 300;
}

	.head-and-info h1 {font-size: clamp(3rem, 3vw, 4.8rem); margin-bottom: 1em; line-height: 1.1em; }

	.h1OffsetWide { max-width: 70% !important; margin: 0 auto 1em auto; }

h2 {
	font-weight: 600;
	font-size: clamp(1.6rem,2vw,2.4rem);
	line-height: 1.5em;
	margin-bottom: 1em;
}


h3 {
	font-weight: 600;
	font-size: clamp(2rem,3.5vw,3.6rem);
	line-height: 1.5em;
	margin-bottom: 1em;
}

	.capabilities-col h3 { color: var(--DCGBlue); font-weight: 800; text-transform: uppercase; font-size: 2rem; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 2px solid var(--DCGDarkGray);}

.head-alt {
	font-weight: 600;
	font-size: clamp(2rem, 3vw, 2.8rem);
	margin-bottom: 1em;
}

p {
	font-size: clamp(1.6rem,3vw,2rem);
	line-height: 1.5em;
	margin-bottom: 1em;
}

	.p-link { color: var(--DCGMagenta); }

p + .cta-box { margin-top: calc(var(--marginbottom) * .5); }

.alignTop { align-items: flex-start; }
.extraTopMargin { margin-top: calc(var(--marginbottom) * 2); }
.noMargin { margin-bottom: 0;}
.colorPaper { color: var(--DCGPaper);}

@media all and (max-width: 1250px) {
	.darkPaperBG.techContact { background-size: 350px; }
}

@media all and (max-width: 1100px) {
	.case-study-tags { display: none;}
	.case-study-info { align-items: flex-end;}
	.agency-bip { width: 60%;}
	
	.darkPaperBG.homeContact { background-size: 500px; background-position: 100% calc(100% + 145px); }
}

@media all and (max-width: 900px) {
	.tab-set { display: flex; gap: 40px; align-items: flex-start; }
	.tabs { flex-direction: column; border: none; align-items: flex-start; justify-content: flex-start; gap: 20px;}
	.tab { flex-direction: column-reverse; gap: 30px;}
	.tab-text, .tab-image { width: 100%; max-width: 600px;}
	.tab-text h3 { margin-bottom: .5em; }
	.tab-nav { padding-bottom: 4px; line-height: 1.3em; font-size: 1.4rem;}

	.tech-security { flex-direction: column; }
	.tech-security .col { width: 100%; }
	.tech-box { border: 0; padding: 0 0 30px 0; }

	.blackBG.agencyContact { background-size: 500px; background-position: 85% calc(100% + 55px); }
}

@media all and (max-width: 850px) {
	.footer-secondary-left { gap: 20px;}
		.footer-secondary-left a { font-size: 1.4rem;}
}

@media all and (max-width: 800px) {
	video { width: 800px; }
	.hero, .hero-static { height: 345px; }
	.hero-static { height: 500px; padding-bottom: 40px; }
	.case-study-info { flex-direction: column; align-items: flex-start;}
	.case-study-client { margin-bottom: 8px; }
	
	.person { width: 45%; }
	
	.contact-wrap { flex-direction: column; }
	.location { width: calc(50% - 20px); }
}

@media all and (max-width: 720px) {
	.blog-posts { overflow: scroll; margin-bottom: 10px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding: 40px;}
	.blog-posts-secondary { display: contents; overflow: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding: 40px;}
	.blog-post-secondary { display: block; width: 260px;scroll-snap-align: start; }
		.blog-post-primary { width: 260px;scroll-snap-align: start; }
		.blog-post-primary .blog-post-image { width: 260px; }
		.blog-post-secondary .blog-post-image { width: 260px; max-width: 100%; margin-bottom: 30px; }
	.blog-view-all-desktop { display: none; }
	.blog-view-all-mobile { display: flex; margin-bottom: var(--marginbottom); width: 110px;}
	
	.tech-capabilities { gap: 10px }
	.tech-capability { width: 100%; }
	
	.footer-logoNav { flex-direction: column; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--DCGLightGray); padding-bottom: 20px; margin-bottom: 20px;}
		.footer-primary-links { flex-direction: column;}
	.footer-secondary-links, .footer-secondary-left { flex-direction: column; align-items: flex-start; gap: 20px; }
	
}

@media all and (max-width: 600px) {
	:root { --marginbottom: 45px; }
	.alignTop { align-items: center; }
	
	.desktop-nav { display: none; }
	.hamb-nav { display: flex; }

	.hambBG { display: block;}
	
	.two-cols { flex-direction: column; gap: 40px;}
		.col { width: 100%; max-width: 500px;}
		
	.three-cols { flex-direction: column; }
		.service-col, .capabilities-col { width: 100%; }
		.capabilities-col { margin-bottom: 40px; }
		.cta { font-size: 1.8rem;}
		
	.agency-bip { display: none;}
	.darkPaperBG { background-image:none !important; }
	.darkPaperBG .agency-intro h2 { max-width: 100%; text-wrap: wrap; }
	
	.capabilities-col h3 { font-size: 1.4rem; margin-bottom: 20px; }
	
	.tech-logos img { max-width: 40px; }

	.h2OffsetWide { max-width: 100% !important; margin-bottom: 100px; }

	.blackBG.agencyContact { background-size: 300px; background-position: 85% calc(100% + 34px);}
	
	.about-logos img { width: 25%; }

}

@media all and (max-width: 500px) {
	.hero { margin-bottom: 0; }
	.hero-static { height: 580px;}
	.hero .hero-text { display: none; }
	.hero-text-mobile { display: block;  }
	.case-study-client { font-size: 2.4rem; }
	.case-study-title { font-size: 1.8rem; font-weight: 500; }

	.strategy-hero { background-image:url(../img/strategy-hero-m.jpg); background-size: cover; }
	.print-hero { background-image:url(../img/print-hero-m.jpg); background-size: cover; }
	
	.hero-overlay:not(.agency-hero .hero-overlay) { display: none; }
	
	.locations {  }
		.location { width: 100%; }
	
}

@media all and (max-width: 400px) {

}

@media (prefers-reduced-motion) {
	:root { --timing: 0s; }
}

body.dark {
		--DCGPaper: #1F1C19;
		--DCGDarkPaper: #33302d;
		--DCGOffBlack: #FAF7F0;
		--DCGDarkGray: #CCCAC8;
		--DCGBlue: #4290d2;
}	

.dark .hero-text { color: var(--DCGOffBlack); }
.dark .blackBG { background:var(--DCGDarkPaper); }
.dark .agency-intro h2 { color:var(--DCGOffBlack); }
.dark .tech-logos { background: var(--DCGOffBlack);}
.dark .agency-head { color: var(--DCGOffBlack);}
.dark .agency-capability { color: var(--DCGOffBlack); }
.dark .blackBG.agencyContact { background-color: var(--DCGDarkPaper);}
.dark .colorPaper { color:var(--DCGOffBlack);}
	
.dark .cta img { filter: brightness(1); }

.hideMe { display: none; }