:root {
	--cornflour-blue: 		#5F97E1;
	--ebony-clay: 			#1F2940;
	--halloween-orange: 	#E0672B;
	--blue-depths: 			#2A3A62;

	--bs-body-color: 		#1F2940;
	--bs-body-font-weight: 	300;
	--bs-heading-color: 	var(--blue-depths);
  --bs-body-font-size: 1.1rem;
}

/* Utilities */
.max-w-200 {
	max-width: 200px;
	width: 100%;
}

.max-w-300 {
	max-width: 300px;
	width: 100%;
}

/* Colours */

.bg-brand-blue-dark {
	background-color: var(--ebony-clay);
}

.bg-brand-blue-light {
	background-color: var(--cornflour-blue);
}

.bg-brand-orange {
	background-color: var(--halloween-orange);
}

/* Typography */

.ff-bitter {
	font-family: 'Bitter';
}

.fs-7 {
	font-size: 0.875rem;
}

b, strong {
	font-weight: 500;
}

.content-block.text h1 {
  font-size: 1.75rem ;
  font-weight: 400;
}

.content-block.text h2 {
  font-size: 1.5rem ;
  font-weight: 400;
}

.content-block.text h3 {
  font-size: 1.35rem ;
  font-weight: 400;
}

.content-block.text h4 {
  font-size: 1.25rem ;
  font-weight: 400;
}

.content-block.text h5 {
  font-size: 1.15rem ;
  font-weight: 400;
}

.content-block.text h6 {
  font-size: 1rem ;
  font-weight: 400;
}

.text-balanced {
  text-wrap: balance;
}

.cursor-pointer {
  cursor: pointer;
}

/* Elements */

.navbar + .content-block {
  padding-top: 85px !important;
}

.dot-row {
  width: 195px;         
  height: 3px;         
  background-image: repeating-linear-gradient(
    to right,
    var(--blue-depths) 0px,
    var(--blue-depths) 3px,
    transparent 3px,
    transparent 6px
  );
  background-repeat: no-repeat;
  margin-bottom: 15px;
}

[data-bg-color="#5F97E1"] .dot-row {
	background-image: repeating-linear-gradient(
    to right,
    #C9D8ED 0px,
    #C9D8ED 3px,
    transparent 3px,
    transparent 6px
  );
}

.bg-fade .dot-row {        
  background-image: repeating-linear-gradient(
    to right,
    #ffffff 0px,
    #ffffff 3px,
    transparent 3px,
    transparent 6px
  );
}

.bio-photo {
  width: 50%; 
  padding-top: 50%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;      
}

.bio-col,
.stats-content p {
  height: 100%;
  position: relative;
}

.bio-col::before,
.stats-content p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    #C9D8ED 0px,
    #C9D8ED 3px,
    transparent 3px,
    transparent 6px
  );
}

.text-image-row-image {
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.text-image-row-image.object-cover {
  aspect-ratio: 1 / 1;
  height: auto !important;
  background-size: cover;
}

@media (min-width: 768px) {
  .text-image-row-image.object-cover {
    height: 100% !important;
  }
}

.overlap-row {
  margin-top: -50px;
  position: relative;
  z-index: 2;
}

.text-image-col  {
  padding-bottom: 50px !important;
}

@media (min-width: 768px) {
  .overlap-row {
    margin-top: -100px;
  }

  .text-image-col  {
    padding-bottom: 100px !important;
  }
}

.col-content {
  background: white;
}

.banner-image {
  position: relative;
  height: 500px;
  background-size: cover;
  background-position: center;
}

.bg-fade {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.013' x2='.526' y1='1' y2='.419' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23577949'/%3E%3Cstop offset='1' stop-color='%232a3a62'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h960v960H0z' data-name='Rectangle 31'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}

.stats-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
}

.stats-content > * {
  flex: 1 1 calc(50% - 10px);
}

.stats-content strong {
  font-size: 54px;
  font-weight: 300;
  display: block;
  line-height: 1;
}

.bg-fade .stats-content {
  color: #C9D8ED;
}

.stats-content p {
  padding: 10px 0 10px 20px;
}

.stats-content img {
  width: 75%;
  height: auto;
}

.stats-content figure {
  margin:0;
  display: flex;
  align-items: center;
}