.meda-hero .w-btn-wrapper {
	margin: 0;
}

/* Size comes from Impreza Theme Options → Buttons → "Gold CTA" (padding: 0.9em 1.7em), same as every other gold CTA. The old `min-height: 2.3125rem; padding: 0.625rem 1.25rem !important` here made the hero button 39px tall while its siblings sized to 48px, and the !important meant Theme Options could never win. Only the dark-background label treatment below is hero-specific. */
.meda-hero .w-btn.us-btn-style_1 .w-btn-label {
	background: none !important;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.no-touch .meda-hero .w-btn.us-btn-style_1:hover,
.no-touch .meda-hero .w-btn.us-btn-style_1.meda-hover-btn:hover {
	background: var(--meda-gold);
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1.25rem rgba(165, 139, 70, 0.2);
}

html.meda-motion-gsap.no-touch .meda-hero .w-btn.us-btn-style_1:hover,
html.meda-motion-gsap.no-touch .meda-hero .w-btn.us-btn-style_1.meda-hover-btn:hover {
	background: transparent;
	transform: none;
	box-shadow: none;
}

.no-touch .meda-hero .w-btn.us-btn-style_1:hover .w-btn-label,
.no-touch .meda-hero .w-btn.us-btn-style_1.meda-hover-btn:hover .w-btn-label {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.meda-hero .w-btn.us-btn-style_1:focus-visible {
	outline: 2px solid var(--meda-gold);
	outline-offset: 3px;
}

/* Phones (OpenDesign prototype "Med Aesthetics mobile hero fix", 2026-10-01): one-screen hero. The section fills the viewport below the 80px header, the image sits at `cover` anchored top-right so the face shows in the upper part, and the heading, copy and both CTAs are pinned to the bottom over a dark fade. Replaces the earlier tall-hero crop (545px padding + 1015px image), which pushed the buttons below the first screen. Heading drops Impreza's uppercase (the source text is already sentence case) and sizes like the prototype; the primary CTA is filled gold, the secondary keeps the outline. !important only where Impreza's inline design-options CSS (us_custom_*) or the section padding would otherwise win on source order. Tablet and desktop unchanged. */
@media (max-width: 900px) {
	.l-section.meda-hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: calc(100svh - var(--header-height, 80px));
		padding-bottom: 0 !important; /* Impreza height_medium adds section padding; the l-section-h padding is the only gap we want */
	}

	.l-section.meda-hero > .l-section-h {
		width: 100%;
		padding-top: 2rem !important;
		padding-bottom: 1.25rem !important; /* content sits just above the iOS toolbar */
	}

	.l-section.meda-hero .l-section-img {
		background-size: cover;
		background-position: 88% 0;
	}

	.l-section.meda-hero .l-section-img::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		/* Lightened ~30% over the face (client, 2026-10-02); bottom stays dark enough for white copy and the outlined CTA. */
		background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 26%, rgba(0, 0, 0, 0.18) 44%, rgba(0, 0, 0, 0.04) 60%, transparent 70%);
	}

	.l-section.meda-hero h1.us_custom_924dd7d3 {
		font-size: clamp(1.5rem, 7.4vw, 2.4rem) !important; /* 7.4vw keeps "Cosmetic Clinic Since 2009" on one line from 360px up */
		line-height: 1.12 !important;
		white-space: nowrap;
		letter-spacing: 0.005em;
		text-transform: none !important;
	}

	/* Client asked for the intro paragraph to go on phones; the heading and CTAs carry the hero. */
	.l-section.meda-hero p.us_custom_4391115e {
		display: none;
	}

	.l-section.meda-hero .w-btn-wrapper {
		display: block;
	}

	.l-section.meda-hero .w-btn.us-btn-style_1 {
		width: 100%;
		justify-content: center;
	}

	/* The first of the two CTA wrappers (the one with a wrapper after it) is Book a Treatment. */
	.l-section.meda-hero .w-btn-wrapper:has(+ .w-btn-wrapper) .w-btn.us-btn-style_1 {
		background: var(--meda-gold, #a58b46) !important;
		border-color: var(--meda-gold, #a58b46) !important;
	}

	.l-section.meda-hero .w-btn-wrapper:has(+ .w-btn-wrapper) .w-btn.us-btn-style_1 .w-btn-label {
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
	}
}