/* Shared component styles — var(--vv2-*) tokens only, never a literal hex/px color. */

.vv2-eyebrow {
	font-family: var(--vv2-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vv2-support);
	margin: 0 0 var(--vv2-space-sm);
}

.vv2-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--vv2-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
	border-radius: var(--vv2-radius-sm);
	line-height: 1.2;
	white-space: nowrap;
}

.vv2-btn--primary {
	background: var(--vv2-accent);
	color: #fff;
	padding: 0.85em 1.6em;
}

.vv2-btn--text {
	color: var(--vv2-accent);
	font-size: 1rem;
	padding: 0.85em 0;
	border-bottom: 1px solid transparent;
}

.vv2-btn--text:hover { border-bottom-color: currentColor; }

.vv2-btn--secondary {
	background: transparent;
	color: var(--vv2-ink);
	border: 1.5px solid var(--vv2-ink);
	padding: calc(0.85em - 1.5px) 1.6em;
	transition: background var(--vv2-duration-fast) var(--vv2-ease), color var(--vv2-duration-fast) var(--vv2-ease);
}
.vv2-btn--secondary:hover { background: var(--vv2-ink); color: var(--vv2-bg); }
.vv2-section--dark .vv2-btn--secondary { border-color: #fff; color: #fff; }
.vv2-section--dark .vv2-btn--secondary:hover { background: #fff; color: var(--vv2-ink); }

/* Hero */

.vv2-hero { padding-block: var(--vv2-space-xl) var(--vv2-space-lg); }

.vv2-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--vv2-space-lg);
	align-items: center;
}

.vv2-hero__content { max-width: 34rem; }

.vv2-hero__headline {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	letter-spacing: -0.01em;
	margin-bottom: var(--vv2-space-sm);
}

.vv2-hero__subtext {
	color: var(--vv2-ink-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 42ch;
	margin-bottom: var(--vv2-space-md);
}

.vv2-hero__ctas {
	display: flex;
	align-items: center;
	gap: var(--vv2-space-md);
	flex-wrap: wrap;
}

.vv2-hero__visual {
	aspect-ratio: 4 / 5;
	border-radius: var(--vv2-radius-md);
	overflow: hidden;
	transform: rotate(-1.1deg);
}

.vv2-hero__visual-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

@media (max-width: 781px) {
	.vv2-hero__grid { grid-template-columns: 1fr; }
	.vv2-hero__content { max-width: none; }
	.vv2-hero__visual { aspect-ratio: 16 / 9; transform: none; margin-top: var(--vv2-space-md); }
}
/* Section rhythm */
.vv2-section { padding-block: var(--vv2-space-xl); }
.vv2-section--tight { padding-block: var(--vv2-space-lg); }
.vv2-section--dark { background: var(--vv2-ink); color: #fff; }
.vv2-section--dark .vv2-eyebrow { color: var(--vv2-accent); }

.vv2-h2 {
	font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
	letter-spacing: -0.01em;
	margin-bottom: var(--vv2-space-sm);
	max-width: 22ch;
}

.vv2-lead {
	color: var(--vv2-ink-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 60ch;
	margin-bottom: var(--vv2-space-md);
}

.vv2-section--dark .vv2-lead { color: rgba(255,255,255,0.82); }

.vv2-link {
	color: var(--vv2-accent);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.vv2-link:hover { border-bottom-color: currentColor; }

/* Trust bar */
.vv2-trust {
	border-block: 1px solid var(--vv2-hairline);
	padding-block: var(--vv2-space-md);
}
.vv2-trust__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vv2-space-sm);
	text-align: center;
}
.vv2-trust__num {
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--vv2-ink);
}
.vv2-trust__label {
	font-size: 0.8125rem;
	color: var(--vv2-ink-muted);
	margin-top: 4px;
}
@media (max-width: 640px) {
	.vv2-trust__row { grid-template-columns: repeat(2, 1fr); gap: var(--vv2-space-md); }
}

/* Two-column teaser (methodology, services) */
.vv2-teaser {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--vv2-space-lg);
	align-items: start;
}
.vv2-teaser--reverse { grid-template-columns: 1.15fr 0.85fr; }
.vv2-teaser--reverse .vv2-teaser__aside { order: 2; }
@media (max-width: 781px) {
	.vv2-teaser, .vv2-teaser--reverse { grid-template-columns: 1fr; }
	.vv2-teaser--reverse .vv2-teaser__aside { order: 0; }
}

/* Services grid */
.vv2-services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vv2-space-sm);
}
@media (max-width: 640px) { .vv2-services { grid-template-columns: 1fr; } }
.vv2-service {
	border-top: 1px solid var(--vv2-hairline);
	padding-top: var(--vv2-space-sm);
}
.vv2-service__name {
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: 4px;
}
.vv2-service__desc {
	font-size: 0.9375rem;
	color: var(--vv2-ink-muted);
	line-height: 1.55;
}

/* Testimonial pull-quote */
.vv2-quote {
	font-family: var(--vv2-font-heading);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	line-height: 1.35;
	max-width: 42ch;
	margin-bottom: var(--vv2-space-md);
}
.vv2-quote::before { content: '\201C'; color: var(--vv2-accent); }
.vv2-quote::after { content: '\201D'; color: var(--vv2-accent); }
.vv2-quote-attr__name { font-weight: 600; }
.vv2-quote-attr__meta { color: var(--vv2-ink-muted); font-size: 0.875rem; }

/* Locations list */
.vv2-locations {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vv2-space-sm);
}
.vv2-location-chip {
	border: 1px solid var(--vv2-hairline);
	border-radius: var(--vv2-radius-sm);
	padding: 0.6em 1.1em;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--vv2-ink);
}
.vv2-location-chip:hover { border-color: var(--vv2-accent); color: var(--vv2-accent); }

/* FAQ teaser */
.vv2-faq-item { border-top: 1px solid var(--vv2-hairline); padding-block: var(--vv2-space-sm); }
.vv2-faq-q { font-weight: 600; margin-bottom: 6px; }
.vv2-faq-a { color: var(--vv2-ink-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 65ch; }

/* Closing CTA */
.vv2-cta { text-align: center; }
.vv2-cta .vv2-h2 { max-width: none; color: #fff; }
.vv2-cta__actions { display: flex; gap: var(--vv2-space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--vv2-space-md); }
/* Interior page header (non-split, for About/Methodology/Services/etc.) */
.vv2-page-header { padding-block: var(--vv2-space-xl) var(--vv2-space-lg); border-bottom: 1px solid var(--vv2-hairline); }
.vv2-page-header__title { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; max-width: 26ch; margin-bottom: var(--vv2-space-sm); }
.vv2-page-header .vv2-lead { margin-bottom: 0; }

/* Long-form article typography inside vv2-page */
.vv2-page section { padding-block: var(--vv2-space-lg); border-top: 1px solid var(--vv2-hairline); }
.vv2-page section:first-of-type { border-top: none; }
.vv2-page section > .vv2-container > p:not([class]) {
	color: var(--vv2-ink-muted);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 68ch;
	margin-bottom: var(--vv2-space-sm);
}
.vv2-page section > .vv2-container > ul:not([class]) {
	max-width: 68ch;
	color: var(--vv2-ink-muted);
	line-height: 1.7;
	padding-left: 1.2em;
}
.vv2-page section > .vv2-container > ul:not([class]) li { margin-bottom: 0.4em; }
.vv2-page-img {
	border-radius: var(--vv2-radius-md);
	max-width: 320px;
	width: 100%;
	height: auto;
	float: right;
	margin: 0 0 var(--vv2-space-md) var(--vv2-space-md);
}
@media (max-width: 640px) {
	.vv2-page-img { float: none; margin: 0 0 var(--vv2-space-md); max-width: 240px; }
}
/* Price list */
.vv2-price-list { max-width: 44rem; }
.vv2-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--vv2-space-sm);
	border-top: 1px solid var(--vv2-hairline);
	padding-block: var(--vv2-space-sm);
}
.vv2-price-row:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-price-row__label { font-size: 1.0625rem; }
.vv2-price-row__value {
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--vv2-accent);
	white-space: nowrap;
}
/* Site header */
.vv2-site-header {
	border-bottom: 1px solid var(--vv2-hairline);
	background: var(--vv2-bg);
	position: sticky;
	top: 0;
	z-index: 40;
	transition: background var(--vv2-duration-base) var(--vv2-ease), border-color var(--vv2-duration-base) var(--vv2-ease);
}

/* Transparent-over-hero: only opted into on templates with a dark/photo
hero directly under the header (currently just Home). Solidifies on scroll
via nav.js toggling .is-solid — CSS-only would flash on load before JS runs,
so the transparent state is itself opt-in per template, not the default. */
.vv2-site-header--transparent {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.vv2-site-header--transparent .vv2-logo,
.vv2-site-header--transparent .vv2-nav a:not(.vv2-btn) { color: #fff; }
.vv2-site-header--transparent .vv2-nav a[aria-current="page"] { color: #fff; }
.vv2-site-header--transparent.is-solid {
	position: sticky;
	background: var(--vv2-bg);
	border-bottom-color: var(--vv2-hairline);
}
.vv2-site-header--transparent.is-solid .vv2-logo,
.vv2-site-header--transparent.is-solid .vv2-nav a:not(.vv2-btn) { color: var(--vv2-ink-muted); }
.vv2-site-header--transparent.is-solid .vv2-nav a:hover,
.vv2-site-header--transparent.is-solid .vv2-nav a[aria-current="page"] { color: var(--vv2-ink); }
.vv2-site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.85rem;
}
.vv2-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--vv2-ink);
}
.vv2-logo__text {
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.vv2-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.vv2-nav a {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--vv2-ink-muted);
}
.vv2-nav a:hover, .vv2-nav a[aria-current="page"] { color: var(--vv2-ink); }
.vv2-btn--nav { font-size: 0.875rem; padding: 0.6em 1.2em; }
.vv2-nav-toggle { display: none; }

@media (max-width: 900px) {
	.vv2-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 36px;
		height: 36px;
		background: none;
		border: 1px solid var(--vv2-hairline);
		border-radius: var(--vv2-radius-sm);
		cursor: pointer;
		padding: 0;
	}
	.vv2-nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--vv2-ink); margin-inline: auto; }
	.vv2-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--vv2-bg);
		border-bottom: 1px solid var(--vv2-hairline);
		padding: var(--vv2-space-sm) var(--vv2-space-sm) var(--vv2-space-md);
		display: none;
	}
	.vv2-nav.is-open { display: flex; }
	.vv2-nav a { padding: 0.7em 0; border-bottom: 1px solid var(--vv2-hairline); }
	.vv2-btn--nav { margin-top: var(--vv2-space-sm); justify-content: center; }
}

/* Site footer */
.vv2-site-footer {
	background: var(--vv2-ink);
	color: rgba(255,255,255,0.82);
	padding-block: var(--vv2-space-lg) var(--vv2-space-sm);
	margin-top: var(--vv2-space-xl);
}
.vv2-site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 0.85fr 1fr 1fr;
	gap: var(--vv2-space-md);
	padding-bottom: var(--vv2-space-lg);
}
.vv2-site-footer .vv2-logo { color: #fff; }
.vv2-site-footer__tagline {
	font-size: 0.875rem;
	line-height: 1.55;
	max-width: 28ch;
	margin-top: var(--vv2-space-sm);
	color: rgba(255,255,255,0.55);
}
.vv2-site-footer__heading {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.55);
	margin: 0 0 0.75rem;
}
.vv2-site-footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.vv2-site-footer__col a, .vv2-site-footer__addr { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 0.9rem; }
.vv2-site-footer__col a:hover { color: #fff; }
.vv2-site-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vv2-space-sm);
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: var(--vv2-space-sm);
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.42);
}
.vv2-site-footer__bottom a { color: rgba(255,255,255,0.42); }
.vv2-site-footer__bottom a:hover { color: #fff; }

@media (max-width: 900px) {
	.vv2-site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.vv2-site-footer__grid { grid-template-columns: 1fr; }
}/* Design System Preview page — internal tool only */

.vv2-ds-block { padding-block: var(--vv2-space-lg); border-top: 1px solid var(--vv2-hairline); }
.vv2-ds-block:first-of-type { border-top: none; }

.vv2-ds-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vv2-space-sm); }
@media (max-width: 760px) { .vv2-ds-swatches { grid-template-columns: repeat(2, 1fr); } }
.vv2-ds-swatch__fill { height: 72px; border-radius: var(--vv2-radius-md); border: 1px solid var(--vv2-hairline); margin-bottom: 8px; }
.vv2-ds-swatch__name { font-family: var(--vv2-font-heading); font-weight: 600; font-size: 0.9rem; }
.vv2-ds-swatch__meta { font-size: 0.8125rem; color: var(--vv2-ink-muted); }

.vv2-ds-type-row { display: flex; align-items: baseline; gap: var(--vv2-space-md); padding-block: var(--vv2-space-xs); border-top: 1px solid var(--vv2-hairline); }
.vv2-ds-type-row:first-child { border-top: none; }
.vv2-ds-type-label { width: 80px; flex-shrink: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vv2-support); }

.vv2-ds-space-row { display: flex; align-items: center; gap: var(--vv2-space-sm); padding-block: 6px; }
.vv2-ds-space-row span { width: 100px; flex-shrink: 0; font-size: 0.8125rem; color: var(--vv2-ink-muted); }
.vv2-ds-space-bar { height: 10px; background: var(--vv2-accent); border-radius: 2px; }

.vv2-ds-row { display: flex; align-items: center; gap: var(--vv2-space-sm); flex-wrap: wrap; padding: var(--vv2-space-sm); }
.vv2-ds-row--dark { background: var(--vv2-ink); border-radius: var(--vv2-radius-md); margin-top: var(--vv2-space-sm); }

.vv2-ds-icons { display: flex; flex-wrap: wrap; gap: var(--vv2-space-md); }
.vv2-ds-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--vv2-ink); }
.vv2-ds-icon span { font-size: 0.75rem; color: var(--vv2-ink-muted); }
/* Nav dropdown — hover on desktop, keyboard-accessible via focus-within,
 tap-to-reveal on mobile (nested inside the existing collapsed nav). */
.vv2-nav-item--dropdown { position: relative; }
.vv2-nav-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--vv2-surface);
	border: 1px solid var(--vv2-hairline);
	border-radius: var(--vv2-radius-sm);
	box-shadow: var(--vv2-shadow-hover);
	padding: 0.5rem;
	flex-direction: column;
	z-index: 50;
}
.vv2-nav-item--dropdown:hover .vv2-nav-dropdown,
.vv2-nav-item--dropdown:focus-within .vv2-nav-dropdown {
	display: flex;
}
.vv2-nav-dropdown a {
	padding: 0.55em 0.7em;
	border-radius: var(--vv2-radius-sm);
	white-space: nowrap;
}
.vv2-nav-dropdown a:hover { background: var(--vv2-bg); color: var(--vv2-ink); }

@media (max-width: 900px) {
	.vv2-nav-dropdown {
		position: static;
		display: flex;
		border: none;
		box-shadow: none;
		padding: 0 0 0 var(--vv2-space-sm);
		margin-top: 0.25rem;
	}
	.vv2-nav-dropdown a { border-bottom: none; padding: 0.5em 0; color: var(--vv2-ink-muted); }
}
/* FAQ accordion — native <details>/<summary>, no JS, fully keyboard
 and screen-reader accessible by default. */
.vv2-accordion-item {
	border-top: 1px solid var(--vv2-hairline);
}
.vv2-accordion-item:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-accordion-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vv2-space-sm);
	padding-block: var(--vv2-space-sm);
	font-weight: 600;
}
.vv2-accordion-item summary::-webkit-details-marker { display: none; }
.vv2-accordion-item summary .vv2-icon {
	flex-shrink: 0;
	transition: transform var(--vv2-duration-fast) var(--vv2-ease);
	color: var(--vv2-accent);
}
.vv2-accordion-item[open] summary .vv2-icon { transform: rotate(45deg); }
.vv2-accordion-item__body {
	padding-bottom: var(--vv2-space-sm);
	color: var(--vv2-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 65ch;
}

/* Vastu-grid diagram section */
.vv2-diagram { display: flex; justify-content: center; }
.vv2-diagram svg { max-width: 100%; height: auto; }
/* Timeline (Approach) — distinct from the boxed card-grid: open, no
 borders around each item, a single connecting hairline instead. */
.vv2-timeline { display: flex; gap: var(--vv2-space-md); }
.vv2-timeline__step { flex: 1; border-top: 2px solid var(--vv2-hairline); padding-top: var(--vv2-space-sm); position: relative; }
.vv2-timeline__step::before {
	content: '';
	position: absolute;
	top: -2px; left: 0;
	width: 28px; height: 2px;
	background: var(--vv2-accent);
}
.vv2-timeline__num { font-family: var(--vv2-font-heading); color: var(--vv2-accent); font-size: 1.125rem; margin-bottom: 6px; }
.vv2-timeline__step h3 { font-size: var(--vv2-text-h4); margin-bottom: 4px; }
.vv2-timeline__step p { font-size: var(--vv2-text-small); color: var(--vv2-ink-muted); }

@media (max-width: 900px) {
	.vv2-timeline { flex-direction: column; gap: var(--vv2-space-md); }
	.vv2-timeline__step { border-top: none; border-left: 2px solid var(--vv2-hairline); padding-top: 0; padding-left: var(--vv2-space-sm); }
	.vv2-timeline__step::before { top: 0; left: -2px; width: 2px; height: 28px; }
}

/* Audience row — a tag-like row, lighter weight than a card grid. */
.vv2-audience-row { display: flex; flex-wrap: wrap; gap: var(--vv2-space-sm); }
.vv2-audience-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--vv2-hairline);
	border-radius: 100px;
	padding: 0.6em 1.1em 0.6em 0.8em;
	font-weight: 600;
	font-size: 0.9375rem;
}
.vv2-audience-tag .vv2-icon { color: var(--vv2-accent); }

/* Resource list — compact single-line rows, distinct from case/article cards. */
.vv2-resource-list { display: flex; flex-direction: column; }
.vv2-resource-row {
	display: flex;
	align-items: center;
	gap: var(--vv2-space-sm);
	border-top: 1px solid var(--vv2-hairline);
	padding-block: var(--vv2-space-sm);
	text-decoration: none;
	color: var(--vv2-ink);
}
.vv2-resource-list a:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-resource-row .vv2-icon { color: var(--vv2-accent); flex-shrink: 0; }
.vv2-resource-row__text h3 { font-size: 1.0625rem; margin-bottom: 2px; }
.vv2-resource-row__text p { font-size: 0.875rem; color: var(--vv2-ink-muted); margin: 0; }
.vv2-resource-row .vv2-btn--text { margin-left: auto; flex-shrink: 0; }
/* Breadcrumbs */
.vv2-breadcrumbs { padding-block: var(--vv2-space-sm); }
.vv2-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0; margin: 0; font-size: 0.8125rem; color: var(--vv2-support); }
.vv2-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.4em; color: var(--vv2-hairline); }
.vv2-breadcrumbs a { color: var(--vv2-support); text-decoration: none; }
.vv2-breadcrumbs a:hover { color: var(--vv2-ink); }
.vv2-breadcrumbs [aria-current="page"] { color: var(--vv2-ink-muted); }
/* Assessment / deliverables checklist — plain list, not a card grid. */
.vv2-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vv2-space-sm) var(--vv2-space-md); margin-top: var(--vv2-space-md); }
@media (max-width: 640px) { .vv2-checklist { grid-template-columns: 1fr; } }
.vv2-checklist__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.vv2-checklist__item .vv2-icon { color: var(--vv2-accent); flex-shrink: 0; margin-top: 2px; }
.vv2-checklist__item h3 { font-size: 1.0625rem; margin-bottom: 2px; }
.vv2-checklist__item p { font-size: 0.875rem; color: var(--vv2-ink-muted); margin: 0; }

/* Case study — full-width editorial split, distinct from the homepage's
 case-study cards (this page only ever shows one). */
.vv2-case-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--vv2-space-lg); align-items: start; }
@media (max-width: 900px) { .vv2-case-feature { grid-template-columns: 1fr; } }
.vv2-case-feature__media { aspect-ratio: 4/5; border-radius: var(--vv2-radius-md); }
.vv2-case-feature dl { margin: 0; }
.vv2-case-feature dt { font-family: var(--vv2-font-heading); font-weight: 600; font-size: 1rem; margin-top: var(--vv2-space-sm); }
.vv2-case-feature dt:first-child { margin-top: 0; }
.vv2-case-feature dd { margin: 0.3em 0 0; color: var(--vv2-ink-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Elegant empty state for a not-yet-available case study */
.vv2-case-placeholder {
	border: 1px dashed var(--vv2-hairline);
	border-radius: var(--vv2-radius-md);
	padding: var(--vv2-space-lg);
	text-align: center;
	color: var(--vv2-ink-muted);
}
.vv2-case-placeholder .vv2-icon { color: var(--vv2-support); margin: 0 auto var(--vv2-space-xs); }
/* Services Hub: category split section (reuses .vv2-teaser grid, adds a media pane) */
.vv2-category-media { aspect-ratio: 4/3; border-radius: var(--vv2-radius-md); }
.vv2-category-list { list-style: none; padding: 0; margin: var(--vv2-space-sm) 0; }
.vv2-category-list li { border-top: 1px solid var(--vv2-hairline); }
.vv2-category-list li:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-category-list a { display: block; padding: 0.65em 0; text-decoration: none; color: var(--vv2-ink); font-weight: 500; }
.vv2-category-list a:hover { color: var(--vv2-accent); }

/* Service directory — grouped by category, static (no JS filter needed for ~17 items) */
.vv2-directory-group { margin-bottom: var(--vv2-space-lg); }
.vv2-directory-group__heading { font-family: var(--vv2-font-heading); font-size: var(--vv2-text-h4); margin-bottom: var(--vv2-space-sm); }
/* Framework list — large editorial numbered sequence, visually distinct
 from the reused .vv2-timeline (no connecting line, bigger numerals,
 vertical-only, more whitespace). Used once per page, never both patterns
 doing the same job. */
.vv2-framework-list { max-width: var(--vv2-container-width-narrow); }
.vv2-framework-item {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--vv2-space-md);
	padding-block: var(--vv2-space-md);
	border-top: 1px solid var(--vv2-hairline);
}
.vv2-framework-item:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-framework-item__num {
	font-family: var(--vv2-font-heading);
	font-size: 2rem;
	font-weight: 600;
	color: var(--vv2-accent);
	line-height: 1;
}
.vv2-framework-item h3 { font-size: var(--vv2-text-h4); margin-bottom: 6px; }
.vv2-framework-item p { color: var(--vv2-ink-muted); font-size: 0.9375rem; max-width: 52ch; }
@media (max-width: 560px) {
	.vv2-framework-item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* NOT / INSTEAD comparison */
.vv2-compare { max-width: var(--vv2-container-width-narrow); }
.vv2-compare-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vv2-space-md);
	padding-block: var(--vv2-space-sm);
	border-top: 1px solid var(--vv2-hairline);
	align-items: baseline;
}
.vv2-compare-row:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-compare-row__not, .vv2-compare-row__instead { font-size: 0.9375rem; }
.vv2-compare-row__label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.vv2-compare-row__not { color: var(--vv2-ink-muted); }
.vv2-compare-row__not .vv2-compare-row__label { color: var(--vv2-support); }
.vv2-compare-row__instead { color: var(--vv2-ink); font-weight: 500; }
.vv2-compare-row__instead .vv2-compare-row__label { color: var(--vv2-accent); }
@media (max-width: 640px) {
	.vv2-compare-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Personal note — distinctive placeholder-ready pull-quote block */
.vv2-personal-note {
	border: 1px dashed var(--vv2-hairline);
	border-radius: var(--vv2-radius-md);
	padding: var(--vv2-space-lg);
	max-width: var(--vv2-container-width-narrow);
	margin-inline: auto;
	text-align: center;
}
.vv2-personal-note__text {
	font-family: var(--vv2-font-heading);
	font-size: var(--vv2-text-h3);
	font-style: italic;
	line-height: 1.35;
	color: var(--vv2-ink-muted);
}
.vv2-personal-note__attr { margin-top: var(--vv2-space-sm); font-size: 0.875rem; color: var(--vv2-support); }

/* Large pull quote */
.vv2-pull-quote {
	font-family: var(--vv2-font-heading);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	line-height: 1.3;
	max-width: 30ch;
}
/**
 * Case Study visual language — reads as project documentation, not a
 * testimonial card. One consistent label system used throughout.
 */

.vv2-cs-label {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vv2-accent);
	margin-bottom: 0.4em;
}

/* Demo content banner — impossible to miss, never mistaken for real data */
.vv2-cs-demo-banner {
	background: var(--vv2-ink);
	color: #fff;
	text-align: center;
	padding: 0.9em var(--vv2-space-sm);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.vv2-cs-demo-banner a { color: #fff; text-decoration: underline; }

/* Snapshot strip */
.vv2-cs-snapshot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vv2-space-lg) var(--vv2-space-md);
	border-block: 1px solid var(--vv2-hairline);
	padding-block: var(--vv2-space-sm);
}
.vv2-cs-snapshot__item { min-width: 8rem; }
.vv2-cs-snapshot__label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vv2-support); margin-bottom: 4px; }
.vv2-cs-snapshot__value { font-family: var(--vv2-font-heading); font-weight: 600; font-size: 1.0625rem; }

/* Observations list */
.vv2-cs-observations { max-width: var(--vv2-container-width-narrow); }
.vv2-cs-observation { border-top: 1px solid var(--vv2-hairline); padding-block: var(--vv2-space-sm); }
.vv2-cs-observation:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-cs-observation h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.vv2-cs-observation p { color: var(--vv2-ink-muted); font-size: 0.9375rem; }

/* Priority tiers */
.vv2-cs-priority-tier { margin-bottom: var(--vv2-space-md); }
.vv2-cs-priority-tier__heading {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	margin-bottom: var(--vv2-space-xs);
}
.vv2-cs-priority-tier__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vv2-accent); display: inline-block; }
.vv2-cs-priority-tier--medium .vv2-cs-priority-tier__dot { background: var(--vv2-support); }
.vv2-cs-priority-tier--optional .vv2-cs-priority-tier__dot { background: var(--vv2-hairline); border: 1px solid var(--vv2-support); }
.vv2-cs-priority-tier ul { margin: 0; padding-left: 1.3em; color: var(--vv2-ink-muted); font-size: 0.9375rem; }
.vv2-cs-priority-tier li { margin-bottom: 0.3em; }

/* Recommendation entries — report-style, not cards */
.vv2-cs-recommendation {
	border-top: 1px solid var(--vv2-hairline);
	padding-block: var(--vv2-space-md);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vv2-space-sm) var(--vv2-space-md);
}
.vv2-cs-recommendation:last-child { border-bottom: 1px solid var(--vv2-hairline); }
.vv2-cs-recommendation dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vv2-support); margin-bottom: 3px; }
.vv2-cs-recommendation dd { margin: 0; font-size: 0.9375rem; color: var(--vv2-ink); }
.vv2-cs-recommendation__priority {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2em 0.6em;
	border-radius: 100px;
	border: 1px solid var(--vv2-accent);
	color: var(--vv2-accent);
}
@media (max-width: 640px) { .vv2-cs-recommendation { grid-template-columns: 1fr; } }

/* Before / After — only rendered when genuine data exists */
.vv2-cs-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vv2-space-md); }
.vv2-cs-before-after__col { border-top: 2px solid var(--vv2-hairline); padding-top: var(--vv2-space-sm); }
.vv2-cs-before-after__col--after { border-top-color: var(--vv2-accent); }
@media (max-width: 640px) { .vv2-cs-before-after { grid-template-columns: 1fr; } }

/* Recommended vs Implemented status pill */
.vv2-cs-status {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2em 0.6em;
	border-radius: 100px;
}
.vv2-cs-status--implemented { background: var(--vv2-accent); color: #fff; }
.vv2-cs-status--recommended { border: 1px solid var(--vv2-hairline); color: var(--vv2-ink-muted); }

/* Key learnings */
.vv2-cs-learnings { counter-reset: cs-learning; list-style: none; padding: 0; max-width: var(--vv2-container-width-narrow); }
.vv2-cs-learnings li {
	counter-increment: cs-learning;
	position: relative;
	padding-left: 2.4em;
	margin-bottom: var(--vv2-space-sm);
	font-size: 1.0625rem;
}
.vv2-cs-learnings li::before {
	content: counter(cs-learning);
	position: absolute;
	left: 0;
	font-family: var(--vv2-font-heading);
	font-weight: 600;
	color: var(--vv2-accent);
}
/**
 * Knowledge Centre visual language.
 */

/* Article card */
.vv2-article-card { padding: 0; overflow: hidden; }
.vv2-article-card__media { aspect-ratio: 16/10; background: var(--vv2-hairline); }
.vv2-article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vv2-duration-base) var(--vv2-ease); }
.vv2-article-card:hover .vv2-article-card__media img { transform: scale(1.03); }
.vv2-article-card__body { padding: var(--vv2-space-sm); }
.vv2-article-card__cat { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vv2-accent); font-weight: 700; margin-bottom: 6px; display: block; }
.vv2-article-card h3 { font-size: var(--vv2-text-h4); margin-bottom: 6px; }
.vv2-article-card p { font-size: 0.9375rem; color: var(--vv2-ink-muted); margin-bottom: 8px; }
.vv2-article-card__meta { font-size: 0.8125rem; color: var(--vv2-support); }

/* Search */
.vv2-kc-search { display: flex; gap: 8px; max-width: 28rem; }
.vv2-kc-search input { flex: 1; }

/* Category quick-nav */
.vv2-kc-cats { display: flex; flex-wrap: wrap; gap: var(--vv2-space-xs); }
.vv2-kc-cat-chip {
	border: 1px solid var(--vv2-hairline);
	border-radius: 100px;
	padding: 0.5em 1em;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--vv2-ink-muted);
}
.vv2-kc-cat-chip:hover, .vv2-kc-cat-chip[aria-current="page"] { border-color: var(--vv2-accent); color: var(--vv2-accent); }

/* Article body — reading width, premium publication typography */
.vv2-article-body {
	max-width: 42rem;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
}
.vv2-article-body h2 { font-size: var(--vv2-text-h3); margin-top: var(--vv2-space-lg); margin-bottom: var(--vv2-space-xs); scroll-margin-top: 5rem; }
.vv2-article-body h3 { font-size: var(--vv2-text-h4); margin-top: var(--vv2-space-md); margin-bottom: var(--vv2-space-xs); scroll-margin-top: 5rem; }
.vv2-article-body p { max-width: none; margin-bottom: var(--vv2-space-sm); color: var(--vv2-ink); }
.vv2-article-body ul, .vv2-article-body ol { margin-bottom: var(--vv2-space-sm); padding-left: 1.3em; }
.vv2-article-body li { margin-bottom: 0.4em; }
.vv2-article-body img { border-radius: var(--vv2-radius-md); margin-block: var(--vv2-space-sm); }
.vv2-article-body table { width: 100%; border-collapse: collapse; margin-block: var(--vv2-space-sm); font-size: 0.9375rem; }
.vv2-article-body th, .vv2-article-body td { border: 1px solid var(--vv2-hairline); padding: 0.6em 0.8em; text-align: left; }
.vv2-article-body th { font-family: var(--vv2-font-heading); font-weight: 600; }

/* Table of Contents */
.vv2-toc { border: 1px solid var(--vv2-hairline); border-radius: var(--vv2-radius-md); padding: var(--vv2-space-sm); }
.vv2-toc summary { cursor: pointer; font-family: var(--vv2-font-heading); font-weight: 600; font-size: 0.9375rem; list-style: none; }
.vv2-toc summary::-webkit-details-marker { display: none; }
.vv2-toc__list { list-style: none; margin: var(--vv2-space-xs) 0 0; padding: 0; font-size: 0.875rem; }
.vv2-toc__list li { margin-bottom: 0.5em; }
.vv2-toc__list a { color: var(--vv2-ink-muted); text-decoration: none; }
.vv2-toc__list a:hover, .vv2-toc__list a.is-active { color: var(--vv2-accent); }
.vv2-toc__list .vv2-toc__h3 { padding-left: 1em; font-size: 0.8125rem; }
@media (min-width: 1000px) {
	.vv2-toc { position: sticky; top: 90px; }
}

/* Callout components — authoring blocks used inside article content */
.vv2-callout { border-left: 3px solid var(--vv2-hairline); background: var(--vv2-surface); border-radius: 0 var(--vv2-radius-sm) var(--vv2-radius-sm) 0; padding: var(--vv2-space-sm) var(--vv2-space-md); margin-block: var(--vv2-space-md); max-width: none; }
.vv2-callout__label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4em; }
.vv2-callout p:last-child { margin-bottom: 0; }
.vv2-callout--note { border-left-color: var(--vv2-support); }
.vv2-callout--note .vv2-callout__label { color: var(--vv2-support); }
.vv2-callout--principle { border-left-color: var(--vv2-gold); }
.vv2-callout--principle .vv2-callout__label { color: var(--vv2-gold); }
.vv2-callout--tip { border-left-color: var(--vv2-accent); }
.vv2-callout--tip .vv2-callout__label { color: var(--vv2-accent); }
.vv2-callout--important { border-left-color: var(--vv2-ink); background: var(--vv2-bg); }
.vv2-callout--important .vv2-callout__label { color: var(--vv2-ink); }
.vv2-callout--example { border-left-style: dashed; border-left-color: var(--vv2-hairline); }
.vv2-callout--example .vv2-callout__label { color: var(--vv2-support); }

/* Evidence / trust labels */
.vv2-evidence-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25em 0.7em;
	border-radius: 100px;
	border: 1px solid var(--vv2-hairline);
	color: var(--vv2-ink-muted);
	margin-bottom: var(--vv2-space-xs);
}
.vv2-evidence-label--traditional { border-color: var(--vv2-gold); color: var(--vv2-gold); }
.vv2-evidence-label--interpretive { border-color: var(--vv2-support); color: var(--vv2-support); }
.vv2-evidence-label--modern { border-color: var(--vv2-accent); color: var(--vv2-accent); }
.vv2-evidence-label--evidence { border-color: var(--vv2-ink); color: var(--vv2-ink); }

/* Author box */
.vv2-author-box { display: flex; align-items: center; gap: var(--vv2-space-sm); border-top: 1px solid var(--vv2-hairline); border-bottom: 1px solid var(--vv2-hairline); padding-block: var(--vv2-space-sm); max-width: 42rem; margin-inline: auto; }
.vv2-author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vv2-author-box__name { font-family: var(--vv2-font-heading); font-weight: 600; }
.vv2-author-box__title { font-size: 0.8125rem; color: var(--vv2-support); }

/* Demo banner (reuse case-study visual language) */
.vv2-kc-demo-banner { background: var(--vv2-ink); color: #fff; text-align: center; padding: 0.9em var(--vv2-space-sm); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* WhatsApp-first conversion system */

.vv2-wa-float { display: none; }

@media (max-width: 767px) {
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

	.vv2-wa-float {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		position: fixed;
		left: var(--vv2-space-sm);
		right: var(--vv2-space-sm);
		bottom: calc(var(--vv2-space-sm) + env(safe-area-inset-bottom, 0px));
		z-index: 40;
		background: var(--vv2-accent);
		color: #fff;
		font-family: var(--vv2-font-body);
		font-weight: 700;
		font-size: 0.95rem;
		padding: 0.85em 1em;
		border-radius: var(--vv2-radius-md);
		text-decoration: none;
		box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	}
	.vv2-wa-float:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

/* Slim mid-page WhatsApp prompt band */
.vv2-wa-band {
	border-top: 1px solid var(--vv2-hairline);
	border-bottom: 1px solid var(--vv2-hairline);
}
.vv2-wa-band__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vv2-space-sm);
	padding-block: var(--vv2-space-md);
}
.vv2-wa-band__text {
	font-family: var(--vv2-font-heading);
	font-size: 1.375rem;
	margin: 0;
}

/* Consultation Selector */
.vv2-consult__step { margin-top: var(--vv2-space-lg); }
.vv2-consult__step:first-child { margin-top: 0; }
.vv2-consult__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-top: var(--vv2-space-sm);
}
.vv2-consult__opt {
	font-family: var(--vv2-font-body);
	background: transparent;
	border: 1.5px solid var(--vv2-hairline);
	border-radius: var(--vv2-radius-sm);
	padding: 0.65em 1.2em;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--vv2-ink);
	cursor: pointer;
	transition: border-color var(--vv2-duration-fast) var(--vv2-ease), color var(--vv2-duration-fast) var(--vv2-ease), background var(--vv2-duration-fast) var(--vv2-ease);
}
.vv2-consult__opt:hover { border-color: var(--vv2-accent); color: var(--vv2-accent); }
.vv2-consult__opt[aria-pressed="true"] {
	background: var(--vv2-accent);
	border-color: var(--vv2-accent);
	color: #fff;
}
.vv2-consult__result {
	margin-top: var(--vv2-space-lg);
	padding-top: var(--vv2-space-lg);
	border-top: 1px solid var(--vv2-hairline);
}

/* 404 */
.vv2-404 { padding-block: var(--vv2-space-xl); }
.vv2-404__inner {
	text-align: center;
	max-width: 42ch;
	margin-inline: auto;
}
.vv2-404__inner .vv2-eyebrow { text-align: center; }
.vv2-404__title {
	font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-bottom: var(--vv2-space-sm);
}