/**
 * Vantage design components
 *
 * Reusable pieces for pages built from 2026-11 onward. Pair with
 * design-tokens.css, which holds every value these rules consume.
 *
 * ⚠️ READ THIS BEFORE ADDING A COMPONENT: THE LEGACY THEME BLEEDS IN.
 *
 * `style.css` styles bare ELEMENTS globally, so a component made of ordinary
 * HTML inherits rules it never asked for. These were found by diffing the dev
 * render against the mockup on 2026-11-11:
 *
 *   h1,h2,h3,h4 { font-weight: 300; margin-bottom: 20px }  <- the big one
 *       Every heading on the site is forced to LIGHT. The mockup's H1 is 800
 *       and its H2 is 700, so every heading rendered thinner than designed, and
 *       the forced 20px margin broke the spacing scale. Setting font-family and
 *       colour without weight, as the first pass did, inherits 300 silently.
 *
 *   a { display: inline-block; color: #318174 }  and  a:hover { color: #111 }
 *       `inline-block` changes how links behave inside flex and grid children,
 *       and the hover colour overrides any component's own.
 *
 *   img { margin-bottom: 15px }
 *       Adds a gap under every photo in a card, strip or avatar.
 *
 *   .button { text-transform: uppercase; font-size: 90%; border-radius: 5px }
 *       The legacy button. `.v-btn` is a separate class so there is no clash,
 *       but this is why the new one is not called `.button`.
 *
 * The RESET block below neutralises those four inside `.v-` components only. It
 * does not touch legacy pages. If a new component renders subtly wrong, check
 * this list first: it is almost always one of these.
 *
 * Collisions avoided by the `v-` prefix: Bootstrap owns .card .btn .container
 * .row, and style.css owns .button.
 */

/* ========================================================== legacy reset */

.v-sec h1, .v-sec h2, .v-sec h3, .v-sec h4,
.v-card h1, .v-card h2, .v-card h3, .v-card h4,
.v-band h1, .v-band h2, .v-band h3, .v-band h4 {
	margin: 0;
	font-family: var(--v-font-head);
	color: var(--v-dark);
	/* Weight is set per heading class below. Declaring it here too would make
	 * the component classes fight their own reset. */
}

.v-sec img, .v-card img, .v-band img {
	margin-bottom: 0;
}

.v-sec a, .v-card a, .v-band a {
	display: inline;
	transition: color 0.15s ease;
}

.v-sec a:hover, .v-card a:hover, .v-band a:hover {
	color: var(--v-teal-text-hover);
}

.v-sec :focus-visible,
.v-card :focus-visible,
.v-band :focus-visible {
	outline: var(--v-focus);
	outline-offset: var(--v-focus-offset);
	border-radius: var(--v-radius-sm);
}

/* ============================================================== layout */

.v-wrap {
	max-width: var(--v-wrap);
	margin: 0 auto;
	padding: 0 var(--v-wrap-pad);
}

.v-wrap--narrow {
	max-width: var(--v-wrap-narrow);
}

.v-sec {
	padding: var(--v-section-y) 0;
	font-family: var(--v-font-body);
	color: var(--v-ink);
}

.v-sec--page   { background: var(--v-page); }
.v-sec--white  { background: var(--v-surface); }
.v-sec--teal   { background: var(--v-surface-teal); }

/* Two columns that become one. The mockup's `.two`. */
.v-split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-9);
}

.v-split > * {
	flex: 1 1 360px;
	min-width: 0;
}

/* Three equal columns that become one. The mockup's `.grid3`. */
.v-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--v-space-5);
}

@media (max-width: 700px) {
	.v-grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ type */

.v-h1 {
	font-family: var(--v-font-head);
	font-weight: var(--v-weight-h1);
	font-size: var(--v-h1);
	line-height: var(--v-line-tight);
	color: var(--v-dark);
	margin: 0;
}

.v-h2 {
	font-family: var(--v-font-head);
	font-weight: var(--v-weight-h2);
	font-size: var(--v-h2);
	line-height: var(--v-line-head);
	color: var(--v-dark);
	margin: 0;
}

.v-h3 {
	font-family: var(--v-font-head);
	font-weight: var(--v-weight-h2);
	font-size: var(--v-h3);
	line-height: var(--v-line-head);
	color: var(--v-dark);
	margin: 0;
}

/*
 * ⚠️ Scoped to .v-band ON PURPOSE, and the specificity is the whole point.
 * The legacy reset above sets `.v-band h2 { color: var(--v-dark) }`, which is
 * (0,1,1). A bare `.v-h2--light` is (0,1,0) and LOSES, so the closing CTA
 * heading rendered dark-on-dark and vanished. Caught on dev 2026-11-11. Keep
 * these selectors at or above the reset's specificity.
 */
.v-band .v-h1--light,
.v-band .v-h2--light,
.v-band .v-h3--light,
.v-band h2.v-h2--light,
.v-band h3.v-h3--light { color: var(--v-surface); }

.v-eyebrow {
	font-size: var(--v-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--v-teal-text);
	margin: 0;
}

.v-lead {
	font-size: var(--v-lead);
	line-height: var(--v-line-body);
	color: var(--v-ink);
	margin: 0;
	max-width: 66ch;
}

.v-byline {
	font-size: 14px;
	color: var(--v-muted);
	margin: 0;
}

.v-stack {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-4);
}

.v-stack--tight { gap: var(--v-space-2); }
.v-stack--loose { gap: var(--v-space-6); }

/* ============================================================= buttons */

.v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-2);
	min-height: var(--v-control-h);
	padding: 0 var(--v-space-6);
	border-radius: var(--v-radius);
	font-family: var(--v-font-head);
	font-weight: 700;
	font-size: var(--v-body);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/*
 * ⚠️ WHITE ON TEAL FAILS WCAG AA (about 1.9:1) AND IS DELIBERATE.
 * The live site's `.button` is white on #67c6b4 and the owner's instruction
 * (2026-11-11) is to match it for now. The sitewide contrast fix is logged as a
 * separate decision. Do not "fix" it here in isolation or the new pages will
 * stop matching every other button on the site.
 */
.v-btn--primary {
	background: var(--v-teal);
	color: var(--v-on-teal);
}

.v-sec .v-btn--primary:hover,
.v-sec .v-btn--primary:focus,
.v-band .v-btn--primary:hover,
.v-band .v-btn--primary:focus {
	background: var(--v-teal-hover);
	color: var(--v-on-teal);
}

.v-btn--secondary {
	border-color: var(--v-dark);
	color: var(--v-dark);
	background: transparent;
}

.v-sec .v-btn--secondary:hover,
.v-sec .v-btn--secondary:focus,
.v-band .v-btn--secondary:hover,
.v-band .v-btn--secondary:focus {
	background: var(--v-dark);
	color: var(--v-surface);
}

.v-btn--outline {
	border-color: var(--v-teal-text);
	color: var(--v-teal-text);
	background: transparent;
}

.v-sec .v-btn--outline:hover,
.v-sec .v-btn--outline:focus {
	background: var(--v-teal-text);
	color: var(--v-surface);
}

.v-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-3);
}

/* ================================================================ card */

.v-card {
	background: var(--v-surface);
	border: 1px solid var(--v-border);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-card);
}

.v-card--pad { padding: var(--v-space-6); }

/*
 * A card split into equal columns with hairline dividers, which become stacked
 * rows with top dividers on small screens. The mockup's `.facts3`.
 */
.v-card--cols {
	display: grid;
	grid-template-columns: repeat(var(--v-cols, 3), minmax(0, 1fr));
	overflow: hidden;
}

.v-card--cols > * + * { border-left: 1px solid var(--v-rule); }

@media (max-width: 860px) {
	.v-card--cols { grid-template-columns: minmax(0, 1fr); }
	.v-card--cols > * + * { border-left: 0; border-top: 1px solid var(--v-rule); }
}

/* ================================================================= tag */

.v-tag {
	display: inline-flex;
	align-items: center;
	font-size: var(--v-tiny);
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--v-radius-pill);
	background: var(--v-surface-teal);
	color: #1e5b52;
	text-decoration: none;
}

.v-tag--neutral {
	background: var(--v-surface-alt);
	color: var(--v-ink);
}

/* A tag that is a link gets a real touch target without growing the pill. */
.v-sec a.v-tag {
	min-height: var(--v-tap);
	padding-top: 0;
	padding-bottom: 0;
}

.v-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-2);
	margin: 0;
}

/* ========================================================== stats band */

.v-band {
	background: var(--v-dark);
	color: var(--v-surface);
	font-family: var(--v-font-body);
}

.v-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--v-space-8);
	padding: var(--v-space-10) 0;
}

.v-stat strong {
	display: block;
	font-family: var(--v-font-head);
	font-weight: var(--v-weight-h1);
	font-size: clamp(32px, 3.4vw, 44px);
	line-height: 1.05;
	color: var(--v-teal);
}

.v-stat span {
	display: block;
	margin-top: var(--v-space-2);
	font-size: var(--v-small);
	line-height: 1.4;
	color: #d7dee2;
}

/* ========================================================= testimonial */

.v-quote { margin: 0; }

.v-quote__stars {
	display: flex;
	gap: 2px;
	color: #f0a92e;
	margin-bottom: var(--v-space-3);
	font-size: 18px;
	line-height: 1;
}

.v-quote blockquote {
	margin: 0;
	padding: 0 0 0 var(--v-space-5);
	border-left: 4px solid var(--v-teal);
	font-size: var(--v-lead);
	line-height: var(--v-line-body);
	color: var(--v-dark);
}

.v-quote figcaption {
	margin-top: var(--v-space-4);
	font-size: var(--v-small);
	color: var(--v-muted);
}

.v-quote figcaption strong { color: var(--v-dark); }
.v-quote figcaption span { display: block; }

/* ====================================================== numbered steps */

.v-steps {
	counter-reset: v-step;
	list-style: none;
	margin: var(--v-space-4) 0 0;
	padding: 0;
}

.v-steps li {
	position: relative;
	counter-increment: v-step;
	padding-left: 40px;
	margin-bottom: var(--v-space-4);
	font-size: var(--v-small);
	line-height: 1.5;
}

.v-steps li::before {
	content: counter(v-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--v-surface-teal);
	color: var(--v-teal-text);
	font-family: var(--v-font-head);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.v-steps li strong { color: var(--v-dark); }

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

.v-faq {
	border: 1px solid var(--v-border);
	border-radius: var(--v-radius);
	background: var(--v-surface);
	padding: var(--v-space-4) var(--v-space-5);
	margin-top: var(--v-space-3);
}

.v-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--v-space-4);
	min-height: var(--v-tap);
}

.v-faq summary::-webkit-details-marker { display: none; }

.v-faq summary::after {
	content: '+';
	font-family: var(--v-font-head);
	font-size: 22px;
	line-height: 1;
	color: var(--v-dark);
	flex: none;
}

.v-faq[open] summary::after { content: '\2013'; }

.v-sec .v-faq h3 {
	font-family: var(--v-font-head);
	font-weight: var(--v-weight-h2);
	font-size: 17px;
	line-height: 1.4;
	margin: 0;
}

.v-faq p {
	margin: var(--v-space-3) 0 0;
	font-size: var(--v-body);
	line-height: var(--v-line-body);
}

/* ========================================================== Kyle block */

/*
 * Its own surface on purpose. Sitting on the same background as the FAQ list
 * above it, the block read as one more FAQ row rather than a person to contact.
 */
.v-person {
	display: flex;
	gap: var(--v-space-7);
	align-items: flex-start;
	background: var(--v-surface);
	border: 1px solid var(--v-border);
	border-radius: var(--v-radius-lg);
	padding: var(--v-space-7);
	box-shadow: var(--v-shadow-card);
}

.v-person__photo {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--v-surface-alt);
}

.v-person__body { min-width: 0; }

.v-person p {
	margin: var(--v-space-3) 0 0;
	font-size: var(--v-body);
	line-height: var(--v-line-body);
}

.v-person__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-5);
	margin-top: var(--v-space-4);
}

.v-person__contact a {
	color: var(--v-teal-text);
	font-weight: 700;
	min-height: var(--v-tap);
	display: inline-flex;
	align-items: center;
}

@media (max-width: 700px) {
	.v-person {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--v-space-6);
	}
	.v-person__contact { justify-content: center; }
}

/* ===================================================== closing CTA band */

.v-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-6);
	align-items: center;
	justify-content: space-between;
	padding: var(--v-space-9) 0;
}

.v-cta__sub {
	margin: var(--v-space-2) 0 0;
	color: #d7dee2;
	font-size: var(--v-lead);
}

/* ========================================================== breadcrumb */

.v-crumbs {
	font-size: 14px;
	color: var(--v-muted);
	padding: var(--v-space-5) 0 0;
	font-family: var(--v-font-body);
}

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

.v-crumbs a {
	color: var(--v-muted);
	display: inline;
	text-decoration: none;
}

.v-crumbs a:hover { color: var(--v-teal-text); }

.v-crumbs li + li::before {
	content: '/';
	margin-right: var(--v-space-2);
	color: var(--v-border);
}

/* =========================================================== link list */

.v-links {
	list-style: none;
	margin: var(--v-space-3) 0 0;
	padding: 0;
}

.v-links li { border-bottom: 1px solid var(--v-rule); }

.v-links a {
	display: block;
	padding: var(--v-space-3) 0;
	min-height: var(--v-tap);
	color: var(--v-teal-text);
	font-weight: 700;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.v-btn, .v-sec a, .v-card a, .v-band a { transition: none; }
}