/*--------------------------------------------------------------
# Block contents
--------------------------------------------------------------*/
.lp-hero {
	display: flex;
	color: var(--text-secondary);
	padding-block: var(--margin-vertical-wider);
	/* A floating or transparent page header sits over the hero, which
	   starts under it (2026-09-29); the header sets the offset. */
	padding-block-start: calc(var(--margin-vertical-wider) + var(--lp-over-offset, 0px));
	padding-inline: 4vw;
}

/* A phone gets the smaller section spacing, so the first screen is not a
band of empty ground under the header (2026-09-29). */
@media screen and (max-width: 765px) {
	.lp-hero {
		padding-block: var(--margin-vertical-normal);
		padding-block-start: calc(var(--margin-vertical-normal) + var(--lp-over-offset, 0px));
	}
}

/* Room for a lifted strip (2026-10-12, the multi column's Lift switch):
the strip after the hero rises --lp-lift over the hero's bottom edge, so
the hero's bottom padding grows by as much. The canvas wraps each block,
hence the second selector. */
.lp-hero:has(+ .lp-multi-column--lift),
.editor-styles-wrapper .wp-block:has(+ .wp-block > .lp-multi-column--lift) > .lp-hero {
	--lp-lift: 72px;
	padding-block-end: calc(var(--margin-vertical-wider) + var(--lp-lift));
}

@media screen and (max-width: 765px) {
	.lp-hero:has(+ .lp-multi-column--lift),
	.editor-styles-wrapper .wp-block:has(+ .wp-block > .lp-multi-column--lift) > .lp-hero {
		--lp-lift: 48px;
		padding-block-end: calc(var(--margin-vertical-normal) + var(--lp-lift));
	}
}

/* A background justifies a tall canvas; a text only hero sizes to its
content. The only block that keeps a min-height. */
.lp-hero.lp-block--has-bg {
	min-height: 600px;
}

.lp-hero .block-contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 3;

	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
}

/*--------------------------------------------------------------
# Background image
--------------------------------------------------------------*/
.lp-hero.anchor {
	position: relative;
}

.lp-hero__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* This ensures that the cover image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-hero__cover {
	height: 100%;
}


/* Slideshow: the left layout over a crossfading set of images. hero.js
moves is-active every six seconds; the first image is active from the
markup, so a static render, reduced motion and the editor canvas all
show it. */
.lp-hero__slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.lp-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.lp-hero__slide.is-active {
	opacity: 1;
}

.editor-styles-wrapper .lp-hero__slide {
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.lp-hero__slide {
		transition: none;
	}
}

/* Pause and play (WCAG 2.2.2, 2026-09-29). hero.js shows the button once
the show runs; the bars become a triangle while paused. */
.lp-hero__slideshow-toggle {
	position: absolute;
	right: 4vw;
	bottom: 24px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.35);
	color: #fff;
	cursor: pointer;
}

.lp-hero__slideshow-toggle[hidden] {
	display: none;
}

.lp-hero__slideshow-toggle::before {
	content: "";
	width: 12px;
	height: 14px;
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.lp-hero__slideshow-toggle[aria-pressed="true"]::before {
	margin-left: 3px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lp-hero__slideshow-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The midground follows the copy on wide screens (2026-09-29): full
strength from the copy's side to the end of its column, then fading
across the rest of the photo, so the photo keeps its life. The draft
review measures the copy against this strength less ten points, so it
stays on the safe side. Below 1024 the copy spans the width and the
shared top to bottom fade (style.css) stays. */
@media screen and (min-width: 1024px) {
	.lp-hero--left .lp-hero__tint,
	.lp-hero--slideshow .lp-hero__tint,
	.lp-hero--stage .lp-hero__tint,
	.lp-hero--right .lp-hero__tint {
		--lp-hero-copy-end: calc(max(4vw, 50% - var(--content-max-width, 1200px) / 2) + var(--max-width-narrow, 688px));
		background: linear-gradient(
			90deg,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) 0%,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) var(--lp-hero-copy-end),
			rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) * 0.4)) 100%
		);
	}

	/* A wide headline crosses the photo: the midground holds its strength
	all the way across. */
	.lp-hero--wide-headline .lp-hero__tint {
		--lp-hero-copy-end: 100%;
	}

	.lp-hero--right .lp-hero__tint {
		background: linear-gradient(
			270deg,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) 0%,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) var(--lp-hero-copy-end),
			rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) * 0.4)) 100%
		);
	}

	.lp-hero--centered .lp-hero__tint {
		background: radial-gradient(
			ellipse at center,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) 0%,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) 40%,
			rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) * 0.5)) 100%
		);
	}
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/* The copy region is one column flexbox in every layout. Literal
fallbacks because the editor canvas does not load style.css.

Spacing (2026-09-29): one rhythm, set on each element by what it follows,
instead of a flat gap plus the margins the elements carry (the intro's
paragraph margins made heading to intro 35px and intro to enhancers 48px,
with only 24px left above the buttons). The groups widen down the column:
the eyebrow sits on its headline, the intro belongs to the headline, the
enhancers support it, and the buttons stand apart as the action. */
.lp-hero__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	--lp-hero-space-eyebrow: 16px;
	--lp-hero-space-deck: 16px;
	--lp-hero-space-intro: 24px;
	--lp-hero-space-trust: 32px;
	--lp-hero-space-actions: 40px;
}

@media screen and (max-width: 765px) {
	.lp-hero__copy {
		--lp-hero-space-eyebrow: 12px;
		--lp-hero-space-deck: 12px;
		--lp-hero-space-intro: 20px;
		--lp-hero-space-trust: 28px;
		--lp-hero-space-actions: 32px;
	}
}

.lp-hero__copy > *,
.lp-hero__copy > .lp-hero__eyebrow {
	margin-block: 0;
}

.lp-hero__header {
	margin-top: var(--lp-hero-space-eyebrow);
}

.lp-hero__sub-header {
	margin-top: var(--lp-hero-space-deck);
}

.lp-hero__content {
	margin-top: var(--lp-hero-space-intro);
}

.lp-hero__copy > .lp-hero__trust {
	margin-top: var(--lp-hero-space-trust);
}

.lp-hero__copy > .lp-hero__actions {
	margin-top: var(--lp-hero-space-actions);
}

.lp-hero__copy > :first-child {
	margin-top: 0;
}

/* The intro's own paragraphs: no outer margins, one line between two. */
.lp-hero__content > :first-child {
	margin-top: 0;
}

.lp-hero__content > :last-child {
	margin-bottom: 0;
}

.lp-hero__content p + p {
	margin-top: 0.75em;
}

.lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: var(--font-size-small, 16px);
	font-weight: 600;
	color: var(--text-secondary, #6b717e);
}

.lp-hero__trust-item {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
}

/* A check beside each enhancer, in the accent colour, in both layouts
(2026-09-29). An item with its own icon shows the icon instead. */
.lp-hero__trust-item::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.1em;
	background: var(--text-accent, #615ff8);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-hero__trust-item:has(.lp-hero__trust-icon)::before {
	content: none;
}

/* An item with a bold lead ("<strong>30% Off</strong> plus a free color
upgrade", 2026-10-04): the rest of it reads regular, the lead bold. Items
without one are as before. */
.lp-hero__trust-item:has(strong) {
	font-weight: 400;
}

.lp-hero__trust-item strong {
	font-weight: 700;
}

.lp-hero__trust-icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: -0.05em;
	object-fit: contain;
}

/* Column, the default (Isaac, 2026-09-29): the enhancers stacked, one per
line, each icon or check beside its text. */
.lp-hero__trust--column {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

/* Row, always in the centred layout (Isaac, 2026-09-29) and an editor's
choice in the others: shapes by item count, decided in the template (the
per-N class is items per row, not the count): three or fewer on one
line, four as two and two, five and six as rows of three, seven or more
as rows of four; below the breakpoint anything past three goes two to a
row. Columns size to their text: the fixed thirds before broke short
facts onto two lines. */
.lp-hero__trust--row {
	display: grid;
	grid-template-columns: repeat(var(--lp-trust-per, 3), auto);
	justify-content: start;
	gap: 10px 28px;
}

.lp-hero__trust--per-1 { --lp-trust-per: 1; }
.lp-hero__trust--per-2 { --lp-trust-per: 2; }
.lp-hero__trust--per-3 { --lp-trust-per: 3; }
.lp-hero__trust--per-4 { --lp-trust-per: 4; }

@media screen and (max-width: 765px) {
	.lp-hero__trust--row.lp-hero__trust--per-3,
	.lp-hero__trust--row.lp-hero__trust--per-4 {
		--lp-trust-per: 2;
	}

	/* Centred on a phone the facts wrap as lines of text, each line
	centred, so an odd one out sits in the middle, not under the first. */
	.lp-hero--centered .lp-hero__trust--row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 24px;
	}
}

/* The line under the buttons (2026-10-20, Isaac, the Wheel Equipment
rebuild: option 1's hours line), quieter than the copy. */
.lp-hero__copy > .lp-hero__note {
	margin: 20px 0 0;
	font-size: var(--font-size-small, 16px);
	color: var(--text-secondary, #6b717e);
}

/* Stats (2026-10-20, Isaac, from the Wheel Equipment run): the enhancers
as figures over their labels, under the buttons with a line above, no
checks or icons. The bold lead is the figure; an item without one is all
figure. One per line on a phone. */
.lp-hero__copy > .lp-hero__trust--stats {
	margin-top: var(--lp-hero-space-stats, 48px);
}

.lp-hero__trust--stats {
	grid-template-columns: repeat(var(--lp-trust-per, 3), minmax(0, max-content));
	gap: 16px 36px;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	font-weight: 400;
}

.lp-hero__trust--stats .lp-hero__trust-item {
	display: block;
}

.lp-hero__trust--stats .lp-hero__trust-item::before {
	content: none;
}

.lp-hero__trust--stats .lp-hero__trust-item strong,
.lp-hero__trust--stats .lp-hero__trust-item > span:not(:has(strong)) {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-family-heading, inherit);
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--text-primary, #242527);
}

.lp-hero--centered .lp-hero__trust--stats {
	justify-content: center;
	text-align: center;
}

@media screen and (max-width: 765px) {
	.lp-hero__trust--stats,
	.lp-hero--centered .lp-hero__trust--stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* Copy over a photo keeps one readable column (2026-09-28): the header
and text were already narrow, but the trust row and the buttons spread
across the full container. Split layouts have their own column. */
.lp-hero--left .lp-hero__copy,
.lp-hero--right .lp-hero__copy,
.lp-hero--slideshow .lp-hero__copy {
	width: 100%;
	max-width: var(--max-width-narrow, 688px);
}

.lp-hero--right .lp-hero__copy {
	margin-left: auto;
}

/* A wide headline (2026-10-05, Closet Trends): the headline takes the
container's width while the eyebrow, the intro, the enhancers and the
buttons keep the readable column, and its size is clamped hard so it
shrinks well on phones. Set by the block's Wide headline switch (or the
class lp-hero--wide-headline). .lp-block in the selector outranks the
styles' own headline rules. */
.lp-hero--wide-headline .lp-hero__copy {
	max-width: none;
}

.lp-hero--wide-headline .lp-hero__copy > :not(.lp-hero__header) {
	max-width: var(--max-width-narrow, 688px);
}

.lp-block.lp-hero--wide-headline .lp-hero__header {
	max-width: none;
	font-size: var(--lp-hero-wide-size, clamp(1.375rem, 3.8vw, 3.5rem));
	line-height: 1.04;
}

/* Centered aligns the boxes and the text inside them. Right places the
column on the right and keeps its text left aligned (2026-09-29): ragged
left paragraphs read poorly. */
.lp-hero--centered .block-contents {
	max-width: var(--content-width-narrow, 640px);
}

.lp-hero--centered .lp-hero__copy {
	align-items: center;
	text-align: center;
}

.lp-hero--centered .lp-hero__header,
.lp-hero--centered .lp-hero__sub-header,
.lp-hero--centered .lp-hero__content {
	max-width: none;
}

.lp-hero--centered .lp-hero__actions,
.lp-hero--centered .lp-hero__trust {
	justify-content: center;
}

/* Split: copy beside a photo or the form card. Media on the right by
default; media-left mirrors the columns and moves the aside first. */
.lp-hero--split-photo .block-contents,
.lp-hero--split-form .block-contents {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3rem;
	align-items: center;
}

/* Beside a form the copy starts at the top and stays in view while the
form scrolls past (2026-09-29), as the form block's info column does. */
.lp-hero--split-form .block-contents {
	align-items: start;
}

@media screen and (min-width: 1024px) {
	.lp-hero--split-form .lp-hero__copy {
		position: sticky;
		top: calc(var(--header-height, 80px) + 24px);
	}
}

.lp-hero--media-left.lp-hero--split-photo .block-contents,
.lp-hero--media-left.lp-hero--split-form .block-contents {
	grid-template-columns: 0.9fr 1.1fr;
}

.lp-hero--media-left .lp-hero__aside {
	order: -1;
}

.lp-hero__aside {
	min-width: 0;
}

.lp-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--card-radius, 12px);
	object-fit: cover;
	aspect-ratio: 4 / 5;
	max-height: 640px;
}

.lp-hero__form-card {
	background: var(--surface-card, #fff);
	color: var(--text-primary, #242527);
	border-radius: var(--card-radius, 12px);
	border-top: var(--card-top, 0 solid transparent);
	padding: 2rem;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.lp-hero__form-card .gform_wrapper {
	margin: 0;
}

/* A message box sized for a hero, not the form's 288px default. */
.lp-hero .lp-hero__form-card .gform_wrapper .gfield textarea.large {
	height: 8rem;
	min-block-size: 0;
}

/* The split layouts stack below 1024, where the page header switches to
its phone layout too (2026-09-29): two columns at tablet widths broke
every trust line and squeezed the form card. Stacked, the copy and the
media share one readable column. */
@media screen and (max-width: 1023px) {
	.lp-hero--split-photo .block-contents,
	.lp-hero--split-form .block-contents,
	.lp-hero--media-left.lp-hero--split-photo .block-contents,
	.lp-hero--media-left.lp-hero--split-form .block-contents {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.lp-hero--split-photo .lp-hero__copy,
	.lp-hero--split-form .lp-hero__copy,
	.lp-hero__aside {
		width: 100%;
		max-width: var(--max-width-narrow, 688px);
	}

	.lp-hero__photo {
		aspect-ratio: 16 / 10;
		max-height: none;
	}

	/* Stacked, the copy leads the form either way. */
	.lp-hero--media-left .lp-hero__aside {
		order: 0;
	}
}

/* Photo frames (2026-10-11, components/photo-frames.css). Floating chips
show the credibility enhancers over the photo on wide screens, so the list
leaves the copy there; stacked, the list stays in the copy and the chips
go. */
@media screen and (min-width: 1024px) {
	.lp-hero--frame-chips .lp-hero__trust {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.lp-hero--frame-chips .lp-frame__chips {
		display: none;
	}
}

/* On a phone the copy leads and the photo follows, as the form card does
(Isaac, 2026-10-11; from 2026-09-29 the photo led, so the first screen
was not text only, but a framed photo pushed the headline down). */
@media screen and (max-width: 765px) {
	.lp-hero__form-card {
		padding: 1.25rem;
	}
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Default Font Colors
--------------------------------------------- */

/* The hero's headline has its own size (2026-09-29), a step above the
section headers in every density: --font-size-hero, set with the other
sizes in the density presets (inc/look.php) and in style.css. */
.lp-hero__header {
	color: var(--text-primary);
	max-width: var(--max-width-narrow);
	font-size: var(--font-size-hero, var(--font-size-h1));
}

.lp-hero__sub-header {
	color: var(--text-primary);
	max-width: var(--max-width-narrow);
}

.lp-hero__content {
	color: var(--text-secondary);
	max-width: var(--max-width-narrow);
}

/* The intro reads as a lead, two pixels over body copy (2026-09-29). */
.lp-hero__content,
.lp-hero__content p {
	font-size: calc(var(--font-size-body, 17px) + 2px);
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

/* A size up from the page's buttons (2026-09-29): taller, semibold, and
the same height side by side, the primary taking a clear border where
the secondary has its outline. */
.lp-hero__actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 24px;
	font-weight: 600;
	line-height: 1.2;
}

.lp-hero__actions .btn-primary {
	border: 1px solid transparent;
}


/*--------------------------------------------------------------
# Seven more layouts (2026-10-20, Isaac, the layout variants review)
--------------------------------------------------------------*/
/* Written phone first, widening at the file's own breakpoints (766 and
1024); the mosaic alone also uses 640, where its grid goes to one
column. */

/* Stage: a dark band (the layout's own surface; a background photo
optional under the midground), the copy and its trust row on the left,
the phone in a card on the right with who answers and the buttons. The
card goes under the copy below 1024. */
.lp-hero--stage .block-contents {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	align-items: center;
	gap: 2rem;
}

@media screen and (min-width: 1024px) {
	.lp-hero--stage .block-contents {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: 3.5rem;
	}
}

.lp-hero__call {
	padding: 1.5rem 1.375rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: var(--card-radius, 12px);
	background: rgb(0 0 0 / 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

@media screen and (min-width: 766px) {
	.lp-hero__call {
		padding: 2.25rem;
	}
}

/* On a light band (Subtle) the card is a light card. */
.lp-hero--stage:not(.is-dark) .lp-hero__call {
	border-color: var(--border-default, #dcdcdc);
	background: var(--surface-card, #fff);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.lp-hero__call > * {
	margin: 0;
}

.lp-hero__call-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-small, 16px);
	font-weight: 600;
	color: var(--text-accent, #615ff8);
}

/* The phone mark only beside words: an empty label in the editor shows
ACF's placeholder in its own ::before. */
.lp-hero__call-label:not(:empty)::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The number nearly as large as the headline. */
.lp-hero__call > .lp-hero__call-number {
	display: block;
	margin-block: 0.35em 0.4em;
	font-family: var(--font-family-heading, inherit);
	font-size: calc(var(--font-size-hero, var(--font-size-h1, 48px)) * 0.85);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.lp-hero__call-number:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.lp-hero__call-note {
	font-size: var(--font-size-small, 16px);
	line-height: 1.5;
	color: var(--text-secondary);
}

.lp-hero__call > .lp-hero__actions {
	margin-top: 1.5rem;
}

/* Photo led: a tall photo with the headline low on it and the page's
hours in a light card on the right; the card goes under the copy below
1024. The midground gathers at the bottom, under the headline. */
.lp-hero--photo-led {
	padding-block-start: calc(220px + var(--lp-over-offset, 0px));
}

.lp-hero--photo-led .block-contents {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: end;
	gap: 2rem;
}

.lp-hero--photo-led .lp-hero__aside {
	width: 100%;
	max-width: 440px;
}

/* Stacked, the copy starts under the photo's open top: full strength
from there down. */
.lp-hero--photo-led .lp-hero__tint {
	background: linear-gradient(
		180deg,
		rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) * 0.15)) 0,
		rgb(from var(--tint-color) r g b / var(--tint-opacity)) calc(200px + var(--lp-over-offset, 0px))
	);
}

@media screen and (min-width: 1024px) {
	.lp-hero--photo-led {
		padding-block-start: calc(var(--margin-vertical-wider) + var(--lp-over-offset, 0px));
	}

	.lp-hero--photo-led .lp-hero__tint {
		background: linear-gradient(
			180deg,
			rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) * 0.15)) 15%,
			rgb(from var(--tint-color) r g b / var(--tint-opacity)) 85%
		);
	}

	.lp-hero--photo-led.lp-block--has-bg {
		min-height: 760px;
	}

	.lp-hero--photo-led .block-contents {
		grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
		align-items: end;
		gap: 4rem;
	}
}

/* The light cards (photo led's hours, the booking card): the form card's
shell. */
.lp-hero__hours-card,
.lp-hero__booking {
	padding: 1.5rem 1.375rem 1.25rem;
	border-radius: var(--card-radius, 12px);
	border-top: var(--card-top, 0 solid transparent);
	background: var(--surface-card, #fff);
	color: var(--text-primary, #242527);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

@media screen and (min-width: 766px) {
	.lp-hero__hours-card,
	.lp-hero__booking {
		padding: 1.75rem 1.75rem 1.5rem;
	}
}

.lp-hero__hours-card > *,
.lp-hero__booking > * {
	margin: 0;
}

.lp-hero__card-title {
	font-family: var(--font-family-body, inherit);
	font-size: var(--font-size-small, 16px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-secondary, #6b717e);
}

/* Today's line: the state and the time, large. */
.lp-hero__today {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
}

.lp-hero__hours-card > .lp-hero__today {
	margin-top: 0.75rem;
}

.lp-hero__today-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-accent, #615ff8);
}

.lp-hero__today-label::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.lp-hero__today.is-closed .lp-hero__today-label {
	color: var(--text-secondary, #6b717e);
}

.lp-hero__today-time {
	flex-basis: 100%;
	font-family: var(--font-family-heading, inherit);
	font-size: var(--font-size-h4, 30px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--text-primary, #242527);
}

/* The week, a small table; today's row in the accent. */
.lp-hero__hours-card > .lp-hero__hours {
	width: 100%;
	margin-top: 1rem;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.35;
}

.lp-hero__hours :is(th, td) {
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--border-default, #dcdcdc);
	text-align: left;
	font-weight: 400;
	color: var(--text-primary, #242527);
	background: none;
}

.lp-hero__hours td {
	padding-left: 1rem;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.lp-hero__hours td[colspan] {
	padding-left: 0;
	text-align: left;
	white-space: normal;
}

.lp-hero__hours tr.is-today :is(th, td) {
	color: var(--text-accent, #615ff8);
	font-weight: 700;
}

.lp-hero__hours-card > .lp-hero__card-trust {
	margin-top: 0.25rem;
	color: var(--text-primary, #242527);
}

.lp-hero__hours-card > .lp-hero__actions,
.lp-hero__booking > .lp-hero__actions {
	margin-top: 1.25rem;
}

.lp-hero__hours-card > .lp-frame-note {
	margin-bottom: 1rem;
}

/* The buttons stacked full width in a light card. */
.lp-hero__actions--stacked {
	flex-direction: column;
	gap: 10px;
}

.lp-hero__actions--stacked .btn {
	width: 100%;
}

/* The layouts without a background photo size to their content, a band
or not: no 600px canvas. */
.lp-hero:is(.lp-hero--text-first, .lp-hero--mosaic, .lp-hero--booking-card, .lp-hero--headline-photo, .lp-hero--compact).lp-block--has-bg {
	min-height: 0;
}

/* Text first: no photo. A large headline across the container, a sentence
or two and the buttons in the readable column, then the trust items as a
credential line under a rule (after the buttons by order, so the reading
order keeps the copy's). */
.lp-hero--text-first .lp-hero__copy {
	max-width: none;
}

.lp-block.lp-hero--text-first .lp-hero__header {
	max-width: 900px;
	font-size: calc(var(--font-size-hero, var(--font-size-h1, 48px)) * 1.1);
	line-height: 1.05;
}

.lp-hero--text-first .lp-hero__copy > .lp-hero__trust {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
	margin-top: 56px;
	padding-top: 22px;
	border-top: 1px solid var(--border-default, #dcdcdc);
	font-weight: 500;
}

@media screen and (min-width: 766px) {
	.lp-hero--text-first .lp-hero__copy > .lp-hero__trust {
		margin-top: 88px;
	}
}

/* Mosaic: the copy centered (as Centered, the trust items a row) over an
edge to edge grid of the gallery's first five photos, no midground: one
tall on the left, two side by side in the middle over a wide one, one
tall on the right; fewer photos, fewer cells. Two columns below 1024,
the first across both; one column below 640. */
.lp-hero--mosaic {
	flex-direction: column;
	padding-block-end: 10px;
}

.lp-hero--mosaic .block-contents {
	max-width: 900px;
}

.lp-hero--mosaic .lp-hero__copy {
	align-items: center;
	text-align: center;
}

.lp-hero--mosaic :is(.lp-hero__header, .lp-hero__sub-header) {
	max-width: none;
}

.lp-hero--mosaic .lp-hero__content {
	max-width: 720px;
}

.lp-hero--mosaic :is(.lp-hero__actions, .lp-hero__trust) {
	justify-content: center;
}

.lp-hero__mosaic {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 40px calc(10px - 4vw) 0;
}

.lp-hero__mosaic-photo {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--card-radius, 12px);
}

.lp-hero__mosaic-placeholder {
	grid-column: 1 / -1;
	min-height: 220px;
}

@media screen and (min-width: 640px) {
	.lp-hero__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 220px;
		grid-auto-rows: 140px;
	}

	.lp-hero__mosaic-photo {
		aspect-ratio: auto;
	}

	.lp-hero__mosaic > :nth-child(1) { grid-area: a; }
	.lp-hero__mosaic > :nth-child(2) { grid-area: b; }
	.lp-hero__mosaic > :nth-child(3) { grid-area: c; }
	.lp-hero__mosaic > :nth-child(4) { grid-area: d; }
	.lp-hero__mosaic > :nth-child(5) { grid-area: e; }

	.lp-hero__mosaic--5 { grid-template-areas: "a a" "b c" "d e"; }
	.lp-hero__mosaic--4 { grid-template-areas: "a a" "b c" "d d"; }
	.lp-hero__mosaic--3 { grid-template-areas: "a a" "b c"; }
	.lp-hero__mosaic--2 { grid-template-areas: "a b"; }
	.lp-hero__mosaic--1 { grid-template-areas: "a"; grid-template-rows: 300px; }
	.lp-hero__mosaic--0 { grid-template-areas: none; }
}

@media screen and (min-width: 1024px) {
	.lp-hero__mosaic {
		gap: 10px;
		margin-top: 64px;
		grid-template-rows: repeat(2, clamp(170px, 16vw, 250px));
	}

	.lp-hero__mosaic--5 { grid-template-columns: 2fr 1fr 1fr 1.3fr; grid-template-areas: "a b c e" "a d d e"; }
	.lp-hero__mosaic--4 { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "a b c" "a d d"; }
	.lp-hero__mosaic--3 { grid-template-columns: 2fr 1.3fr; grid-template-areas: "a b" "a c"; }
	.lp-hero__mosaic--2 { grid-template-columns: 2fr 1.3fr; grid-template-areas: "a b" "a b"; }
	.lp-hero__mosaic--1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "a"; }
}

/* No photos yet (the editor only): one wide placeholder tile. */
.lp-hero__mosaic.lp-hero__mosaic--0 {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
}

.lp-hero__mosaic--0 > .lp-hero__mosaic-placeholder {
	grid-area: auto;
	min-height: 0;
	aspect-ratio: 21 / 9;
}

/* Booking card: calm copy beside a photo, a light card over the photo's
lower edge with the visit types and the times of day as chips and the
main button. Stacked below 1024: the copy, the photo, the card rising
over the photo's lower edge. */
.lp-hero--booking-card .block-contents {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
}

.lp-hero--booking-card .lp-hero__aside {
	position: relative;
	width: 100%;
	max-width: var(--max-width-narrow, 688px);
}

.lp-hero--booking-card .lp-hero__photo {
	aspect-ratio: 16 / 10;
	max-height: none;
}

.lp-hero--booking-card .lp-hero__booking {
	position: relative;
	z-index: 1;
	margin: -48px 12px 0;
}

@media screen and (min-width: 1024px) {
	.lp-hero--booking-card .block-contents {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 4.5rem;
	}

	.lp-hero--booking-card.lp-hero--media-left .block-contents {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.lp-hero--booking-card .lp-hero__aside {
		max-width: none;
		padding: 0 0 64px 64px;
	}

	.lp-hero--booking-card.lp-hero--media-left .lp-hero__aside {
		padding: 0 64px 64px 0;
	}

	.lp-hero--booking-card .lp-hero__photo {
		aspect-ratio: 10 / 9;
	}

	.lp-hero--booking-card .lp-hero__booking {
		position: absolute;
		left: 0;
		bottom: 0;
		width: min(380px, 80%);
		margin: 0;
	}

	.lp-hero--booking-card.lp-hero--media-left .lp-hero__booking {
		left: auto;
		right: 0;
	}
}

.lp-hero__booking > .lp-hero__booking-title {
	font-family: var(--font-family-heading, inherit);
	font-size: var(--font-size-h5, 24px);
	line-height: 1.2;
	color: var(--text-primary, #242527);
}

.lp-hero__booking > .lp-hero__choices {
	min-width: 0;
	margin-top: 1rem;
	padding: 0;
	border: 0;
}

.lp-hero__choices-label {
	padding: 0;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-secondary, #6b717e);
}

.lp-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lp-hero__chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

/* The radio stays in the page for the keyboard and screen readers; the
chip is its label. */
.lp-hero__chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.lp-hero__chip span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 13px;
	border: 1px solid var(--border-default, #dcdcdc);
	border-radius: 999px;
	background: var(--surface-card, #fff);
	color: var(--text-primary, #242527);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color 0.15s, background-color 0.15s;
}

.lp-hero__chip:hover span {
	border-color: var(--accent-default, #615ff8);
}

.lp-hero__chip input:checked + span {
	border-color: var(--accent-default, #615ff8);
	background: var(--accent-tint, #eeeefe);
	color: var(--accent-strong, #4e4cc6);
}

.lp-hero__chip input:focus-visible + span {
	outline: 2px solid var(--border-focus, #615ff8);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-hero__chip span {
		transition: none;
	}
}

/* Headline over photo: a very large headline and a short paragraph with
the buttons, both above the photo, which runs full width under them with
nothing on top (21:9, 4:3 on phones). At 1024 and up the paragraph and
the buttons sit beside the headline, their last line on its last line. */
.lp-hero--headline-photo {
	flex-direction: column;
	padding-block-end: 0;
}

.lp-hero--headline-photo .lp-hero__copy {
	max-width: none;
}

.lp-block.lp-hero--headline-photo .lp-hero__header {
	max-width: none;
	font-size: calc(var(--font-size-hero, var(--font-size-h1, 48px)) * 1.3);
	line-height: 1;
	letter-spacing: -0.02em;
}

.lp-hero__wide-photo {
	margin: 36px -4vw 0;
}

.lp-hero--headline-photo .lp-hero__photo {
	aspect-ratio: 4 / 3;
	max-height: none;
	border-radius: 0;
}

.lp-hero--headline-photo .lp-hero__photo-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 0;
}

@media screen and (min-width: 766px) {
	.lp-hero__wide-photo {
		margin-top: 60px;
	}

	.lp-hero--headline-photo :is(.lp-hero__photo, .lp-hero__photo-placeholder) {
		aspect-ratio: 21 / 9;
	}
}

@media screen and (min-width: 1024px) {
	.lp-hero--headline-photo .lp-hero__copy {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr repeat(4, auto);
		column-gap: 4.5rem;
	}

	.lp-hero--headline-photo .lp-hero__copy > * {
		grid-column: 2;
	}

	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__header {
		grid-column: 1;
		grid-row: 2 / -1;
		align-self: end;
	}

	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__sub-header { grid-row: 3; }
	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__content { grid-row: 4; }
	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__trust { grid-row: 5; }
	.lp-hero--headline-photo .lp-hero__copy > .lp-hero__actions { grid-row: 6; }
}

/* Compact: a short band (Subtle, the layout's own surface), no photo:
the eyebrow and the headline on the left, the buttons on the right on the
same line at 1024 and up, under them below. No content and no trust
items (the template leaves them out). About 160px tall. */
.lp-hero--compact {
	padding-block: calc(var(--margin-vertical-normal, 50px) * 0.8);
	padding-block-start: calc(var(--margin-vertical-normal, 50px) * 0.8 + var(--lp-over-offset, 0px));
}

.lp-block.lp-hero--compact .lp-hero__header {
	max-width: none;
	font-size: var(--font-size-h2, 40px);
	line-height: 1.1;
}

.lp-hero--compact .lp-hero__copy > .lp-hero__actions {
	margin-top: 24px;
}

@media screen and (min-width: 1024px) {
	.lp-hero--compact .lp-hero__copy {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 3rem;
		align-items: center;
	}

	.lp-hero--compact .lp-hero__copy > * {
		grid-column: 1;
	}

	.lp-hero--compact .lp-hero__copy > .lp-hero__actions {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
	}
}

/*--------------------------------------------------------------
# Orbs behind text first and compact (2026-10-20, Isaac)
--------------------------------------------------------------*/
/* The two layouts with no photo get three soft circles in the palette's
accents, blurred and faint, drifting slowly behind the copy; the band's
own color stays. Still under reduced motion and in the editor's is-still
state. The contents sit above (z-index 3). */
.lp-hero--text-first,
.lp-hero--compact {
	position: relative;
	overflow: hidden;
}

.lp-hero__orbs {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	--lp-orb-1: var(--accent-300, #615ff8);
	--lp-orb-2: var(--primary-200, #94a9c3);
	--lp-orb-3: var(--accent-200, #a5a4fb);
}

.lp-hero__orbs i {
	position: absolute;
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: var(--c);
	opacity: 0.22;
	filter: blur(48px);
	animation: lp-hero-orb var(--t) ease-in-out infinite alternate;
	will-change: transform;
}

.lp-hero__orbs i:nth-child(1) { --s: 42vw; --t: 14s; --c: var(--lp-orb-1); top: -18%; right: -8%; --dx: -4vw; --dy: 6vh; }
.lp-hero__orbs i:nth-child(2) { --s: 30vw; --t: 18s; --c: var(--lp-orb-2); bottom: -26%; left: 8%; --dx: 5vw; --dy: -5vh; }
.lp-hero__orbs i:nth-child(3) { --s: 22vw; --t: 11s; --c: var(--lp-orb-3); top: 30%; left: 46%; --dx: -3vw; --dy: 4vh; }

/* Compact is short: smaller, fainter orbs. */
.lp-hero--compact .lp-hero__orbs i {
	opacity: 0.16;
	filter: blur(36px);
}

.lp-hero--compact .lp-hero__orbs i:nth-child(1) { --s: 26vw; top: -60%; }
.lp-hero--compact .lp-hero__orbs i:nth-child(2) { --s: 18vw; bottom: -70%; }
.lp-hero--compact .lp-hero__orbs i:nth-child(3) { --s: 14vw; top: -20%; left: 60%; }

/* On a dark band the orbs read as a glow. */
.lp-hero.is-dark .lp-hero__orbs i,
.lp-hero.lp-block--dark .lp-hero__orbs i {
	opacity: 0.28;
}

@keyframes lp-hero-orb {
	to { transform: translate(var(--dx, 3vw), var(--dy, 4vh)); }
}

@media (prefers-reduced-motion: reduce) {
	.lp-hero__orbs i {
		animation: none;
	}
}