/*
 * Depthcubing — About page
 * Blue editorial direction, designed to harmonise with the existing logo.
 */

.dc-about-page {
	--dc-about-navy: #061d2b;
	--dc-about-navy-soft: #0a2c3e;
	--dc-about-blue: #0b7fc4;
	--dc-about-cyan: #43b7ca;
	--dc-about-gold: #e3c374;
	--dc-about-paper: #f4f8f7;
	--dc-about-white: #fff;
	--dc-about-ink: #102431;
	--dc-about-muted: #5b6c74;
	--dc-about-line: rgba(16, 55, 72, .16);
	--dc-about-display: "Fraunces", Georgia, serif;
	--dc-about-body: "Manrope", sans-serif;
	background: var(--dc-about-paper);
	color: var(--dc-about-ink);
	font-family: var(--dc-about-body);
	overflow: hidden;
}

body.page-id-68 {
	background: var(--dc-about-paper, #f4f8f7);
}

body.page-id-68 .site-content {
	background: #f4f8f7;
	margin: 0;
	padding: 0 !important;
}

body.page-id-68 .site-content > .ast-container {
	display: block;
	margin: 0;
	max-width: none;
	padding: 0 !important;
}

body.page-id-68 #primary.dc-about-page {
	float: none;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

body.page-id-68 .ast-primary-header-bar {
	border-bottom: 1px solid rgba(20, 65, 83, .13);
	box-shadow: none;
}

body.page-id-68 .site-footer {
	background: var(--dc-about-navy);
}

.dc-about-page *,
.dc-about-page *::before,
.dc-about-page *::after {
	box-sizing: border-box;
}

.dc-about-page h1,
.dc-about-page h2,
.dc-about-page h3,
.dc-about-page p,
.dc-about-page blockquote {
	margin-top: 0;
}

.dc-about-shell {
	margin: 0 auto;
	max-width: 1220px;
	padding-left: 40px;
	padding-right: 40px;
	width: 100%;
}

.dc-about-kicker {
	align-items: center;
	color: var(--dc-about-cyan);
	display: flex;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.dc-about-kicker::before {
	background: var(--dc-about-gold);
	content: "";
	height: 2px;
	margin-right: 16px;
	width: 45px;
}

.dc-about-hero {
	background:
		radial-gradient(circle at 78% 26%, rgba(33, 153, 184, .22), transparent 26%),
		linear-gradient(135deg, #051a27 0%, #082c3e 68%, #0b3b50 100%);
	color: var(--dc-about-white);
	min-height: 690px;
	position: relative;
}

.dc-about-hero::after {
	background: linear-gradient(90deg, transparent, rgba(67, 183, 202, .35), transparent);
	bottom: 0;
	content: "";
	height: 1px;
	left: 10%;
	position: absolute;
	width: 80%;
}

.dc-about-hero__grid {
	align-items: center;
	display: grid;
	gap: 48px;
	grid-template-columns: 1.08fr .92fr;
	min-height: 690px;
	padding-bottom: 78px;
	padding-top: 78px;
}

.dc-about-hero__copy {
	max-width: 670px;
	position: relative;
	z-index: 2;
}

.dc-about-language {
	align-items: center;
	display: inline-flex;
	gap: 9px;
	margin-bottom: 40px;
}

.dc-about-language a {
	color: rgba(255, 255, 255, .52);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
	padding: 7px 2px;
	text-decoration: none;
}

.dc-about-language a.is-active {
	border-bottom: 2px solid var(--dc-about-gold);
	color: var(--dc-about-white);
}

.dc-about-language a:hover,
.dc-about-language a:focus {
	color: var(--dc-about-gold);
}

.dc-about-language span {
	color: rgba(255, 255, 255, .3);
	font-size: 11px;
}

.dc-about-hero h1 {
	color: var(--dc-about-white);
	font-family: var(--dc-about-display);
	font-size: clamp(54px, 6.1vw, 88px);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: .98;
	margin-bottom: 34px;
}

.dc-about-hero h1 em {
	color: #a7e3e9;
	font-weight: 400;
}

.dc-about-hero__intro {
	color: rgba(255, 255, 255, .78);
	font-size: 18px;
	line-height: 1.8;
	margin-bottom: 36px;
	max-width: 630px;
}

.dc-about-hero__intro strong {
	color: var(--dc-about-white);
}

.dc-about-link {
	align-items: center;
	border-bottom: 1px solid rgba(227, 195, 116, .55);
	color: var(--dc-about-white);
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .11em;
	padding-bottom: 8px;
	text-decoration: none;
	text-transform: uppercase;
}

.dc-about-link:hover,
.dc-about-link:focus {
	color: var(--dc-about-gold);
}

.dc-about-link span {
	color: var(--dc-about-gold);
	font-size: 20px;
	margin-left: 12px;
}

.dc-about-hero__visual {
	aspect-ratio: 1;
	margin-left: auto;
	max-width: 490px;
	position: relative;
	width: 100%;
}

.dc-about-cube {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

.dc-about-orbit {
	border: 1px solid rgba(150, 226, 235, .28);
	border-radius: 50%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.dc-about-orbit--one {
	height: 82%;
	width: 82%;
}

.dc-about-orbit--two {
	border-color: rgba(227, 195, 116, .24);
	height: 103%;
	transform: translate(-50%, -50%) rotate(26deg) scaleY(.44);
	width: 103%;
}

.dc-about-visual__word {
	color: rgba(255, 255, 255, .74);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	position: absolute;
	text-transform: uppercase;
	z-index: 3;
}

.dc-about-visual__word--one {
	left: -2%;
	top: 26%;
}

.dc-about-visual__word--two {
	right: -2%;
	top: 35%;
}

.dc-about-visual__word--three {
	bottom: 12%;
	left: 48%;
}

.dc-about-since {
	background: var(--dc-about-gold);
	bottom: 3%;
	color: var(--dc-about-navy);
	display: grid;
	height: 84px;
	place-content: center;
	position: absolute;
	right: 3%;
	text-align: center;
	width: 84px;
	z-index: 4;
}

.dc-about-since span {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dc-about-since strong {
	font-family: var(--dc-about-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.1;
}

.dc-about-origin {
	background: var(--dc-about-paper);
	padding: 125px 0;
}

.dc-about-origin__grid {
	display: grid;
	gap: 65px;
	grid-template-columns: 160px minmax(0, 830px);
	justify-content: center;
}

.dc-about-section-label {
	align-items: center;
	align-self: start;
	display: flex;
	gap: 14px;
}

.dc-about-section-label span {
	color: var(--dc-about-blue);
	font-family: var(--dc-about-display);
	font-size: 44px;
	line-height: 1;
}

.dc-about-section-label p {
	color: var(--dc-about-muted);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	margin-bottom: 0;
	text-transform: uppercase;
}

.dc-about-origin h2,
.dc-about-geometry h2,
.dc-about-work h2,
.dc-about-bio h2,
.dc-about-cta h2,
.dc-about-mirror h2 {
	color: var(--dc-about-ink);
	font-family: var(--dc-about-display);
	font-size: clamp(42px, 4.5vw, 66px);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.06;
	margin-bottom: 42px;
}

.dc-about-prose {
	columns: 2;
	column-gap: 48px;
}

.dc-about-prose p {
	break-inside: avoid;
	color: var(--dc-about-muted);
	font-size: 16px;
	line-height: 1.9;
	margin-bottom: 0;
}

.dc-about-origin blockquote {
	border: 0;
	color: var(--dc-about-blue);
	font-family: var(--dc-about-display);
	font-size: clamp(24px, 2.4vw, 34px);
	font-style: italic;
	line-height: 1.35;
	margin: 52px 0 0;
	padding: 30px 0 0;
	position: relative;
}

.dc-about-origin blockquote::before {
	background: var(--dc-about-gold);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 75px;
}

.dc-about-mirror {
	background: var(--dc-about-navy);
	color: var(--dc-about-white);
	padding: 115px 0;
	position: relative;
}

.dc-about-mirror__grid {
	align-items: center;
	display: grid;
	gap: 90px;
	grid-template-columns: .8fr 1.2fr;
}

.dc-about-mirror__art {
	aspect-ratio: 1;
	background:
		linear-gradient(90deg, transparent 49.8%, rgba(227, 195, 116, .34) 50%, transparent 50.2%),
		radial-gradient(circle, rgba(67, 183, 202, .18), transparent 67%);
	border: 1px solid rgba(67, 183, 202, .3);
	border-radius: 50%;
	max-width: 420px;
	position: relative;
	width: 100%;
}

.dc-about-mirror__art::before,
.dc-about-mirror__art::after {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.dc-about-mirror__art::before {
	height: 74%;
	width: 74%;
}

.dc-about-mirror__art::after {
	height: 42%;
	width: 42%;
}

.dc-about-axis {
	background: var(--dc-about-gold);
	height: 72%;
	left: 50%;
	opacity: .72;
	position: absolute;
	top: 14%;
	width: 1px;
}

.dc-about-mirror__art > p {
	bottom: 19%;
	color: rgba(255, 255, 255, .74);
	font-family: var(--dc-about-display);
	font-size: 28px;
	font-style: italic;
	left: 56%;
	line-height: 1.05;
	position: absolute;
}

.dc-about-hand {
	height: 170px;
	left: 21%;
	position: absolute;
	top: 24%;
	transform: rotate(-18deg);
	width: 120px;
	z-index: 2;
}

.dc-about-hand::before {
	background: rgba(67, 183, 202, .75);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 48% 48% 42% 42%;
	bottom: 4px;
	content: "";
	height: 103px;
	left: 25px;
	position: absolute;
	transform: rotate(8deg);
	width: 78px;
}

.dc-about-hand span {
	background: #58bfd0;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 18px;
	height: 84px;
	position: absolute;
	top: 0;
	width: 19px;
}

.dc-about-hand span:nth-child(1) { left: 18px; top: 24px; transform: rotate(-12deg); }
.dc-about-hand span:nth-child(2) { left: 39px; top: 3px; }
.dc-about-hand span:nth-child(3) { left: 61px; top: -6px; }
.dc-about-hand span:nth-child(4) { left: 83px; top: 8px; transform: rotate(7deg); }
.dc-about-hand span:nth-child(5) { height: 69px; left: 6px; top: 79px; transform: rotate(-52deg); }

.dc-about-section-label--light span {
	color: var(--dc-about-gold);
}

.dc-about-section-label--light p {
	color: rgba(255, 255, 255, .52);
}

.dc-about-mirror__copy .dc-about-section-label {
	margin-bottom: 52px;
}

.dc-about-mirror h2 {
	color: var(--dc-about-white);
	margin-bottom: 32px;
}

.dc-about-mirror__copy > p:not(.dc-about-kicker) {
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
	line-height: 1.9;
	margin-bottom: 22px;
	max-width: 690px;
}

.dc-about-mirror__copy strong {
	color: var(--dc-about-white);
}

.dc-about-geometry {
	background: #edf5f4;
	padding: 125px 0 100px;
}

.dc-about-geometry__heading {
	align-items: start;
	display: grid;
	gap: 64px;
	grid-template-columns: 160px minmax(0, 1fr);
	margin-bottom: 44px;
}

.dc-about-geometry__heading > div:last-child {
	max-width: 820px;
}

.dc-about-geometry__body {
	border-top: 1px solid var(--dc-about-line);
	display: grid;
	gap: 64px;
	grid-template-columns: 1.25fr .75fr;
	padding-top: 48px;
}

.dc-about-geometry__lead {
	color: var(--dc-about-muted);
	font-size: 20px;
	line-height: 1.75;
	margin-bottom: 0;
	max-width: 740px;
}

.dc-about-geometry__note {
	background: var(--dc-about-white);
	border-left: 3px solid var(--dc-about-gold);
	padding: 28px 30px;
}

.dc-about-geometry__note span {
	color: var(--dc-about-blue);
	display: block;
	font-size: 22px;
	margin-bottom: 14px;
}

.dc-about-geometry__note p {
	color: var(--dc-about-muted);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 0;
}

.dc-about-geometry__note strong {
	color: var(--dc-about-ink);
}

.dc-about-shapes {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 80px;
	opacity: .85;
	padding: 0 7%;
}

.dc-about-shape {
	display: block;
	height: 74px;
	position: relative;
	width: 74px;
}

.dc-about-shape--cube {
	border: 2px solid var(--dc-about-blue);
	transform: rotate(30deg) skew(-5deg);
}

.dc-about-shape--diamond {
	border: 2px solid var(--dc-about-cyan);
	transform: rotate(45deg);
}

.dc-about-shape--circle {
	border: 2px solid var(--dc-about-gold);
	border-radius: 50%;
}

.dc-about-shape--star {
	color: var(--dc-about-blue);
	font-size: 72px;
	height: auto;
	line-height: 1;
	width: auto;
}

.dc-about-work {
	background: var(--dc-about-white);
	padding: 125px 0;
}

.dc-about-work__heading {
	max-width: 840px;
}

.dc-about-work__heading > p:last-child {
	color: var(--dc-about-muted);
	font-size: 18px;
	line-height: 1.8;
	max-width: 760px;
}

.dc-about-work__cards {
	border-top: 1px solid var(--dc-about-line);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 65px;
}

.dc-about-work__cards article {
	border-right: 1px solid var(--dc-about-line);
	padding: 44px 38px 10px 0;
}

.dc-about-work__cards article + article {
	padding-left: 38px;
}

.dc-about-work__cards article:last-child {
	border-right: 0;
	padding-right: 0;
}

.dc-about-work__cards span {
	color: var(--dc-about-cyan);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
}

.dc-about-work__cards h3 {
	color: var(--dc-about-ink);
	font-family: var(--dc-about-display);
	font-size: 30px;
	font-weight: 500;
	margin: 35px 0 18px;
}

.dc-about-work__cards p {
	color: var(--dc-about-muted);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 0;
}

.dc-about-bio {
	background: var(--dc-about-gold);
	color: var(--dc-about-navy);
	padding: 82px 0;
}

.dc-about-bio__grid {
	align-items: start;
	display: grid;
	gap: 75px;
	grid-template-columns: .85fr 1.15fr;
}

.dc-about-bio .dc-about-kicker {
	color: var(--dc-about-navy);
}

.dc-about-bio .dc-about-kicker::before {
	background: var(--dc-about-blue);
}

.dc-about-bio h2 {
	color: var(--dc-about-navy);
	font-size: clamp(38px, 4vw, 56px);
	margin-bottom: 0;
}

.dc-about-bio__copy {
	border-left: 1px solid rgba(6, 29, 43, .28);
	padding-left: 50px;
}

.dc-about-bio__copy p {
	font-size: 16px;
	line-height: 1.9;
	margin-bottom: 0;
}

.dc-about-cta {
	background:
		radial-gradient(circle at 82% 18%, rgba(67, 183, 202, .15), transparent 28%),
		var(--dc-about-navy);
	color: var(--dc-about-white);
	padding: 115px 0 125px;
	text-align: center;
}

.dc-about-cta .dc-about-kicker {
	justify-content: center;
}

.dc-about-cta h2 {
	color: var(--dc-about-white);
	font-size: clamp(48px, 5.4vw, 74px);
	margin-bottom: 45px;
}

.dc-about-cta h2 em {
	color: #a7e3e9;
	font-weight: 400;
}

.dc-about-actions {
	align-items: center;
	display: flex;
	gap: 26px;
	justify-content: center;
}

.dc-about-button {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	justify-content: center;
	letter-spacing: .1em;
	min-height: 52px;
	padding: 0 25px;
	text-decoration: none;
	text-transform: uppercase;
}

.dc-about-button--primary {
	background: var(--dc-about-gold);
	color: var(--dc-about-navy);
}

.dc-about-button--primary:hover,
.dc-about-button--primary:focus {
	background: var(--dc-about-white);
	color: var(--dc-about-navy);
}

.dc-about-button--quiet {
	color: var(--dc-about-white);
	padding-left: 0;
	padding-right: 0;
}

.dc-about-button--quiet:hover,
.dc-about-button--quiet:focus {
	color: var(--dc-about-gold);
}

.dc-about-button--quiet span {
	color: var(--dc-about-gold);
	font-size: 18px;
	margin-left: 9px;
}

@media (max-width: 980px) {
	.dc-about-hero__grid {
		gap: 15px;
		grid-template-columns: 1fr .82fr;
	}

	.dc-about-mirror__grid {
		gap: 55px;
	}

	.dc-about-origin__grid,
	.dc-about-geometry__heading {
		gap: 35px;
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.dc-about-geometry__body {
		gap: 35px;
	}
}

@media (max-width: 760px) {
	.dc-about-shell {
		padding-left: 24px;
		padding-right: 24px;
	}

	.dc-about-kicker {
		font-size: 10px;
		letter-spacing: .17em;
		margin-bottom: 18px;
	}

	.dc-about-kicker::before {
		margin-right: 12px;
		width: 32px;
	}

	.dc-about-hero {
		min-height: auto;
	}

	.dc-about-hero__grid {
		display: flex;
		flex-direction: column;
		gap: 50px;
		min-height: auto;
		padding-bottom: 60px;
		padding-top: 62px;
	}

	.dc-about-hero__copy {
		max-width: none;
	}

	.dc-about-hero h1 {
		font-size: clamp(47px, 14vw, 64px);
		line-height: 1.01;
		margin-bottom: 26px;
	}

	.dc-about-hero__intro {
		font-size: 16px;
		line-height: 1.72;
		margin-bottom: 28px;
	}

	.dc-about-hero__visual {
		max-width: 360px;
	}

	.dc-about-visual__word--one {
		left: 1%;
	}

	.dc-about-visual__word--two {
		right: 1%;
	}

	.dc-about-origin,
	.dc-about-geometry,
	.dc-about-work {
		padding: 82px 0;
	}

	.dc-about-origin__grid,
	.dc-about-geometry__heading,
	.dc-about-geometry__body,
	.dc-about-mirror__grid,
	.dc-about-bio__grid {
		display: block;
	}

	.dc-about-section-label {
		margin-bottom: 42px;
	}

	.dc-about-section-label span {
		font-size: 36px;
	}

	.dc-about-origin h2,
	.dc-about-geometry h2,
	.dc-about-work h2,
	.dc-about-bio h2,
	.dc-about-mirror h2 {
		font-size: clamp(38px, 11vw, 49px);
		margin-bottom: 30px;
	}

	.dc-about-prose {
		columns: auto;
	}

	.dc-about-prose p + p {
		margin-top: 22px;
	}

	.dc-about-origin blockquote {
		font-size: 25px;
		margin-top: 40px;
	}

	.dc-about-mirror {
		padding: 82px 0;
	}

	.dc-about-mirror__art {
		margin: 0 auto 64px;
		max-width: 330px;
	}

	.dc-about-mirror__copy .dc-about-section-label {
		margin-bottom: 38px;
	}

	.dc-about-geometry__heading {
		margin-bottom: 0;
	}

	.dc-about-geometry__body {
		padding-top: 35px;
	}

	.dc-about-geometry__lead {
		font-size: 17px;
		margin-bottom: 32px;
	}

	.dc-about-shapes {
		margin-top: 58px;
		padding: 0;
	}

	.dc-about-shape {
		height: 44px;
		width: 44px;
	}

	.dc-about-shape--star {
		font-size: 45px;
	}

	.dc-about-work__heading > p:last-child {
		font-size: 16px;
	}

	.dc-about-work__cards {
		display: block;
		margin-top: 48px;
	}

	.dc-about-work__cards article,
	.dc-about-work__cards article + article {
		border-bottom: 1px solid var(--dc-about-line);
		border-right: 0;
		padding: 34px 0;
	}

	.dc-about-work__cards article:last-child {
		border-bottom: 0;
	}

	.dc-about-work__cards h3 {
		margin: 20px 0 12px;
	}

	.dc-about-bio {
		padding: 72px 0;
	}

	.dc-about-bio h2 {
		margin-bottom: 35px;
	}

	.dc-about-bio__copy {
		border-left: 0;
		border-top: 1px solid rgba(6, 29, 43, .26);
		padding-left: 0;
		padding-top: 30px;
	}

	.dc-about-cta {
		padding: 82px 0 90px;
	}

	.dc-about-cta h2 {
		font-size: clamp(42px, 12vw, 57px);
	}

	.dc-about-actions {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
	}

	.dc-about-button--quiet {
		min-height: 44px;
	}
}

@media (max-width: 430px) {
	.dc-about-shell {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dc-about-hero__grid {
		padding-top: 50px;
	}

	.dc-about-hero h1 {
		font-size: 45px;
	}

	.dc-about-hero__visual {
		max-width: 310px;
	}

	.dc-about-since {
		height: 68px;
		width: 68px;
	}

	.dc-about-since strong {
		font-size: 21px;
	}

	.dc-about-origin h2,
	.dc-about-geometry h2,
	.dc-about-work h2,
	.dc-about-bio h2,
	.dc-about-mirror h2 {
		font-size: 39px;
	}

	.dc-about-mirror__art {
		max-width: 290px;
	}

	.dc-about-hand {
		left: 18%;
		transform: rotate(-18deg) scale(.86);
	}

	.dc-about-geometry__note {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dc-about-cube {
		animation: dc-about-float 7s ease-in-out infinite;
	}

	@keyframes dc-about-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-9px); }
	}
}