/* =========================================================
 * === HEADER ===
 * Scope: .hq-header container in Theme Builder template
 * ========================================================= */
.hq-header {
	max-width: 100%;
}
.hq-header > .e-con-inner,
.hq-header.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-header-logo img {
	display: block;
	height: auto;
	max-width: 137px;
}
/* Native nav-menu widget — color tokens are set inline; this is a safety net */
.hq-nav .elementor-nav-menu a {
	transition: color 0.2s ease;
}
.hq-nav .elementor-nav-menu li a:hover,
.hq-nav .elementor-nav-menu li.current-menu-item > a {
	color: #E4B046;
}
/* Gold pill — arrow needs to inherit color in both states */
.hq-cta-pill .elementor-button {
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hq-cta-pill .elementor-button .elementor-button-icon svg,
.hq-cta-pill .elementor-button .elementor-button-icon {
	color: inherit;
	fill: currentColor;
	transition: color 0.2s ease;
}
.hq-cta-pill .elementor-button:hover {
	background-color: #E4B046 !important;
	color: #060709 !important;
	border-color: #E4B046 !important;
}

/* =========================================================
 * === FOOTER — BANNER ===
 * Top row with "Building a sustainable future…" + CTA
 * ========================================================= */
.hq-footer > .e-con-inner,
.hq-footer.e-con-boxed > .e-con-inner,
.hq-footer-banner > .e-con-inner,
.hq-footer-grid > .e-con-inner,
.hq-footer-bottom > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-footer-banner-h em,
.hq-footer-banner-h i {
	color: #E4B046;
	font-style: italic;
	font-weight: 100;
}

/* =========================================================
 * === FOOTER — 4-COL GRID ===
 * Column headings get a gold hairline beneath
 * ========================================================= */
.hq-footer-grid .hq-footer-h4 .elementor-heading-title {
	position: relative;
	padding-bottom: 14px;
	display: block;
}
.hq-footer-grid .hq-footer-h4 .elementor-heading-title::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #E4B046;
	opacity: 0.6;
}
.hq-footer-brand-desc p {
	margin: 0;
}
.hq-footer-tag .elementor-heading-title {
	display: block;
}
/* Reach-out column: phone + email links use --text-primary */
.hq-footer-reach-body a {
	color: #F2F2F2;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hq-footer-reach-body a:hover {
	color: #E4B046;
}
.hq-footer-reach-body p {
	margin: 0;
}
/* AVAILABLE 24/7 — muted with a thin gold rule above */
.hq-footer-reach-body .hq-footer-status {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #B8B8B8;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(228, 176, 70, 0.4);
}
/* Footer menus — remove underline + tighten line-height */
.hq-footer-menu .elementor-nav-menu a {
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hq-footer-menu .elementor-nav-menu a:hover {
	color: #E4B046;
}

/* =========================================================
 * === FOOTER — BOTTOM BAR ===
 * Copyright + Privacy/Terms
 * ========================================================= */
.hq-footer-legal .elementor-nav-menu a {
	text-decoration: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
	transition: color 0.2s ease;
}
.hq-footer-legal .elementor-nav-menu a:hover {
	color: #E4B046;
}

/* =========================================================
 * === RESPONSIVE — 1024 / 767 ===
 * ========================================================= */
@media (max-width: 1024px) {
	.hq-header > .e-con-inner,
	.hq-footer > .e-con-inner,
	.hq-footer-banner > .e-con-inner,
	.hq-footer-grid > .e-con-inner,
	.hq-footer-bottom > .e-con-inner {
		padding-inline: 40px;
	}
	.hq-footer-banner-h .elementor-heading-title {
		font-size: 52px !important;
	}
}

@media (max-width: 767px) {
	.hq-header > .e-con-inner,
	.hq-footer > .e-con-inner,
	.hq-footer-banner > .e-con-inner,
	.hq-footer-grid > .e-con-inner,
	.hq-footer-bottom > .e-con-inner {
		padding-inline: 24px;
	}
	.hq-footer-banner-h .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* === ADDITIONAL TOKENS (post-Figma audit 2026-05-21) === */
:root {
	--bg-deep:          #0A0B0D;
	--bg-primary-53:    rgba(6, 7, 9, 0.53);
	--overlay-black-20: rgba(0, 0, 0, 0.20);
	--gold-soft:        #E4B0460F;  /* 6% alpha — overridden from initial 3% */
}

/* =========================================================
 * === HERO SECTION ===
 * Full-bleed image with multi-stop gradient overlay,
 * top meta strip + bottom block with H1, body, CTA.
 * ========================================================= */

/* Inner content max-width — let bg extend edge to edge */
.hq-hero > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* 4-stop gradient overlay (Elementor natively supports 2 stops; this is the only
   reliable way to get the exact specified curve from the original HTML) */
.hq-hero > .elementor-background-overlay,
.hq-hero::before {
	background: linear-gradient(180deg,
		rgba(6, 7, 9, 0.53) 0%,
		rgba(6, 7, 9, 0.13) 35%,
		rgba(6, 7, 9, 0.93) 85%,
		rgba(6, 7, 9, 1) 100%
	) !important;
}

/* Top meta strip — gold dot via ::before */
.hq-eyebrow-dot .elementor-heading-title::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #E4B046;
	border-radius: 50%;
	margin-right: 12px;
	vertical-align: 1px;
}

/* Bottom block — gold 80x1 divider sits left aligned */
.hq-hero-divider {
	padding: 0 !important;
}
.hq-hero-divider .elementor-divider {
	justify-content: flex-start !important;
}
.hq-hero-divider .elementor-divider-separator {
	width: 80px !important;
	border-top-color: #E4B046 !important;
}

/* H1 — slight micro-adjustment so descenders don't clip */
.hq-hero-h .elementor-heading-title {
	margin: 0;
}

/* Body paragraph — constrained max-width */
.hq-hero-body {
	max-width: 480px;
}
.hq-hero-body p {
	margin: 0;
}
.hq-hero-body p + p {
	margin-top: 1em;
}

/* Bottom row — body left, CTA right, baseline-aligned at the bottom */
.hq-hero-bottom-row {
	min-width: 0;
}

/* =========================================================
 * === HERO — Responsive
 * ========================================================= */
@media (max-width: 1024px) {
	.hq-hero {
		min-height: 760px !important;
	}
	.hq-hero > .e-con-inner {
		padding-inline: 40px;
	}
	.hq-hero-h .elementor-heading-title {
		font-size: 96px !important;
		letter-spacing: -4px !important;
	}
}

@media (max-width: 767px) {
	.hq-hero {
		min-height: 620px !important;
	}
	.hq-hero > .e-con-inner {
		padding-inline: 24px;
	}
	.hq-hero-h .elementor-heading-title {
		font-size: 56px !important;
		letter-spacing: -2px !important;
	}
	.hq-hero-bottom-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}
	.hq-hero-top .hq-eyebrow-meta {
		font-size: 9px !important;
	}
}

/* Hero CTA — keep button text on one line */
.hq-cta-pill-lg .elementor-button-text,
.hq-cta-pill .elementor-button-text {
	white-space: nowrap;
}
.hq-cta-pill-lg .elementor-button-content-wrapper {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.hq-cta-pill-lg .elementor-button {
	width: auto;
	max-width: none;
}

/* Hero bottom row — body left, CTA right, baseline aligned at bottom of section */
.hq-hero-bottom-row {
	align-items: flex-end !important;
}
.hq-hero-body p {
	margin: 0;
}

/* Force hero divider to start (left) — Elementor sometimes ignores align:start on classic divider */
.hq-hero-divider .elementor-divider {
	display: flex !important;
	justify-content: flex-start !important;
	margin-inline: 0 !important;
}
.hq-hero-divider .elementor-divider-separator {
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 80px !important;
	flex: 0 0 80px !important;
}

/* Hero gradient overlay — implemented via pseudo-element because Elementor container
   in 3.18.x doesn't natively support multi-stop gradient overlay and didn't generate
   the .elementor-background-overlay div from our settings. */
.hq-hero {
	position: relative !important;
}
.hq-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(6, 7, 9, 0.53)  0%,
		rgba(6, 7, 9, 0.13)  35%,
		rgba(6, 7, 9, 0.93)  85%,
		rgba(6, 7, 9, 1)     100%
	);
	z-index: 1;
	pointer-events: none;
}
.hq-hero > .e-con-inner,
.hq-hero > .elementor-container {
	position: relative;
	z-index: 2;
}

/* Ensure ALL hero direct children sit above the ::before gradient overlay
   (without relying on a .e-con-inner wrapper that may not exist with content_width:full) */
.hq-hero > *:not(.elementor-background-overlay) {
	position: relative;
	z-index: 2;
}
.hq-hero {
	overflow: hidden; /* clip overlay to section bounds */
}


/* =========================================================
 * === NET BILLING SECTION ===
 * 2-col row: eyebrow left, H2 + body right.
 * ========================================================= */
.hq-net-billing {
	max-width: 100%;
}
.hq-net-billing > .e-con-inner,
.hq-net-billing.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-net-body {
	max-width: 760px;
}
.hq-net-body p {
	margin: 0;
}

@media (max-width: 1024px) {
	.hq-net-billing {
		flex-direction: column !important;
		padding-block: 100px !important;
		padding-inline: 40px !important;
	}
	.hq-net-col-l,
	.hq-net-col-r {
		width: 100% !important;
	}
	.hq-net-h .elementor-heading-title {
		font-size: 56px !important;
		letter-spacing: -1px !important;
	}
}

@media (max-width: 767px) {
	.hq-net-billing {
		padding-block: 80px !important;
		padding-inline: 24px !important;
	}
	.hq-net-h .elementor-heading-title {
		font-size: 40px !important;
	}
	.hq-net-body p {
		font-size: 15px !important;
	}
}

/* =========================================================
 * === CALCULATOR SECTION ===
 * Left: native widgets. Right: HTML widget with embedded slider.
 * The HTML widget IS the exception — slider interaction needs JS
 * and the custom number/cursor/track styling has no native equivalent.
 * ========================================================= */
.hq-calc {
	max-width: 100%;
}
.hq-calc > .e-con-inner,
.hq-calc.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-calc-body p {
	margin: 0;
	max-width: 480px;
}

/* === Calculator card === */
.hq-calc-card {
	border: 1px solid #4A3A1F;
	background: #060709;
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	color: #F2F2F2;
	font-family: 'Inter', sans-serif;
}
.hq-calc-eyebrow {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #E4B046;
	display: block;
}
.hq-calc-eyebrow.muted {
	color: #B8B8B8;
}

/* Big monetary input row with cursor — visually input-y but read-only */
.hq-calc-input-row {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	font-weight: 200;
	color: #F2F2F2;
	border: 1px solid #4A3A1F;
	padding: 24px 28px;
	min-height: 96px;
}
.hq-calc-dollar {
	font-size: 56px;
	line-height: 1;
	font-weight: 200;
	color: #E4B046;
	margin-right: 4px;
}
.hq-calc-num {
	font-size: 88px;
	line-height: 0.9;
	font-weight: 200;
	color: #F2F2F2;
	letter-spacing: -2px;
	border-bottom: 2px solid #E4B046;
	padding-bottom: 4px;
	min-width: 130px;
	display: inline-block;
	text-align: left;
}
.hq-calc-cursor {
	display: inline-block;
	width: 2px;
	height: 60px;
	background: #E4B046;
	margin-left: 8px;
	margin-bottom: 8px;
	animation: hq-blink 1.05s steps(2, end) infinite;
}
@keyframes hq-blink {
	to { opacity: 0; }
}

/* Slider */
.hq-calc-slider {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hq-calc-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: 2.4px;
	color: #6E6E6E;
	font-weight: 400;
	text-transform: uppercase;
}
.hq-calc-drag {
	color: #E4B046;
}
.hq-calc-track {
	position: relative;
	height: 14px;
	cursor: pointer;
	outline: none;
}
.hq-calc-track-bg {
	position: absolute;
	inset: 6px 0;
	background: #1F1F1F;
	border-radius: 999px;
}
.hq-calc-track-fill {
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	background: #E4B046;
	border-radius: 999px;
	width: 7px;
	min-width: 7px;
}
.hq-calc-track-handle {
	position: absolute;
	top: 0;
	width: 14px;
	height: 14px;
	background: #E4B046;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(228,176,70,0.16);
	left: 0;
	cursor: grab;
}
.hq-calc-track-handle:active { cursor: grabbing; }
.hq-calc-track:focus-visible .hq-calc-track-handle {
	box-shadow: 0 0 0 6px rgba(228,176,70,0.32);
}

/* Result block */
.hq-calc-result {
	border-top: 1px solid #4A3A1F;
	padding-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hq-calc-result-label {
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.3px;
	color: #F2F2F2;
	text-transform: uppercase;
}
.hq-calc-result-value {
	font-size: 56px;
	font-weight: 300;
	letter-spacing: -1px;
	color: #E4B046;
	line-height: 1;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.hq-calc {
		flex-direction: column !important;
		padding-block: 100px !important;
		padding-inline: 40px !important;
	}
	.hq-calc-col-l,
	.hq-calc-col-r {
		width: 100% !important;
	}
	.hq-calc-h .elementor-heading-title {
		font-size: 48px !important;
	}
}

@media (max-width: 767px) {
	.hq-calc {
		padding-block: 80px !important;
		padding-inline: 24px !important;
	}
	.hq-calc-card {
		padding: 36px 28px;
	}
	.hq-calc-num {
		font-size: 64px;
		min-width: 100px;
	}
	.hq-calc-dollar {
		font-size: 40px;
	}
	.hq-calc-result-value {
		font-size: 40px;
	}
	.hq-calc-result-label {
		font-size: 18px;
	}
	.hq-calc-h .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* =========================================================
 * === SOLAR PLATE SECTION ===
 * Full-bleed image with 3-stop gradient overlay.
 * Top meta strip + bottom row (Empower headline + body block).
 * ========================================================= */
.hq-plate {
	position: relative !important;
	overflow: hidden;
}
.hq-plate::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(6, 7, 9, 0.27)  0%,
		rgba(6, 7, 9, 0)     35%,
		rgba(6, 7, 9, 0.93)  100%
	);
	z-index: 1;
	pointer-events: none;
}
.hq-plate > *:not(.elementor-background-overlay) {
	position: relative;
	z-index: 2;
}
.hq-plate > .e-con-inner,
.hq-plate.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Headline — italic gold for "your home." */
.hq-plate-h .elementor-heading-title {
	margin: 0;
}
.hq-plate-h em {
	font-style: italic;
	color: #E4B046;
	font-weight: 100;
}

/* Bullet list with custom · prefix */
.hq-plate-list-wrap ul.hq-plate-list,
.hq-plate-list-wrap ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hq-plate-list-wrap ul li {
	position: relative;
	padding-left: 16px;
}
.hq-plate-list-wrap ul li::before {
	content: '·';
	position: absolute;
	left: 0;
	color: #E4B046;
	font-weight: 600;
}

/* Body paragraph margin reset */
.hq-plate-p p {
	margin: 0;
}

/* CTA link — gold arrow inherits text color */
.hq-cta-link .elementor-button {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}
.hq-cta-link .elementor-button:hover {
	background: transparent !important;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.hq-plate {
		min-height: 640px !important;
	}
	.hq-plate-h .elementor-heading-title {
		font-size: 80px !important;
		letter-spacing: -2px !important;
	}
	.hq-plate-bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 32px !important;
	}
	.hq-plate > .e-con-inner {
		padding-inline: 40px;
	}
}

@media (max-width: 767px) {
	.hq-plate {
		min-height: 560px !important;
	}
	.hq-plate-h .elementor-heading-title {
		font-size: 56px !important;
		letter-spacing: -1.5px !important;
	}
	.hq-plate-body-block {
		width: 100% !important;
	}
	.hq-plate > .e-con-inner {
		padding-inline: 24px;
	}
	.hq-plate-top {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
}

/* =========================================================
 * === SUPPORT 24/7 SECTION ===
 * Centered column: eyebrow + H2 + body + 3-CTA row with dividers
 * ========================================================= */
.hq-support > .e-con-inner,
.hq-support.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-support-h em,
.hq-support-h i {
	color: #E4B046;
	font-style: italic;
	font-weight: 100;
}
.hq-support-p {
	max-width: 720px;
}
.hq-support-p p {
	margin: 0;
}
.hq-support-cta-v a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hq-support-cta-v a:hover {
	color: #E4B046;
}
.hq-support-cta-primary .hq-support-cta-v {
	color: #E4B046 !important;
}
.hq-support-cta-primary .hq-support-cta-v a {
	color: #E4B046 !important;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.hq-support {
		padding-block: 100px !important;
		padding-inline: 40px !important;
	}
	.hq-support-h .elementor-heading-title {
		font-size: 56px !important;
		letter-spacing: -1px !important;
	}
	.hq-support-row {
		flex-wrap: wrap !important;
	}
}

@media (max-width: 767px) {
	.hq-support {
		padding-block: 80px !important;
		padding-inline: 24px !important;
	}
	.hq-support-h .elementor-heading-title {
		font-size: 40px !important;
	}
	.hq-support-row {
		flex-direction: column !important;
		gap: 24px !important;
	}
	.hq-support-divider {
		display: none !important;
	}
	.hq-support-cta-v {
		font-size: 16px !important;
	}
}

/* =========================================================
 * === REBATE SECTION ===
 * 3-col: eyebrow | $5,000 + headline + body | APPLY NOW button
 * ========================================================= */
.hq-rebate > .e-con-inner,
.hq-rebate.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-rebate-figure .hq-rebate-dollar {
	color: #E4B046;
	font-size: 0.6em;
	font-weight: 200;
	display: inline-block;
	vertical-align: 28px;
	margin-right: 4px;
}
.hq-rebate-figure .hq-rebate-num {
	font-weight: 200;
}
.hq-rebate-p p {
	margin: 0;
	max-width: 540px;
}

@media (max-width: 1024px) {
	.hq-rebate {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding-block: 80px !important;
		padding-inline: 40px !important;
	}
	.hq-rebate-l, .hq-rebate-m, .hq-rebate-r {
		width: 100% !important;
	}
	.hq-rebate-r {
		align-items: flex-start !important;
	}
	.hq-rebate-figure .elementor-heading-title {
		font-size: 80px !important;
	}
}

@media (max-width: 767px) {
	.hq-rebate {
		padding-block: 60px !important;
		padding-inline: 24px !important;
	}
	.hq-rebate-figure .elementor-heading-title {
		font-size: 60px !important;
	}
	.hq-rebate-h .elementor-heading-title {
		font-size: 22px !important;
	}
}

/* Support row dividers — force 1px wide hairlines (Elementor was applying min-width) */
.hq-support-divider {
	width: 1px !important;
	min-width: 1px !important;
	max-width: 1px !important;
	flex: 0 0 1px !important;
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	background: #4A3A1F !important;
}
.hq-support-divider > * {
	display: none !important;
}

/* =========================================================
 * === ROOFING SECTION ===
 * 2-col: text left, full-bleed image right (no gradient).
 * ========================================================= */
.hq-roof > .e-con-inner,
.hq-roof.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-roof-p p {
	margin: 0;
	max-width: 480px;
}
.hq-roof-list-wrap ul.hq-roof-list,
.hq-roof-list-wrap ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hq-roof-list-wrap ul li {
	position: relative;
	padding-left: 16px;
}
.hq-roof-list-wrap ul li::before {
	content: '·';
	position: absolute;
	left: 0;
	color: #E4B046;
	font-weight: 600;
}

@media (max-width: 1024px) {
	.hq-roof {
		flex-direction: column !important;
		padding-block: 80px !important;
		padding-inline: 40px !important;
	}
	.hq-roof-l, .hq-roof-r {
		width: 100% !important;
	}
	.hq-roof-r {
		min-height: 400px !important;
	}
	.hq-roof-h .elementor-heading-title {
		font-size: 42px !important;
	}
}

@media (max-width: 767px) {
	.hq-roof {
		padding-block: 60px !important;
		padding-inline: 24px !important;
	}
	.hq-roof-r {
		min-height: 280px !important;
	}
	.hq-roof-h .elementor-heading-title {
		font-size: 32px !important;
	}
}

/* Replace container-based dividers with border-left between sibling CTAs */
.hq-support-row {
	gap: 0 !important;
}
.hq-support-row > .hq-support-cta {
	padding-inline: 48px;
}
.hq-support-row > .hq-support-cta + .hq-support-cta {
	border-left: 1px solid #4A3A1F;
}

@media (max-width: 767px) {
	.hq-support-row > .hq-support-cta + .hq-support-cta {
		border-left: 0 !important;
		border-top: 1px solid #4A3A1F;
		padding-block-start: 24px;
		margin-block-start: 24px;
	}
}

/* =========================================================
 * === PROMISE SECTION (header + 2 card rows) ===
 * ========================================================= */
.hq-promise > .e-con-inner,
.hq-promise.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-promise-h em,
.hq-promise-h i {
	color: #E4B046;
	font-style: italic;
	font-weight: 100;
}
.hq-promise-lede {
	max-width: 720px;
	margin-inline: auto;
}
.hq-promise-lede p {
	margin: 0;
}

/* Card row containers — vertical hairlines between cards */
.hq-card-row > .hq-card + .hq-card {
	border-left: 1px solid #1F1F1F;
}

/* Cards layout */
.hq-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hq-card-n .elementor-heading-title {
	font-style: italic !important;
}
.hq-card-p p {
	margin: 0;
}
.hq-card-featured {
	background: rgba(228, 176, 70, 0.06);
	outline: 1px solid #E4B046;
	outline-offset: -1px;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.hq-promise {
		padding-block: 100px !important;
		padding-inline: 40px !important;
	}
	.hq-promise-h .elementor-heading-title {
		font-size: 52px !important;
	}
	.hq-card-row-4,
	.hq-card-row-5 {
		flex-wrap: wrap !important;
	}
	.hq-card-row-4 > .hq-card {
		flex: 0 0 50% !important;
	}
	.hq-card-row-5 > .hq-card {
		flex: 0 0 50% !important;
	}
	.hq-card-row > .hq-card + .hq-card {
		border-left: 0 !important;
	}
	.hq-card-row > .hq-card:nth-child(odd) + .hq-card {
		border-left: 1px solid #1F1F1F !important;
	}
	.hq-card-row > .hq-card:nth-child(n+3) {
		border-top: 1px solid #1F1F1F;
	}
}

@media (max-width: 767px) {
	.hq-promise {
		padding-block: 80px !important;
		padding-inline: 24px !important;
	}
	.hq-promise-h .elementor-heading-title {
		font-size: 36px !important;
	}
	.hq-card-row-4 > .hq-card,
	.hq-card-row-5 > .hq-card {
		flex: 0 0 100% !important;
		border-left: 0 !important;
		border-top: 1px solid #1F1F1F;
	}
	.hq-card-row > .hq-card:first-child {
		border-top: 0 !important;
	}
}

/* Card hover — matches the always-on style of the featured card (gold outline + soft gold tint) */
.hq-card {
	transition: background-color 0.25s ease, outline-color 0.25s ease;
	outline: 1px solid transparent;
	outline-offset: -1px;
	cursor: default;
}
.hq-card:hover {
	background-color: rgba(228, 176, 70, 0.06);
	outline-color: #E4B046;
}
/* Keep the featured card visually distinct even when neighbors hover */
.hq-card-featured {
	transition: none;
}

/* Card hover — higher specificity + box-shadow inset (outline doesn't always render inside Elementor containers) */
.hq-promise .hq-card,
.e-con.hq-card {
	transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
	box-shadow: inset 0 0 0 1px transparent;
	position: relative;
	z-index: 0;
}
.hq-promise .hq-card:hover,
.e-con.hq-card:hover {
	background-color: rgba(228, 176, 70, 0.06) !important;
	box-shadow: inset 0 0 0 1px #E4B046 !important;
	z-index: 1;
}
/* Featured card — keep permanent gold border via box-shadow too (rewriting earlier outline rule) */
.hq-promise .hq-card-featured,
.e-con.hq-card-featured {
	background-color: rgba(228, 176, 70, 0.06) !important;
	box-shadow: inset 0 0 0 1px #E4B046 !important;
	outline: none !important;
	transition: none;
}

/* =========================================================
 * === OUR PROJECTS SECTION ===
 * Header row + featured hero + 3-card row
 * ========================================================= */
.hq-projects > .e-con-inner,
.hq-projects.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}

/* FEATURED INSTALL gold pill — pill shape via padding + radius */
.hq-project-pill .elementor-heading-title {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: #E4B046;
	color: #060709 !important;
	line-height: 1;
}
.hq-project-featured .hq-project-pill {
	align-self: flex-start;
}

/* Project cards — overlay text at bottom-left */
.hq-project-card {
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease;
}
.hq-project-card:hover {
	transform: translateY(-4px);
}
.hq-project-card-l .elementor-heading-title,
.hq-project-card-v .elementor-heading-title {
	margin: 0;
}

@media (max-width: 1024px) {
	.hq-projects {
		padding-block: 100px !important;
		padding-inline: 40px !important;
	}
	.hq-projects-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.hq-projects-header-l,
	.hq-projects-header-r {
		width: 100% !important;
	}
	.hq-projects-h .elementor-heading-title {
		font-size: 42px !important;
	}
	.hq-projects-cards {
		flex-direction: column !important;
	}
	.hq-projects-cards > .hq-project-card {
		width: 100% !important;
		min-height: 280px !important;
	}
	.hq-project-featured {
		min-height: 400px !important;
	}
}

@media (max-width: 767px) {
	.hq-projects {
		padding-block: 80px !important;
		padding-inline: 24px !important;
	}
	.hq-projects-h .elementor-heading-title {
		font-size: 32px !important;
	}
	.hq-project-card-v .elementor-heading-title {
		font-size: 32px !important;
	}
}

/* =========================================================
 * === REVIEWS SECTION ===
 * Header row (eyebrow + H2 left, stars + meta right) + 3 cards
 * ========================================================= */
.hq-reviews > .e-con-inner,
.hq-reviews.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-reviews-h em,
.hq-reviews-h i {
	font-style: italic;
	color: #F2F2F2;
}
.hq-review-card {
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.hq-review-card:hover {
	border-color: #E4B046 !important;
	background-color: rgba(228, 176, 70, 0.06) !important;
}
.hq-review-quote p {
	margin: 0;
}

/* =========================================================
 * === FAQ SECTION ===
 * 2-col: header left, accordion right
 * ========================================================= */
.hq-faq > .e-con-inner,
.hq-faq.e-con-boxed > .e-con-inner {
	max-width: 1280px;
	margin-inline: auto;
}
.hq-faq-sub p {
	margin: 0;
	max-width: 380px;
}

/* Elementor Toggle widget — strip default styles, apply HQ look */
.hq-faq-toggle .elementor-toggle .elementor-toggle-item {
	border: 0;
	border-bottom: 1px solid #1F1F1F;
}
.hq-faq-toggle .elementor-toggle .elementor-toggle-item:first-child {
	border-top: 1px solid #1F1F1F;
}
.hq-faq-toggle .elementor-toggle .elementor-tab-title {
	background: transparent !important;
	color: #F2F2F2;
	padding: 24px 0;
	border: 0;
	font-family: Inter, sans-serif;
}
.hq-faq-toggle .elementor-toggle .elementor-tab-title.elementor-active {
	color: #E4B046;
	border: 0;
}
.hq-faq-toggle .elementor-toggle .elementor-tab-title:hover {
	color: #E4B046;
}
.hq-faq-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-icon {
	color: #E4B046;
}
.hq-faq-toggle .elementor-toggle .elementor-tab-content {
	background: transparent !important;
	border: 0;
	padding: 0 0 24px 0;
	color: #B8B8B8;
	max-width: 720px;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.hq-reviews, .hq-faq {
		padding-block: 80px !important;
		padding-inline: 40px !important;
	}
	.hq-reviews-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.hq-reviews-header-r {
		align-items: flex-start !important;
	}
	.hq-reviews-grid {
		flex-direction: column !important;
	}
	.hq-reviews-grid > .hq-review-card {
		width: 100% !important;
	}
	.hq-reviews-h .elementor-heading-title {
		font-size: 40px !important;
	}
	.hq-faq {
		flex-direction: column !important;
	}
	.hq-faq-l, .hq-faq-r {
		width: 100% !important;
	}
	.hq-faq-h .elementor-heading-title {
		font-size: 32px !important;
	}
}

@media (max-width: 767px) {
	.hq-reviews, .hq-faq {
		padding-block: 60px !important;
		padding-inline: 24px !important;
	}
	.hq-reviews-h .elementor-heading-title {
		font-size: 30px !important;
	}
	.hq-faq-h .elementor-heading-title {
		font-size: 26px !important;
	}
	.hq-faq-toggle .elementor-toggle .elementor-tab-title {
		font-size: 15px !important;
	}
}