/* ===== Site Footer ===== */
/* ============================================
   LOWKEYS FOOTER
   Clean white footer, brand info, quick links, contact.
   ============================================ */
.footer {
	background: #ffffff;
	color: var(--color-ink);
	padding-top: clamp(56px, 7vw, 82px);
	border-top: 1px solid var(--color-border);
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) minmax(220px, 0.9fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.footer .logo-wordmark-img {
	filter: none;
	width: clamp(132px, 14vw, 190px);
}

.footer-info p,
.footer-links a,
.footer-contact p,
.footer-bottom p {
	color: var(--color-muted);
}

.footer-info p {
	font-family: var(--font-body);
	max-width: 440px;
	margin-top: 18px;
	line-height: 1.7;
}

.social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.social-link {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #111111;
	box-shadow: none;
	filter: none;
	transform: none;
	outline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
	transition: none;
}

.social-link[href] {
	cursor: pointer;
}

.social-icon {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	filter: none;
	opacity: 1;
	pointer-events: none;
	transform: none;
	transition: none;
}

.social-icon--youtube {
	width: 22px;
}

.footer h3 {
	font-family: var(--font-display);
	margin-bottom: 16px;
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.footer-links ul {
	display: grid;
	gap: 10px;
}

.footer-links a {
	font-family: var(--font-ui);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--color-ink);
}

.footer-contact {
	display: grid;
	gap: 11px;
}

.footer-contact p {
	font-family: var(--font-ui);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.55;
}

.footer-contact i {
	width: 16px;
	margin-top: 4px;
	color: var(--color-ink);
}

.footer-bottom {
	margin-top: clamp(42px, 6vw, 70px);
	padding: 18px var(--container-padding) max(18px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.footer-bottom p {
	font-size: 0.86rem;
}