/* Reference-led About page: editorial media, open typography, and logical layout. */
.dc-about {
	inline-size: 100%;
	max-inline-size: 100%;
	overflow: clip;
}

.dc-about :where(h1, h2, h3, p, figure) {
	margin-block-start: 0;
}

.dc-about__hero {
	position: relative;
	display: flex;
	min-block-size: min(58rem, 94svh);
	align-items: flex-end;
	background: var(--dc-color-purple-900);
	color: var(--dc-color-surface);
	isolation: isolate;
	overflow: clip;
}

.dc-about__hero > .dc-about__figure {
	position: absolute;
	z-index: -2;
	inset: 0;
	margin: 0;
}

.dc-about__hero .dc-about__image-frame,
.dc-about__hero .dc-about__image {
	inline-size: 100%;
	block-size: 100%;
}

.dc-about__hero .dc-about__image {
	object-fit: cover;
	object-position: center 45%;
	animation: dc-about-image-enter 1.2s var(--dc-ease-emphasis) both;
}

.dc-about__hero-shade {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--dc-color-purple-900) 14%, transparent) 12%, color-mix(in srgb, var(--dc-color-purple-900) 72%, transparent) 100%);
	pointer-events: none;
}

.dc-about__hero-content {
	position: relative;
	box-sizing: border-box;
	inline-size: min(var(--dc-container-wide), calc(100% - 2 * var(--dc-page-gutter)));
	padding-block: clamp(6rem, 12vh, 10rem) clamp(4rem, 8vw, 7rem);
}

.dc-about__hero-title {
	max-inline-size: 12ch;
	margin-block-end: clamp(1.25rem, 2.5vw, 2.5rem);
	color: var(--dc-color-surface);
	font-size: clamp(4rem, 9.2vw, 9rem);
	line-height: 0.98;
	text-wrap: balance;
}

.dc-about__hero-intro {
	max-inline-size: 40rem;
	color: var(--dc-color-surface);
	font-size: clamp(1.125rem, 1.55vw, 1.45rem);
	line-height: 1.62;
}

.dc-about__hero-intro p {
	margin-block-end: 0;
}

.dc-about__figure {
	position: relative;
	margin: 0;
}

.dc-about__image-frame {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: var(--dc-color-surface-muted);
	overflow: hidden;
}

.dc-about__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 900ms var(--dc-ease-standard);
}

.dc-about__figure:hover .dc-about__image,
.dc-about__figure:focus-within .dc-about__image {
	transform: scale(1.025);
}

.dc-about__image-note {
	position: absolute;
	z-index: 1;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.875rem;
	padding-block: 0.25rem;
	padding-inline: 0.5rem;
	background: color-mix(in srgb, var(--dc-color-purple-900) 72%, transparent);
	color: var(--dc-color-surface);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}

.dc-about__overview {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(8rem, 2fr) minmax(0, 8fr);
	gap: clamp(2rem, 8vw, 8rem);
	padding-block: clamp(7rem, 14vw, 14rem);
}

.dc-about__overview-marker {
	padding-block-start: 0.75rem;
}

.dc-about__overview-marker .dc-section-label,
.dc-about__care-heading .dc-section-label {
	margin-block-end: 1rem;
}

.dc-about__overview-copy {
	max-inline-size: 66rem;
}

.dc-about__overview-copy h2,
.dc-about__philosophy-copy h2,
.dc-about__international-copy h2,
.dc-about__closing-copy h2 {
	margin-block-end: clamp(1.5rem, 3vw, 3rem);
	font-size: clamp(3rem, 6.1vw, 6.2rem);
	line-height: 1.02;
	text-wrap: balance;
}

.dc-about__word {
	opacity: 0.28;
	transition: opacity var(--dc-duration-reveal) var(--dc-ease-standard);
}

.dc-about__word-reveal.is-revealed .dc-about__word {
	opacity: 1;
}

.dc-about__body {
	max-inline-size: 43rem;
	color: var(--dc-color-muted);
	font-size: clamp(1rem, 1.18vw, 1.125rem);
	line-height: 1.8;
}

.dc-about__body p {
	margin-block-end: 1.25em;
}

.dc-about__body p:last-child {
	margin-block-end: 0;
}

.dc-about__body--lead {
	max-inline-size: 54rem;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.75;
}

.dc-about__philosophy {
	padding-block: clamp(4rem, 7vw, 7rem) clamp(8rem, 15vw, 15rem);
}

.dc-about__philosophy-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(3rem, 9vw, 9rem);
}

.dc-about__philosophy-figure {
	inline-size: min(100%, 38rem);
	aspect-ratio: 4 / 5;
	transform: translate3d(0, var(--dc-about-parallax-shift, 0px), 0);
}

.dc-about__philosophy-copy {
	max-inline-size: 43rem;
}

.dc-about__care {
	padding-block: clamp(5rem, 10vw, 10rem);
	background: var(--dc-color-purple-900);
	color: var(--dc-color-surface);
}

.dc-about__care-heading {
	max-inline-size: 72rem;
	margin-block-end: clamp(3rem, 7vw, 7rem);
}

.dc-about__care-heading .dc-section-label {
	color: var(--dc-color-magenta-200);
}

.dc-about__care-heading h2 {
	max-inline-size: 15ch;
	color: var(--dc-color-surface);
	font-size: clamp(3.25rem, 7.6vw, 7.5rem);
	line-height: 1;
	text-wrap: balance;
}

.dc-about__care-experience {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(3rem, 9vw, 9rem);
}

.dc-about__care-visual {
	position: relative;
	min-inline-size: 0;
	min-block-size: clamp(26rem, 52vw, 46rem);
}

.dc-about__care-image,
.dc-about__care-image .dc-about__figure,
.dc-about__care-image .dc-about__image-frame {
	inline-size: 100%;
	block-size: 100%;
}

.dc-about__care-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.025);
	transition: opacity var(--dc-duration-reveal) var(--dc-ease-standard), transform var(--dc-duration-reveal) var(--dc-ease-standard);
}

.dc-about__care-image.is-current {
	opacity: 1;
	transform: scale(1);
}

.dc-about__care-image .dc-about__figure {
	position: relative;
}

.dc-about__care-image .dc-about__image {
	position: absolute;
	inset: 0;
}

.dc-about__care-content {
	min-inline-size: 0;
}

.dc-about__care-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-end: clamp(2.5rem, 5vw, 5rem);
	border-block-start: 1px solid color-mix(in srgb, var(--dc-color-surface) 28%, transparent);
}

.dc-about__care-index-button {
	display: flex;
	min-block-size: 3.5rem;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.85rem;
	padding-inline: 0.25rem 0.75rem;
	border: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--dc-color-surface) 28%, transparent);
	background: transparent;
	color: var(--dc-color-surface);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	text-align: start;
	transition: color var(--dc-duration-standard) var(--dc-ease-standard), border-color var(--dc-duration-standard) var(--dc-ease-standard), opacity var(--dc-duration-standard) var(--dc-ease-standard);
}

.dc-about__care-index-button[aria-pressed="false"] {
	opacity: 0.68;
}

.dc-about__care-index-button[aria-pressed="true"],
.dc-about__care-index-button:hover,
.dc-about__care-index-button:focus-visible {
	border-block-end-color: var(--dc-color-magenta-200);
	opacity: 1;
}

.dc-about__care-index-number,
.dc-about__care-number {
	color: var(--dc-color-magenta-200);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.dc-about__care-slides {
	min-block-size: 18rem;
}

.dc-about__care-slide {
	padding-block: 1.25rem 2rem;
}

.dc-about__care-slide + .dc-about__care-slide {
	border-block-start: 1px solid color-mix(in srgb, var(--dc-color-surface) 24%, transparent);
}

.dc-about__care-number {
	margin-block-end: 0.75rem;
}

.dc-about__care-slide h3 {
	max-inline-size: 13ch;
	margin-block-end: 1.25rem;
	color: var(--dc-color-surface);
	font-size: clamp(2.25rem, 4vw, 4.25rem);
	line-height: 1.02;
	text-wrap: balance;
}

.dc-about__care-slide .dc-about__body {
	color: color-mix(in srgb, var(--dc-color-surface) 84%, transparent);
}

.dc-about__care-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2rem;
}

.dc-about__care-controls .dc-slider-control {
	flex: 0 0 auto;
	border-color: color-mix(in srgb, var(--dc-color-surface) 48%, transparent);
	background: transparent;
	color: var(--dc-color-surface);
}

.dc-about__care-controls .dc-slider-control:hover {
	border-color: var(--dc-color-surface);
	background: var(--dc-color-surface);
	color: var(--dc-color-purple-900);
}

.dc-about__care-status {
	margin: 0;
	color: var(--dc-color-surface);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
}

.dc-about__vision-mission {
	padding-block: clamp(7rem, 14vw, 14rem);
}

.dc-about__vision-mission-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(3rem, 8vw, 8rem);
}

.dc-about__statement {
	padding-block-start: clamp(1.5rem, 3vw, 3rem);
	border-block-start: 1px solid var(--dc-color-line);
}

.dc-about__statement h2 {
	margin-block-end: clamp(1.5rem, 3vw, 3rem);
	font-size: clamp(2.5rem, 4.5vw, 4.5rem);
	line-height: 1.05;
}

.dc-about__international {
	padding-block: clamp(5rem, 10vw, 10rem);
	background: var(--dc-color-surface-muted);
}

.dc-about__international-layout {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(3rem, 9vw, 9rem);
}

.dc-about__international-copy {
	max-inline-size: 48rem;
}

.dc-about__international-figure {
	inline-size: min(100%, 40rem);
	aspect-ratio: 4 / 5;
}

.dc-about__closing {
	padding-block: clamp(6rem, 12vw, 12rem);
	background: var(--dc-color-purple-900);
	color: var(--dc-color-surface);
}

.dc-about__closing-layout {
	display: grid;
	grid-template-columns: 1fr minmax(0, 9fr) 2fr;
}

.dc-about__closing-copy {
	grid-column: 2;
	max-inline-size: 68rem;
}

.dc-about__closing-copy h2 {
	max-inline-size: 15ch;
	color: var(--dc-color-surface);
	font-size: clamp(3.25rem, 7.2vw, 7rem);
	line-height: 1.03;
}

.dc-about__closing-copy .dc-about__body {
	max-inline-size: 52rem;
	margin-block-end: 2.5rem;
	color: color-mix(in srgb, var(--dc-color-surface) 84%, transparent);
}

[dir="rtl"] .dc-about__hero-title,
[dir="rtl"] .dc-about__overview-copy h2,
[dir="rtl"] .dc-about__philosophy-copy h2,
[dir="rtl"] .dc-about__international-copy h2,
[dir="rtl"] .dc-about__closing-copy h2 {
	line-height: 1.28;
}

[dir="rtl"] .dc-about__care-heading h2,
[dir="rtl"] .dc-about__care-slide h3,
[dir="rtl"] .dc-about__statement h2 {
	line-height: 1.32;
}

.dc-about__closing-button {
	border-color: color-mix(in srgb, var(--dc-color-surface) 68%, transparent);
	color: var(--dc-color-surface);
}

.dc-about__closing-button:hover,
.dc-about__closing-button:focus-visible {
	border-color: var(--dc-color-surface);
	background: var(--dc-color-surface);
	color: var(--dc-color-purple-900);
}

.dc-about :where(a, button):focus-visible {
	outline-color: var(--dc-color-focus);
	outline-offset: 4px;
}

.dc-about__care :where(a, button):focus-visible,
.dc-about__closing :where(a, button):focus-visible {
	outline-color: var(--dc-color-surface);
}

.dc-about [hidden] {
	display: none !important;
}

@media (max-width: 64rem) {
	.dc-about__overview {
		grid-template-columns: minmax(0, 2fr) minmax(0, 6fr);
		gap: clamp(2rem, 5vw, 4rem);
	}

	.dc-about__philosophy-layout,
	.dc-about__care-experience,
	.dc-about__international-layout {
		gap: clamp(2rem, 5vw, 4rem);
	}

	.dc-about__care-visual {
		min-block-size: 34rem;
	}

	.dc-about__care-index {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 48rem) {
	.dc-about__hero {
		min-block-size: min(52rem, 92svh);
	}

	.dc-about__hero-content {
		padding-block-end: 3.5rem;
	}

	.dc-about__overview {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-block: 6rem;
	}

	.dc-about__overview-marker {
		padding-block-start: 0;
	}

	.dc-about__philosophy-layout,
	.dc-about__care-experience,
	.dc-about__vision-mission-layout,
	.dc-about__international-layout {
		grid-template-columns: 1fr;
	}

	.dc-about__philosophy-figure,
	.dc-about__international-figure {
		inline-size: min(100%, 35rem);
		aspect-ratio: 5 / 4;
	}

	.dc-about__philosophy-copy {
		max-inline-size: 48rem;
	}

	.dc-about__care-visual {
		min-block-size: clamp(24rem, 90vw, 34rem);
	}

	.dc-about__care-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-about__vision-mission-layout {
		gap: 3rem;
	}

	.dc-about__closing-layout {
		grid-template-columns: 1fr;
	}

	.dc-about__closing-copy {
		grid-column: 1;
	}
}

@media (max-width: 40rem) {
	.dc-about__hero {
		min-block-size: 43rem;
	}

	.dc-about__hero-title {
		max-inline-size: 10ch;
		font-size: clamp(3.5rem, 15vw, 5.4rem);
		line-height: 1.08;
	}

	[dir="rtl"] .dc-about__hero-title {
		max-inline-size: 11ch;
		font-size: clamp(3.25rem, 13vw, 5rem);
		line-height: 1.28;
	}

	.dc-about__hero-intro {
		font-size: 1rem;
		line-height: 1.8;
	}

	.dc-about__overview-copy h2,
	.dc-about__philosophy-copy h2,
	.dc-about__international-copy h2 {
		font-size: clamp(2.75rem, 12vw, 4.25rem);
		line-height: 1.12;
	}

	.dc-about__care-heading h2,
	.dc-about__closing-copy h2 {
		font-size: clamp(3rem, 13vw, 4.5rem);
		line-height: 1.16;
	}

	[dir="rtl"] .dc-about__care-heading h2,
	[dir="rtl"] .dc-about__closing-copy h2 {
		font-size: clamp(2.75rem, 11vw, 4.15rem);
		line-height: 1.35;
	}

	.dc-about__care-visual {
		min-block-size: 25rem;
	}

	.dc-about__care-index {
		grid-template-columns: 1fr;
	}

	.dc-about__care-slide h3 {
		font-size: clamp(2.35rem, 10vw, 3.5rem);
		line-height: 1.12;
	}

	.dc-about__care-slides {
		min-block-size: 0;
	}

	.dc-about__vision-mission,
	.dc-about__international {
		padding-block: 5rem;
	}

	.dc-about__statement h2 {
		font-size: clamp(2.5rem, 10vw, 3.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-about__hero .dc-about__image {
		animation: none;
	}

	.dc-about__philosophy-figure {
		transform: none;
	}

	.dc-about__image,
	.dc-about__care-index-button,
	.dc-about__care-image {
		transition: none;
	}

	.dc-about__word {
		opacity: 1;
		transition: none;
	}

	.dc-about__figure:hover .dc-about__image,
	.dc-about__figure:focus-within .dc-about__image {
		transform: none;
	}
}

@keyframes dc-about-image-enter {
	from {
		transform: scale(1.04);
	}

	to {
		transform: scale(1);
	}
}