a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
img { display: block; vertical-align: middle; }
*, *: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;scroll-behavior: smooth;}

:root {
    --brand-light-grey: #F4F3F3;
    --brand-mid-grey: #A3A6A8;
    --brand-off-white: #FCFBFA;
    --brand-dark-blue: #1A288C;
    --brand-off-black: #1A2026;
    --bgPadding: 100px;
}

.libre-franklin {
  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.gabarito {
  font-family: "Gabarito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


html { scroll-padding-top:70px; }

body {
	font-optical-sizing: auto;
	font-family: "Libre Franklin", sans-serif;
	font-weight: 400;
	background: var(--brand-off-white);
	color: var(--brand-off-black);
}

section {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}

.section100 { width: 100%; max-width: 1280px; }


.top-navBG {
	/* background: var(--brand-off-black) url(../img/battalion-logo-nav-crop.svg) no-repeat; */
	background: var(--brand-off-black);
	width: 100%;
	position: fixed;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 70px;
}

	/* .scrolled { background: var(--midnight-blue); } */

.top-nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 90%;
	height: 70px;
	max-width: 1280px;
	margin: 0 auto;
}

	.top-nav img { height: 70px;}

	.nav-links {
		display: flex;
		gap: 25px;
		align-items: center;
	}
	
	.nav-link, .eyebrow {
		font-family: "Gabarito", sans-serif;
		font-weight: 700;
		font-size: 1.5rem;
		text-decoration: none;
		color: var(--brand-off-black);
		text-transform: uppercase;
		color: var(--brand-off-white);
		margin-bottom: 15px;
	}
	
	.nav-link:hover { text-decoration: underline;}
	
		.eyebrow { margin-bottom: .6em; color: var(--brand-off-black); }
	
	/* .nav-link:hover {
		border: 1px solid rgba(255,255,255,.5);
	}
	
	.nav-link-on {
		border: 1px solid var(--gold);
	}*/
	
.hero-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.hero-head {
	background: url(../img/battalion-logo-watermark.svg) no-repeat;
	background-size: contain;
	background-position: 0 100%;
	width: 48%;
	padding: 15% 0 18% 40px;
}

	.hero-head p { font-size: 1.9rem; line-height: 1.3em; font-family: "Gabarito", sans-serif; width: 75%; }

.hero-images {
	width: 48%;
	background: url(../img/hero-grid.jpg) no-repeat;
	background-size: contain;
	background-position: 0 50%;
}

#whatWeDo { scroll-margin-top: 40px; }

.operatorsBG {
	background: var(--brand-off-black);
	padding: var(--bgPadding) 0;
	margin-bottom: 40px;
}

	.operators {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--brand-off-white);
		margin: 0 auto;
		width: 90%; 
		max-width: 1080px;
	}
	
		.operators-head { width: 45%; }
		.operators-text { width: 45%; }

	.operators p { margin-bottom: 0; }

.collab {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin: 0 auto 40px auto;
	width: 100%;
	max-width: 1440px;
}

	.collab-text {
		width: 300px;
		margin-left: calc(11.111% / 2);
	}
	
	.collab-image {
		background: url(../img/collaboration-01.jpg) no-repeat;
		aspect-ratio: 176 / 80;
		background-position: 100% 50%;
		background-size: cover;
		width: 65%; 
	}

	.collab-reverse { flex-direction: row-reverse; align-items: center; }
	.collab-reverse .collab-image { width: 50%; aspect-ratio: 150 / 126; background-image: url(../img/collaboration-02.jpg); }
	.collab-reverse .collab-text { margin-left: 0; margin-right: calc(11.111% / 2); width: 520px; }

.teamBG {
	background: var(--brand-light-grey);
	width: 100%;
	margin: 0 auto;
	padding: var(--bgPadding) 0;
}
	
	.team-box { width: 90%; max-width: 1280px; margin: 0 auto; }
	
	.team-wrap {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60px;
	}
	
	.team-head { width: 40%; }
	.team-info { width: 50%; }
	
.headshots {
	display: flex;
	justify-content: space-between;
	gap: 3.5%;
	align-items: flex-start;
	flex-wrap: nowrap;
	overflow: hidden;
}

.headshot {
	display: grid;
	grid-template-rows: auto auto;
	width: 31%;
	min-width: 0;
	overflow: hidden;
	position: relative;
	appearance: none;
	background: none;
	border: none;
	text-align: left;
	padding: 0;
	cursor: pointer;
	color: var(--brand-off-black);
	font-family: "Libre Franklin", sans-serif;
	font-weight: 400;
}

.headshot-detail,
.headshot-image {
	grid-area: 1 / 1;
	min-width: 0;
	max-width: 100%;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.headshot-info {
	grid-row: 2;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--brand-dark-blue);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.headshot img { width: 100%; margin-bottom: 20px; }

.headshot-name {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(2rem, 2.5vw, 3rem);
	line-height: 1.1em;
	margin-bottom: 10px;
}

.headshot-title {
	font-family: "Gabarito", sans-serif;
	color: var(--brand-dark-blue);
	font-weight: 500;
	font-size: clamp(1.6rem, 2.5vw, 1.9rem);
}

.headshot-expand {
	font-weight: 500;
	color: var(--brand-off-black);
	font-size: 3rem;
	position: relative;
	top: 7px;
}

.headshot-detail {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	height: 0;
	overflow: hidden;
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
}

.headshot-detail .headshot-info { border: none; }
.headshot-detail .contact-info { text-align: left; }

.headshot-image {
	opacity: 1;
}

/* Expanded state */
.headshot.is-expanded .headshot-detail {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	height: auto;
	overflow: visible;
	grid-area: auto;
	grid-row: 2;
	grid-column: 1;
}

.headshot.is-expanded .headshot-image {
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.headshot.is-expanded .headshot-info {
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	z-index: 1;
	border: none;
}

.headshot .icon-minus { display: none; }
.headshot.is-expanded .icon-plus { display: none; }
.headshot.is-expanded .icon-minus { display: inline; }

.principlesBG {
	background: var(--brand-off-black);
	padding: var(--bgPadding) 0;
	color: var(--brand-off-white) !important;
	max-width: 100%;
}	

.principles-head {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto 40px auto;
}

	.principles-head * { color: var(--brand-off-white); }
	
	.principles-head p { max-width: 700px; }
	
	.principles-row {
		width: 90%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		gap: 3.5%;
	}
	
		.principle-box {
			width: 31%;
			border: 1px solid rgba(255,255,255,.3);
			padding: 3%;
		}
		
		.principle-head { font-size: 2.4rem; margin-bottom: .5em; font-weight: 500; }
		.principle-box p { margin-bottom: 0; }
	
	.principles-image-row {
		width: 90%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		gap: 3.5%;
		margin-top: 3.5%;
	}
	
	.principles-image {
		background: url(../img/principles.jpg) no-repeat;
		background-size: cover;
		width: 65.5%;
	}
	
	.principle-boxes { width: 31%; display: flex; flex-direction: column;  }
		.principle-boxes .principle-box { width: 100%; padding: 10.5%;  }
		
	.pb-extraMargin { margin-bottom: 10.5%; }


.operate {
	margin-bottom: 20px;
	padding: var(--bgPadding) 0 0 0;
}

	.operate-box, .operate-table-box {
		display: flex;
		justify-content: space-between;
		gap: 40px;
	}
	
		.operate-box { margin-bottom: var(--bgPadding); }
		.operate-table-box { align-items: center; }
	
	.operate-head { width: 31%; }
	.operate-info { width: 60%; }
		.operate-info h3 { margin-bottom: .5em; }
		
	.operate-image { width: 31%; }
	.operate-image img { width: 100%; }
	
	.operate-table { width: 60%; }
	
		.operate-table h4 { color: var(--brand-dark-blue); font-weight: 700; margin-bottom: .6em; }
			p + .operate-item { margin-top: 4em; }
		.operate-item { display: flex; gap: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--brand-dark-blue); align-items: flex-end; margin-bottom: 30px; }
		.oi-label { font-family: "Gabarito", sans-serif; color: var(--brand-dark-blue); font-weight: 700; flex-shrink: 0; width: 30%;font-size: clamp(1.6rem, 2.5vw, 1.9rem);  }
		.oi-text {font-size: clamp(1.6rem, 2.5vw, 1.9rem); font-family: "Gabarito", sans-serif;}

/*
.look-for {
	display: flex;
	gap: 20px;
	margin: 0 auto var(--bgPadding) auto;
	width: 90%;
	max-width: 1280px;
}

	.look-for-image {
		background: url(../img/operate-02.jpg) no-repeat;
		background-size: cover;
		flex: 2 1 0%;
	}
	
	.look-for-text {
		background: var(--brand-off-black);
		padding: 3%;
		color: var(--brand-off-white);
		flex: 1 1 0%;
	}

.look-for-head {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(1.8rem, 2.5vw, 2.4rem);
	line-height: 1.1em;
	margin-bottom: .6em;
}
*/

.industries {
	display: flex;
	gap: 5px;
	justify-content: space-between;
	margin-bottom: var(--bgPadding);
}

	.industry-col { 
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		}

		.industry-item { 
			color: var(--brand-off-white);
			background: var(--brand-off-black);
			display: flex;
			align-items: center;
			gap: 20px;
			padding: 20px; 
			font-family: "Gabarito", sans-serif;
			font-weight: 400;
			font-size: 2.4rem;
			margin-bottom: 5px;
			height: 25%;
		}
			
			.industry-item img { width: 26px; }
			.industry-item:last-of-type { margin-bottom: 0; }
		
		.industry-considerations {
			width: 50%;
			background: var(--brand-off-black);
			color: var(--brand-off-white);
			padding: 40px;
		}

.portfolio-home {
	margin-bottom: var(--bgPadding);
	padding-bottom: var(--bgPadding);
	border-bottom: 1px solid var(--brand-mid-grey);
}

	.portfolio-home-box {
		max-width: 1060px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		gap: 40px;
	}

	.portfolio-home-head { width: 55%; }
	.portfolio-home-logos { width: 40%; }
	
	.portfolio-home-logo {
		width: 100%;
		height: 160px;
		border: 1px solid var(--brand-mid-grey);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15px;
	}
	
		.portfolio-home-logo img { width: 55%; }

.contact {
	background: url(../img/battalion-logo-watermark.svg) no-repeat;
	background-position: 0 100%;
	background-size: contain;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--brand-off-black);
	padding-bottom: var(--bgPadding);
}

	.contact h2 { text-align: center; margin-bottom: 1em;}
	
	.contacts {
		width: 70%;
		display: flex;
		margin: 0 auto;
		justify-content: center;
		align-items: flex-start;
		gap: 15%;
	}
	
	.contact-name { font-family: "Gabarito", sans-serif; }
	
	.contact-label { font-size: clamp(1.8rem, 2.5vw, 2.4rem); margin-bottom: 1em; text-align: center;  }
	.contact-info { font-family: "Gabarito", sans-serif; font-weight: 500; text-align: center; text-transform: uppercase;  font-size: clamp(1.6rem, 2.5vw, 1.9rem); line-height: 1.4em; color: var(--brand-dark-blue)}
	
	.contact-info a { color: var(--bgPadding); text-decoration: none; overflow-wrap: break-word; }
	.contact-info a:hover { text-decoration: underline; }

	.linked-in-wrap {
		display: flex;
		justify-content: center;
	}
	
	.linked-in {
		display: inline-block;
		border: 1px solid var(--brand-dark-blue);
		color: var(--brand-dark-blue);
		padding: 12px 50px 12px 16px;
		background: #fff url(../img/linked-in.svg) no-repeat;
		background-size: 30px;
		background-position: calc(100% - 5px) 50%;
		font-size: 1.5rem;
		text-decoration: none;
		margin-top: var(--bgPadding);
	 }
	 
	 .linked-in:hover { text-decoration: underline; }

/* portfolio page */

.portfolio-head {
	padding-top: 120px;
	margin-bottom: 40px;
}

	.portfolio-head a {
		font-family: "Gabarito", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--brand-dark-blue);
		font-size: 1.5rem;
		margin-bottom: 1em;
		display: block;
	}

.portfolio-wrap {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid var(--brand-off-black);
		padding-bottom: var(--bgPadding);
		margin-bottom: 20px;
	}
	
	.portfolio-item { width: 48%; }
	.portfolio-image img { width: 100%; }
	
	.portfolio-logo { width: 45%; margin: -50px 0 40px 20px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--brand-mid-grey); height: 8vw; max-height: 140px; display: flex; align-items: center; justify-content: center; }
	.portfolio-logo img { width: 65%; }
	
	.portfolio-industry { color: var(--brand-dark-blue); font-size: 1.5rem; margin-bottom: 1em; }
		.portfolio-industry span { color: var(--brand-off-black); font-weight: 700;}
	

footer {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto var(--bgPadding) auto;
	display: flex;
	justify-content: space-between;
	font-size: 1.2rem;
}

footer img { height: 40px; }

.cta {
	display: inline-block;
	color: #fff;
	background: var(--brand-dark-blue);
	padding: 16px;
	font-size: 1.5rem;
	text-decoration: none;
}

	.cta:hover { text-decoration: underline; }
	
	h2 + .cta { margin-top: 30px; }

h1 {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(4rem, 4.5vw, 6rem);
	line-height: 1.1em;
	margin-bottom: .8em;
}

	h1 span { color: var(--brand-dark-blue); font-weight: 700;}

h2 {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(3rem, 4.5vw, 4.7rem);
	line-height: 1.1em;
}

	h2 span { color: var(--brand-dark-blue); font-weight: 700;}
	.eyebrow + h2 { margin-bottom: .2em; }

h3 {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 2.4rem);
	line-height: 1.2em;
	margin-bottom: 1em;
}

		h3 span { color: var(--brand-dark-blue); font-weight: 700;}

h4 {
	font-family: "Gabarito", sans-serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	line-height: 1.1em;
	margin-bottom: .6em;
}


p { font-size: 1.5rem; line-height: 1.5em; margin-bottom: 1em; }

p + p { margin-bottom: 0;}

p + h4 { margin-top: 1em; }

ul { list-style: disc; margin-left: 2em; }
li { font-size: clamp(1.4rem, 1.5vw, 1.8rem); line-height: 1.5em; margin-bottom: 1em;}
	li:last-of-type { margin-bottom: 0; }

.hideMe { display: none; }
.hide-desktop { display: none; }

p a { color: var(--brand-dark-blue); }

@media (max-width: 1440px) {
	.top-nav { width: 100%; }
	.nav-links { margin-right: 25px; }
}

@media (max-width: 1100px) {
	.nav-links { gap: 15px; }
	.nav-link { font-size: 1.3rem; }
	.contacts { width: 100%; flex-direction: column; gap: 30px; align-items: center; }
		.contact-label { margin-bottom: .5em;}
	
}

@media (max-width: 1000px) {
	.industries { flex-wrap: wrap; }
	.industry-col { width: calc(50% - 4px); }
	.industry-considerations { width: 100%; }
}

@media (max-width: 900px) {
	.top-navBG { height: 40px;}
	.top-nav { align-items: center; }
	.top-nav img { height: 40px;}
	.nav-links { display: none; }
	.portfolio-head { padding-top: 70px;}
}

@media (max-width: 750px) {
	:root {
		--bgPadding: 40px;
	}

	
	.hero-box { flex-direction: column; width: 100%;margin-bottom: 40px; }
	.hero-head { width: 100%; padding: 30px 25px 40px 25px; margin: 60px 0 0 0; background-size: 50%;}
		.hero-head p { width: 100%; }
	.hero-images { width: 100%; background-image: url(../img/hero-mobile.jpg); aspect-ratio: 700 /490; background-size: 100%; background-position: 0 0; }
	
	.collab { flex-direction: column-reverse; }
	.collab-image, .collab-reverse .collab-image { aspect-ratio: 3 / 1; width: 100%; background-position: 50%; }
	.collab-text, .collab-reverse .collab-text { width: 90%; margin: 0 auto;  }
	
	.team-wrap { flex-direction: column;margin-bottom: 20px;}
		.team-head, .team-info { width: 100%; }
		.team-head { margin-bottom: 40px; }
		
	.principles-row { flex-direction: column; gap: 30px; }
	.principles-image { display: none; }
	.principle-box, .principle-boxes { width: 100%; }
	.principle-boxes .principle-box { margin-bottom: 30px; padding: 20px;  }
	.principle-box { padding: 20px; }
	.pb-extraMargin { margin-bottom: 0;}
	
	.operate-box { flex-direction: column; align-items: flex-start; }
		.operate-head, .operate-info, .operate-table { width: 100%; }
		.operate-image { display: none; }
		
	.look-for { flex-direction: column; gap: 0; }
	.look-for-image { aspect-ratio: 3 / 1; background-position: 50%; }
	.look-for-text { padding: 30px; }
	
	.portfolio-wrap { flex-direction: column; gap: 40px; }
		.portfolio-item { width: 100%; }
		.portfolio-logo { height: 80px; margin: -50px auto 40px auto;}
		.portfolio-text { width: 85%; margin: 0 auto; }

}

@media (max-width: 600px) {

	.hero-images { width: 90%; margin: 0 auto; }
	.operatorsBG { width: 90%; margin: 0 auto 40px auto; }
	.operators { flex-direction: column; gap: 24px; width: 80%;  }
		.operators-head, .operators-text { width: 100%; }
		
	.headshots { flex-direction: column; gap: 40px; }
	.headshot { width: 100%; max-width: 380px; margin: 0 auto; }
	
	.industries { flex-direction: column; }
	.industry-col, .industry-considerations { width: 100%; }
	.industry-item { font-size: 1.9rem; padding-block: 10px; }
	.industry-considerations { padding: 20px; }
	
	.portfolio-home-box { flex-direction: column; }
		.portfolio-home-head { width: 100%; }
		.portfolio-home-logos { width: 100%; display: flex;  gap: 10px; margin-bottom: 30px; }
			.portfolio-home-logo img { width: 75%; }
	
	footer { flex-direction: column; align-items: center; gap: 20px; }
	
	.hide-mobile { display: none; }
	.hide-desktop { display: inline-block; }
}

@media (max-width: 400px) {
	.hero-head { background-size: 90%;}
  	.hero-images { aspect-ratio: 1 / 1; }
}