/**
 * Component library: header, nav, buttons, cards, footer, FAQ, badges,
 * breadcrumbs, and the small per-page-template layouts (contact, b2b,
 * services).
 *
 * v2 shape system: the chamfer (clip-path cut corner) that v1 put on
 * nearly every card, badge and button is now reserved for exactly two
 * places — the primary CTA button and the logo artwork — so it reads as
 * a deliberate Go Mina signature rather than "this theme's corner
 * style." Everything else uses a quiet, consistent border-radius, and
 * thick 2px black borders (which, repeated on every card/list/badge,
 * were a real part of why the site felt visually heavy) are now the
 * exception, not the default — most surfaces use a 1px neutral border
 * and let spacing/typography carry the hierarchy instead.
 */

/* ================= ICONS ================= */

.icon { flex-shrink: 0; vertical-align: -3px; }

/* ================= BUTTONS ================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.85em 1.6em;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	white-space: nowrap;
	border: 2px solid var(--color-ink);
	border-radius: var(--radius-md);
	transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn--primary {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border-color: var(--color-ink);
	/* The one CTA-level chamfer — the Go Mina cut, used once per view. */
	border-radius: 0;
	clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.btn--primary:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }

.btn--secondary {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}
.btn--secondary:hover { background: var(--color-ink); color: var(--color-white); }

/* .btn--secondary defaults to ink-on-transparent, which disappears on
   any of the theme's dark surfaces (header, mobile nav, footer) —
   invert once, here, for every dark context rather than per-section
   (a missing case of exactly this — .mobile-nav — was caught live during
   Phase 2 QA: the phone-call button rendered invisible black-on-black). */
.site-header .btn--secondary,
.mobile-nav .btn--secondary,
.site-footer .btn--secondary,
.hero .btn--secondary {
	color: var(--color-white);
	border-color: var(--color-white);
}
.site-header .btn--secondary:hover,
.mobile-nav .btn--secondary:hover,
.site-footer .btn--secondary:hover,
.hero .btn--secondary:hover {
	background: var(--color-white);
	color: var(--color-charcoal);
}

.btn:focus-visible { outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn--whatsapp::before {
	content: '';
	width: 1.1em; height: 1.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.1-1.34A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.2 14.2c-.22.62-1.28 1.18-1.77 1.24-.45.06-.98.09-1.58-.1-.36-.11-.83-.27-1.43-.53-2.52-1.09-4.16-3.63-4.29-3.8-.13-.17-1.03-1.37-1.03-2.61s.65-1.85.88-2.1c.22-.25.49-.31.65-.31h.47c.15 0 .35-.02.55.42.22.5.72 1.74.79 1.86.06.13.1.28.02.45-.08.17-.13.28-.26.43-.13.15-.27.34-.39.46-.13.13-.27.27-.11.53.15.26.68 1.12 1.46 1.82 1 .9 1.85 1.17 2.11 1.3.26.13.41.11.56-.07.15-.17.63-.73.8-.98.17-.25.34-.2.56-.12.22.08 1.44.68 1.68.81.24.13.4.19.46.29.06.11.06.62-.16 1.24z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.1-1.34A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.2 14.2c-.22.62-1.28 1.18-1.77 1.24-.45.06-.98.09-1.58-.1-.36-.11-.83-.27-1.43-.53-2.52-1.09-4.16-3.63-4.29-3.8-.13-.17-1.03-1.37-1.03-2.61s.65-1.85.88-2.1c.22-.25.49-.31.65-.31h.47c.15 0 .35-.02.55.42.22.5.72 1.74.79 1.86.06.13.1.28.02.45-.08.17-.13.28-.26.43-.13.15-.27.34-.39.46-.13.13-.27.27-.11.53.15.26.68 1.12 1.46 1.82 1 .9 1.85 1.17 2.11 1.3.26.13.41.11.56-.07.15-.17.63-.73.8-.98.17-.25.34-.2.56-.12.22.08 1.44.68 1.68.81.24.13.4.19.46.29.06.11.06.62-.16 1.24z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ================= HEADER ================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-black);
	border-bottom: 3px solid var(--color-accent);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 84px;
}

.site-logo { height: 44px; width: auto; }
.site-logo--footer { height: 40px; }

.site-nav { flex: 0 1 auto; display: none; min-width: 0; }
.site-nav__list { display: flex; gap: var(--space-4); flex-wrap: nowrap; }
.site-nav__list li { flex-shrink: 0; }
.site-nav__list a {
	display: inline-block;
	white-space: nowrap;
	color: var(--color-white);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding-block: var(--space-2);
	border-bottom: 2px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { border-bottom-color: var(--color-accent); }

.site-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); }
.site-header__phone {
	display: none;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-white);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
}
.site-header__actions .btn { padding: 0.65em 1.2em; font-size: var(--fs-small); }

/* ================= LANGUAGE SWITCHER ================= */

.lang-switch { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.lang-switch--header { display: none; }
.lang-switch__link { color: var(--color-gray-400); font-weight: var(--fw-medium); padding: var(--space-1); }
.lang-switch__link:hover { color: var(--color-white); }
.lang-switch__link.is-current { color: var(--color-accent); font-weight: var(--fw-bold); }
.lang-switch__sep { color: var(--color-gray-700); }
.lang-switch--mobile { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-gray-900); justify-content: center; }
.lang-switch--mobile .lang-switch__link { font-size: var(--fs-body); }

@media (min-width: 1080px) {
	.lang-switch--header { display: flex; }
}

.mobile-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	background: transparent;
	border: 2px solid var(--color-white);
	padding: 0;
}
.mobile-nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--color-white); margin-inline: auto; }

.mobile-nav {
	position: fixed;
	inset: 84px 0 0 0;
	background: var(--color-black);
	z-index: 99;
	overflow-y: auto;
	padding: var(--space-6) var(--container-padding);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav__list a {
	display: block;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-gray-900);
}
.mobile-nav__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); }
.mobile-nav__actions .btn { justify-content: center; }

@media (min-width: 1080px) {
	.site-nav { display: block; }
	.site-header__phone { display: inline; }
	.mobile-nav-toggle { display: none; }
	.mobile-nav { display: none; }
}

/* ================= HEADER SEARCH =================
 * Rendered in header.php on every page, so it lives here (loaded
 * sitewide) rather than in catalog.css (catalog pages only) — see that
 * file's own note on the real bug this fixes. */

.site-search {
	display: none;
	align-items: center;
	background: var(--color-white);
	border: 2px solid var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 42px;
}
.site-search input[type="search"] {
	border: 0;
	background: transparent;
	padding-inline: var(--space-3);
	font-size: var(--fs-small);
	width: 180px;
	height: 100%;
}
.site-search input[type="search"]::placeholder { color: var(--color-gray-500); }
.site-search button {
	border: 0;
	background: var(--color-black);
	color: var(--color-white);
	height: 100%;
	width: 42px;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.site-search--mobile { display: flex; width: 100%; height: 48px; margin-bottom: var(--space-6); }
.site-search--mobile input[type="search"] { flex: 1; }

@media (min-width: 1480px) {
	.site-search:not(.site-search--mobile) { display: flex; }
}

/* ================= BREADCRUMBS ================= */

.breadcrumbs { padding-block: var(--space-4); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-text-muted); }
.breadcrumbs__item:not(:last-child)::after { content: '/'; margin-inline-start: var(--space-2); color: var(--color-gray-300); }
.breadcrumbs__item a { color: var(--color-text-muted); }
.breadcrumbs__item a:hover { color: var(--color-ink); }
.breadcrumbs__item [aria-current] { color: var(--color-ink); font-weight: var(--fw-medium); }

/* ================= FACTS ================= */

.fact { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-top: 2px solid var(--color-accent); }
.fact__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--fw-black); color: var(--color-ink); line-height: 1; }
.fact__label { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ================= CARDS ================= */

.offering-card, .service-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	border-top: 3px solid var(--color-ink);
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.offering-card:hover, .service-card:hover {
	box-shadow: var(--shadow-sharp-sm);
	transform: translateY(-3px);
	border-color: var(--color-gray-300);
}
.offering-card .icon, .service-card .icon { margin-bottom: var(--space-3); color: var(--color-ink); }
.offering-card__title, .service-card__title { margin-bottom: var(--space-3); }
.offering-card__link {
	display: inline-block;
	margin-top: var(--space-4);
	font-weight: var(--fw-semibold);
	border-bottom: 2px solid var(--color-accent);
}

.offering__grid, .services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1080px) { .offering__grid, .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .offering__grid, .services-grid { grid-template-columns: 1fr; } }

/* ================= WHY ================= */

/* One controlled piece of visual richness instead of flat paper: a very
   faint technical grid, automotive-adjacent (blueprint/spec-sheet
   association) without being a literal photo we don't have yet. */
.why {
	background-image:
		linear-gradient(var(--color-gray-200) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-gray-200) 1px, transparent 1px);
	background-size: 48px 48px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
	mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6) var(--space-6);
}
@media (max-width: 1080px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } }

.why-item { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-4); }
.why-item__title { margin-bottom: var(--space-2); font-size: var(--fs-h3); }

/* ================= SERVICES TEASER (homepage) ================= */

.services-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-6); }
.services-teaser__item {
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.services-teaser__item .icon { color: var(--color-accent-ink, var(--color-ink)); margin-bottom: var(--space-3); }
.services-teaser__item h3 { font-size: var(--fs-body-lg); margin-bottom: var(--space-2); }
.services-teaser__item p { color: var(--color-text-muted); font-size: var(--fs-small); }
@media (max-width: 1080px) { .services-teaser__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-teaser__grid { grid-template-columns: 1fr; } }

/* ================= LOCALITY (homepage) ================= */

.locality__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.locality__lede { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 56ch; }
.locality__areas { display: flex; flex-wrap: wrap; gap: var(--space-2); align-content: start; }
.locality__areas li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	background: var(--color-surface);
}
@media (max-width: 1080px) { .locality__grid { grid-template-columns: 1fr; } }

/* ================= BRANDS ================= */

.brands-preview__lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7); margin-top: var(--space-2); }
.brands-preview__label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gray-700); margin-bottom: var(--space-3); }
.brands-preview__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.brands-preview__list li {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	padding: var(--space-2) var(--space-4);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.brands-preview__list li:hover { border-color: var(--color-gray-500); background: var(--color-paper); }
@media (max-width: 768px) { .brands-preview__lists { grid-template-columns: 1fr; } }

/* ================= BRAND GRID (Brands page) ================= */

.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.brand-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-6) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
	align-items: center;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.brand-card:hover { border-color: var(--color-gray-500); box-shadow: var(--shadow-sharp-sm); transform: translateY(-2px); }
.brand-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--color-ink); }
.brand-card__origin { font-size: var(--fs-small); color: var(--color-text-muted); }
@media (max-width: 1080px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= FAQ ================= */

.faq__list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq-item__question {
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-lg);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast);
}
.faq-item__question:hover { color: var(--color-gray-700); }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
	content: '+';
	flex-shrink: 0;
	width: 1.6em; height: 1.6em;
	display: grid;
	place-items: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.faq-item[open] .faq-item__question::after { content: '\2212'; background: var(--color-accent); border-color: var(--color-accent); }
.faq-item__answer { margin-top: var(--space-3); color: var(--color-text-muted); max-width: 68ch; }

/* ================= STATUS BADGE ================= */

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
}
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-badge--in-stock { color: var(--color-status-in-stock); background: color-mix(in srgb, var(--color-status-in-stock) 12%, white); }
.status-badge--out-of-stock { color: var(--color-status-out-of-stock); background: var(--color-gray-100); }

/* ================= B2B (page + preview) ================= */

.b2b-preview__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.b2b-preview__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.b2b-preview__segments {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.b2b-preview__segments li { font-size: var(--fs-small); font-weight: var(--fw-medium); padding-block: var(--space-1); }
@media (max-width: 1080px) { .b2b-preview__grid { grid-template-columns: 1fr; } }

.b2b-section { padding-block: var(--space-7); border-top: 2px solid var(--color-gray-200); }
.b2b-section:first-of-type { border-top: none; padding-top: 0; }
.b2b-segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.b2b-segments li {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	padding: var(--space-3);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	text-align: center;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.b2b-segments li:hover { border-color: var(--color-gray-500); box-shadow: var(--shadow-sharp-sm); }
@media (max-width: 1080px) { .b2b-segments { grid-template-columns: repeat(2, 1fr); } }

.b2b-advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.b2b-advantage h3 { margin-bottom: var(--space-2); font-size: var(--fs-h3); }
.b2b-advantage p { color: var(--color-text-muted); }
@media (max-width: 1080px) { .b2b-advantages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .b2b-advantages { grid-template-columns: 1fr; } }

/* ================= CONTACT PAGE ================= */

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); }
.contact-block { margin-bottom: var(--space-6); }
.contact-block h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.contact-social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-social a {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-4);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	display: inline-block;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.contact-social a:hover { border-color: var(--color-ink); background: var(--color-paper); }
.contact-map { min-height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }
@media (max-width: 1080px) { .contact-grid { grid-template-columns: 1fr; } .contact-map { min-height: 320px; } .contact-map iframe { min-height: 320px; } }

/* ================= PAGE HEADER IMAGE ================= */

.page-header__image { margin-block: var(--space-6) var(--space-8); }
.page-header__image img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; aspect-ratio: 1400 / 932; object-fit: cover; max-height: 420px; }
.page-header__image figcaption { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ================= FORMS ================= */

.form-field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.form-field .required { color: var(--color-status-out-of-stock); }
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font: inherit;
	color: var(--color-ink);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; }

.form-banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-weight: var(--fw-medium); }
.form-banner--success { background: color-mix(in srgb, var(--color-status-in-stock) 12%, white); color: var(--color-status-in-stock); }
.form-banner--error { background: color-mix(in srgb, var(--color-status-out-of-stock) 10%, white); color: var(--color-status-out-of-stock); }

.contact-form, .b2b-form { margin-top: var(--space-4); }
.b2b-form { max-width: 760px; margin-inline: auto; margin-top: var(--space-6); }

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ================= FOOTER ================= */

.site-footer { background: var(--color-black); color: var(--color-white); padding-top: var(--space-9); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.site-footer__tagline { color: var(--color-gray-300); margin-top: var(--space-4); max-width: 34ch; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid var(--color-gray-800);
	border-radius: 50%;
	color: var(--color-gray-300);
	transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.site-footer__social a:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-gray-900); }
.site-footer__heading { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray-300); margin-bottom: var(--space-4); }
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col a { font-size: var(--fs-small); color: var(--color-white); }
.site-footer__col a:hover { color: var(--color-accent); }
.site-footer__address { font-style: normal; color: var(--color-gray-300); font-size: var(--fs-small); display: flex; gap: var(--space-2); }
.site-footer__col p { font-size: var(--fs-small); display: flex; flex-direction: column; gap: var(--space-1); }
.site-footer__col p a { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__hours { color: var(--color-gray-300); margin-top: var(--space-3); }
.site-footer__col .btn--secondary { margin-top: var(--space-4); }

.site-footer__bottom {
	border-top: 1px solid var(--color-gray-900);
	padding-block: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-small);
	color: var(--color-gray-500);
}
.site-footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__legal a { color: var(--color-gray-500); }
.site-footer__legal a:hover { color: var(--color-white); }

@media (max-width: 1080px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }