/*
Theme Name: Supply Solar
Theme URI: https://supplysolar.com.au/
Author: Supply Solar
Description: Lightweight custom WordPress theme converted from the supplied static HTML pages with ACF-managed content.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: supply-solar
*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

img.custom-logo {
	height: auto !important;
}

.mega .mega-item div a {
	display: inline-block;
	padding: 4px;
	font-size: 12px;
}

.mega .mega-item:hover {
	background: var(--slate);
}

.mega .mega-item {
	padding: 0px 7px 10px;
	border-radius: 8px;
}

.mega .mega-item div {
	margin-left: 6px;
}

.mega .mega-item div a:after {
	content: ",";
}

a.mega-level3 {}

.mega .mega-item:after {
	content: "";
	background: #f59e0b;
	width: 7px;
	height: 7px;
	display: block;
	border-radius: 50%;
	position: absolute;
	top: 17px;
	left: 4px;
}

.mega .mega-item {
	position: relative;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 150px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose b {
	color: var(--ink);
}

.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

.spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sh);
}

.spec-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
}

.spec-row:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.spec-row .k {
	font-size: 14px;
	color: var(--body);
}

.spec-row .v {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	text-align: right;
	white-space: nowrap;
}

.spec-row .v em {
	color: var(--amber-dark);
}

.incl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}

.incl-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.incl-item .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.incl-item .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.incl-item h3 {
	font-size: 16.5px;
	margin-bottom: 5px;
}

.incl-item p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

.phase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
}

.phase-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	position: relative;
}

.phase-card .ph-ic {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--slate);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.phase-card .ph-ic svg {
	width: 24px;
	height: 24px;
	color: var(--amber-dark);
}

.phase-card h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

.phase-card p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 14px;
}

.phase-card ul {
	list-style: none;
	display: grid;
	gap: 8px;
}

.phase-card li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--ink-mid);
}

.phase-card li svg {
	width: 16px;
	height: 16px;
	color: var(--green-dk);
	flex: 0 0 auto;
	margin-top: 2px;
}

.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
}

.size-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table tbody tr.this {
	background: var(--amber-soft);
}

.size-table tbody tr.this:hover {
	background: var(--amber-soft);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys a {
	color: var(--ink);
}

.size-table .sys a:hover {
	color: var(--amber-dark);
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table .sys .badge {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--amber-dark);
	background: #fff;
	border: 1px solid var(--amber);
	border-radius: 50px;
	padding: 1px 8px;
	margin-top: 4px;
}

.size-table b {
	color: var(--ink);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {
	padding: 0 24px 22px;
	font-size: 15px;
	color: var(--body);
}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.why-grid, .steps, .reviews, .progs, .incl, .phase {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r {
		padding: 30px;
	}
	
	.why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs, .incl, .spec-grid, .phase {
		grid-template-columns: 1fr;
	}
	
	.spec-row:nth-child(odd) {
		border-right: 0;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--red: #dc2626;
	--red-lt: #fef2f2;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 150px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose b {
	color: var(--ink);
}

.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

.spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sh);
}

.spec-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
}

.spec-row:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.spec-row .k {
	font-size: 14px;
	color: var(--body);
}

.spec-row .v {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	text-align: right;
	white-space: nowrap;
}

.spec-row .v em {
	color: var(--amber-dark);
}

.incl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}

.incl-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.incl-item .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.incl-item .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.incl-item h3 {
	font-size: 16.5px;
	margin-bottom: 5px;
}

.incl-item p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

.judge {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
}

.judge-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
}

.judge-card.good {
	border-top: 4px solid var(--green);
}

.judge-card.care {
	border-top: 4px solid var(--amber);
}

.judge-card .jhead {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
}

.judge-card .jbadge {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.judge-card.good .jbadge {
	background: var(--green-lt);
}

.judge-card.good .jbadge svg {
	width: 20px;
	height: 20px;
	color: var(--green-dk);
}

.judge-card.care .jbadge {
	background: var(--amber-soft);
}

.judge-card.care .jbadge svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.judge-card h3 {
	font-size: 18px;
}

.judge-card ul {
	list-style: none;
	display: grid;
	gap: 9px;
}

.judge-card li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--ink-mid);
}

.judge-card li svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.judge-card.good li svg {
	color: var(--green-dk);
}

.judge-card.care li svg {
	color: var(--amber-dark);
}

.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
}

.size-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table tbody tr.this {
	background: var(--amber-soft);
}

.size-table tbody tr.this:hover {
	background: var(--amber-soft);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys a {
	color: var(--ink);
}

.size-table .sys a:hover {
	color: var(--amber-dark);
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table .sys .badge {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--amber-dark);
	background: #fff;
	border: 1px solid var(--amber);
	border-radius: 50px;
	padding: 1px 8px;
	margin-top: 4px;
}

.size-table b {
	color: var(--ink);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.why-grid, .steps, .reviews, .progs, .incl, .judge {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r {
		padding: 30px;
	}
	
	.why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs, .incl, .spec-grid, .judge {
		grid-template-columns: 1fr;
	}
	
	.spec-row:nth-child(odd) {
		border-right: 0;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 150px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

/* prose */
.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose b {
	color: var(--ink);
}

/* direct-answer snippet block (AEO) */
.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* spec grid (GEO citation magnet) */
.spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sh);
}

.spec-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
}

.spec-row:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.spec-row .k {
	font-size: 14px;
	color: var(--body);
}

.spec-row .v {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	text-align: right;
	white-space: nowrap;
}

.spec-row .v em {
	color: var(--amber-dark);
}

/* "what's included" feature list */
.incl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}

.incl-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.incl-item .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.incl-item .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.incl-item h3 {
	font-size: 16.5px;
	margin-bottom: 5px;
}

.incl-item p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

/* split content block */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

/* compare table */
.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
}

.size-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table tbody tr.this {
	background: var(--amber-soft);
}

.size-table tbody tr.this:hover {
	background: var(--amber-soft);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys a {
	color: var(--ink);
}

.size-table .sys a:hover {
	color: var(--amber-dark);
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table .sys .badge {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--amber-dark);
	background: #fff;
	border: 1px solid var(--amber);
	border-radius: 50px;
	padding: 1px 8px;
	margin-top: 4px;
}

.size-table b {
	color: var(--ink);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* lead magnet */
.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

/* rebate program cards */
.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.why-grid, .steps, .reviews, .progs, .incl {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r {
		padding: 30px;
	}
	
	.why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs, .incl, .spec-grid {
		grid-template-columns: 1fr;
	}
	
	.spec-row:nth-child(odd) {
		border-right: 0;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--com: #1d4ed8;
	--com-mid: #1e40af;
	--com-lt: #dbeafe;
	--com-soft: #eff6ff;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-com {
	background: var(--com);
	color: #fff;
}

.btn-com:hover {
	background: var(--com-mid);
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

/* topbar */
.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* nav */
header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

/* hero */
.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(29, 78, 216, .28), transparent 70%);
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hbadge.com svg {
	color: #93c5fd;
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

/* enquiry card */
.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select, .fld textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld textarea {
	height: 80px;
	resize: vertical;
}

.fld input:focus, .fld select:focus, .fld textarea:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder, .fld textarea::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* trust bar */
.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* sections */
.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.sec-com {
	background: var(--com-soft);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.eyebrow.com {
	color: var(--com);
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

/* AEO answer block */
.answer {
	background: var(--com-soft);
	border: 1px solid #bfdbfe;
	border-left: 4px solid var(--com);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* ROI stats row */
.roi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

.roi-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	text-align: center;
}

.roi-card .big {
	font-family: var(--disp);
	font-size: 38px;
	font-weight: 800;
	color: var(--com);
	line-height: 1;
	margin-bottom: 6px;
}

.roi-card .big span {
	font-size: 18px;
}

.roi-card p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

/* 5 service pillars */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.pcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px;
	transition: var(--t);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pcard:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.pcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.pcard.solar::before {
	background: linear-gradient(90deg, var(--amber), var(--amber-dark));
}

.pcard.battery::before {
	background: linear-gradient(90deg, #0891b2, #0e7490);
}

.pcard.ev::before {
	background: linear-gradient(90deg, #7c3aed, #6d28d9);
}

.pcard.lighting::before {
	background: linear-gradient(90deg, #059669, #047857);
}

.pcard.maint::before {
	background: linear-gradient(90deg, var(--com), var(--com-mid));
}

.pcard .ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.pcard.solar .ic {
	background: var(--amber-soft);
}

.pcard.solar .ic svg {
	color: var(--amber-dark);
}

.pcard.battery .ic {
	background: #e0f6fc;
}

.pcard.battery .ic svg {
	color: #0891b2;
}

.pcard.ev .ic {
	background: #ede9fe;
}

.pcard.ev .ic svg {
	color: #7c3aed;
}

.pcard.lighting .ic {
	background: #d1fae5;
}

.pcard.lighting .ic svg {
	color: #059669;
}

.pcard.maint .ic {
	background: var(--com-lt);
}

.pcard.maint .ic svg {
	color: var(--com);
}

.pcard .ic svg {
	width: 26px;
	height: 26px;
}

.pcard h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.pcard p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 16px;
	flex: 1;
}

.pcard .sub {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.pcard .sub li {
	font-size: 12.5px;
	background: var(--slate);
	color: var(--ink-mid);
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: 600;
}

.pcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.pcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.pcard:hover .more svg {
	transform: translateX(4px);
}

.pcard.wide {
	grid-column: span 2;
}

/* incentives comparison table (GEO) */
.comp-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.comp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.comp-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.comp-table thead th:first-child {
	background: var(--ink-soft);
}

.comp-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: middle;
}

.comp-table tbody tr:hover {
	background: var(--slate);
}

.comp-table .label {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 13.5px;
}

.comp-table .yes {
	color: var(--green-dk);
	font-weight: 600;
}

.comp-table .cond {
	color: var(--amber-dark);
	font-weight: 600;
}

.comp-table .no {
	color: var(--muted);
}

.comp-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 12px;
	text-align: center;
}

/* energy levers ranked list */
.levers {
	display: grid;
	gap: 14px;
}

.lever {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.lever-rank {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--com), var(--com-mid));
	color: #fff;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.lever-body {
	flex: 1;
}

.lever-body h4 {
	font-family: var(--disp);
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 3px;
}

.lever-body p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

.lever-saving {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	color: var(--com);
	white-space: nowrap;
}

/* business types strip */
.biz-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.biz-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	text-align: center;
	transition: var(--t);
}

.biz-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.biz-card .ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--com-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.biz-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--com);
}

.biz-card h3 {
	font-size: 16px;
	margin-bottom: 6px;
}

.biz-card p {
	font-size: 13.5px;
	color: var(--body);
	margin-bottom: 12px;
}

.biz-card .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.biz-card .more svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
	transition: var(--t);
}

.biz-card:hover .more svg {
	transform: translateX(3px);
}

/* payback calc visual */
.payback-strip {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: var(--sh-lg);
}

.pb-l {
	padding: 48px;
}

.pb-l .eyebrow {
	color: var(--amber);
}

.pb-l h2 {
	color: #fff;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 14px;
}

.pb-l h2 em {
	color: var(--amber);
}

.pb-l p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 24px;
}

.pb-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
	gap: 16px;
}

.pb-stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	padding: 14px 18px;
}

.pb-stat .ps-label {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .75);
}

.pb-stat .ps-val {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	color: #fff;
}

.pb-stat .ps-val.gold {
	color: var(--amber);
}

.pb-stat .ps-val.com {
	color: #93c5fd;
}

/* why us */
.cred-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cred {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cred .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cred .ic svg {
	width: 23px;
	height: 23px;
	color: var(--amber-dark);
}

.cred h3 {
	font-size: 16.5px;
	margin-bottom: 6px;
}

.cred p {
	font-size: 14px;
	margin: 0;
}

/* service areas */
.areas-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--com);
	color: var(--com);
	background: var(--com-soft);
}

.area-chip svg {
	width: 13px;
	height: 13px;
	color: var(--com);
}

/* reviews */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: var(--amber);
}

.stars svg {
	width: 16px;
	height: 16px;
}

.review p {
	font-size: 15px;
	color: var(--ink-mid);
	font-style: italic;
	margin-bottom: 16px;
}

.who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.who b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
}

.who span {
	font-size: 12.5px;
	color: var(--muted);
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.faq summary {
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	gap: 12px;
}

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

.pm {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--muted);
	transition: var(--t);
}

.faq[open] .pm {
	border-color: var(--com);
	color: var(--com);
}

.faq[open] .pm::before {
	content: "−";
}

.pm::before {
	content: "+";
}

.faq .a {}

/* silo pills */
.silo-label {
	font-size: 13px;
	font-weight: 700;
	font-family: var(--disp);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}

.silo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
}

.silo-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--com-lt);
	border: 1px solid rgba(29, 78, 216, .2);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--com);
	font-family: var(--disp);
	transition: var(--t);
}

.silo-pill:hover {
	background: var(--com);
	color: #fff;
}

/* final CTA */
.final {
	background: radial-gradient(130% 140% at 70% -10%, var(--ink-soft), var(--ink));
	color: #fff;
	padding: 90px 0;
	text-align: center;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 18px;
}

.final h2 em {
	color: var(--amber);
}

.final > div > p {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 32px;
}

.final-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.final-fine {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/* footer */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .7);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

.foot-contact {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.foot-contact a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.foot-contact a:hover {
	color: var(--amber);
}

.foot-contact svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
	flex: 0 0 auto;
}

.foot-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.foot-badges span {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--disp);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .75);
}

.footer-col h4 {
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

.footer-col a {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 8px;
}

.footer-col a:hover {
	color: var(--amber);
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}

.footer-btm a {
	color: rgba(255, 255, 255, .5);
}

.footer-btm a:hover {
	color: var(--amber);
}

.ackn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .38);
	margin-top: 14px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* sticky mobile CTA */
.mcta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.mcta .btn {
	flex: 1;
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .7);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: var(--t);
}

.modal.on {
	opacity: 1;
	visibility: visible;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-top h3 {
	font-size: 19px;
	color: var(--ink);
}

.modal-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
	margin-top: 2px;
}

.modal-x {
	background: none;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(10, 22, 40, .12);
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.modal-body {
	padding: 30px 28px;
}

.success {
	text-align: center;
}

.chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--com-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.chk svg {
	width: 28px;
	height: 28px;
	color: var(--com);
}

.success h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.success p {
	color: var(--body);
}

@media (max-width:980px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.pillars {
		grid-template-columns: 1fr 1fr;
	}
	
	.pcard.wide {
		grid-column: span 1;
	}
	
	.roi-row, .biz-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.cred-grid {
		grid-template-columns: 1fr;
	}
	
	.payback-strip {
		grid-template-columns: 1fr;
	}
	
	.pb-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	
	.reviews {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width:680px) {
	.nav-links, .nav-phone, .mega {
		display: none;
	}
	
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 16px;
		gap: 4px;
		box-shadow: var(--sh-lg);
	}
	
	.nav-links.open .mega {
		display: grid;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 6px 10px;
		min-width: auto;
	}
	
	.burger {
		display: flex;
	}
	
	.pillars, .roi-row, .biz-grid, .reviews {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 68px;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--com: #1d4ed8;
	--com-mid: #1e40af;
	--com-lt: #dbeafe;
	--com-soft: #eff6ff;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-com {
	background: var(--com);
	color: #fff;
}

.btn-com:hover {
	background: var(--com-mid);
	transform: translateY(-2px);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	background: var(--slate);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

/* Topbar */
.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Nav */
header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 260px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* Breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

/* Hero */
.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(29, 78, 216, .28), transparent 70%);
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hbadge.com svg {
	color: #93c5fd;
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

/* Lead card */
.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* Trust bar */
.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* Sections */
.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-com {
	background: var(--com-soft);
}

.sec-ink {
	background: var(--ink);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.eyebrow.com {
	color: var(--com);
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

/* AEO answer block */
.answer {
	background: var(--com-soft);
	border: 1px solid #bfdbfe;
	border-left: 4px solid var(--com);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* System sizing table (GEO) */
.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.size-table thead th:first-child {
	background: var(--ink-soft);
}

.size-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table .rec {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--com);
}

.size-table .highlight {
	background: var(--com-soft);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
}

/* 4 sub-page pillar cards */
.sub-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.spcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px;
	transition: var(--t);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.spcard:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.spcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--com), var(--com-mid));
}

.spcard .ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--com-lt);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.spcard .ic svg {
	width: 26px;
	height: 26px;
	color: var(--com);
}

.spcard h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.spcard p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 16px;
	flex: 1;
}

.spcard .sub {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.spcard .sub li {
	font-size: 12.5px;
	background: var(--slate);
	color: var(--ink-mid);
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: 600;
}

.spcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.spcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--com);
	transition: var(--t);
}

.spcard:hover .more svg {
	transform: translateX(4px);
}

/* Incentives breakdown (GEO table) */
.inc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.inc-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 14px 18px;
}

.inc-table thead th:first-child {
	background: var(--ink-soft);
}

.inc-table tbody td {
	padding: 14px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.inc-table tbody tr:hover {
	background: var(--slate);
}

.inc-table .label {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 14px;
}

.inc-table .yes {
	color: var(--green-dk);
	font-weight: 600;
}

.inc-table .cond {
	color: var(--amber-dark);
	font-weight: 600;
}

.inc-table .no {
	color: var(--muted);
}

.inc-table .rec-row td {
	background: var(--com-soft);
}

/* ROI split strip */
.roi-strip {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: var(--sh-lg);
}

.roi-l {
	padding: 48px;
}

.roi-l .eyebrow {
	color: var(--amber);
}

.roi-l h2 {
	color: #fff;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 14px;
}

.roi-l h2 em {
	color: var(--amber);
}

.roi-l p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 24px;
}

.roi-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
	gap: 12px;
}

.roi-stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	padding: 14px 18px;
}

.roi-stat .rs-label {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .75);
}

.roi-stat .rs-val {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	color: #fff;
}

.roi-stat .rs-val.gold {
	color: var(--amber);
}

.roi-stat .rs-val.com {
	color: #93c5fd;
}

/* Process steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(12.5% + 10px);
	right: calc(12.5% + 10px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--com));
	z-index: 0;
}

.step {
	position: relative;
	z-index: 1;
	text-align: center;
}

.step .num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.step h3 {
	font-size: 16px;
	margin-bottom: 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

/* Benefits 3-col */
.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.benefit {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
}

.benefit .ic {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--com-lt);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.benefit .ic svg {
	width: 24px;
	height: 24px;
	color: var(--com);
}

.benefit h3 {
	font-size: 17px;
	margin-bottom: 8px;
}

.benefit p {
	font-size: 14.5px;
	margin: 0;
}

/* Why us */
.cred-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cred {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cred .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cred .ic svg {
	width: 23px;
	height: 23px;
	color: var(--amber-dark);
}

.cred h3 {
	font-size: 16.5px;
	margin-bottom: 6px;
}

.cred p {
	font-size: 14px;
	margin: 0;
}

/* Service areas */
.areas-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--com);
	color: var(--com);
	background: var(--com-soft);
}

.area-chip svg {
	width: 13px;
	height: 13px;
	color: var(--com);
}

/* Reviews */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: var(--amber);
}

.stars svg {
	width: 16px;
	height: 16px;
}

.review p {
	font-size: 15px;
	color: var(--ink-mid);
	font-style: italic;
	margin-bottom: 16px;
}

.who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.who b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
}

.who span {
	font-size: 12.5px;
	color: var(--muted);
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.faq summary {
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	gap: 12px;
}

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

.pm {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--muted);
	transition: var(--t);
}

.faq[open] .pm {
	border-color: var(--com);
	color: var(--com);
}

.faq[open] .pm::before {
	content: "−";
}

.pm::before {
	content: "+";
}

.faq .a {}

/* Silo pills */
.silo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.silo-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--com-lt);
	border: 1px solid rgba(29, 78, 216, .2);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--com);
	font-family: var(--disp);
	transition: var(--t);
}

.silo-pill:hover {
	background: var(--com);
	color: #fff;
}

/* Final CTA */
.final {
	background: radial-gradient(130% 140% at 70% -10%, var(--ink-soft), var(--ink));
	color: #fff;
	padding: 90px 0;
	text-align: center;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 18px;
}

.final h2 em {
	color: var(--amber);
}

.final > div > p {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 32px;
}

.final-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.final-fine {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/* Footer */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .7);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

.foot-contact {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.foot-contact a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.foot-contact a:hover, .footer-col a:hover {
	color: var(--amber);
}

.foot-contact svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
	flex: 0 0 auto;
}

.foot-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.foot-badges span {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--disp);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .75);
}

.footer-col h4 {
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

.footer-col a {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 8px;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}

.footer-btm a {
	color: rgba(255, 255, 255, .5);
}

.footer-btm a:hover {
	color: var(--amber);
}

.ackn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .38);
	margin-top: 14px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Sticky mobile CTA */
.mcta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.mcta .btn {
	flex: 1;
}

/* Modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .7);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: var(--t);
}

.modal.on {
	opacity: 1;
	visibility: visible;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-top h3 {
	font-size: 19px;
	color: var(--ink);
}

.modal-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
	margin-top: 2px;
}

.modal-x {
	background: rgba(10, 22, 40, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.modal-body {
	padding: 30px 28px;
	text-align: center;
}

.chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--com-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.chk svg {
	width: 28px;
	height: 28px;
	color: var(--com);
}

.modal-body h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.modal-body p {
	color: var(--body);
}

@media (max-width:980px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.sub-pillars {
		grid-template-columns: 1fr;
	}
	
	.benefits {
		grid-template-columns: 1fr 1fr;
	}
	
	.cred-grid {
		grid-template-columns: 1fr;
	}
	
	.roi-strip {
		grid-template-columns: 1fr;
	}
	
	.roi-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	
	.reviews {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	
	.steps::before {
		display: none;
	}
}

@media (max-width:680px) {
	.nav-links, .nav-phone, .mega {
		display: none;
	}
	
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 16px;
		gap: 4px;
		box-shadow: var(--sh-lg);
	}
	
	.nav-links.open .mega {
		display: grid;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 6px 10px;
		min-width: auto;
	}
	
	.burger {
		display: flex;
	}
	
	.benefits, .reviews, .steps {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 68px;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--ev: #7c3aed;
	--ev-mid: #6d28d9;
	--ev-lt: #ede9fe;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ev {
	background: var(--ev);
	color: #fff;
}

.btn-ev:hover {
	background: var(--ev-mid);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

/* topbar */
.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* nav */
header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

/* hero */
.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 58, 237, .22), transparent 70%);
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hbadge.ev svg {
	color: #a78bfa;
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

/* quote card */
.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* trust bar */
.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* section layout */
.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.eyebrow.ev {
	color: var(--ev);
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

/* AEO answer block */
.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* charger speed cards (what-is section) */
.speed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}

.speed-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	position: relative;
	overflow: hidden;
}

.speed-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.speed-card.s1::before {
	background: var(--muted);
}

.speed-card.s2::before {
	background: var(--amber);
}

.speed-card.s3::before {
	background: var(--ev);
}

.speed-card .stype {
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.speed-card h3 {
	font-size: 18px;
	margin-bottom: 6px;
}

.speed-card .kwh {
	font-family: var(--disp);
	font-size: 30px;
	font-weight: 800;
	color: var(--ink);
	margin: 10px 0 4px;
}

.speed-card .kwh span {
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
}

.speed-card .km {
	font-size: 13.5px;
	color: var(--body);
	font-weight: 600;
	margin-bottom: 12px;
}

.speed-card p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

.speed-card .rec {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--amber-soft);
	color: var(--amber-dark);
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 50px;
	margin-top: 12px;
}

.speed-card .rec.ev {
	background: var(--ev-lt);
	color: var(--ev);
}

.speed-card .rec svg {
	width: 11px;
	height: 11px;
}

/* EV charger brand cards */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	position: relative;
}

.bcard:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.bcard-top {
	padding: 28px 28px 20px;
	border-bottom: 1px solid var(--line);
}

.bcard-top .bname {
	font-family: var(--disp);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.02em;
	margin-bottom: 2px;
}

.bcard-top .bmodel {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 14px;
}

.bcard-top .bkw {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 6px;
}

.bcard-top .bkw .big {
	font-family: var(--disp);
	font-size: 36px;
	font-weight: 800;
	color: var(--ink);
}

.bcard-top .bkw .unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

.bcard-top .bkw-sub {
	font-size: 12.5px;
	color: var(--muted);
	font-weight: 500;
	margin-bottom: 10px;
}

.btag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 50px;
	margin-top: 8px;
}

.btag.amber {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.btag.ev {
	background: var(--ev-lt);
	color: var(--ev);
}

.btag.green {
	background: var(--green-lt);
	color: var(--green-dk);
}

.btag svg {
	width: 11px;
	height: 11px;
}

.bcard-body {
	padding: 22px 28px 26px;
}

.bspecs {
	list-style: none;
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.bspecs li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--body);
}

.bspecs li svg {
	width: 16px;
	height: 16px;
	color: var(--green-dk);
	flex: 0 0 auto;
	margin-top: 2px;
}

.bideal {
	background: var(--slate);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 13px;
	color: var(--ink-mid);
	margin-bottom: 18px;
}

.bideal b {
	color: var(--ink);
	font-family: var(--disp);
}

.bcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.bcard:hover .more svg {
	transform: translateX(4px);
}

.bcard.feat {
	border-color: var(--ev);
}

.bcard .badge-feat {
	position: absolute;
	top: 16px;
	right: -30px;
	background: var(--ev);
	color: #fff;
	font-family: var(--disp);
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 36px;
	transform: rotate(35deg);
	letter-spacing: .04em;
}

/* solar charging highlight strip */
.solar-strip {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: var(--sh-lg);
}

.solar-strip-l {
	padding: 48px;
}

.solar-strip-l .eyebrow {
	color: var(--amber);
}

.solar-strip-l h2 {
	color: #fff;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 14px;
}

.solar-strip-l h2 em {
	color: var(--amber);
}

.solar-strip-l p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 24px;
}

.solar-strip-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
	gap: 20px;
}

.mode-card {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r);
	padding: 18px;
}

.mode-card h4 {
	font-family: var(--disp);
	font-size: 15px;
	color: #fff;
	margin-bottom: 5px;
}

.mode-card p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .75);
	margin: 0;
}

.mode-card .mode-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(245, 158, 11, .2);
	color: var(--amber);
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 50px;
	margin-bottom: 8px;
}

.mode-card.eco .mode-badge {
	background: rgba(14, 159, 110, .2);
	color: #6ee7b7;
}

/* comparison table */
.comp-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.comp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.comp-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.comp-table thead th:first-child {
	background: var(--ink-soft);
}

.comp-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: middle;
}

.comp-table tbody tr:hover {
	background: var(--slate);
}

.comp-table .label {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 13.5px;
}

.comp-table .yes {
	color: var(--green-dk);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.comp-table .yes svg {
	width: 14px;
	height: 14px;
}

.comp-table .no {
	color: var(--muted);
}

.comp-table .best {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ev);
}

.comp-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 12px;
	text-align: center;
}

/* steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(12.5% + 10px);
	right: calc(12.5% + 10px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--ev));
	z-index: 0;
}

.step {
	position: relative;
	z-index: 1;
	text-align: center;
}

.step .num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.step h3 {
	font-size: 16px;
	margin-bottom: 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

/* rebate truth block */
.rebate-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 24px;
}

.rebate-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.rebate-card .ic {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.rebate-card .ic.green {
	background: var(--green-lt);
}

.rebate-card .ic.green svg {
	color: var(--green-dk);
}

.rebate-card .ic.amber {
	background: var(--amber-soft);
}

.rebate-card .ic.amber svg {
	color: var(--amber-dark);
}

.rebate-card .ic.slate {
	background: var(--slate);
}

.rebate-card .ic.slate svg {
	color: var(--muted);
}

.rebate-card .ic svg {
	width: 24px;
	height: 24px;
}

.rebate-card h3 {
	font-size: 17px;
	margin-bottom: 7px;
}

.rebate-card p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 8px;
}

.rebate-card .tag-available {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--green-lt);
	color: var(--green-dk);
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 50px;
}

.rebate-card .tag-unavailable {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--slate);
	color: var(--muted);
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 50px;
}

.rebate-note {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--ink-mid);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

/* why us */
.cred-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cred {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cred .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cred .ic svg {
	width: 23px;
	height: 23px;
	color: var(--amber-dark);
}

.cred h3 {
	font-size: 16.5px;
	margin-bottom: 6px;
}

.cred p {
	font-size: 14px;
	margin: 0;
}

/* service areas */
.areas-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	color: var(--ink);
	background: var(--amber-soft);
}

.area-chip svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
}

/* reviews */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: var(--amber);
}

.stars svg {
	width: 16px;
	height: 16px;
}

.review p {
	font-size: 15px;
	color: var(--ink-mid);
	font-style: italic;
	margin-bottom: 16px;
}

.who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.who b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
}

.who span {
	font-size: 12.5px;
	color: var(--muted);
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.faq summary {
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	gap: 12px;
}

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

.pm {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--muted);
	transition: var(--t);
}

.faq[open] .pm {
	border-color: var(--amber);
	color: var(--amber-dark);
}

.faq[open] .pm::before {
	content: "−";
}

.pm::before {
	content: "+";
}

.faq .a {}

/* related pages */
.related {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.rel-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	transition: var(--t);
}

.rel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.rel-card .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--slate);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.rel-card .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.rel-card h3 {
	font-size: 15.5px;
	margin-bottom: 6px;
}

.rel-card p {
	font-size: 13.5px;
	color: var(--body);
	margin-bottom: 12px;
}

.rel-card .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rel-card .more svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
	transition: var(--t);
}

.rel-card:hover .more svg {
	transform: translateX(3px);
}

/* final CTA */
.final {
	background: radial-gradient(130% 140% at 70% -10%, var(--ink-soft), var(--ink));
	color: #fff;
	padding: 90px 0;
	text-align: center;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 18px;
}

.final h2 em {
	color: var(--amber);
}

.final > div > p {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 32px;
}

.final-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.final-fine {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/* footer */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .7);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

.foot-contact {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.foot-contact a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.foot-contact a:hover {
	color: var(--amber);
}

.foot-contact svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
	flex: 0 0 auto;
}

.foot-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.foot-badges span {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--disp);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .75);
}

.footer-col h4 {
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

.footer-col a {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 8px;
}

.footer-col a:hover {
	color: var(--amber);
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}

.footer-btm a {
	color: rgba(255, 255, 255, .5);
}

.footer-btm a:hover {
	color: var(--amber);
}

.ackn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .38);
	margin-top: 14px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* sticky mobile CTA */
.mcta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.mcta .btn {
	flex: 1;
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .7);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: var(--t);
}

.modal.on {
	opacity: 1;
	visibility: visible;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-top h3 {
	font-size: 19px;
	color: var(--ink);
}

.modal-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
	margin-top: 2px;
}

.modal-x {
	background: none;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(10, 22, 40, .12);
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.modal-body {
	padding: 30px 28px;
}

.success {
	text-align: center;
}

.chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.chk svg {
	width: 28px;
	height: 28px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.success p {
	color: var(--body);
}

@media (max-width:980px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.brand-grid, .speed-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.rebate-grid, .cred-grid {
		grid-template-columns: 1fr;
	}
	
	.solar-strip {
		grid-template-columns: 1fr;
	}
	
	.solar-strip-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	
	.related {
		grid-template-columns: 1fr 1fr;
	}
	
	.reviews {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	
	.steps::before {
		display: none;
	}
}

@media (max-width:680px) {
	.nav-links, .nav-phone, .mega {
		display: none;
	}
	
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 16px;
		gap: 4px;
		box-shadow: var(--sh-lg);
	}
	
	.nav-links.open .mega {
		display: grid;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 6px 10px;
		min-width: auto;
	}
	
	.burger {
		display: flex;
	}
	
	.brand-grid, .speed-grid, .related, .reviews {
		grid-template-columns: 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 68px;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--hp: #059669;
	--hp-mid: #047857;
	--hp-lt: #d1fae5;
	--hp-soft: #ecfdf5;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-hp {
	background: var(--hp);
	color: #fff;
}

.btn-hp:hover {
	background: var(--hp-mid);
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

/* topbar */
.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* nav */
header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

/* hero */
.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(5, 150, 105, .25), transparent 70%);
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hbadge.hp svg {
	color: #6ee7b7;
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

/* quote card */
.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* trust bar */
.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* sections */
.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-hp {
	background: var(--hp-soft);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.eyebrow.hp {
	color: var(--hp);
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

/* AEO answer block */
.answer {
	background: var(--hp-soft);
	border: 1px solid #a7f3d0;
	border-left: 4px solid var(--hp);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* how heat pump works — 3-step visual */
.how-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.how-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	text-align: center;
	position: relative;
}

.how-card .step-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hp), var(--hp-mid));
	color: #fff;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.how-card .ic {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--hp-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
}

.how-card .ic svg {
	width: 28px;
	height: 28px;
	color: var(--hp);
}

.how-card h3 {
	font-size: 17px;
	margin-bottom: 8px;
}

.how-card p {
	font-size: 14.5px;
	color: var(--body);
	margin: 0;
}

.how-arrow {
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hp);
	font-size: 24px;
	font-weight: 700;
	z-index: 2;
}

/* savings comparison table (GEO magnet) */
.comp-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.comp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.comp-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.comp-table thead th:first-child {
	background: var(--ink-soft);
}

.comp-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: middle;
}

.comp-table tbody tr:hover {
	background: var(--slate);
}

.comp-table .label {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 13.5px;
}

.comp-table .best {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--hp);
}

.comp-table .good {
	color: var(--amber-dark);
	font-weight: 600;
}

.comp-table .poor {
	color: var(--muted);
}

.comp-table .rec-row {
	background: var(--hp-soft);
}

.comp-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 12px;
	text-align: center;
}

/* benefits 3-col */
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.benefit-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
}

.benefit-card .ic {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--hp-lt);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.benefit-card .ic svg {
	width: 24px;
	height: 24px;
	color: var(--hp);
}

.benefit-card h3 {
	font-size: 17.5px;
	margin-bottom: 8px;
}

.benefit-card p {
	font-size: 14.5px;
	margin: 0;
}

/* rebate blocks */
.rebate-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 24px;
}

.rebate-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.rebate-card.featured {
	border-color: var(--hp);
	background: var(--hp-soft);
}

.rebate-card .ic {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.rebate-card .ic.hp {
	background: var(--hp-lt);
}

.rebate-card .ic.hp svg {
	color: var(--hp);
}

.rebate-card .ic.amber {
	background: var(--amber-soft);
}

.rebate-card .ic.amber svg {
	color: var(--amber-dark);
}

.rebate-card .ic svg {
	width: 24px;
	height: 24px;
}

.rebate-card h3 {
	font-size: 17px;
	margin-bottom: 7px;
}

.rebate-card .amount {
	font-family: var(--disp);
	font-size: 28px;
	font-weight: 800;
	color: var(--hp);
	margin: 6px 0 4px;
	line-height: 1;
}

.rebate-card .amount.amber {
	color: var(--amber-dark);
}

.rebate-card p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 8px;
}

.rebate-card .for {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--hp);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rebate-note {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--ink-mid);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

/* gas switch strip */
.gas-strip {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: var(--sh-lg);
}

.gas-l {
	padding: 48px;
}

.gas-l .eyebrow {
	color: var(--amber);
}

.gas-l h2 {
	color: #fff;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 14px;
}

.gas-l h2 em {
	color: var(--amber);
}

.gas-l p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 24px;
}

.gas-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
	gap: 16px;
}

.gas-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.gas-step .dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hp), var(--hp-mid));
	color: #fff;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-top: 2px;
}

.gas-step h4 {
	font-family: var(--disp);
	font-size: 15px;
	color: #fff;
	margin-bottom: 3px;
}

.gas-step p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
	margin: 0;
}

/* solar pairing strip */
.solar-pair {
	background: var(--hp-soft);
	border: 1px solid #a7f3d0;
	border-radius: var(--r-lg);
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.solar-pair h3 {
	font-size: clamp(22px, 2.8vw, 30px);
	margin-bottom: 12px;
}

.solar-pair p {
	font-size: 15.5px;
	color: var(--body);
	margin-bottom: 18px;
}

.solar-pair .saving-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hp);
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 50px;
}

.solar-pair .saving-pill svg {
	width: 16px;
	height: 16px;
}

.solar-savings {
	display: grid;
	gap: 14px;
}

.saving-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 18px;
}

.saving-row .sr-label {
	font-size: 14px;
	color: var(--body);
}

.saving-row .sr-val {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 16px;
	color: var(--hp);
}

/* steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(12.5% + 10px);
	right: calc(12.5% + 10px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--hp));
	z-index: 0;
}

.step {
	position: relative;
	z-index: 1;
	text-align: center;
}

.step .num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.step h3 {
	font-size: 16px;
	margin-bottom: 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

/* why us */
.cred-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cred {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cred .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cred .ic svg {
	width: 23px;
	height: 23px;
	color: var(--amber-dark);
}

.cred h3 {
	font-size: 16.5px;
	margin-bottom: 6px;
}

.cred p {
	font-size: 14px;
	margin: 0;
}

/* service areas */
.areas-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--hp);
	color: var(--hp);
	background: var(--hp-soft);
}

.area-chip svg {
	width: 13px;
	height: 13px;
	color: var(--hp);
}

/* reviews */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: var(--amber);
}

.stars svg {
	width: 16px;
	height: 16px;
}

.review p {
	font-size: 15px;
	color: var(--ink-mid);
	font-style: italic;
	margin-bottom: 16px;
}

.who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.who b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
}

.who span {
	font-size: 12.5px;
	color: var(--muted);
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.faq summary {
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	gap: 12px;
}

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

.pm {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--muted);
	transition: var(--t);
}

.faq[open] .pm {
	border-color: var(--hp);
	color: var(--hp);
}

.faq[open] .pm::before {
	content: "−";
}

.pm::before {
	content: "+";
}

.faq .a {}

/* related + silo child pages */
.silo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.silo-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--hp-lt);
	border: 1px solid rgba(5, 150, 105, .2);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hp);
	font-family: var(--disp);
	transition: var(--t);
}

.silo-pill:hover {
	background: var(--hp);
	color: #fff;
}

.related {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.rel-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	transition: var(--t);
}

.rel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.rel-card .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--slate);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.rel-card .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.rel-card h3 {
	font-size: 15.5px;
	margin-bottom: 6px;
}

.rel-card p {
	font-size: 13.5px;
	color: var(--body);
	margin-bottom: 12px;
}

.rel-card .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rel-card .more svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
	transition: var(--t);
}

.rel-card:hover .more svg {
	transform: translateX(3px);
}

/* final CTA */
.final {
	background: radial-gradient(130% 140% at 70% -10%, var(--ink-soft), var(--ink));
	color: #fff;
	padding: 90px 0;
	text-align: center;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 18px;
}

.final h2 em {
	color: var(--amber);
}

.final > div > p {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 32px;
}

.final-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.final-fine {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/* footer */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .7);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

.foot-contact {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.foot-contact a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.foot-contact a:hover {
	color: var(--amber);
}

.foot-contact svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
	flex: 0 0 auto;
}

.foot-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.foot-badges span {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--disp);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .75);
}

.footer-col h4 {
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

.footer-col a {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 8px;
}

.footer-col a:hover {
	color: var(--amber);
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}

.footer-btm a {
	color: rgba(255, 255, 255, .5);
}

.footer-btm a:hover {
	color: var(--amber);
}

.ackn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .38);
	margin-top: 14px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* sticky mobile CTA */
.mcta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.mcta .btn {
	flex: 1;
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .7);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: var(--t);
}

.modal.on {
	opacity: 1;
	visibility: visible;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-top h3 {
	font-size: 19px;
	color: var(--ink);
}

.modal-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
	margin-top: 2px;
}

.modal-x {
	background: none;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(10, 22, 40, .12);
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.modal-body {
	padding: 30px 28px;
}

.success {
	text-align: center;
}

.chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--hp-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.chk svg {
	width: 28px;
	height: 28px;
	color: var(--hp);
}

.success h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.success p {
	color: var(--body);
}

@media (max-width:980px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.how-grid, .benefits-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.rebate-grid, .cred-grid {
		grid-template-columns: 1fr;
	}
	
	.gas-strip, .solar-pair {
		grid-template-columns: 1fr;
	}
	
	.gas-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	
	.related {
		grid-template-columns: 1fr 1fr;
	}
	
	.reviews {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	
	.steps::before {
		display: none;
	}
}

@media (max-width:680px) {
	.nav-links, .nav-phone, .mega {
		display: none;
	}
	
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 16px;
		gap: 4px;
		box-shadow: var(--sh-lg);
	}
	
	.nav-links.open .mega {
		display: grid;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 6px 10px;
		min-width: auto;
	}
	
	.burger {
		display: flex;
	}
	
	.how-grid, .benefits-grid, .related, .reviews {
		grid-template-columns: 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 68px;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
	}
	
	.how-arrow {
		display: none;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--teal: #0891b2;
	--teal-lt: #e0f6fc;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

/* hero */
.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

/* battery accent orb — teal glow */
.hero::before {
	content: "";
	position: absolute;
	left: -100px;
	bottom: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(8, 145, 178, .18), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hbadge.teal svg {
	color: #67e8f9;
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

/* quote card */
.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* trust bar */
.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* section layout */
.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

.sec-ink .eyebrow {
	color: var(--amber);
}

/* answer snippet (AEO) */
.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* how-it-works / benefits */
.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose b {
	color: var(--ink);
}

/* why-battery benefits grid */
.why-grid2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
}

.why-card .ic {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--teal-lt);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.why-card .ic svg {
	width: 24px;
	height: 24px;
	color: var(--teal);
}

.why-card h3 {
	font-size: 17.5px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 14.5px;
	margin: 0;
}

/* battery brand cards */
.batt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.batt-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	position: relative;
}

.batt-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.batt-top {
	padding: 28px 28px 20px;
	border-bottom: 1px solid var(--line);
}

.batt-top .brand-name {
	font-family: var(--disp);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.02em;
	margin-bottom: 2px;
}

.batt-top .brand-model {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 14px;
}

.batt-top .cap {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 10px;
}

.batt-top .cap .big {
	font-family: var(--disp);
	font-size: 36px;
	font-weight: 800;
	color: var(--ink);
}

.batt-top .cap .unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

.batt-top .cap-label {
	font-size: 12.5px;
	color: var(--muted);
	font-weight: 500;
}

.batt-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--teal-lt);
	color: var(--teal);
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 50px;
	margin-top: 8px;
}

.batt-tag.amber {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.batt-tag.green {
	background: var(--green-lt);
	color: var(--green-dk);
}

.batt-tag svg {
	width: 11px;
	height: 11px;
}

.batt-body {
	padding: 22px 28px 26px;
}

.batt-specs {
	list-style: none;
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.batt-specs li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--body);
}

.batt-specs li svg {
	width: 16px;
	height: 16px;
	color: var(--green-dk);
	flex: 0 0 auto;
	margin-top: 2px;
}

.batt-ideal {
	background: var(--slate);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 13px;
	color: var(--ink-mid);
	margin-bottom: 18px;
}

.batt-ideal b {
	color: var(--ink);
	font-family: var(--disp);
}

.batt-card .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.batt-card .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.batt-card:hover .more svg {
	transform: translateX(4px);
}

.batt-card.feat {
	border-color: var(--amber);
}

.batt-card .badge-feat {
	position: absolute;
	top: 16px;
	right: -30px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 36px;
	transform: rotate(35deg);
	letter-spacing: .04em;
}

/* comparison table */
.comp-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.comp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.comp-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.comp-table thead th:first-child {
	background: var(--ink-soft);
}

.comp-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: middle;
}

.comp-table tbody tr:hover {
	background: var(--slate);
}

.comp-table .label {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 13.5px;
}

.comp-table .yes {
	color: var(--green-dk);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
}

.comp-table .yes svg {
	width: 15px;
	height: 15px;
}

.comp-table .no {
	color: var(--muted);
}

.comp-table .best {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--amber-dark);
}

.comp-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 12px;
	text-align: center;
}

/* split layout */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--teal-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--teal);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

/* rebate program blocks */
.progs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 24px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.prog .ic {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 24px;
	height: 24px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 7px;
}

.prog p {
	font-size: 14.5px;
	margin-bottom: 8px;
}

.prog .for {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--amber-dark);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rebate-note {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--ink-mid);
	display: flex;
	gap: 12px;
	align-items: flex-start;
	max-width: 860px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

/* how it works steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(12.5% + 10px);
	right: calc(12.5% + 10px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--teal));
	z-index: 0;
}

.step {
	position: relative;
	z-index: 1;
	text-align: center;
}

.step .num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.step h3 {
	font-size: 16px;
	margin-bottom: 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

/* package comparison strip */
.pkgs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.pkg {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
}

.pkg.rec {
	border-color: var(--teal);
	background: var(--teal-lt);
}

.pkg .pkg-label {
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 10px;
}

.pkg.rec .pkg-label {
	color: var(--teal);
}

.pkg h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.pkg p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 16px;
}

.pkg ul {
	list-style: none;
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
}

.pkg ul li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 14px;
}

.pkg ul li svg {
	width: 16px;
	height: 16px;
	color: var(--green-dk);
	flex: 0 0 auto;
	margin-top: 2px;
}

/* why us */
.cred-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cred {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cred .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cred .ic svg {
	width: 23px;
	height: 23px;
	color: var(--amber-dark);
}

.cred h3 {
	font-size: 16.5px;
	margin-bottom: 6px;
}

.cred p {
	font-size: 14px;
	margin: 0;
}

/* service areas */
.areas-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	color: var(--ink);
	background: var(--amber-soft);
}

.area-chip svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
}

/* reviews */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: var(--amber);
}

.stars svg {
	width: 16px;
	height: 16px;
}

.review p {
	font-size: 15px;
	color: var(--ink-mid);
	font-style: italic;
	margin-bottom: 16px;
}

.who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.who b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
}

.who span {
	font-size: 12.5px;
	color: var(--muted);
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.faq summary {}

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

.pm {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--muted);
	transition: var(--t);
}

.faq[open] .pm {
	border-color: var(--amber);
	color: var(--amber-dark);
}

.faq[open] .pm::before {
	content: "";
}

.pm::before {
	content: "+";
}

.faq .a {}

/* related links */
.related {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.rel-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	transition: var(--t);
}

.rel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.rel-card .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--slate);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.rel-card .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.rel-card h3 {
	font-size: 15.5px;
	margin-bottom: 6px;
}

.rel-card p {
	font-size: 13.5px;
	color: var(--body);
	margin-bottom: 12px;
}

.rel-card .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rel-card .more svg {
	width: 13px;
	height: 13px;
	color: var(--amber-dark);
	transition: var(--t);
}

.rel-card:hover .more svg {
	transform: translateX(3px);
}

/* final CTA */
.final {
	background: radial-gradient(130% 140% at 70% -10%, var(--ink-soft), var(--ink));
	color: #fff;
	padding: 90px 0;
	text-align: center;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 18px;
}

.final h2 em {
	color: var(--amber);
}

.final > div > p {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 32px;
}

.final-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.final-fine {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/* footer */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .7);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

.foot-contact {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.foot-contact a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.foot-contact a:hover {
	color: var(--amber);
}

.foot-contact svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
	flex: 0 0 auto;
}

.foot-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.foot-badges span {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--disp);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .75);
}

.footer-col h4 {
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

.footer-col a {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 8px;
}

.footer-col a:hover {
	color: var(--amber);
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
}

.footer-btm a {
	color: rgba(255, 255, 255, .5);
}

.footer-btm a:hover {
	color: var(--amber);
}

.ackn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .38);
	margin-top: 14px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* sticky mobile CTA */
.mcta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px 16px;
	gap: 10px;
	z-index: 50;
}

.mcta .btn {
	flex: 1;
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .7);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: var(--t);
}

.modal.on {
	opacity: 1;
	visibility: visible;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modal-top h3 {
	font-size: 19px;
	color: var(--ink);
}

.modal-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
	margin-top: 2px;
}

.modal-x {
	background: none;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(10, 22, 40, .12);
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.modal-body {
	padding: 30px 28px;
}

.success {
	text-align: center;
}

.chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.chk svg {
	width: 28px;
	height: 28px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.success p {
	color: var(--body);
}

@media (max-width:980px) {
	.hero-grid, .split {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.batt-grid, .why-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.pkgs, .progs, .cred-grid {
		grid-template-columns: 1fr;
	}
	
	.related {
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	.reviews {
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	
	.steps::before {
		display: none;
	}
}

@media (max-width:680px) {
	.nav-links, .nav-phone, .mega {
		display: none;
	}
	
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 16px;
		gap: 4px;
		box-shadow: var(--sh-lg);
	}
	
	.nav-links.open .mega {
		display: grid;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 6px 10px;
		min-width: auto;
	}
	
	.burger {
		display: flex;
	}
	
	.batt-grid, .why-grid, .related, .reviews {
		grid-template-columns: 1fr;
	}
	
	.steps {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 68px;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 60px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(34px, 5.2vw, 57px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 720px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

/* prose content */
.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose.on-ink p {
	color: rgba(255, 255, 255, .82);
}

.prose.on-ink .lead {
	color: #fff;
}

.prose b {
	color: var(--ink);
}

.prose.on-ink b {
	color: #fff;
}

/* split content block */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	transition: var(--t);
	position: relative;
	overflow: hidden;
}

.pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.pcard .ic {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	background: var(--slate);
}

.pcard .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.pcard h3 {
	font-size: 20px;
	margin-bottom: 9px;
}

.pcard p {
	font-size: 14.5px;
	margin-bottom: 16px;
	color: var(--body);
}

.pcard .sub {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.pcard .sub li {
	font-size: 12.5px;
	background: var(--slate);
	color: var(--ink-mid);
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: 600;
}

.pcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.pcard:hover .more svg {
	transform: translateX(4px);
}

.pcard.feat {
	background: linear-gradient(150deg, #fffdf6, #fff6e3);
	border-color: var(--amber);
}

.pcard .tag {
	position: absolute;
	top: 16px;
	right: -30px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 36px;
	transform: rotate(35deg);
	letter-spacing: .04em;
}

.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

/* rebate program cards (no prices) */
.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* system finder (no prices) */
.finder {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.finder-l {
	padding: 42px;
}

.finder-l h3 {
	font-size: 23px;
	margin-bottom: 6px;
}

.finder-l > p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 24px;
}

.finder-q {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	margin-bottom: 11px;
}

.opts {
	display: grid;
	gap: 10px;
}

.opt {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--t);
	background: #fff;
}

.opt:hover {
	border-color: var(--amber);
}

.opt.active {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.opt .rdot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--line);
	flex: 0 0 auto;
	transition: var(--t);
	position: relative;
}

.opt.active .rdot {
	border-color: var(--amber-dark);
}

.opt.active .rdot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--amber-dark);
}

.opt b {
	font-family: var(--disp);
	font-size: 14.5px;
	color: var(--ink);
	display: block;
}

.opt span {
	font-size: 12.5px;
	color: var(--muted);
}

.finder-r {
	background: linear-gradient(160deg, var(--ink), var(--ink-soft));
	color: #fff;
	padding: 42px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.finder-r .rlabel {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.finder-r .rbig {
	font-family: var(--disp);
	font-size: 34px;
	font-weight: 800;
	color: var(--amber);
	line-height: 1.05;
	margin: 8px 0 10px;
}

.finder-r .rdesc {
	font-size: 14.5px;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 8px;
}

.finder-r .radd {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 22px;
}

.finder-r .disc {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .45);
	margin-top: 13px;
	text-align: center;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {
	/* list-style:none; */
	
	/* cursor:pointer; */
	padding: 20px 24px;
	font-family: var(--disp);
	/* font-weight:700; */
	
	/* font-size:16.5px; */
	color: var(--ink);
	/* display:flex; */
	
	/* justify-content:space-between; */
	align-items: center;
	gap: 16px;
}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .finder, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.pillars, .why-grid, .steps, .reviews, .progs {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.finder-r, .magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r, .finder-l, .finder-r {
		padding: 30px;
	}
	
	.pillars, .why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 22px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

/* prose content */
.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose.on-ink p {
	color: rgba(255, 255, 255, .82);
}

.prose.on-ink .lead {
	color: #fff;
}

.prose b {
	color: var(--ink);
}

.prose.on-ink b {
	color: #fff;
}

/* direct-answer snippet block (AEO) */
.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* "what's included" feature list */
.incl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}

.incl-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.incl-item .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.incl-item .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.incl-item h3 {
	font-size: 16.5px;
	margin-bottom: 5px;
}

.incl-item p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

/* pillars (silo links) */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

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

.pcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	transition: var(--t);
	position: relative;
	overflow: hidden;
}

.pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.pcard .ic {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	background: var(--slate);
}

.pcard .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.pcard h3 {
	font-size: 20px;
	margin-bottom: 9px;
}

.pcard p {
	font-size: 14.5px;
	margin-bottom: 16px;
	color: var(--body);
}

.pcard .sub {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.pcard .sub li {
	font-size: 12.5px;
	background: var(--slate);
	color: var(--ink-mid);
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: 600;
}

.pcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.pcard:hover .more svg {
	transform: translateX(4px);
}

.pcard.feat {
	background: linear-gradient(150deg, #fffdf6, #fff6e3);
	border-color: var(--amber);
}

.pcard .tag {
	position: absolute;
	top: 16px;
	right: -30px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 36px;
	transform: rotate(35deg);
	letter-spacing: .04em;
}

/* split content block */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

/* savings stat band */
.savings-band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px;
}

.sv {
	background: linear-gradient(160deg, var(--ink), var(--ink-soft));
	color: #fff;
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.sv .big {
	font-family: var(--disp);
	font-size: 30px;
	font-weight: 800;
	color: var(--amber);
	line-height: 1.05;
}

.sv .lab {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .78);
	margin-top: 6px;
}

/* sizing table (GEO citation magnet) */
.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.size-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys a {
	color: var(--ink);
}

.size-table .sys a:hover {
	color: var(--amber-dark);
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table b {
	color: var(--ink);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
}

/* lead magnet */
.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

/* rebate program cards (no prices) */
.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* system finder (no prices) */
.finder {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.finder-l {
	padding: 42px;
}

.finder-l h3 {
	font-size: 23px;
	margin-bottom: 6px;
}

.finder-l > p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 24px;
}

.finder-q {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	margin-bottom: 11px;
}

.opts {
	display: grid;
	gap: 10px;
}

.opt {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--t);
	background: #fff;
}

.opt:hover {
	border-color: var(--amber);
}

.opt.active {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.opt .rdot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--line);
	flex: 0 0 auto;
	transition: var(--t);
	position: relative;
}

.opt.active .rdot {
	border-color: var(--amber-dark);
}

.opt.active .rdot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--amber-dark);
}

.opt b {
	font-family: var(--disp);
	font-size: 14.5px;
	color: var(--ink);
	display: block;
}

.opt span {
	font-size: 12.5px;
	color: var(--muted);
}

.finder-r {
	background: linear-gradient(160deg, var(--ink), var(--ink-soft));
	color: #fff;
	padding: 42px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.finder-r .rlabel {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.finder-r .rbig {
	font-family: var(--disp);
	font-size: 34px;
	font-weight: 800;
	color: var(--amber);
	line-height: 1.05;
	margin: 8px 0 10px;
}

.finder-r .rdesc {
	font-size: 14.5px;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 8px;
}

.finder-r .radd {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 22px;
}

.finder-r .disc {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .45);
	margin-top: 13px;
	text-align: center;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .finder, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.pillars, .pillars.four, .why-grid, .steps, .reviews, .progs, .incl, .savings-band {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.finder-r, .magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r, .finder-l, .finder-r {
		padding: 30px;
	}
	
	.pillars, .pillars.four, .why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs, .incl, .savings-band {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--ink: #0a1628;
	--ink-mid: #142236;
	--ink-soft: #1e3350;
	--amber: #f59e0b;
	--amber-dark: #d97706;
	--amber-soft: #fef3dc;
	--slate: #f2f6fa;
	--slate-mid: #e4ecf4;
	--line: #d8e2ec;
	--white: #fff;
	--body: #33485e;
	--muted: #6e879e;
	--green: #0e9f6e;
	--green-dk: #057a55;
	--green-lt: #e7f8f0;
	--r: 14px;
	--r-sm: 9px;
	--r-lg: 22px;
	--sh: 0 4px 22px rgba(10, 22, 40, .09);
	--sh-lg: 0 18px 50px rgba(10, 22, 40, .18);
	--t: .22s ease;
	--disp: "Sora", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--disp);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 22px;
}

.narrow {
	max-width: 840px;
	margin: 0 auto;
}

em {
	font-style: normal;
	color: var(--amber-dark);
}

section {
	position: relative;
}

p {
	font-size: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--r-sm);
	cursor: pointer;
	border: 0;
	transition: var(--t);
	white-space: nowrap;
	text-align: center;
}

.btn-amber {
	background: var(--amber);
	color: var(--ink);
}

.btn-amber:hover {
	background: var(--amber-dark);
	color: #fff;
	transform: translateY(-2px);
}

.btn-ink {
	background: var(--ink);
	color: #fff;
}

.btn-ink:hover {
	background: var(--ink-soft);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
	background: var(--slate);
}

.btn-wht {
	background: #fff;
	color: var(--ink);
}

.btn-wht:hover {
	background: var(--slate);
	transform: translateY(-2px);
}

.btn-lg {
	padding: 17px 32px;
	font-size: 16px;
}

.btn-block {
	width: 100%;
}

.topbar {
	background: linear-gradient(90deg, var(--ink), var(--ink-soft));
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 8px 22px;
	font-weight: 500;
}

.topbar strong {
	color: var(--amber);
}

.topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

header.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav-in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 21px;
	color: var(--ink);
}

.logo .mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.logo .mark svg {
	width: 22px;
	height: 22px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	list-style: none;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-mid);
	font-family: var(--disp);
}

.nav-links > li > a:hover, .nav-links > li > a.cur {
	background: var(--slate);
	color: var(--ink);
}

.nav-links > li > a svg {
	width: 13px;
	height: 13px;
	opacity: .55;
	transition: var(--t);
}

.nav-links > li:hover > a svg {
	transform: rotate(180deg);
}

.nav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.nav-phone svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
}

.mega {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 520px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--t);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 18px;
}

.mega.solo {
	min-width: 300px;
	grid-template-columns: 1fr;
}

.mega {
	padding: 9px;
}

.nav-links > li:hover .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega .mcol-h {
	grid-column: 1/-1;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px 6px;
}

.mega a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px 0px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--body);
	transition: var(--t);
}

.mega a:hover {
	background: var(--slate);
	color: var(--ink);
}

.mega a b {
	font-weight: 600;
	color: var(--ink);
	font-family: var(--disp);
	font-size: 13.5px;
}

.mega a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.burger span {
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: var(--t);
}

/* breadcrumb */
.crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
}

.crumb a {
	color: rgba(255, 255, 255, .6);
}

.crumb a:hover {
	color: var(--amber);
}

.crumb .sep {
	opacity: .4;
}

.crumb b {
	color: #fff;
	font-weight: 600;
}

.hero {
	background: radial-gradient(120% 130% at 78% 0%, var(--ink-soft) 0%, var(--ink) 55%);
	color: #fff;
	padding: 34px 0 74px;
	overflow: hidden;
	position: relative;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.hbadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

.hbadge svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
}

.hero h1 {
	color: #fff;
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 800;
	margin-bottom: 18px;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 548px;
	margin-bottom: 26px;
}

.hero-sub b {
	color: #fff;
	font-weight: 600;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 30px;
}

.hero-stats {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 25px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	max-width: 140px;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lead-card .lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
	color: var(--ink);
}

.lead-card .lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lead-card .lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld input:focus, .fld select:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 40px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec {
	padding: 82px 0;
}

.sec-slate {
	background: var(--slate);
}

.sec-ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.eyebrow {
	display: inline-block;
	font-family: var(--disp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 12px;
}

.sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.sec-head.left {
	margin-left: 0;
	text-align: left;
}

.sec-head h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	font-size: 17px;
	color: var(--body);
}

.sec-ink .sec-head h2 {
	color: #fff;
}

.sec-ink .sec-head p {
	color: rgba(255, 255, 255, .75);
}

/* prose content */
.prose p {
	font-size: 17px;
	color: var(--body);
	margin-bottom: 18px;
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	font-size: 19px;
	color: var(--ink-mid);
	font-weight: 500;
}

.prose.on-ink p {
	color: rgba(255, 255, 255, .82);
}

.prose.on-ink .lead {
	color: #fff;
}

.prose b {
	color: var(--ink);
}

.prose.on-ink b {
	color: #fff;
}

/* direct-answer snippet block (AEO) */
.answer {
	background: var(--amber-soft);
	border: 1px solid #f6dca0;
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: 20px 24px;
	max-width: 840px;
	margin: 0 auto 30px;
	font-size: 16.5px;
	color: var(--ink-mid);
}

.answer b {
	color: var(--ink);
}

.sec-head + .answer {
	margin-top: -18px;
}

/* "what's included" feature list */
.incl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 8px;
}

.incl-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.incl-item .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.incl-item .ic svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.incl-item h3 {
	font-size: 16.5px;
	margin-bottom: 5px;
}

.incl-item p {
	font-size: 14px;
	color: var(--body);
	margin: 0;
}

/* pillars (silo links) */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

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

.pcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	transition: var(--t);
	position: relative;
	overflow: hidden;
}

.pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
	border-color: transparent;
}

.pcard .ic {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	background: var(--slate);
}

.pcard .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.pcard h3 {
	font-size: 20px;
	margin-bottom: 9px;
}

.pcard p {
	font-size: 14.5px;
	margin-bottom: 16px;
	color: var(--body);
}

.pcard .sub {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.pcard .sub li {
	font-size: 12.5px;
	background: var(--slate);
	color: var(--ink-mid);
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: 600;
}

.pcard .more {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcard .more svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	transition: var(--t);
}

.pcard:hover .more svg {
	transform: translateX(4px);
}

.pcard.feat {
	background: linear-gradient(150deg, #fffdf6, #fff6e3);
	border-color: var(--amber);
}

.pcard .tag {
	position: absolute;
	top: 16px;
	right: -30px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 36px;
	transform: rotate(35deg);
	letter-spacing: .04em;
}

/* secondary service row (maintenance/upgrades/used) */
.subsvc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px;
}

.subsvc a {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
	transition: var(--t);
}

.subsvc a:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.subsvc .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--slate);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.subsvc .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.subsvc b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15px;
	display: block;
	margin-bottom: 2px;
}

.subsvc span {
	font-size: 13px;
	color: var(--body);
}

/* split content block */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.split .scol-points {
	list-style: none;
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.split .scol-points li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.split .scol-points .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.split .scol-points .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.split .scol-points b {
	font-family: var(--disp);
	color: var(--ink);
	font-size: 15.5px;
	display: block;
	margin-bottom: 2px;
}

.split .scol-points p {
	font-size: 14.5px;
	margin: 0;
}

/* sizing / price table (GEO citation magnet) */
.size-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	background: #fff;
}

.size-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	font-size: 14.5px;
}

.size-table thead th {
	background: var(--ink);
	color: #fff;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 15px 18px;
	letter-spacing: .01em;
}

.size-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	color: var(--body);
	vertical-align: top;
}

.size-table tbody tr:hover {
	background: var(--slate);
}

.size-table .sys {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
}

.size-table .sys a {
	color: var(--ink);
}

.size-table .sys a:hover {
	color: var(--amber-dark);
}

.size-table .sys small {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.size-table .price {
	font-family: var(--disp);
	font-weight: 800;
	color: var(--amber-dark);
	font-size: 16px;
}

.size-table b {
	color: var(--ink);
}

.size-note {
	font-size: 13px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* brands strip (GEO entity mapping) */
.brands {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 10px;
}

.brand {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	text-align: center;
}

.brand .bn {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	color: var(--ink);
	letter-spacing: -.01em;
}

.brand .bt {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--amber-dark);
	margin: 4px 0 8px;
}

.brand p {
	font-size: 13px;
	color: var(--body);
	margin: 0;
}

/* lead magnet */
.magnet {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	color: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	box-shadow: var(--sh-lg);
}

.magnet-l {
	padding: 48px;
}

.magnet-l .eyebrow {
	color: var(--amber);
}

.magnet-l h2 {
	color: #fff;
	font-size: clamp(25px, 3vw, 34px);
	margin-bottom: 14px;
}

.magnet-l h2 em {
	color: var(--amber);
}

.magnet-l > p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	margin-bottom: 20px;
}

.magnet-list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin-bottom: 8px;
}

.magnet-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .9);
}

.magnet-list svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 1px;
}

.magnet-r {
	background: rgba(255, 255, 255, .06);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.magnet-r .gtitle {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}

.magnet-r .gsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 18px;
}

.magnet-r .fld input {
	background: rgba(255, 255, 255, .95);
}

.magnet-r .lc-fine {
	color: rgba(255, 255, 255, .6);
}

.magnet-r .lc-fine svg {
	color: var(--amber);
}

.guide-thumb {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 20px;
}

.guide-thumb .pg {
	width: 46px;
	height: 58px;
	border-radius: 5px;
	background: linear-gradient(160deg, var(--amber), var(--amber-dark));
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}

.guide-thumb .pg svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.guide-thumb b {
	font-family: var(--disp);
	color: #fff;
	font-size: 14px;
	display: block;
}

.guide-thumb span {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

/* rebate program cards (no system prices) */
.progs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.prog {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	display: flex;
	gap: 16px;
}

.prog .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prog .ic svg {
	width: 23px;
	height: 23px;
	color: var(--green-dk);
}

.prog h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.prog p {
	font-size: 14px;
	color: var(--body);
}

.prog .for {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--disp);
	color: var(--amber-dark);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rebate-note {
	display: flex;
	gap: 11px;
	align-items: center;
	background: var(--green-lt);
	border-radius: var(--r);
	padding: 18px 22px;
	font-size: 14.5px;
	color: var(--green-dk);
	font-weight: 600;
	max-width: 840px;
	margin: 0 auto;
}

.rebate-note svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* system finder (no prices) */
.finder {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.finder-l {
	padding: 42px;
}

.finder-l h3 {
	font-size: 23px;
	margin-bottom: 6px;
}

.finder-l > p {
	font-size: 14.5px;
	color: var(--body);
	margin-bottom: 24px;
}

.finder-q {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	margin-bottom: 11px;
}

.opts {
	display: grid;
	gap: 10px;
}

.opt {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--t);
	background: #fff;
}

.opt:hover {
	border-color: var(--amber);
}

.opt.active {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.opt .rdot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--line);
	flex: 0 0 auto;
	transition: var(--t);
	position: relative;
}

.opt.active .rdot {
	border-color: var(--amber-dark);
}

.opt.active .rdot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--amber-dark);
}

.opt b {
	font-family: var(--disp);
	font-size: 14.5px;
	color: var(--ink);
	display: block;
}

.opt span {
	font-size: 12.5px;
	color: var(--muted);
}

.finder-r {
	background: linear-gradient(160deg, var(--ink), var(--ink-soft));
	color: #fff;
	padding: 42px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.finder-r .rlabel {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.finder-r .rbig {
	font-family: var(--disp);
	font-size: 34px;
	font-weight: 800;
	color: var(--amber);
	line-height: 1.05;
	margin: 8px 0 10px;
}

.finder-r .rdesc {
	font-size: 14.5px;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 8px;
}

.finder-r .radd {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 22px;
}

.finder-r .disc {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .45);
	margin-top: 13px;
	text-align: center;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	text-align: center;
}

.why-card .ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.why-card .ic svg {
	width: 26px;
	height: 26px;
	color: var(--amber-dark);
}

.why-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.why-card p {
	font-size: 13.5px;
	color: var(--body);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.step {
	position: relative;
	padding-top: 14px;
}

.step .num {
	font-family: var(--disp);
	font-size: 40px;
	font-weight: 800;
	color: var(--slate-mid);
	line-height: 1;
}

.step h3 {
	font-size: 17px;
	margin: 8px 0 7px;
}

.step p {
	font-size: 14px;
	color: var(--body);
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	font-family: var(--disp);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: var(--t);
}

.area-chip:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
	transform: translateY(-2px);
}

.area-chip svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}

.stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.stars svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
}

.review p {
	font-size: 14.5px;
	color: var(--ink-mid);
	margin-bottom: 16px;
}

.review .who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.review .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
}

.review .who b {
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	display: block;
}

.review .who span {
	font-size: 12.5px;
	color: var(--muted);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq summary {
	/* list-style:none; */
	
	/* cursor:pointer; */
	
	/* padding:20px 24px; */
	
	/* font-family:var(--disp); */
	
	/* font-weight:700; */
	
	/* font-size:16.5px; */
	
	/* color:var(--ink); */
	
	/* display:flex; */
	justify-content: space-between;
}

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

.faq summary .pm {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	position: relative;
	border: 0;
}

.faq summary .pm::before, .faq summary .pm::after {
	content: "";
	position: absolute;
	background: var(--amber-dark);
	border-radius: 2px;
	transition: var(--t);
}

.faq summary .pm::before {
	width: 14px;
	height: 2px;
	top: 11px;
	left: 5px;
}

.faq summary .pm::after {
	width: 2px;
	height: 14px;
	top: 5px;
	left: 11px;
}

.faq[open] summary .pm::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq .a {}

.faq .a b {
	color: var(--ink);
}

.final {
	background: radial-gradient(120% 130% at 20% 0%, var(--ink-soft), var(--ink));
	color: #fff;
	text-align: center;
	padding: 82px 0;
}

.final h2 {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

.final h2 em {
	color: var(--amber);
}

.final p {
	font-size: 18px;
	color: rgba(255, 255, 255, .8);
	max-width: 580px;
	margin: 0 auto 28px;
}

.final-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.final-fine {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
}

footer {
	background: #060e1b;
	color: rgba(255, 255, 255, .66);
	padding: 58px 0 26px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 36px;
}

.footer-brand .logo {
	color: #fff;
	margin-bottom: 14px;
}

.footer-brand p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	max-width: 300px;
	margin-bottom: 16px;
}

.foot-contact a {
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .8);
	margin-bottom: 9px;
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
}

.foot-contact svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
}

.footer-col h4 {
	color: #fff;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--disp);
}

.footer-col a {
	display: block;
	color: rgba(255, 255, 255, .6);
	padding: 5px 0;
	font-size: 14px;
	transition: var(--t);
}

.footer-col a:hover {
	color: var(--amber);
}

.foot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.foot-badges span {
	font-size: 11.5px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	padding: 5px 11px;
	border-radius: 50px;
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

.footer-btm {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .4);
}

.ackn {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	max-width: 640px;
	margin-top: 10px;
	line-height: 1.6;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 40, .6);
	backdrop-filter: blur(4px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.on {
	display: flex;
}

.modal-box {
	background: #fff;
	border-radius: var(--r-lg);
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: var(--sh-lg);
	animation: pop .25s ease;
}

@keyframes pop {
	from {
		transform: scale(.94);
		opacity: 0;
	}
	
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 22px 26px;
	position: relative;
}

.modal-top h3 {
	color: var(--ink);
	font-size: 20px;
}

.modal-top p {
	font-size: 13px;
	color: #5c3d04;
	font-weight: 600;
}

.modal-x {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, .12);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

.modal-body {
	padding: 24px 26px 26px;
}

.success {
	text-align: center;
	padding: 14px 0;
}

.success .chk {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--green-lt);
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.success .chk svg {
	width: 30px;
	height: 30px;
	color: var(--green-dk);
}

.success h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.success p {
	font-size: 14.5px;
	color: var(--body);
}

.mcta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	display: none;
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(10, 22, 40, .1);
}

.mcta .btn {
	flex: 1;
	padding: 13px;
}

@media (max-width:1000px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	
	.magnet, .finder, .split {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.pillars, .pillars.four, .why-grid, .steps, .reviews, .progs, .incl, .brands, .subsvc {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.finder-r, .magnet-r {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

@media (max-width:760px) {
	.nav-links, .nav-phone {
		display: none;
	}
	
	.burger {
		display: flex;
	}
	
	.nav-in {
		height: 64px;
	}
	
	.sec {
		padding: 54px 0;
	}
	
	.magnet-l, .magnet-r, .finder-l, .finder-r {
		padding: 30px;
	}
	
	.pillars, .pillars.four, .why-grid, .steps, .reviews, .areas-grid, .footer-grid, .progs, .incl, .brands, .subsvc {
		grid-template-columns: 1fr;
	}
	
	.mcta {
		display: flex;
	}
	
	body {
		padding-bottom: 64px;
	}
	
	.hero-stats {
		gap: 22px;
	}
	
	.nav-links.open {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px 18px;
		overflow-y: auto;
		z-index: 70;
	}
	
	.nav-links.open > li > a {
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	
	.nav-links.open .mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 4px 0 10px 14px;
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Dynamic ACF header menu */
.nav-links > li > a > span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.nav-links > li > a b {
	font: inherit;
}

.nav-links > li > a small {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
	line-height: 1.2;
}

.mega a span:not(.dot) {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mega a small {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.25;
}

.mega a em {
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.35;
	color: var(--body);
}

.mega a.featured {
	background: var(--amber-soft);
}

.mega a.featured .dot {
	background: var(--green);
}

img.footer-logo {
	width: auto;
	height: 87px;
}

/* DRIVEN grant pill — signature element */
.driven-pill {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(14, 159, 110, .12);
	border: 1.5px solid rgba(14, 159, 110, .35);
	border-radius: var(--r-sm);
	padding: 15px 18px;
	margin-bottom: 24px;
}

.dp-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(14, 159, 110, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.dp-icon svg {
	width: 18px;
	height: 18px;
	color: #6ee7b7;
}

.driven-pill p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
	font-weight: 500;
}

.driven-pill p strong {
	color: #fff;
	font-weight: 700;
}

.driven-pill p a {
	color: #6ee7b7;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hero h1 {
	color: #fff;
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 800;
	margin-bottom: 18px;
	line-height: 1.1;
}

.hero h1 em {
	color: var(--amber);
}

.hero-sub {
	font-size: 17px;
	color: rgba(255, 255, 255, .82);
	max-width: 520px;
	margin-bottom: 28px;
	line-height: 1.65;
}

.hero-sub b {
	color: #fff;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 32px;
}

.hero-stats {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .13);
	padding-top: 22px;
}

.hstat .n {
	font-family: var(--disp);
	font-size: 26px;
	font-weight: 800;
	color: #fff;
}

.hstat .n em {
	color: var(--amber);
}

.hstat .l {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
	font-weight: 500;
	max-width: 130px;
	line-height: 1.4;
}

.lead-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.lc-top {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
}

.lc-top h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.lc-top p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.lc-body {
	padding: 22px 24px 24px;
}

.fld {
	margin-bottom: 12px;
}

.fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
	margin-bottom: 5px;
	font-family: var(--disp);
}

.fld input, .fld select, .fld textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	transition: var(--t);
}

.fld textarea {
	resize: vertical;
	min-height: 72px;
}

.fld input:focus, .fld select:focus, .fld textarea:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-soft);
}

.fld input::placeholder, .fld textarea::placeholder {
	color: #9fb3c4;
}

.lc-fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.lc-fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

.trust {
	background: var(--ink-mid);
	padding: 20px 0;
}

.trust-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px 36px;
	flex-wrap: wrap;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--disp);
}

.trust-item svg {
	width: 17px;
	height: 17px;
	color: var(--amber);
	flex: 0 0 auto;
}

.sec-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin-bottom: 10px;
}

.sec-h {
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 800;
	margin-bottom: 14px;
}

.sec-sub {
	font-size: 17px;
	color: var(--muted);
	max-width: 620px;
	line-height: 1.6;
}

/* USE CASES GRID */
.usecases {
	padding: 84px 0;
	background: var(--white);
}

.uc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.uc-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.uc-card:hover {
	border-color: var(--amber);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}

.uc-top {
	padding: 26px 26px 20px;
	background: var(--slate);
	position: relative;
}

.uc-top h3 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 8px;
}

.uc-icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.uc-icon-wrap svg {
	width: 26px;
	height: 26px;
	color: var(--amber);
}

.uc-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 4px 10px;
	border-radius: 50px;
	font-family: var(--disp);
	margin-bottom: 10px;
}

.uc-tag.ac {
	background: var(--elec-lt);
	color: var(--elec);
}

.uc-tag.dc {
	background: rgba(245, 158, 11, .12);
	color: var(--amber-dark);
}

.uc-tag.solar {
	background: var(--green-lt);
	color: var(--green-dk);
}

.uc-tag.fleet {
	background: var(--slate-mid, #e4ecf4);
	color: var(--ink);
}

.uc-suburbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.uc-suburb {
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--muted);
}

.uc-body {
	padding: 20px 26px 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uc-body p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
	flex: 1;
}

.uc-features {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.uf {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: var(--body);
}

.uf svg {
	width: 15px;
	height: 15px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 2px;
}

.uc-link {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

.uc-link svg {
	width: 16px;
	height: 16px;
	transition: var(--t);
}

.uc-card:hover .uc-link svg {
	transform: translateX(4px);
}

/* AC vs DC comparison */
.charger-types {
	padding: 80px 0;
	background: var(--slate);
}

.ct-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 44px;
}

.ct-card {
	background: var(--white);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1.5px solid var(--line);
}

.ct-header {
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ct-header.ac {
	background: var(--elec-lt);
	border-bottom: 2px solid var(--elec);
}

.ct-header.dc {
	background: var(--amber-soft);
	border-bottom: 2px solid var(--amber);
}

.ct-badge {
	padding: 5px 14px;
	border-radius: 50px;
	font-family: var(--disp);
	font-weight: 800;
	font-size: 13px;
}

.ct-badge.ac {
	background: var(--elec);
	color: #fff;
}

.ct-badge.dc {
	background: var(--amber-dark);
	color: #fff;
}

.ct-header h3 {
	font-size: 20px;
	color: var(--ink);
}

.ct-header .speed {
	font-size: 13px;
	color: var(--muted);
	font-weight: 500;
	margin-top: 2px;
}

.ct-body {
	padding: 24px 28px;
}

.ct-spec {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.ct-spec:last-child {
	border-bottom: 0;
}

.ct-spec .label {
	color: var(--muted);
	font-weight: 500;
}

.ct-spec .value {
	font-family: var(--disp);
	font-weight: 700;
	color: var(--ink);
	font-size: 14.5px;
}

.ct-best {
	margin-top: 20px;
	background: var(--slate);
	border-radius: var(--r-sm);
	padding: 14px 16px;
}

.ct-best h4 {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 8px;
	font-family: var(--disp);
}

.ct-best-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ct-best-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--body);
}

.ct-best-item svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
}

/* DRIVEN grant section */
.driven {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.driven-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.driven-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 32px;
}

.driven-card h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 6px;
}

.driven-card .dsub {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 24px;
}

.d-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.d-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.d-row svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 2px;
}

.d-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.d-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.driven-right h2 {
	font-size: clamp(24px, 3.5vw, 38px);
	color: #fff;
	margin-bottom: 14px;
}

.driven-right p {
	font-size: 16px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 22px;
}

.driven-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ds {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ds-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.ds div h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 3px;
}

.ds div p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

.driven-note {
	margin-top: 24px;
	background: rgba(14, 159, 110, .12);
	border: 1px solid rgba(14, 159, 110, .3);
	border-radius: var(--r-sm);
	padding: 14px 18px;
}

.driven-note p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
}

.driven-note strong {
	color: #6ee7b7;
}

/* Solar integration */
.solar-int {
	padding: 80px 0;
	background: var(--white);
}

.si-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.si-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.si-visual::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .2), transparent 70%);
}

.si-visual h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.si-flow {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.si-step {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	padding: 14px 16px;
}

.si-step .ic {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(245, 158, 11, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.si-step .ic svg {
	width: 19px;
	height: 19px;
	color: var(--amber);
}

.si-step .tx b {
	display: block;
	font-family: var(--disp);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
}

.si-step .tx span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}

.arrow-d {
	text-align: center;
	color: rgba(255, 255, 255, .25);
	font-size: 16px;
	line-height: 1;
}

.si-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sip {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.sip-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.sip-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.sip h4 {
	font-size: 16px;
	margin-bottom: 4px;
}

.sip p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
}

/* process */
.process {
	padding: 72px 0;
	background: var(--slate);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 44px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 28px;
	left: calc(12.5% + 14px);
	right: calc(12.5% + 14px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--amber-soft));
	z-index: 0;
}

.step-card {
	text-align: center;
	position: relative;
	z-index: 1;
}

.step-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 20px;
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
	box-shadow: 0 0 0 6px var(--amber-soft);
}

.step-card h4 {
	font-size: 15px;
	margin-bottom: 8px;
}

.step-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
}

/* credentials */
.credentials {
	padding: 72px 0;
	background: var(--white);
}

.cred-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-top: 40px;
}

.cred-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cred-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--slate);
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
}

.cred-item svg {
	width: 22px;
	height: 22px;
	color: var(--green);
	flex: 0 0 auto;
}

.cred-item span {
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14.5px;
	color: var(--ink);
}

.award-block {
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	border-radius: var(--r-lg);
	padding: 36px;
	color: #fff;
}

.award-block h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 20px;
}

.award-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.award-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.award-row svg {
	width: 22px;
	height: 22px;
	color: var(--amber);
	flex: 0 0 auto;
}

.award-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.award-row div span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}

/* areas */
.areas {
	padding: 72px 0;
	background: var(--slate);
}

.area-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 36px;
}

.area-pill {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	font-family: var(--disp);
	transition: var(--t);
	text-decoration: none;
}

.area-pill:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.area-pill svg {
	width: 16px;
	height: 16px;
	color: var(--amber);
	flex: 0 0 auto;
}

/* reviews */
.reviews {
	padding: 72px 0;
	background: var(--white);
}

.rev-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 36px;
}

.rev-card {
	background: var(--slate);
	border-radius: var(--r);
	padding: 24px;
	border: 1px solid var(--line);
}

.rev-stars {
	color: var(--amber);
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.rev-card p {
	font-size: 14.5px;
	color: var(--body);
	line-height: 1.65;
	margin-bottom: 14px;
	font-style: italic;
}

.rev-meta b {
	font-family: var(--disp);
	font-size: 13.5px;
	color: var(--ink);
}

.rev-meta span {
	font-size: 12px;
	color: var(--muted);
	margin-left: 6px;
}

.rev-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ink);
	border-radius: var(--r);
	padding: 22px 28px;
	margin-top: 26px;
	flex-wrap: wrap;
}

.rb-score {
	font-family: var(--disp);
	font-size: 42px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.rb-score em {
	font-size: 18px;
	color: var(--amber);
}

.rb-detail .stars {
	color: var(--amber);
	font-size: 20px;
	display: block;
	margin-bottom: 4px;
}

.rb-detail span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	font-weight: 500;
}

/* faq */
.faq {}

.faq-list {
	max-width: 780px;
	margin: 40px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 15px;
	color: var(--ink);
}

.faq-q svg {
	width: 18px;
	height: 18px;
	color: var(--muted);
	flex: 0 0 auto;
	transition: var(--t);
}

.faq-item.open .faq-q {
	color: var(--amber-dark);
}

.faq-item.open .faq-q svg {
	transform: rotate(180deg);
	color: var(--amber-dark);
}

.faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}

.faq-a-in {
	/* padding:0 22px 20px; */
	font-size: 15px;
	color: var(--body);
	line-height: 1.7;
}

.faq-item.open .faq-a {
	max-height: 500px;
}

.faq-item.open .faq-a-in {
	padding-top: 16px;
}

/* related */
.related {
	padding: 72px 0;
	background: var(--white);
}

.rel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 36px;
}

.rel-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	transition: var(--t);
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	background: var(--white);
}

.rel-card:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.rel-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 4px;
}

.rel-icon svg {
	width: 24px;
	height: 24px;
	color: var(--amber);
}

.rel-card h4 {
	font-size: 16px;
	color: var(--ink);
}

.rel-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
	flex: 1;
}

.rel-link {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
	display: flex;
	align-items: center;
	gap: 5px;
}

/* cta */
.cta-strip {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-strip::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
	pointer-events: none;
}

.cta-strip h2 {
	font-size: clamp(26px, 4vw, 42px);
	color: #fff;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}

.cta-strip h2 em {
	color: var(--amber);
}

.cta-strip p {
	font-size: 17px;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 30px;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;
}

.cta-btns {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.cta-trust {
	display: flex;
	gap: 22px;
	justify-content: center;
	margin-top: 20px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.ct-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
}

.ct-item svg {
	width: 15px;
	height: 15px;
	color: var(--amber);
}

/* VEU pill — signature element */
.veu-pill {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(14, 159, 110, .12);
	border: 1.5px solid rgba(14, 159, 110, .35);
	border-radius: var(--r-sm);
	padding: 15px 18px;
	margin-bottom: 24px;
}

.vp-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(14, 159, 110, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.vp-icon svg {
	width: 18px;
	height: 18px;
	color: #6ee7b7;
}

.veu-pill p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
	font-weight: 500;
}

.veu-pill p strong {
	color: #fff;
}

/* LIGHTING TYPE CARDS */
.lighting-types {
	padding: 84px 0;
	background: var(--white);
}

.lt-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.lt-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.lt-card:hover {
	border-color: var(--amber);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}

.lt-icon {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.lt-icon svg {
	width: 26px;
	height: 26px;
	color: var(--amber);
}

.lt-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 4px 10px;
	border-radius: 50px;
	font-family: var(--disp);
	margin-bottom: 10px;
}

.lt-type-badge.highbay {
	background: rgba(245, 158, 11, .12);
	color: var(--amber-dark);
}

.lt-type-badge.panel {
	background: var(--teal-lt);
	color: var(--teal);
}

.lt-type-badge.industrial {
	background: rgba(124, 58, 237, .1);
	color: #7c3aed;
}

.lt-type-badge.outdoor {
	background: var(--green-lt);
	color: var(--green-dk);
}

.lt-top {
	padding: 26px 26px 20px;
	background: var(--slate);
	position: relative;
}

.lt-top h3 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 6px;
}

.lux-spec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ink);
	border-radius: 50px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--amber);
	font-family: var(--disp);
	margin-top: 8px;
}

.lux-spec svg {
	width: 12px;
	height: 12px;
}

.lt-body {
	padding: 20px 26px 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lt-body p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
	flex: 1;
}

.lt-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.spec-item {
	background: var(--slate);
	border-radius: var(--r-sm);
	padding: 10px 14px;
}

.spec-item .sl {
	font-size: 11px;
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--disp);
	margin-bottom: 3px;
}

.spec-item .sv {
	font-size: 14px;
	font-weight: 700;
	font-family: var(--disp);
}

.lt-link {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

.lt-link svg {
	width: 16px;
	height: 16px;
	transition: var(--t);
}

.lt-card:hover .lt-link svg {
	transform: translateX(4px);
}

/* SAVINGS SECTION */
.savings {
	padding: 80px 0;
	background: var(--slate);
}

.savings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

/* Energy comparison visual */
.energy-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.energy-visual::after {
	content: "";
	position: absolute;
	right: -50px;
	top: -50px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .18), transparent 70%);
}

.energy-visual h3 {
	font-size: 17px;
	color: #fff;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}

.ev-sub {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
}

.comparison-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	z-index: 1;
}

.comp-row {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--r-sm);
	padding: 16px 18px;
}

.comp-row h4 {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, .65);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--disp);
	margin-bottom: 12px;
}

.comp-bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comp-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.comp-label {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
	width: 80px;
	flex: 0 0 auto;
	font-weight: 500;
}

.comp-track {
	flex: 1;
	background: rgba(255, 255, 255, .08);
	border-radius: 50px;
	height: 10px;
	overflow: hidden;
}

.comp-fill {
	height: 100%;
	border-radius: 50px;
}

.comp-fill.old {
	background: rgba(239, 68, 68, .7);
}

.comp-fill.led {
	background: linear-gradient(90deg, var(--green), #34d399);
}

.comp-watt {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .65);
	white-space: nowrap;
	font-family: var(--disp);
}

.ev-saving {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(14, 159, 110, .12);
	border: 1px solid rgba(14, 159, 110, .3);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	position: relative;
	z-index: 1;
}

.ev-saving svg {
	width: 18px;
	height: 18px;
	color: #6ee7b7;
	flex: 0 0 auto;
}

.ev-saving p {
	font-size: 13px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.55;
}

.ev-saving strong {
	color: #6ee7b7;
}

.savings-points {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sp {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.sp-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.sp-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.sp h4 {
	font-size: 16px;
	margin-bottom: 4px;
}

.sp p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
}

/* VEU SECTION */
.veu-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.veu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.veu-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 32px;
}

.veu-card h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 6px;
}

.vc-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 24px;
}

.v-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.v-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.v-row svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 2px;
}

.v-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.v-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.veu-right h2 {
	font-size: clamp(24px, 3.5vw, 38px);
	color: #fff;
	margin-bottom: 14px;
}

.veu-right p {
	font-size: 16px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 22px;
}

.veu-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vs {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.vs-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.vs div h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 3px;
}

.vs div p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

.veu-note {
	margin-top: 22px;
	background: rgba(14, 159, 110, .12);
	border: 1px solid rgba(14, 159, 110, .3);
	border-radius: var(--r-sm);
	padding: 14px 18px;
}

.veu-note p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
}

.veu-note strong {
	color: #6ee7b7;
}

/* LUX STANDARDS TABLE — signature GEO element */
.standards {
	padding: 80px 0;
	background: var(--white);
}

.std-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	margin-top: 44px;
}

.std-table thead tr {
	background: var(--ink);
	color: #fff;
}

.std-table thead th {
	padding: 16px 20px;
	text-align: left;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

.std-table tbody tr {
	border-bottom: 1px solid var(--line);
}

.std-table tbody tr:last-child {
	border-bottom: 0;
}

.std-table tbody tr:hover {
	background: var(--amber-soft);
}

.std-table td {
	padding: 16px 20px;
	font-size: 14px;
}

.std-table td:first-child {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
}

.lux-value {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 16px;
	color: var(--green-dk);
}

.std-ref {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
	font-family: var(--disp);
}

.std-note {
	margin-top: 20px;
	background: var(--slate);
	border-radius: var(--r-sm);
	padding: 16px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.std-note svg {
	width: 18px;
	height: 18px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.std-note p {
	font-size: 14px;
	color: var(--body);
	line-height: 1.6;
}

/* 3-phase alert pill — signature element for 20kW */
.phase-pill {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(8, 145, 178, .14);
	border: 1.5px solid rgba(103, 232, 249, .3);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	margin-bottom: 22px;
}

.phase-pill .pp-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(8, 145, 178, .25);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.phase-pill .pp-icon svg {
	width: 17px;
	height: 17px;
	color: #67e8f9;
}

.phase-pill p {
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	line-height: 1.5;
}

.phase-pill p strong {
	color: #fff;
}

/* WHO IS 20kW FOR */
.for-who {
	padding: 80px 0;
	background: var(--white);
}

.fw-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.fw-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fw-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--slate);
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
	transition: var(--t);
}

.fw-card:hover {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.fw-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--ink);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.fw-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber);
}

.fw-card h4 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.fw-card p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

/* SPEC TABLE */
.specs {
	padding: 80px 0;
	background: var(--slate);
}

.spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 44px;
}

.spec-table {
	background: var(--white);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh);
	border: 1.5px solid var(--line);
}

.spec-table h3 {
	background: var(--ink);
	color: #fff;
	padding: 16px 22px;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--disp);
}

.spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
}

.spec-row:last-child {
	border-bottom: 0;
}

.spec-row:hover {
	background: var(--slate);
}

.spec-row .sk {
	font-size: 14px;
	color: var(--muted);
	font-weight: 500;
}

.spec-row .sv {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ink);
}

.spec-row .sv.highlight {
	color: var(--green-dk);
}

.spec-note {
	margin-top: 16px;
	background: rgba(8, 145, 178, .07);
	border: 1.5px solid rgba(8, 145, 178, .22);
	border-radius: var(--r-sm);
	padding: 14px 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.spec-note svg {
	width: 17px;
	height: 17px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.spec-note p {
	font-size: 14px;
	color: var(--body);
	line-height: 1.6;
}

.spec-row .highlight {
	color: var(--green-dk);
}

/* OUTPUT PROFILE — seasonal chart */
.output-section {
	padding: 80px 0;
	background: var(--white);
}

.output-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.output-chart {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 30px;
	position: relative;
	overflow: hidden;
}

.output-chart::after {
	content: "";
	position: absolute;
	right: -50px;
	top: -50px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .18), transparent 70%);
}

.chart-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .7);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 20px;
	font-family: var(--disp);
	position: relative;
	z-index: 1;
}

.month-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 120px;
	position: relative;
	z-index: 1;
}

.mbar {
	flex: 1;
	border-radius: 4px 4px 0 0;
	min-width: 10px;
	transition: var(--t);
}

.mbar.low {
	background: rgba(245, 158, 11, .4);
}

.mbar.mid {
	background: rgba(245, 158, 11, .65);
}

.mbar.high {
	background: rgba(245, 158, 11, .9);
}

.month-labels {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	position: relative;
	z-index: 1;
}

.month-labels span {
	flex: 1;
	font-size: 9.5px;
	color: rgba(255, 255, 255, .45);
	text-align: center;
	font-family: var(--disp);
	font-weight: 600;
}

.chart-legend {
	display: flex;
	gap: 18px;
	margin-top: 16px;
	position: relative;
	z-index: 1;
}

.leg {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, .65);
	font-weight: 600;
}

.leg-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.output-stats {
	display: flex;
	gap: 16px;
	margin-top: 20px;
	position: relative;
	z-index: 1;
}

.ostat {
	flex: 1;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	text-align: center;
}

.ostat .on {
	font-family: var(--disp);
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.ostat .on em {
	font-size: 14px;
	color: var(--amber);
}

.ostat .ol {
	font-size: 11px;
	color: rgba(255, 255, 255, .55);
	font-weight: 500;
	margin-top: 3px;
}

.output-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.op {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.op-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.op-icon svg {
	width: 21px;
	height: 21px;
	color: var(--amber-dark);
}

.op h4 {
	font-size: 16px;
	margin-bottom: 4px;
}

.op p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
}

.spec-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 44px;
}

/* 3-PHASE SECTION */
.three-phase {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.tp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.tp-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 30px;
}

.tp-card h3 {
	font-size: 19px;
	color: #fff;
	margin-bottom: 20px;
}

.tp-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tp-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tp-row svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.tp-row svg.check {
	color: #6ee7b7;
}

.tp-row svg.alert {
	color: #fcd34d;
}

.tp-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.tp-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.tp-right h2 {
	font-size: clamp(24px, 3.5vw, 38px);
	color: #fff;
	margin-bottom: 14px;
}

.tp-right p {
	font-size: 16px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 22px;
}

.tp-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tps {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tps-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.tps div h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 2px;
}

.tps div p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

/* PRICE / NO PRICE section */
.pricing {
	padding: 80px 0;
	background: var(--slate);
}

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-top: 44px;
}

.price-card {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 28px;
}

.price-card h3 {
	font-size: 18px;
	margin-bottom: 12px;
}

.price-card p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 16px;
}

.price-factors {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pf {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--body);
}

.pf svg {
	width: 15px;
	height: 15px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 3px;
}

.price-card .cta-card {
	background: var(--ink);
	border-radius: var(--r);
	padding: 24px;
	margin-top: 20px;
	text-align: center;
}

.price-card .cta-card h4 {
	font-size: 16px;
	color: #fff;
	margin-bottom: 8px;
}

.price-card .cta-card p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 16px;
}

.rebate-card2 {
	background: var(--white);
	border: 1.5px solid var(--green);
	border-radius: var(--r-lg);
	padding: 28px;
}

.rebate-card2 h3 {
	font-size: 18px;
	margin-bottom: 12px;
	color: var(--green-dk);
}

.reb-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}

.reb-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.reb-item svg {
	width: 18px;
	height: 18px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 2px;
}

.reb-item div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
	margin-bottom: 3px;
}

.reb-item div span {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

/* WHAT'S INCLUDED */
.included {
	padding: 80px 0;
	background: var(--slate);
}

.inc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 44px;
}

.inc-card {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 24px;
}

.inc-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.inc-icon svg {
	width: 23px;
	height: 23px;
	color: var(--amber);
}

.inc-card h4 {
	font-size: 15px;
	margin-bottom: 8px;
}

.inc-card p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

/* Output alert pill — signature element */
.output-pill {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(14, 159, 110, .12);
	border: 1.5px solid rgba(110, 231, 183, .3);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	margin-bottom: 22px;
}

.op-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(14, 159, 110, .25);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.op-icon svg {
	width: 17px;
	height: 17px;
	color: #6ee7b7;
}

.output-pill p {
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	line-height: 1.5;
}

.output-pill p strong {
	color: #fff;
}

/* CHECKLIST SECTION — core AEO element */
.checklist-section {
	padding: 84px 0;
	background: var(--white);
}

.cl-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
	margin-top: 44px;
}

/* The numbered checklist */
.cl-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cl-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.cl-step:first-child {
	padding-top: 0;
}

.cl-step:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cl-num {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 16px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-top: 2px;
}

.cl-body h4 {
	font-size: 16px;
	margin-bottom: 6px;
}

.cl-body p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

.cl-tag {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 3px 9px;
	border-radius: 50px;
	font-family: var(--disp);
}

.cl-tag.safety {
	background: var(--red-lt);
	color: var(--red);
}

.cl-tag.output {
	background: var(--green-lt);
	color: var(--green-dk);
}

.cl-tag.warranty {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

/* Sticky card */
.service-card {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	color: #fff;
	position: sticky;
	top: 90px;
}

.service-card h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 4px;
}

.service-card .sc-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 22px;
}

.sc-section {
	margin-bottom: 20px;
}

.sc-section h4 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--amber);
	margin-bottom: 10px;
	font-family: var(--disp);
}

.sc-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	font-size: 13.5px;
	color: rgba(255, 255, 255, .82);
	font-weight: 500;
}

.sc-item:last-child {
	border-bottom: 0;
}

.sc-item svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
}

.sc-cta {
	margin-top: 22px;
}

.sc-freq {
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: var(--r-sm);
	padding: 13px 15px;
	margin-bottom: 16px;
}

.sc-freq p {
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.6;
}

.sc-freq strong {
	color: var(--amber);
}

/* WHY OUTPUT DROPS */
.why-drops {
	padding: 80px 0;
	background: var(--slate);
}

.wd-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

/* Loss bars visual */
.loss-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 30px;
	overflow: hidden;
	position: relative;
}

.loss-visual::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .15), transparent 70%);
}

.lv-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .7);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 6px;
	font-family: var(--disp);
	position: relative;
	z-index: 1;
}

.lv-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.loss-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.loss-row {
	display: grid;
	grid-template-columns: 140px 1fr 52px;
	align-items: center;
	gap: 10px;
}

.loss-label {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .75);
	font-weight: 600;
}

.loss-track {
	background: rgba(255, 255, 255, .08);
	border-radius: 50px;
	height: 9px;
	overflow: hidden;
}

.loss-fill {
	height: 100%;
	border-radius: 50px;
}

.loss-fill.high {
	background: linear-gradient(90deg, #ef4444, #f97316);
}

.loss-fill.med {
	background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

.loss-fill.low {
	background: linear-gradient(90deg, #6ee7b7, #34d399);
}

.loss-pct {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .6);
	text-align: right;
	font-family: var(--disp);
}

.lv-note {
	margin-top: 20px;
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	line-height: 1.6;
	position: relative;
	z-index: 1;
}

.wd-points {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wdp {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.wdp-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--white);
	border: 1.5px solid var(--line);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.wdp-icon svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.wdp h4 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.wdp p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

/* DIY WARNING */
.diy-warning {
	padding: 72px 0;
	background: var(--white);
}

.diy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 44px;
}

.diy-card {
	border-radius: var(--r-lg);
	padding: 28px;
}

.diy-card.dont {
	background: var(--red-lt);
	border: 1.5px solid #fecaca;
}

.diy-card.do {
	background: var(--green-lt);
	border: 1.5px solid #6ee7b7;
}

.diy-card h3 {
	font-size: 18px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.diy-card.dont h3 {
	color: #7f1d1d;
}

.diy-card.do h3 {
	color: var(--green-dk);
}

.diy-card h3 svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.diy-card.dont h3 svg {
	color: var(--red);
}

.diy-card.do h3 svg {
	color: var(--green);
}

.diy-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, .08);
	font-size: 14px;
	line-height: 1.55;
}

.diy-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.diy-item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.diy-card.dont .diy-item {
	color: #7f1d1d;
}

.diy-card.dont .diy-item svg {
	color: var(--red);
}

.diy-card.do .diy-item {
	color: var(--green-dk);
}

.diy-card.do .diy-item svg {
	color: var(--green-dk);
}

/* SERVICE INTERVALS */
.intervals {
	padding: 80px 0;
	background: var(--slate);
}

.int-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 44px;
}

.int-card {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px;
	transition: var(--t);
}

.int-card:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.int-freq {
	font-family: var(--disp);
	font-size: 22px;
	font-weight: 800;
	color: var(--amber-dark);
	margin-bottom: 6px;
}

.int-card h3 {
	font-size: 17px;
	margin-bottom: 10px;
}

.int-card p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 14px;
}

.int-includes {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ii {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--body);
}

.ii svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
}

/* ISOLATOR WARNING */
.isolator {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.iso-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.iso-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 30px;
}

.iso-card h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 18px;
}

.iso-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.iso-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.iso-row svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.iso-row .check {
	color: #6ee7b7;
}

.iso-row .warn {
	color: #fcd34d;
}

.iso-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.iso-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.iso-right h2 {
	font-size: clamp(22px, 3.5vw, 36px);
	color: #fff;
	margin-bottom: 14px;
}

.iso-right p {
	font-size: 15.5px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 20px;
}

.iso-stat {
	background: rgba(239, 68, 68, .12);
	border: 1px solid rgba(239, 68, 68, .3);
	border-radius: var(--r-sm);
	padding: 16px 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 20px;
}

.iso-stat svg {
	width: 18px;
	height: 18px;
	color: #fca5a5;
	flex: 0 0 auto;
	margin-top: 2px;
}

.iso-stat p {
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
}

.iso-stat strong {
	color: #fca5a5;
}

/* ALL BRANDS */
.all-brands {
	padding: 72px 0;
	background: var(--white);
}

.brands-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.brand-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.brand-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	background: var(--slate);
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
}

.brand-item svg {
	width: 20px;
	height: 20px;
	color: var(--green);
	flex: 0 0 auto;
}

.brand-item span {
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14px;
	color: var(--ink);
}

.brand-note {
	margin-top: 20px;
	background: var(--amber-soft);
	border-radius: var(--r-sm);
	padding: 14px 18px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid #fde68a;
}

.brand-note svg {
	width: 16px;
	height: 16px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.brand-note p {
	font-size: 13.5px;
	color: #78350f;
	line-height: 1.6;
}

/* Upgrade pill — signature element */
.upgrade-pill {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(8, 145, 178, .14);
	border: 1.5px solid rgba(103, 232, 249, .3);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	margin-bottom: 22px;
}

.up-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(8, 145, 178, .25);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.up-icon svg {
	width: 17px;
	height: 17px;
	color: #67e8f9;
}

.upgrade-pill p {
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	line-height: 1.5;
}

.upgrade-pill p strong {
	color: #fff;
}

/* UPGRADE PATH CARDS */
.upgrade-paths {
	padding: 84px 0;
	background: var(--white);
}

.path-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.path-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	display: flex;
	flex-direction: column;
}

.path-card:hover {
	border-color: var(--amber);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}

.pc-top {
	padding: 24px 24px 18px;
	background: var(--slate);
}

.pc-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--amber);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 16px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.pc-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 3px 10px;
	border-radius: 50px;
	font-family: var(--disp);
	margin-bottom: 10px;
}

.pc-badge.popular {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.pc-badge.simple {
	background: var(--green-lt);
	color: var(--green-dk);
}

.pc-badge.full {
	background: var(--teal-lt);
	color: var(--teal);
}

.pc-top h3 {
	font-size: 18px;
	color: var(--ink);
	margin-bottom: 6px;
}

.pc-top .pc-when {
	font-size: 13px;
	color: var(--muted);
	font-weight: 500;
	line-height: 1.5;
}

.pc-body {
	padding: 20px 24px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pc-body p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
	flex: 1;
}

.pc-pros {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pcp {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	color: var(--body);
}

.pcp svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 2px;
}

.pc-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
	text-decoration: none;
	margin-top: auto;
}

.pc-link svg {
	width: 15px;
	height: 15px;
	transition: var(--t);
}

.path-card:hover .pc-link svg {
	transform: translateX(4px);
}

/* INVERTER HEADROOM — signature technical section */
.headroom {
	padding: 80px 0;
	background: var(--slate);
}

.hr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

/* Headroom diagram */
.hr-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.hr-visual::after {
	content: "";
	position: absolute;
	right: -50px;
	top: -50px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .18), transparent 70%);
}

.hr-visual h3 {
	font-size: 16px;
	color: #fff;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.inv-examples {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	z-index: 1;
}

.inv-ex {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	padding: 16px 18px;
}

.inv-ex h4 {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, .55);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-family: var(--disp);
	margin-bottom: 12px;
}

.inv-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.inv-bar-row:last-child {
	margin-bottom: 0;
}

.inv-bar-label {
	font-size: 12px;
	color: rgba(255, 255, 255, .65);
	width: 100px;
	flex: 0 0 auto;
}

.inv-track {
	flex: 1;
	background: rgba(255, 255, 255, .08);
	border-radius: 50px;
	height: 10px;
	overflow: hidden;
}

.inv-fill {
	height: 100%;
	border-radius: 50px;
}

.inv-fill.current {
	background: linear-gradient(90deg, var(--amber), #fcd34d);
}

.inv-fill.capacity {
	background: rgba(255, 255, 255, .2);
}

.inv-fill.headroom {
	background: linear-gradient(90deg, var(--green), #6ee7b7);
}

.inv-watt {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .6);
	font-family: var(--disp);
	white-space: nowrap;
}

.inv-verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: var(--r-sm);
}

.inv-verdict.has-room {
	background: rgba(14, 159, 110, .15);
	border: 1px solid rgba(14, 159, 110, .3);
}

.inv-verdict.no-room {
	background: rgba(239, 68, 68, .12);
	border: 1px solid rgba(239, 68, 68, .25);
}

.inv-verdict svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.inv-verdict.has-room svg {
	color: #6ee7b7;
}

.inv-verdict.no-room svg {
	color: #fca5a5;
}

.inv-verdict span {
	font-size: 12.5px;
	font-weight: 600;
}

.inv-verdict.has-room span {
	color: #6ee7b7;
}

.inv-verdict.no-room span {
	color: #fca5a5;
}

.hr-note {
	margin-top: 20px;
	background: rgba(245, 158, 11, .1);
	border: 1px solid rgba(245, 158, 11, .28);
	border-radius: var(--r-sm);
	padding: 13px 15px;
	position: relative;
	z-index: 1;
}

.hr-note p {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.6;
}

.hr-note strong {
	color: var(--amber);
}

.hr-right h2 {
	margin-bottom: 14px;
}

.hr-points {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hrp {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.hrp-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--white);
	border: 1.5px solid var(--line);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.hrp-icon svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.hrp h4 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.hrp p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

/* INVERTER UPGRADE */
.inverter-section {
	padding: 80px 0;
	background: var(--white);
}

.inv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.inv-when {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.iw-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--slate);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	padding: 18px;
	transition: var(--t);
}

.iw-card:hover {
	border-color: var(--amber);
}

.iw-icon {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--ink);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.iw-icon svg {
	width: 19px;
	height: 19px;
	color: var(--amber);
}

.iw-card h4 {
	font-size: 15px;
	margin-bottom: 4px;
}

.iw-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
}

.inv-right h2 {
	margin-bottom: 14px;
}

.inv-right p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 20px;
}

.inv-brands {
	background: var(--slate);
	border-radius: var(--r);
	padding: 20px 22px;
	border: 1.5px solid var(--line);
}

.inv-brands h4 {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 12px;
	font-family: var(--disp);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.brand-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.brand-pill {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 5px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var(--body);
	font-family: var(--disp);
}

/* OLD SYSTEM GUIDE */
.old-system {
	padding: 80px 0;
	background: var(--slate);
}

.os-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
	margin-top: 44px;
}

.os-scenarios {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.osc {
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	background: var(--white);
	overflow: hidden;
	transition: var(--t);
}

.osc:hover {
	border-color: var(--amber);
}

.osc-head {
	padding: 16px 20px;
	background: var(--slate);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.osc-head h4 {
	font-size: 15px;
	color: var(--ink);
}

.osc-tag {
	font-size: 11px;
	font-weight: 800;
	padding: 3px 9px;
	border-radius: 50px;
	font-family: var(--disp);
	white-space: nowrap;
}

.osc-tag.keep {
	background: var(--green-lt);
	color: var(--green-dk);
}

.osc-tag.replace {
	background: rgba(239, 68, 68, .1);
	color: #b91c1c;
}

.osc-tag.assess {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.osc-body {
	padding: 14px 20px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

.os-right h2 {
	margin-bottom: 14px;
}

.os-right p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 22px;
}

.stc-note {
	background: var(--white);
	border: 1.5px solid var(--green);
	border-radius: var(--r);
	padding: 20px 22px;
}

.stc-note h4 {
	font-size: 15px;
	color: var(--green-dk);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.stc-note h4 svg {
	width: 18px;
	height: 18px;
	color: var(--green);
}

.stc-note p {
	font-size: 14px;
	color: var(--body);
	line-height: 1.65;
}

/* NETWORK APPROVAL */
.network {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.net-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.net-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 30px;
}

.net-card h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 18px;
}

.net-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.net-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.net-row svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--amber);
}

.net-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.net-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.net-right h2 {
	font-size: clamp(22px, 3.5vw, 36px);
	color: #fff;
	margin-bottom: 14px;
}

.net-right p {
	font-size: 15.5px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 22px;
}

.net-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ns {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ns-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.ns div h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 2px;
}

.ns div p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

/* Honest pill — signature element for this page */
.honest-pill {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(245, 158, 11, .12);
	border: 1.5px solid rgba(245, 158, 11, .35);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	margin-bottom: 22px;
}

.hp-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(245, 158, 11, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.hp-icon svg {
	width: 17px;
	height: 17px;
	color: var(--amber);
}

.honest-pill p {
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	line-height: 1.5;
}

.honest-pill p strong {
	color: #fff;
}

/* CONTACT CARD (not quote form — different intent) */
.contact-card {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.cc-head {
	background: linear-gradient(135deg, var(--amber), var(--amber-dark));
	padding: 18px 24px;
}

.cc-head h2 {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 2px;
}

.cc-head p {
	font-size: 13px;
	font-weight: 600;
	color: #5c3d04;
}

.cc-body {
	padding: 22px 24px 24px;
}

.cc-option {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.cc-option:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cc-opt-icon {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--ink);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cc-opt-icon svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
}

.cc-option h4 {
	font-size: 14.5px;
	color: var(--ink);
	margin-bottom: 4px;
	font-family: var(--disp);
	font-weight: 700;
}

.cc-option p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
	margin-bottom: 8px;
}

.cc-option a.cc-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

.fine {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.fine svg {
	width: 13px;
	height: 13px;
	color: var(--green);
}

/* ARE USED PANELS WORTH IT — honest verdict section */
.verdict {
	padding: 84px 0;
	background: var(--white);
}

.verdict-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
}

/* Verdict cards — honest, clear */
.verdict-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vcard {
	border-radius: var(--r-lg);
	padding: 24px;
	border: 1.5px solid;
}

.vcard.no {
	background: var(--red-lt);
	border-color: #fecaca;
}

.vcard.sometimes {
	background: var(--amber-soft);
	border-color: #fde68a;
}

.vcard.yes {
	background: var(--green-lt);
	border-color: #6ee7b7;
}

.vcard-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.vcard-head svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.vcard.no .vcard-head svg {
	color: var(--red);
}

.vcard.sometimes .vcard-head svg {
	color: var(--amber-dark);
}

.vcard.yes .vcard-head svg {
	color: var(--green-dk);
}

.vcard h3 {
	font-size: 16px;
}

.vcard.no h3 {
	color: #7f1d1d;
}

.vcard.sometimes h3 {
	color: #78350f;
}

.vcard.yes h3 {
	color: var(--green-dk);
}

.vcard p {
	font-size: 14px;
	line-height: 1.65;
}

.vcard.no p {
	color: #7f1d1d;
}

.vcard.sometimes p {
	color: #78350f;
}

.vcard.yes p {
	color: var(--green-dk);
}

.verdict-right h2 {
	margin-bottom: 14px;
}

.verdict-right .intro {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 22px;
}

.stc-box {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 26px;
	color: #fff;
}

.stc-box h4 {
	font-size: 16px;
	color: #fff;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.stc-box h4 svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.stc-compare {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stc-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.stc-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.stc-row svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.stc-row svg.check {
	color: #6ee7b7;
}

.stc-row svg.cross {
	color: #fca5a5;
}

.stc-row div b {
	display: block;
	font-size: 13.5px;
	font-family: var(--disp);
	margin-bottom: 2px;
}

.stc-row.check-row div b {
	color: #fff;
}

.stc-row.cross-row div b {
	color: rgba(255, 255, 255, .7);
}

.stc-row div span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .55);
	line-height: 1.5;
}

/* WHAT WE DO WITH PANELS */
.what-we-do {
	padding: 80px 0;
	background: var(--slate);
}

.wwd-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.wwd-card {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
}

.wwd-card:hover {
	border-color: var(--amber);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}

.wwd-top {
	padding: 24px 24px 18px;
	background: var(--slate);
}

.wwd-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.wwd-icon svg {
	width: 24px;
	height: 24px;
	color: var(--amber);
}

.wwd-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 3px 10px;
	border-radius: 50px;
	font-family: var(--disp);
	margin-bottom: 10px;
}

.wwd-badge.sell {
	background: var(--green-lt);
	color: var(--green-dk);
}

.wwd-badge.buy {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.wwd-badge.recycle {
	background: var(--teal-lt, #e0f6fc);
	color: #0891b2;
}

.wwd-top h3 {
	font-size: 18px;
	color: var(--ink);
}

.wwd-body {
	padding: 18px 24px 24px;
}

.wwd-body p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 14px;
}

.wwd-steps {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ws {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: var(--body);
}

.ws svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 2px;
}

.wwd-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

/* DEGRADATION SECTION */
.degradation {
	padding: 80px 0;
	background: var(--white);
}

.deg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.deg-chart {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 30px;
	position: relative;
	overflow: hidden;
}

.deg-chart::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .15), transparent 70%);
}

.deg-title {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .65);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--disp);
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}

.deg-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
}

.deg-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	height: 100px;
	position: relative;
	z-index: 1;
}

.deg-year {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
}

.deg-bar {
	border-radius: 4px 4px 0 0;
	width: 100%;
	background: linear-gradient(180deg, var(--amber), rgba(245, 158, 11, .4));
}

.deg-year-label {
	font-size: 10px;
	color: rgba(255, 255, 255, .45);
	font-family: var(--disp);
	font-weight: 600;
}

.deg-year-pct {
	font-size: 11px;
	color: rgba(255, 255, 255, .7);
	font-family: var(--disp);
	font-weight: 700;
}

.deg-note {
	margin-top: 18px;
	background: rgba(245, 158, 11, .1);
	border: 1px solid rgba(245, 158, 11, .25);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	position: relative;
	z-index: 1;
}

.deg-note p {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .7);
	line-height: 1.6;
}

.deg-note strong {
	color: var(--amber);
}

.deg-points {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dp {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.dp-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--white);
	border: 1.5px solid var(--line);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.dp-icon svg {
	width: 20px;
	height: 20px;
	color: var(--amber-dark);
}

.dp h4 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.dp p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

/* RECYCLE SECTION */
.recycle-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.rc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.rc-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-lg);
	padding: 30px;
}

.rc-card h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.rc-card h3 svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
}

.rc-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rc-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rc-row svg {
	width: 16px;
	height: 16px;
	color: #6ee7b7;
	flex: 0 0 auto;
	margin-top: 3px;
}

.rc-row div b {
	display: block;
	font-size: 13.5px;
	font-family: var(--disp);
	color: #fff;
	margin-bottom: 2px;
}

.rc-row div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.5;
}

.rc-right h2 {
	font-size: clamp(22px, 3.5vw, 36px);
	color: #fff;
	margin-bottom: 14px;
}

.rc-right p {
	font-size: 15.5px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 18px;
}

.rc-award {
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: var(--r-sm);
	padding: 16px 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 20px;
}

.rc-award svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 2px;
}

.rc-award p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
}

.rc-award strong {
	color: var(--amber);
}

/* NEW VS USED COMPARISON */
.comparison {
	padding: 80px 0;
	background: var(--slate);
}

.comp-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	margin-top: 44px;
}

.comp-table thead tr {
	background: var(--ink);
	color: #fff;
}

.comp-table thead th {
	padding: 16px 20px;
	text-align: left;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
}

.comp-table thead th:first-child {
	width: 30%;
}

.comp-table tbody tr {
	border-bottom: 1px solid var(--line);
}

.comp-table tbody tr:last-child {
	border-bottom: 0;
}

.comp-table tbody tr:hover {
	background: var(--amber-soft);
}

.comp-table td {
	padding: 15px 20px;
	font-size: 14px;
	vertical-align: top;
}

.comp-table td:first-child {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
}

.good {
	color: var(--green-dk);
	font-weight: 600;
}

.bad {
	color: var(--red);
	font-weight: 600;
}

.neutral {
	color: var(--muted);
	font-weight: 500;
}

/* WHEN IT MAKES SENSE */
.when-sense {
	padding: 72px 0;
	background: var(--white);
}

.ws-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 40px;
}

.wsc {
	background: var(--slate);
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
}

.wsc.makes {
	border-color: var(--green);
	background: var(--green-lt);
}

.wsc.doesnt {
	border-color: #fecaca;
	background: var(--red-lt);
}

.wsc h4 {
	font-size: 16px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wsc.makes h4 {
	color: var(--green-dk);
}

.wsc.doesnt h4 {
	color: #7f1d1d;
}

.wsc h4 svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.wsc.makes h4 svg {
	color: var(--green);
}

.wsc.doesnt h4 svg {
	color: var(--red);
}

.wsc-items {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.wsi {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.55;
}

.wsi svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.wsc.makes .wsi {
	color: var(--green-dk);
}

.wsc.makes .wsi svg {
	color: var(--green-dk);
}

.wsc.doesnt .wsi {
	color: #7f1d1d;
}

.wsc.doesnt .wsi svg {
	color: var(--red);
}

/* what does it do */
.what {
	padding: 80px 0;
	background: var(--white);
}

.what-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.what-visual {
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	border-radius: var(--r-lg);
	padding: 40px 36px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.what-visual::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .2), transparent 70%);
}

.what-visual h3 {
	font-size: 22px;
	color: #fff;
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
}

.bess-flow {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	z-index: 1;
}

.bess-step {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	padding: 14px 16px;
}

.bess-step .ic {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: rgba(245, 158, 11, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.bess-step .ic svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
}

.bess-step .tx b {
	display: block;
	font-family: var(--disp);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
}

.bess-step .tx span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .65);
}

.arrow-down {
	text-align: center;
	color: rgba(255, 255, 255, .3);
	font-size: 18px;
	line-height: 1;
}

.what-points {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.wp {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.wp-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.wp-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.wp h4 {
	font-size: 16px;
	margin-bottom: 4px;
}

.wp p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.6;
}

/* demand savings visual */
.demand {
	padding: 80px 0;
	background: var(--slate);
}

.demand-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.demand-chart {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	overflow: hidden;
	position: relative;
}

.demand-chart h4 {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 24px;
}

.chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 160px;
	position: relative;
	z-index: 1;
}

.bar-group {
	display: flex;
	gap: 4px;
	align-items: flex-end;
	flex: 1;
}

.bar {
	border-radius: 5px 5px 0 0;
	min-width: 16px;
	transition: var(--t);
}

.bar.without {
	background: rgba(239, 68, 68, .7);
}

.bar.with {
	background: rgba(245, 158, 11, .85);
}

.chart-legend {
	display: flex;
	gap: 18px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.leg-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
}

.leg-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.chart-label {
	font-size: 10.5px;
	color: rgba(255, 255, 255, .35);
	text-align: center;
	flex: 1;
	padding-top: 6px;
}

.chart-axis {
	display: flex;
	gap: 8px;
	margin-top: 2px;
}

.demand-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dp {
	background: var(--white);
	border-radius: var(--r);
	padding: 18px 20px;
	border-left: 4px solid var(--amber);
}

.dp h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--ink);
}

.dp p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

/* use cases */
.usecases {
	padding: 80px 0;
	background: var(--white);
}

.uc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}

.uc-card {
	background: var(--slate);
	border-radius: var(--r);
	padding: 26px;
	border: 1.5px solid var(--line);
	transition: var(--t);
}

.uc-card:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.uc-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: var(--ink);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.uc-icon svg {
	width: 26px;
	height: 26px;
	color: var(--amber);
}

.uc-card h3 {
	font-size: 17px;
	margin-bottom: 8px;
}

.uc-card p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

.uc-tag {
	display: inline-block;
	margin-top: 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--amber-dark);
	background: var(--amber-soft);
	padding: 4px 10px;
	border-radius: 50px;
}

/* incentives */
.incentives {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.inc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 40px;
}

.inc-card {}

.inc-card h3 {
	font-size: 17px;
	color: #fff;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.inc-card h3 svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
}

.inc-card p {
	font-size: 14.5px;
	/* color:rgba(255,255,255,.72); */
	line-height: 1.65;
}

.inc-note {
	margin-top: 30px;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: var(--r-sm);
	padding: 18px 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.inc-note svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 2px;
}

.inc-note p {
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
}

/* process */
.process {
	padding: 80px 0;
	background: var(--slate);
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 44px;
	position: relative;
}

.steps::before {
	content: "";
	position: absolute;
	top: 28px;
	left: calc(12.5% + 14px);
	right: calc(12.5% + 14px);
	height: 2px;
	background: linear-gradient(90deg, var(--amber), var(--amber-soft));
	z-index: 0;
}

.step-card {
	text-align: center;
	position: relative;
	z-index: 1;
}

.step-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 20px;
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
	box-shadow: 0 0 0 6px var(--amber-soft);
}

.step-card h4 {
	font-size: 15px;
	margin-bottom: 8px;
	color: var(--ink);
}

.step-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
}

/* trust */
.credentials {
	padding: 72px 0;
	background: var(--white);
}

.cred-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-top: 40px;
}

.cred-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cred-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--slate);
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
}

.cred-item svg {
	width: 22px;
	height: 22px;
	color: var(--green);
	flex: 0 0 auto;
}

.cred-item span {
	font-weight: 600;
	font-family: var(--disp);
	font-size: 14.5px;
	color: var(--ink);
}

.award-block {
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	border-radius: var(--r-lg);
	padding: 36px;
	color: #fff;
}

.award-block h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 20px;
}

.award-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.award-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.award-row svg {
	width: 22px;
	height: 22px;
	color: var(--amber);
	flex: 0 0 auto;
}

.award-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.award-row div span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}

.rev-summary {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ink);
	border-radius: var(--r);
	padding: 22px 28px;
	margin-top: 28px;
	flex-wrap: wrap;
}

.rev-summary {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ink);
	border-radius: var(--r);
	padding: 22px 28px;
	margin-top: 28px;
	flex-wrap: wrap;
}

.rs-score {
	font-family: var(--disp);
	font-size: 42px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.rs-score em {
	font-size: 18px;
	color: var(--amber);
}

.rs-detail .stars {
	color: var(--amber);
	font-size: 20px;
	display: block;
	margin-bottom: 4px;
}

.rs-detail span {
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
}

/* problem section */
.problem {
	padding: 80px 0;
	background: var(--white);
}

.prob-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.prob-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.prob-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--red-lt);
	border: 1.5px solid #fecaca;
	border-radius: var(--r-sm);
	padding: 18px 20px;
}

.prob-card .pic {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #fee2e2;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.prob-card .pic svg {
	width: 20px;
	height: 20px;
	color: var(--red);
}

.prob-card h4 {
	font-size: 15px;
	margin-bottom: 4px;
	color: #991b1b;
}

.prob-card p {
	font-size: 13.5px;
	color: #7f1d1d;
	line-height: 1.6;
}

.prob-right h2 {
	margin-bottom: 16px;
}

.prob-right p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 22px;
}

.prob-note {
	background: var(--amber-soft);
	border: 1.5px solid #fde68a;
	border-radius: var(--r-sm);
	padding: 16px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.prob-note svg {
	width: 18px;
	height: 18px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.prob-note p {
	font-size: 14px;
	color: #78350f;
	line-height: 1.6;
	font-weight: 500;
}

/* O&M scope */
.scope {
	padding: 80px 0;
	background: var(--slate);
}

.scope-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 44px;
}

.scope-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.scope-item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.scope-item:first-child {
	padding-top: 0;
}

.scope-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sc-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 15px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-top: 2px;
}

.sc-body h4 {
	font-size: 16px;
	margin-bottom: 6px;
}

.sc-body p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

.sc-tag {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--green-dk);
	background: var(--green-lt);
	padding: 3px 9px;
	border-radius: 50px;
}

/* visual checklist card */
.checklist-card {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	color: #fff;
	position: sticky;
	top: 100px;
}

.checklist-card h3 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 6px;
}

.checklist-card .sub {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 24px;
	font-weight: 500;
}

.cl-section {
	margin-bottom: 22px;
}

.cl-section h4 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--amber);
	margin-bottom: 10px;
}

.cl-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cl-item:last-child {
	border-bottom: 0;
}

.cl-item svg {
	width: 16px;
	height: 16px;
	color: var(--green);
	flex: 0 0 auto;
}

.cl-item span {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .82);
	font-weight: 500;
}

.cl-freq {
	margin-top: 20px;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: var(--r-sm);
	padding: 14px 16px;
}

.cl-freq p {
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.6;
}

.cl-freq strong {
	color: var(--amber);
}

/* output loss visual */
.output {
	padding: 80px 0;
	background: var(--white);
}

.output-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.loss-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 32px;
	overflow: hidden;
	position: relative;
}

.loss-visual::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .15), transparent 70%);
}

.loss-visual h3 {
	font-size: 16px;
	color: #fff;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}

.loss-visual .lv-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
}

.loss-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.loss-row {
	display: grid;
	grid-template-columns: 150px 1fr 48px;
	align-items: center;
	gap: 12px;
}

.loss-label {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .75);
	font-weight: 600;
}

.loss-track {
	background: rgba(255, 255, 255, .08);
	border-radius: 50px;
	height: 10px;
	overflow: hidden;
}

.loss-fill {
	height: 100%;
	border-radius: 50px;
	background: linear-gradient(90deg, var(--red), #f97316);
}

.loss-fill.low {
	background: linear-gradient(90deg, #fbbf24, var(--amber));
}

.loss-pct {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .65);
	text-align: right;
}

.loss-note {
	margin-top: 22px;
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	line-height: 1.6;
	position: relative;
	z-index: 1;
}

.output-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.op2 {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.op2-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--amber-soft);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.op2-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.op2 h4 {
	font-size: 16px;
	margin-bottom: 5px;
}

.op2 p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.65;
}

/* contracts */
.contracts {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.con-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.con-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-lg);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: var(--t);
	position: relative;
}

.con-card:hover {
	border-color: rgba(245, 158, 11, .5);
	background: rgba(255, 255, 255, .09);
}

.con-card.featured {
	border-color: var(--amber);
	background: rgba(245, 158, 11, .08);
}

.con-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-size: 11.5px;
	font-weight: 800;
	padding: 4px 14px;
	border-radius: 50px;
	white-space: nowrap;
}

.con-card h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 6px;
}

.con-card .con-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 22px;
	font-weight: 500;
}

.con-includes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
	flex: 1;
}

.con-includes .ci {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

.con-includes .ci svg {
	width: 15px;
	height: 15px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 3px;
}

.con-card .con-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px;
	border-radius: var(--r-sm);
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	border: 1.5px solid rgba(255, 255, 255, .25);
	color: #fff;
	transition: var(--t);
}

.con-card .con-cta:hover {
	border-color: var(--amber);
	background: rgba(245, 158, 11, .15);
}

.con-card.featured .con-cta {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--ink);
}

.con-card.featured .con-cta:hover {
	background: var(--amber-dark);
}

.con-note {
	margin-top: 28px;
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

/* third party section */
.thirdparty {
	padding: 72px 0;
	background: var(--slate);
}

.tp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.tp-points {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tp-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	padding: 18px 20px;
}

.tp-item svg {
	width: 22px;
	height: 22px;
	color: var(--green);
	flex: 0 0 auto;
	margin-top: 2px;
}

.tp-item h4 {
	font-size: 15px;
	margin-bottom: 4px;
}

.tp-item p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
}

/* ===================== SERVICES GRID ===================== */
.eservices {
	padding: 84px 0;
	background: var(--white);
}

.eservices-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
	margin-bottom: 52px;
}

.eservices-intro .sec-sub {
	margin: 0;
}

.cta-inline {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.svc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.svc-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 26px 22px;
	transition: var(--t);
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	overflow: hidden;
	background: var(--white);
}

.svc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--elec-lt), transparent);
	opacity: 0;
	transition: var(--t);
}

.svc-card:hover {
	border-color: var(--elec);
	transform: translateY(-4px);
	box-shadow: var(--sh);
}

.svc-card:hover::before {
	opacity: 1;
}

.svc-card.high {
	border-top: 3px solid var(--amber);
}

.svc-icon {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--ink);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.svc-icon svg {
	width: 26px;
	height: 26px;
	color: var(--amber);
}

.svc-priority {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--amber-dark);
	background: var(--amber-soft);
	padding: 3px 8px;
	border-radius: 50px;
}

.svc-card h3 {
	font-size: 16px;
	color: var(--ink);
	line-height: 1.25;
	position: relative;
	z-index: 1;
}

.svc-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
	flex: 1;
	position: relative;
	z-index: 1;
}

.svc-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--elec);
	font-family: var(--disp);
	display: flex;
	align-items: center;
	gap: 5px;
	position: relative;
	z-index: 1;
	transition: var(--t);
}

.svc-card:hover .svc-link {
	gap: 8px;
}

/* emergency card — standout */
.svc-card.emergency {
	background: var(--ink);
	border-color: var(--ink);
}

.svc-card.emergency::before {
	background: linear-gradient(135deg, rgba(239, 68, 68, .2), transparent);
}

.svc-card.emergency h3 {
	color: #fff;
}

.svc-card.emergency p {
	color: rgba(255, 255, 255, .65);
}

.svc-card.emergency .svc-icon {
	background: rgba(239, 68, 68, .2);
}

.svc-card.emergency .svc-icon svg {
	color: #fca5a5;
}

.svc-card.emergency .svc-link {
	color: #fca5a5;
}

.svc-card.emergency .svc-priority {
	background: rgba(239, 68, 68, .2);
	color: #fca5a5;
}

/* ===================== WHY SUPPLY SOLAR ===================== */
.why {
	padding: 80px 0;
	background: var(--slate);
}

.why-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.why-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wp {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.wp-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--white);
	border: 1.5px solid var(--line);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.wp-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber-dark);
}

.wp h4 {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.wp p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}

/* licence card */
.licence-card {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 36px;
	color: #fff;
}

.licence-card h3 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 6px;
}

.licence-card .lc-sub {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 26px;
}

.lic-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.lic-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.lic-row svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
	margin-top: 2px;
}

.lic-row div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 2px;
}

.lic-row div span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .55);
	line-height: 1.5;
}

.lic-badge {
	margin-top: 22px;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.6;
}

.lic-badge strong {
	color: var(--amber);
}

/* ===================== COMPLIANCE STRIP ===================== */
.compliance {
	padding: 60px 0;
	background: var(--white);
}

.comp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.comp-card {
	background: var(--slate);
	border-radius: var(--r);
	padding: 24px;
	border-left: 4px solid var(--elec);
}

.comp-card h4 {
	font-size: 15px;
	margin-bottom: 8px;
	color: var(--ink);
}

.comp-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.6;
}

.comp-ref {
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--elec);
	font-family: var(--disp);
}

/* ===================== FAULT FINDER ===================== */
.fault {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.fault-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.fault-visual {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-lg);
	padding: 30px;
}

.fault-visual h3 {
	font-size: 17px;
	color: #fff;
	margin-bottom: 20px;
}

.fault-cause {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.fault-cause:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fc-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
	margin-top: 5px;
}

.fc-dot.red {
	background: #ef4444;
}

.fc-dot.amber {
	background: var(--amber);
}

.fc-dot.green {
	background: var(--green);
}

.fault-cause div b {
	display: block;
	font-family: var(--disp);
	font-size: 14px;
	color: #fff;
	margin-bottom: 3px;
}

.fault-cause div span {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

.fault-cta {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-sm);
	padding: 18px 20px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.fault-cta svg {
	width: 20px;
	height: 20px;
	color: var(--amber);
	flex: 0 0 auto;
}

.fault-cta p {
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.55;
}

.fault-cta a {
	color: var(--amber);
	font-weight: 700;
}

.fault-right h2 {
	font-size: clamp(24px, 3.5vw, 38px);
	color: #fff;
	margin-bottom: 14px;
}

.fault-right p {
	font-size: 16px;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
	margin-bottom: 22px;
}

.fault-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fs {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.fs-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--disp);
	font-weight: 800;
	font-size: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.fs div h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 3px;
}

.fs div p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}

/* ===== AREA CARDS ===== */
.areas {
	padding: 84px 0;
	background: var(--white);
}

.areas-intro {
	text-align: center;
	margin-bottom: 52px;
}

.areas-intro .sec-sub {
	margin: 0 auto;
}

/* Victoria map placeholder — signature visual element */
.vic-map {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 36px;
	margin-bottom: 52px;
	position: relative;
	overflow: hidden;
}

.vic-map::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 45% 60%, rgba(245, 158, 11, .12), transparent 65%);
}

.map-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	position: relative;
	z-index: 1;
}

.map-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 16px;
	font-family: var(--disp);
}

.map-suburb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.map-tag {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50px;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .75);
	transition: var(--t);
}

.map-tag:hover {
	background: rgba(245, 158, 11, .15);
	border-color: rgba(245, 158, 11, .4);
	color: var(--amber);
}

.map-hq {
	position: absolute;
	top: 18px;
	right: 24px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--amber);
	font-family: var(--disp);
}

.map-hq svg {
	width: 14px;
	height: 14px;
}

/* area card grid */
.area-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.area-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--t);
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.area-card:hover {
	border-color: var(--amber);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}

.ac-top {
	padding: 26px 24px 20px;
	background: var(--slate);
	position: relative;
}

.ac-top.hq {
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
}

.ac-region {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin-bottom: 8px;
	font-family: var(--disp);
}

.ac-top.hq .ac-region {
	color: rgba(255, 255, 255, .5);
}

.ac-top h3 {
	font-size: 20px;
	color: var(--ink);
	margin-bottom: 12px;
}

.ac-top.hq h3 {
	color: #fff;
}

.hq-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(245, 158, 11, .2);
	border: 1px solid rgba(245, 158, 11, .4);
	border-radius: 50px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--amber);
	font-family: var(--disp);
	margin-bottom: 10px;
}

.hq-badge svg {
	width: 11px;
	height: 11px;
}

.suburb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.stag {
	background: rgba(255, 255, 255, .65);
	border: 1px solid var(--line);
	border-radius: 50px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--body);
}

.ac-top.hq .stag {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .8);
}

.ac-body {
	padding: 20px 24px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ac-services {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.svc-dot {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--body);
	font-family: var(--disp);
}

.svc-dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex: 0 0 auto;
}

.ac-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

.ac-link svg {
	width: 16px;
	height: 16px;
	transition: var(--t);
}

.area-card:hover .ac-link svg {
	transform: translateX(4px);
}

/* ===== SUBURB FINDER ===== */
.suburb-finder {
	padding: 80px 0;
	background: var(--slate);
}

.sf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
}

.sf-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.sf-region {
	margin-bottom: 22px;
}

.sf-region h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--amber-dark);
	margin-bottom: 10px;
	font-family: var(--disp);
	padding: 0 4px;
}

.sf-suburbs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sf-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
	color: var(--body);
	transition: var(--t);
	text-decoration: none;
}

.sf-sub:last-child {
	border-bottom: 0;
}

.sf-sub:hover {
	color: var(--amber-dark);
	padding-left: 8px;
}

.sf-sub svg {
	width: 13px;
	height: 13px;
	color: var(--amber);
	flex: 0 0 auto;
	opacity: .7;
}

.sf-right h2 {
	margin-bottom: 14px;
}

.sf-right p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 22px;
}

.sf-note {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	padding: 18px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.sf-note svg {
	width: 18px;
	height: 18px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.sf-note p {
	font-size: 14px;
	color: var(--body);
	line-height: 1.6;
}

.sf-note strong {
	color: var(--ink);
}

/* ===== REBATES STRIP ===== */
.rebates {
	padding: 72px 0;
	background: linear-gradient(135deg, var(--ink), var(--ink-soft));
	color: #fff;
}

.reb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.reb-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r);
	padding: 24px;
}

.reb-card h3 {
	font-size: 16px;
	color: #fff;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.reb-card h3 svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.reb-card p {
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
	line-height: 1.65;
}

.reb-note {
	margin-top: 28px;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, .55);
}

.reb-note a {
	color: var(--amber);
	font-weight: 700;
}

/* ===== SERVICES STRIP ===== */
.aservices {
	padding: 72px 0;
	background: var(--white);
}

.svc-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.svc-item {
	background: var(--slate);
	border: 1.5px solid var(--line);
	border-radius: var(--r);
	padding: 22px 18px;
	transition: var(--t);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.svc-item:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.svc-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--ink);
	display: grid;
	place-items: center;
}

.svc-icon svg {
	width: 22px;
	height: 22px;
	color: var(--amber);
}

.svc-item h4 {
	font-size: 15px;
	color: var(--ink);
}

.svc-item p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
	flex: 1;
}

.svc-item .slink {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

/* urgency pill — signature element */
.urgency-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(239, 68, 68, .12);
	border: 1.5px solid rgba(239, 68, 68, .35);
	border-radius: var(--r-sm);
	padding: 12px 18px;
	margin-bottom: 24px;
}

.up-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(239, 68, 68, .2);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.up-icon svg {
	width: 16px;
	height: 16px;
	color: #fca5a5;
}

.urgency-pill p {
	font-size: 13px;
	color: #fca5a5;
	font-weight: 600;
	line-height: 1.45;
}

.urgency-pill p strong {
	color: #fff;
}

/* ===== MASTER REBATE TABLE ===== */
.rebate-table {
	padding: 84px 0;
	background: var(--white);
}

.rt-intro {
	text-align: center;
	margin-bottom: 48px;
}

.rt-intro .sec-sub {
	margin: 0 auto;
}

/* The table — signature GEO element */
.reb-master {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
}

.reb-master thead tr {
	background: var(--ink);
	color: #fff;
}

.reb-master thead th {
	padding: 16px 20px;
	text-align: left;
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

.reb-master tbody tr {
	border-bottom: 1px solid var(--line);
	transition: var(--t);
}

.reb-master tbody tr:last-child {
	border-bottom: 0;
}

.reb-master tbody tr:hover {
	background: var(--amber-soft);
}

.reb-master tbody tr.active {
	background: var(--green-lt);
}

.reb-master tbody tr.inactive {
	background: var(--red-lt);
}

.reb-master td {
	padding: 18px 20px;
	vertical-align: top;
	font-size: 14.5px;
}

.reb-master td:first-child {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	width: 22%;
}

.reb-master .amount {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 18px;
	color: var(--green-dk);
	white-space: nowrap;
}

.reb-master .amount.inactive {
	color: var(--red);
	font-size: 14px;
	font-weight: 600;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--disp);
}

.status-badge.active {
	background: var(--green-lt);
	color: var(--green-dk);
}

.status-badge.inactive {
	background: var(--red-lt);
	color: var(--red);
}

.status-badge.available {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.status-badge svg {
	width: 10px;
	height: 10px;
}

.rt-note {
	margin-top: 20px;
	background: var(--amber-soft);
	border: 1.5px solid #fde68a;
	border-radius: var(--r-sm);
	padding: 16px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.rt-note svg {
	width: 18px;
	height: 18px;
	color: var(--amber-dark);
	flex: 0 0 auto;
	margin-top: 2px;
}

.rt-note p {
	font-size: 14px;
	color: #78350f;
	line-height: 1.6;
}

/* ===== REBATE DEEP-DIVES ===== */
.rebates {
	padding: 80px 0;
	background: var(--slate);
}

/* Solar PV rebate card */
.reb-section {
	margin-bottom: 52px;
}

.reb-section:last-child {
	margin-bottom: 0;
}

.reb-card-full {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--line);
	overflow: hidden;
	box-shadow: var(--sh);
}

.reb-card-full.active-scheme {
	border-color: var(--green);
}

.reb-card-full.inactive-scheme {
	border-color: #fecaca;
	background: var(--red-lt);
}

.rcf-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 30px 24px;
	border-bottom: 1px solid var(--line);
}

.rcf-header.inactive-scheme {
	border-bottom-color: #fecaca;
}

.rcf-left h3 {
	font-size: 22px;
	margin-bottom: 6px;
}

.rcf-left .scheme-by {
	font-size: 13px;
	color: var(--muted);
	font-weight: 500;
}

.rcf-amount-box {
	text-align: right;
	flex: 0 0 auto;
}

.rcf-amount {
	font-family: var(--disp);
	font-size: 32px;
	font-weight: 800;
	color: var(--green-dk);
	line-height: 1;
	margin-bottom: 4px;
}

.rcf-amount.inactive {
	color: var(--red);
	font-size: 20px;
}

.rcf-amount-sub {
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

.rcf-body {
	padding: 28px 30px;
}

.rcf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.rcf-col h4 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 14px;
	font-family: var(--disp);
}

.check-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--body);
	line-height: 1.55;
}

.check-item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.check-item svg.green {
	color: var(--green);
}

.check-item svg.red {
	color: var(--red);
}

.check-item svg.amber {
	color: var(--amber-dark);
}

.urgency-box {
	background: rgba(239, 68, 68, .07);
	border: 1.5px solid #fecaca;
	border-radius: var(--r-sm);
	padding: 14px 18px;
	margin-top: 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	grid-column: 1/-1;
}

.urgency-box svg {
	width: 18px;
	height: 18px;
	color: var(--red);
	flex: 0 0 auto;
	margin-top: 2px;
}

.urgency-box p {
	font-size: 13.5px;
	color: #7f1d1d;
	line-height: 1.6;
	font-weight: 500;
}

.urgency-box strong {
	color: var(--red);
}

.rcf-footer {
	padding: 18px 30px;
	background: var(--slate);
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.rcf-footer p {
	font-size: 13.5px;
	color: var(--muted);
}

.rcf-footer a {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
}

/* Inactive scheme styling */
.inactive-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	background: var(--red-lt);
	border-radius: var(--r-sm);
}

.inactive-notice svg {
	width: 20px;
	height: 20px;
	color: var(--red);
	flex: 0 0 auto;
	margin-top: 2px;
}

.inactive-notice div h4 {
	font-size: 15px;
	color: #7f1d1d;
	margin-bottom: 6px;
}

.inactive-notice div p {
	font-size: 14px;
	color: #991b1b;
	line-height: 1.6;
}

/* combine section */
.combine {
	padding: 80px 0;
	background: var(--white);
}

.combine-visual {
	background: var(--ink);
	border-radius: var(--r-lg);
	padding: 36px;
	margin-top: 44px;
	position: relative;
	overflow: hidden;
}

.combine-visual::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, .18), transparent 70%);
}

.combine-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	position: relative;
	z-index: 1;
}

.combo-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r);
	padding: 22px;
}

.combo-card h4 {
	font-size: 15px;
	color: #fff;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.combo-card h4 svg {
	width: 18px;
	height: 18px;
	color: var(--amber);
	flex: 0 0 auto;
}

.combo-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ci {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
}

.ci svg {
	width: 14px;
	height: 14px;
	color: var(--green);
	flex: 0 0 auto;
}

.combo-total {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-family: var(--disp);
	font-size: 13px;
	font-weight: 700;
	color: var(--amber);
}

.combine-note {
	margin-top: 22px;
	text-align: center;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	position: relative;
	z-index: 1;
}

/* sub-page links */
.sub-pages {
	padding: 72px 0;
	background: var(--white);
}

.sp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.sp-card {
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 28px;
	transition: var(--t);
	display: flex;
	gap: 20px;
	align-items: flex-start;
	text-decoration: none;
	background: var(--white);
}

.sp-card:hover {
	border-color: var(--amber);
	transform: translateY(-3px);
	box-shadow: var(--sh);
}

.sp-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--ink);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.sp-icon svg {
	width: 26px;
	height: 26px;
	color: var(--amber);
}

.sp-card h3 {
	font-size: 18px;
	margin-bottom: 6px;
	color: var(--ink);
}

.sp-card p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 12px;
}

.sp-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--amber-dark);
	font-family: var(--disp);
	display: flex;
	align-items: center;
	gap: 5px;
}

.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 50px;
	font-family: var(--disp);
	margin-bottom: 8px;
}

.sp-badge.active {
	background: var(--green-lt);
	color: var(--green-dk);
}

.sp-badge.inactive {
	background: var(--red-lt);
	color: var(--red);
}

.sp-badge.truth {
	background: var(--amber-soft);
	color: var(--amber-dark);
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* LEGAL LAYOUT */
.legal-wrap {
	padding: 60px 0 90px;
}

.legal-grid {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 48px;
	align-items: start;
}

.toc {
	position: sticky;
	top: 90px;
	background: var(--slate);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px;
}

.toc h4 {
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin-bottom: 10px;
}

.toc a {
	display: block;
	font-size: 13px;
	padding: 6px 4px;
	color: var(--body);
	border-radius: 6px;
	font-weight: 500;
}

.toc a:hover {
	color: var(--amber-dark);
	background: #fff;
}

.intro-box {
	background: var(--slate);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	margin-bottom: 44px;
}

.intro-box p {
	font-size: 15px;
	color: var(--body);
	line-height: 1.75;
	margin-bottom: 0;
}

.intro-box strong {
	color: var(--ink);
}

.legal-content h2 {
	font-size: 22px;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.legal-content .grp:first-of-type h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-content p {
	margin-bottom: 14px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--body);
}

.legal-content ul {
	margin: 0 0 16px 22px;
}

.legal-content li {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--body);
}

.legal-note {
	background: var(--amber-soft);
	border: 1px solid #fde68a;
	border-radius: var(--r-sm);
	padding: 16px 18px;
	margin-top: 44px;
	font-size: 14px;
	color: #78350f;
	line-height: 1.65;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.legal-note svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--amber-dark);
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbar a.nav-phone {
	background: #75ad50;
	line-height: 31px;
	margin: -8px 15px;
	position: relative;
	padding: 3px 11px;
	text-decoration: none;
}

.topbar a.nav-phone svg {
	color: #fff;
}

.mob-links li {
	list-style: none;
}

@media (max-width: 760px) {
	.nav-cta {
		display: none;
	}
	
	.nav-in {
		height: 102px;
	}
	
	.lever {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.eservices-intro {
		display: flex;
		flex-direction: column;
	}
	
	.svc-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.comp-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.fault-grid {
		display: flex;
		flex-direction: column;
	}
	
	.topbar {
		flex-wrap: wrap;
	}
	
	.steps {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.cred-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
}

/* Burger Icon Styling */
.burger-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
	cursor: pointer;
	z-index: 1000;
	position: relative;
}

.burger-menu span {
	width: 100%;
	height: 3px;
	background-color: #333;
	transition: all .3s ease;
}

.nav-links.open {
	display: none;
}

/* Outer Navigation Panel */
.mobLinks-navigation {
	position: fixed;
	top: 0;
	right: 0;
	width: 280px;
	height: 100vh;
	background-color: #111;
	padding-top: 80px;
	z-index: 999;
	transform: translateX(100%);
	transition: transform .4s ease-in-out;
	overflow-y: auto;
}

.mobLinks-navigation.open {
	transform: translateX(0);
}

.mob-links, .mob-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Parent LI ko relative karein taaki hum arrow align kar sakein */
.mob-links li {
	position: relative;
	border-bottom: 1px solid #222;
}

/* Main links styling */
.mob-links li a {
	color: #fff;
	padding: 15px 50px 15px 25px;
	/* Right se space arrow ke liye */
	text-decoration: none;
	font-size: 18px;
	display: flex;
	/* Text alignment fix karne ke liye */
	align-items: center;
	transition: background .3s;
}

.mob-links li a:hover {
	background-color: #222;
}

/* LEGAL LAYOUT */
.legal-wrap {
	padding: 60px 0 90px;
}

.legal-grid {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 48px;
	align-items: start;
}

.toc {
	position: sticky;
	top: 90px;
	background: var(--slate);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px;
}

.toc h4 {
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin-bottom: 10px;
}

.toc a {
	display: block;
	font-size: 13px;
	padding: 6px 4px;
	color: var(--body);
	border-radius: 6px;
	font-weight: 500;
}

.toc a:hover {
	color: var(--amber-dark);
	background: #fff;
}

.intro-box {
	background: var(--slate);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	margin-bottom: 44px;
}

.intro-box p {
	font-size: 15px;
	color: var(--body);
	line-height: 1.75;
	margin-bottom: 0;
}

.intro-box strong {
	color: var(--ink);
}

.legal-content h2 {
	font-size: 22px;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.legal-content .grp:first-of-type h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-content p {
	margin-bottom: 14px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--body);
}

.legal-content ul {
	margin: 0 0 16px 22px;
}

.legal-content li {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--body);
}

.legal-note {
	background: var(--amber-soft);
	border: 1px solid #fde68a;
	border-radius: var(--r-sm);
	padding: 16px 18px;
	margin-top: 44px;
	font-size: 14px;
	color: #78350f;
	line-height: 1.65;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.legal-note svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--amber-dark);
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbar a.nav-phone {
	background: #75ad50;
	line-height: 31px;
	margin: -8px 15px;
	position: relative;
	padding: 3px 11px;
	text-decoration: none;
}

.topbar a.nav-phone svg {
	color: #fff;
}

.mob-links li {
	list-style: none;
}

@media (max-width: 760px) {
	.nav-cta {
		display: none;
	}
	
	.nav-in {
		height: 102px;
	}
	
	.lever {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.eservices-intro {
		display: flex;
		flex-direction: column;
	}
	
	.svc-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.comp-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.fault-grid {
		display: flex;
		flex-direction: column;
	}
	
	.topbar {
		flex-wrap: wrap;
	}
	
	.steps {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.cred-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
}

/* Burger Icon Styling */
.burger-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
	cursor: pointer;
	z-index: 1000;
	position: relative;
}

.burger-menu span {
	width: 100%;
	height: 3px;
	background-color: #333;
	transition: all .3s ease;
}

/* Outer Navigation Panel - Jo Right se Left aayega */
.mobLinks-navigation {
	position: fixed;
	top: 0;
	right: 0;
	/* Right side par block kiya */
	width: 280px;
	/* Menu ki width */
	height: 100vh;
	background-color: #111;
	/* Aap apna background color yahan badal sakte hain */
	padding-top: 80px;
	z-index: 999;
	/* Pehle menu ko screen se 100% bahar (Right) rakhenge */
	transform: translateX(100%);
	transition: transform .4s ease-in-out;
}

/* Jab JavaScript '.open' class lagayega toh menu screen par dikhega */
.mobLinks-navigation.open {
	transform: translateX(0);
}

/* WordPress Menu Links Styling */
.mob-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mob-links li a {
	color: #fff;
	padding: 15px 25px;
	text-decoration: none;
	font-size: 18px;
	display: block;
	transition: background .3s;
}

.mob-links li a:hover {
	background-color: #222;
}

/* Normal state: Sub-menu hidden rahega */
ul.sub-menu {
	display: none;
	list-style: none;
	padding-left: 20px;
	/* Thoda space andar dene ke liye */
	background-color: #1a1a1a;
}

/* Jab parent li par '.open-submenu' class add ho, tab sub-menu show ho */
li.menu-item-has-children.open-submenu > ul.sub-menu {
	display: block;
}

/* Sub-menu ke links ka style */
ul.sub-menu li a {
	font-size: 16px;
	padding: 10px 25px;
	color: #ccc;
}

.nav-links.open {
	display: none;
}

/* --- SVG Arrow Toggler Style --- */
.submenu-toggle {
	position: absolute;
	right: 15px;
	/* Right side se alignment */
	top: 15px;
	/* Text ke beech mein vertically */
	width: 25px;
	height: 25px;
	cursor: pointer;
	z-index: 2;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s ease;
}

/* Yahan hum CSS ke zariye SVG add kar rahe hain (as a default arrow) */
.submenu-toggle::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-right: 2px solid #fff;
	/* Arrow color */
	border-bottom: 2px solid #fff;
	/* Arrow color */
	transform: rotate(45deg);
	/* Downward pointing arrow */
	transition: border-color .3s;
}

/* Hover effect toggle button par */
.submenu-toggle:hover::before {
	border-color: #ccc;
}

/* --- Sub-menus Default State (Chhupe hue) --- */
.mob-links .sub-menu {
	display: none;
	padding-left: 15px;
	/* Indentation level badhane ke liye */
	background-color: #1a1a1a;
}

/* Dusre level ke sub-menu ke liye styling */
.mob-links .sub-menu .sub-menu {
	padding-left: 5px;
}

/* --- OPEN STATE (JavaScript ke toggle ke baad active) --- */

/* 1. Sub-menu ko show karna */
li.menu-item-has-children.open-submenu > ul.sub-menu {
	display: block;
}

/* 2. Arrow ko Rotate karna (Down se Up) */
li.menu-item-has-children.open-submenu > .submenu-toggle {
	transform: rotate(-180deg);
}

/* Sub-menu links lower size */
ul.sub-menu li a {
	font-size: 16px;
	padding: 10px 25px;
	color: #ccc;
}

span.submenu-toggle {
	/* background: #fff; */
	
	/* padding: 10px; */
	display: inline-block;
}

ul.sub-menu li a {
	padding: 6px 9px;
	font-size: 13px;
}

.mob-links li {
	position: relative;
}

ul.sub-menu .submenu-toggle::before {
	width: 8px;
	height: 8px;
	border-right: 2px solid #7f7f7f;
	border-bottom: 2px solid #7f7f7f;
}

ul.sub-menu .submenu-toggle {
	width: 20px;
	height: 20px;
	right: 10px;
	top: 10px;
}