/*--- Brand ---*/

.brand .hero {
	background-image: url('../images/brand/brand-hero-1.jpg');
	background-position: top center;
}
.brand .hero .note {
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	position: absolute;
	bottom: 40px;
	right: 60px;
}

@media (orientation: portrait) {
	.brand .hero {
		background-size: 200%;
		background-position: 80% top;
	}
}

@media (max-width: 600px) {
	.brand .hero .note {
		font-size: 10px;
		bottom: 20px;
		right: 0;
		text-align: center;
		width: 100%;
	}
}

.brand .manifesto .container {
	background-color: transparent;
}
.brand .manifesto .copy {
	padding: 0 7%;
}
.brand .manifesto .copy h3 {
	color: #fff;
	font-weight: 500;
	opacity: 0.4;
	transition: opacity 0.3s var(--ease-out);
}
.brand .manifesto .copy h3.current {
	opacity: 1;
}

@media (max-width: 600px) {
	.brand .manifesto .copy {
		text-align: left;
	}
	.brand .manifesto .copy h3 {
		font-size: 24px;
	}
}


.brand .our-locations {
	background-color: #fff;
}
.brand .our-locations .container {
	padding-top: 12vh;
}
.brand .our-locations .section-header {
	width: 100%;
}
.brand .our-locations .map-images {
	width: 100%;
	height: 80vh;
	position: relative;
} 
.brand .our-locations .map-images .image {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out);
}
.brand .our-locations .map-images .image[class*="location"] {
	transform: scale(1);
}
.brand .our-locations .map-images .image.hidden {
	opacity: 0;
	transform: scale(1.02);
}
.brand .our-locations .map-images .image.base {
	background-image: url('../images/brand/map-base.png');
	z-index: 1;
}
.brand .our-locations .map-images .image.location-1 {
	background-image: url('../images/brand/map-location-1.png');
	z-index: 2;
}
.brand .our-locations .map-images .image.location-2 {
	background-image: url('../images/brand/map-location-2.png');
	z-index: 3;
}
.brand .our-locations .map-images .image.location-3 {
	background-image: url('../images/brand/map-location-3.png');
	z-index: 4;
}
.brand .our-locations .map-images .image.location-4 {
	background-image: url('../images/brand/map-location-4.png');
	z-index: 5;
}
.brand .our-locations .map-images .image.location-5 {
	background-image: url('../images/brand/map-location-5.png');
	z-index: 6;
}

@media (orientation: portrait) {
	.brand .our-locations .container {
		align-items: flex-start;
		overflow: hidden;
		padding-top: calc(var(--header-main) + var(--header-sub));
		white-space: nowrap;
	}
	.brand .our-locations h3 {
		width: 100%;
	}
	.brand .our-locations .map-images {
		width: calc(80vh * 1.875);
	}
}

.brand .philosophy {
	background-color: #f2f2f2;
	padding: 60px 0;
	
	--line-gap: 60px; 
	--purpose-gap: 25%;
	--mission-gap: 40%;
	--vision-gap: 55%;
}
.brand .philosophy-item {
	opacity: 0;
	padding: 30px 0;
	position: relative;
	transition: opacity 0.6s var(--ease-out), padding-left 1.2s var(--ease-out);
}
.brand .philosophy-item::before {
	background-color: #dcdcdc;
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	top: 55px;
	left: 0;
	transition: width 1.2s var(--ease-out);
}
.brand .philosophy-item p {
	color: var(--gray);
	margin-top: 8px;
}

.brand .philosophy-item.animated {
	opacity: 1;
}

.brand .our-purpose {
	padding-left: calc(var(--purpose-gap) - 10%);
}
.brand .our-purpose.animated {
	padding-left: var(--purpose-gap);
}
.brand .our-purpose.animated::before {
	width: calc(var(--purpose-gap) - var(--line-gap));
}
.brand .our-mission {
	padding-left: calc(var(--mission-gap) - 10%);
}
.brand .our-mission.animated {
	padding-left: var(--mission-gap);
}
.brand .our-mission.animated::before {
	width: calc(var(--mission-gap) - var(--line-gap));
}
.brand .our-vision {
	padding-left: calc(var(--vision-gap) - 10%);
}
.brand .our-vision.animated {
	padding-left: var(--vision-gap);
}
.brand .our-vision.animated::before {
	width: calc(var(--vision-gap) - var(--line-gap));
}

@media (max-width: 600px) {
	.brand .philosophy {
		padding: 40px 0;
		
		--line-gap: 20px; 
		--purpose-gap: 10%;
		--mission-gap: 20%;
		--vision-gap: 30%;
	}
	.brand .philosophy-item {
		padding: 15px 0;
	}
	.brand .philosophy-item::before {
		top: 30px;
	}
	.brand .philosophy-item p {
		width: 60vw;
	}
}

.brand .our-values .container {
	padding: 12vh 0;
	min-height: 0;
}
.brand .our-values .values {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 30px;
}
.brand .our-values .value-item {
	width: 33%;
	overflow: hidden;
	padding: 30px;
	position: relative;
}
.brand .our-values .value-item::after {
	background-color: #dcdcdc;
	content: '';
	width: 1px;
	height: 60%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate3d(0,-50%,0);
}
.brand .our-values .value-item .number {
	color: #bcbcbc;
	font-style: italic;
	font-weight: 500;
}
.brand .our-values .value-item h4 {
	color: var(--purple);
	margin: 20px 0;
}
.brand .our-values .value-item p {
	font-weight: 500;
}

@media (min-width: 600px) {
	.brand .our-values .value-item:nth-child(3)::after,
	.brand .our-values .value-item:nth-child(5)::after {
		display: none;
	}
}

@media (max-width: 600px) {
	.brand .our-values .values {
		flex-direction: column;
		width: 100%;
		padding: 0 10%;
		margin-top: 0;
	}
	.brand .our-values .value-item {
		width: 100%;
		padding: 30px 0;
	}
	.brand .our-values .value-item::after {
		width: 100%;
		height: 1px;
		top: auto;
		bottom: 0;
	}
	.brand .our-values .value-item:nth-child(odd) {
		text-align: left;
	}
	.brand .our-values .value-item:nth-child(even) {
		text-align: right;
	}
	.brand .our-values .value-item h4 {
		margin-top: 0;
	}
	.brand .our-values .value-item .number {
		color: rgba(188,188,188,0.25);
		font-size: 120px;
		padding-right: 10px;
		position: absolute;
		top: 50%;
		transform: translate3d(0,-50%,0);
	}
	.brand .our-values .value-item .number span {
		display: none;
	}
	.brand .our-values .value-item:nth-child(odd) .number {
		right: 0;
	}
	.brand .our-values .value-item:nth-child(even) .number {
		left: 0;
	}
	.brand .our-values .value-item:last-child::after {
		display: none;
	}
}