@layer components {
	.site-footer {
		background-color: var(--color-secondary);
		color: var(--color-secondary-foreground);
		border-top: 1px solid var(--color-border);
	}

	.site-footer__grid {
		display: grid;
		gap: 2.5rem;
		padding-block: 3.5rem 2.5rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; } }
	/* auto-fit (not a fixed repeat(3, ...)) so unused column tracks collapse to zero width instead
	   of leaving dead whitespace on the right - only Company exists today; Services/Resources/
	   Policies columns will occupy the same tracks automatically once those routes are published,
	   with no CSS change needed here. */
	@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(280px, 1.6fr) repeat(auto-fit, minmax(160px, 1fr)); gap: 2.5rem; } }

	.site-footer__brand { grid-column: span 1; }
	@media (min-width: 640px) { .site-footer__brand { grid-column: span 2; } }
	@media (min-width: 1024px) { .site-footer__brand { grid-column: span 1; } }

	.site-footer__logo {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1.5rem;
		letter-spacing: -0.01em;
		color: var(--color-foreground);
	}
	.site-footer__logo img { display: block; height: 2.25rem; width: auto; }

	.site-footer__tagline {
		margin-top: 0.875rem;
		font-size: 0.875rem;
		line-height: 1.6;
		color: var(--color-muted-foreground);
		max-width: 28rem;
	}

	.site-footer__social {
		margin-top: 1.5rem;
		display: flex;
		gap: 0.625rem;
	}
	.site-footer__social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border: 1px solid var(--color-border);
		border-radius: 999px;
		color: var(--color-muted-foreground);
		transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	}
	.site-footer__social a svg { width: 1rem; height: 1rem; }
	.site-footer__social a:hover,
	.site-footer__social a:focus-visible {
		color: var(--color-accent-foreground);
		background-color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.site-footer__heading {
		font-family: var(--font-display);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--color-foreground);
	}
	.site-footer__column ul {
		margin-top: 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	.site-footer__column a {
		font-size: 0.875rem;
		color: var(--color-muted-foreground);
		text-decoration: none;
	}
	.site-footer__column a:hover,
	.site-footer__column a:focus-visible {
		color: var(--color-accent);
		text-decoration: underline;
	}

	/* Compact horizontal contact strip - replaces the old oversized icon-in-column layout
	   (icons were rendering ~211px due to an unrelated stale-cache issue during testing, but the
	   surrounding layout was also just too loose - this section is deliberately dense). A subtle
	   muted band distinct from both the lighter main grid above and the darker legal bar below. */
	.site-footer__contact-strip {
		background-color: var(--color-muted);
		border-block: 1px solid var(--color-border);
	}
	.site-footer__contact-strip-inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem 1.5rem;
		padding-block: 1.5rem;
	}
	@media (min-width: 480px) { .site-footer__contact-strip-inner { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1024px) { .site-footer__contact-strip-inner { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; } }

	.site-footer__contact-item { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
	@media (min-width: 1024px) {
		.site-footer__contact-item + .site-footer__contact-item {
			border-left: 1px solid var(--color-border);
			padding-left: 2rem;
		}
	}

	/* Icon footprint reads as ~32px (the wrapper) with a crisp ~18px glyph inside - the "24-32px
	   visually" target, not the raw SVG's own bounding box. */
	.site-footer__contact-icon-wrap {
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		border-radius: 999px;
		background-color: var(--accent-10);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.site-footer__contact-icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }

	.site-footer__contact-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
	.site-footer__contact-label {
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-muted-foreground);
	}
	.site-footer__contact-value {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--color-foreground);
		text-decoration: none;
		overflow-wrap: anywhere;
	}
	a.site-footer__contact-value:hover,
	a.site-footer__contact-value:focus-visible {
		color: var(--color-accent);
		text-decoration: underline;
	}

	/* Darker legal bar, deliberately distinct from the lighter strip above it - reuses the same
	   primary token the CTA band and buttons already use, no new color introduced. */
	.site-footer__bottom {
		background-color: var(--color-primary);
		color: var(--primary-foreground-85);
	}
	.site-footer__bottom-inner {
		padding-block: 1.25rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.8125rem;
		text-align: center;
	}
	/* 1024px, not 768px - at tablet widths the disclaimer's content-sized center column left too
	   little room for the two 1fr side columns, forcing the copyright text to wrap across 3 lines
	   (confirmed via getBoundingClientRect: side columns squeezed to ~140px at 768px). The centered
	   stacked layout below reads cleanly through tablet instead. */
	@media (min-width: 1024px) {
		.site-footer__bottom-inner {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			gap: 1.5rem;
			text-align: left;
		}
		.site-footer__copyright { justify-self: start; white-space: nowrap; }
		.site-footer__disclaimer { text-align: center; margin-inline: auto; }
		.site-footer__policy-links { justify-self: end; }
	}
	.site-footer__copyright { color: var(--color-primary-foreground); font-weight: 600; }
	.site-footer__disclaimer { max-width: 28rem; }
	.site-footer__policy-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.375rem 1rem;
		list-style: none;
	}
	.site-footer__policy-links a {
		color: var(--primary-foreground-85);
		text-decoration: none;
	}
	.site-footer__policy-links a:hover,
	.site-footer__policy-links a:focus-visible {
		color: var(--color-primary-foreground);
		text-decoration: underline;
	}

	/* Focus outlines must stay visible on every interactive footer element - only restyled to
	   match the accent color, never removed. The bottom bar overrides to white since the default
	   accent-colored ring has weak contrast against this section's dark background. */
	.site-footer a:focus-visible {
		outline: 2px solid var(--color-ring);
		outline-offset: 2px;
		border-radius: 2px;
	}
	.site-footer__bottom a:focus-visible { outline-color: var(--color-primary-foreground); }
}