/* =========================================================
   ABOUT PAGE
   COMPLETE FINAL CSS
========================================================= */

.about-page {
	width: 100%;
	overflow-x: hidden;
	background: #ffffff;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
	--about-brand: #a5003d;
	--about-heading: #242022;
	--about-text: #676164;

	position: relative;

	width: 100%;
	height: 690px;

	overflow: hidden;

	background: #fffaf4;
}


/* =========================================================
   HERO BACKGROUND IMAGE
   VISIBLE ON DESKTOP / TABLET
========================================================= */

.about-hero__background {
	position: absolute;

	z-index: 1;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	overflow: hidden;

	pointer-events: none;
}


.about-hero__background img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center center;
}


/* =========================================================
   CONTENT CONTAINER
========================================================= */

.about-hero__container {
	position: relative;

	z-index: 3;

	width:
		min(
			calc(100% - 110px),
			1490px
		);

	height: 100%;

	margin-inline: auto;
}


/* =========================================================
   CONTENT
========================================================= */

.about-hero__content {
	position: relative;

	width: 100%;
	max-width: 650px;

	height: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: flex-start;

	padding-top: 26px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.about-hero__breadcrumb {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 13px;

	margin:
		0
		0
		29px;

	color: #777174;

	font-size: 15px;

	font-weight: 500;

	line-height: 1;

	letter-spacing: 0.35px;

	text-transform: uppercase;
}


.about-hero__breadcrumb a {
	color: #777174;

	text-decoration: none;

	transition:
		color 0.25s ease;
}


.about-hero__breadcrumb a:hover {
	color:
		var(--about-brand);
}


.about-hero__breadcrumb > span:last-child {
	color:
		var(--about-brand);

	font-weight: 600;
}


/* =========================================================
   HERO TITLE
========================================================= */

.about-hero__title {
	margin:
		0
		0
		22px;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	font-family:
		"Playfair Display",
		Georgia,
		"Times New Roman",
		serif;

	font-size: 72px;

	font-weight: 400;

	line-height: 1.02;

	letter-spacing: -2.7px;
}


.about-hero__title-dark {
	color:
		var(--about-heading);
}


.about-hero__title-brand {
	color:
		var(--about-brand);
}


/* =========================================================
   TITLE DIVIDER
========================================================= */

.about-hero__divider {
	width: 57px;
	height: 2px;

	margin:
		0
		0
		31px;

	background:
		var(--about-brand);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.about-hero__description {
	max-width: 610px;

	color:
		var(--about-text);

	font-size: 18px;

	font-weight: 400;

	line-height: 1.58;
}


.about-hero__description p {
	margin: 0;
}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.about-hero-reveal {
	opacity: 0;

	transform:
		translateY(22px);

	filter:
		blur(1px);

	animation:
		aboutHeroReveal
		0.8s
		cubic-bezier(.22,1,.36,1)
		forwards;
}


.about-hero-reveal--1 {
	animation-delay: 0.05s;
}


.about-hero-reveal--2 {
	animation-delay: 0.14s;
}


.about-hero-reveal--3 {
	animation-delay: 0.23s;
}


.about-hero-reveal--4 {
	animation-delay: 0.33s;
}


@keyframes aboutHeroReveal {

	from {
		opacity: 0;

		transform:
			translateY(22px);

		filter:
			blur(1px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);

		filter:
			blur(0);
	}

}


/* =========================================================
   ABOUT PAGE EDITOR CONTENT
========================================================= */

.about-page__editor-content {
	position: relative;

	padding:
		72px
		0;

	background:
		#ffffff;
}


.about-page__editor-container {
	width:
		min(
			calc(100% - 80px),
			1180px
		);

	margin-inline: auto;

	color: #625b5f;

	font-size: 16px;

	line-height: 1.72;
}


.about-page__editor-container > *:first-child {
	margin-top: 0;
}


.about-page__editor-container > *:last-child {
	margin-bottom: 0;
}


/* =========================================================
   EDITOR HEADINGS
========================================================= */

.about-page__editor-container h2,
.about-page__editor-container h3,
.about-page__editor-container h4 {
	color: #242022;

	font-family:
		"Playfair Display",
		Georgia,
		"Times New Roman",
		serif;

	font-weight: 400;
}


.about-page__editor-container h2 {
	margin:
		0
		0
		22px;

	font-size: 42px;

	line-height: 1.15;

	letter-spacing: -1px;
}


.about-page__editor-container h3 {
	margin:
		38px
		0
		17px;

	font-size: 30px;

	line-height: 1.2;
}


.about-page__editor-container h4 {
	margin:
		30px
		0
		14px;

	font-size: 24px;

	line-height: 1.25;
}


/* =========================================================
   EDITOR TEXT
========================================================= */

.about-page__editor-container p {
	margin:
		0
		0
		22px;
}


.about-page__editor-container a {
	color: #a5003d;

	text-decoration:
		underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 3px;
}


/* =========================================================
   EDITOR LISTS
========================================================= */

.about-page__editor-container ul,
.about-page__editor-container ol {
	margin:
		0
		0
		25px;

	padding-left: 24px;
}


.about-page__editor-container li {
	margin-bottom: 9px;
}


.about-page__editor-container li::marker {
	color: #a5003d;
}


/* =========================================================
   EDITOR IMAGES
========================================================= */

.about-page__editor-container img {
	display: block;

	max-width: 100%;
	height: auto;

	margin:
		32px
		auto;

	border-radius: 14px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

	.about-hero {
		height: 690px;
	}


	.about-hero__container {
		width:
			min(
				calc(100% - 120px),
				1500px
			);
	}


	.about-hero__content {
		max-width: 665px;

		padding-top: 22px;
	}


	.about-hero__title {
		font-size: 74px;
	}


	.about-hero__description {
		max-width: 620px;

		font-size: 18px;
	}

}


/* =========================================================
   DESKTOP
========================================================= */

@media (max-width: 1599px) {

	.about-hero {
		height: 660px;
	}


	.about-hero__container {
		width:
			min(
				calc(100% - 100px),
				1440px
			);
	}


	.about-hero__content {
		max-width: 620px;
	}


	.about-hero__title {
		font-size: 68px;
	}


	.about-hero__description {
		max-width: 585px;

		font-size: 17px;
	}

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1366px) {

	.about-hero {
		height: 610px;
	}


	.about-hero__container {
		width:
			calc(100% - 80px);
	}


	.about-hero__content {
		max-width: 555px;

		padding-top: 24px;
	}


	.about-hero__breadcrumb {
		margin-bottom: 24px;

		font-size: 13px;
	}


	.about-hero__title {
		margin-bottom: 20px;

		font-size: 60px;

		line-height: 1.02;

		letter-spacing: -2.2px;
	}


	.about-hero__divider {
		margin-bottom: 25px;
	}


	.about-hero__description {
		max-width: 525px;

		font-size: 16px;

		line-height: 1.55;
	}


	.about-page__editor-content {
		padding:
			64px
			0;
	}

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 1100px) {

	.about-hero {
		height: 560px;
	}


	.about-hero__container {
		width:
			calc(100% - 60px);
	}


	.about-hero__content {
		max-width: 470px;
	}


	.about-hero__breadcrumb {
		margin-bottom: 21px;

		font-size: 12px;
	}


	.about-hero__title {
		font-size: 53px;

		letter-spacing: -1.9px;
	}


	.about-hero__divider {
		width: 50px;

		margin-bottom: 22px;
	}


	.about-hero__description {
		max-width: 450px;

		font-size: 15px;

		line-height: 1.52;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.about-hero {
		height: 570px;
	}


	.about-hero__container {
		width:
			calc(100% - 50px);
	}


	.about-hero__content {
		max-width: 410px;

		padding-top: 40px;
	}


	.about-hero__title {
		font-size: 49px;
	}


	.about-hero__description {
		max-width: 395px;

		font-size: 14px;
	}


	.about-page__editor-container {
		width:
			calc(100% - 50px);
	}

}


/* =========================================================
   MOBILE
   BANNER IMAGE HIDDEN ONLY HERE
========================================================= */

@media (max-width: 767px) {

	.about-hero {
		height: auto;

		min-height: 0;

		padding:
			54px
			0
			52px;

		background:
			#fffaf4;
	}


	/*
	 * Hide BOTH desktop and mobile picture sources.
	 */
	.about-hero__background {
		display: none !important;
	}


	.about-hero__container {
		width:
			calc(100% - 32px);

		height: auto;

		min-height: 0;
	}


	.about-hero__content {
		width: 100%;

		max-width: 100%;

		height: auto;

		min-height: 0;

		display: block;

		padding-top: 40px;
	}


	/* breadcrumb */

	.about-hero__breadcrumb {
		gap: 9px;

		margin:
			0
			0
			21px;

		font-size: 11px;

		line-height: 1.2;

		letter-spacing: 0.2px;
	}


	/* title */

	.about-hero__title {
		margin:
			0
			0
			20px;

		font-size:
			clamp(
				45px,
				12vw,
				56px
			);

		line-height: 1;

		letter-spacing: -1.7px;
	}


	/* divider */

	.about-hero__divider {
		width: 47px;

		height: 1px;

		margin:
			0
			0
			22px;
	}


	/* description */

	.about-hero__description {
		max-width: 100%;

		font-size: 15px;

		line-height: 1.55;
	}


	/* editor */

	.about-page__editor-content {
		padding:
			50px
			0;
	}


	.about-page__editor-container {
		width:
			calc(100% - 30px);

		font-size: 15px;

		line-height: 1.65;
	}


	.about-page__editor-container h2 {
		font-size: 35px;
	}


	.about-page__editor-container h3 {
		font-size: 27px;
	}


	.about-page__editor-container h4 {
		font-size: 22px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.about-hero {
		padding:
			48px
			0;
	}


	.about-hero__breadcrumb {
		margin-bottom: 18px;

		font-size: 10px;
	}


	.about-hero__title {
		font-size: 43px;
	}


	.about-hero__divider {
		margin-bottom: 19px;
	}


	.about-hero__description {
		font-size: 14px;

		line-height: 1.52;
	}

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

	.about-hero {
		padding:
			44px
			0;
	}


	.about-hero__title {
		font-size: 39px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.about-hero-reveal {
		opacity: 1 !important;

		transform: none !important;

		filter: none !important;

		animation: none !important;
	}

}
/* =========================================================
   ABOUT EDUCATION SECTION
   SITE BRAND COLOR VERSION
========================================================= */

.about-education {
	--education-brand: #a5003d;
	--education-brand-dark: #78002f;
	--education-brand-soft: rgba(165, 0, 61, 0.08);
	--education-heading: #292426;
	--education-text: #686164;

	position: relative;

	width: 100%;

	padding:
		72px
		0
		64px;

	overflow: hidden;

	background: transparent;
}


/* =========================================================
   CONTAINER
========================================================= */

.about-education__container {
	position: relative;

	width:
		min(
			calc(100% - 110px),
			1400px
		);

	margin-inline: auto;

	display: grid;

	grid-template-columns:
		minmax(0, 1.02fr)
		minmax(520px, 0.98fr);

	align-items: center;

	gap: 74px;
}


/* =========================================================
   CONTENT
========================================================= */

.about-education__content {
	position: relative;

	z-index: 4;

	max-width: 650px;
}


/* =========================================================
   EYEBROW
========================================================= */

.about-education__eyebrow {
	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 25px;

	color:
		var(--education-brand);

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 3px;

	text-transform: uppercase;
}


/* =========================================================
   EYEBROW MARK
========================================================= */

.about-education__eyebrow-mark {
	position: relative;

	width: 16px;
	height: 16px;

	display: inline-block;

	flex:
		0
		0
		16px;
}


.about-education__eyebrow-mark span {
	position: absolute;

	width: 6px;
	height: 6px;

	background:
		var(--education-brand);

	border-radius:
		6px 1px 6px 1px;
}


.about-education__eyebrow-mark span:nth-child(1) {
	top: 0;
	left: 0;
}


.about-education__eyebrow-mark span:nth-child(2) {
	top: 0;
	right: 0;

	transform:
		rotate(90deg);
}


.about-education__eyebrow-mark span:nth-child(3) {
	bottom: 0;
	left: 0;

	transform:
		rotate(-90deg);
}


.about-education__eyebrow-mark span:nth-child(4) {
	right: 0;
	bottom: 0;

	transform:
		rotate(180deg);
}


/* =========================================================
   TITLE
========================================================= */

.about-education__title {
	margin:
		0
		0
		20px;

	color:
		var(--education-heading);

	font-family:
		"Playfair Display",
		Georgia,
		"Times New Roman",
		serif;

	font-size: 53px;

	font-weight: 400;

	line-height: 1.02;

	letter-spacing: -2px;
}


/* =========================================================
   INTRO
========================================================= */

.about-education__intro {
	max-width: 600px;

	margin:
		0
		0
		28px;

	color:
		var(--education-text);

	font-size: 16px;

	font-weight: 400;

	line-height: 1.5;
}


/* =========================================================
   TIMELINE
========================================================= */

.about-education__timeline {
	position: relative;

	display: flex;

	flex-direction: column;

	gap: 23px;

	margin-top: 5px;
}


/* =========================================================
   TIMELINE LINE
========================================================= */

.about-education__timeline-line {
	position: absolute;

	z-index: 1;

	top: 19px;
	bottom: 19px;

	left: 5px;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			rgba(165, 0, 61, 0.10),
			rgba(165, 0, 61, 0.55),
			rgba(165, 0, 61, 0.10)
		);
}


/* =========================================================
   TIMELINE ITEM
========================================================= */

.about-education__item {
	position: relative;

	z-index: 2;

	display: grid;

	grid-template-columns:
		12px
		78px
		minmax(0, 1fr);

	align-items: center;

	column-gap: 19px;

	min-height: 96px;
}


/* =========================================================
   TIMELINE DOT
========================================================= */

.about-education__dot {
	position: relative;

	z-index: 3;

	width: 11px;
	height: 11px;

	border-radius: 50%;

	background:
		var(--education-brand);

	box-shadow:
		0
		0
		0
		4px
		#ffffff;

	transition:
		transform 0.35s cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease;
}


.about-education__item:hover
.about-education__dot {
	transform:
		scale(1.15);

	box-shadow:
		0
		0
		0
		6px
		rgba(165, 0, 61, 0.09);
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.about-education__icon {
	width: 76px;
	height: 76px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	color:
		var(--education-brand);

	background:
		linear-gradient(
			145deg,
			#fff8fa,
			#fbecef
		);

	border:
		1px solid
		rgba(165, 0, 61, 0.025);

	transition:
		transform 0.42s cubic-bezier(.22,1,.36,1),
		background 0.42s ease,
		color 0.42s ease,
		box-shadow 0.42s ease;
}


/* =========================================================
   ICON HOVER
========================================================= */

.about-education__item:hover
.about-education__icon {
	color: #ffffff;

	background:
		linear-gradient(
			145deg,
			#a90040,
			#7d002f
		);

	transform:
		translateY(-5px)
		scale(1.045);

	box-shadow:
		0
		14px
		30px
		rgba(165, 0, 61, 0.17);
}


/* =========================================================
   YEAR
========================================================= */

.about-education__year {
	margin-bottom: 6px;

	color:
		var(--education-brand);

	font-family:
		"Courier New",
		monospace;

	font-size: 13px;

	font-weight: 500;

	line-height: 1;

	letter-spacing: 2px;
}


/* =========================================================
   DEGREE
========================================================= */

.about-education__item-content {
	min-width: 0;
}


.about-education__item-content h3 {
	margin:
		0
		0
		5px;

	color:
		#302b2d;

	font-size: 18px;

	font-weight: 500;

	line-height: 1.25;

	transition:
		color 0.3s ease;
}


.about-education__item:hover
.about-education__item-content h3 {
	color:
		var(--education-brand);
}


/* =========================================================
   INSTITUTE
========================================================= */

.about-education__item-content p {
	max-width: 460px;

	margin: 0;

	color: #746d70;

	font-size: 14px;

	line-height: 1.42;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-education__visual {
	position: relative;

	z-index: 2;

	width: 100%;
	height: 520px;
}


/* =========================================================
   BRAND DECORATIVE RING
========================================================= */

.about-education__circle {
	position: absolute;

	z-index: 1;

	top: 2px;
	left: -48px;

	width: 285px;
	height: 285px;

	border:
		1px solid
		rgba(165, 0, 61, 0.48);

	border-radius: 50%;

	pointer-events: none;
}


/* SECOND RING */

.about-education__circle::before {
	content: "";

	position: absolute;

	inset: 25px;

	border:
		1px solid
		rgba(165, 0, 61, 0.12);

	border-radius: 50%;
}


/* subtle third ring */

.about-education__circle::after {
	content: "";

	position: absolute;

	inset: 49px;

	border:
		1px solid
		rgba(165, 0, 61, 0.055);

	border-radius: 50%;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.about-education__image-frame {
	position: absolute;

	z-index: 3;

	top: 18px;
	right: 0;

	width: 505px;
	height: 470px;

	overflow: hidden;

	border-radius:
		145px
		14px
		145px
		14px;

	background:
		#eee8e7;

	box-shadow:
		0
		18px
		48px
		rgba(67, 36, 46, 0.075);

	transition:
		transform 0.65s cubic-bezier(.22,1,.36,1),
		box-shadow 0.55s ease;
}


/* =========================================================
   IMAGE
========================================================= */

.about-education__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position:
		center center;

	transform:
		scale(1.01);

	transition:
		transform 0.9s
		cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.about-education__image-overlay {
	position: absolute;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.045),
			transparent 52%,
			rgba(165,0,61,0.025)
		);
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.about-education__image-frame:hover {
	transform:
		translateY(-7px);

	box-shadow:
		0
		28px
		62px
		rgba(92, 25, 50, 0.13);
}


.about-education__image-frame:hover
.about-education__image {
	transform:
		scale(1.045);
}


/* =========================================================
   BRAND DOT PATTERN
========================================================= */

.about-education__dots {
	position: absolute;

	z-index: 2;

	left: -78px;
	bottom: 32px;

	width: 104px;

	display: grid;

	grid-template-columns:
		repeat(6, 5px);

	gap:
		12px
		14px;

	pointer-events: none;
}


.about-education__dots span {
	width: 4px;
	height: 4px;

	border-radius: 50%;

	background:
		rgba(165, 0, 61, 0.42);
}


/* =========================================================
   SAFE DEFAULT VISIBILITY
========================================================= */

.education-reveal,
.education-timeline-item,
.education-image-reveal {
	opacity: 1;

	filter: none;

	transform: none;
}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.about-education.has-animation
.education-reveal {
	opacity: 0;

	filter:
		blur(1px);

	transform:
		translateY(22px);

	transition:
		opacity 0.8s cubic-bezier(.22,1,.36,1),
		transform 0.8s cubic-bezier(.22,1,.36,1),
		filter 0.8s cubic-bezier(.22,1,.36,1);
}


.about-education.has-animation
.education-timeline-item {
	opacity: 0;

	transform:
		translateX(-20px);

	transition:
		opacity 0.72s cubic-bezier(.22,1,.36,1),
		transform 0.72s cubic-bezier(.22,1,.36,1);
}


.about-education.has-animation
.education-image-reveal {
	opacity: 0;

	transform:
		translateX(34px)
		scale(0.985);

	transition:
		opacity 0.95s cubic-bezier(.22,1,.36,1),
		transform 0.95s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.about-education.has-animation.is-visible
.education-reveal {
	opacity: 1;

	filter: none;

	transform:
		translateY(0);
}


.about-education.has-animation.is-visible
.education-timeline-item {
	opacity: 1;

	transform:
		translateX(0);
}


.about-education.has-animation.is-visible
.education-image-reveal {
	opacity: 1;

	transform:
		translateX(0)
		scale(1);
}


/* =========================================================
   ENTRANCE DELAYS
========================================================= */

.about-education.has-animation.is-visible
.education-reveal--1 {
	transition-delay:
		0.05s;
}


.about-education.has-animation.is-visible
.education-reveal--2 {
	transition-delay:
		0.13s;
}


.about-education.has-animation.is-visible
.education-reveal--3 {
	transition-delay:
		0.21s;
}


.about-education.has-animation.is-visible
.education-timeline-item:nth-child(2) {
	transition-delay:
		0.30s;
}


.about-education.has-animation.is-visible
.education-timeline-item:nth-child(3) {
	transition-delay:
		0.40s;
}


.about-education.has-animation.is-visible
.education-timeline-item:nth-child(4) {
	transition-delay:
		0.50s;
}


.about-education.has-animation.is-visible
.education-image-reveal {
	transition-delay:
		0.15s;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

	.about-education {
		padding:
			62px
			0
			58px;
	}


	.about-education__container {
		width:
			calc(100% - 70px);

		grid-template-columns:
			minmax(0,1fr)
			470px;

		gap: 46px;
	}


	.about-education__title {
		font-size: 48px;
	}


	.about-education__visual {
		height: 485px;
	}


	.about-education__image-frame {
		width: 445px;
		height: 430px;
	}


	.about-education__circle {
		width: 245px;
		height: 245px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.about-education {
		padding:
			55px
			0;
	}


	.about-education__container {
		width:
			calc(100% - 50px);

		grid-template-columns: 1fr;

		gap: 42px;
	}


	.about-education__content {
		max-width: 680px;
	}


	.about-education__visual {
		width:
			min(
				100%,
				620px
			);

		height: 500px;

		margin-inline: auto;
	}


	.about-education__image-frame {
		width: 500px;
		height: 460px;
	}


	.about-education__circle {
		left: 0;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.about-education {
		padding:
			46px
			0
			50px;
	}


	.about-education__container {
		width:
			calc(100% - 30px);

		gap: 34px;
	}


	.about-education__eyebrow {
		margin-bottom: 20px;

		font-size: 9px;

		letter-spacing: 2.4px;
	}


	.about-education__title {
		margin-bottom: 18px;

		font-size:
			clamp(
				39px,
				11vw,
				47px
			);

		line-height: 1.02;

		letter-spacing: -1.6px;
	}


	.about-education__intro {
		margin-bottom: 25px;

		font-size: 14px;

		line-height: 1.55;
	}


	.about-education__timeline {
		gap: 22px;
	}


	.about-education__item {
		grid-template-columns:
			11px
			60px
			minmax(0,1fr);

		column-gap: 12px;

		min-height: 92px;
	}


	.about-education__icon {
		width: 58px;
		height: 58px;
	}


	.about-education__icon svg {
		width: 31px;
		height: 31px;
	}


	.about-education__year {
		font-size: 11px;

		letter-spacing: 1.5px;
	}


	.about-education__item-content h3 {
		font-size: 17px;
	}


	.about-education__item-content p {
		font-size: 13px;
	}


	.about-education__visual {
		height: 390px;
	}


	.about-education__image-frame {
		top: 20px;
		right: 0;

		width:
			calc(100% - 28px);

		height: 350px;

		border-radius:
			100px
			12px
			100px
			12px;
	}


	.about-education__circle {
		top: 0;
		left: -30px;

		width: 205px;
		height: 205px;
	}


	.about-education__dots {
		left: 0;
		bottom: 5px;

		transform:
			scale(0.75);

		transform-origin:
			left bottom;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.about-education__title {
		font-size: 39px;
	}


	.about-education__visual {
		height: 345px;
	}


	.about-education__image-frame {
		height: 315px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.education-reveal,
	.education-timeline-item,
	.education-image-reveal,
	.about-education__icon,
	.about-education__image-frame,
	.about-education__image {
		opacity: 1 !important;

		filter: none !important;

		transform: none !important;

		transition: none !important;
	}

}
/* =========================================================
   ABOUT APPOINTMENT
   REFERENCE-MATCHED VERSION
========================================================= */

.about-appointment {
	--appointment-brand: #a5003d;
	--appointment-brand-dark: #7d002f;
	--appointment-heading: #211d1f;
	--appointment-text: #686164;
	--appointment-border: rgba(96, 72, 76, 0.13);

	position: relative;

	width: 100%;

	padding:
		48px
		0
		46px;

	overflow: hidden;

	background: transparent;
}


/* =========================================================
   CONTAINER
========================================================= */

.about-appointment__container {
	width: min(
		calc(100% - 80px),
		1380px
	);

	margin-inline: auto;
}


/* =========================================================
   MAIN CARD
========================================================= */

.about-appointment__card {
	position: relative;

	width: 100%;
	height: 638px;

	overflow: hidden;

	border:
		1px solid
		rgba(112, 79, 72, 0.13);

	border-radius: 20px;

	background:
		#fffaf5;

	box-shadow:
		0 14px 42px
		rgba(77, 46, 51, 0.035);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.about-appointment__content {
	position: relative;

	z-index: 5;

	width: 55%;

	height: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	padding:
		35px
		36px
		35px
		62px;
}


/* =========================================================
   EYEBROW
========================================================= */

.about-appointment__eyebrow {
	display: flex;

	align-items: center;

	gap: 13px;

	margin:
		0
		0
		25px;

	color:
		var(--appointment-brand);

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 3.5px;

	text-transform: uppercase;
}


.about-appointment__eyebrow-line {
	width: 35px;
	height: 1px;

	flex:
		0
		0
		35px;

	background:
		var(--appointment-brand);
}


/* =========================================================
   TITLE
========================================================= */

.about-appointment__title {
	max-width: 590px;

	margin:
		0
		0
		17px;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	color:
		var(--appointment-heading);

	font-family:
		"Playfair Display",
		Georgia,
		"Times New Roman",
		serif;

	font-size: 44px;

	font-weight: 400;

	line-height: 1.02;

	letter-spacing: -1.7px;
}


.about-appointment__title-brand {
	color:
		var(--appointment-brand);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.about-appointment__description {
	max-width: 545px;

	margin:
		0
		0
		27px;

	color:
		var(--appointment-text);

	font-size: 14px;

	font-weight: 400;

	line-height: 1.55;
}


/* =========================================================
   FORM
========================================================= */

.about-appointment__form {
	position: relative;

	z-index: 6;

	width: 100%;

	max-width: 580px;
}


.about-appointment__form-grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		13px
		13px;
}


/* =========================================================
   FORM FIELD
========================================================= */

.about-appointment__field {
	position: relative;

	width: 100%;
	height: 52px;

	display: flex;

	align-items: center;

	overflow: hidden;

	border:
		1px solid
		rgba(92, 67, 71, 0.15);

	border-radius: 6px;

	background:
		rgba(255, 255, 255, 0.48);

	transition:
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}


.about-appointment__field:hover {
	border-color:
		rgba(165, 0, 61, 0.23);

	background:
		rgba(255, 255, 255, 0.72);
}


.about-appointment__field:focus-within {
	border-color:
		rgba(165, 0, 61, 0.52);

	background:
		#ffffff;

	box-shadow:
		0
		0
		0
		3px
		rgba(165, 0, 61, 0.045);
}


/* =========================================================
   FIELD ICON
========================================================= */

.about-appointment__field-icon {
	position: absolute;

	z-index: 2;

	top: 50%;
	left: 15px;

	width: 19px;
	height: 19px;

	display: flex;

	align-items: center;

	justify-content: center;

	color:
		var(--appointment-brand);

	transform:
		translateY(-50%);

	pointer-events: none;
}


.about-appointment__field-icon svg {
	display: block;

	width: 100%;
	height: 100%;
}


/* =========================================================
   INPUTS
========================================================= */

.about-appointment__field input,
.about-appointment__field select {
	position: relative;

	z-index: 1;

	width: 100%;
	height: 100%;

	margin: 0;

	padding:
		0
		38px
		0
		50px;

	border: 0;

	outline: 0;

	appearance: auto;

	color:
		#5f585c;

	background:
		transparent;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 13px;

	font-weight: 400;
}


.about-appointment__field input::placeholder {
	color:
		#777075;

	opacity: 1;
}


.about-appointment__field select {
	cursor: pointer;
}


/* =========================================================
   DATE FIELD
========================================================= */

.about-appointment__field input[type="date"] {
	color:
		#6f696d;
}


/* =========================================================
   HONEYPOT
========================================================= */

.about-appointment__honeypot {
	position: absolute !important;

	left: -99999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* =========================================================
   BUTTON
========================================================= */

.about-appointment__submit {
	position: relative;

	width: 318px;
	height: 59px;

	margin-top: 20px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 28px;

	padding:
		0
		28px;

	overflow: hidden;

	border: 0;

	border-radius: 7px;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			#b40046 0%,
			#a0003d 55%,
			#8a0035 100%
		);

	font-size: 15px;

	font-weight: 600;

	line-height: 1;

	cursor: pointer;

	box-shadow:
		0
		13px
		29px
		rgba(165, 0, 61, 0.17);

	transition:
		transform 0.35s
		cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease;
}


/* premium shine */

.about-appointment__submit::before {
	content: "";

	position: absolute;

	top: -180%;
	left: -55%;

	width: 35%;
	height: 460%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.25),
			transparent
		);

	transform:
		rotate(20deg)
		translateX(-260%);

	transition:
		transform 0.75s ease;
}


.about-appointment__submit:hover::before {
	transform:
		rotate(20deg)
		translateX(700%);
}


.about-appointment__submit:hover {
	transform:
		translateY(-4px);

	box-shadow:
		0
		19px
		38px
		rgba(165, 0, 61, 0.24);
}


.about-appointment__submit span,
.about-appointment__submit svg {
	position: relative;

	z-index: 2;
}


.about-appointment__submit svg {
	transition:
		transform 0.3s ease;
}


.about-appointment__submit:hover svg {
	transform:
		translateX(5px);
}


/* =========================================================
   RIGHT IMAGE
   IMPORTANT:
   THIS IS ABSOLUTE — NOT A GRID COLUMN
========================================================= */

.about-appointment__visual {
	position: absolute;

	z-index: 3;

	top: 0;
	right: 0;
	bottom: 0;

	width: 45%;

	min-height: 0;

	overflow: hidden;

	/*
	 * Large left curve exactly like reference.
	 */
	border-radius:
		290px
		0
		0
		290px;

	transform:
		translateZ(0);
}


/* =========================================================
   IMAGE
========================================================= */

.about-appointment__visual img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position:
		center center;

	transform:
		scale(1.01);

	transition:
		transform 1s
		cubic-bezier(.22,1,.36,1);
}


.about-appointment__visual:hover img {
	transform:
		scale(1.04);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.about-appointment__visual-overlay {
	position: absolute;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.03),
			transparent 48%,
			rgba(165, 0, 61, 0.018)
		);
}


/* =========================================================
   TOP DECORATIVE ARC
========================================================= */

.about-appointment__curve--top {
	position: absolute;

	z-index: 2;

	top: -235px;
	left: 370px;

	width: 535px;
	height: 385px;

	border:
		1px solid
		rgba(165, 0, 61, 0.16);

	border-radius: 50%;

	transform:
		rotate(-16deg);

	pointer-events: none;
}


/* inner line */

.about-appointment__curve--top::after {
	content: "";

	position: absolute;

	inset: 28px;

	border:
		1px solid
		rgba(165, 0, 61, 0.045);

	border-radius: 50%;
}


/* =========================================================
   BOTTOM DECORATIVE ARC
========================================================= */

.about-appointment__curve--bottom {
	position: absolute;

	z-index: 2;

	left: -370px;
	bottom: -225px;

	width: 720px;
	height: 390px;

	border:
		1px solid
		rgba(165, 0, 61, 0.18);

	border-radius: 50%;

	transform:
		rotate(18deg);

	pointer-events: none;
}


/* second bottom arc */

.about-appointment__curve--bottom::after {
	content: "";

	position: absolute;

	inset: 36px;

	border:
		1px solid
		rgba(165, 0, 61, 0.055);

	border-radius: 50%;
}


/* =========================================================
   ECG / HEART MARK
========================================================= */

.about-appointment__heart-mark {
	position: absolute;

	z-index: 3;

	left: 18px;
	bottom: 8px;

	width: 74px;

	color:
		rgba(165, 0, 61, 0.34);

	pointer-events: none;
}


.about-appointment__heart-mark svg {
	display: block;

	width: 100%;
	height: auto;
}


/* =========================================================
   FORM NOTICE
========================================================= */

.about-appointment__notice {
	max-width: 580px;

	margin:
		0
		0
		16px;

	padding:
		10px
		13px;

	border-radius: 6px;

	font-size: 12px;

	line-height: 1.45;
}


.about-appointment__notice--success {
	color: #28633e;

	border:
		1px solid
		rgba(40, 99, 62, 0.12);

	background:
		#f0f8f3;
}


.about-appointment__notice--error {
	color:
		#8e1732;

	border:
		1px solid
		rgba(165, 0, 61, 0.11);

	background:
		#fff3f5;
}


/* =========================================================
   SAFE DEFAULT
========================================================= */

.appointment-reveal,
.appointment-image-reveal {
	opacity: 1;

	transform: none;

	filter: none;
}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.about-appointment.has-animation
.appointment-reveal {
	opacity: 0;

	transform:
		translateY(20px);

	filter:
		blur(1px);

	transition:
		opacity 0.8s
		cubic-bezier(.22,1,.36,1),
		transform 0.8s
		cubic-bezier(.22,1,.36,1),
		filter 0.8s
		cubic-bezier(.22,1,.36,1);
}


.about-appointment.has-animation
.appointment-image-reveal {
	opacity: 0;

	transform:
		translateX(30px)
		scale(0.99);

	transition:
		opacity 0.95s
		cubic-bezier(.22,1,.36,1),
		transform 0.95s
		cubic-bezier(.22,1,.36,1);
}


/* visible */

.about-appointment.has-animation.is-visible
.appointment-reveal {
	opacity: 1;

	transform:
		translateY(0);

	filter: none;
}


.about-appointment.has-animation.is-visible
.appointment-image-reveal {
	opacity: 1;

	transform:
		translateX(0)
		scale(1);
}


/* stagger */

.about-appointment.has-animation.is-visible
.appointment-reveal--1 {
	transition-delay: 0.04s;
}


.about-appointment.has-animation.is-visible
.appointment-reveal--2 {
	transition-delay: 0.12s;
}


.about-appointment.has-animation.is-visible
.appointment-reveal--3 {
	transition-delay: 0.20s;
}


.about-appointment.has-animation.is-visible
.appointment-reveal--4 {
	transition-delay: 0.28s;
}


.about-appointment.has-animation.is-visible
.appointment-image-reveal {
	transition-delay: 0.10s;
}


/* =========================================================
   DESKTOP 1200–1366
========================================================= */

@media (max-width: 1366px) {

	.about-appointment {
		padding:
			45px
			0;
	}


	.about-appointment__container {
		width:
			calc(100% - 70px);

		max-width: 1210px;
	}


	.about-appointment__card {
		height: 610px;
	}


	.about-appointment__content {
		width: 56%;

		padding:
			35px
			32px
			35px
			58px;
	}


	.about-appointment__title {
		font-size: 42px;
	}


	.about-appointment__form {
		max-width: 560px;
	}


	.about-appointment__visual {
		width: 45%;

		border-radius:
			275px
			0
			0
			275px;
	}

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 1100px) {

	.about-appointment__container {
		width:
			calc(100% - 50px);
	}


	.about-appointment__card {
		height: 570px;
	}


	.about-appointment__content {
		width: 57%;

		padding:
			32px
			25px
			32px
			42px;
	}


	.about-appointment__title {
		font-size: 37px;
	}


	.about-appointment__description {
		max-width: 480px;

		font-size: 13px;
	}


	.about-appointment__field {
		height: 49px;
	}


	.about-appointment__visual {
		width: 43%;

		border-radius:
			250px
			0
			0
			250px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.about-appointment {
		padding:
			44px
			0;
	}


	.about-appointment__container {
		width:
			calc(100% - 40px);
	}


	.about-appointment__card {
		height: auto;

		display: flex;

		flex-direction: column;

		overflow: hidden;
	}


	.about-appointment__content {
		width: 100%;

		height: auto;

		padding:
			45px
			38px
			42px;
	}


	.about-appointment__form {
		max-width: 100%;
	}


	.about-appointment__visual {
		position: relative;

		top: auto;
		right: auto;
		bottom: auto;

		width: 100%;
		height: 480px;

		border-radius:
			110px
			0
			0
			0;
	}


	.about-appointment__curve--top {
		left: 40%;
	}


	.about-appointment__heart-mark {
		display: none;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.about-appointment {
		padding:
			36px
			0;
	}


	.about-appointment__container {
		width:
			calc(100% - 24px);
	}


	.about-appointment__card {
		border-radius: 15px;
	}


	.about-appointment__content {
		padding:
			34px
			20px
			31px;
	}


	.about-appointment__eyebrow {
		margin-bottom: 20px;

		font-size: 9px;

		letter-spacing: 2.3px;
	}


	.about-appointment__eyebrow-line {
		width: 27px;

		flex-basis: 27px;
	}


	.about-appointment__title {
		margin-bottom: 16px;

		font-size:
			clamp(
				37px,
				10.5vw,
				44px
			);

		line-height: 1.02;

		letter-spacing: -1.4px;
	}


	.about-appointment__description {
		margin-bottom: 23px;

		font-size: 14px;

		line-height: 1.5;
	}


	.about-appointment__form-grid {
		grid-template-columns: 1fr;

		gap: 11px;
	}


	.about-appointment__field {
		height: 52px;
	}


	.about-appointment__submit {
		width: 100%;

		height: 56px;

		margin-top: 14px;
	}


	.about-appointment__visual {
		height: 345px;

		border-radius:
			85px
			0
			0
			0;
	}


	.about-appointment__curve--top {
		display: none;
	}


	.about-appointment__curve--bottom {
		width: 450px;

		left: -290px;

		bottom: -270px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.about-appointment__content {
		padding:
			31px
			17px
			28px;
	}


	.about-appointment__title {
		font-size: 36px;
	}


	.about-appointment__visual {
		height: 310px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.appointment-reveal,
	.appointment-image-reveal,
	.about-appointment__visual img,
	.about-appointment__submit {
		opacity: 1 !important;

		transform: none !important;

		filter: none !important;

		transition: none !important;
	}

}
/* =========================================================
   ABOUT PROFILE TABS
   PREMIUM HIGH-CONTRAST VERSION
========================================================= */

.about-profile-tabs {
	--profile-brand: #a5003d;
	--profile-brand-dark: #78002f;
	--profile-brand-deeper: #5e0026;

	--profile-heading: #241f21;
	--profile-text: #625b5e;

	--profile-shell: #f8eeee;
	--profile-shell-deep: #f3e4e7;

	--profile-panel: #fffaf8;
	--profile-panel-deep: #fbf1f1;

	--profile-line: rgba(87, 52, 64, 0.11);

	position: relative;

	width: 100%;

	padding:
		72px
		0
		78px;

	overflow: hidden;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fffafa 42%,
			#ffffff 100%
		);
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.about-profile-tabs::before {
	content: "";

	position: absolute;

	top: 70px;
	left: -180px;

	width: 430px;
	height: 430px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(165, 0, 61, 0.075),
			transparent 70%
		);

	pointer-events: none;
}


.about-profile-tabs::after {
	content: "";

	position: absolute;

	right: -180px;
	bottom: -100px;

	width: 460px;
	height: 460px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(120, 0, 47, 0.055),
			transparent 70%
		);

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.about-profile-tabs__container {
	position: relative;

	z-index: 2;

	width: min(
		calc(100% - 80px),
		1380px
	);

	margin-inline: auto;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.about-profile-tabs__shell {
	position: relative;

	display: grid;

	grid-template-columns:
		320px
		minmax(0, 1fr);

	min-height: 650px;

	overflow: hidden;

	border:
		1px solid
		rgba(120, 68, 85, 0.13);

	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#f7ecef 0%,
			#fbf5f3 38%,
			#fffaf8 100%
		);

	box-shadow:
		0 28px 70px
		rgba(79, 35, 52, 0.09);
}


/* subtle internal frame */

.about-profile-tabs__shell::before {
	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	box-shadow:
		inset
		0
		1px
		0
		rgba(255, 255, 255, 0.75);

	pointer-events: none;

	z-index: 4;
}


/* =========================================================
   LEFT NAVIGATION
========================================================= */

.about-profile-tabs__nav {
	position: relative;

	z-index: 3;

	background:
		linear-gradient(
			180deg,
			#fff9f9 0%,
			#f8ecef 100%
		);

	border-right:
		1px solid
		rgba(104, 63, 76, 0.12);
}


/* =========================================================
   TAB
========================================================= */

.about-profile-tabs__tab {
	position: relative;

	width: 100%;

	min-height: 91px;

	display: grid;

	grid-template-columns:
		50px
		minmax(0, 1fr)
		22px;

	align-items: center;

	gap: 13px;

	padding:
		15px
		21px;

	border: 0;

	border-bottom:
		1px solid
		rgba(91, 59, 70, 0.09);

	outline: 0;

	color:
		#50494d;

	background:
		transparent;

	text-align: left;

	cursor: pointer;

	transition:
		color 0.32s ease,
		background 0.32s ease,
		transform 0.32s cubic-bezier(.22, 1, .36, 1),
		box-shadow 0.32s ease;
}


/* =========================================================
   ACTIVE TAB
========================================================= */

.about-profile-tabs__tab.is-active {
	z-index: 5;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			#b00045 0%,
			#a0003d 48%,
			#830032 100%
		);

	border-bottom-color:
		transparent;

	box-shadow:
		0 16px 32px
		rgba(124, 0, 47, 0.22);
}


/* active pointer */

.about-profile-tabs__tab.is-active::after {
	content: "";

	position: absolute;

	right: -13px;
	top: 50%;

	width: 26px;
	height: 26px;

	border-radius: 3px;

	background:
		#98003a;

	transform:
		translateY(-50%)
		rotate(45deg);

	box-shadow:
		6px
		-5px
		16px
		rgba(86, 0, 33, 0.08);
}


/* =========================================================
   TAB ICON
========================================================= */

.about-profile-tabs__tab-icon {
	position: relative;

	z-index: 6;

	width: 44px;
	height: 44px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	color:
		#575157;

	background:
		rgba(255, 255, 255, 0.42);

	transition:
		color 0.3s ease,
		background 0.3s ease,
		transform 0.35s cubic-bezier(.22,1,.36,1);
}


.about-profile-tabs__tab-icon svg {
	width: 24px;
	height: 24px;
}


.about-profile-tabs__tab.is-active
.about-profile-tabs__tab-icon {
	color: #ffffff;

	background:
		rgba(255, 255, 255, 0.10);

	box-shadow:
		inset
		0
		0
		0
		1px
		rgba(255, 255, 255, 0.10);
}


/* =========================================================
   TAB TITLE
========================================================= */

.about-profile-tabs__tab-title {
	position: relative;

	z-index: 6;

	font-size: 15px;

	font-weight: 500;

	line-height: 1.35;

	letter-spacing: -0.1px;
}


.about-profile-tabs__tab.is-active
.about-profile-tabs__tab-title {
	font-weight: 600;
}


/* =========================================================
   TAB ARROW
========================================================= */

.about-profile-tabs__tab-arrow {
	position: relative;

	z-index: 6;

	display: flex;

	align-items: center;

	justify-content: center;

	color:
		#8a8286;

	transition:
		transform 0.32s cubic-bezier(.22,1,.36,1),
		color 0.32s ease;
}


.about-profile-tabs__tab-arrow svg {
	width: 17px;
	height: 17px;
}


.about-profile-tabs__tab:hover:not(.is-active) {
	color:
		var(--profile-brand);

	background:
		rgba(255, 255, 255, 0.55);
}


.about-profile-tabs__tab:hover:not(.is-active)
.about-profile-tabs__tab-icon {
	color:
		var(--profile-brand);

	transform:
		translateX(2px);
}


.about-profile-tabs__tab:hover:not(.is-active)
.about-profile-tabs__tab-arrow {
	color:
		var(--profile-brand);

	transform:
		translateX(4px);
}


.about-profile-tabs__tab.is-active
.about-profile-tabs__tab-arrow {
	color: #ffffff;

	transform:
		translateX(3px);
}


/* =========================================================
   RIGHT CONTENT AREA
========================================================= */

.about-profile-tabs__content {
	position: relative;

	min-width: 0;

	background:
		linear-gradient(
			145deg,
			#fffaf8 0%,
			#fdf5f5 55%,
			#f9edef 100%
		);
}


/* right-side glow */

.about-profile-tabs__content::before {
	content: "";

	position: absolute;

	right: -130px;
	top: -170px;

	width: 470px;
	height: 470px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(165, 0, 61, 0.11),
			rgba(165, 0, 61, 0.025) 46%,
			transparent 71%
		);

	pointer-events: none;
}


/* darker lower wash */

.about-profile-tabs__content::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 160px;

	background:
		linear-gradient(
			to top,
			rgba(150, 65, 92, 0.045),
			transparent
		);

	pointer-events: none;
}


/* =========================================================
   PANEL
========================================================= */

.about-profile-tabs__panel {
	position: relative;

	z-index: 2;

	width: 100%;

	min-height: 650px;
}


.about-profile-tabs__panel[hidden] {
	display: none;
}


.about-profile-tabs__panel-inner {
	position: relative;

	z-index: 3;

	padding:
		47px
		52px
		52px;
}


/* =========================================================
   EYEBROW
========================================================= */

.about-profile-tabs__eyebrow {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 10px;

	margin-bottom: 22px;

	color:
		var(--profile-brand);

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 3.5px;

	text-transform: uppercase;
}


.about-profile-tabs__eyebrow i {
	display: block;

	width: 34px;
	height: 2px;

	border-radius: 4px;

	background:
		var(--profile-brand);
}


/* =========================================================
   MAIN HEADING
========================================================= */

.about-profile-tabs__heading {
	margin:
		0
		0
		22px;

	color:
		var(--profile-heading);

	font-family:
		"Playfair Display",
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			43px,
			3.5vw,
			56px
		);

	font-weight: 400;

	line-height: 1.02;

	letter-spacing: -2px;
}


/* =========================================================
   WYSIWYG
========================================================= */

.about-profile-tabs__wysiwyg {
	position: relative;

	max-width: 100%;

	color:
		var(--profile-text);

	font-size: 15px;

	line-height: 1.65;
}


.about-profile-tabs__wysiwyg > *:first-child {
	margin-top: 0;
}


.about-profile-tabs__wysiwyg > *:last-child {
	margin-bottom: 0;
}


.about-profile-tabs__wysiwyg p {
	max-width: 900px;

	margin:
		0
		0
		20px;

	color:
		#6b6266;

	font-size: 15px;

	line-height: 1.65;
}


/* =========================================================
   WYSIWYG HEADINGS
========================================================= */

.about-profile-tabs__wysiwyg h2,
.about-profile-tabs__wysiwyg h3,
.about-profile-tabs__wysiwyg h4 {
	margin:
		30px
		0
		14px;

	color:
		#342d30;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-weight: 400;

	line-height: 1.2;
}


.about-profile-tabs__wysiwyg h2 {
	font-size: 30px;
}


.about-profile-tabs__wysiwyg h3 {
	font-size: 25px;
}


.about-profile-tabs__wysiwyg h4 {
	font-size: 20px;
}


/* =========================================================
   ORDERED LIST
   PREMIUM TIMELINE CARDS
========================================================= */

.about-profile-tabs__wysiwyg ol {
	counter-reset:
		profile-counter;

	display: grid;

	gap: 12px;

	margin:
		22px
		0
		28px;

	padding: 0;

	list-style: none;
}


.about-profile-tabs__wysiwyg ol > li {
	counter-increment:
		profile-counter;

	position: relative;

	min-height: 66px;

	display: flex;

	align-items: center;

	padding:
		14px
		20px
		14px
		74px;

	border:
		1px solid
		rgba(138, 56, 82, 0.10);

	border-radius: 10px;

	color:
		#5d5559;

	background:
		linear-gradient(
			105deg,
			rgba(255, 255, 255, 0.88),
			rgba(255, 248, 249, 0.76)
		);

	box-shadow:
		0
		6px
		20px
		rgba(81, 39, 53, 0.035);

	transition:
		transform 0.35s cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease,
		border-color 0.35s ease,
		background 0.35s ease;
}


/* number badge */

.about-profile-tabs__wysiwyg ol > li::before {
	content:
		counter(profile-counter);

	position: absolute;

	left: 18px;
	top: 50%;

	width: 38px;
	height: 38px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	color:
		var(--profile-brand);

	background:
		linear-gradient(
			145deg,
			#fff0f4,
			#fce7ed
		);

	border:
		1px solid
		rgba(165, 0, 61, 0.12);

	font-family:
		"DM Sans",
		Arial,
		sans-serif;

	font-size: 13px;

	font-weight: 700;

	box-shadow:
		inset
		0
		1px
		0
		rgba(255, 255, 255, 0.9);
}


/* left accent line */

.about-profile-tabs__wysiwyg ol > li::after {
	content: "";

	position: absolute;

	left: 0;
	top: 13px;
	bottom: 13px;

	width: 3px;

	border-radius:
		0
		5px
		5px
		0;

	background:
		linear-gradient(
			to bottom,
			#a5003d,
			#7a002f
		);

	opacity: 0;

	transform:
		scaleY(0.4);

	transition:
		opacity 0.3s ease,
		transform 0.35s cubic-bezier(.22,1,.36,1);
}


.about-profile-tabs__wysiwyg ol > li:hover {
	border-color:
		rgba(165, 0, 61, 0.22);

	background:
		#ffffff;

	transform:
		translateX(4px)
		translateY(-2px);

	box-shadow:
		0
		14px
		30px
		rgba(94, 32, 55, 0.08);
}


.about-profile-tabs__wysiwyg ol > li:hover::after {
	opacity: 1;

	transform:
		scaleY(1);
}


/* =========================================================
   STRONG CONTENT INSIDE OL
========================================================= */

.about-profile-tabs__wysiwyg ol > li strong {
	color:
		var(--profile-brand);

	font-weight: 700;
}


/* =========================================================
   UNORDERED LIST
========================================================= */

.about-profile-tabs__wysiwyg ul {
	display: grid;

	gap: 11px;

	margin:
		20px
		0
		28px;

	padding: 0;

	list-style: none;
}


.about-profile-tabs__wysiwyg ul > li {
	position: relative;

	min-height: 58px;

	display: flex;

	align-items: center;

	padding:
		13px
		18px
		13px
		56px;

	border:
		1px solid
		rgba(138, 56, 82, 0.09);

	border-radius: 9px;

	color:
		#60585c;

	background:
		rgba(255, 255, 255, 0.65);

	transition:
		transform 0.3s cubic-bezier(.22,1,.36,1),
		border-color 0.3s ease,
		background 0.3s ease;
}


.about-profile-tabs__wysiwyg ul > li::before {
	content: "";

	position: absolute;

	left: 20px;
	top: 50%;

	width: 19px;
	height: 19px;

	border-radius: 50%;

	background:
		#f9e5eb;

	border:
		1px solid
		rgba(165, 0, 61, 0.15);

	transform:
		translateY(-50%);
}


.about-profile-tabs__wysiwyg ul > li::after {
	content: "";

	position: absolute;

	left: 26px;
	top: 50%;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		var(--profile-brand);

	transform:
		translateY(-50%);
}


.about-profile-tabs__wysiwyg ul > li:hover {
	border-color:
		rgba(165, 0, 61, 0.19);

	background:
		#ffffff;

	transform:
		translateX(3px);
}


/* =========================================================
   LINKS / STRONG
========================================================= */

.about-profile-tabs__wysiwyg strong {
	color:
		var(--profile-brand);

	font-weight: 650;
}


.about-profile-tabs__wysiwyg a {
	color:
		var(--profile-brand);

	font-weight: 500;

	text-decoration:
		underline;

	text-decoration-thickness:
		1px;

	text-underline-offset:
		4px;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.about-profile-tabs__wysiwyg blockquote {
	position: relative;

	margin:
		25px
		0;

	padding:
		18px
		22px
		18px
		28px;

	border-left:
		4px solid
		var(--profile-brand);

	border-radius:
		0
		10px
		10px
		0;

	color:
		#574f53;

	background:
		linear-gradient(
			90deg,
			#f9e9ee,
			#fffafa
		);
}


/* =========================================================
   TABLES
========================================================= */

.about-profile-tabs__wysiwyg table {
	width: 100%;

	margin:
		24px
		0;

	overflow: hidden;

	border-collapse:
		separate;

	border-spacing: 0;

	border:
		1px solid
		rgba(165, 0, 61, 0.13);

	border-radius: 10px;

	background:
		#ffffff;

	box-shadow:
		0
		8px
		22px
		rgba(80, 40, 53, 0.04);
}


.about-profile-tabs__wysiwyg th,
.about-profile-tabs__wysiwyg td {
	padding:
		14px
		16px;

	border-bottom:
		1px solid
		rgba(75, 50, 58, 0.07);

	text-align: left;

	vertical-align: top;
}


.about-profile-tabs__wysiwyg th {
	color:
		#ffffff;

	background:
		var(--profile-brand);

	font-weight: 600;
}


.about-profile-tabs__wysiwyg tr:nth-child(even) td {
	background:
		#fff9fa;
}


.about-profile-tabs__wysiwyg tr:last-child td {
	border-bottom: 0;
}


/* =========================================================
   TAB PANEL ANIMATION
========================================================= */

.about-profile-tabs__panel.is-entering
.about-profile-tabs__panel-inner {
	animation:
		profile-panel-enter
		0.48s
		cubic-bezier(.22,1,.36,1)
		both;
}


@keyframes profile-panel-enter {

	from {
		opacity: 0;

		transform:
			translateY(10px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

	.about-profile-tabs__container {
		width:
			calc(100% - 60px);
	}


	.about-profile-tabs__shell {
		grid-template-columns:
			290px
			minmax(0, 1fr);
	}


	.about-profile-tabs__panel-inner {
		padding:
			42px
			38px
			46px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.about-profile-tabs {
		padding:
			58px
			0;
	}


	.about-profile-tabs__container {
		width:
			calc(100% - 40px);
	}


	.about-profile-tabs__shell {
		display: block;

		min-height: 0;
	}


	.about-profile-tabs__nav {
		display: flex;

		overflow-x: auto;

		border-right: 0;

		border-bottom:
			1px solid
			rgba(91, 58, 69, 0.12);

		scrollbar-width: none;
	}


	.about-profile-tabs__nav::-webkit-scrollbar {
		display: none;
	}


	.about-profile-tabs__tab {
		flex:
			0
			0
			auto;

		width: auto;

		min-width: 215px;

		min-height: 76px;

		grid-template-columns:
			39px
			minmax(0, 1fr);

		padding:
			12px
			17px;

		border-right:
			1px solid
			rgba(82, 55, 64, 0.08);

		border-bottom: 0;
	}


	.about-profile-tabs__tab-arrow {
		display: none;
	}


	.about-profile-tabs__tab.is-active::after {
		top: auto;

		right: auto;

		left: 50%;
		bottom: -9px;

		width: 18px;
		height: 18px;

		transform:
			translateX(-50%)
			rotate(45deg);
	}


	.about-profile-tabs__panel {
		min-height: 0;
	}


	.about-profile-tabs__panel-inner {
		padding:
			38px
			30px
			42px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.about-profile-tabs {
		padding:
			46px
			0;
	}


	.about-profile-tabs__container {
		width:
			calc(100% - 30px);
	}


	.about-profile-tabs__shell {
		border-radius:
			13px;
	}


	.about-profile-tabs__tab {
		min-width:
			190px;

		min-height:
			70px;

		grid-template-columns:
			34px
			minmax(0, 1fr);

		padding:
			10px
			14px;
	}


	.about-profile-tabs__tab-icon {
		width:
			33px;

		height:
			33px;
	}


	.about-profile-tabs__tab-icon svg {
		width:
			20px;

		height:
			20px;
	}


	.about-profile-tabs__tab-title {
		font-size:
			13px;
	}


	.about-profile-tabs__panel-inner {
		padding:
			30px
			18px
			34px;
	}


	.about-profile-tabs__heading {
		font-size:
			clamp(
				35px,
				10vw,
				43px
			);
	}


	.about-profile-tabs__wysiwyg {
		font-size:
			14px;
	}


	.about-profile-tabs__wysiwyg p {
		font-size:
			14px;
	}


	.about-profile-tabs__wysiwyg ol > li {
		min-height:
			62px;

		padding:
			13px
			14px
			13px
			61px;
	}


	.about-profile-tabs__wysiwyg ol > li::before {
		left:
			13px;

		width:
			34px;

		height:
			34px;
	}


	.about-profile-tabs__wysiwyg ul > li {
		padding-left:
			50px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.about-profile-tabs__tab,
	.about-profile-tabs__tab-icon,
	.about-profile-tabs__tab-arrow,
	.about-profile-tabs__wysiwyg ol > li,
	.about-profile-tabs__wysiwyg ul > li,
	.about-profile-tabs__panel-inner {
		transition: none !important;

		animation: none !important;
	}

}