:root
{
	--navy: #002e46;
	--navy2: #003e58;
	--yellow: #ffbf00;
	--ink: #062944;
	--muted: #4b6780;
	--pale: #eaf4f9;
	--line: #d9e7f0;
}

*
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	font-family: 'DM Sans',Arial,sans-serif;
	color: var(--ink);
}

a
{
	color: inherit;
}

h1,
h2,
h3,
p
{
	margin: 0;
}

button,
a
{
	-webkit-tap-highlight-color: transparent;
}

.shell
{
	width: min(1268px,calc(100% - 48px));
	margin: 0 auto;
}

.site-header
{
	height: 58px;
	background: #002a40;
	color: #fff;
	position: relative;
	z-index: 10;
}

.header-row
{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.logo
{
	display: block;
	width: 166px;
	height: auto;
}

.site-nav
{
	display: flex;
	align-items: center;
	gap: 34px;
}

.site-nav a
{
	font-size: 12px;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}

.header-actions
{
	display: flex;
	align-items: center;
	gap: 27px;
}

.search-icon
{
	width: 23px;
	height: 23px;
	stroke: white;
	fill: none;
	stroke-width: 2.5;
}

.yellow-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 11px 25px;
	border: 0;
	border-radius: 4px;
	background: var(--yellow);
	color: #001d30;
	font-weight: 800;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.yellow-button:hover
{
	background: #ffd044;
}

.hero
{
	height: 351px;
	background: #003b54;
	position: relative;
	overflow: hidden;
	color: white;
}

.hero-photo
{
	position: absolute;
	right: 0;
	top: 0;
	width: 56%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* Page-specific hero: PUWER cost calculator */
.hero--puwer-cost
{
	height: 395px;
}

/* An <img> rather than a CSS background, so the browser finds it early (it is the LCP element). */
.hero--puwer-cost .hero-photo img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 56% center;
}

.hero-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg,#00445f 0%,#00384f 72%,#00334b 100%);
	clip-path: polygon(0 0,44.4% 0,54.7% 100%,0 100%);
}

.hero::before
{
	content: "";
	position: absolute;
	left: -100px;
	bottom: -140px;
	width: 280px;
	height: 280px;
	border: 1px solid #2e688030;
	border-radius: 50%;
	z-index: 1;
}

.hero-content
{
	position: relative;
	z-index: 2;
	padding-top: 22px;
}

.eyebrow
{
	font-size: 14px;
	letter-spacing: 1.3px;
	font-weight: 800;
	color: var(--yellow);
}

.hero h1
{
	font-size: 47px;
	line-height: .99;
	letter-spacing: -1.65px;
	font-weight: 800;
	max-width: 630px;
	margin-top: 8px;
}

.hero-intro
{
	font-size: 16px;
	line-height: 1.52;
	max-width: 590px;
	margin-top: 12px;
}

.features
{
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-top: 20px;
}

.feature
{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 192px;
}

.feature-icon
{
	font-size: 42px;
	line-height: 1;
	flex: none;
	color: var(--yellow);
}

.feature-copy
{
	font-size: 13px;
	line-height: 1.35;
	padding-top: 4px;
}

.feature-copy strong
{
	font-size: 13px;
	display: block;
	font-weight: 800;
}

.feature-copy span
{
	display: block;
	margin-top: 5px;
}

.calculator-wrap
{
	position: relative;
	z-index: 3;
	margin-top: -50px;
}

.calculator-frame
{
	min-height: 405px;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid #e1eff7;
	box-shadow: 0 3px 10px #16415c0d;
	background: #fff;
}

.calculator-mount
{
	background: white;
	min-height: 402px;
	position: relative;
}

.calculator-mount::after
{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.estimate-panel
{
	position: relative;
	background: linear-gradient(130deg,#003c56,#002d45);
	color: #fff;
	padding: 39px 43px 35px;
	overflow: hidden;
}

.estimate-panel .step
{
	font-size: 13px;
	letter-spacing: 1.2px;
	font-weight: 700;
	color: #d1e4ef;
}

.estimate-panel .small
{
	font-size: 14px;
	margin-top: 9px;
}

.estimate-panel h2
{
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -.5px;
	font-weight: 800;
	margin-top: 7px;
}

.estimate-panel .note
{
	font-size: 13px;
	margin-top: 9px;
}

.yellow-rule
{
	width: 38px;
	height: 4px;
	border-radius: 4px;
	background: var(--yellow);
	margin: 21px 0 19px;
}

.estimate-panel p
{
	font-size: 14px;
	line-height: 1.45;
	max-width: 390px;
	margin-top: 0;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.gear-decor
{
	position: absolute;
	right: -36px;
	bottom: -65px;
	width: 240px;
	height: 250px;
	opacity: .17;
	stroke: #8eb3c6;
	fill: none;
	stroke-width: 1;
}

.pricing
{
	background: linear-gradient(180deg,#eaf4f9,#eff7fa);
	padding: 12px 0 10px;
}

.pricing-layout
{
	display: grid;
	grid-template-columns: 1fr 374px;
	gap: 26px;
	align-items: end;
}

.pricing-kicker
{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: #0c4667;
}

.pricing h2
{
	font-size: 27px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.5px;
	margin: 3px 0 6px;
}

.pricing-intro
{
	font-size: 13px;
	line-height: 1.35;
	max-width: 675px;
	margin-bottom: 12px;
}

.factor-grid
{
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 10px;
}

.factor
{
	min-height: 82px;
	background: white;
	border-radius: 5px;
	padding: 12px 12px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.factor-icon
{
	font-size: 34px;
	line-height: 1;
	flex: none;
	color: var(--navy);
}

.factor h3
{
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 4px;
}

.factor p
{
	font-size: 12px;
	color: var(--muted);
	line-height: 1.25;
}

.quote-card
{
	background: #deedf5;
	border-radius: 6px;
	padding: 18px 26px 16px;
	min-height: 162px;
}

.quote-card h3
{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .7px;
}

.quote-card p
{
	font-size: 13px;
	line-height: 1.35;
	margin: 7px 0 12px;
}

.quote-card .yellow-button
{
	padding: 10px 27px;
}

.quote-card .expert
{
	display: block;
	font-size: 12px;
	margin-top: 10px;
}

.quote-card .expert-phone
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--navy);
	text-decoration: none;
}

.trust-bar
{
	background: #00344d;
	color: white;
	padding: 12px 0;
}

.trust-items
{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 0;
}

.trust-item
{
	display: flex;
	gap: 15px;
	align-items: center;
	min-height: 42px;
	padding: 0 32px;
	border-right: 1px solid #ffffff25;
}

.trust-item:first-child
{
	padding-left: 8px;
}

.trust-item:last-child
{
	border: 0;
}

.trust-item .bi
{
	font-size: 36px;
	line-height: 1;
	flex: none;
	color: var(--yellow);
}

.trust-item p
{
	font-size: 12px;
	line-height: 1.3;
}

.trust-item strong
{
	display: block;
	font-size: 13px;
}

.dev-info
{
	background: #f5f9fb;
	padding: 18px 0;
	font-size: 12px;
	color: #5a7387;
}

.dev-info code
{
	color: #153a53;
}

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

@media (max-width:1050px)
{
	.site-nav
	{
		gap: 15px;
	}

	.hero h1
	{
		font-size: 42px;
	}

	.hero-overlay
	{
		clip-path: polygon(0 0,56% 0,70% 100%,0 100%);
	}

	.hero-photo
	{
		width: 60%;
	}

	.pricing-layout
	{
		grid-template-columns: 1fr;
	}

	.quote-card
	{
		max-width: none;
	}

	.pricing
	{
		padding: 22px 0;
	}

	.trust-item
	{
		padding: 0 12px;
	}
}

@media (max-width:740px)
{
	.shell
	{
		width: min(100% - 32px,560px);
	}

	.site-header
	{
		height: 66px;
	}

	.logo
	{
		width: 142px;
	}

	.site-nav,
	.search-icon
	{
		display: none;
	}

	.header-actions
	{
		gap: 0;
	}

	.yellow-button
	{
		padding: 11px 13px;
		font-size: 11px;
	}

	.hero
	{
		height: auto;
		min-height: 420px;
	}

	.hero-photo
	{
		width: 100%;
		opacity: .34;
	}

	.hero-overlay
	{
		clip-path: none;
		background: linear-gradient(90deg,#003e59ef,#00324be0);
	}

	.hero-content
	{
		padding: 40px 0 95px;
	}

	.hero h1
	{
		font-size: clamp(32px,7vw,45px);
		line-height: 1.08;
	}

	.hero-intro
	{
		font-size: 15px;
	}

	.features
	{
		gap: 15px;
		flex-wrap: wrap;
	}

	.feature
	{
		width: calc(50% - 12px);
	}

	.feature-icon
	{
		font-size: 32px;
	}

	.feature-copy
	{
		font-size: 11px;
	}

	.calculator-wrap
	{
		margin-top: -56px;
	}

	.calculator-mount
	{
		min-height: 310px;
	}

	.estimate-panel
	{
		min-height: 330px;
		padding: 30px;
	}

	.estimate-panel h2
	{
		font-size: 27px;
	}

	.factor-grid
	{
		grid-template-columns: repeat(2,1fr);
	}

	.pricing h2
	{
		font-size: 25px;
	}

	.trust-items
	{
		grid-template-columns: repeat(2,1fr);
		row-gap: 14px;
	}

	.trust-item:nth-child(2)
	{
		border: 0;
	}

	.trust-item .bi
	{
		font-size: 28px;
	}
}

@media (max-width:410px)
{
	.feature
	{
		width: 100%;
	}

	.factor-grid
	{
		grid-template-columns: 1fr;
	}

	.trust-items
	{
		grid-template-columns: 1fr;
	}

	.trust-item
	{
		border: 0;
		padding-left: 8px;
	}

	.hero-content
	{
		padding-bottom: 80px;
	}
}

/* Footer (copied from theme.css for partials/footer.htm) */
.blue-gradient
{
	background: rgb(94,103,119);
	background: linear-gradient(135deg, rgba(94,103,119,1) 0%, rgba(47,105,115,1) 10%, rgba(74,84,102,1) 100%);
}

.text-white
{
	color: #fff;
}

.vert-padding
{
	padding-top: 30px;
	padding-bottom: 30px;
}

a.cta-btn
{
	display: inline-block;
	padding: 5px;
	font-weight: 700;
	border-radius: 5px;
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
	text-decoration: none;
	font-size: 1em;
	transition: 0.3s;
	text-align: center;
}

a.cta-btn-grey
{
	background-color: #bebebe;
	color: #000;
	border: 2px solid #bebebe;
}

a:hover.cta-btn-grey
{
	color: #4A5265;
	border: 2px solid #ffffff;
}

.quick-links .quick-link
{
	display: block;
	color: #fff;
	transition: 0.3s;
	padding: 5px;
	text-decoration: none;
	border-radius: 5px;
}

.quick-links .quick-link:hover
{
	background-color: #DADADA;
	color: #4A5265;
}

.footer-block
{
	margin-bottom: 80px;
}

.footer-block .footer-text
{
	font-size: 1em;
}

.footer-block .footer-block-header
{
	font-size: 1.4em;
	font-weight: 800;
	margin-bottom: 15px;
}

@media (min-width: 576px)
{
	.vert-padding
	{
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

@media (min-width: 768px)
{
	.footer-block
	{
		margin-bottom: 0px;
	}
}