@charset "UTF-8";
/**
 * Catcha 2026 — the footer
 *
 * 22 Footer — warm stone near-black. See this theme's README.md before
 * changing any tone here; the brown and coral passes are recorded.
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 22  FOOTER  (warm stone near-black)
 * ================================================================== */
/* The warm neutral run all the way down. It closes the page rather than
   trailing off into another light band, and everything inside it is reversed
   to suit — using the stone scale, not flat white alphas, so the muted tones
   stay warm instead of going grey. */
.site-footer {
	background: var(--deep);
	color: var(--deep-text);
	padding-block: clamp(52px, 6vw, 88px) 0;
}

.footer-top {
	display: grid;
	gap: clamp(30px, 3.4vw, 48px);
	padding-bottom: clamp(38px, 4vw, 60px);
	border-bottom: 1px solid var(--deep-line);
}
@media (min-width: 780px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }

.footer-brand img { width: 128px; }
.footer-address {
	margin-top: 18px;
	font-size: 14px;
	font-style: normal;
	line-height: 1.75;
	color: var(--deep-muted);
	max-width: 34em;
}
.footer-address p { margin: 0; }
.footer-address p:empty { display: none; }
.footer-address a { color: inherit; text-decoration: none; }
.footer-address a:hover { color: var(--deep-text); text-decoration: underline; text-underline-offset: 0.18em; }

.footer-col__title {
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--deep-muted);
	margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 8px; }
.footer-col ul a {
	font-size: 14.5px;
	color: var(--deep-text);
	text-decoration: none;
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer-col ul a:hover { color: var(--deep-text); padding-left: 4px; }

.footer-socials { display: flex; gap: 8px; margin-top: 18px; }
.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: transparent;
	border: 1px solid var(--deep-line);
	color: var(--deep-text);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-socials a:hover { background: var(--deep-text); border-color: var(--deep-text); color: var(--deep); }
.footer-socials svg { width: 16px; height: 16px; }

/* The closing statement. Three white boxes in a row read as leftover UI;
   three brand-red rules across the stone then read as a progress bar. It is
   now set as a spread: the line on the left, the promises on the right as a
   short numbered ledger on the footer's own hairlines. The red is left to
   the logo and the buttons, where it means something. */
/* No border-top: .footer-top already closes with a rule directly above. */
.footer-promise {
	display: grid;
	gap: clamp(28px, 3.4vw, 44px);
	padding-block: clamp(44px, 5vw, 76px);
}
@media (min-width: 900px) {
	.footer-promise {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center; /* the line sits level with the middle of the list */
		column-gap: clamp(40px, 6vw, 96px);
	}
}
.footer-promise__heading {
	font-family: var(--serif);
	font-size: clamp(24px, 2.8vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var(--deep-text);
	max-width: 16em;
	text-wrap: balance;
}
.footer-promise__heading { margin: 0; }
.footer-promise__list {
	counter-reset: promise;
	border-top: 1px solid var(--deep-line);
}
.footer-promise__item {
	counter-increment: promise;
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding-block: 15px;
	border-bottom: 1px solid var(--deep-line);
	font-family: var(--serif);
	font-size: clamp(18px, 1.6vw, 21px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--deep-text);
}
.footer-promise__item::before {
	content: counter(promise, decimal-leading-zero);
	flex: none;
	min-width: 2.2em; /* "01" is narrower than "02" — hold the text to one edge */
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--deep-muted);
}

.footer-legal {
	display: grid;
	gap: 8px;
	padding-block: 24px 30px;
	border-top: 1px solid var(--deep-line);
	font-size: 12px;
	color: var(--deep-muted);
	text-align: center;
}
@media (min-width: 700px) { .footer-legal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) {
	.footer-legal span:first-child { text-align: left; }
	.footer-legal span:last-child { text-align: right; }
}