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

/* Phones: at the 36px fluid title size the large procedure heading ran to four
   lines in the ~327px column (first as "… / PROCEDURE / INFORMATION", now as
   "What [Treatment] Involves"). Size it to the column (about 25px at 375px wide,
   28px at 414px), never larger than the normal title size. */
@media (max-width: 600px) {
	.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: min(var(--meda-text-fluid-title), calc((100vw - 3rem) / 13.3)) !important;
	}

	/* "Our Perth [Treatment] Team" uses the big 36px section style built for the
	   two-word "Our team"; with a treatment name it ran to 4-6 lines. Match the
	   other treatment section headings instead. */
	.meda-shell-page-treatment .c-our-team .c-section__heading {
		font-size: var(--meda-text-fluid-title) !important;
	}
}

.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;
}

/* On some pages the description sits directly above the "… Treatment
   Highlights" heading, which then butted against the last paragraph (0px on
   most, ~59px where an editor had dropped in a medium separator). One gap for
   all: the heading takes 2.5rem above itself, roughly twice the space below it
   so it groups with the facts it introduces, and a trailing separator or a
   closing blockquote's margin no longer adds to it. */
.c-treatment-intro__description + .u-treatment-section-title {
	margin-top: 2.5rem !important;
}

/* Where the Book Now / Ask a Question buttons open the intro, the "… at a
   Glance" heading follows them: the same gap above, and about half below so
   the heading stays with the summary it introduces. */
.c-treatment-intro__ctas + .u-treatment-section-title {
	margin-top: 2.5rem !important;
	margin-bottom: 1.25rem !important;
}

.c-treatment-intro__description > .w-separator:last-child {
	display: none;
}

/* The block before that separator, or before an empty trailing text block,
   otherwise keeps Impreza's between-blocks margin and the gap grows by ~11px. */
.c-treatment-intro__description > :has(+ .w-separator:last-child),
.c-treatment-intro__description > :has(+ .wpb_text_column:last-child > .wpb_wrapper:empty) {
	margin-bottom: 0 !important;
}

.c-treatment-intro__description blockquote:last-child {
	margin-bottom: 0;
}

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

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

/*
 * Fact rows (Treatment Discomfort / Longevity / Location), desktop and tablet.
 * Each row used to be its own flex line, so the value started wherever that row's
 * label ended and a long label wrapped. The list is now one grid: icon, label and
 * value columns shared by every row, the label column sized to the longest label,
 * every value on a common left edge and every row top-aligned on its first line.
 * Rows and the iconbox are `display: contents` so their pieces land on that grid.
 * A few pages carry a "Treatment Highlights" heading or a separator inside the
 * list; those span the full width. Mobile keeps its stacked grid (max-width 600px).
 */
@media (min-width: 601px) {
	.c-treatment-intro__icons-list {
		display: grid !important;
		grid-template-columns: auto max-content minmax(0, 1fr);
		align-items: start;
		gap: 1rem 0.625rem !important;
	}

	.c-treatment-intro__icons-list > :not(.c-treatment-intro__icons-item) {
		grid-column: 1 / -1;
	}

	.c-treatment-intro__icons-item,
	.c-treatment-intro__icons-item .w-iconbox.c-treatment-intro__icons-item-img {
		display: contents !important;
	}

	/* Impreza's `.w-iconbox.style_default.iconpos_left .w-iconbox-icon` sets the
	   box to 1.1em of 2rem (~35px) around a 24px glyph; trim it to the glyph. */
	.c-treatment-intro__icons-list .c-treatment-intro__icons-item .w-iconbox.c-treatment-intro__icons-item-img .w-iconbox-icon {
		width: 1.5rem;
	}

	.c-treatment-intro__icons-item .w-iconbox-meta {
		padding: 0;
		margin: 0;
	}

	/* Same face, size and line height as the body copy, one step heavier than the
	   value so it reads as the label. */
	.c-treatment-intro__icons-item .w-iconbox-title {
		margin: 0;
		font-family: var(--meda-body-font);
		font-size: var(--meda-text-base);
		font-weight: 400;
		line-height: 1.5;
		white-space: nowrap;
	}

	.c-treatment-intro__icons-item-text {
		padding-left: 0.875rem;
	}
}

.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);
}

/* Values match the surrounding body copy (Montserrat 300). */
.c-treatment-intro__icons-item-text {
	font-weight: 300;
}

.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. */

	/* Stacked intro (Impreza stacks .mobiles-cols_1 at 900px and moves the image
	   column first): the image column's 48px bottom margin and the buttons'
	   0.75rem top margin sat on top of the 24px grid gap, leaving 84px of empty
	   beige under the photo. Keep the grid gap plus 0.5rem (32px) instead.
	   The 48px is meda-global's `!important` 3rem on every intro column, so this
	   repeats its selector to outrank it for the image column only. */
	.meda-shell-page-treatment .l-section.c-treatment-intro .g-cols > .wpb_column.vc_column_container:not(:has(.c-treatment-intro__ctas)) {
		margin-bottom: 0.5rem !important;
	}

	.c-treatment-intro .vc_column-inner > .c-treatment-intro__ctas:first-child {
		margin-top: 0;
	}

	/* Buttons stack, centred and sharing one width. Impreza's
	   `.w-hwrapper.valign_top` (align-items: flex-start) outranks a single class,
	   which is why the old `stretch` never applied and the buttons sat on the
	   left at content width. */
	.c-treatment-intro__ctas {
		flex-direction: column;
		align-items: center !important;
	}

	/* Impreza spaces hwrapper children with a right margin (--hwrapper-gap), which
	   pushed the first stacked button ~10px left of centre; the flex gap spaces
	   them instead. */
	.c-treatment-intro__ctas .w-btn-wrapper {
		width: min(100%, 16rem);
		margin: 0 !important;
	}

	.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;
}

/* Treatment-page promotions carry a "Current [Treatment] Promotions" heading, so the section needs
   room above it. Cards keep the width they have in a full row and a short row is centred, so one or
   two offers no longer hug the left edge. Track width mirrors Impreza's grid: gap is 2 × --gap. */
.meda-shell-page-treatment .c-seasonal-promotions:has(.c-treatment-promotions__heading) {
	padding-top: 4rem !important;
}

.meda-shell-page-treatment .c-seasonal-promotions .c-promotion-grid .w-grid-list {
	grid-template-columns: repeat(auto-fit, calc((100% - (var(--columns, 1) - 1) * 2 * var(--gap, 0px)) / var(--columns, 1)));
	justify-content: center;
}