/**
 * Treatment service page
 * BCM: c-treatment-header, c-treatment-intro, c-treatment-before-and-after,
 *      c-treatment-procedure-info, c-treatment-summary-information,
 *      c-treatment-customer-feedback, c-treatment-key-features, u-treatment-section-title,
 *      c-treatment-post-faq-cta
 *
 * Motion blocks follow c-section__content row wrappers in the shortcode (rendered as .g-cols.c-section__content).
 */

:root {
	--meda-treatment-beige: var(--meda-section-bg);
}

/* -------------------------------------------------------------------------
   Shared typography utilities
   ------------------------------------------------------------------------- */

.u-treatment-section-title h1,
.u-treatment-section-title h2,
.u-treatment-section-title h3,
h1.u-treatment-section-title,
h2.u-treatment-section-title,
h3.u-treatment-section-title {
	margin: 0;
	font-family: var(--h2-font-family);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--meda-content-heading);
}

.u-treatment-section-title h2,
h2.u-treatment-section-title {
	font-size: var(--meda-text-fluid-title);
	font-weight: 500;
}

.u-treatment-section-title h3,
h3.u-treatment-section-title {
	font-family: var(--h2-font-family); !important;
	font-size: var(--meda-text-fluid-title) !important;
	font-weight: 500 !important;
	font-style: normal;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	text-align: center;
}

.u-treatment-section-title.u-large-heading h2,
.u-treatment-section-title.u-large-heading h3,
h2.u-treatment-section-title.u-large-heading {
	font-size: var(--h2-font-size);
	font-weight: 400;
	text-align: center;
}

.c-treatment-section__intro,
.c-treatment-section__intro p {
	margin: 0;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-section__content {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Page header
   ------------------------------------------------------------------------- */

.l-section.c-treatment-header {
	background: var(--meda-shell-white) !important;
}

.c-treatment-header h1,
.c-treatment-header .vc_custom_heading {
	margin: 0;
	font-family: var(--h2-font-family);
	font-size: var(--meda-text-fluid-display);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--meda-content-heading);
}

/* -------------------------------------------------------------------------
   Intro — split hero (beige + image)
   ------------------------------------------------------------------------- */

.l-section.c-treatment-intro {
	background: var(--meda-treatment-beige) !important;
	overflow: hidden;
}

/* 15px top padding on the highlights/description box directly below the intro
   heading ("… Treatment Highlights"). */
.l-section.c-treatment-intro .c-treatment-intro__description.w-vwrapper {
	padding-top: 15px !important;
}

.c-treatment-intro__icons-list {
	gap: 0.7rem !important;
}

.c-treatment-intro__icons-item {
	gap: 0.625rem !important;
	align-items: center !important;
}

/*
 * Locations row — class on the hwrapper (or the value column).
 * Desktop keeps the other fact rows vertically centred; this one top-aligns so a
 * wrapping clinic list lines up with the pin icon and "Location:" label.
 * Mobile already uses align-items:start for every icons-item (see max-width 600px).
 */
@media (min-width: 601px) {
	.c-treatment-intro__icons-item.c-treatment-intro_locations,
	.c-treatment-intro__icons-item:has(.c-treatment-intro_locations) {
		align-items: flex-start !important;
		/* Tighter than the 0.625rem fact-row gap so "Location:" reads as a
		   label for the wrapping list, not a separate column. */
		gap: 0.25rem !important;
	}

	.c-treatment-intro__icons-item.c-treatment-intro_locations .w-iconbox,
	.c-treatment-intro__icons-item:has(.c-treatment-intro_locations) .w-iconbox {
		padding-right: 0;
		margin-right: 0;
	}

	.c-treatment-intro__icons-item.c-treatment-intro_locations .w-iconbox-meta,
	.c-treatment-intro__icons-item:has(.c-treatment-intro_locations) .w-iconbox-meta {
		padding: 0;
		margin: 0;
	}
}

.c-treatment-intro__icons-item-img .w-iconbox-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	margin-right: 0 !important;
}

.c-treatment-intro__icons-item-img .w-iconbox-icon svg,
.c-treatment-intro__icons-item-img .w-iconbox-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.c-treatment-intro__icons-item-text,
.c-treatment-intro__description,
.c-treatment-intro__icons-item + .w-vwrapper:not([class*="__"]) {
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-intro__icons-item-text {
	font-weight: 400;
}

.c-treatment-locations__link {
	display: inline;
	color: #000 !important;
	-webkit-text-fill-color: currentColor;
	background: none;
	text-decoration: none !important;
	transition: color var(--meda-duration-fast) var(--meda-ease);
}

.c-treatment-locations__link .meda-header-nav-underline {
	display: none !important;
}

.no-touch .c-treatment-locations__link:hover {
	color: var(--meda-gold) !important;
}

.c-treatment-locations__link:focus-visible {
	outline: 2px solid var(--meda-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

.c-treatment-intro .c-treatment-intro__icons-list + .w-vwrapper ul {
	margin: 0;
	padding-left: 1.5rem;
}

.c-treatment-intro .c-treatment-intro__icons-list + .w-vwrapper li {
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-intro .c-treatment-intro__icons-list + .w-vwrapper p {
	margin: 0 0 1rem;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-intro .c-treatment-intro__icons-list + .w-vwrapper ul + p {
	margin-top: 1rem;
}

.c-treatment-intro__description:empty {
	display: none;
	margin: 0;
}

/*
 * The description markup carries .c-treatment-intro__description on BOTH the outer
 * w-vwrapper and the inner text column. The intro GSAP timeline animates only the outer
 * wrapper, but the motion-boot pre-hide (opacity:0) also grabs the inner one and holds it
 * hidden until the whole intro sequence completes (meda-treatment-intro-is-complete) — that
 * end-of-sequence gate is the lag before the copy shows. Keep the inner element visible so
 * it fades in together with its GSAP-animated parent (icon-box beat) instead of waiting.
 */
.c-treatment-intro .c-treatment-intro__description .c-treatment-intro__description {
	opacity: 1 !important;
}

.c-treatment-intro__price-section {
	gap: 0.625rem !important;
	margin-top: 0.5rem;
}

.c-treatment-intro__price-heading,
.c-treatment-intro__price-heading p {
	margin: 0;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 600;
	line-height: 1.4;
	color: var(--meda-content-text);
}

.c-treatment-intro .c-treatment-intro__price-range,
.c-treatment-intro h3.c-treatment-intro__price-range {
	margin: 0;
	font-family: var(--h2-font-family); !important;
	font-size: var(--meda-text-fluid-display) !important;
	font-weight: 400 !important;
	font-style: normal;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	background: var(--meda-gold-gradient, var(--meda-gold-gradient));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.c-treatment-intro .c-treatment-intro__price-range .w-post-elm-value {
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit;
	-webkit-text-fill-color: inherit;
}

.c-treatment-intro__price-disclaimer {
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-intro__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem !important;
	margin-top: 0.75rem;
}

/* Pattern A chrome + GSAP hover live in meda-shared.css */

/* -------------------------------------------------------------------------
   Before & After
   ------------------------------------------------------------------------- */

.l-section.c-treatment-before-and-after {
	background: var(--meda-shell-white) !important;
}

.c-treatment-before-and-after .u-treatment-section-title h3 {
	text-align: center;
}

.c-treatment-before-and-after .c-treatment-section__intro {
	margin: 0.75rem auto 0;
	text-align: center;
}

.c-treatment-before-and-after .c-treatment-section__carousel {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.c-treatment-before-and-after .c-treatment-section__carousel .w-grid-item-h,
.c-treatment-before-and-after .c-treatment-section__carousel .post_image {
	border-radius: 5px;
	overflow: hidden;
}

.c-treatment-before-and-after .c-treatment-section__carousel img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Signal that tapping an image opens the lightbox (see
   assets/js/components/meda-treatment-before-after-lightbox.js). */
.c-treatment-before-and-after .c-treatment-section__carousel .w-grid-item-anchor {
	cursor: zoom-in;
}

/* -------------------------------------------------------------------------
   Before & after lightbox (Magnific Popup, scoped via the `meda-ba-mfp`
   mainClass set in meda-treatment-before-after-lightbox.js)
   ------------------------------------------------------------------------- */

/* Cap the image at ~80% of the viewport height with automatic width, so the
   original aspect ratio is preserved (contain, never stretched). The
   !important overrides Magnific's inline verticalFit max-height.
   min(80vh, 80svh): on iOS Safari `vh` measures the LARGE viewport, so with the
   URL bar showing, a plain 80vh image extended underneath it. svh is the small
   viewport; min() keeps the smaller of the two and degrades to 80vh where svh
   is unsupported.
   The 4.5rem reserve is the caption row (image title + "1 of 5") that sits
   under the photo, so the whole lightbox stays inside that viewport budget. */
.meda-ba-mfp img.mfp-img {
	width: auto !important;
	height: auto !important;
	max-height: calc(80vh - 4.5rem) !important;
	max-height: min(calc(80vh - 4.5rem), calc(80svh - 4.5rem)) !important;
	max-width: 92vw !important;
	padding: 0;
	margin: 0 auto;
}

/* Magnific parks .mfp-bottom-bar on top of the photo (absolute, pulled up
   into the image) and paints the title and counter in light gray. On a light
   before/after that text has no room and no contrast. Stack the caption under
   the image instead, and give the counter its own column so "12 of 12" is
   never squeezed into the title. */
.meda-ba-mfp .mfp-figure {
	line-height: normal;
}

.meda-ba-mfp .mfp-figure figure {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: fit-content;
	max-width: 92vw;
	margin: 0 auto;
	line-height: normal;
}

.meda-ba-mfp .mfp-figure figcaption {
	display: block;
	margin: 0;
	padding: 0;
	line-height: normal;
}

.meda-ba-mfp .mfp-bottom-bar {
	position: static;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: auto;
	margin: 0.85rem 0 0;
	padding: 0 0.15rem;
	line-height: 1.4;
	box-sizing: border-box;
}

.meda-ba-mfp .mfp-title {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	color: #fff;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	overflow-wrap: anywhere;
}

.meda-ba-mfp .mfp-counter {
	position: static;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	color: #fff;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* Gradual, gentle entrance for the opening image. Overrides Impreza's quick
   0.2s .mfp-fade pop with a slower ease-out fade + zoom. */
.meda-ba-mfp.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	transform: scale(0.94);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.meda-ba-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	transform: scale(1);
}
/* Keep the close snappy (stays within the JS removalDelay of 300ms). */
.meda-ba-mfp.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	transform: scale(0.94);
	transition-duration: 0.28s;
}
.meda-ba-mfp.mfp-fade.mfp-bg {
	transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.meda-ba-mfp.mfp-fade.mfp-wrap .mfp-content,
	.meda-ba-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-content,
	.meda-ba-mfp.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
		transform: none;
		transition-duration: 0.01s;
	}
}

/* -------------------------------------------------------------------------
   Procedure information
   ------------------------------------------------------------------------- */

.l-section.c-treatment-procedure-info {
	background: var(--meda-treatment-beige) !important;
}

.c-treatment-procedure-info .u-treatment-section-title.u-large-heading {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.c-treatment-procedure-info__item {
	gap: 0.75rem !important;
}

.c-treatment-procedure-info__item .w-iconbox-icon {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
}

.c-treatment-procedure-info__item .w-iconbox-icon svg,
.c-treatment-procedure-info__item .w-iconbox-icon img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 2.5rem;
}

.c-treatment-procedure-info__item .post_custom_field,
.c-treatment-procedure-info__item .wpb_wrapper,
.c-treatment-procedure-info__item p,
.c-treatment-procedure-info__item li {
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.5;
	color: var(--meda-content-text);
}

.c-treatment-procedure-info__item h3,
.c-treatment-procedure-info__item h4,
.c-treatment-procedure-info__item strong,
.c-treatment-procedure-info__item .w-post-elm-value:first-child {
	font-size: var(--meda-text-xl);
	font-weight: 400;
}

.c-treatment-procedure-info .c-treatment-section__content + .c-treatment-section__content {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.c-treatment-procedure-info .c-treatment-section__subtitle {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.c-treatment-procedure-info .c-treatment-section__subtitle .u-treatment-section-title h3,
.c-treatment-procedure-info .c-treatment-section__subtitle h3.u-treatment-section-title {
	text-align: left;
}

/* Customer feedback cards */
.c-treatment-customer-feedback {
	margin-top: 0.5rem;
}

.c-treatment-customer-feedback .c-treatment-discomfort,
.c-treatment-customer-feedback .c-treatment-longevity {
	width: 100%;
	max-width: none;
}

.c-treatment-customer-feedback .c-treatment-discomfort__card,
.c-treatment-customer-feedback .c-treatment-longevity__card {
	max-width: none;
	width: 100%;
}

/* Key features — heading + tabs */
.c-treatment-key-features {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.c-treatment-key-features .u-treatment-section-title h2,
.c-treatment-key-features h2.u-treatment-section-title {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-family: var(--h2-font-family);
	font-size: var(--meda-text-fluid-title);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: var(--meda-content-text);
}

.c-treatment-key-features .w-tabs {
	width: 100%;
}

.c-treatment-key-features .w-tabs-list {
	position: relative;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.c-treatment-key-features .w-tabs.style_simple2 .w-tabs-list .w-tabs-item.active:after {
	background: var(--color-dark-pink);
}


.c-treatment-key-features .w-tabs-list-h {
	display: flex !important;
	align-items: flex-end;
	width: 100%;
}

.c-treatment-key-features .w-tabs-item {
	position: relative;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
}

.c-treatment-key-features .w-tabs-item-title {
	display: block;
	width: 100%;
	padding: 0 0.75rem 1rem;
	border: 0 !important;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-lg);
	font-weight: 400;
	line-height: 1.5;
	color: var(--meda-content-text);
	white-space: nowrap;
}

.c-treatment-key-features .w-tabs.meda-treatment-key-features-tabs .w-tabs-item.active,
.c-treatment-key-features .w-tabs.meda-treatment-key-features-tabs .w-tabs-item.active .w-tabs-item-title {
	color: var(--color-dark-pink);
}

.c-treatment-key-features .w-tabs-item::after {
	display: none;
}

.c-treatment-key-features .w-tabs.meda-treatment-key-features-tabs .w-tabs-list-bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 4px;
	background: var(--color-dark-pink);
	transition: left var(--meda-duration-fast) var(--meda-ease),
		width var(--meda-duration-fast) var(--meda-ease);
	z-index: 1;
}

.c-treatment-key-features .w-tabs-section-header {
	display: none;
}

.c-treatment-key-features .w-tabs-sections {
	margin-top: 2.75rem;
}

.c-treatment-key-features .w-tabs-section-content {
	height: auto !important;
	overflow: visible !important;
	padding-top: 0 !important;
}

.c-treatment-key-features .w-tabs-section-content-h,
.c-treatment-key-features .w-tabs-section-content-h p {
	margin: 0;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.5;
	color: var(--meda-content-text);
}

/* -------------------------------------------------------------------------
   Treatment summary + general information
   ------------------------------------------------------------------------- */

.l-section.c-treatment-summary-information,
.l-section.c-treatment-treatment-summary-information {
	background: var(--meda-shell-white) !important;
}

.c-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2,
.c-treatment-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2 {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.c-treatment-summary-information .u-treatment-section-title.u-large-heading,
.c-treatment-treatment-summary-information .u-treatment-section-title.u-large-heading {
	margin-bottom: 1.25rem;
	text-align: left;
}

.c-treatment-summary-information .w-image,
.c-treatment-summary-information .w-image-h,
.c-treatment-summary-information .w-video,
.c-treatment-summary-information .c-treatment-summary-media,
.c-treatment-summary-information .c-treatment-summary-media__figure,
.c-treatment-treatment-summary-information .w-image,
.c-treatment-treatment-summary-information .w-image-h,
.c-treatment-treatment-summary-information .w-video,
.c-treatment-treatment-summary-information .c-treatment-summary-media,
.c-treatment-treatment-summary-information .c-treatment-summary-media__figure {
	border-radius: 5px;
	overflow: hidden;
}

.c-treatment-summary-information .w-image img,
.c-treatment-treatment-summary-information .w-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.c-treatment-summary-information .c-treatment-summary,
.c-treatment-treatment-summary-information .c-treatment-summary {
	width: 100%;
}

/* Self-hosted files have no intrinsic size until the browser reads the
   file header. Without a reserved box they paint at the UA default
   300×150 — a short wide rectangle — then jump. Hold 16/9 (or the
   portrait ratio, once known) and cover the frame from the first paint. */
.c-treatment-summary-information .w-video:has(video),
.c-treatment-treatment-summary-information .w-video:has(video) {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #111;
	overflow: hidden;
}

.c-treatment-summary-information .w-video:has(video) .w-video-h,
.c-treatment-treatment-summary-information .w-video:has(video) .w-video-h,
.c-treatment-summary-information .w-video:has(video) video,
.c-treatment-treatment-summary-information .w-video:has(video) video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.c-treatment-summary-information .w-video:has(video) video,
.c-treatment-treatment-summary-information .w-video:has(video) video {
	object-fit: cover;
}

/* Video poster — stretch to the sibling accordion column. `:has(.w-video)` /
   `:has(.c-treatment-summary-media__figure--video)` keeps empty background-
   image columns (`.c-split-section__media` with no inner media) untouched. */
.c-treatment-summary-information .w-video.meda-video-poster,
.c-treatment-treatment-summary-information .w-video.meda-video-poster {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #111;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* YouTube Shorts / portrait oEmbed — full-width poster; 9:16 on stacked
   layouts. Desktop stretch (below) fills the accordion column with cover. */
.c-treatment-summary-information .w-video.meda-video-poster.is-vertical,
.c-treatment-treatment-summary-information .w-video.meda-video-poster.is-vertical,
.c-treatment-summary-information .c-treatment-summary-media__figure--video.is-vertical,
.c-treatment-treatment-summary-information .c-treatment-summary-media__figure--video.is-vertical {
	width: 100%;
	aspect-ratio: 9 / 16;
}

.c-treatment-summary-information .c-treatment-summary-media__figure--video.is-vertical .c-treatment-summary-media__video,
.c-treatment-treatment-summary-information .c-treatment-summary-media__figure--video.is-vertical .c-treatment-summary-media__video {
	aspect-ratio: 9 / 16;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hide the raw iframe before JS swaps in the poster so the 300×150
   YouTube default never flashes. Shorts fall through Impreza's provider
   regex to WP oEmbed (no `.has_iframe`), so `:has(iframe)` covers both. */
.c-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster),
.c-treatment-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster) {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111;
}

.c-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster).is-vertical,
.c-treatment-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster).is-vertical {
	aspect-ratio: 9 / 16;
}

.c-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster) .w-video-h,
.c-treatment-treatment-summary-information .w-video:has(iframe):not(.meda-video-poster) .w-video-h {
	opacity: 0;
}

.c-treatment-summary-information .w-video.meda-video-poster .w-video-h,
.c-treatment-treatment-summary-information .w-video.meda-video-poster .w-video-h,
.c-treatment-summary-information .w-video.meda-video-poster .w-video-play,
.c-treatment-treatment-summary-information .w-video.meda-video-poster .w-video-play {
	display: none !important;
}

/* Self-hosted file with no custom cover: the video frame is the thumbnail. */
.c-treatment-summary-information .w-video.meda-video-poster.has-native-poster .w-video-h,
.c-treatment-treatment-summary-information .w-video.meda-video-poster.has-native-poster .w-video-h {
	display: block !important;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.c-treatment-summary-information .w-video.meda-video-poster.has-native-poster .w-video-h video,
.c-treatment-treatment-summary-information .w-video.meda-video-poster.has-native-poster .w-video-h video {
	pointer-events: none;
	object-fit: cover;
}

.c-treatment-summary-information .w-video.meda-video-poster .c-treatment-summary-media__play,
.c-treatment-treatment-summary-information .w-video.meda-video-poster .c-treatment-summary-media__play,
.c-treatment-summary-information .c-treatment-summary-media__figure--video .c-treatment-summary-media__play,
.c-treatment-treatment-summary-information .c-treatment-summary-media__figure--video .c-treatment-summary-media__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.42) 0%,
		rgba(0, 0, 0, 0.22) 42%,
		rgba(0, 0, 0, 0.1) 100%
	);
	cursor: pointer;
	transition: background 0.3s var(--meda-ease, ease);
}

.no-touch .c-treatment-summary-information .w-video.meda-video-poster .c-treatment-summary-media__play:hover,
.no-touch .c-treatment-treatment-summary-information .w-video.meda-video-poster .c-treatment-summary-media__play:hover,
.no-touch .c-treatment-summary-information .c-treatment-summary-media__figure--video .c-treatment-summary-media__play:hover,
.no-touch .c-treatment-treatment-summary-information .c-treatment-summary-media__figure--video .c-treatment-summary-media__play:hover {
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.52) 0%,
		rgba(0, 0, 0, 0.28) 42%,
		rgba(0, 0, 0, 0.14) 100%
	);
}

.c-treatment-summary-information .c-treatment-summary-media__play-icon,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play-icon {
	display: block;
	width: 68px;
	height: 68px;
	overflow: visible;
	color: var(--meda-gold);
	shape-rendering: geometricPrecision;
	transition:
		transform 0.3s var(--meda-ease, ease),
		color 0.3s var(--meda-ease, ease);
}

.c-treatment-summary-information .c-treatment-summary-media__play-icon-ring,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play-icon-ring {
	fill: #fff;
	stroke: currentColor;
}

.c-treatment-summary-information .c-treatment-summary-media__play-icon-mark,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play-icon-mark {
	fill: currentColor;
	stroke: none;
}

.no-touch .c-treatment-summary-information .c-treatment-summary-media__play:hover .c-treatment-summary-media__play-icon,
.no-touch .c-treatment-treatment-summary-information .c-treatment-summary-media__play:hover .c-treatment-summary-media__play-icon,
.c-treatment-summary-information .c-treatment-summary-media__play:focus-visible .c-treatment-summary-media__play-icon,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play:focus-visible .c-treatment-summary-media__play-icon {
	transform: scale(1.05);
	color: var(--meda-gold-dark);
}

.c-treatment-summary-information .c-treatment-summary-media__play:focus-visible,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play:focus-visible {
	outline: none;
}

.c-treatment-summary-information .c-treatment-summary-media__play:focus-visible .c-treatment-summary-media__play-icon,
.c-treatment-treatment-summary-information .c-treatment-summary-media__play:focus-visible .c-treatment-summary-media__play-icon {
	outline: 2px solid var(--meda-gold);
	outline-offset: 3px;
	border-radius: 50%;
}

@media (min-width: 901px) {
	.c-treatment-summary-information .wpb_column:has(.w-video) > .vc_column-inner,
	.c-treatment-treatment-summary-information .wpb_column:has(.w-video) > .vc_column-inner,
	.c-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) > .vc_column-inner,
	.c-treatment-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) > .vc_column-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.c-treatment-summary-information .wpb_column:has(.w-video) .w-video,
	.c-treatment-treatment-summary-information .wpb_column:has(.w-video) .w-video,
	.c-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media,
	.c-treatment-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media,
	.c-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__item,
	.c-treatment-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__item,
	.c-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__figure,
	.c-treatment-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__figure {
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
	}

	.c-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__video,
	.c-treatment-treatment-summary-information .wpb_column:has(.c-treatment-summary-media__figure--video) .c-treatment-summary-media__video {
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* -------------------------------------------------------------------------
   Treatment video lightbox (Magnific Popup, scoped via `meda-video-mfp`)
   ------------------------------------------------------------------------- */

.meda-video-mfp.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	transform: scale(0.94);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.meda-video-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	transform: scale(1);
}

.meda-video-mfp.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	transform: scale(0.94);
	transition-duration: 0.28s;
}

.meda-video-mfp.mfp-fade.mfp-bg {
	transition: opacity 0.4s ease;
}

.meda-video-mfp.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.45;
}

.meda-video-mfp .mfp-container:after {
	content: '';
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 16px 16px 0 0;
	font-size: 0;
	line-height: 0;
	color: var(--meda-gold);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23a58b46' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	border: 2px solid var(--meda-gold);
	border-radius: 50%;
	transition:
		border-color 0.3s var(--meda-ease, ease),
		background-color 0.3s var(--meda-ease, ease);
}

.meda-video-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-container:after {
	opacity: 1 !important;
}

.no-touch .meda-video-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-container:after:hover {
	border-color: var(--meda-gold-dark);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23937437' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.meda-video-mfp .mfp-iframe-holder .mfp-content {
	width: 100%;
	max-width: min(56.25rem, 92vw);
}

.meda-video-mfp.is-vertical .mfp-iframe-holder .mfp-content {
	max-width: min(25rem, 70vw, calc(85vh * 9 / 16));
}

.meda-video-mfp.is-vertical .mfp-iframe-scaler {
	padding-top: 177.78%;
}

.meda-video-mfp .meda-video-mfp__player {
	width: min(56.25rem, 92vw, calc(80svh * 16 / 9));
	aspect-ratio: 16 / 9;
	max-height: min(80vh, 80svh);
	margin: 0 auto;
	background: #000;
	line-height: 0;
}

.meda-video-mfp.is-vertical .meda-video-mfp__player {
	width: min(25rem, 70vw, calc(80svh * 9 / 16));
	aspect-ratio: 9 / 16;
}

.meda-video-mfp .meda-video-mfp__player video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

@media (prefers-reduced-motion: reduce) {
	.meda-video-mfp.mfp-fade.mfp-wrap .mfp-content,
	.meda-video-mfp.mfp-fade.mfp-wrap.mfp-ready .mfp-content,
	.meda-video-mfp.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
		transform: none;
		transition-duration: 0.01s;
	}
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.c-treatment-procedure-info .c-treatment-section__content + .c-treatment-section__content {
		margin-top: 2rem;
	}

	.c-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2,
	.c-treatment-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2 {
		margin-top: 2rem;
	}

	/* Key-features tabs become a horizontal scroll strip from the tablet state
	   down. The tab row is `flex: 1 1 0` items with `white-space: nowrap` at
	   20px, so four or more tabs overrun the container — and the parent only
	   sets .l-canvas{overflow:hidden} at <=899px, which means 901-1024px got
	   real document-level horizontal scrolling. `flex` needs !important to beat
	   the `flex: 1 1 0 !important` base rule. */
	.c-treatment-key-features .w-tabs-list-h {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.c-treatment-key-features .w-tabs-list-h::-webkit-scrollbar {
		display: none;
	}

	.c-treatment-key-features .w-tabs-item {
		flex: 0 0 auto !important;
		min-width: 9rem;
	}
}

@media (max-width: 900px) {
	/* The intro's empty background-image column gets its 350px mobile floor from
	   the shared rule in meda-shared.css, which covers every band built this way
	   on both treatment and location pages. Nothing needed here. */

	.c-treatment-intro__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.c-treatment-intro__ctas .w-btn {
		width: 100%;
		justify-content: center;
	}

	.c-treatment-intro__price-section {
		margin-top: 0.25rem;
	}

	.c-treatment-before-and-after .c-treatment-section__carousel {
		margin-top: 1.25rem;
	}

	.c-treatment-procedure-info .u-treatment-section-title.u-large-heading {
		margin-bottom: 1.5rem;
	}

	.c-treatment-procedure-info .c-treatment-section__content + .c-treatment-section__content {
		margin-top: 1.5rem;
	}

	.c-treatment-procedure-info .c-treatment-section__subtitle {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}

	.c-treatment-procedure-info__item h3,
	.c-treatment-procedure-info__item h4,
	.c-treatment-procedure-info__item strong,
	.c-treatment-procedure-info__item .w-post-elm-value:first-child {
		font-size: var(--meda-text-md);
	}

	.c-treatment-customer-feedback {
		display: block !important;
	}

	.c-treatment-customer-feedback > .wpb_column + .wpb_column {
		margin-top: 1rem;
	}

	.c-treatment-key-features {
		margin-top: 1.5rem;
	}

	.c-treatment-key-features .u-treatment-section-title h2,
	.c-treatment-key-features h2.u-treatment-section-title {
		margin-bottom: 1.5rem;
		font-size: var(--meda-text-2xl);
	}

	/* Scroll-strip behaviour is inherited from the <=1024px block above. */
	.c-treatment-key-features .w-tabs-item {
		min-width: 7.5rem;
	}

	.c-treatment-key-features .w-tabs-item-title {
		font-size: var(--meda-text-base);
		padding: 0 0.625rem 0.875rem;
	}

	.c-treatment-key-features .w-tabs-sections {
		margin-top: 1.75rem;
	}

	.c-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2,
	.c-treatment-treatment-summary-information .g-cols.cols_2 + .g-cols.cols_2 {
		margin-top: 1.5rem;
	}

	.c-treatment-summary-information .u-treatment-section-title.u-large-heading,
	.c-treatment-treatment-summary-information .u-treatment-section-title.u-large-heading {
		margin-bottom: 1rem;
	}

	.c-treatment-summary-information .g-cols.cols_2 > .wpb_column + .wpb_column,
	.c-treatment-treatment-summary-information .g-cols.cols_2 > .wpb_column + .wpb_column {
		margin-top: 1rem;
	}

	.c-treatment-summary-information .c-treatment-summary-media__play-icon,
	.c-treatment-treatment-summary-information .c-treatment-summary-media__play-icon {
		width: 52px;
		height: 52px;
	}
}

@media (max-width: 600px) {
	/* Intro fact rows stack the value under its label instead of beside it.

	   Each row is authored [.w-iconbox: icon + label][value], so the label and
	   the value live in different elements and the label's own width decides
	   where the value starts. Measured at 375px, the three values began at three
	   different offsets — 149.5, 126.8 and 118 — so the column was visibly
	   ragged. Below ~560px "Treatment Discomfort:" also wraps to two lines while
	   its value wraps to two beside it, and the pair reads as four staggered
	   lines rather than one fact.

	   `display: contents` on the iconbox is what makes this work without touching
	   the builder markup: it lifts the icon and the label out to become grid
	   items of the row itself, so all three pieces place on one grid — icon in
	   column 1, label and value stacked in column 2, every value on a common left
	   edge.

	   gap and align-items need !important to clear the base rule's own
	   `!important` (which is itself there to beat the inline `--hwrapper-gap`
	   Impreza emits on this element). */
	/* Stacking splits one fact across two lines, so the pair has to out-group the
	   separation between facts or the list reads as six loose lines. Both types
	   are line-height 1.5, which already puts ~8px of half-leading above and
	   below every line: a nominal 2px row-gap here rendered as an 18px visual gap
	   against 25px between rows, too close to tell apart. Zero inside the pair,
	   and the list gap opens up below, giving 16px against 36px. */
	.c-treatment-intro__icons-item {
		display: grid;
		grid-template-columns: 1.5rem 1fr;
		align-items: start !important;
		gap: 0 0.625rem !important;
	}

	.c-treatment-intro__icons-list {
		gap: 1.25rem !important;
	}

	/* Three classes deep because Impreza ships
	   `.w-iconbox.iconpos_left { display: flex }` at (0,2,0) — a lone
	   `.c-treatment-intro__icons-item-img` loses to it, and the iconbox stays a
	   flex box jammed into the 24px icon column with the label overflowing it. */
	.c-treatment-intro__icons-item .w-iconbox.c-treatment-intro__icons-item-img {
		display: contents;
	}

	/* Placed explicitly: auto-flow would put this in column 1 of row 2, under the
	   icon rather than under the label. */
	.c-treatment-intro__icons-item-text {
		grid-column: 2;
	}

	/* The row is align-items:start now, so the icon would hang off the label's
	   line-box top. Nudge it onto the cap height. */
	.c-treatment-intro__icons-item-img .w-iconbox-icon {
		margin-top: 0.125rem;
	}
}

/* -------------------------------------------------------------------------
   Post-FAQ CTA
   ------------------------------------------------------------------------- */

.l-section.c-treatment-post-faq-cta {
	background: var(--meda-shell-white) !important;
}

.c-treatment-post-faq-cta__inner > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding-block: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.c-treatment-post-faq-cta__text,
p.c-treatment-post-faq-cta__text {
	margin: 0;
	width: 100%;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	font-weight: var(--body-font-weight, 400);
	line-height: var(--body-line-height, 1.5);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-content-text, var(--meda-content-text));
}

.c-treatment-post-faq-cta__button.w-btn {
	margin-top: 0.375rem;
}

/* A treatment with no before/after images still rendered the section shell (heading, disclaimer, Book Now). The slider shortcode now leaves this marker when it has nothing to show; hide the whole section. 2026-10-01, after the Liquid Facelift gallery was removed for AHPRA. */
.c-treatment-before-and-after:has(.c-treatment-before-and-after__empty) {
	display: none;
}