/**
 * Lovelysmiles — premium polish layer (2026-10).
 *
 * Loaded after every inline style in functions.php (see
 * lovelysmiles_enqueue_assets()). Goal: premium, elegant, trustworthy, so a
 * visitor feels they are in a calm, professional clinic from the first
 * screen. Mobile first; every rule here keeps the WCAG 2.1 AA bar the rest
 * of the theme already holds (44px targets, visible focus, reduced motion).
 *
 * Contents
 *  1. Base: rendering, selection, focus rings, touch
 *  2. Layout: full-bleed section bands, no white seams between sections
 *  3. Typography: balanced headings, readable measure
 *  4. Buttons: one pill shape, calmer CTA shadow, 44px floor
 *  5. Cards: white surface + soft shadow; lift only when clickable
 *  6. Homepage hero: undimmed face on desktop, stacked photo on mobile
 *  7. Trust badges: 2x2 grid on phones instead of a clipped scroller
 *  8. Price table: clear price hierarchy, tidy mobile row
 *  9. Accordions: every core Details block reads as an accordion
 * 10. Tables: soft, rounded, fit on phones
 * 11. Header and footer
 */

/* 1. Base ---------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--secondary-tint);
	color: var(--wp--preset--color--contrast);
}

a,
button,
summary,
.wp-block-button__link {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(53, 91, 149, 0.15);
}

/* A single, consistent, always-visible keyboard focus ring. */
:where(a, button, summary, input, select, textarea, iframe, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cta);
	outline-offset: 3px;
}
:where(
	.has-contrast-background-color,
	.has-primary-background-color,
	.ls-hero,
	footer
) :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* 2. Layout -------------------------------------------------------------- */

/*
 * Section bands. Coloured sections (surface, primary, contrast) were
 * rendering as boxes inset from the viewport edge, because core only
 * bleeds `.alignfull` children of the outermost padded container, and the
 * page content sits one level deeper. Inset grey boxes with square corners
 * read as unfinished. Every top-level coloured section now runs edge to
 * edge, and gets the root gutter back as inner padding so its own content
 * still lines up with the rest of the page.
 */
main > .wp-block-post-content {
	max-width: none !important;
}
:is(main, main > .wp-block-post-content) > .wp-block-group.has-background:not(.is-style-card),
main > .wp-block-post-content > .alignfull {
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* No white seams between stacked sections, or above the footer. */
:is(main, main > .wp-block-post-content) > .wp-block-group + .wp-block-group,
:is(main, main > .wp-block-post-content) > .wp-block-cover + .wp-block-group,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* 3. Typography ---------------------------------------------------------- */

h1,
h2,
h3 {
	text-wrap: balance;
}
p,
li {
	text-wrap: pretty;
}

/* Centred body copy stays a comfortable reading width. */
main p.has-text-align-center {
	max-width: min(62ch, 100%);
}

/* 4. Buttons ------------------------------------------------------------- */

.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

/*
 * Book Now: the old 14px blue glow read as promotional. A tight contact
 * shadow plus a soft, low-spread lift keeps it the clear primary action
 * while feeling considered rather than loud.
 */
body .wp-block-button.is-style-book-now .wp-block-button__link {
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.18),
		0 10px 24px -12px rgba(53, 91, 149, 0.7);
	letter-spacing: 0.01em;
}
body .wp-block-button.is-style-book-now .wp-block-button__link:hover {
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.2),
		0 14px 28px -12px rgba(53, 91, 149, 0.75);
}

/* Every outline-style button shares the pill shape set in theme.json. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline-invert .wp-block-button__link {
	border-radius: 999px;
}

/* 5. Cards --------------------------------------------------------------- */

.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
	background-color: var(--wp--preset--color--base);
	border-color: rgba(35, 41, 75, 0.09);
	border-radius: 18px;
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.04),
		0 12px 32px -18px rgba(35, 41, 75, 0.18);
}

/*
 * A card only lifts on hover when it contains something to click, so
 * information cards (value pillars, reviews) no longer pretend to be links.
 */
.wp-block-group.is-style-card:hover,
.wp-block-column.is-style-card:hover {
	transform: none;
	border-color: rgba(35, 41, 75, 0.09);
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.04),
		0 12px 32px -18px rgba(35, 41, 75, 0.18);
}
.wp-block-group.is-style-card:has(a):hover,
.wp-block-column.is-style-card:has(a):hover {
	transform: translateY(-3px);
	border-color: rgba(54, 64, 121, 0.22);
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.05),
		0 20px 40px -20px rgba(35, 41, 75, 0.28);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-card:has(a):hover,
	.wp-block-column.is-style-card:has(a):hover {
		transform: none;
	}
}

/* A lone resized image in a card (e.g. the Whitening Pen) sits centred. */
.is-style-card > .wp-block-image.is-resized:only-child {
	display: flex;
	justify-content: center;
}

/* 6. Homepage hero ------------------------------------------------------- */

/*
 * Desktop: the navy scrim used to wash over the whole photo, including the
 * model's face and smile, which is the product. The scrim now only sits
 * behind the copy on the left and fades out before the face.
 */
@media (min-width: 782px) {
	.ls-hero .wp-block-cover__background.has-hero-scrim-gradient-background {
		background: linear-gradient(
			90deg,
			rgba(35, 41, 75, 0.92) 0%,
			rgba(35, 41, 75, 0.78) 32%,
			rgba(35, 41, 75, 0.3) 58%,
			rgba(35, 41, 75, 0) 76%
		) !important;
	}
	.ls-hero .wp-block-cover__image-background {
		object-position: 70% 30% !important;
	}
}

/*
 * Mobile: same composition as desktop, scaled down. The photo fills the
 * hero with the face framed on the right, and the copy runs down the left
 * over a side fade. Previously the landscape photo was centred, which
 * cropped the face out and left the copy on a grey wash.
 */
@media (max-width: 781px) {
	.ls-hero.wp-block-cover {
		min-height: 0 !important;
		padding-top: clamp(40px, 12vw, 72px) !important;
		padding-bottom: clamp(32px, 9vw, 56px) !important;
		align-items: flex-end;
	}
	.ls-hero .wp-block-cover__image-background {
		object-position: 71% 28% !important;
	}
	.ls-hero .wp-block-cover__background.has-hero-scrim-gradient-background {
		background:
			linear-gradient(
				to top,
				rgba(35, 41, 75, 0.85) 0,
				rgba(35, 41, 75, 0.35) 26%,
				rgba(35, 41, 75, 0) 42%
			),
			linear-gradient(
				90deg,
				rgba(35, 41, 75, 0.92) 0%,
				rgba(35, 41, 75, 0.82) 45%,
				rgba(35, 41, 75, 0.45) 64%,
				rgba(35, 41, 75, 0) 80%
			) !important;
	}
	.ls-hero .wp-block-cover__inner-container {
		width: 100%;
	}
	/* Copy stays on the left; buttons and the price line span the width. */
	.ls-hero .ls-hero-fade > :not(.wp-block-buttons):not(:last-child) {
		max-width: 62% !important;
	}
	.ls-hero h1 {
		font-size: clamp(1.75rem, 8vw, 2.4rem);
	}
	.ls-hero .ls-hero-proposition {
		font-size: 0.95rem;
	}
	.ls-hero .wp-block-buttons {
		gap: 0.75rem;
	}
	.ls-hero .wp-block-button__link {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

/* 7. Trust badges -------------------------------------------------------- */

/*
 * Phones: a sideways scroller with the last badge cut off looked broken,
 * and hid two of the four trust marks. All four now sit in a 2x2 grid.
 */
@media (max-width: 599px) {
	.trust-badges-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		padding-right: 0;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.trust-badge {
		min-width: 0;
		min-height: 72px;
	}
}

/* 8. Price table --------------------------------------------------------- */

.price-table-row {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}
.price-table-row > .wp-block-group:last-child {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.price-table-row .wp-block-button__link {
	white-space: nowrap;
}
.price-table-row > .wp-block-group:last-child > p {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}
.price-table-row > .wp-block-group:last-child > p span {
	display: block;
	font-weight: 400;
}
@media (max-width: 599px) {
	.price-table-row > .wp-block-group:last-child {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between !important;
	}
}

/* 9. Accordions ---------------------------------------------------------- */

/*
 * The homepage "Quick Answers" used plain Details blocks with no chevron
 * or divider, so the questions read as body text. Zero specificity here,
 * so the FAQ page's own `.faq-group` rules and the footer still win.
 */
:where(.wp-block-details:not(.footer-details)) {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
:where(.wp-block-details:not(.footer-details)) > summary {
	list-style: none;
	position: relative;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) 0;
	font-weight: 700;
}
:where(.wp-block-details:not(.footer-details)) > summary::-webkit-details-marker {
	display: none;
}
:where(.wp-block-details:not(.footer-details)) > summary::after {
	content: "";
	position: absolute;
	right: var(--wp--preset--spacing--10);
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
:where(.wp-block-details:not(.footer-details))[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
:where(.wp-block-details:not(.footer-details)) > :not(summary) {
	margin-top: 0;
	margin-bottom: 0.75rem;
}
:where(.wp-block-details:not(.footer-details)) > :not(summary):last-child {
	margin-bottom: 0;
	padding-bottom: var(--wp--preset--spacing--20);
}
:where(.wp-block-details) ul {
	padding-left: 1.25rem;
}
:where(.wp-block-details) li + li {
	margin-top: 0.35rem;
}
@media (prefers-reduced-motion: reduce) {
	:where(.wp-block-details:not(.footer-details)) > summary::after {
		transition: none;
	}
}

/* 10. Tables ------------------------------------------------------------- */

main .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
}
main .wp-block-table thead {
	border-bottom: 0;
}
main .wp-block-table th,
main .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.875rem 1.125rem;
	text-align: left;
	vertical-align: top;
}
main .wp-block-table th + th,
main .wp-block-table td + td {
	border-left: 1px solid var(--wp--preset--color--border);
}
main .wp-block-table thead th {
	background-color: var(--wp--preset--color--surface);
	font-weight: 700;
}
main .wp-block-table tbody td:first-child {
	font-weight: 700;
}
main .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}
@media (max-width: 599px) {
	main .wp-block-table table {
		font-size: 0.875rem;
	}
	main .wp-block-table th,
	main .wp-block-table td {
		padding: 0.75rem 0.625rem;
		overflow-wrap: anywhere;
	}
}

/* 11. Header and footer ------------------------------------------------- */

/* Keep the header and footer on the same grid as the page content. */
.site-header-row {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Desktop footer columns were rendering as headings with no links. Current
 * Chrome and Safari hide a closed <details> through its `::details-content`
 * slot rather than its children, which the older child-level override in
 * lovelysmiles_footer_mobile_style_css() cannot reach. Kept as a separate
 * rule so browsers that don't know the pseudo-element only drop this one.
 */
@media (min-width: 782px) {
	.footer-details::details-content {
		content-visibility: visible;
		display: block;
		height: auto;
	}
}

/*
 * Footer. It sits directly under the navy closing CTA band on most pages,
 * so the two used to merge into one long navy block with a large empty
 * gap. A hairline on the content grid now marks where the footer starts.
 * Column headings become quiet uppercase labels, and links are muted until
 * hovered, so the footer reads as calm reference rather than more headings.
 */
.site-footer {
	position: relative;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1240px, calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)));
	height: 1px;
	background-color: rgba(255, 255, 255, 0.14);
}
.site-footer .footer-details summary {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.site-footer .footer-nav-group li a {
	color: rgba(255, 255, 255, 0.86);
}
.site-footer .footer-nav-group li a:hover,
.site-footer .footer-nav-group li a:focus-visible {
	color: var(--wp--preset--color--base);
	opacity: 1;
}
@media (min-width: 782px) {
	.site-footer .footer-details summary {
		margin-bottom: var(--wp--preset--spacing--10);
	}
	/* Mouse-driven layout: 36px rows still clear the 24px AA target. */
	.site-footer .footer-nav-group li a {
		min-height: 36px;
	}
}
/* On phones the labels are the tap targets, so they stay full white. */
@media (max-width: 781px) {
	.site-footer .footer-details summary {
		font-size: 0.8125rem;
		color: var(--wp--preset--color--base);
	}
}

/* Clinic maps (location pages): rounded, responsive, no iframe border. */
.ls-map {
	margin-block: var(--wp--preset--spacing--30);
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.45);
}
.ls-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
}
@media (max-width: 599px) {
	.ls-map iframe {
		aspect-ratio: 4 / 3;
	}
}

/*
 * Contact form (Ninja Forms, form ID 2 on /contact-us/). Ninja Forms ships
 * almost no visual styling by default ("opinionated styles" off), so the
 * fields are styled here to match the site: 16px text (no iOS zoom), 48px
 * fields, a 3:1 field border, the shared focus ring, and the Book Now pill
 * for the submit button.
 */
.nf-form-cont {
	--ls-field-border: #8a8fa8;
	--ls-error: #b3261e;
	text-align: left;
}
.nf-form-cont .nf-form-fields-required {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}
.nf-form-cont .nf-field-container {
	margin-bottom: var(--wp--preset--spacing--30);
}
.nf-form-cont .nf-field-label label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}
.nf-form-cont .ninja-forms-req-symbol {
	color: var(--ls-error);
}
.nf-form-cont .nf-field-element input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-field-element select,
.nf-form-cont .nf-field-element textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--ls-field-border);
	border-radius: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nf-form-cont .nf-field-element textarea {
	min-height: 160px;
	resize: vertical;
}
.nf-form-cont .nf-field-element :is(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--cta);
	box-shadow: 0 0 0 3px rgba(53, 91, 149, 0.18);
}
.nf-form-cont .nf-error .ninja-forms-field {
	border-color: var(--ls-error) !important;
}
.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-error-required-error {
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--ls-error);
}
.nf-form-cont input[type="submit"] {
	min-height: 48px;
	padding: 0.875rem 2.25rem;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--cta);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow:
		0 1px 2px rgba(35, 41, 75, 0.18),
		0 10px 24px -12px rgba(53, 91, 149, 0.7);
	transition: background-color 0.2s ease, transform 100ms ease-out;
}
.nf-form-cont input[type="submit"]:hover {
	background-color: var(--wp--preset--color--cta-dark);
}
.nf-form-cont input[type="submit"]:active {
	background-color: var(--wp--preset--color--cta-press);
	transform: scale(0.97);
}
.nf-form-cont .nf-response-msg {
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface);
	border-radius: 16px;
}
@media (prefers-reduced-motion: reduce) {
	.nf-form-cont input[type="submit"]:active {
		transform: none;
	}
}

/* Small uppercase label above a heading (Our Clinics hero and cards). */
.ls-eyebrow {
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.ls-eyebrow + h1,
.ls-eyebrow + h3 {
	margin-top: 0.25rem;
}

/*
 * Our Clinics cards: map on top, flush to the card edges, then address,
 * hours and actions. Buttons sit at the bottom so both cards line up.
 */
.ls-clinic-cards {
	gap: var(--wp--preset--spacing--40);
}
.wp-block-column.ls-clinic-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: 0 !important;
}
.ls-clinic-card > .ls-map {
	margin: 0 calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--20);
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ls-clinic-card > .ls-map iframe {
	aspect-ratio: 16 / 9;
}
.ls-clinic-card h3 {
	margin-top: 0.25rem;
}
.ls-clinic-card .ls-hours-heading {
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ls-hours {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ls-hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ls-hours li span:last-child {
	font-weight: 700;
	white-space: nowrap;
}
.ls-clinic-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* Notice callout (e.g. the Auckland temporary clinic note). */
.ls-notice {
	padding: 0.875rem 1rem 0.875rem 1.125rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--secondary-tint);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 12px 12px 0;
}

/* =========================================================================
 * 21st.dev-inspired components (2026-10), rebuilt natively for this theme:
 * no React, no Tailwind, no build step. Each respects reduced motion.
 * ====================================================================== */

/* Visually hidden, still read by screen readers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Stats band ("number ticker"). */
.ls-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.ls-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ls-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.ls-stat__label {
	max-width: 18ch;
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
@media (min-width: 782px) {
	.ls-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.ls-stat + .ls-stat {
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* Pillar icons: one quiet line icon per card, in a tinted tile. */
.ls-pillars .is-style-card::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 14px;
	background-color: var(--wp--preset--color--secondary-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
.ls-pillars .is-style-card:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364079' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
.ls-pillars .is-style-card:nth-child(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364079' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 14.06 8 20l-1.94-5.94L0 12l6.06-1.94L8 4l1.94 6.06L16 12Z' transform='translate(2 0)'/%3E%3Cpath d='M19 3v4M17 5h4'/%3E%3C/svg%3E");
}
.ls-pillars .is-style-card:nth-child(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364079' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.ls-pillars .is-style-card:nth-child(4)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364079' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m9 14.5-1.5 7.5L12 19.5 16.5 22 15 14.5'/%3E%3Cpath d='m10 9 1.5 1.5L14.5 7.5'/%3E%3C/svg%3E");
}

/* Spotlight: a soft glow that follows the pointer (site.js sets the vars). */
.ls-pillars .is-style-card {
	position: relative;
	isolation: isolate;
}
.ls-pillars .is-style-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(260px circle at var(--ls-spot-x, 50%) var(--ls-spot-y, 0%), rgba(53, 91, 149, 0.1), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ls-pillars .is-style-card:hover::after {
		opacity: 1;
	}
}

/* Book Now shine: one light sweep across the button on hover. */
.wp-block-button.is-style-book-now .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.wp-block-button.is-style-book-now .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-button.is-style-book-now .wp-block-button__link::after {
		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.wp-block-button.is-style-book-now .wp-block-button__link:hover::after {
		transform: translateX(120%);
	}
}

/* Header gains a soft shadow once the page scrolls (site.js). */
.site-header-frosted {
	transition: box-shadow 0.2s ease;
}
.site-header-frosted.is-scrolled {
	box-shadow: 0 10px 28px -20px rgba(35, 41, 75, 0.45);
}

/* =========================================================================
 * Motion layer (2026-10). Pairs with assets/js/motion-showcase.js. Every
 * rule that hides or moves content is scoped to `html.ls-motion`, which
 * only exists when the visitor allows motion and the script is running.
 * ====================================================================== */

/* Split headline words animate individually. */
.ls-word {
	display: inline-block;
	will-change: transform, opacity, filter;
}

/* Motion takes over the hero entrance from the CSS fade-up. */
.ls-motion .ls-hero-fade > * {
	animation: none !important;
}
.ls-motion .ls-hero .wp-block-cover__image-background {
	will-change: transform;
}

/* Steps: a progress line drawn by scroll (desktop, where steps sit in a row). */
.ls-steps {
	position: relative;
}
.ls-steps__line {
	display: none;
}
@media (min-width: 782px) {
	.ls-steps__line {
		display: block;
		position: absolute;
		top: 1.15em;
		left: 16.66%;
		right: 16.66%;
		height: 2px;
		background-color: var(--wp--preset--color--border);
		border-radius: 2px;
		overflow: hidden;
		pointer-events: none;
	}
	.ls-steps__line-fill {
		display: block;
		height: 100%;
		background: linear-gradient(90deg, var(--wp--preset--color--cta), var(--wp--preset--color--primary));
		transform-origin: left center;
		transform: scaleX(0);
	}
	.ls-steps > .wp-block-column h3 {
		position: relative;
		display: table;
		margin-left: auto;
		margin-right: auto;
		padding: 0 0.75rem;
		background-color: var(--wp--preset--color--surface);
	}
}

/* Shade-guide strip under the before/after slider. */
.ls-shade-strip {
	position: relative;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 6px;
	max-width: 420px;
	margin: var(--wp--preset--spacing--30) auto 0;
}
.ls-shade-strip__tab {
	height: 34px;
	border-radius: 8px 8px 12px 12px;
	background: linear-gradient(180deg, var(--ls-shade), color-mix(in srgb, var(--ls-shade), #000 6%));
	box-shadow: inset 0 0 0 1px rgba(35, 41, 75, 0.08);
	opacity: 0.45;
	transform: scale(0.9);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ls-shade-strip__tab.is-passed {
	opacity: 0.8;
	transform: scale(0.94);
}
.ls-shade-strip__tab.is-active {
	opacity: 1;
	transform: scale(1.12);
	box-shadow: inset 0 0 0 1px rgba(35, 41, 75, 0.12), 0 8px 18px -8px rgba(35, 41, 75, 0.45);
}
.ls-shade-strip__marker {
	position: absolute;
	left: 0;
	bottom: -12px;
	width: calc((100% - 42px) / 8);
	display: flex;
	justify-content: center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	/* translateX(n * 100%) moves one tab width; add the 6px gaps. */
	margin-left: 0;
}
.ls-shade-strip__marker::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--cta);
}

/* Page-to-page cross-fade (supporting browsers; others navigate normally). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
	::view-transition-old(root) {
		animation: 180ms ease-out both ls-vt-out;
	}
	::view-transition-new(root) {
		animation: 380ms cubic-bezier(0.22, 1, 0.36, 1) both ls-vt-in;
	}
	.site-header-frosted {
		view-transition-name: ls-header;
	}
}
@keyframes ls-vt-out {
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}
@keyframes ls-vt-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/*
 * The sticky Book Now bar is mobile-only, but core's `body .is-layout-flex
 * { display: flex }` outranked the original 900px hide rule, so it was
 * showing on desktop too.
 */
@media (min-width: 900px) {
	.ls-sticky-book-bar {
		display: none !important;
	}
}

/* Hero shade strip (injected by motion-showcase.js; decorative). */
.ls-hero-shades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 1.5rem;
}
.ls-hero-shades__tabs {
	display: flex;
	gap: 5px;
}
.ls-hero-shades__tab {
	display: block;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ls-hero-shades__chip {
	display: block;
	width: 20px;
	height: 28px;
	border-radius: 6px 6px 10px 10px;
	background: linear-gradient(180deg, var(--ls-shade), color-mix(in srgb, var(--ls-shade), #000 8%));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	opacity: 0;
	transition: box-shadow 0.45s ease;
}
.ls-hero-shades__tab.is-lit {
	transform: translateY(-6px) scale(1.15);
}
.ls-hero-shades__tab.is-lit .ls-hero-shades__chip {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.85), 0 10px 24px -6px rgba(255, 255, 255, 0.6);
}
.ls-hero-shades__caption {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--base);
	opacity: 0;
}

/* Membership story: chapters (mobile cards by default). */
.ls-story {
	max-width: 1200px;
	margin: 0 auto;
}
.ls-story__intro {
	margin-bottom: var(--wp--preset--spacing--40);
	text-align: center;
}
.ls-story__intro h2 {
	margin-top: 0.25rem;
}
.ls-story__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ls-story__step {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(35, 41, 75, 0.09);
	border-radius: 18px;
}
.ls-story__num {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary);
}
.ls-story__step h3 {
	margin: 0.35rem 0 0.5rem;
}
.ls-story__step p {
	margin: 0;
}
.ls-story__inline {
	display: flex;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--20);
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	background-image: radial-gradient(120% 140% at 0% 0%, #364079 0%, #23294b 70%);
}
.ls-story__big {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ls-story__small {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	opacity: 0.85;
}
.ls-story__stage {
	display: none;
}

/* Desktop with motion: the figure panel pins while chapters scroll past. */
@media (min-width: 900px) {
	.ls-story.is-enhanced .ls-story__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
	.ls-story.is-enhanced .ls-story__stage {
		display: block;
		position: sticky;
		top: calc(50vh - min(32vh, 250px) + 40px);
		height: min(64vh, 500px);
	}
	.ls-story__card {
		position: relative;
		height: 100%;
		overflow: hidden;
		border-radius: 28px;
		color: var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--contrast);
		background-image: radial-gradient(120% 120% at 20% 0%, #3d4a8a 0%, #23294b 60%);
		box-shadow: 0 40px 80px -40px rgba(35, 41, 75, 0.55);
	}
	.ls-story__card::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 78%;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.025), 0 0 120px 20px rgba(120, 150, 220, 0.18);
		transform: translate(-50%, -50%);
	}
	.ls-story__visual {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2rem;
		text-align: center;
		opacity: 0;
	}
	.ls-story__visual.is-active {
		opacity: 1;
	}
	.ls-story__visual .ls-story__big {
		font-size: clamp(3.5rem, 7vw, 6rem);
	}
	.ls-story__visual .ls-story__small {
		max-width: 22ch;
		margin-top: 0.75rem;
		font-size: 1.05rem;
	}
	.ls-story__progress {
		position: absolute;
		top: 0;
		right: calc(-1 * var(--wp--preset--spacing--40));
		bottom: 0;
		width: 2px;
		border-radius: 2px;
		background-color: var(--wp--preset--color--border);
		overflow: hidden;
	}
	.ls-story__progress-fill {
		display: block;
		height: 100%;
		background: linear-gradient(180deg, var(--wp--preset--color--cta), var(--wp--preset--color--primary));
		transform-origin: top center;
		transform: scaleY(0);
	}
	.ls-story.is-enhanced .ls-story__step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 62vh;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		color: var(--wp--preset--color--muted);
		transition: color 0.4s ease;
	}
	.ls-story.is-enhanced .ls-story__step h3 {
		font-size: var(--wp--preset--font-size--xx-large);
		font-family: var(--wp--preset--font-family--heading);
		color: inherit;
		transition: color 0.4s ease;
	}
	.ls-story.is-enhanced .ls-story__step.is-active {
		color: var(--wp--preset--color--contrast);
	}
	.ls-story.is-enhanced .ls-story__inline {
		display: none;
	}
}

/* Shared-element page transition: a clinic card expands into its page's
 * hero (and back), in browsers with cross-document view transitions. */
@media (prefers-reduced-motion: no-preference) {
	main .is-style-card:has(a[href="/locations/auckland/"]),
	.ls-clinic-hero--auckland {
		view-transition-name: ls-clinic-auckland;
	}
	main .is-style-card:has(a[href="/locations/wellington-cbd/"]),
	.ls-clinic-hero--wellington-cbd {
		view-transition-name: ls-clinic-wellington;
	}
	::view-transition-group(ls-clinic-auckland),
	::view-transition-group(ls-clinic-wellington) {
		animation-duration: 0.5s;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		border-radius: 18px;
		overflow: clip;
	}
	::view-transition-old(ls-clinic-auckland),
	::view-transition-new(ls-clinic-auckland),
	::view-transition-old(ls-clinic-wellington),
	::view-transition-new(ls-clinic-wellington) {
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
}

/*
 * FAQ category pills. The horizontal scroller showed a raw browser
 * scrollbar under the pills. Phones: still swipeable, scrollbar hidden,
 * and a soft right-edge fade signals there's more. Wider screens: the
 * pills wrap and centre, so there's nothing to scroll.
 */
.faq-jump-links {
	scrollbar-width: none;
	padding-right: var(--wp--preset--spacing--30);
	mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.faq-jump-links::-webkit-scrollbar {
	display: none;
}
@media (min-width: 782px) {
	.faq-jump-links {
		flex-wrap: wrap !important;
		justify-content: center;
		overflow: visible;
		padding-right: 0;
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* =========================================================================
 * Treatments: pricing plans (2026-10). Two plan cards, Ultimate featured in
 * navy, with a "cycle meter" showing 3 vs 4 twenty-minute cycles.
 * ====================================================================== */
.ls-plans-band h2 {
	margin-top: 0.25rem;
}
.ls-plans {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	align-items: stretch;
}
@media (min-width: 782px) {
	.ls-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
		align-items: center;
	}
}
.ls-plan {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(35, 41, 75, 0.09);
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(35, 41, 75, 0.04), 0 24px 48px -32px rgba(35, 41, 75, 0.35);
}
.ls-plan__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.ls-plan__name {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--x-large);
}
.ls-plan__price {
	display: flex;
	align-items: flex-start;
	gap: 0.1em;
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3.5rem, 9vw, 4.75rem);
	line-height: 0.95;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.ls-plan__currency {
	margin-top: 0.18em;
	font-size: 0.45em;
}
.ls-plan__meta {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--muted);
}
.ls-plan__cycles {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}
.ls-plan__meter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.ls-plan__seg {
	height: 8px;
	border-radius: 99px;
	background-color: var(--wp--preset--color--border);
	overflow: hidden;
}
.ls-plan__seg.is-on::before {
	content: "";
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--cta), #6f8fd0);
	transform-origin: left center;
}
.ls-plan__cycles-label {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9rem;
	font-weight: 700;
}
.ls-plan__desc {
	margin: var(--wp--preset--spacing--20) 0 0;
}
.ls-plan__list {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}
.ls-plan__list li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.75rem;
}
.ls-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355B95' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ls-plan .wp-block-button {
	margin-top: auto;
}
.ls-plan .wp-block-button__link {
	width: 100%;
}

/* Featured plan: navy, lifted, with a soft halo. */
.ls-plan--featured {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	background-image: radial-gradient(120% 90% at 100% 0%, #3d4a8a 0%, #23294b 62%);
	border-color: transparent;
	box-shadow: 0 40px 80px -40px rgba(35, 41, 75, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
@media (min-width: 782px) {
	.ls-plan--featured {
		padding-top: clamp(2.5rem, 5vw, 3.25rem);
		padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
	}
}
.ls-plan--featured .ls-plan__eyebrow {
	color: #b9c8ef;
}
.ls-plan--featured .ls-plan__name,
.ls-plan--featured .ls-plan__price {
	color: var(--wp--preset--color--base);
}
.ls-plan--featured .ls-plan__meta {
	color: rgba(255, 255, 255, 0.78);
}
.ls-plan--featured .ls-plan__cycles {
	border-top-color: rgba(255, 255, 255, 0.14);
}
.ls-plan--featured .ls-plan__seg {
	background-color: rgba(255, 255, 255, 0.14);
}
.ls-plan--featured .ls-plan__seg.is-on::before {
	background: linear-gradient(90deg, #9fb6ea, #ffffff);
}
.ls-plan--featured .ls-plan__list li::before {
	background-color: rgba(255, 255, 255, 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.ls-plan--featured .wp-block-button.is-style-book-now .wp-block-button__link {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}
.ls-plan--featured .wp-block-button.is-style-book-now .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary-tint);
	color: var(--wp--preset--color--contrast);
}
.ls-plan--featured .wp-block-button.is-style-book-now .wp-block-button__link::after {
	background: linear-gradient(110deg, transparent 30%, rgba(53, 91, 149, 0.16) 50%, transparent 70%);
}
.ls-plan__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	background: linear-gradient(90deg, #f5eedb, #ffffff);
	border-radius: 99px;
	box-shadow: 0 8px 20px -8px rgba(35, 41, 75, 0.45);
}

/* Membership nudge under the plans. */
.ls-plans__member {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.75rem;
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: 1rem 1.5rem;
	max-width: 640px;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px dashed rgba(54, 64, 121, 0.35);
	border-radius: 999px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ls-plans__member:hover {
	border-style: solid;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}
.ls-plans__member-kicker {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.ls-plans__member-arrow {
	transition: transform 0.2s ease;
}
.ls-plans__member:hover .ls-plans__member-arrow {
	transform: translateX(4px);
}
@media (max-width: 599px) {
	.ls-plans__member {
		border-radius: 18px;
	}
	.ls-plans__member-arrow {
		display: none;
	}
}

/* Cycle meter fill (motion only): segments fill left to right in turn. */
.ls-motion .ls-plan__seg.is-on::before {
	transform: scaleX(0);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-motion .ls-plan.is-filled .ls-plan__seg.is-on::before {
	transform: scaleX(1);
}
.ls-plan__seg:nth-child(2)::before { transition-delay: 0.15s; }
.ls-plan__seg:nth-child(3)::before { transition-delay: 0.3s; }
.ls-plan__seg:nth-child(4)::before { transition-delay: 0.45s; }

/* Spotlight glow on plan cards (site.js sets the pointer position). */
.ls-plan::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(300px circle at var(--ls-spot-x, 50%) var(--ls-spot-y, 0%), rgba(53, 91, 149, 0.09), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.ls-plan--featured::after {
	background: radial-gradient(320px circle at var(--ls-spot-x, 50%) var(--ls-spot-y, 0%), rgba(255, 255, 255, 0.09), transparent 70%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ls-plan:hover::after {
		opacity: 1;
	}
}

/* =========================================================================
 * Page headers with a photo (2026-10). Every inner page's top section
 * (`.ls-page-hero`) carries a header image (`.ls-page-hero-media`).
 * Phones: photo on top, copy centred below. Desktop: copy left, photo
 * right in a rounded frame with a soft offset tile behind it.
 * Images: assets/images/headers/ (from the previous lovelysmiles.co site).
 * ====================================================================== */
.ls-page-hero {
	display: flex;
	flex-direction: column;
}
.ls-page-hero > .ls-page-hero-media {
	order: -1;
	position: relative;
	width: 100%;
	max-width: 640px !important;
	margin: 0 auto var(--wp--preset--spacing--30) !important;
}
.ls-page-hero-media img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 30px 60px -36px rgba(35, 41, 75, 0.55);
}
.ls-page-hero-media::before {
	content: "";
	position: absolute;
	inset: 14px -10px -12px 14px;
	z-index: -1;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--wp--preset--color--secondary-tint), rgba(53, 91, 149, 0.18));
}
.ls-page-hero {
	isolation: isolate;
}

@media (min-width: 900px) {
	/* Outranks the full-width band rule's padding (section 2). */
	main > .wp-block-post-content > .wp-block-group.alignfull.ls-page-hero.has-background:not(.is-style-card) {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-auto-rows: min-content;
		column-gap: clamp(40px, 5vw, 88px);
		align-content: center;
		padding-left: max(var(--wp--style--root--padding-left), calc((100vw - 1240px) / 2)) !important;
		padding-right: max(var(--wp--style--root--padding-right), calc((100vw - 1240px) / 2)) !important;
	}
	.ls-page-hero > * {
		grid-column: 1;
		max-width: 620px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.ls-page-hero > .ls-page-hero-media {
		grid-column: 2;
		grid-row: 1 / span 20;
		align-self: center;
		max-width: none !important;
		margin: 0 !important;
	}
	.ls-page-hero-media img {
		aspect-ratio: 4 / 3;
		border-radius: 28px;
	}
	.ls-page-hero-media::before {
		inset: 22px -18px -20px 22px;
		border-radius: 30px;
	}
	.ls-page-hero .has-text-align-center {
		text-align: left;
	}
	.ls-page-hero .wp-block-buttons {
		justify-content: flex-start;
	}
	.ls-page-hero .faq-jump-links {
		justify-content: flex-start;
	}
}