@layer components {
	.site-footer {
		--footer-line: color-mix(in srgb, var(--color-surface) 7%, transparent);

		position: relative;
		isolation: isolate;
		overflow: clip;
		background:
			radial-gradient(40rem 28rem at 88% 0%, color-mix(in srgb, var(--color-surface) 9%, transparent), transparent 70%),
			radial-gradient(36rem 26rem at 0% 100%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%),
			var(--color-ink);
		color: var(--color-base);
	}

	.site-footer::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(var(--footer-line) 1px, transparent 1px),
			linear-gradient(90deg, var(--footer-line) 1px, transparent 1px);
		background-size: 4rem 4rem;
		background-position: center top;
		mask-image: radial-gradient(ellipse 70% 80% at 80% 0%, #000 15%, transparent 70%);
	}

	.site-footer a {
		color: inherit;
		text-decoration: none;
	}

	.site-footer a:hover {
		text-decoration: underline;
	}

	.site-footer a:focus-visible {
		outline-color: var(--color-base);
	}

	.site-footer__grid {
		display: grid;
		gap: var(--space-l);
		padding-block: var(--space-l);
	}

	.site-footer__intro {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-m);
		padding-block: var(--space-xl) var(--space-l);
	}

	.site-footer__prompt {
		max-width: 16em;
		margin: 0;
		color: var(--color-surface);
		font-size: var(--text-xl);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1.15;
	}

	.site-footer__prompt-line {
		display: block;
		margin-block-end: 0.15em;
		font-size: 0.72em;
		font-style: italic;
		font-weight: 500;
		letter-spacing: -0.02em;
	}

	.site-footer__prompt-accent {
		background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 92% / 100% 0.28em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.site-footer a.site-footer__cta {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.85rem 1.35rem;
		border: 1px solid var(--color-surface);
		border-radius: 999px;
		background: var(--color-surface);
		color: var(--color-ink);
		font-size: var(--text-s);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	.site-footer a.site-footer__cta:hover {
		background: var(--color-base);
		border-color: var(--color-base);
		color: var(--color-ink);
		text-decoration: none;
	}

	.site-footer__rule {
		width: min(100% - (var(--gutter) * 2), var(--wide));
		height: 2px;
		margin-inline: auto;
		background: var(--color-accent);
	}

	.site-footer__name {
		margin: 0;
		font-size: var(--text-l);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: var(--leading-heading);
	}

	.site-footer__tagline,
	.site-footer__copy,
	.site-footer__legal {
		margin: 0;
		color: color-mix(in srgb, var(--color-base) 78%, var(--color-ink));
	}

	.site-footer__tagline {
		margin-block-start: var(--space-2xs);
	}

	.site-footer__label {
		margin: 0 0 var(--space-s);
		font-size: var(--text-s);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.site-footer .menu,
	.social-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-footer__brand .social-list {
		margin-block-start: var(--space-m);
	}

	.site-footer .social-list a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.social-list__icon {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		fill: #fff;
	}

	.site-footer__contact .menu a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.site-footer__icon {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		color: #fff;
	}

	.site-footer__bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-xs) var(--space-m);
		padding-block: var(--space-m);
		border-block-start: 1px solid color-mix(in srgb, var(--color-base) 22%, transparent);
	}

	@media (min-width: 48rem) {
		.site-footer__grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 64rem) {
		.site-footer__grid {
			grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		}
	}
}

@layer components {
	/* Floating call button, mobile and tablet only. The desktop header shows the phone in the top bar. */
	.call-fab {
		position: fixed;
		inset-block-end: max(var(--space-s), env(safe-area-inset-bottom));
		inset-inline-end: var(--space-m);
		z-index: 25;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.9rem 1.25rem;
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.25);
	}

	.call-fab:hover {
		background: #002a5e;
		color: var(--color-surface);
	}

	.call-fab:focus-visible {
		outline: 2px solid var(--color-surface);
		outline-offset: 2px;
		box-shadow: 0 0 0 4px var(--color-focus), 0 0.5rem 1.25rem rgb(0 0 0 / 0.25);
	}

	.call-fab__icon {
		width: 1.25rem;
		height: 1.25rem;
		flex: none;
	}

	/* Keep the last footer line clear of the button. */
	.site-footer__bar {
		padding-block-end: calc(var(--space-m) + 4rem);
	}

	@media (min-width: 64rem) {
		.call-fab {
			display: none;
		}

		.site-footer__bar {
			padding-block-end: var(--space-m);
		}
	}

	@media print {
		.call-fab {
			display: none;
		}
	}
}