/* ==========================================================================
   PINHOLE APPOINTMENT SECTION
   ISOLATED STYLES
   ========================================================================== */

.ph-appt-section {
	--ph-appt-blue: #155cf4;
	--ph-appt-blue-dark: #0d48dc;
	--ph-appt-navy: #071f5b;
	--ph-appt-text: #53668e;
	--ph-appt-border: #dae4f4;

	position: relative;

	display: block;

	width: 100%;

	margin: 0;

	padding:
		52px
		0;

	clear: both;

	background: #ffffff;

	overflow: visible;

	isolation: isolate;
}


/* ==========================================================================
   TWO COLUMN WRAPPER
   ========================================================================== */

.ph-appt-wrap {
	position: relative;

	display: grid;

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

	align-items: stretch;

	gap: 20px;

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

	margin:
		0
		auto;

	padding: 0;

	background: transparent;
}


/* ==========================================================================
   TWO CARDS
   ========================================================================== */

.ph-appt-stories,
.ph-appt-form-card {
	position: relative;

	width: 100%;
	min-width: 0;

	margin: 0;

	border:
		1px
		solid
		#e0e8f5;

	border-radius: 27px;

	background: #ffffff;

	box-shadow:
		0 15px 40px
		rgba(30, 58, 120, 0.075);

	box-sizing: border-box;
}


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

.ph-appt-stories {
	display: flex;

	flex-direction: column;

	padding:
		52px
		52px
		34px;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfcff 58%,
			#f2f6ff 100%
		);
}


.ph-appt-stories__shape {
	position: absolute;

	top: -100px;
	left: -105px;

	width: 360px;
	height: 245px;

	border-radius:
		0
		0
		100%
		0;

	background:
		linear-gradient(
			135deg,
			rgba(216, 228, 255, 0.86),
			rgba(243, 247, 255, 0)
		);

	pointer-events: none;
}


/* ==========================================================================
   KICKER
   ========================================================================== */

.ph-appt-kicker {
	position: relative;

	z-index: 2;

	display: inline-flex;

	align-items: center;

	gap: 17px;

	color: #2557da;

	font-size: 11px;

	font-weight: 800;

	line-height: 1;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.ph-appt-kicker i {
	display: block;

	width: 49px;
	height: 2px;

	background: #3167ee;
}


/* ==========================================================================
   STORY HEADER
   ========================================================================== */

.ph-appt-stories__header {
	position: relative;

	z-index: 2;
}


.ph-appt-stories__quote {
	position: absolute;

	top: -8px;
	right: 0;

	color: #dce6fa;

	font-family:
		Georgia,
		serif;

	font-size: 100px;

	font-weight: 700;

	line-height: 0.7;
}


/* ==========================================================================
   SLIDER
   GRID STACKING = REAL SECTION HEIGHT
   ========================================================================== */

.ph-appt-stories__slider {
	position: relative;

	z-index: 2;

	display: grid;

	grid-template-areas:
		"story";

	flex: 1;

	width: 100%;

	margin-top: 28px;
}


.ph-appt-story {
	grid-area: story;

	display: flex;

	flex-direction: column;

	width: 100%;

	min-height: 465px;

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.55s ease,
		visibility 0.55s ease;
}


.ph-appt-story.is-active {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;
}


/* ==========================================================================
   STARS
   ========================================================================== */

.ph-appt-story__stars {
	display: flex;

	gap: 3px;

	color: #ffad00;

	font-size: 25px;

	line-height: 1;
}


/* ==========================================================================
   REVIEW TEXT
   ========================================================================== */

.ph-appt-story__review {
	width: 100%;

	max-width: 590px;

	margin:
		28px
		0
		0;

	padding: 0;

	border: 0;

	color: var(--ph-appt-navy);

	font-size:
		clamp(
			20px,
			1.45vw,
			27px
		);

	font-weight: 500;

	line-height: 1.5;

	letter-spacing: -0.35px;

	text-transform: none;
}


/* ==========================================================================
   PERSON
   ========================================================================== */

.ph-appt-story__person {
	display: flex;

	align-items: center;

	gap: 22px;

	margin-top: auto;

	padding-top: 30px;
}


.ph-appt-story__avatar {
	display: grid;

	width: 82px;
	height: 82px;

	flex:
		0
		0
		82px;

	place-items: center;

	border:
		5px
		solid
		#ffffff;

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#edf3ff,
			#dce6fa
		);

	box-shadow:
		0 8px 20px
		rgba(50, 80, 150, 0.13),
		0 0 0 2px
		rgba(60, 105, 220, 0.15);

	color: #91a7d8;
}


.ph-appt-story__avatar svg {
	width: 67px;
	height: 67px;

	fill: currentColor;

	stroke: none;
}


.ph-appt-story__person strong {
	color: var(--ph-appt-navy);

	font-size: 22px;

	font-weight: 750;
}


/* ==========================================================================
   STORY FOOTER
   ========================================================================== */

.ph-appt-stories__footer {
	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;

	gap: 16px;

	margin-top: 18px;

	color: #5674bb;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.ph-appt-stories__line {
	width: 48px;
	height: 2px;

	background: #3268ee;
}


.ph-appt-stories__trusted {
	position: absolute;

	right: 40px;
	bottom: 25px;

	z-index: 1;

	color:
		rgba(77, 112, 205, 0.21);

	font-family:
		"Brush Script MT",
		cursive;

	font-size: 43px;

	font-style: italic;

	line-height: 0.82;

	text-align: center;

	transform:
		rotate(-7deg);

	pointer-events: none;
}


/* ==========================================================================
   RIGHT FORM CARD
   ========================================================================== */

.ph-appt-form-card {
	display: flex;

	flex-direction: column;

	padding:
		52px
		40px
		34px;

	overflow: visible;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.ph-appt-form-card__badge {
	position: absolute;

	top: 20px;
	right: 22px;

	z-index: 5;

	display: grid;

	width: 72px;
	height: 72px;

	place-items: center;

	border:
		6px
		solid
		#ffffff;

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#0c2d75,
			#1159dc
		);

	box-shadow:
		0 10px 24px
		rgba(24, 77, 184, 0.22);

	color: #ffffff;
}


.ph-appt-form-card__badge svg {
	width: 39px;
	height: 39px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.7;

	stroke-linecap: round;

	stroke-linejoin: round;
}


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

.ph-appt-form-card__header {
	position: relative;

	padding-right: 90px;
}


.ph-appt-form-card__header h2 {
	margin:
		25px
		0
		0;

	color: var(--ph-appt-navy);

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

	font-size:
		clamp(
			39px,
			2.8vw,
			50px
		);

	font-weight: 500;

	line-height: 1.05;

	letter-spacing: -1.2px;

	text-transform: none;
}


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

.ph-appt-form {
	position: relative;

	width: 100%;

	margin-top: 32px;
}


/* ==========================================================================
   GRIDS
   ========================================================================== */

.ph-appt-form__grid {
	display: grid;

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

	gap: 15px;
}


.ph-appt-form__grid--three {
	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(0, 1.05fr)
		minmax(0, 0.95fr);

	margin-top: 15px;
}


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

.ph-appt-field {
	position: relative;

	display: flex;

	align-items: center;

	width: 100%;
	min-width: 0;

	min-height: 60px;

	padding:
		0
		20px;

	border:
		1px
		solid
		var(--ph-appt-border);

	border-radius: 17px;

	background: #ffffff;

	color: #103173;

	box-sizing: border-box;

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


.ph-appt-field:focus-within {
	border-color: #7fa3f8;

	box-shadow:
		0 0 0 4px
		rgba(36, 93, 244, 0.06);
}


.ph-appt-field > svg {
	width: 24px;
	height: 24px;

	flex:
		0
		0
		24px;

	margin-right: 17px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.7;

	stroke-linecap: round;

	stroke-linejoin: round;
}


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

.ph-appt-field input,
.ph-appt-field select,
.ph-appt-field textarea {
	display: block;

	width: 100%;
	min-width: 0;

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	background: transparent;

	box-shadow: none;

	color: #293e70;

	font-family: inherit;

	font-size: 14px;

	font-weight: 500;

	box-sizing: border-box;
}


.ph-appt-field input::placeholder,
.ph-appt-field textarea::placeholder {
	color: #647293;

	opacity: 1;
}


.ph-appt-field select {
	cursor: pointer;
}


/* ==========================================================================
   MESSAGE
   ========================================================================== */

.ph-appt-field--message {
	align-items: flex-start;

	min-height: 120px;

	margin-top: 15px;

	padding:
		18px
		20px;
}


.ph-appt-field--message > svg {
	margin-top: 1px;
}


.ph-appt-field--message textarea {
	min-height: 82px;

	resize: vertical;

	line-height: 1.5;
}


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

.ph-appt-form__bottom {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	margin-top: 25px;
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.ph-appt-submit {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 27px;

	min-width: 330px;

	min-height: 57px;

	padding:
		11px
		30px;

	border: 0;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--ph-appt-blue),
			var(--ph-appt-blue-dark)
		);

	box-shadow:
		0 12px 27px
		rgba(24, 88, 239, 0.23);

	color: #ffffff;

	font-family: inherit;

	font-size: 13px;

	font-weight: 750;

	letter-spacing: 0.3px;

	text-transform: uppercase;

	cursor: pointer;

	transition:
		background 0.25s ease,
		box-shadow 0.25s ease;
}


.ph-appt-submit svg {
	width: 22px;
	height: 22px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.ph-appt-submit:hover {
	background:
		linear-gradient(
			90deg,
			#1055e8,
			#0b42d7
		);

	box-shadow:
		0 14px 30px
		rgba(24, 88, 239, 0.27);
}


.ph-appt-submit:disabled {
	opacity: 0.62;

	cursor: wait;
}


/* ==========================================================================
   PRIORITY
   ========================================================================== */

.ph-appt-priority {
	display: flex;

	align-items: flex-end;

	gap: 16px;

	color: #8495bb;

	font-size: 9px;

	font-weight: 800;

	line-height: 1.5;

	letter-spacing: 2.4px;

	text-transform: uppercase;
}


.ph-appt-priority i {
	width: 35px;
	height: 2px;

	margin-bottom: 7px;

	background: #3166ec;
}


/* ==========================================================================
   RESPONSE
   ========================================================================== */

.ph-appt-response {
	width: 100%;

	min-height: 21px;

	margin-top: 13px;

	font-size: 13px;

	font-weight: 600;

	line-height: 1.45;
}


.ph-appt-response.is-success {
	color: #128047;
}


.ph-appt-response.is-error {
	color: #c73131;
}


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

.ph-appt-honeypot {
	position: absolute !important;

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

	margin: -1px !important;

	overflow: hidden !important;

	clip:
		rect(0 0 0 0) !important;

	clip-path:
		inset(50%) !important;

	white-space: nowrap !important;
}


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

@media
	(min-width: 1101px)
	and
	(max-height: 850px) {

	.ph-appt-section {
		padding:
			60px
			0;
	}


	.ph-appt-wrap {
		width:
			min(
				calc(100% - 64px),
				1420px
			);
	}


	.ph-appt-stories {
		padding:
			42px
			44px
			30px;
	}


	.ph-appt-form-card {
		padding:
			42px
			34px
			30px;
	}


	.ph-appt-story {
		min-height: 405px;
	}


	.ph-appt-story__review {
		font-size: 20px;

		line-height: 1.42;
	}


	.ph-appt-story__avatar {
		width: 70px;
		height: 70px;

		flex-basis: 70px;
	}


	.ph-appt-story__avatar svg {
		width: 57px;
		height: 57px;
	}


	.ph-appt-story__person strong {
		font-size: 19px;
	}


	.ph-appt-form-card__header h2 {
		margin-top: 18px;

		font-size: 40px;
	}


	.ph-appt-form {
		margin-top: 23px;
	}


	.ph-appt-field {
		min-height: 53px;
	}


	.ph-appt-field--message {
		min-height: 105px;
	}


	.ph-appt-field--message textarea {
		min-height: 69px;
	}


	.ph-appt-submit {
		min-width: 295px;

		min-height: 51px;
	}
}


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

@media (max-width: 1100px) {

	.ph-appt-section {
		padding:
			44px
			0;
	}


	.ph-appt-wrap {
		grid-template-columns: 1fr;

		width:
			calc(100% - 50px);

		gap: 22px;
	}


	.ph-appt-story {
		min-height: 430px;
	}
}


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

@media (max-width: 767px) {

	.ph-appt-section {
		padding:
			34px
			0;
	}


	.ph-appt-wrap {
		width:
			calc(100% - 24px);

		gap: 18px;
	}


	.ph-appt-stories {
		padding:
			38px
			23px
			28px;

		border-radius: 22px;
	}


	.ph-appt-story {
		min-height: 500px;
	}


	.ph-appt-story__review {
		font-size: 18px;
	}


	.ph-appt-stories__trusted {
		display: none;
	}


	.ph-appt-form-card {
		padding:
			39px
			20px
			28px;

		border-radius: 22px;
	}


	.ph-appt-form-card__header {
		padding-right: 65px;
	}


	.ph-appt-form-card__header h2 {
		font-size: 34px;
	}


	.ph-appt-form-card__badge {
		top: 16px;
		right: 12px;

		width: 58px;
		height: 58px;
	}


	.ph-appt-form-card__badge svg {
		width: 31px;
		height: 31px;
	}


	.ph-appt-form__grid,
	.ph-appt-form__grid--three {
		grid-template-columns: 1fr;

		gap: 13px;
	}


	.ph-appt-form__grid--three {
		margin-top: 13px;
	}


	.ph-appt-field--message {
		margin-top: 13px;
	}


	.ph-appt-form__bottom {
		flex-direction: column;

		align-items: stretch;
	}


	.ph-appt-submit {
		width: 100%;

		min-width: 0;
	}


	.ph-appt-priority {
		justify-content: flex-end;
	}
}


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

@media (max-width: 480px) {

	.ph-appt-story {
		min-height: 535px;
	}


	.ph-appt-story__review {
		font-size: 17px;
	}


	.ph-appt-form-card__header h2 {
		font-size: 30px;
	}


	.ph-appt-field {
		padding:
			0
			16px;
	}


	.ph-appt-field > svg {
		width: 22px;
		height: 22px;

		flex-basis: 22px;

		margin-right: 13px;
	}
}


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

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

	.ph-appt-story {
		transition: none;
	}
}