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-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);
}

.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;
	max-width: 1280px;
	margin: 0 auto 20px auto;
}

.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: 0 auto;
	width: 100%;
	max-width: 1280px;
	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 {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 3.5%;
	align-items: flex-start; /* add this */
}

	.headshot {
		width: 31%;
		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 img { width: 100%; margin-bottom: 20px; }
	.headshot-info { padding-bottom: 10px; border-bottom: 1px solid var(--brand-dark-blue); display: flex; align-items: flex-end; justify-content: space-between; }
	.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-name {
		font-family: "Gabarito", sans-serif;
		font-weight: 400;
		font-size: clamp(2rem, 2.5vw, 3rem);
		line-height: 1.1em;
		margin-bottom: 10px;
	}
	.headshot-expand { font-weight: 500; color: var(--brand-off-black); font-size: 3rem; position: relative; top: 7px;}

	.headshot-detail { background-size: contain; background-repeat: no-repeat; }

	.headshot-detail.headshot-hidden {
		position: absolute; /* Hide it out of flow */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.headshot-detail.headshot-visible {
		position: relative; /* Make detail in flow and visible */
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	
		.headshot-detail .headshot-info { border: none; }
		.headshot-detail .contact-info { text-align: left; }
	
	button.headshot .headshot-detail.headshot-visible ~ .headshot-image {
		display: none;
	}

	/* for crossfade */
	.headshot-detail,
	.headshot-info {
	  transition: opacity 0.35s, visibility .35s;
	  opacity: 1;
	  visibility: visible;
	  width: 100%;
	}
	
	/* Hidden state */
	.headshot-hidden {
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	  height: 0;
	}
	
	/* Visible state */
	.headshot-visible {
	  opacity: 1;
	  visibility: visible;
	  pointer-events: auto;
	  height: auto;
	}
	
.principlesBG {
	background: var(--brand-off-black);
	padding: var(--bgPadding) 0;
	width: 100%;
	margin: 0 auto;
	color: var(--brand-off-white) !important;
}	

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

	.principles-head * { color: var(--brand-off-white); }
	
	.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: 0 auto 20px auto;
	width: 90%;
	max-width: 1280px;
	padding: var(--bgPadding) 0 0 0;
}

	.operate-box, .operate-table-box {
		display: flex;
		align-items: flex-end;
		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: 1em; }
		.operate-item { display: flex; gap: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--brand-dark-blue); align-items: flex-end; margin-bottom: 40px; }
			.operate-item:last-of-type { margin-bottom: 0; }
		.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;
}

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

	.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; }

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; }
	
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; }

@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; }
}

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

@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; }

}

@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; }
	
	.contacts { width: 100%; flex-direction: column; gap: 30px; align-items: center; }
		.contact-label { margin-bottom: .5em;}
	
	footer { flex-direction: column; align-items: center; gap: 20px; }
}

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