/* .ABOUT-PFA */

.ABOUT-PFA {
	overflow: hidden;
}

.ABOUT-PFA .deco-1 {
	position: absolute;
	top: calc(var(--page-head-height) * -1);
	right: 100%;
	width: 368rem;
	height: 450rem;
	background: url(images/deco-pfa.svg) no-repeat center / 100%;
}

.ABOUT-PFA .deco-2 {
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 1080rem;
	height: 559rem;
	background: url(images/deco-pfa-2.svg) no-repeat center / 100%;
	transform: translate(-100rem, 0);
}

.ABOUT-PFA .content {
	max-width: 960rem;
	margin: 0 auto;
	text-align: center;
}

.ABOUT-PFA .content img {
	margin: 0 auto;
}

.ABOUT-PFA .content video {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.ABOUT-PFA .content p {
	max-width: 760rem;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 961px) {
	.ABOUT-PFA .content h3 {margin: 100rem 0 60rem;}
}

@media screen and (max-width: 960px) {
	.ABOUT-PFA .deco-1 {display: none; right: 0; transform: translate(140px, -235px) scale(0.5);}
	.ABOUT-PFA .deco-2 {display: none;}
	.ABOUT-PFA .content {min-height: 0;}
}



/* ABOUT-INTRO */

.ABOUT-INTRO {
	background: var(--light-purple);
}

.ABOUT-INTRO .image {
	margin-right: 60rem;
}

.ABOUT-INTRO .content > ul {
	list-style: none;
	padding: 0;
	margin-top: 40rem;
}

.ABOUT-INTRO .content > ul > li {
	position: relative;
	padding: 0 0 0 40rem;
	margin: 20rem 0;
}

.ABOUT-INTRO .content > ul > li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 21rem;
	height: 24rem;
	background: url(images/ui-list.svg) no-repeat center / 100%;
}

@media screen and (min-width: 961px) {
	.ABOUT-INTRO .content h2 + p {font-size: 32rem; font-weight: 300; line-height: 1.25;}
}

@media screen and (max-width: 960px) {
	.ABOUT-INTRO .image {margin-right: 0; margin-bottom: 20rem;}
	.ABOUT-INTRO .content > ul {margin-top: 20rem;}
	.ABOUT-INTRO .content > ul > li {padding: 0 0 0 30rem;}
	.ABOUT-INTRO .content > ul > li::before {transform: scale(0.75); }
}



/* .ABOUT-STORY */

.ABOUT-STORY {
	overflow: hidden;
}

.ABOUT-STORY .deco {
	position: absolute;
	top: 0;
	right: 100%;
	width: 368rem;
	height: 450rem;
	background: url(images/deco-story.svg) no-repeat center / 100%;
}

.ABOUT-STORY .image {
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 1080rem;
	height: 559rem;
	background: url(images/story-image.webp) no-repeat center / 100%;
	transform: translate(-400rem, 0);
}

.ABOUT-STORY .b-heading {
	max-width: 760rem;
}

.ABOUT-STORY .content {
	max-width: 760rem;
}

@media screen and (max-width: 960px) {
	.ABOUT-STORY .b-frame {padding-bottom: 250rem;}
	.ABOUT-STORY .deco {display: none;}
	.ABOUT-STORY .image {transform: translate(-540rem, 170rem) scale(0.6);}
}



/* ABOUT-PEOPLE */

.ABOUT-PEOPLE {
	background: var(--light-purple);
}

.ABOUT-PEOPLE .group {
	margin-top: 60rem;
}

.ABOUT-PEOPLE .group .heading {
	margin-bottom: 40rem;
}

.ABOUT-PEOPLE .person {
	position: relative;
	overflow: hidden;
}

.ABOUT-PEOPLE .person .hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(30,18,50,0.9);
	color: var(--white);
	padding: 20rem;
	box-sizing: border-box;
	transform: translate(0, 350rem);
	transition: transform 0.25s;
}

.ABOUT-PEOPLE .name {
	font-size: 24rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ABOUT-PEOPLE .role {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ABOUT-PEOPLE .bio {
	margin-top: 20rem;
	font-size: 16rem;
}

.ABOUT-PEOPLE .person:hover .hover {
	transform: translate(0, 0);
}

@media screen and (max-width: 960px) {
	.ABOUT-PEOPLE .group {margin-top: 40rem;}
	.ABOUT-PEOPLE .group .heading {margin-bottom: 20rem;}
	.ABOUT-PEOPLE .name {font-size: 20rem;}
	.ABOUT-PEOPLE .person .hover {padding: 10rem;}
}



/* ABOUT-CTA */

.ABOUT-CTA {
	overflow: hidden;
	background: var(--black);
	color: var(--white);
}

.ABOUT-CTA .deco {
	position: absolute;
	top: 0;
	right: 100%;
	width: 368rem;
	height: 328rem;
	background: url(images/deco-cta.svg) no-repeat center / 100%;
	transform: translate(-60rem, 0);
}

.ABOUT-CTA .image {
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 1072rem;
	height: 555rem;
	background: url(images/cta-image.webp) no-repeat center / 100%;
	transform: translate(-400rem, 120rem);
}

.ABOUT-CTA .content {
	max-width: 760rem;
}

.ABOUT-CTA p {
	margin: 1em 0;
}

.ABOUT-CTA .b-button + .b-button {
	margin-left: 20rem;
}

@media screen and (max-width: 960px) {
	.ABOUT-CTA .b-frame {padding-bottom: 250rem;}
	.ABOUT-CTA .deco {display: none;}
	.ABOUT-CTA .image {transform: translate(-540rem, 170rem) scale(0.6);}
	.ABOUT-CTA .b-button + .b-button {margin-left: 0; margin-top: 20rem;}
}