/*
 * PHONKLAI Guided Care treatment index.
 * Presentation only: all visible content, pricing, links, icons and imagery
 * remain editable native Elementor widget data.
 */

.pk-treatment-index {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: none !important;
	margin: 0;
	overflow: clip;
	background: #f7f5ef;
	color: #062f28;
}

.pk-treatment-index > .e-con-inner,
.pk-treatment-index .pk-treatment-shell,
.pk-treatment-index .pk-treatment-shell > .e-con-inner {
	width: 100%;
	max-width: none !important;
	margin: 0;
}

.pk-treatment-index .pk-treatment-layout,
.pk-treatment-index .pk-treatment-layout > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(330px, 26.5%) minmax(0, 73.5%);
	align-items: stretch;
	width: 100%;
	max-width: none !important;
	margin: 0;
}

.pk-treatment-index .pk-treatment-intro {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex !important;
	align-self: start;
	width: 100%;
	min-width: 0;
	min-height: 1110px;
	height: 100vh;
	max-height: 1110px;
	padding: clamp(48px, 4.4vw, 74px) clamp(30px, 3.4vw, 54px) 34px;
	overflow: hidden;
	background-color: #043e32;
	background-position: 33% center !important;
	background-size: cover !important;
	color: #f8f6f0;
}

.pk-treatment-index .pk-treatment-eyebrow-row,
.pk-treatment-index .pk-treatment-eyebrow-row > .e-con-inner {
	display: grid !important;
	grid-template-columns: auto minmax(56px, 1fr);
	align-items: center;
	gap: 20px;
	width: 100%;
}

.pk-treatment-index .pk-treatment-eyebrow {
	width: auto;
}

.pk-treatment-index .pk-treatment-eyebrow .elementor-heading-title {
	color: #eff4ee;
	font-family: Manrope, sans-serif;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.pk-treatment-index .pk-treatment-eyebrow-rule {
	width: 100%;
}

.pk-treatment-index .pk-treatment-eyebrow-rule .elementor-divider-separator {
	width: 100%;
	border-color: rgba(246, 244, 237, 0.72);
}

.pk-treatment-index .pk-treatment-title {
	margin-top: 31px;
}

.pk-treatment-index .pk-treatment-title .elementor-heading-title {
	max-width: 8.6ch;
	color: #ffffff;
	font-family: Manrope, sans-serif;
	font-size: clamp(47px, 4vw, 64px);
	font-weight: 650;
	line-height: 0.99;
	letter-spacing: -0.058em;
}

.pk-treatment-index .pk-treatment-intro-copy {
	max-width: 29ch;
	margin-top: 22px;
}

.pk-treatment-index .pk-treatment-intro-copy p {
	margin: 0;
	color: #d5e0dc;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 430;
	line-height: 1.55;
}

.pk-treatment-index .pk-treatment-intro-rule {
	width: 100%;
	margin-top: 29px;
}

.pk-treatment-index .pk-treatment-intro-rule .elementor-divider-separator {
	width: 100%;
	border-color: rgba(235, 242, 237, 0.36);
}

.pk-treatment-index .pk-treatment-guide {
	width: 100%;
	margin-top: 13px;
}

.pk-treatment-index .pk-treatment-guide-item {
	width: 100%;
	padding: 12px 0;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 16px;
	text-align: left;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon-box-icon {
	flex: 0 0 auto;
	margin: 0 !important;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(222, 237, 226, 0.18);
	border-radius: 50%;
	background: rgba(190, 215, 195, 0.16);
	color: #ecf4ee;
	font-size: 21px;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon svg,
.pk-treatment-index .pk-treatment-meta-icon .elementor-icon svg,
.pk-treatment-index .elementor-button-icon svg {
	fill: currentColor;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon-box-title {
	margin: 0 0 3px;
	color: #ffffff;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.25;
}

.pk-treatment-index .pk-treatment-guide-item .elementor-icon-box-description {
	max-width: 26ch;
	margin: 0;
	color: #bdccc6;
	font-family: Manrope, sans-serif;
	font-size: 12.5px;
	font-weight: 430;
	line-height: 1.42;
}

.pk-treatment-index .pk-treatment-brand {
	width: 100%;
	margin-top: auto;
}

.pk-treatment-index .pk-treatment-logo {
	width: min(224px, 85%);
	mix-blend-mode: screen;
	filter: invert(1) grayscale(1) brightness(1.55);
}

.pk-treatment-index .pk-treatment-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.pk-treatment-index .pk-treatment-strapline .elementor-heading-title {
	color: #b9ccc2;
	font-family: Manrope, sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pk-treatment-index .pk-treatment-grid,
.pk-treatment-index .pk-treatment-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	width: 100%;
	max-width: none !important;
	margin: 0;
	background: #f7f5ef;
}

.pk-treatment-index .pk-treatment-card,
.pk-treatment-index .pk-treatment-card > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(205px, 0.88fr) minmax(235px, 1.12fr);
	align-items: stretch;
	width: 100%;
	max-width: none !important;
	min-height: 347px;
	margin: 0;
	overflow: hidden;
	border-right: 1px solid #d8ded8;
	border-bottom: 1px solid #d8ded8;
	background: #f7f5ef;
}

.pk-treatment-index .pk-treatment-card:nth-child(2n) {
	border-right: 0;
}

.pk-treatment-index .pk-treatment-card-info {
	position: relative;
	z-index: 1;
	display: flex !important;
	min-width: 0;
	padding: 18px 19px 17px 22px;
	background: #f7f5ef;
}

.pk-treatment-index .pk-treatment-number-line,
.pk-treatment-index .pk-treatment-number-line > .e-con-inner {
	display: grid !important;
	grid-template-columns: auto minmax(34px, 1fr);
	align-items: center;
	width: 100%;
}

.pk-treatment-index .pk-treatment-number .elementor-heading-title {
	color: #b7c4b7;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 53px;
	font-weight: 400;
	line-height: 0.86;
	letter-spacing: -0.05em;
}

.pk-treatment-index .pk-treatment-number-rule .elementor-divider-separator {
	width: 100%;
	border-color: #9fb2a5;
}

.pk-treatment-index .pk-treatment-card-title {
	margin-top: 13px;
}

.pk-treatment-index .pk-treatment-status {
	width: fit-content;
	margin-top: 13px;
}

.pk-treatment-index .pk-treatment-status .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 7px 11px 6px;
	border: 1px solid rgba(4, 62, 50, 0.16);
	border-radius: 999px;
	background: #e0b95a;
	color: #043e32;
	font-family: Manrope, sans-serif;
	font-size: 10px;
	font-weight: 820;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.pk-treatment-index .pk-treatment-card--coming-soon .pk-treatment-card-title {
	margin-top: 11px;
}

.pk-treatment-index .pk-treatment-card-title .elementor-heading-title {
	color: #071f1c;
	font-family: Manrope, sans-serif;
	font-size: clamp(23px, 1.8vw, 29px);
	font-weight: 720;
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.pk-treatment-index .pk-treatment-card-description {
	margin-top: 8px;
}

.pk-treatment-index .pk-treatment-card-description p {
	margin: 0;
	color: #52645d;
	font-family: Manrope, sans-serif;
	font-size: 12.5px;
	font-weight: 430;
	line-height: 1.42;
}

.pk-treatment-index .pk-treatment-meta-row {
	width: 100%;
	margin-top: 13px;
}

.pk-treatment-index .pk-treatment-meta-row + .pk-treatment-meta-row {
	margin-top: 7px;
}

.pk-treatment-index .pk-treatment-meta-icon {
	flex: 0 0 auto;
	width: 22px;
}

.pk-treatment-index .pk-treatment-meta-icon .elementor-icon {
	color: #052f29;
	font-size: 16px;
}

.pk-treatment-index .pk-treatment-meta-text .elementor-heading-title {
	color: #344a43;
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 520;
	line-height: 1.3;
}

.pk-treatment-index .pk-treatment-price {
	width: 100%;
	margin-top: auto;
	padding-top: 13px;
}

.pk-treatment-index .pk-treatment-from .elementor-heading-title {
	padding-bottom: 4px;
	color: #233c35;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 460;
	line-height: 1;
}

.pk-treatment-index .pk-treatment-amount .elementor-heading-title {
	color: #061f1b;
	font-family: Manrope, sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.pk-treatment-index .pk-treatment-card--coming-soon .pk-treatment-amount .elementor-heading-title {
	font-size: clamp(22px, 1.8vw, 28px);
	line-height: 1;
	letter-spacing: -0.025em;
}

.pk-treatment-index .pk-treatment-book {
	width: 100%;
	margin-top: 13px;
}

.pk-treatment-index .pk-treatment-book .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 11px 15px;
	border: 1px solid #005545;
	border-radius: 999px;
	background: #005545;
	color: #ffffff;
	font-family: Manrope, sans-serif;
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(2, 65, 53, 0.12);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pk-treatment-index .pk-treatment-book .elementor-button:hover {
	border-color: #123a58;
	background: #123a58;
	color: #ffffff;
	transform: translateY(-1px);
}

.pk-treatment-index .pk-treatment-image,
.pk-treatment-index .pk-treatment-image .elementor-widget-container,
.pk-treatment-index .pk-treatment-image a,
.pk-treatment-index .pk-treatment-image picture {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 347px;
	overflow: hidden;
}

.pk-treatment-index .pk-treatment-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 347px;
	object-fit: cover;
	object-position: center;
	transform: scale(1.001);
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pk-treatment-index .pk-treatment-card:hover .pk-treatment-image img {
	transform: scale(1.025);
}

.pk-treatment-index .pk-treatment-card--deep-tissue .pk-treatment-image img {
	object-position: 61% center;
}

.pk-treatment-index .pk-treatment-card--pregnancy .pk-treatment-image img {
	object-position: 50% center;
}

.pk-treatment-index .pk-treatment-card--personalised .pk-treatment-image img {
	object-position: 63% center;
}

.pk-treatment-index .pk-treatment-card--assisted-stretching .pk-treatment-image img {
	object-position: 64% center;
}

.pk-treatment-index .pk-treatment-compare {
	grid-column: 1 / -1;
	min-height: 76px;
	padding: 15px 28px;
	border-bottom: 1px solid #b8c5bb;
	background: #f2f3ec;
}

.pk-treatment-index .pk-treatment-compare-button .elementor-button {
	min-height: 44px;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: #063f33;
	font-family: Manrope, sans-serif;
	font-size: 12.5px;
	font-weight: 760;
	line-height: 1.2;
	text-decoration: none;
}

.pk-treatment-index .pk-treatment-compare-button .elementor-button:hover {
	color: #123a58;
}

.pk-treatment-index .pk-treatment-compare-note .elementor-heading-title {
	color: #63756e;
	font-family: Manrope, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pk-treatment-index a:focus-visible,
.pk-treatment-index .elementor-button:focus-visible {
	outline: 3px solid #f5b84c;
	outline-offset: 4px;
}

@media (max-width: 1180px) {
	.pk-treatment-index .pk-treatment-layout,
	.pk-treatment-index .pk-treatment-layout > .e-con-inner {
		grid-template-columns: minmax(300px, 31%) minmax(0, 69%);
	}

	.pk-treatment-index .pk-treatment-intro {
		min-height: 1240px;
		height: 100vh;
		max-height: 1240px;
		padding-inline: 34px;
	}

	.pk-treatment-index .pk-treatment-card,
	.pk-treatment-index .pk-treatment-card > .e-con-inner {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(305px, auto) 230px;
		min-height: 535px;
	}

	.pk-treatment-index .pk-treatment-image,
	.pk-treatment-index .pk-treatment-image .elementor-widget-container,
	.pk-treatment-index .pk-treatment-image a,
	.pk-treatment-index .pk-treatment-image picture,
	.pk-treatment-index .pk-treatment-image img {
		min-height: 230px;
		height: 230px;
	}
}

@media (max-width: 1024px) {
	.pk-treatment-index .pk-treatment-layout,
	.pk-treatment-index .pk-treatment-layout > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.pk-treatment-index .pk-treatment-intro {
		position: relative;
		top: auto;
		min-height: auto;
		height: auto;
		max-height: none;
		padding: 68px 44px 54px;
	}

	.pk-treatment-index .pk-treatment-title .elementor-heading-title {
		max-width: 12ch;
	}

	.pk-treatment-index .pk-treatment-guide,
	.pk-treatment-index .pk-treatment-guide > .e-con-inner {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 28px;
	}

	.pk-treatment-index .pk-treatment-brand {
		display: none !important;
	}

	.pk-treatment-index .pk-treatment-card,
	.pk-treatment-index .pk-treatment-card > .e-con-inner {
		grid-template-columns: minmax(190px, 0.92fr) minmax(215px, 1.08fr);
		grid-template-rows: none;
		min-height: 360px;
	}

	.pk-treatment-index .pk-treatment-image,
	.pk-treatment-index .pk-treatment-image .elementor-widget-container,
	.pk-treatment-index .pk-treatment-image a,
	.pk-treatment-index .pk-treatment-image picture,
	.pk-treatment-index .pk-treatment-image img {
		min-height: 360px;
		height: 100%;
	}
}

@media (max-width: 767px) {
	.pk-treatment-index .pk-treatment-intro {
		padding: 56px 20px 48px;
		background-position: 30% center !important;
	}

	.pk-treatment-index .pk-treatment-eyebrow-row,
	.pk-treatment-index .pk-treatment-eyebrow-row > .e-con-inner {
		grid-template-columns: auto minmax(48px, 1fr);
		gap: 14px;
	}

	.pk-treatment-index .pk-treatment-title {
		margin-top: 25px;
	}

	.pk-treatment-index .pk-treatment-title .elementor-heading-title {
		max-width: 9ch;
		font-size: clamp(42px, 13vw, 54px);
	}

	.pk-treatment-index .pk-treatment-intro-copy p {
		font-size: 15px;
	}

	.pk-treatment-index .pk-treatment-guide,
	.pk-treatment-index .pk-treatment-guide > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pk-treatment-index .pk-treatment-guide-item {
		padding: 10px 0;
	}

	.pk-treatment-index .pk-treatment-grid,
	.pk-treatment-index .pk-treatment-grid > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.pk-treatment-index .pk-treatment-card,
	.pk-treatment-index .pk-treatment-card > .e-con-inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto 230px;
		min-height: 0;
		border-right: 0;
	}

	.pk-treatment-index .pk-treatment-card-info {
		min-height: 355px;
		padding: 24px 20px 20px;
	}

	.pk-treatment-index .pk-treatment-number .elementor-heading-title {
		font-size: 48px;
	}

	.pk-treatment-index .pk-treatment-card-title .elementor-heading-title {
		font-size: 28px;
	}

	.pk-treatment-index .pk-treatment-card-description p {
		font-size: 13.5px;
	}

	.pk-treatment-index .pk-treatment-image,
	.pk-treatment-index .pk-treatment-image .elementor-widget-container,
	.pk-treatment-index .pk-treatment-image a,
	.pk-treatment-index .pk-treatment-image picture,
	.pk-treatment-index .pk-treatment-image img {
		min-height: 230px;
		height: 230px;
	}

	.pk-treatment-index .pk-treatment-compare {
		padding: 18px 20px 98px;
	}

	.pk-treatment-index .pk-treatment-compare-note .elementor-heading-title {
		font-size: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pk-treatment-index .pk-treatment-image img,
	.pk-treatment-index .pk-treatment-book .elementor-button {
		transition: none;
	}

	.pk-treatment-index .pk-treatment-card:hover .pk-treatment-image img,
	.pk-treatment-index .pk-treatment-book .elementor-button:hover {
		transform: none;
	}
}