/* =========================================================
   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;
	}

}