/*
Theme Name: LPM Build
Theme URI: https://lpmdorking.co.uk
Author: LPM Build
Description: Block theme for LPM Build — Local Property Maintenance, Dorking. A black-and-gold letterhead over ruled estimate paper, with patterns for the homepage hero, intro, itemised services, photo collage and contact strip.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lpm-build
*/

/* ---------- Browser surfaces ---------- */
@view-transition {
	navigation: auto;
}
html {
	scroll-behavior: smooth;
}
:root {
	--lpm-ease: cubic-bezier(0.16, 1, 0.3, 1);
	interpolate-size: allow-keywords;
	accent-color: var(--wp--preset--color--gold-dark);
	caret-color: var(--wp--preset--color--carbon);
}
::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover {
	text-decoration-thickness: 2px;
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--carbon);
	outline-offset: 3px;
}
/* On black and over photos: the live site's gold ring. Paper keeps carbon, as #d9b45a is under 3:1 on paper. */
.has-ink-background-color :focus-visible,
.lpm-letterhead :focus-visible,
.wp-block-cover :focus-visible {
	outline: 2px solid #d9b45a;
	outline-offset: 3px;
}
.skip-link:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6 {
	font-stretch: 80%;
	text-wrap: balance;
}
p, li, dd, figcaption {
	text-wrap: pretty;
}
.has-xx-large-font-size,
.has-x-large-font-size {
	font-stretch: 80%;
}
:where(.wp-site-blocks) {
	font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	min-height: var(--wp--custom--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	text-decoration: none;
	transition: background-color 0.2s var(--lpm-ease), color 0.2s var(--lpm-ease), border-color 0.2s var(--lpm-ease), scale 0.08s ease-out;
}
.wp-element-button:active,
.wp-block-button__link:active {
	scale: 0.97;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}
/* Outline fills with its own colour: white over photos and black, ink on paper */
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
:is(.wp-block-cover, .has-ink-background-color) .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* ---------- Hero arrival: the one focal moment ---------- */
@keyframes lpm-settle {
	from { scale: 1.06; }
}
@keyframes lpm-rise {
	from { opacity: 0; translate: 0 14px; }
}
@keyframes lpm-fade {
	from { opacity: 0; }
}
.lpm-hero .wp-block-cover__image-background {
	animation: lpm-settle 1.4s var(--lpm-ease) both;
}
.lpm-hero .wp-block-cover__inner-container > .wp-block-group > * {
	animation: lpm-rise 0.6s var(--lpm-ease) both;
}
.lpm-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(2) { animation-delay: 0.08s; }
.lpm-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(3) { animation-delay: 0.16s; }
.lpm-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(4) { animation-delay: 0.24s; }
/* Phone glyph on call buttons */
.lpm-call .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--lpm-phone) center / contain no-repeat;
	mask: var(--lpm-phone) center / contain no-repeat;
}
:root {
	--lpm-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

/* ---------- Letterhead (header) ---------- */
.lpm-letterhead {
	position: relative;
	border-bottom: 4px solid var(--wp--preset--color--gold);
}
/* Tear-off perforation: holes punched along the join between band and sheet */
.lpm-letterhead::after,
.is-style-perforated::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	height: 8px;
	background: radial-gradient(circle, var(--wp--preset--color--paper) 2.5px, transparent 3px) 7px 50% / 14px 8px repeat-x;
	pointer-events: none;
}
.lpm-letterhead::after {
	bottom: -6px; /* centred on the gold rule */
}
.is-style-perforated {
	position: relative;
}
.is-style-perforated::before {
	top: -4px; /* centred on the top edge */
}
.wp-block-site-logo img {
	display: block;
}
/* The logo PNG has its own near-black box; lighten drops it into the band */
.lpm-letterhead .wp-block-site-logo img,
.has-ink-background-color .wp-block-site-logo img {
	mix-blend-mode: lighten;
}
.lpm-letterhead__name p {
	margin: 0;
	text-wrap: nowrap;
	line-height: 1.15;
}
.lpm-letterhead__years {
	margin: 0;
	border: 1px solid var(--wp--preset--color--gold);
	padding: 0.35rem 0.7rem;
	white-space: nowrap;
}
.lpm-letterhead__years strong {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-stretch: 85%;
}
.lpm-letterhead__nav {
	border-top: 1px solid var(--wp--preset--color--ink-soft);
	padding-top: 0.15rem;
}
.lpm-letterhead .wp-block-navigation a {
	text-decoration: none;
	padding-block: 0.6rem;
}
.lpm-letterhead .wp-block-navigation a:hover,
.lpm-letterhead .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
}
.lpm-call--number .wp-block-button__link,
.lpm-call--big .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
	font-stretch: 85%;
	font-weight: 800;
}
/* 48px menu toggle and close */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lpm-letterhead .wp-block-navigation__responsive-container-open {
	border: 2px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}
.lpm-letterhead .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}
.lpm-letterhead .is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	align-items: flex-start;
}
.lpm-letterhead .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.lpm-letterhead .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: flex-start;
}
.lpm-letterhead .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 80%;
	font-weight: 800;
	gap: 0.75rem;
}
.lpm-letterhead .wp-block-site-logo,
.lpm-letterhead .wp-block-buttons {
	flex-shrink: 0;
}
.lpm-letterhead__name,
.lpm-letterhead .wp-block-button__link,
.lpm-letterhead .wp-block-navigation-item a {
	white-space: nowrap;
}
.lpm-letterhead .wp-block-navigation__container,
.lpm-letterhead .wp-block-page-list {
	flex-wrap: nowrap;
}
.wp-block-buttons > .wp-block-button.lpm-call--compact {
	display: none;
}
@media (max-width: 1099px) {
	.lpm-letterhead .lpm-letterhead__years { display: none; }
}
@media (max-width: 999px) {
	.lpm-letterhead__name p:last-child {
		text-wrap: wrap;
		max-width: 15rem;
	}
}
/* Phone: one row of logo, menu toggle, call */
@media (max-width: 781px) {
	.lpm-letterhead.lpm-letterhead {
		flex-direction: row;
		align-items: center;
		padding-bottom: 1rem;
	}
	.lpm-letterhead .lpm-letterhead__top,
	.lpm-letterhead .lpm-letterhead__actions,
	.lpm-letterhead .lpm-letterhead__nav {
		display: contents;
	}
	.lpm-letterhead__brand { margin-right: auto; }
	.lpm-letterhead .wp-block-navigation { order: 1; }
	.lpm-letterhead .wp-block-buttons { order: 2; }
	.lpm-letterhead .lpm-letterhead__name { display: none; }
	.wp-block-buttons > .wp-block-button.lpm-call--number { display: none; }
	.wp-block-buttons > .wp-block-button.lpm-call--compact { display: block; }
	.lpm-call--compact .wp-block-button__link {
		min-width: var(--wp--custom--touch-target);
		padding-inline: 0.9rem;
	}
	.lpm-letterhead .wp-block-site-logo img { width: 64px !important; }
}

/* ---------- Estimate sheet ----------
   Every line box, gap and padding on the sheet is a whole number of rule
   pitches, so text sits on the ruling. The pitch is the body line height. */
:root {
	--lpm-pitch: calc(1.6 * var(--wp--preset--font-size--medium));
}
.is-style-estimate-sheet {
	--lpm-margin-x: clamp(0.45rem, 2vw, 1.4rem);
	padding-block: calc(var(--lpm-pitch) * 3);
	background-color: var(--wp--preset--color--paper);
	background-image:
		linear-gradient(to right, transparent var(--lpm-margin-x), var(--wp--preset--color--margin) var(--lpm-margin-x), var(--wp--preset--color--margin) calc(var(--lpm-margin-x) + 1px), transparent calc(var(--lpm-margin-x) + 1px), transparent calc(var(--lpm-margin-x) + 4px), var(--wp--preset--color--margin) calc(var(--lpm-margin-x) + 4px), var(--wp--preset--color--margin) calc(var(--lpm-margin-x) + 5px), transparent calc(var(--lpm-margin-x) + 5px)),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--lpm-pitch) - 1px), var(--wp--preset--color--rule) calc(var(--lpm-pitch) - 1px) var(--lpm-pitch));
	/* lift the rules from the line-box bottom to just under the baseline */
	background-position: 0 0, 0 calc(var(--lpm-pitch) * -0.2);
}
.is-style-estimate-sheet :is(p, li, figcaption, .wp-block-post-date, .wp-block-search__label) {
	line-height: var(--lpm-pitch);
}
.is-style-estimate-sheet .has-large-font-size {
	font-size: calc(var(--lpm-pitch) * 0.74);
}
.is-style-estimate-sheet :is(h2, h3, .has-x-large-font-size) {
	font-size: calc(var(--lpm-pitch) * 1.65);
	line-height: calc(var(--lpm-pitch) * 2);
}
.is-style-estimate-sheet h1 {
	font-size: calc(var(--lpm-pitch) * 1.65);
	line-height: calc(var(--lpm-pitch) * 2);
}
@media (min-width: 782px) {
	.is-style-estimate-sheet h1 {
		font-size: calc(var(--lpm-pitch) * 2.55);
		line-height: calc(var(--lpm-pitch) * 3);
	}
}
.is-style-estimate-sheet :is(.is-layout-flow, .is-layout-constrained) > *,
.is-style-estimate-sheet:is(.is-layout-flow, .is-layout-constrained) > * {
	margin-block: 0;
}
.is-style-estimate-sheet :is(.is-layout-flow, .is-layout-constrained) > * + *,
.is-style-estimate-sheet:is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: var(--lpm-pitch);
}
.is-style-estimate-sheet .wp-block-columns {
	row-gap: calc(var(--lpm-pitch) * 2);
	margin-block: 0;
}
.is-style-estimate-sheet .wp-block-buttons .wp-block-button__link {
	min-height: calc(var(--lpm-pitch) * 2);
	padding-block: 0;
}
.is-style-estimate-sheet .wp-block-search__input,
.is-style-estimate-sheet .wp-block-search__button {
	height: calc(var(--lpm-pitch) * 2);
	padding-block: 0;
}

/* Intro signature line */
.is-style-estimate-sheet .lpm-signature {
	margin-block-start: calc(var(--lpm-pitch) * 2);
	max-width: 30rem;
}

/* ---------- Itemised services ---------- */
.lpm-estimate {
	--lpm-no: 3.5rem;
	counter-reset: lpm-item;
	box-shadow: 0 -2px 0 var(--wp--preset--color--ink);
}
.is-style-estimate-sheet .lpm-estimate > * + * {
	margin-block-start: 0;
}
/* column heads, as printed on the pad */
.lpm-estimate__head {
	display: grid;
	grid-template-columns: var(--lpm-no) 1fr;
	color: var(--wp--preset--color--carbon);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--ink-soft);
}
.lpm-estimate__head::before {
	content: "No.";
	padding-left: 0.25rem;
}
.lpm-estimate > .wp-block-details {
	counter-increment: lpm-item;
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--ink-soft);
	margin: 0;
}
.lpm-estimate summary {
	display: grid;
	grid-template-columns: var(--lpm-no) 1fr var(--wp--custom--touch-target);
	align-items: center;
	min-height: calc(var(--lpm-pitch) * 2);
	padding-block: calc(var(--lpm-pitch) / 2);
	list-style: none;
	cursor: pointer;
	font-size: calc(var(--lpm-pitch) * 0.78);
	font-weight: 700;
	font-stretch: 85%;
	line-height: var(--lpm-pitch);
	transition: background-color 0.2s var(--lpm-ease);
}
.lpm-estimate summary::-webkit-details-marker {
	display: none;
}
.lpm-estimate summary::before {
	content: counter(lpm-item, decimal-leading-zero);
	color: var(--wp--preset--color--carbon);
	font-weight: 700;
	font-stretch: 80%;
	padding-left: 0.25rem;
}
/* plus that turns to a cross when the line is open */
.lpm-estimate summary::after {
	content: "";
	justify-self: center;
	width: 18px;
	height: 18px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	color: var(--wp--preset--color--gold-dark);
	transition: rotate 0.3s var(--lpm-ease);
}
.lpm-estimate details[open] > summary::after {
	rotate: 45deg;
}
.lpm-estimate summary:hover {
	background-color: rgb(165 123 27 / 0.08);
}
.lpm-estimate details > :not(summary) {
	margin-inline: var(--lpm-no) var(--wp--custom--touch-target);
	margin-block-end: 0;
	max-width: 60ch;
}
.lpm-estimate details > :last-child {
	padding-bottom: var(--lpm-pitch);
}
/* A job photo inside an open line, sized to whole rule pitches */
.lpm-estimate details > .wp-block-image {
	margin-block-start: var(--lpm-pitch);
}
.lpm-estimate details > .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: calc(var(--lpm-pitch) * 8);
	object-fit: cover;
}
.is-style-estimate-sheet .lpm-estimate details > summary + * {
	margin-block-start: 0;
}
.lpm-estimate details::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.35s var(--lpm-ease), content-visibility 0.35s allow-discrete;
}
.lpm-estimate details[open]::details-content {
	block-size: auto;
}

/* ---------- Photo collage ---------- */
.lpm-collage > .wp-block-image {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}
.lpm-collage > .wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.lpm-collage > .wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.lpm-collage > .wp-block-image figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	max-width: calc(100% - 1rem);
	padding: 0.35rem 0.65rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}
@media (max-width: 781px) {
	.lpm-collage.lpm-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lpm-collage > .wp-block-image:first-child {
		grid-row: span 1;
	}
}

/* ---------- Contact strip & footer on black ---------- */
.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--gold-light);
}
.has-ink-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--white);
}
.has-ink-background-color :where(h1, h2, h3) {
	color: var(--wp--preset--color--white);
}
.lpm-phone-big a {
	text-decoration: none;
	font-stretch: 80%;
}
.lpm-phone-big a:hover {
	text-decoration: underline;
}
.wp-block-social-links .wp-social-link a {
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	@view-transition {
		navigation: none;
	}
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
	}
	.lpm-estimate details::details-content {
		transition: none;
	}
	.wp-element-button:active,
	.wp-block-button__link:active {
		scale: none;
	}
	.lpm-hero .wp-block-cover__image-background {
		animation: none;
	}
	.lpm-hero .wp-block-cover__inner-container > .wp-block-group > * {
		animation: lpm-fade 0.3s ease-out both;
		animation-delay: 0s !important;
	}
}

/* Consecutive sheets read as one sheet */
.is-style-estimate-sheet + .is-style-estimate-sheet {
	padding-top: var(--lpm-pitch);
}
.is-style-estimate-sheet .is-layout-flex {
	row-gap: 0;
}

/* Short pages: footer stays at the bottom, no bare paper below it */
.wp-site-blocks {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main {
	flex-grow: 1;
}
@media (max-width: 781px) {
	footer .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

/* ---------- Scroll responses ----------
   One grammar: the page is written onto the sheet as you scroll.
   CSS scroll-driven animations only; browsers without them, and anyone
   who prefers reduced motion, get the finished page with no movement. */
html {
	scroll-padding-top: 9rem;
}
.wp-site-blocks > header:first-child,
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > :first-child {
	top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > :first-child { top: 0; }
}
.lpm-estimate > .wp-block-details {
	position: relative;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Letterhead condenses as the page moves under it */
		@keyframes lpm-condense {
			to {
				padding-top: 0.4rem;
				box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.6);
			}
		}
		@keyframes lpm-logo-shrink {
			to { width: 60px; }
		}
		@keyframes lpm-tagline-out {
			to { opacity: 0; translate: 0 -0.25rem; }
		}
		.lpm-letterhead {
			animation: lpm-condense linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
		.lpm-letterhead .wp-block-site-logo img {
			animation: lpm-logo-shrink linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
		.lpm-letterhead__name p:last-child {
			animation: lpm-tagline-out linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}

		/* Hero: the photo drifts slower than the page, the words lift away */
		@keyframes lpm-parallax {
			to { translate: 0 18%; }
		}
		@keyframes lpm-lift-away {
			to { opacity: 0; translate: 0 -2.5rem; }
		}
		.lpm-hero {
			view-timeline: --lpm-hero block;
		}
		.lpm-hero .wp-block-cover__image-background {
			animation: lpm-settle 1.4s var(--lpm-ease) both, lpm-parallax linear both;
			animation-timeline: auto, --lpm-hero;
			animation-range: normal, exit 0% exit 100%;
		}
		.lpm-hero .wp-block-cover__inner-container {
			animation: lpm-lift-away linear both;
			animation-timeline: --lpm-hero;
			animation-range: exit 0% exit 70%;
		}

		/* Headings and copy settle onto the rules as they arrive */
		@keyframes lpm-write {
			from { opacity: 0; translate: 0 1.25rem; }
		}
		:where(.is-style-estimate-sheet) :is(h1, h2, .wp-block-column > p, .lpm-signature, .lpm-estimate__head, .wp-block-group > p),
		:where(.is-style-perforated) .wp-block-column > * {
			animation: lpm-write linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 90%;
		}

		/* Estimate lines are entered one by one, each rule drawn left to right */
		@keyframes lpm-line-in {
			from { opacity: 0; translate: -1.5rem 0; }
		}
		@keyframes lpm-rule-draw {
			from { scale: 0 1; }
		}
		.lpm-estimate > .wp-block-details {
			box-shadow: none;
			animation: lpm-line-in linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 100%;
		}
		.lpm-estimate > .wp-block-details::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background: var(--wp--preset--color--ink-soft);
			transform-origin: left;
			animation: lpm-rule-draw linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 30%;
		}

		/* Photos are unveiled from the bottom, settling as they open */
		@keyframes lpm-unveil {
			from { clip-path: inset(100% 0 0 0); }
		}
		@keyframes lpm-photo-settle {
			from { scale: 1.15; }
		}
		.lpm-collage > .wp-block-image {
			animation: lpm-unveil linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 85%;
		}
		.lpm-collage > .wp-block-image img {
			animation: lpm-photo-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 50%;
		}
		.lpm-estimate details img {
			animation: lpm-unveil 0.5s var(--lpm-ease) both;
		}

		/* The big numbers slide in from the margin */
		@keyframes lpm-from-margin {
			from { opacity: 0; translate: -3rem 0; }
		}
		.lpm-phone-big {
			animation: lpm-from-margin linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}
}

/* ---------- Construction touches ----------
   A hammer drives a nail home as the services scroll past (one strike per
   line) and a tape measure pulls out under the letterhead as you read.
   Without scroll-driven animation support, or with reduced motion, the
   hammer rests on the nail and the tape stays rolled up. */
:root {
	--lpm-hammer: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 140 90%27%3E%3Crect x=%2738%27 y=%2729%27 width=%2798%27 height=%2710%27 rx=%274%27 fill=%27%23a57b1b%27 stroke=%27%2313100d%27 stroke-width=%272%27/%3E%3Cpath d=%27M60 31h70M60 37h60%27 stroke=%27%238a6514%27 stroke-width=%271%27/%3E%3Cpath d=%27M20 10h24a2 2 0 0 1 2 2v40H18V12a2 2 0 0 1 2-2z%27 fill=%27%232e2b27%27 stroke=%27%2313100d%27 stroke-width=%272%27/%3E%3Cpath d=%27M18 46h28v6H18z%27 fill=%27%236b6359%27 stroke=%27%2313100d%27 stroke-width=%272%27/%3E%3Cpath d=%27M20 10 L6 2 L4 6 L16 16 Z%27 fill=%27%232e2b27%27 stroke=%27%2313100d%27 stroke-width=%272%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M24 14v28%27 stroke=%27%236b6359%27 stroke-width=%272%27/%3E%3C/svg%3E");
	--lpm-nail: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 40%27%3E%3Crect x=%270%27 y=%270%27 width=%2712%27 height=%273%27 rx=%271%27 fill=%27%238d877d%27/%3E%3Cpath d=%27M4.5 3h3v31L6 40l-1.5-6z%27 fill=%27%23b5afa5%27/%3E%3C/svg%3E");
	--lpm-plank: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 140 20%27%3E%3Crect x=%271%27 y=%271%27 width=%27138%27 height=%2718%27 fill=%27%23c9b27a%27 stroke=%27%2313100d%27 stroke-width=%272%27/%3E%3Cpath d=%27M8 7c30-3 60 3 124-1M8 13c40 2 80-3 124 1%27 stroke=%27%23a57b1b%27 stroke-width=%271.2%27 fill=%27none%27/%3E%3C/svg%3E");
}
.lpm-services {
	position: relative;
	view-timeline: --lpm-services block;
}
.is-style-estimate-sheet .lpm-hammer {
	position: absolute;
	top: calc(var(--lpm-pitch) * 3);
	bottom: calc(var(--lpm-pitch) * 3);
	right: max(var(--wp--style--root--padding-right, 1rem), calc((100% - 76rem) / 2));
	width: 140px;
	margin: 0;
	max-width: none;
	pointer-events: none;
}
.lpm-hammer__rig {
	position: sticky;
	top: 40vh;
	width: 140px;
	height: 160px;
	margin: 0 !important;
	background: var(--lpm-plank) 0 138px / 140px 20px no-repeat;
}
.lpm-hammer__rig::before,
.lpm-hammer__rig::after {
	content: "";
	position: absolute;
}
.lpm-hammer__rig::before {
	z-index: 1;
	top: 60px;
	left: 0;
	width: 140px;
	height: 90px;
	background: var(--lpm-hammer) center / contain no-repeat;
	transform-origin: 132px 34px;
	translate: 0 24.0px;
}
.lpm-hammer__rig::after {
	top: 112px;
	left: 26px;
	width: 12px;
	height: 26px;
	background: var(--lpm-nail) 0 24.0px / 12px 40px no-repeat;
}
@media (max-width: 1099px) {
	.is-style-estimate-sheet .lpm-hammer {
		top: calc(var(--lpm-pitch) * 3 - 70px);
		bottom: auto;
		height: 160px;
		transform: scale(0.6);
		transform-origin: top right;
	}
	.lpm-hammer__rig { position: relative; top: 0; }
}

/* Tape measure under the letterhead */
.lpm-letterhead::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	top: calc(100% + 8px);
	width: 0;
	height: 10px;
	background:
		repeating-linear-gradient(to right, var(--wp--preset--color--ink) 0 1px, transparent 1px 40px) 0 0 / 100% 10px no-repeat,
		repeating-linear-gradient(to right, var(--wp--preset--color--ink) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat,
		var(--wp--preset--color--gold-light);
	border-right: 5px solid #6b6359;
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.25);
	pointer-events: none;
	display: none;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes lpm-hammer-swing {
			0% { rotate: 35deg; translate: 0 0.0px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			7% { rotate: 0deg; translate: 0 2.4px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			10% { rotate: 35deg; translate: 0 2.4px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			17% { rotate: 0deg; translate: 0 4.8px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			20% { rotate: 35deg; translate: 0 4.8px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			27% { rotate: 0deg; translate: 0 7.2px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			30% { rotate: 35deg; translate: 0 7.2px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			37% { rotate: 0deg; translate: 0 9.6px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			40% { rotate: 35deg; translate: 0 9.6px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			47% { rotate: 0deg; translate: 0 12.0px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			50% { rotate: 35deg; translate: 0 12.0px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			57% { rotate: 0deg; translate: 0 14.4px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			60% { rotate: 35deg; translate: 0 14.4px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			67% { rotate: 0deg; translate: 0 16.8px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			70% { rotate: 35deg; translate: 0 16.8px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			77% { rotate: 0deg; translate: 0 19.2px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			80% { rotate: 35deg; translate: 0 19.2px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			87% { rotate: 0deg; translate: 0 21.6px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			90% { rotate: 35deg; translate: 0 21.6px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
			97% { rotate: 0deg; translate: 0 24.0px; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
			100% { rotate: 35deg; translate: 0 24.0px; }
		}
		@keyframes lpm-nail-drive {
			0%, 6.99% { background-position: 0 0.0px; }
			7% { background-position: 0 2.4px; }
			16.99% { background-position: 0 2.4px; }
			17% { background-position: 0 4.8px; }
			26.99% { background-position: 0 4.8px; }
			27% { background-position: 0 7.2px; }
			36.99% { background-position: 0 7.2px; }
			37% { background-position: 0 9.6px; }
			46.99% { background-position: 0 9.6px; }
			47% { background-position: 0 12.0px; }
			56.99% { background-position: 0 12.0px; }
			57% { background-position: 0 14.4px; }
			66.99% { background-position: 0 14.4px; }
			67% { background-position: 0 16.8px; }
			76.99% { background-position: 0 16.8px; }
			77% { background-position: 0 19.2px; }
			86.99% { background-position: 0 19.2px; }
			87% { background-position: 0 21.6px; }
			96.99% { background-position: 0 21.6px; }
			97% { background-position: 0 24.0px; }
			100% { background-position: 0 24.0px; }
		}
		.lpm-hammer__rig::before {
			animation: lpm-hammer-swing linear both;
			animation-timeline: --lpm-services;
			animation-range: cover 15% cover 85%;
		}
		.lpm-hammer__rig::after {
			animation: lpm-nail-drive linear both;
			animation-timeline: --lpm-services;
			animation-range: cover 15% cover 85%;
		}
		@media (max-width: 1099px) {
			.lpm-hammer__rig::before,
			.lpm-hammer__rig::after {
				animation-range: entry 40% contain 30%;
			}
		}
		@keyframes lpm-tape-out {
			from { width: 0; }
			to { width: 100%; }
		}
		.lpm-letterhead::before {
			display: block;
			animation: lpm-tape-out linear both;
			animation-timeline: scroll(root);
		}
	}
}
@media print {
	.lpm-hammer, .lpm-letterhead::before { display: none; }
}

/* Template parts and main butt together; no paper gaps between bands */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}