/* ==================================================
   ABOUT: page shell and Gutenberg containers
   ================================================== */
.about-page {
	--about-content-max: var(--layout-content-wide);
	--about-gutter: var(--layout-gutter-tablet);
	color: var(--brand-ink);
}

.about-page > :not(.about-section) {
	width: min(calc(100% - var(--about-gutter) - var(--about-gutter)), var(--about-content-max));
	margin-inline: auto;
}

body.about-page-body .site-main {
	padding-top: 40px;
}

.about-section {
	padding: var(--layout-section-space-desktop) 0;
}

.about-section:first-child {
	margin-top: 0;
}

.about-section--vision,
.about-section--profile {
	background: #f1f1f1;
}

.about-container {
	width: min(calc(100% - var(--about-gutter) - var(--about-gutter)), var(--about-content-max));
	margin-inline: auto;
}

.about-section > :not(.about-container) {
	width: min(calc(100% - var(--about-gutter) - var(--about-gutter)), var(--about-content-max));
	margin-inline: auto;
}

/* Gutenberg's outer Group block adds this wrapper automatically. */
.about-section > .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* ABOUT: section labels and editorial copy */
.about-section h2 {
	position: relative;
	z-index: 0;
	display: inline-block;
	margin: 0 0 28px;
	padding: 0 8px 0 calc(8px + .16em);
	background: none;
	color: #fff;
	font-family: "Bebas Neue", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

.about-section h2::before {
	position: absolute;
	inset: .15em 0 .25em;
	z-index: -1;
	background: var(--brand-purple);
	content: '';
}

.about-section h3 {
	display: block;
	margin: 0;
	font-size: 2.75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
}

.about-section--mission h3,
.about-section--vision h3 {
	display: table;
	padding-bottom: 0;
	text-decoration-line: underline;
	text-decoration-color: rgba(170, 62, 150, .45);
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: none;
	text-underline-offset: .35em;
}

.about-section .about-en-copy {
	margin: 22px 0 0;
	color: var(--brand-purple);
	font-family: "Share Tech Mono", monospace;
	font-size: .75rem;
	letter-spacing: .16em;
	line-height: 2.2;
}

.about-section p {
	margin: 28px 0 0;
	color: #666;
	font-size: 1rem;
	line-height: 2;
}

.about-section h3 + .about-en-copy {
	margin-top: 16px;
}

.about-section .about-en-copy + p {
	margin-top: 16px;
}

.about-section--mission > .about-container > p:first-of-type,
.about-section--vision > .about-container > p:first-of-type {
	margin-top: 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.8;
	color: var(--brand-ink);
}

.about-section--value h3 {
	font-size: 2rem;
	line-height: 1.6;
}

.about-section--value h3:not(:first-of-type) {
	margin-top: 60px;
}

/* ABOUT: company profile and map */
.about-section--profile .company-table {
	margin: 40px 0 48px;
}

.company-table table {
	width: 100%;
	margin: 0;
	border-bottom: 1px solid rgba(170, 62, 150, .35);
	border-collapse: collapse;
}

.company-table td {
	padding: 22px 0;
	border: 0;
	border-top: 1px solid rgba(170, 62, 150, .35);
	vertical-align: top;
	font-size: 1rem;
}

.company-table td:first-child {
	width: 120px;
	padding-right: 28px;
	color: var(--brand-purple);
	font-size: .75rem;
}

.about-section--profile .wp-block-embed {
	width: 100%;
	margin: 0;
}

.about-section--profile .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
	background: #999;
}

.about-section--profile .wp-block-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.about-section--profile .about-container iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 6;
	margin: 0;
	border: 0;
}

/* ==================================================
   ABOUT: responsive and motion overrides
   ================================================== */
@media (prefers-reduced-motion: no-preference) {
	.about-section h2.js-band-reveal--surface {
		--band-reveal-color: var(--brand-purple);
		--band-reveal-surface: var(--brand-purple);
		animation: none;
	}

	.about-section h2.js-band-reveal::after {
		top: .15em;
		bottom: .25em;
	}

	.about-section h2.js-band-reveal--surface::before {
		opacity: 0;
	}

	.about-section h2.js-band-reveal--surface.is-band-revealed::before {
		animation: bwk-about-label-surface 700ms cubic-bezier(.77, 0, .18, 1) forwards;
	}

	@keyframes bwk-about-label-surface {
		0%, 54% { opacity: 0; }
		55%, 100% { opacity: 1; }
	}
}

@media (max-width: 2559px) {
	.about-page { --about-content-max: var(--layout-content-standard); }
}

@media (max-width: 1024px) {
	body.about-page-body .site-main { padding-top: 0; }
	.about-section { padding: var(--layout-section-space-tablet) 0; }
	.about-container,
	.about-section > :not(.about-container) { width: calc(100% - 64px); }
	.about-section > .wp-block-group__inner-container { width: 100%; max-width: none; margin-inline: 0; }
	.about-section h2 { margin-bottom: 24px; font-size: 1.125rem; }
	.about-section h3 { font-size: 2rem; }
	.about-section--value h3 { font-size: 1.75rem; }
	.about-section p { font-size: 1rem; line-height: 1.9; }
	.company-table td:first-child { width: 108px; }
}

@media (max-width: 767px) {
	.about-page { --about-gutter: var(--layout-gutter-mobile); }
	.about-section { padding: var(--layout-section-space-mobile) 0; }
	.about-page > :not(.about-section),
	.about-container,
	.about-section > :not(.about-container) { width: calc(100% - 48px); }
	.about-section > .wp-block-group__inner-container { width: 100%; max-width: none; margin-inline: 0; }
	.about-section h2 { margin-bottom: 20px; font-size: 1rem; }
	.about-section h3,
	.about-section--mission > .about-container > p:first-of-type,
	.about-section--vision > .about-container > p:first-of-type { font-size: 1.4rem; line-height: 1.7; }
	.about-section--mission h3,
	.about-section--vision h3 { text-underline-offset: .28em; }
	.about-section .about-en-copy { font-size: .75rem; line-height: 2; }
	.about-section p { font-size: 1rem; line-height: 1.9; }
	.about-section--value h3 { font-size: 1.375rem; }
	.about-section--value h3:not(:first-of-type) { margin-top: 60px; }
	.company-table { overflow-x: auto; }
	.company-table table { table-layout: fixed; }
	.company-table td { padding: 18px 0; font-size: .875rem; overflow-wrap: anywhere; }
	.company-table td:first-child { width: 86px; padding-right: 18px; }
	.about-section--profile .about-container iframe { aspect-ratio: 16 / 9; }
}