/*
 * layout.css — Container system, section system, post grids, header/footer structure.
 * Component-level layout lives in each component's own CSS file.
 */

/* ── Container ───────────────────────────────────────────────────────────── */
.mvc-container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.mvc-container--narrow {
	max-width: var(--container-narrow);
}

.mvc-container--wide {
	max-width: var(--container-wide);
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.mvc-section {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.mvc-section--sm {
	padding-top: var(--section-py-sm);
	padding-bottom: var(--section-py-sm);
}

.mvc-section--lg {
	padding-top: var(--section-py-lg);
	padding-bottom: var(--section-py-lg);
}

.mvc-section--dark {
	background-color: var(--color-gray-900);
	color: var(--color-gray-100);
}

.mvc-section--dark .mvc-section-title,
.mvc-section--dark h1,
.mvc-section--dark h2,
.mvc-section--dark h3 {
	color: var(--color-white);
}

.mvc-section--dark .mvc-section-subtitle {
	color: var(--color-gray-400);
}

.mvc-section--alt {
	background-color: var(--color-bg-alt);
}

.mvc-section--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.mvc-section--primary .mvc-section-title,
.mvc-section--primary h2 {
	color: var(--color-white);
}

.mvc-section--primary .mvc-section-subtitle {
	color: rgb(255 255 255 / 0.85);
}

/* ── Section color schemes — data-scheme attribute ──────────────────────── */
/*
 * Add data-scheme="dark"    → deep dark background, white text
 * Add data-scheme="primary" → brand-color background, white text
 * Add data-scheme="light"   → off-white surface background, dark text
 * All text, links, headings adapt automatically — components need no changes.
 */

[data-scheme="dark"] {
	--scheme-bg:       var(--color-gray-900);
	--scheme-text:     #f1f5f9;
	--scheme-heading:  #ffffff;
	--scheme-muted:    #94a3b8;
	--scheme-border:   rgba(255,255,255,0.12);
	--scheme-link:     #93c5fd;
	background-color:  var(--scheme-bg);
	color:             var(--scheme-text);
}

[data-scheme="primary"] {
	--scheme-bg:       var(--color-primary);
	--scheme-text:     rgba(255,255,255,0.92);
	--scheme-heading:  #ffffff;
	--scheme-muted:    rgba(255,255,255,0.7);
	--scheme-border:   rgba(255,255,255,0.2);
	--scheme-link:     #ffffff;
	background-color:  var(--scheme-bg);
	color:             var(--scheme-text);
}

[data-scheme="light"] {
	--scheme-bg:       var(--color-bg-alt, #f8fafc);
	--scheme-text:     var(--color-text);
	--scheme-heading:  var(--color-heading);
	--scheme-muted:    var(--color-text-muted);
	--scheme-border:   var(--color-border);
	--scheme-link:     var(--color-primary);
	background-color:  var(--scheme-bg);
	color:             var(--scheme-text);
}

/* Headings inherit scheme */
[data-scheme="dark"] h1,
[data-scheme="dark"] h2,
[data-scheme="dark"] h3,
[data-scheme="dark"] h4,
[data-scheme="dark"] h5,
[data-scheme="dark"] h6,
[data-scheme="primary"] h1,
[data-scheme="primary"] h2,
[data-scheme="primary"] h3,
[data-scheme="primary"] h4,
[data-scheme="primary"] h5,
[data-scheme="primary"] h6 {
	color: var(--scheme-heading);
}

/* Muted text */
[data-scheme="dark"] .mvc-section-subtitle,
[data-scheme="dark"] .mvc-text-muted,
[data-scheme="primary"] .mvc-section-subtitle,
[data-scheme="primary"] .mvc-text-muted {
	color: var(--scheme-muted);
}

/* Links */
[data-scheme="dark"] a,
[data-scheme="primary"] a {
	color: var(--scheme-link);
}

/* Borders */
[data-scheme="dark"] hr,
[data-scheme="primary"] hr {
	border-color: var(--scheme-border);
}

/* ── Section header ──────────────────────────────────────────────────────── */
.mvc-section-header {
	margin-bottom: var(--space-16);
}

.mvc-section-header--center {
	text-align: center;
}

.mvc-section-header--center .mvc-section-subtitle {
	margin-left: auto;
	margin-right: auto;
}

/* ── Post grid ───────────────────────────────────────────────────────────── */
.mvc-post-grid {
	display: grid;
	gap: var(--grid-gap);
}

/* Equal-height cards: grid rows stretch by default, so make the <li> and the
   card itself fill that stretched height instead of shrinking to content. */
.mvc-post-grid__item {
	display: flex;
	height: 100%;
}

.mvc-post-grid__item .mvc-post-card {
	width: 100%;
}

.mvc-post-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.mvc-post-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.mvc-post-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.mvc-post-grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 1023px) {
	.mvc-post-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.mvc-post-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
	.mvc-post-grid--2,
	.mvc-post-grid--3,
	.mvc-post-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* ── Header structural ───────────────────────────────────────────────────── */
.mvc-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border);
	box-shadow: var(--header-shadow);
	transition: box-shadow var(--duration-normal) var(--ease-default);
	overflow: visible;
}

.mvc-header.is-scrolled {
	box-shadow: var(--shadow-md);
}

.mvc-header__inner {
	display: flex;
	align-items: center;
	height: var(--header-height);
	gap: var(--space-6);
}

.mvc-header__logo-link {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.mvc-header__logo-img {
	height: var(--header-logo-height);
	width: auto;
	transition: height var(--duration-normal) var(--ease-default);
}

.mvc-header__logo-text {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	font-size: var(--text-xl);
	color: var(--color-heading);
	text-decoration: none;
}

.mvc-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
}

.mvc-header__util {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}

.mvc-header__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-sm);
	transition: var(--transition-colors);
}

.mvc-header__phone:hover {
	color: var(--color-primary);
}

.mvc-header__phone-icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.mvc-header__cta {
	white-space: nowrap;
	padding: var(--space-2) var(--space-5) !important;
	border-radius: var(--radius-full, 999px) !important;
	font-size: var(--text-sm) !important;
}

.mvc-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	color: var(--color-text);
	background: transparent;
	border: 0;
	transition: var(--transition-colors);
}

/* Hover/focus — only apply when NOT open. The [aria-expanded="true"] rule
   below handles the open state separately so closing doesn't leave a
   stray hover/focus bg behind. */
.mvc-header__menu-toggle[aria-expanded="false"]:hover,
.mvc-header__menu-toggle:not([aria-expanded="true"]):hover {
	background: rgba(0, 0, 0, 0.06);
}
.mvc-header__menu-toggle[aria-expanded="false"]:focus-visible,
.mvc-header__menu-toggle:not([aria-expanded="true"]):focus-visible {
	background: rgba(0, 0, 0, 0.06);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
/* After close on touch devices, :hover can stick. Force closed-state bg
   back to transparent so the button blends with the header again. */
.mvc-header__menu-toggle[aria-expanded="false"] {
	background: transparent;
}

.mvc-header__menu-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.mvc-header__menu-icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--duration-normal) var(--ease-default),
	            opacity var(--duration-normal) var(--ease-default);
}

/* Toggle state — JS adds aria-expanded="true" */
.mvc-header__menu-toggle[aria-expanded="true"] .mvc-header__menu-icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mvc-header__menu-toggle[aria-expanded="true"] .mvc-header__menu-icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.mvc-header__menu-toggle[aria-expanded="true"] .mvc-header__menu-icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* When the mobile menu is OPEN, the toggle becomes the X close button.
   Force it onto a brand-blue chip with white bars so it stays visible
   regardless of what the header bg behind it is doing (transparent over
   hero, scrolled white, dark photo, brand bg, etc.). Without this the X
   inherits whatever the parent header text color was — frequently white
   on a white scrolled header = invisible. Wins over the
   .mvc-header--transparent and .single-project transparent overrides via
   higher specificity (one element + one attribute selector each side). */
.mvc-header__menu-toggle[aria-expanded="true"] {
	background: var(--color-primary) !important;
	color: #ffffff !important;
}
.mvc-header__menu-toggle[aria-expanded="true"] .mvc-header__menu-icon span {
	background: #ffffff !important;
}
.mvc-header__menu-toggle[aria-expanded="true"]:hover,
.mvc-header__menu-toggle[aria-expanded="true"]:focus-visible {
	background: var(--color-primary-dark, var(--color-primary)) !important;
	color: #ffffff !important;
}

/* ── Primary nav ─────────────────────────────────────────────────────────── */

/* The nav wrapper fills the header inner, centres items, and has its ul horizontal */
.mvc-header__nav .mvc-nav-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.mvc-header__nav .mvc-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvc-header__nav .mvc-nav__item {
	position: relative;
}

/* Nav links — cover both our walker class and WP's default menu-item class */
.mvc-header .mvc-header__nav .mvc-nav__link,
.mvc-header .mvc-header__nav .menu-item > a {
	display: block;
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-full, 999px);
	color: var(--color-text);
	font-weight: var(--mvc-nav-font-weight, var(--font-weight-medium));
	font-size: var(--text-md, 1.0625rem);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-default),
	            background var(--duration-normal) var(--ease-default);
	white-space: nowrap;
	letter-spacing: var(--mvc-nav-letter-spacing, 0.06em);
	text-transform: var(--mvc-nav-text-transform, uppercase);
}

/* Kill underline across all states — beats typography.css via 3-level specificity */
.mvc-header .mvc-header__nav .mvc-nav__link,
.mvc-header .mvc-header__nav .mvc-nav__link:link,
.mvc-header .mvc-header__nav .mvc-nav__link:visited,
.mvc-header .mvc-header__nav .mvc-nav__link:hover,
.mvc-header .mvc-header__nav .mvc-nav__link:focus,
.mvc-header .mvc-header__nav .menu-item > a,
.mvc-header .mvc-header__nav .menu-item > a:link,
.mvc-header .mvc-header__nav .menu-item > a:visited,
.mvc-header .mvc-header__nav .menu-item > a:hover,
.mvc-header .mvc-header__nav .menu-item > a:focus {
	text-decoration: none;
}

.mvc-header .mvc-header__nav .mvc-nav__link:hover,
.mvc-header .mvc-header__nav .mvc-nav__link:focus-visible,
.mvc-header .mvc-header__nav .menu-item > a:hover {
	color: var(--color-primary);
	background: var(--color-primary-subtle);
}

/* Active page: solid filled primary pill — unmistakable current-page indicator */
.mvc-header .mvc-header__nav .mvc-nav__item--active > .mvc-nav__link,
.mvc-header .mvc-header__nav .current-menu-item > a,
.mvc-header .mvc-header__nav .current_page_item > a,
.mvc-header .mvc-header__nav .current-menu-ancestor > a {
	color: var(--color-white);
	background: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

/* Dropdown submenu */
.mvc-header__nav .mvc-nav__submenu {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--duration-normal) var(--ease-default),
	            transform var(--duration-normal) var(--ease-default),
	            visibility var(--duration-normal);
	z-index: var(--z-dropdown);
}

.mvc-header__nav .mvc-nav__item--has-children:hover > .mvc-nav__submenu,
.mvc-header__nav .mvc-nav__item--has-children.is-open > .mvc-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mvc-header__nav .mvc-nav__sublink {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition-colors);
}

.mvc-header__nav .mvc-nav__sublink:hover {
	color: var(--color-primary);
	background: var(--color-primary-subtle);
}

/* ── Mobile menu drawer ──────────────────────────────────────────────────── */
/* Floats over the page — does not push content down */
.mvc-mobile-menu {
	position: fixed;
	top: var(--header-height);
	right: 0;
	width: 300px;
	max-width: 90vw;
	/* Brand-color drawer: solid primary so the menu reads cleanly regardless
	   of what's behind it. Was --color-white, which on single-project pages
	   with the transparent header let the project content bleed through
	   visually. */
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-top: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
	z-index: calc(var(--z-header) + 10);
	max-height: calc(100vh - var(--header-height));
	overflow-y: auto;
	color: #ffffff;
}

.mvc-mobile-menu[hidden] {
	display: none !important;
}

.mvc-mobile-menu__inner {
	padding: var(--space-2) 0 var(--space-4);
	display: flex;
	flex-direction: column;
}

/* Nav list */
.mvc-mobile-menu .mvc-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Kill underline on ALL links inside the mobile menu — every state */
.mvc-mobile-menu a,
.mvc-mobile-menu a:link,
.mvc-mobile-menu a:visited,
.mvc-mobile-menu a:hover,
.mvc-mobile-menu a:focus,
.mvc-mobile-menu a:active {
	text-decoration: none;
}

/* Brand-color drawer rules: all rows on the primary bg, white text, with
   a soft white-alpha hover so the affordance is visible without breaking
   the brand field. Active item gets a lighter white-alpha pill + left rule. */
.mvc-mobile-menu .mvc-nav__link,
.mvc-mobile-menu .menu-item > a {
	display: block;
	padding: var(--space-4) var(--space-5);
	color: #ffffff !important;
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: background var(--duration-normal) var(--ease-default),
	            color var(--duration-normal) var(--ease-default);
	letter-spacing: 0.03em;
}

.mvc-mobile-menu .mvc-nav__link:hover,
.mvc-mobile-menu .menu-item > a:hover,
.mvc-mobile-menu .mvc-nav__link:focus-visible,
.mvc-mobile-menu .menu-item > a:focus-visible {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #ffffff !important;
}

.mvc-mobile-menu .mvc-nav__item--active > .mvc-nav__link,
.mvc-mobile-menu .current-menu-item > a,
.mvc-mobile-menu .current_page_item > a {
	color: #ffffff !important;
	font-weight: var(--font-weight-semibold);
	background: rgba(255, 255, 255, 0.18);
	border-left: 3px solid #ffffff;
	padding-left: calc(var(--space-5) - 3px);
}

/* Sub-menu sits on a slightly darker tint so it nests visibly */
.mvc-mobile-menu .mvc-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.18);
}

.mvc-mobile-menu .mvc-nav__sublink,
.mvc-mobile-menu .mvc-nav__sublink:link,
.mvc-mobile-menu .mvc-nav__sublink:visited {
	display: block;
	padding: var(--space-2) var(--space-5) var(--space-2) var(--space-8);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.9) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	transition: var(--transition-colors);
}

.mvc-mobile-menu .mvc-nav__sublink:hover,
.mvc-mobile-menu .mvc-nav__sublink:focus-visible {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.12);
}

/* Phone — plain text link row, on-brand */
.mvc-mobile-menu__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	color: #ffffff !important;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	text-decoration: none;
}

.mvc-mobile-menu__phone:hover,
.mvc-mobile-menu__phone:focus-visible {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.14);
	text-decoration: none;
}

/* CTA — inverted white pill so it stands out against the brand-blue drawer */
.mvc-mobile-menu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-3) var(--space-5) 0;
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-full, 999px);
	background: #ffffff;
	color: var(--color-primary) !important;
	text-decoration: none;
	align-self: flex-start;
	transition: background var(--duration-normal) var(--ease-default),
	            color var(--duration-normal) var(--ease-default);
}

.mvc-mobile-menu__cta:hover,
.mvc-mobile-menu__cta:focus-visible {
	background: rgba(255, 255, 255, 0.88);
	color: var(--color-primary) !important;
	text-decoration: none;
}

/* ── Header: transparent-to-sticky ─────────────────────────────────────── */

/* Fixed + transparent on load — sits on top of hero */
.mvc-header--transparent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent !important;
	border-bottom-color: transparent;
	box-shadow: none;
	transition: background 0.35s ease,
	            border-bottom-color 0.35s ease,
	            box-shadow 0.35s ease;
}

/* Transparent header — all text white with shadow for readability over photos */
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-nav__link,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .menu-item > a,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-header__phone,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-header__phone-number,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-header__logo-text,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-header__menu-toggle {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-header__phone-icon {
	color: #fff;
}
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-nav__link:hover,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .menu-item > a:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* Active item on transparent: frosted pill */
.mvc-header.mvc-header--transparent:not(.is-scrolled) .mvc-nav__item--active > .mvc-nav__link,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .current-menu-item > a,
.mvc-header.mvc-header--transparent:not(.is-scrolled) .current_page_item > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.28);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* After scroll: background fades in, stays fixed at top */
.mvc-header--transparent.is-scrolled {
	background: var(--header-scrolled-bg, var(--header-bg)) !important;
	border-bottom-color: var(--header-border);
	box-shadow: var(--shadow-md);
}

/* Default: when transparent header is scrolled, always reset text to dark.
   The scrolled-text-light class below overrides this for dark scrolled backgrounds. */
.mvc-header--transparent.is-scrolled .mvc-nav__link,
.mvc-header--transparent.is-scrolled .menu-item > a,
.mvc-header--transparent.is-scrolled .mvc-header__phone,
.mvc-header--transparent.is-scrolled .mvc-header__phone-number,
.mvc-header--transparent.is-scrolled .mvc-header__logo-text,
.mvc-header--transparent.is-scrolled .mvc-header__menu-toggle,
.mvc-header--transparent.is-scrolled .mvc-header__phone-icon {
	color: var(--color-text) !important;
	text-shadow: none !important;
}

/* Scrolled text — light (white): use when scrolled background is dark */
.mvc-header--scrolled-text-light.is-scrolled .mvc-nav__link,
.mvc-header--scrolled-text-light.is-scrolled .menu-item > a,
.mvc-header--scrolled-text-light.is-scrolled .mvc-header__phone,
.mvc-header--scrolled-text-light.is-scrolled .mvc-header__phone-number,
.mvc-header--scrolled-text-light.is-scrolled .mvc-header__logo-text,
.mvc-header--scrolled-text-light.is-scrolled .mvc-header__menu-toggle,
.mvc-header--scrolled-text-light.is-scrolled .mvc-header__phone-icon {
	color: #fff !important;
	text-shadow: none !important;
}
.mvc-header--scrolled-text-light.is-scrolled .mvc-nav__link:hover,
.mvc-header--scrolled-text-light.is-scrolled .menu-item > a:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff !important;
}
.mvc-header--scrolled-text-light.is-scrolled .mvc-nav__item--active > .mvc-nav__link,
.mvc-header--scrolled-text-light.is-scrolled .current-menu-item > a,
.mvc-header--scrolled-text-light.is-scrolled .current_page_item > a {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.25);
}

/* Scrolled text — dark: use when scrolled background is light (default behavior) */
.mvc-header--scrolled-text-dark.is-scrolled .mvc-nav__link,
.mvc-header--scrolled-text-dark.is-scrolled .menu-item > a,
.mvc-header--scrolled-text-dark.is-scrolled .mvc-header__phone,
.mvc-header--scrolled-text-dark.is-scrolled .mvc-header__phone-number,
.mvc-header--scrolled-text-dark.is-scrolled .mvc-header__logo-text,
.mvc-header--scrolled-text-dark.is-scrolled .mvc-header__menu-toggle,
.mvc-header--scrolled-text-dark.is-scrolled .mvc-header__phone-icon {
	color: var(--color-text) !important;
	text-shadow: none !important;
}

/* ── Header: hamburger-always mode ──────────────────────────────────────── */
/* Hide the horizontal nav and CTA button; keep phone number visible */
.mvc-header--nav-hamburger .mvc-header__nav {
	display: none;
}
.mvc-header--nav-hamburger .mvc-header__util .mvc-header__cta {
	display: none;
}
/* Push util (phone + toggle) to the far right when nav is hidden */
.mvc-header--nav-hamburger .mvc-header__inner {
	justify-content: space-between;
}
.mvc-header--nav-hamburger .mvc-header__util {
	margin-left: auto;
}
/* Toggle always shows in hamburger mode */
.mvc-header--nav-hamburger .mvc-header__menu-toggle {
	display: flex;
}

/* ── Header: oversized logo ─────────────────────────────────────────────── */
/* Logo is taller than the header — it spills downward into the hero.
   align-self:flex-start means the logo-link top-aligns with the header row top,
   then the image grows downward. overflow:visible on header + inner lets it show. */
.mvc-header--logo-oversized,
.mvc-header--logo-oversized .mvc-header__inner {
	overflow: visible;
}
.mvc-header--logo-oversized .mvc-header__logo-link {
	align-self: flex-start;
	align-items: flex-start;
	overflow: visible;
}
.mvc-header--logo-oversized .mvc-header__logo-img {
	height: calc(var(--header-height) * 1.7);
	width: auto;
	z-index: calc(var(--z-header) + 1);
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
/* Scrolled: oversized logo shrinks back inside the header row so the bar
   stays compact once the user has scrolled past the hero. */
.mvc-header--logo-oversized.is-scrolled .mvc-header__logo-link {
	align-self: center;
	align-items: center;
}
.mvc-header--logo-oversized.is-scrolled .mvc-header__logo-img {
	height: var(--header-logo-height);
	filter: none;
}

/* ── Mega menu panel ────────────────────────────────────────────────────── */
.mvc-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.12));
	z-index: var(--z-dropdown);
}
.mvc-mega-panel[hidden] { display: none; }

.mvc-mega-panel__inner {
	display: flex;
	gap: var(--space-8);
	padding-block: var(--space-8);
	align-items: flex-start;
}

.mvc-mega-panel__columns {
	display: flex;
	gap: var(--space-8);
	flex: 1;
}

.mvc-mega-panel__col {
	flex: 1;
	min-width: 160px;
}

.mvc-mega-panel__col-heading {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

.mvc-mega-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.mvc-mega-panel__links a {
	display: block;
	padding: var(--space-2) var(--space-2);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: var(--transition-colors);
}
.mvc-mega-panel__links a:hover {
	color: var(--color-primary);
	background: var(--color-primary-subtle);
}

/* Featured promo panel */
.mvc-mega-panel__featured {
	flex-shrink: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--color-surface-raised, var(--color-gray-50));
	border-radius: var(--radius-lg);
}

.mvc-mega-panel__feat-img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--radius);
}

.mvc-mega-panel__feat-title {
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	color: var(--color-heading);
	margin: 0;
}

.mvc-mega-panel__feat-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: var(--leading-normal);
}

/* Nav item that triggers a mega panel */
.mvc-nav__link[data-mega-for] {
	position: relative;
}
.mvc-nav__link[data-mega-for][aria-expanded="true"] {
	color: var(--color-primary);
	background: var(--color-primary-subtle);
}

/* Hide mega panels on mobile */
@media (max-width: 767px) {
	.mvc-mega-panel { display: none !important; }
}

/* ── Footer structural ───────────────────────────────────────────────────── */
.mvc-footer {
	background: var(--footer-bg);
	color: var(--footer-text);
	padding-top: var(--footer-py);
	padding-bottom: calc(var(--footer-py) / 2);
}

.mvc-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-12);
	margin-bottom: var(--space-12);
}

.mvc-footer__logo-img {
	height: 48px;
	width: auto;
	margin-bottom: var(--space-4);
	/* Defensive: kill any inherited/cached silhouette filter from older
	   preset CSS. The framework now expects uploaded logos to render
	   in true color; clients upload an inverted/light variant if needed. */
	filter: none !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
}

.mvc-footer__tagline {
	font-size: var(--text-sm);
	color: var(--footer-text);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
}

.mvc-footer__heading {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--footer-heading-color);
	margin-bottom: var(--space-4);
}

.mvc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.mvc-footer__links a {
	color: var(--footer-link-color);
	text-decoration: none;
	font-size: var(--text-sm);
	transition: var(--transition-colors);
}

.mvc-footer__links a:hover {
	color: var(--footer-link-hover);
}

.mvc-footer__bottom {
	border-top: 1px solid var(--footer-border);
	padding-top: var(--space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-gray-500);
}

.mvc-footer__social {
	display: flex;
	gap: var(--space-3);
}

.mvc-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.08);
	color: rgb(255 255 255 / 0.85);
	text-decoration: none;
	transition: var(--transition);
}

.mvc-footer__social a:hover,
.mvc-footer__social a:focus-visible {
	background: #fff;
	color: var(--color-primary);
}

.mvc-footer__social a svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 1023px) {
	.mvc-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mvc-footer__grid > :first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 639px) {
	.mvc-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.mvc-footer__grid > :first-child {
		grid-column: auto;
	}

	.mvc-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.mvc-breadcrumbs {
	padding: var(--space-3) 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Band wrapper used by page templates that inject breadcrumbs directly under
   the hero (via the mvc/after_section hook). Keeps breadcrumbs inside the
   normal container gutters and gives a subtle bottom border so the band reads
   as a distinct strip rather than floating in whitespace. */
.mvc-breadcrumbs-band {
	border-bottom: 1px solid var(--color-border-subtle, var(--color-gray-200));
	background: var(--color-bg, transparent);
}

.mvc-breadcrumbs-band .mvc-breadcrumbs {
	padding-block: var(--space-3);
}

.mvc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvc-breadcrumbs__sep {
	color: var(--color-gray-400);
	font-size: var(--text-sm);
	line-height: 1;
}

.mvc-breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: var(--transition-colors);
}

.mvc-breadcrumbs a:hover {
	color: var(--color-primary);
}

.mvc-breadcrumbs [aria-current="page"] {
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.mvc-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-16);
}

.mvc-pagination a,
.mvc-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: var(--transition-colors);
}

.mvc-pagination a {
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.mvc-pagination a:hover {
	background: var(--color-primary-subtle);
	color: var(--color-primary);
	border-color: var(--color-primary-light);
}

.mvc-pagination .current {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ── Post nav (prev/next) ────────────────────────────────────────────────── */
.mvc-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-16);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.mvc-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	text-decoration: none;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: var(--transition);
}

.mvc-post-nav__link:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.mvc-post-nav__link--next {
	text-align: right;
}

.mvc-post-nav__label {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mvc-post-nav__title {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-heading);
}

@media (max-width: 639px) {
	.mvc-post-nav {
		grid-template-columns: 1fr;
	}
}

/* ── Search form ─────────────────────────────────────────────────────────── */
.mvc-search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 600px;
	margin: 0 auto;
}

.mvc-search-form__input {
	flex: 1;
	height: var(--input-height);
	padding: var(--input-py) var(--input-px);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	background: var(--input-bg);
	color: var(--input-text);
	font-size: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-default),
	            box-shadow var(--duration-normal) var(--ease-default);
}

.mvc-search-form__input:focus {
	outline: none;
	border-color: var(--input-border-focus);
	box-shadow: 0 0 0 3px rgb(from var(--color-primary) r g b / 0.15);
}

.mvc-search-form__submit {
	flex-shrink: 0;
}

/* ── Mobile breakpoints ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.mvc-header__nav,
	.mvc-header__util .mvc-header__cta {
		display: none;
	}

	.mvc-header__menu-toggle {
		display: flex;
	}

	.mvc-header__inner {
		height: var(--header-height-sm);
	}

	.mvc-header__logo-img {
		height: var(--header-logo-height-sm);
	}
}

@media (min-width: 768px) {
	/* Hide mobile drawer on desktop in horizontal nav mode only */
	.mvc-header--nav-horizontal .mvc-mobile-menu {
		display: none !important;
	}
}

/* =============================================================================
   Post grid — Ncol modifier aliases
   Components use `mvc-post-grid--3col` (etc.) but the base rules above were
   written as `--3`. Add the col-suffixed aliases so existing component markup
   actually columnar-renders.
   ============================================================================= */

.mvc-post-grid--1col { grid-template-columns: 1fr; }
.mvc-post-grid--2col { grid-template-columns: repeat(2, 1fr); }
.mvc-post-grid--3col { grid-template-columns: repeat(3, 1fr); }
.mvc-post-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
	.mvc-post-grid--4col,
	.mvc-post-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
	.mvc-post-grid--2col,
	.mvc-post-grid--3col,
	.mvc-post-grid--4col {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Archive header — used by archive-location.php and other CPT archives
   ============================================================================= */

.mvc-archive-header {
	padding-block: var(--space-12) var(--space-8);
	background-color: var(--color-surface-raised);
	border-block-end: 1px solid var(--color-border);
}

.mvc-archive-header__title {
	margin-block: 0 var(--space-3);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.mvc-archive-header__desc {
	max-width: 65ch;
	margin-block: 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-lg, 1.125rem);
	line-height: 1.6;
}

.mvc-archive-header__count {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	margin-block: 0;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
}

/* =============================================================================
   Archive filter — county pills on archive-location, reusable on other archives
   ============================================================================= */

.mvc-archive-filter {
	margin-block: var(--space-8) var(--space-10);
}

.mvc-archive-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-archive-filter__item {
	margin: 0;
}

.mvc-archive-filter__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-5);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.mvc-archive-filter__link:hover,
.mvc-archive-filter__link:focus-visible {
	background-color: var(--color-primary-subtle);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.mvc-archive-filter__item--active .mvc-archive-filter__link {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.mvc-archive-filter__item--active .mvc-archive-filter__link:hover,
.mvc-archive-filter__item--active .mvc-archive-filter__link:focus-visible {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

/* =============================================================================
   Archive group — county sections on archive-location.php
   Each county is a scannable banded section linking to its taxonomy archive
   ============================================================================= */

.mvc-archive-group {
	margin-block-end: var(--space-16);
}

.mvc-archive-group + .mvc-archive-group {
	padding-block-start: var(--space-12);
	border-block-start: 1px solid var(--color-border);
}

.mvc-archive-group__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3) var(--space-6);
	margin-block-end: var(--space-8);
}

.mvc-archive-group__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.mvc-archive-group__title a {
	color: var(--color-text);
	text-decoration: none;
	background-image: linear-gradient(var(--color-primary), var(--color-primary));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition: background-size var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default);
}

.mvc-archive-group__title a:hover,
.mvc-archive-group__title a:focus-visible {
	background-size: 100% 2px;
	color: var(--color-primary-dark);
}

.mvc-archive-group__desc {
	flex-basis: 100%;
	max-width: 65ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.mvc-archive-group__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
}

.mvc-archive-group--uncategorized .mvc-archive-group__title {
	color: var(--color-text-muted);
	font-style: italic;
}

/* =============================================================================
   Location single — geographic context badges in the hero
   Used by single-location.php: neighborhood (most specific) → municipality → region
   ============================================================================= */

.mvc-location__geo-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-4) var(--space-5);
}

/* Each .mvc-location__neighborhood / __city / __region renders as a <ul> from
   mvc_the_post_terms(); style the inner <li> + <a> as pills. */
.mvc-location__neighborhood,
.mvc-location__city,
.mvc-location__region {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-location__neighborhood li,
.mvc-location__city li,
.mvc-location__region li {
	margin: 0;
}

.mvc-location__neighborhood a,
.mvc-location__city a,
.mvc-location__region a,
.mvc-location__neighborhood span,
.mvc-location__city span,
.mvc-location__region span {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default);
}

/* Neighborhood is the most specific → strongest visual weight */
.mvc-location__neighborhood a,
.mvc-location__neighborhood span {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.mvc-location__neighborhood a:hover,
.mvc-location__neighborhood a:focus-visible {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

/* City is mid-priority */
.mvc-location__city a,
.mvc-location__city span {
	background-color: var(--color-primary-subtle);
	border-color: var(--color-primary-subtle);
	color: var(--color-primary-dark);
}

.mvc-location__city a:hover,
.mvc-location__city a:focus-visible {
	background-color: var(--color-primary-subtle);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

/* Region is the broadest/lowest priority → outline only */
.mvc-location__region a,
.mvc-location__region span {
	background-color: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text-muted);
}

.mvc-location__region a:hover,
.mvc-location__region a:focus-visible {
	background-color: var(--color-surface-raised);
	border-color: var(--color-text-muted);
	color: var(--color-text);
}

@media (max-width: 639px) {
	.mvc-archive-header {
		padding-block: var(--space-8) var(--space-6);
	}

	.mvc-archive-group {
		margin-block-end: var(--space-12);
	}

	.mvc-archive-group + .mvc-archive-group {
		padding-block-start: var(--space-8);
	}
}

/* =============================================================================
   Section footer — wrapper for "See all" buttons in service-grid / location-grid.
   The button itself is .mvc-btn .mvc-btn--secondary (unified with the rest of
   the site's button system, so it inherits design settings). This wrapper only
   centers it and animates the arrow.
   ============================================================================= */

.mvc-section-footer {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-10);
}

.mvc-section-footer .mvc-btn > span {
	transition: transform var(--duration-normal) var(--ease-default);
}

.mvc-section-footer .mvc-btn:hover > span,
.mvc-section-footer .mvc-btn:focus-visible > span {
	transform: translateX(4px);
}

/* =============================================================================
   Projects archive — SEO/AEO/GEO authority hub (archive-project.php)
   Section order/visibility is admin-controlled; styles below are per-section
   and independent of order.
   ============================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.mvc-archive-hero {
	background-color: var(--color-surface-raised);
	border-block-end: 1px solid var(--color-border);
}

.mvc-archive-hero__title {
	margin-block: 0 var(--space-3);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.mvc-archive-hero__subtitle,
.mvc-archive-hero__desc {
	max-width: 65ch;
	margin-block: 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-lg, 1.125rem);
	line-height: 1.6;
}

.mvc-archive-hero__count {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	margin-block: 0;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
}

/* The count badge is a light pill (its own --color-surface background). When the
   hero section is given a dark background preset, bg-presets.css forces every
   <p> inside the preset to white !important, which would make this pill's text
   white-on-white. Keep it dark to stay legible on its own light surface. The
   second selector matches the explicit "light text" mode, which is more specific
   than a plain [data-bg-preset] and would otherwise win. See
   project_bg_presets_important memory. */
[data-bg-preset] .mvc-archive-hero__count,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) .mvc-archive-hero__count {
	color: var(--color-text-muted) !important;
}

.mvc-archive-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-block: var(--space-6) 0;
	padding: 0;
	list-style: none;
}

.mvc-archive-hero__stat {
	display: flex;
	flex-direction: column;
}

.mvc-archive-hero__stat-value {
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	line-height: 1.1;
}

.mvc-archive-hero__stat-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ── Quick Answer (AEO) ─────────────────────────────────────────────────────
   Also the canonical style for mvc_the_quick_answer() output elsewhere. */
.mvc-quick-answer {
	padding: var(--space-5) var(--space-6);
	background-color: var(--color-primary-subtle, var(--color-surface-raised));
	border-inline-start: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
}

.mvc-quick-answer__label {
	margin-block: 0 var(--space-1);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
}

.mvc-quick-answer__text {
	margin-block: 0;
	font-size: var(--text-lg, 1.125rem);
	line-height: 1.6;
	color: var(--color-text);
}

/* The Quick Answer is a light card (its own --color-primary-subtle background).
   When the section is given a dark background preset (e.g. brand gradient),
   bg-presets.css forces every <p> inside the preset to white !important, making
   the label + text white-on-light and unreadable. Keep them dark on their own
   light surface. The data-bp-text="light" variant is more specific than a bare
   [data-bg-preset] and would otherwise win. See project_bg_presets_important. */
[data-bg-preset] .mvc-quick-answer__label,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) .mvc-quick-answer__label {
	color: var(--color-primary) !important;
}

[data-bg-preset] .mvc-quick-answer__text,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) .mvc-quick-answer__text {
	color: var(--color-text) !important;
}

/* ── Filter bar (extends the shared .mvc-archive-filter pills) ──────────────── */
.mvc-archive-filters-section .mvc-archive-filter {
	margin-block: 0 var(--space-5);
}

.mvc-archive-filter__group-label {
	display: block;
	margin-block-end: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-muted);
}

/* ── Internal linking hub ──────────────────────────────────────────────────── */
.mvc-archive-links__title {
	margin-block: 0 var(--space-2);
}

.mvc-archive-links__subtitle {
	max-width: 60ch;
	margin-block: 0 var(--space-8);
	color: var(--color-text-muted);
}

.mvc-archive-links__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-8);
}

.mvc-archive-links__col-heading {
	margin-block: 0 var(--space-3);
	padding-block-end: var(--space-2);
	border-block-end: 1px solid var(--color-border);
	font-size: var(--text-lg, 1.125rem);
}

.mvc-archive-links__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-archive-links__item + .mvc-archive-links__item {
	margin-block-start: var(--space-1);
}

.mvc-archive-links__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-default);
}

.mvc-archive-links__link:hover,
.mvc-archive-links__link:focus-visible {
	color: var(--color-primary);
}

.mvc-archive-links__count {
	flex: none;
	min-width: 1.75em;
	padding: 0 var(--space-2);
	background-color: var(--color-surface-raised);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	text-align: center;
	color: var(--color-text-muted);
}

/* (archive-trust component retired 2026-05-30 — replaced by imported trust_strip
   + stats_block page-section components, same as the home page.) */

/* ── FAQ section list spacing ──────────────────────────────────────────────── */
.mvc-archive-faq__title {
	margin-block: 0 var(--space-2);
	text-align: center;
}

.mvc-archive-faq__subtitle {
	max-width: 60ch;
	margin-block: 0 var(--space-8);
	margin-inline: auto;
	text-align: center;
	color: var(--color-text-muted);
}

@media (max-width: 639px) {
	.mvc-archive-hero__stats {
		gap: var(--space-6);
	}
}

/* ── Breathing room before the footer ──────────────────────────────────────────
   The archive main's last section sits directly above the site footer; add
   bottom spacing so content doesn't butt against it. Use margin (outside the
   section's box) rather than padding to avoid extending a colored band when the
   last section paints its own bg. */
.mvc-main--archive-project {
	margin-block-end: var(--space-16);
}

/* Exception: when the last section IS a self-bg block (the cta-block paints its
   own opaque background and is rendered without the styling wrapper by the
   archive renderer, so it's a direct child of <main>), zero the margin so the
   colored band flows straight into the footer — intentional design hand-off, not
   "butting against." */
.mvc-main--archive-project:has(> .mvc-cta-block:last-child) {
	margin-block-end: 0;
}

/* ── Archive grid: card polish (3 / 2 / 1 col) ────────────────────────────────
   The archive-grid component outputs <ul class="mvc-post-grid mvc-archive-grid
   mvc-{post_type}-grid">. The base .mvc-post-grid is display:grid with no
   column template, so without this block each card spans the row. Style by
   .mvc-archive-grid (not the component class) so the rules apply to every CPT
   archive (.mvc-project-grid is just informational).

   The card image area uses .mvc-post-card__thumb-link/__thumb (the actual class
   names the project-card template emits) — the older utilities.css rules
   targeted .__image and never applied. Give it a fixed aspect ratio so cards
   align in a clean row even when source photos vary in proportion. */

.mvc-archive-grid-section .mvc-container {
	/* Centered, comfortably narrower than full-bleed so a single result
	   doesn't stretch corner to corner on wide screens. */
	max-width: 1200px;
	margin-inline: auto;
}

.mvc-archive-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	/* Centered horizontally so 1- or 2-result rows align under the filter bar
	   instead of left-hugging a 3-col track. */
	justify-content: center;
}

@media (max-width: 1023px) {
	.mvc-archive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
}

@media (max-width: 639px) {
	.mvc-archive-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* Cards inside the archive grid — fixed image aspect + button-style CTA pinned
   to the bottom. Scoped under .mvc-archive-grid so we don't disturb cards used
   elsewhere on the site. */

.mvc-archive-grid .mvc-post-card {
	height: 100%;
}

.mvc-archive-grid .mvc-post-card__thumb-link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-muted, #f1f5f9);
}

.mvc-archive-grid .mvc-post-card__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Location photos have the city name burned into the lower-left corner.
	   Centering the 4:3 crop (the default) clips that text on the left edge —
	   bias the crop window left so the full label stays in frame. */
	object-position: left center;
	transition: transform var(--duration-slow, 400ms) var(--ease-default, ease);
}

.mvc-archive-grid .mvc-post-card:hover .mvc-post-card__thumb {
	transform: scale(1.04);
}

/* Button-style CTA pinned to the bottom of each card. The card body is already
   flex-column, so margin-top:auto pushes the CTA down regardless of excerpt
   length, keeping the buttons aligned across cards in a row. */
.mvc-archive-grid .mvc-post-card__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--card-radius, 0.5rem);
	background: var(--color-primary);
	color: var(--color-on-primary, #fff);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	transition: background var(--duration-fast, 150ms) ease,
	            transform  var(--duration-fast, 150ms) ease;
}

.mvc-archive-grid .mvc-post-card__more:hover {
	background: var(--color-primary-dark, var(--color-primary));
	transform: translateX(2px);
	color: var(--color-on-primary, #fff);
}

/* Tighten the card body spacing so the title sits closer to the photo and the
   excerpt has comfortable breathing room above the CTA. */
.mvc-archive-grid .mvc-post-card__body {
	gap: var(--space-3);
	padding: var(--space-5);
}

.mvc-archive-grid .mvc-post-card__body > * {
	margin: 0;
}

.mvc-archive-grid .mvc-post-card__excerpt {
	margin-bottom: var(--space-2);
}

/* ── Shared feed "View All" button wrapper ────────────────────────────────────
   .mvc-blog-feed__view-all is the wrapper class around the "View All …" button
   at the bottom of blog-feed, project-feed, property-feed, and review-block.
   The rule WAS only in blog-feed/blog-feed.css, but those component CSS files
   only enqueue when their OWN component renders — so project-feed alone (which
   reuses the class) had no spacing and the button hugged the cards. Moved here
   so the rule loads with the always-enqueued layout5 sheet regardless of which
   feed component triggered the render. */
.mvc-blog-feed__view-all {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-10);
}

/* ── Grouped-by-CPT shared-taxonomy archive (taxonomy.php) ────────────────────
   Drives the rebuilt /services/{term}/, /location-*/{term}/ pages. Hero reuses
   the .mvc-archive-hero styling (term name as H1, breadcrumb, optional desc,
   total count); each CPT section gets a labelled heading + the existing
   .mvc-archive-grid card grid for everything except FAQs (which render as a
   vertical accordion list). An optional "View all {plural} →" overflow link
   sits at the section bottom when the cap (12) is exceeded. Final CTA is a
   simple inline block (not the full cta-block component) so the template stays
   self-contained. */

.mvc-tax-grouped__hero {
	text-align: center;
}

.mvc-tax-grouped__count {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Each per-CPT section. Reduce default mvc-section padding a bit so adjacent
   sections sit closer together without the page feeling repetitive. */
.mvc-tax-grouped__section {
	padding-block: var(--space-12);
}

.mvc-tax-grouped__section + .mvc-tax-grouped__section {
	border-block-start: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
}

.mvc-tax-grouped__section-heading {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-block: 0 var(--space-8);
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
}

.mvc-tax-grouped__section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full, 999px);
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.08));
	color: var(--color-primary, #1e40af);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
}

/* "View all {plural} →" overflow link under a section when results were capped. */
.mvc-tax-grouped__overflow {
	margin-block: var(--space-8) 0;
	text-align: right;
}

.mvc-tax-grouped__overflow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-primary);
	text-decoration: none;
	transition: gap var(--duration-fast, 150ms) ease;
}

.mvc-tax-grouped__overflow-link:hover,
.mvc-tax-grouped__overflow-link:focus-visible {
	gap: var(--space-2);
	color: var(--color-primary-dark, var(--color-primary));
}

/* Final CTA — inline, centred. Uses --color-primary as a subtle band; not the
   full cta-block component, so it sits flush to the footer like the projects
   archive's CTA via the matching :has() rule below. */
.mvc-tax-grouped__final-cta {
	padding-block: var(--space-16);
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.06));
	text-align: center;
}

.mvc-tax-grouped__cta-inner {
	max-width: 60ch;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.mvc-tax-grouped__cta-headline {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
}

.mvc-tax-grouped__cta-subtext {
	margin: 0;
	color: var(--color-text-muted);
}

/* Footer-flush exception (mirrors the .mvc-cta-block rule above for the projects
   archive) — when the tax-grouped main ends in the simple inline CTA, zero the
   bottom margin so the subtle band flows into the footer. */
.mvc-main--tax-grouped {
	margin-block-end: var(--space-16);
}

.mvc-main--tax-grouped:has(> .mvc-tax-grouped__final-cta:last-child) {
	margin-block-end: 0;
}

@media (max-width: 639px) {
	.mvc-tax-grouped__section-heading {
		font-size: var(--text-xl);
	}
	.mvc-tax-grouped__overflow {
		text-align: center;
	}
}

/* ── FAQ card (template-parts/cpt/faq-card.php) ───────────────────────────────
   FAQ posts have no featured image, so in a grid alongside project/service
   cards the card would otherwise look short and lopsided. Give it a token-
   tinted top accent strip + a comfortable min-height so it sits visually
   alongside image-bearing cards in the .mvc-archive-grid. All other base card
   styling (background, padding, hover, button-style CTA pinned to bottom) is
   inherited from .mvc-post-card + the .mvc-archive-grid .mvc-post-card rules
   added earlier. */

.mvc-faq-card {
	position: relative;
	min-height: 18rem;
}

.mvc-faq-card::before {
	content: "";
	display: block;
	height: var(--space-2);
	background: linear-gradient(
		90deg,
		var(--color-primary, #1e40af) 0%,
		var(--color-primary-light, var(--color-primary, #1e40af)) 100%
	);
}

/* Question heading sits closer to the top accent for clean stacking, then a
   bit of breathing room before the answer. The base .mvc-post-card__title
   styling supplies the font + weight. */
.mvc-faq-card .mvc-faq-card__question {
	margin-block-start: 0;
}

/* Clamp the short_answer to 4 lines max so cards line up nicely in a row;
   "Read more →" picks up the rest on the FAQ single. */
.mvc-faq-card .mvc-faq-card__answer {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	line-clamp: 4;
	overflow: hidden;
	color: var(--color-text-muted);
}

/* The base p { margin } rule can creep in when the answer is HTML — strip the
   inner paragraph margin so the clamp count is honest. */
.mvc-faq-card .mvc-faq-card__answer > div > :first-child {
	margin-block-start: 0;
}

.mvc-faq-card .mvc-faq-card__answer > div > :last-child {
	margin-block-end: 0;
}

/* ── Grouped-by-category FAQ archive listing (faq_grouped section) ────────────
   The FAQ archive's primary listing block. Renders every published FAQ on one
   URL, sectioned by faq_category, with an optional anchor-list at the top.
   Pairs with the faq-block component's accordion CSS/JS (enqueued by the
   renderer) so each item's open/close behaviour matches the rest of the site. */

.mvc-archive-faq-grouped__header {
	max-width: 72ch;
	margin-inline: auto;
	margin-block-end: var(--space-10);
	text-align: center;
}

.mvc-archive-faq-grouped__title {
	margin-block: 0 var(--space-3);
}

.mvc-archive-faq-grouped__intro {
	margin: 0;
	color: var(--color-text-muted);
}

/* Anchor list — horizontal pill row, wraps on small screens. */
.mvc-archive-faq-grouped__toc {
	margin-block-end: var(--space-10);
}

.mvc-archive-faq-grouped__toc-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-archive-faq-grouped__toc-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full, 999px);
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.08));
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	transition: background var(--duration-fast, 150ms) ease,
	            color      var(--duration-fast, 150ms) ease;
}

.mvc-archive-faq-grouped__toc-link:hover,
.mvc-archive-faq-grouped__toc-link:focus-visible {
	background: var(--color-primary);
	color: var(--color-on-primary, #fff);
}

.mvc-archive-faq-grouped__toc-count {
	font-weight: var(--font-weight-medium);
	opacity: 0.85;
}

/* Each category group */
.mvc-archive-faq-grouped__group {
	max-width: 80ch;
	margin-inline: auto;
	padding-block: var(--space-10);
	/* Pad the anchor-target so a jump-link doesn't tuck the heading under the
	   sticky header. Safe to leave on non-sticky themes. */
	scroll-margin-top: var(--space-16);
}

.mvc-archive-faq-grouped__group + .mvc-archive-faq-grouped__group {
	border-block-start: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
}

.mvc-archive-faq-grouped__group-title {
	margin-block: 0 var(--space-4);
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
}

.mvc-archive-faq-grouped__group-desc {
	margin-block: 0 var(--space-6);
	color: var(--color-text-muted);
}

.mvc-archive-faq-grouped__group-desc > :first-child { margin-block-start: 0; }
.mvc-archive-faq-grouped__group-desc > :last-child  { margin-block-end:   0; }

/* The accordion list sits inside .mvc-faq-list — base spacing matches the
   faq-block component so visuals don't drift between page and archive contexts. */
.mvc-archive-faq-grouped__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* ── Archive-faq main: footer breathing room (mirrors archive-project) ──────── */
.mvc-main--archive-faq {
	margin-block-end: var(--space-16);
}

.mvc-main--archive-faq:has(> .mvc-cta-block:last-child) {
	margin-block-end: 0;
}

@media (max-width: 639px) {
	.mvc-archive-faq-grouped__group-title {
		font-size: var(--text-xl);
	}
}

/* ── FAQ Category Cards (faq_category_cards section) ──────────────────────────
   Navigation grid of faq_category terms. Placed above the faq_grouped list
   so visitors can self-select a topic. Taps the site's card token system. */

.mvc-archive-faq-cat-cards__header {
	max-width: 72ch;
	margin-inline: auto;
	margin-block-end: var(--space-10);
	text-align: center;
}

.mvc-archive-faq-cat-cards__title {
	margin-block: 0 var(--space-3);
}

.mvc-archive-faq-cat-cards__intro {
	margin: 0;
	color: var(--color-text-muted);
}

.mvc-archive-faq-cat-cards__grid {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-archive-faq-cat-cards__grid--2col { grid-template-columns: repeat(2, 1fr); }
.mvc-archive-faq-cat-cards__grid--4col { grid-template-columns: repeat(4, 1fr); }

/* Each <li> is a flex container so .mvc-faq-cat-card stretches to full cell height */
.mvc-archive-faq-cat-cards__item {
	display: flex;
}

.mvc-faq-cat-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	gap: var(--space-2);
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-lg, 0.75rem);
	border: 1px solid var(--color-border, rgba(15, 23, 42, 0.1));
	background: var(--color-surface, #fff);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--duration-fast, 150ms) ease,
	            border-color var(--duration-fast, 150ms) ease,
	            transform var(--duration-fast, 150ms) ease;
}

/* default color hover (no data-card-color attr, or explicitly "default") */
.mvc-archive-faq-cat-cards:not([data-card-color]) .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards:not([data-card-color]) .mvc-faq-cat-card:focus-visible,
.mvc-archive-faq-cat-cards[data-card-color="default"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-color="default"] .mvc-faq-cat-card:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.mvc-faq-cat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-full, 999px);
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.08));
	color: var(--color-primary);
	font-size: 1.375rem;
	flex-shrink: 0;
}

.mvc-faq-cat-card__name {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
	line-height: var(--leading-tight, 1.25);
}

.mvc-faq-cat-card__desc {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed, 1.625);
}

.mvc-faq-cat-card__desc > * { margin: 0; }

.mvc-faq-cat-card__count {
	font-size: var(--text-xs, 0.75rem);
	color: var(--color-text-muted);
	font-weight: var(--font-weight-medium);
}

.mvc-faq-cat-card__cta {
	margin-block-start: auto;
	padding-block-start: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 1023px) {
	.mvc-archive-faq-cat-cards__grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
	.mvc-archive-faq-cat-cards__grid--2col,
	.mvc-archive-faq-cat-cards__grid--4col { grid-template-columns: 1fr; }
}

/* ── Content alignment ─────────────────────────────────────────────────────── */

.mvc-archive-faq-cat-cards[data-align="center"] .mvc-archive-faq-cat-cards__header { text-align: center; }

.mvc-archive-faq-cat-cards[data-align="center"] .mvc-faq-cat-card {
	align-items: center;
	text-align: center;
}

/* Icon circle stays centred; CTA arrow visually fits centred text */
.mvc-archive-faq-cat-cards[data-align="center"] .mvc-faq-cat-card__cta { text-align: center; }

/* ── Card color ────────────────────────────────────────────────────────────── */

/* tinted: subtle primary wash — pin text colors so they stay readable on any section bg */
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card {
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.06));
	border-color: rgba(30, 64, 175, 0.2);
}
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card__name  { color: var(--color-heading-dark,  #0f172a); }
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card__desc,
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card__count { color: var(--color-text-dark,    #334155); }
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card__cta   { color: var(--color-primary); }
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-color="tinted"] .mvc-faq-cat-card:focus-visible {
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.10));
	border-color: var(--color-primary);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* primary: brand fill with contrasting text */
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card {
	background: var(--color-primary);
	border-color: color-mix(in srgb, var(--color-primary) 60%, #000);
	color: var(--color-white, #fff);
}
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card__name,
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card__desc,
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card__count,
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card__cta {
	color: var(--color-white, #fff);
}
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card__icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--color-white, #fff);
}
/* keep a visible border at rest (slightly lighter than fill) and brighten on hover */
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-color="primary"] .mvc-faq-cat-card:focus-visible {
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
	filter: brightness(1.08);
}

/* dark: lifted dark card — #1e293b (slate-800) reads above near-black section bgs */
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card {
	background: #1e293b;
	border: 1px solid var(--color-accent, var(--color-primary)) !important;
	color: var(--color-white, #fff);
}
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card__name  { color: var(--color-white, #fff); }
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card__desc,
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card__count { color: rgba(255, 255, 255, 0.65); }
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card__cta   { color: var(--color-accent, var(--color-primary)); }
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card__icon {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-white, #fff);
}
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-color="dark"] .mvc-faq-cat-card:focus-visible {
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

/* ── Card design ───────────────────────────────────────────────────────────── */

/* flat: no border, no shadow, no hover lift — just background */
.mvc-archive-faq-cat-cards[data-card-design="flat"] .mvc-faq-cat-card {
	border: none;
	box-shadow: none;
}
.mvc-archive-faq-cat-cards[data-card-design="flat"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-design="flat"] .mvc-faq-cat-card:focus-visible {
	border: none;
	box-shadow: none;
	transform: none;
	opacity: 0.85;
}

/* outlined-hover: invisible border at rest, primary border on hover */
.mvc-archive-faq-cat-cards[data-card-design="outlined-hover"] .mvc-faq-cat-card {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.mvc-archive-faq-cat-cards[data-card-design="outlined-hover"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-design="outlined-hover"] .mvc-faq-cat-card:focus-visible {
	background: var(--color-surface, #fff);
	border-color: var(--color-primary);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* elevated: drop shadow, no visible border */
.mvc-archive-faq-cat-cards[data-card-design="elevated"] .mvc-faq-cat-card {
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.mvc-archive-faq-cat-cards[data-card-design="elevated"] .mvc-faq-cat-card:hover,
.mvc-archive-faq-cat-cards[data-card-design="elevated"] .mvc-faq-cat-card:focus-visible {
	border-color: transparent;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── FAQ GEO Blocks (faq_geo_blocks section) ───────────────────────────────────
   One card per city / municipality. Each card has an optional photo on the
   left and a mini FAQ accordion on the right. On small screens stacks to one
   column. */

.mvc-archive-faq-geo__header {
	max-width: 72ch;
	margin-inline: auto;
	margin-block-end: var(--space-10);
	text-align: center;
}

.mvc-archive-faq-geo__title {
	margin-block: 0 var(--space-3);
}

.mvc-archive-faq-geo__intro {
	margin: 0;
	color: var(--color-text-muted);
}

.mvc-archive-faq-geo__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

.mvc-archive-faq-geo__block {
	display: grid;
	grid-template-rows: auto 1fr;
	/* height: 100% so grid stretches all cards in a row to the same height */
	height: 100%;
	border-radius: var(--radius-lg, 0.75rem);
	border: 1px solid var(--color-border, rgba(15, 23, 42, 0.1));
	overflow: hidden;
	background: var(--color-surface, #fff);
}

.mvc-archive-faq-geo__img-wrap {
	aspect-ratio: 16 / 7;
	overflow: hidden;
}

.mvc-archive-faq-geo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mvc-archive-faq-geo__content {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-archive-faq-geo__city {
	margin: 0;
	font-size: var(--text-xl, 1.25rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
}

.mvc-archive-faq-geo__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.mvc-archive-faq-geo__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.mvc-archive-faq-geo__view-all:hover,
.mvc-archive-faq-geo__view-all:focus-visible {
	color: var(--color-primary-dark, var(--color-primary));
	text-decoration-thickness: 2px;
}

@media (max-width: 639px) {
	.mvc-archive-faq-geo__grid {
		grid-template-columns: 1fr;
	}
}