/**
 * HVACB — About page (v3: modern, colourful, balanced).
 *
 * Loads only on the About page (hvacb_enqueue_about_style() in inc/enqueue.php)
 * and is scoped entirely under .hvacb-about. Uses the theme design tokens only;
 * no new global colours/fonts/breakpoints, and no other stylesheet, the header
 * or the footer is touched.
 */

.hvacb-about {
	--au-radius: 18px;
	--au-radius-sm: 12px;
	--au-shadow-sm: 0 10px 26px -18px rgba(28, 26, 46, 0.4);
	--au-shadow: 0 28px 64px -36px rgba(28, 26, 46, 0.42);
	--au-shadow-brand: 0 30px 66px -30px rgba(75, 59, 143, 0.55);
	--au-grad: linear-gradient(100deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--signal) 100%);
	--au-grad-btn: linear-gradient(92deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--signal-ink) 100%);
	--au-grad-deep: linear-gradient(125deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--accent-1) 42%, var(--wp--preset--color--signal-ink) 100%);
	--au-ink: var(--wp--preset--color--contrast);
	--au-muted: var(--wp--preset--color--accent-5);
	--au-line: var(--wp--preset--color--accent-6);
	--au-ok: #2e9e5b;

	--hvb-ico-chat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-4 3v-3H6a2 2 0 0 1-2-2Z'/></svg>");
}

.hvacb-ico--built   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h14V9.5'/><path d='M9.5 21v-6h5v6'/></svg>"); }
.hvacb-ico--first   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 20a8 8 0 0 1 16 0'/></svg>"); }
.hvacb-ico--clear   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8.4 12 2.4 2.4 4.8-5.2'/></svg>"); }
.hvacb-ico--connect { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='12' r='2.4'/><circle cx='18' cy='6' r='2.4'/><circle cx='18' cy='18' r='2.4'/><path d='m8.1 11 7.8-3.8M8.1 13l7.8 3.8'/></svg>"); }
.hvacb-ico--clarity { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v6c0 4 3 6.6 7 9 4-2.4 7-5 7-9V6l-7-3Z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.hvacb-ico--growth  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17 9 11l4 4 8-8'/><path d='M15 7h6v6'/></svg>"); }
.hvacb-ico--globe   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/></svg>"); }
.hvacb-ico--inbox   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13h5l2 3h4l2-3h5'/><path d='M4 13 6 5h12l2 8v6H4Z'/></svg>"); }
.hvacb-ico--search  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>"); }
.hvacb-ico--gear    { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/></svg>"); }
.hvacb-ico--chart   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V4M4 20h16M8 20v-6M13 20V9M18 20v-9'/></svg>"); }

/* ---------- Typography ---------- */

.hvacb-about .hvacb-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--signal-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 6px;
}
.hvacb-about .hvacb-label::before {
	content: '';
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--au-grad);
}
.hvacb-about .hvacb-center .hvacb-label {
	justify-content: center;
}

.hvacb-about .hvacb-grad-text {
	background: var(--au-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hvacb-about .hvacb-underline {
	position: relative;
	white-space: nowrap;
}
.hvacb-about .hvacb-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.14em;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--signal);
}
.hvacb-about .hvacb-muted {
	color: var(--au-muted);
	line-height: 1.7;
}
.hvacb-about .hvacb-h2 {
	font-size: clamp(1.7rem, 1.05rem + 2vw, 2.55rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--au-ink);
	max-width: 20ch;
	margin: 0 0 0.7rem;
}
.hvacb-about .hvacb-section-lead {
	font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
	line-height: 1.6;
	color: var(--au-muted);
	max-width: 52ch;
}
.hvacb-about .hvacb-center { text-align: center; }
.hvacb-about .hvacb-center .hvacb-h2,
.hvacb-about .hvacb-center .hvacb-section-lead {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Buttons ---------- */

.hvacb-about .wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	font-weight: 700;
}
.hvacb-about .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-1);
	background-image: var(--au-grad-btn);
	border: none;
	box-shadow: 0 14px 28px -16px rgba(75, 59, 143, 0.6);
}
.hvacb-about .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-image: linear-gradient(92deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--signal-ink) 100%);
	transform: translateY(-1px);
}
.hvacb-about a:focus-visible,
.hvacb-about .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal-ink);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---------- Hero ---------- */

.hvacb-about-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}
.hvacb-about-hero::before {
	content: '';
	position: absolute;
	top: 8%;
	right: -8%;
	width: 48%;
	max-width: 640px;
	aspect-ratio: 1;
	background: radial-gradient(circle at center, var(--wp--preset--color--accent-6) 0%, rgba(227, 218, 247, 0) 68%);
	opacity: 0.8;
	pointer-events: none;
	z-index: 0;
}
.hvacb-about-hero::after {
	content: '';
	position: absolute;
	top: 12%;
	right: 4%;
	width: 150px;
	height: 120px;
	background-image: radial-gradient(var(--wp--preset--color--accent-6) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}
.hvacb-about-hero > * { position: relative; z-index: 1; }
.hvacb-about-hero .hvacb-hero__title {
	font-size: clamp(2.3rem, 1.1rem + 4.2vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--au-ink);
	max-width: 16ch;
	margin: 0 0 0.6rem;
}
.hvacb-about-hero .hvacb-hero__lead { max-width: 46ch; }

/* ---------- Dashboard mockup ---------- */

.hvacb-dash {
	position: relative;
	background: #fff;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	padding: 18px;
	display: grid;
	gap: 13px;
}
.hvacb-dash::after {
	content: '';
	position: absolute;
	right: -20px;
	top: 30%;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 6px solid var(--wp--preset--color--signal);
	border-right-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(28deg);
	opacity: 0.9;
	pointer-events: none;
}
.hvacb-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.hvacb-dash__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--au-ink);
}
.hvacb-dash__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--au-ok);
	background: rgba(46, 158, 91, 0.12);
	padding: 3px 9px;
	border-radius: 999px;
}
.hvacb-dash__live::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--au-ok);
}
.hvacb-dash__chart {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-7);
	padding: 10px;
}
.hvacb-dash__chart .area { fill: rgba(75, 59, 143, 0.12); stroke: none; }
.hvacb-dash__chart .line { fill: none; stroke: var(--wp--preset--color--accent-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hvacb-dash__chart .dot { fill: var(--wp--preset--color--signal); }
.hvacb-dash__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hvacb-dash__card { background: var(--wp--preset--color--accent-7); border-radius: 12px; padding: 12px 14px; }
.hvacb-dash__label { font-size: 12px; font-weight: 600; color: var(--au-muted); margin: 0 0 4px; }
.hvacb-dash__value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--au-ink); line-height: 1; margin: 0; }
.hvacb-dash__delta { font-size: 12px; font-weight: 700; color: var(--au-ok); margin: 5px 0 0; }
.hvacb-dash__status { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.hvacb-dash__status li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--au-ink); }
.hvacb-dash__status li::after {
	content: '';
	width: 16px;
	height: 16px;
	flex: none;
	background-color: var(--au-ok);
	-webkit-mask: var(--hvb-ico-check) center / contain no-repeat;
	mask: var(--hvb-ico-check) center / contain no-repeat;
}
.hvacb-dash__foot { font-size: 11px; color: var(--au-muted); margin: 0; }

/* ---------- Proof strip ---------- */

.hvacb-proof .hvacb-facts {
	background: #fff;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	padding: clamp(18px, 3vw, 30px);
	grid-template-columns: repeat(5, 1fr);
	margin-top: var(--wp--preset--spacing--40);
}
.hvacb-proof .hvacb-facts > * {
	padding: 4px 12px;
	border-left: 1px solid var(--au-line);
}
.hvacb-proof .hvacb-facts > *:first-child { border-left: none; }
.hvacb-about .hvacb-fact__value {
	font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	background: var(--au-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0;
}
.hvacb-about .hvacb-fact__label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--au-muted);
	margin: 8px 0 0;
}

/* ---------- Hub-and-spoke diagram ---------- */

.hvacb-hubwrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hvacb-hub { position: relative; width: 100%; max-width: 430px; aspect-ratio: 1; margin-inline: auto; }
.hvacb-hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hvacb-hub__core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background: var(--au-grad-deep);
	color: #fff;
	display: grid;
	place-content: center;
	text-align: center;
	padding: 10px;
	box-shadow: var(--au-shadow-brand);
	z-index: 2;
}
.hvacb-hub__brand { display: block; font-weight: 800; font-size: clamp(15px, 0.6rem + 1vw, 21px); letter-spacing: -0.01em; }
.hvacb-hub__tag { display: block; font-size: 10.5px; opacity: 0.86; margin-top: 3px; line-height: 1.25; }
.hvacb-hub__nodes { display: contents; }
.hvacb-hub__node {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	z-index: 3;
}
.hvacb-hub__ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--wp--preset--color--accent-7);
	border: 1px solid var(--au-line);
	box-shadow: var(--au-shadow-sm);
	display: grid;
	place-content: center;
}
.hvacb-hub__ico::before {
	content: '';
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.hvacb-hub__label { font-size: 12.5px; font-weight: 700; color: var(--au-ink); text-align: center; line-height: 1.15; white-space: nowrap; }
.hvacb-hub__node--1 { top: 15%; left: 50%; }
.hvacb-hub__node--2 { top: 32.5%; left: 80.3%; }
.hvacb-hub__node--3 { top: 67.5%; left: 80.3%; }
.hvacb-hub__node--4 { top: 85%; left: 50%; }
.hvacb-hub__node--5 { top: 67.5%; left: 19.7%; }
.hvacb-hub__node--6 { top: 32.5%; left: 19.7%; }
.hvacb-hub__node--2 .hvacb-hub__ico,
.hvacb-hub__node--4 .hvacb-hub__ico,
.hvacb-hub__node--6 .hvacb-hub__ico {
	background: rgba(217, 106, 43, 0.1);
	border-color: rgba(217, 106, 43, 0.3);
}
.hvacb-hub__node--2 .hvacb-hub__ico::before,
.hvacb-hub__node--4 .hvacb-hub__ico::before,
.hvacb-hub__node--6 .hvacb-hub__ico::before {
	background-color: var(--wp--preset--color--signal-ink);
}
.hvacb-hub__cap { font-size: 13px; color: var(--au-muted); text-align: center; max-width: 36ch; margin: 0 auto; line-height: 1.5; }

/* ---------- Approach cards ---------- */

.hvacb-approach {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: var(--wp--preset--spacing--50);
}
.hvacb-approach__item {
	position: relative;
	text-align: center;
	background: #fff;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow-sm);
	padding: 34px 24px 26px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hvacb-approach__item::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	margin: 0 auto 18px;
	background: var(--wp--preset--color--accent-6);
}
.hvacb-approach__item::after {
	content: '';
	position: absolute;
	top: 48px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.hvacb-approach__item:nth-child(even)::before { background: rgba(217, 106, 43, 0.14); }
.hvacb-approach__item:nth-child(even)::after { background-color: var(--wp--preset--color--signal-ink); }
.hvacb-approach__item:hover { transform: translateY(-4px); box-shadow: var(--au-shadow); }
.hvacb-approach__title { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: var(--au-ink); }
.hvacb-approach__body { font-size: var(--wp--preset--font-size--small); color: var(--au-muted); line-height: 1.55; max-width: 34ch; margin: 0 auto; }

/* ---------- Connection stats card ---------- */

.hvacb-connect__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	padding: clamp(22px, 3vw, 32px);
}
.hvacb-connect__card::before {
	content: '';
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 4px;
	background: var(--au-grad);
	margin: 0 0 20px;
}
.hvacb-connect__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.hvacb-connect__value {
	font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	background: var(--au-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0;
}
.hvacb-connect__label { font-size: 12.5px; color: var(--au-muted); margin: 6px 0 0; }
.hvacb-connect__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--au-line); font-size: 12px; color: var(--au-muted); }

/* ---------- FAQ ---------- */

.hvacb-about .hvacb-faq { display: grid; gap: 12px; border: none; }
.hvacb-about .hvacb-faq .wp-block-details {
	background: #fff;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius-sm);
	box-shadow: var(--au-shadow-sm);
	padding: 16px 20px;
}
.hvacb-about .hvacb-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	color: var(--au-ink);
}
.hvacb-about .hvacb-faq summary::-webkit-details-marker { display: none; }
.hvacb-about .hvacb-faq summary::after {
	content: '+';
	flex: none;
	font-size: 1.4em;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--signal-ink);
}
.hvacb-about .hvacb-faq details[open] summary::after { content: '–'; }
.hvacb-about .hvacb-faq .wp-block-details p { margin: 12px 0 0; color: var(--au-muted); line-height: 1.6; }

/* ---------- CTA (gradient finale) ---------- */

.hvacb-about-cta--grad { background: var(--au-grad-deep); position: relative; overflow: hidden; }
.hvacb-about-cta--grad::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -10%;
	width: 46%;
	aspect-ratio: 1;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}
.hvacb-about-cta--grad > * { position: relative; z-index: 1; }
.hvacb-about-cta--grad .hvacb-label { color: var(--wp--preset--color--signal-soft); }
.hvacb-about-cta--grad .hvacb-label::before { background: var(--wp--preset--color--signal-soft); }
.hvacb-about-cta--grad .hvacb-h2 { color: #fff; }
.hvacb-about-cta--grad .hvacb-grad-text { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.hvacb-about-cta--grad .hvacb-section-lead { color: rgba(255, 255, 255, 0.85); }
.hvacb-about-cta .hvacb-cta__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.16);
	display: grid;
	place-content: center;
}
.hvacb-about-cta .hvacb-cta__icon::before {
	content: '';
	width: 27px;
	height: 27px;
	background-color: #fff;
	-webkit-mask: var(--hvb-ico-chat) center / contain no-repeat;
	mask: var(--hvb-ico-chat) center / contain no-repeat;
}
.hvacb-about-cta--grad .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: #fff;
	background-image: none;
	color: var(--wp--preset--color--accent-1);
}
.hvacb-about-cta--grad .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-8);
	background-image: none;
	color: var(--wp--preset--color--accent-2);
}
.hvacb-about-cta--grad .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}
.hvacb-about-cta--grad .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--accent-2);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.hvacb-approach { grid-template-columns: repeat(2, 1fr); }
	.hvacb-proof .hvacb-facts { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
	.hvacb-proof .hvacb-facts > *:nth-child(3n+1) { border-left: none; }
}

@media (max-width: 600px) {
	.hvacb-approach { grid-template-columns: 1fr; }
	.hvacb-proof .hvacb-facts { grid-template-columns: repeat(2, 1fr); }
	.hvacb-proof .hvacb-facts > * { border-left: none; }
	.hvacb-about-hero::after { display: none; }
	.hvacb-hub { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 20px; }
	.hvacb-hub__wires { display: none; }
	.hvacb-hub__core { position: static; transform: none; width: 158px; height: 158px; }
	.hvacb-hub__nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
	.hvacb-hub__node { position: static; transform: none; width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.hvacb-about * { transition-duration: 0.01ms !important; }
}


/* ---------------------------------------------------------------
   About page v4 — realign hero, headings and buttons with the
   site's primary brand language (hero.css / homepage hero DNA).
   Appended so these rules win the cascade over the v3 rules above.
   --------------------------------------------------------------- */

.hvacb-about {
	--au-ink: #2A1A4A;
}

.hvacb-about .hvacb-h2 {
	letter-spacing: -0.045em;
}

/* Hero: match the homepage hero's gradient wash, badge and type scale */
.hvacb-about-hero {
	background: linear-gradient(180deg,#EFEBF8 0%,#E7DEF4 58%,#D9CCEC 100%);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.hvacb-hero__badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:#4B2A86;
	background:rgba(255,255,255,.85);
	padding:7px 18px;
	border-radius:999px;
	margin:0 0 22px;
	border:1px solid rgba(120,90,190,.18);
	box-shadow:0 4px 16px -6px rgba(90,60,160,.25);
}
.hvacb-hero__badge::before {
	content:'';
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--wp--preset--color--signal);
	flex:none;
	animation:hvacbAboutPulse 2s ease-in-out infinite;
}
@keyframes hvacbAboutPulse {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

.hvacb-about-hero .hvacb-hero__title {
	font-size:clamp(34px, 4.4vw, 60px);
	font-weight:800;
	letter-spacing:-0.05em;
	line-height:.95;
	color:#2A1A4A;
	max-width:18ch;
}
.hvacb-about-hero .hvacb-hero__lead {
	color: rgba(42,26,74,.72);
	font-weight:500;
}

/* Buttons: pill shape matching the homepage's primary/ghost pair */
.hvacb-about .wp-block-button__link {
	border-radius:13px;
	padding:14px 26px;
	font-weight:800;
	letter-spacing:-0.01em;
}
.hvacb-about .wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(255,255,255,.68);
	color:#3A2A6A;
	border:1.5px solid rgba(90,60,150,.28);
	box-shadow:none;
}
.hvacb-about .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255,255,255,.95);
}


/* ---------------------------------------------------------------
   About page v5 — pointer-style lists (feedback: cut prose, keep
   headings + scannable points).
   --------------------------------------------------------------- */
.hvacb-about .hvacb-points {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 10px;
}
.hvacb-about .hvacb-points li {
	position: relative;
	padding-left: 26px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--au-ink);
	font-weight: 600;
}
.hvacb-about .hvacb-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--signal);
	-webkit-mask: var(--hvb-ico-check) center / 9px 9px no-repeat;
	mask: var(--hvb-ico-check) center / 9px 9px no-repeat;
}
.hvacb-about-hero .hvacb-points li {
	color: rgba(42,26,74,.85);
}


/* ---------------------------------------------------------------
   About page v6 — quote card replacing a stock "team" photo that
   would have misrepresented who's actually behind the work.
   --------------------------------------------------------------- */
.hvacb-about .hvacb-quote-card {
	position: relative;
	background: var(--au-grad-deep);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow-brand);
	padding: clamp(28px, 3.5vw, 44px);
	color: #fff;
}
.hvacb-about .hvacb-quote-card__mark {
	font-size: 64px;
	line-height: 1;
	font-weight: 800;
	color: rgba(255,255,255,.35);
	margin: 0 0 8px;
}
.hvacb-about .hvacb-quote-card__text {
	font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.4rem);
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}
.hvacb-about .hvacb-quote-card__by {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
}


/* ---------------------------------------------------------------
   About page v8 — Section 1 (hero) only: "brief vs inside the
   trade" contrast card. Colours/sizes reuse existing site tokens.
   --------------------------------------------------------------- */
.hvacb-about-hero .hvacb-hero__title {
	max-width: 14ch;
}
.hvacb-about-hero .hvacb-hero__accent {
	display:block;
	background: var(--au-grad-deep);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hvacb-contrast {
	display:flex;
	flex-direction:column;
	gap:14px;
	background: rgba(255,255,255,.62);
	backdrop-filter: blur(8px);
	border-radius: var(--au-radius, 22px);
	padding: clamp(18px, 2.2vw, 26px);
	box-shadow: 0 24px 60px -24px rgba(60,40,120,.32);
	border: 1px solid rgba(120,90,190,.18);
}
.hvacb-contrast__row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.hvacb-contrast__vs {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px -6px rgba(60,40,120,.4);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--au-ink);
}
.hvacb-contrast__col {
	border-radius: 16px;
	padding: 18px 16px 16px;
}
.hvacb-contrast__col--old {
	background: rgba(120,110,140,.09);
	opacity: .78;
}
.hvacb-contrast__col--us {
	background: var(--au-grad-deep);
	box-shadow: 0 14px 34px -14px rgba(75,59,143,.55);
}
.hvacb-contrast__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--au-muted);
}
.hvacb-contrast__col--us .hvacb-contrast__label {
	color: rgba(255,255,255,.75);
}
.hvacb-contrast__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}
.hvacb-contrast__list li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--au-ink);
}
.hvacb-contrast__col--old .hvacb-contrast__list li {
	color: var(--au-muted);
}
.hvacb-contrast__col--old .hvacb-contrast__list li::before {
	content: '\2715';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 11px;
	color: rgba(120,110,140,.7);
}
.hvacb-contrast__col--us .hvacb-contrast__list li {
	color: #fff;
}
.hvacb-contrast__col--us .hvacb-contrast__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--signal);
	-webkit-mask: var(--hvb-ico-check) center / 8px 8px no-repeat;
	mask: var(--hvb-ico-check) center / 8px 8px no-repeat;
}
.hvacb-contrast__foot {
	margin: 4px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--au-ink);
	text-align: center;
}
@media (max-width: 640px) {
	.hvacb-contrast__row { grid-template-columns: 1fr; gap: 30px; }
	.hvacb-contrast__vs { top: auto; left: 50%; bottom: -22px; transform: translateX(-50%); }
}


/* ---------------------------------------------------------------
   About page v8 — Section 1 only. Light lavender hero, gradient
   headline, light dashboard with outside/inside cards. Real nested
   Gutenberg blocks, no HTML block. Per explicit design brief.
   --------------------------------------------------------------- */
.hvacb-about-hero--lavender {
	background: linear-gradient(135deg,#F5F2FF 0%,#EEE8FF 50%,#F2EDFF 100%) !important;
}
.hvacb-about-hero__gradient-title {
	background-image: linear-gradient(90deg,#111111 0%,#2D1B5A 22%,#8B6BC7 42%,#DCCBFF 57%,#F1C6A7 74%,#C85A22 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.hvacb-about-hero__body {
	color: rgba(24,17,46,.68);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	max-width: 44ch;
}
.hvacb-about-dashboard {
	background: linear-gradient(145deg,#FFFFFF 0%,#F1EDFF 100%);
	border: 1px solid rgba(109,90,207,.18);
	border-radius: 24px;
	box-shadow: 0 24px 60px -24px rgba(109,90,207,.3), 0 2px 8px rgba(109,90,207,.08);
}
.hvacb-about-dashboard__eyebrow {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: #6D5ACF;
	margin: 0 0 18px !important;
}
.hvacb-about-dashboard__card {
	border-radius: 14px;
	height: 100%;
}
.hvacb-about-dashboard__card--outside {
	background: linear-gradient(145deg,#FFFFFF 0%,#F1EDFF 100%);
	border: 1px solid rgba(109,90,207,.16);
}
.hvacb-about-dashboard__card--inside {
	background: linear-gradient(145deg,#F7FFFA 0%,#E4F7ED 100%);
	border: 1px solid rgba(35,157,99,.2);
}
.hvacb-about-dashboard__label {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	margin: 0 0 14px !important;
}
.hvacb-about-dashboard__label--outside { color: #6D5ACF; }
.hvacb-about-dashboard__label--inside { color: #239D63; }
.hvacb-about-dashboard__item {
	position: relative;
	padding-left: 16px;
	font-size: 13.5px !important;
	font-weight: 600;
	color: #3A3450;
	margin: 0 0 10px !important;
}
.hvacb-about-dashboard__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6D5ACF;
}
.hvacb-about-dashboard__card--inside .hvacb-about-dashboard__item::before {
	background: #239D63;
}
.hvacb-about-dashboard__item--accent::before {
	background: #C85A22 !important;
}
.hvacb-about-dashboard__divider {
	background-color: rgba(109,90,207,.18) !important;
}
.hvacb-about-dashboard__close {
	color: #18112E !important;
	font-size: 17px !important;
	font-weight: 700 !important;
}


/* ---------------------------------------------------------------
   About page v9 — fix: an earlier rule (.hvacb-about-hero
   .hvacb-hero__title { color:#2A1A4A }) has higher specificity
   than .hvacb-about-hero__gradient-title and was overriding the
   gradient-clip color, flattening the headline to solid purple.
   Force the gradient to win.
   --------------------------------------------------------------- */
.hvacb-about-hero .hvacb-hero__title.hvacb-about-hero__gradient-title {
	background-image: linear-gradient(90deg,#111111 0%,#2D1B5A 22%,#8B6BC7 42%,#DCCBFF 57%,#F1C6A7 74%,#C85A22 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.hvacb-about-dashboard {
	padding: clamp(24px, 3vw, 36px);
}


/* ---------------------------------------------------------------
   About page v10 — "Who we are" team section, rebuilt full-canvas
   (full-width, edge-to-edge, no boxed container), centered pointer
   cards instead of a two-column boxed layout.
   --------------------------------------------------------------- */
.hvacb-about-team {
	background: linear-gradient(135deg,#F8F6FF 0%,#FFFFFF 55%,#F3EEFF 100%);
	text-align: center;
}
.hvacb-about-team__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 8px auto 0;
	max-width: 980px;
}
.hvacb-about-team__card {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid rgba(109,90,207,.16);
	border-radius: 999px;
	padding: 14px 22px;
	font-weight: 700;
	font-size: 14.5px;
	color: #2A1A4A;
	box-shadow: 0 10px 24px -14px rgba(109,90,207,.28);
}
.hvacb-about-team__card::before {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #6D5ACF;
	-webkit-mask: var(--hvb-ico-check) center / 9px 9px no-repeat;
	mask: var(--hvb-ico-check) center / 9px 9px no-repeat;
	flex: none;
}
.hvacb-about-team__statement {
	margin: 36px auto 0;
	max-width: 640px;
	font-size: clamp(19px,2vw,26px);
	font-weight: 800;
	line-height: 1.35;
	color: #18112E;
}
@media (max-width: 640px) {
	.hvacb-about-team__card { font-size: 13px; padding: 12px 18px; }
}


/* ---------------------------------------------------------------
   About page v11 — Section 2 "Who we are" rebuilt again: pure
   typographic manifesto, no cards/pills, nothing reused from the
   homepage or any other section on this page.
   --------------------------------------------------------------- */
.hvacb-about-manifesto {
	background: #FBF9FF;
}
.hvacb-manifesto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
}
.hvacb-manifesto__line {
	font-size: clamp(28px, 4.2vw, 50px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	text-align: center;
	color: #18112E;
}
.hvacb-manifesto__line--accent { color: #6D5ACF; }
.hvacb-manifesto__line--accent2 { color: #C85A22; }
.hvacb-manifesto__closing {
	margin-top: 30px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(24,17,46,.6);
	text-align: center;
}


/* ---------------------------------------------------------------
   About page v11 — Section 2 "Who we are" rebuilt again: pure
   typographic manifesto, no cards/pills, nothing reused from the
   homepage or any other section on this page.
   --------------------------------------------------------------- */
.hvacb-about-manifesto {
	background: #FBF9FF;
}
.hvacb-manifesto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
}
.hvacb-manifesto__line {
	font-size: clamp(28px, 4.2vw, 50px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	text-align: center;
	color: #18112E;
}
.hvacb-manifesto__line--accent { color: #6D5ACF; }
.hvacb-manifesto__line--accent2 { color: #C85A22; }
.hvacb-manifesto__closing {
	margin-top: 30px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(24,17,46,.6);
	text-align: center;
}


/* ---------------------------------------------------------------
   About page v12 — Section 3 "How it started": a connected
   4-step timeline with a purple→orange colour progression across
   the steps, symbolising the journey. Distinct from the manifesto,
   the dark stats section, and the hub diagram — plain white canvas,
   clean editorial timeline, no cards.
   --------------------------------------------------------------- */
.hvacb-about-journey {
	background: #ffffff;
}
.hvacb-journey-timeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 52px auto 0;
	max-width: 980px;
}
.hvacb-journey-timeline::before {
	content: '';
	position: absolute;
	top: 19px;
	left: 6%;
	right: 6%;
	height: 2px;
	background: linear-gradient(90deg, #6D5ACF 0%, #C85A22 100%);
	opacity: .32;
}
.hvacb-journey-step {
	position: relative;
	flex: 1;
	text-align: center;
	padding: 0 14px;
}
.hvacb-journey-num {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin: 0 auto 20px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	box-shadow: 0 8px 20px -8px rgba(24,17,46,.35);
}
.hvacb-journey-step--1 .hvacb-journey-num { background: #6D5ACF; }
.hvacb-journey-step--2 .hvacb-journey-num { background: #8A6BB0; }
.hvacb-journey-step--3 .hvacb-journey-num { background: #B37256; }
.hvacb-journey-step--4 .hvacb-journey-num { background: #C85A22; }
.hvacb-journey-title {
	font-size: 16px;
	font-weight: 800;
	color: #18112E;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.hvacb-journey-body {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(24,17,46,.62);
	max-width: 220px;
	margin: 0 auto;
}
@media (max-width: 780px) {
	.hvacb-journey-timeline { flex-direction: column; gap: 30px; max-width: 460px; }
	.hvacb-journey-timeline::before { top: 0; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; }
	.hvacb-journey-step { text-align: left; padding: 0 0 0 56px; }
	.hvacb-journey-num { position: absolute; left: 0; top: 0; margin: 0; }
	.hvacb-journey-body { margin: 0; max-width: none; }
}


/* ---------------------------------------------------------------
   About page v13 — fix: journey section was constrained to a
   1200px inner wrapper by the block's own layout attribute, and
   the timeline itself was capped at max-width:980px — both caused
   large empty gutters left/right. Go edge-to-edge instead.
   --------------------------------------------------------------- */
.hvacb-about-journey .hvacb-center {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 64px);
	padding-right: clamp(20px, 4vw, 64px);
}
.hvacb-journey-timeline {
	width: 100%;
	max-width: none !important;
	margin: 52px 0 0 !important;
	padding: 0 clamp(24px, 5vw, 72px);
}
@media (max-width: 780px) {
	.hvacb-journey-timeline { max-width: 640px !important; margin: 52px auto 0 !important; }
}


/* ---------------------------------------------------------------
   About page v14 — fix: equal flex columns were centering each
   step within its own (very wide, on a full-bleed row) column,
   which visually reads as a big empty gap before the first node
   instead of it sitting at the true left edge. Anchor step 1 to
   the left edge and step 4 to the right edge instead.
   --------------------------------------------------------------- */
.hvacb-journey-timeline {
	position: relative;
	width: 100%;
	max-width: none !important;
	margin: 60px 0 20px !important;
	padding: 0 clamp(20px, 4vw, 60px) !important;
	min-height: 175px;
	display: block !important;
}
.hvacb-journey-timeline::before {
	left: clamp(20px, 4vw, 60px) !important;
	right: clamp(20px, 4vw, 60px) !important;
}
.hvacb-journey-step {
	position: absolute !important;
	top: 0;
	width: 210px;
	flex: none !important;
	padding: 0 !important;
}
.hvacb-journey-step--1 { left: clamp(20px, 4vw, 60px); text-align: left; }
.hvacb-journey-step--1 .hvacb-journey-num { margin: 0 0 20px 0 !important; }
.hvacb-journey-step--1 .hvacb-journey-body { margin-left: 0; }
.hvacb-journey-step--2 { left: 33.33%; transform: translateX(-50%); text-align: center; }
.hvacb-journey-step--3 { left: 66.66%; transform: translateX(-50%); text-align: center; }
.hvacb-journey-step--4 { right: clamp(20px, 4vw, 60px); left: auto; text-align: right; }
.hvacb-journey-step--4 .hvacb-journey-num { margin: 0 0 20px auto !important; }
.hvacb-journey-step--4 .hvacb-journey-body { margin-left: auto; margin-right: 0; }

@media (max-width: 780px) {
	.hvacb-journey-timeline { display: flex !important; flex-direction: column; gap: 30px; min-height: 0; padding: 0 20px !important; }
	.hvacb-journey-timeline::before { display: none; }
	.hvacb-journey-step {
		position: static !important;
		width: auto;
		text-align: left !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}
	.hvacb-journey-step .hvacb-journey-num { margin: 0 0 12px 0 !important; }
	.hvacb-journey-step .hvacb-journey-body { margin: 0 !important; max-width: none; }
}


/* ---------------------------------------------------------------
   About page v15 — revert the untested absolute-positioning
   experiment from v14. Going back to the simple, well-tested flex
   layout used everywhere else on this page, just widened, so the
   timeline still reads edge-to-edge without the risk of overlap
   or misalignment from hand-calculated absolute offsets.
   --------------------------------------------------------------- */
.hvacb-journey-timeline {
	display: flex !important;
	position: relative;
	justify-content: space-between;
	margin: 56px auto 0 !important;
	max-width: 1500px !important;
	padding: 0 24px !important;
	min-height: 0 !important;
	width: 100%;
}
.hvacb-journey-timeline::before {
	top: 19px !important;
	bottom: auto !important;
	left: 6% !important;
	right: 6% !important;
	width: auto !important;
	height: 2px !important;
}
.hvacb-journey-step {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	flex: 1 !important;
	width: auto !important;
	text-align: center !important;
	padding: 0 16px !important;
}
.hvacb-journey-num {
	margin: 0 auto 20px !important;
}
.hvacb-journey-body {
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 780px) {
	.hvacb-journey-timeline {
		display: flex !important;
		flex-direction: column !important;
		gap: 30px !important;
		max-width: 460px !important;
		margin: 52px auto 0 !important;
		padding: 0 20px !important;
	}
	.hvacb-journey-timeline::before {
		top: 0 !important;
		bottom: 0 !important;
		left: 19px !important;
		right: auto !important;
		width: 2px !important;
		height: auto !important;
	}
	.hvacb-journey-step {
		text-align: left !important;
		padding: 0 0 0 56px !important;
	}
	.hvacb-journey-num {
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		margin: 0 !important;
	}
	.hvacb-journey-body {
		margin: 0 !important;
		max-width: none !important;
	}
}