/* Page footer block. Tokens fall back to literals for the editor canvas.
   The footer's background lives in --lp-footer-bg so the bottom row can
   darken it and the card can lift it (2026-09-29). */
.lp-page-footer {
	--lp-footer-bg: var(--neutral-400, #1e2023);
	background: var(--lp-footer-bg);
	color: rgba(255, 255, 255, 0.85);
	padding: 56px 0 28px;
}
.lp-page-footer--light {
	--lp-footer-bg: var(--surface-subtle, #f3f4f6);
	color: var(--text-primary, #1e2023);
}
/* Surfaces (2026-09-29 late night): the palette's Page, Subtle, Brand and
   Dark, as on the header and the content blocks. The light or dark
   modifier sets the text; older drafts' light is Subtle. */
.lp-page-footer--surface-default { --lp-footer-bg: var(--surface-page, #fff); }
.lp-page-footer--surface-subtle { --lp-footer-bg: var(--surface-subtle, #f3f4f6); }
.lp-page-footer--surface-brand { --lp-footer-bg: var(--brand-default, #615ff8); }
.lp-page-footer--surface-dark { --lp-footer-bg: var(--neutral-400, #1e2023); }
.lp-page-footer__inner {
	max-width: var(--content-max-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--side-margin, 24px);
}
.lp-page-footer__grid {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
.lp-page-footer p { margin: 0 0 8px; }
.lp-page-footer a { color: inherit; }
.lp-page-footer__logo { height: 48px; width: auto; margin-bottom: 12px; }
.lp-page-footer__name {
	font-family: var(--font-family-heading, inherit);
	font-weight: 700;
	font-size: 1.15rem;
}
.lp-page-footer__name--display {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.lp-page-footer__name--outline {
	font-size: clamp(2.25rem, 7vw, 4.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px currentColor;
	margin-bottom: 16px;
}
.lp-page-footer--dark .lp-page-footer__name--outline { -webkit-text-stroke-color: rgba(255, 255, 255, 0.6); }
.lp-page-footer__blurb { max-width: 36ch; opacity: 0.85; }
.lp-page-footer__heading {
	font-size: var(--font-size-small, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	opacity: 0.7;
	margin-bottom: 12px;
}
.lp-page-footer__legal {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--font-size-small, 0.8125rem);
	opacity: 0.7;
}
.lp-page-footer--light .lp-page-footer__legal { border-top-color: var(--border-default, #e5e7eb); }
@media (min-width: 765px) {
	.lp-page-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.lp-page-footer__grid:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	/* Two columns when there are no links (2026-10-03): the brand, and
	   the contact at the right at its own height. */
	.lp-page-footer__grid:not(:has(> :nth-child(3))) { grid-template-columns: 1.4fr minmax(0, 22rem); }
	.lp-page-footer__grid:not(:has(> :nth-child(3))) > .lp-page-footer__contact { align-self: start; }
}

/* Background colour override from the Style tab; the light or dark modifier still sets the text. */
.lp-page-footer--custom-bg { --lp-footer-bg: var(--lp-block-bg); }

/* Always darker than the section above it (Isaac, 2026-09-28, mandatory
   for the MVP). The section above is the footer's previous sibling, as
   in the parent's no-bg collapse. After anything dark (a dark or brand
   surface, a photo, a dark custom colour: whatever carries is-dark) the
   footer takes a deeper shade of the dark band, accent 4 mixed toward
   black, so the two never merge. A light footer after a subtle band goes
   a step deeper; after a dark one it cannot be darker and stay light, so
   it turns deep dark. A footer with its own Style tab colour is left as
   chosen. One step to tune, per site if needed. */
.lp-page-footer {
	--lp-footer-deepen: 30%;
	--lp-footer-deep: color-mix(in oklab, var(--neutral-400, #1e2023), black var(--lp-footer-deepen));
}
.is-dark + .lp-page-footer:not(.lp-page-footer--custom-bg) {
	--lp-footer-bg: var(--lp-footer-deep);
	color: rgba(255, 255, 255, 0.85);
}
.is-dark + .lp-page-footer--light:not(.lp-page-footer--custom-bg) .lp-page-footer__legal {
	border-top-color: rgba(255, 255, 255, 0.12);
}
.lp-block--surface-subtle:not(.is-dark) + .lp-page-footer--light:not(.lp-page-footer--custom-bg) {
	--lp-footer-bg: color-mix(in oklab, var(--surface-subtle, #f3f4f6), black 7%);
}
/* A Page footer after a section on the page's own ground takes the
   subtle band, so the two never merge (2026-09-29 late night). */
.lp-block--no-bg + .lp-page-footer--surface-default:not(.lp-page-footer--custom-bg) {
	--lp-footer-bg: var(--surface-subtle, #f3f4f6);
}

/* Iconography, mandatory (2026-09-28): an icon beside each contact detail
   and follow link, in the text colour, one line high. */
.lp-page-footer__with-icon {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
a.lp-page-footer__with-icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lp-page-footer__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.2em;
	opacity: 0.8;
}
a.lp-page-footer__with-icon .lp-page-footer__icon { margin-top: 0; }

/* Contact styles (the kit, 2026-09-29). */
.lp-page-footer__contact--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.lp-page-footer__contact--inline p { margin: 0; }
.lp-page-footer__contact--card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-card, 12px);
	padding: 20px;
}
.lp-page-footer--light .lp-page-footer__contact--card {
	background: rgba(255, 255, 255, 0.7);
	border-color: var(--border-default, #e5e7eb);
}
.lp-page-footer__big-phone {
	display: block;
	white-space: nowrap;
	font-family: var(--font-family-heading, inherit);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-decoration: none;
	margin: 0 0 10px;
}

/* Link styles. */
.lp-page-footer__link-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.lp-page-footer__link-row a { text-decoration: none; }
.lp-page-footer__link-row a:hover { text-decoration: underline; }
.lp-page-footer__link-row--pills,
.lp-page-footer__link-row--chips { gap: 8px; }
.lp-page-footer__link-row--pills a,
.lp-page-footer__link-row--chips a {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: var(--font-size-small, 0.875rem);
	font-weight: 600;
}
.lp-page-footer__link-row--chips a { padding: 4px 10px; border-radius: 6px; font-weight: 500; }
.lp-page-footer--light .lp-page-footer__link-row--pills a,
.lp-page-footer--light .lp-page-footer__link-row--chips a { border-color: var(--border-default, #d9dde1); background: rgba(255, 255, 255, 0.7); }
.lp-page-footer__link-row--pills a:hover,
.lp-page-footer__link-row--chips a:hover { text-decoration: none; border-color: currentColor; }

/* Social as icons: round targets, 40px, the platform name as the label. */
.lp-page-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lp-page-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	opacity: 0.85;
}
.lp-page-footer--light .lp-page-footer__social { border-color: var(--border-default, #d9dde1); }
.lp-page-footer__social:hover { opacity: 1; }
.lp-page-footer__social .lp-page-footer__icon { margin: 0; width: 1.05rem; height: 1.05rem; }
.lp-page-footer__brand .lp-page-footer__socials { margin-top: 12px; }

/* The bottom row: legal line and links, the social icons centred when
   they sit here, back to top at the right. Darken takes the footer's own
   background one step down: color-mix for every browser, the relative
   colour for the ones that read it (Isaac: an HSL modifier). */
.lp-page-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--font-size-small, 0.8125rem);
}
.lp-page-footer--light .lp-page-footer__bottom { border-top-color: var(--border-default, #e5e7eb); }
.lp-page-footer__bottom .lp-page-footer__legal { margin: 0; padding: 0; border: 0; }
.lp-page-footer__bottom-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}
.lp-page-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	opacity: 0.7;
}
.lp-page-footer__legal-links a { text-decoration: none; }
.lp-page-footer__legal-links a:hover { text-decoration: underline; }
.lp-page-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	opacity: 0.8;
}
.lp-page-footer__top:hover { opacity: 1; text-decoration: underline; }
.lp-page-footer__top .lp-page-footer__icon { margin: 0; width: 1em; height: 1em; }
.lp-page-footer__bottom--dark {
	border-top: 0;
	margin-inline: calc(-1 * var(--side-margin, 24px));
	padding: 18px var(--side-margin, 24px);
	background: color-mix(in oklab, var(--lp-footer-bg), black 12%);
	background: hsl(from var(--lp-footer-bg) h s calc(l - 5));
}
.lp-page-footer--light .lp-page-footer__bottom--dark {
	background: color-mix(in oklab, var(--lp-footer-bg), black 6%);
	background: hsl(from var(--lp-footer-bg) h s calc(l - 4));
}
@media (min-width: 765px) {
	.lp-page-footer__bottom--with-social {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.lp-page-footer__bottom--with-social .lp-page-footer__bottom-social { justify-self: center; }
	.lp-page-footer__bottom--with-social .lp-page-footer__top { justify-self: end; }
}

/* Card: the columns and the bottom row inside a lifted card on the
   footer's own ground. Light: a white card; dark: the ground lifted a
   step. The darkened bottom row then darkens the card. */
.lp-page-footer--card {
	--lp-footer-ground: var(--lp-footer-bg);
	padding: 32px 0;
}
.lp-page-footer__card {
	--lp-footer-bg: color-mix(in oklab, var(--lp-footer-ground), white 7%);
	--lp-footer-bg: hsl(from var(--lp-footer-ground) h s calc(l + 6));
	background: var(--lp-footer-bg);
	border-radius: var(--radius-card, 16px);
	padding: 36px 32px 0;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.lp-page-footer--light .lp-page-footer__card { --lp-footer-bg: #fff; }
.lp-page-footer__card .lp-page-footer__bottom { margin-top: 32px; }
.lp-page-footer__card .lp-page-footer__bottom:not(.lp-page-footer__bottom--dark) { padding-bottom: 20px; }
.lp-page-footer__card .lp-page-footer__bottom--dark { margin-inline: -32px; padding-inline: 32px; }
@media (max-width: 764px) {
	.lp-page-footer__card { padding: 28px 20px 0; }
	.lp-page-footer__card .lp-page-footer__bottom--dark { margin-inline: -20px; padding-inline: 20px; }
}

/* Hairline: one row, the name, the links, the legal line with the phone. */
.lp-page-footer--hairline {
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-page-footer--hairline.lp-page-footer--light { border-top-color: var(--border-default, #e5e7eb); }
.lp-page-footer__hairline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
}
.lp-page-footer__hairline .lp-page-footer__name { margin: 0; }
.lp-page-footer__hairline .lp-page-footer__logo { margin: 0; height: 36px; }
.lp-page-footer__legal--inline { margin: 0; padding: 0; border: 0; white-space: nowrap; }

/* Closer: an optional band with the action (generated pages leave it
   empty, 2026-10-03), then the centred closer and the bottom band. */
.lp-page-footer--closer { padding: 0; }
.lp-page-footer__band {
	/* The palette's brand colour (2026-10-03: was the undefined
	   --color-primary alias, so every band fell back to teal). */
	background: var(--lp-footer-band-bg, var(--brand-default, #1f6f6a));
	color: var(--text-on-brand, #fff);
	padding: 40px 0;
	margin-bottom: 28px;
}
.lp-page-footer__band-inner {
	max-width: var(--content-max-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--side-margin, 24px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
}
.lp-page-footer__band-heading {
	font-family: var(--font-family-heading, inherit);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}
.lp-page-footer .lp-page-footer__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--brand-default, #1f6f6a);
	font-weight: 700;
	padding: 12px 20px;
	border-radius: var(--radius-button, 8px);
	text-decoration: none;
}
.lp-page-footer .lp-page-footer__button:hover { text-decoration: none; filter: brightness(1.05); }
/* The closer, reworked 2026-10-03 (Isaac): centred, the logo or the
   name, call and email as buttons, the social icons; the bottom band runs
   edge to edge (a shadow and a clip, so it never scrolls sideways) with
   the legal line and back to top. */
.lp-page-footer__closer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 48px 0 36px;
	text-align: center;
}
.lp-page-footer__closer-brand .lp-page-footer__logo { display: block; max-height: 52px; width: auto; margin: 0 auto; }
.lp-page-footer__closer-brand .lp-page-footer__name { margin: 0; }
.lp-page-footer__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.lp-page-footer .lp-page-footer__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid currentColor;
	border-radius: var(--btn-radius, 8px);
	font-weight: 600;
	text-decoration: none;
}
.lp-page-footer__action .lp-page-footer__icon { margin: 0; width: 1.05em; height: 1.05em; }
.lp-page-footer .lp-page-footer__action--call {
	background: var(--btn-bg);
	border-color: var(--btn-bg);
	color: var(--btn-text);
}
.lp-page-footer .lp-page-footer__action--call:hover { background: var(--btn-bg-hover); color: var(--btn-text-hover); text-decoration: none; }
.lp-page-footer .lp-page-footer__action--email { background: transparent; color: inherit; }
.lp-page-footer .lp-page-footer__action--email:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.lp-page-footer--light .lp-page-footer__action--email:hover { background: var(--surface-subtle, #f3f4f6); }
.lp-page-footer__closer .lp-page-footer__socials { justify-content: center; }
.lp-page-footer--closer .lp-page-footer__bottom { margin-top: 0; }
.lp-page-footer--closer .lp-page-footer__bottom--dark {
	--lp-footer-bottom-bg: color-mix(in oklab, var(--lp-footer-bg), black 12%);
	background: var(--lp-footer-bottom-bg);
	box-shadow: 0 0 0 100vmax var(--lp-footer-bottom-bg);
	clip-path: inset(0 -100vmax);
}
.lp-page-footer--light.lp-page-footer--closer .lp-page-footer__bottom--dark {
	--lp-footer-bottom-bg: color-mix(in oklab, var(--lp-footer-bg), black 6%);
}

/* Editorial: the name in the heading font, Visit and Reach, a single rule. */
.lp-page-footer--editorial .lp-page-footer__bottom {
	border-top-width: 1px;
	border-top-color: currentColor;
	margin-top: 36px;
}
.lp-page-footer--editorial .lp-page-footer__heading { opacity: 0.6; }

/* Band layout: the action band above the columns. The top padding goes
   only when the band is there (generated pages leave it empty, so the
   columns sat on the footer's top edge; 2026-10-21, Isaac). */
.lp-page-footer--band:has(.lp-page-footer__band) { padding-top: 0; }
.lp-page-footer--band .lp-page-footer__band { margin-bottom: 48px; }

/* Bar: one row, logo left, legal in the middle, links right. Wraps to a
   centred stack below the breakpoint. */
.lp-page-footer--bar { padding: 28px 0; }
.lp-page-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.lp-page-footer__bar .lp-page-footer__logo { margin-bottom: 0; }
.lp-page-footer__bar .lp-page-footer__name { margin: 0; }
.lp-page-footer__bar-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	font-size: var(--font-size-small, 0.875rem);
}
.lp-page-footer__bar-links a { text-decoration: none; opacity: 0.85; }
.lp-page-footer__bar-links a:hover { opacity: 1; text-decoration: underline; }
@media (min-width: 765px) {
	.lp-page-footer__bar { flex-direction: row; justify-content: space-between; text-align: left; }
	.lp-page-footer__bar-middle { flex: 1; text-align: center; }
	.lp-page-footer__bar-links { justify-content: flex-end; }
}

/* Centered: the grid columns stacked and centred, logo on top. */
.lp-page-footer--centered .lp-page-footer__grid {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: 24px;
}
.lp-page-footer--centered .lp-page-footer__blurb { margin-inline: auto; }
.lp-page-footer--centered .lp-page-footer__legal { text-align: center; }
.lp-page-footer--centered .lp-page-footer__with-icon { justify-content: center; }

/* The logo on a dark ground (2026-10-04): the footer is dark by its
   surface (or a dark background colour), or turned dark after a dark
   section above it. With a light version, it swaps in there; with one
   logo, a real logo sits on a light backing there, so a dark logo never
   vanishes. Last in the file, after the layouts' own logo rules. */
.lp-page-footer .lp-page-footer__logo--on-dark { display: none; }
.lp-page-footer--two-logos.lp-page-footer--dark .lp-page-footer__logo--default,
.is-dark + .lp-page-footer--two-logos:not(.lp-page-footer--custom-bg) .lp-page-footer__logo--default { display: none; }
.lp-page-footer--two-logos.lp-page-footer--dark .lp-page-footer__logo--on-dark,
.is-dark + .lp-page-footer--two-logos:not(.lp-page-footer--custom-bg) .lp-page-footer__logo--on-dark { display: block; }
.lp-page-footer--logo-chip.lp-page-footer--dark .lp-page-footer__logo--default,
.is-dark + .lp-page-footer--logo-chip:not(.lp-page-footer--custom-bg) .lp-page-footer__logo--default {
	box-sizing: border-box;
	padding: 6px 10px;
	background: #fff;
	border-radius: 10px;
}
.lp-page-footer__closer-brand .lp-page-footer__logo--on-dark { margin: 0 auto; }

/* A square badge logo (2026-10-04): taller than the 48px a wordmark
   takes, so its lettering reads; in the closer too. */
.lp-page-footer .lp-page-footer__logo--square { height: 60px; max-height: none; }
@media (min-width: 765px) {
	.lp-page-footer .lp-page-footer__logo--square { height: 72px; }
}

