:root {
	--navy: #13304b;
	--accent: #e8772e;
	--sky: #f3f7fb;
	--ink: #1b2a38;
	--muted: #5b6b79;
	--line: #d5dee6;
	--radius: 8px;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--head: "Outfit", var(--sans);
}
body { font-family: var(--sans); color: var(--ink); background: #fff; }
h1, h2, h3 { font-family: var(--head); line-height: 1.1; margin: 0 0 14px; color: var(--navy); }
h2 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 700; }
.kicker { margin: 0 0 12px; font: 700 13px var(--head); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.kicker.dark { color: var(--accent); }

.hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; background-size: cover; background-position: center 55%; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 28, 44, .88) 0%, rgba(10, 28, 44, .55) 55%, rgba(10, 28, 44, .25) 100%); }
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); }
.brand { font: 600 22px var(--head); text-decoration: none; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 800; }
.nav nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.nav nav a:not(.btn) { text-decoration: none; }
.nav nav a:not(.btn):hover { color: var(--accent); }
.hero-inner { position: relative; max-width: 1160px; width: 100%; margin: auto; padding: 40px 24px 90px; }
.hero h1 { color: #fff; font-size: clamp(42px, 7vw, 82px); font-weight: 800; max-width: 12ch; }
.lede { max-width: 540px; font-size: 19px; opacity: .93; margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .btn-ghost { color: #fff; }

.trust { background: var(--navy); color: #fff; }
.trust ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0 auto; padding: 22px 24px; text-align: center; font-size: 15px; }
.trust strong { color: var(--accent); display: block; font: 700 22px var(--head); }

.section { padding: clamp(60px, 8vw, 100px) 0; }
.section.alt { background: var(--sky); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 34px; }
.svc p { color: var(--muted); margin: 0; }
.svc-img { display: block; aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: var(--radius); background-size: cover; background-position: center; }

.results { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.checks { padding: 0; margin: 20px 0 28px; list-style: none; }
.checks li { position: relative; padding: 6px 0 6px 32px; }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; display: grid; place-items: center; }
.compare { border-radius: var(--radius); box-shadow: 0 18px 44px rgba(19, 48, 75, .22); }
/* "After" is the vivid original; "before" is a washed-out, aged version of the same photo. */
.compare-before { filter: grayscale(1) sepia(.35) contrast(.8) brightness(1.05); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; margin: 34px 0 0; padding: 0; list-style: none; }
.steps li { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.steps b { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 18px var(--head); }
.steps p { margin: 0; color: var(--muted); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 34px; }
blockquote { margin: 0; padding: 26px; background: #fff; border-radius: var(--radius); box-shadow: 0 6px 22px rgba(19, 48, 75, .1); }
.stars { display: block; margin-bottom: 8px; color: #f2b01e; letter-spacing: 3px; }
cite { display: block; margin-top: 14px; font: 600 14px var(--sans); font-style: normal; color: var(--muted); }

.estimate { padding: clamp(60px, 8vw, 100px) 0; background: var(--navy); color: #fff; }
.estimate h2 { color: #fff; }
.est-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.area { opacity: .8; font-size: 15px; }
.lead-form select, .lead-form input, .lead-form textarea { border-color: transparent; color: var(--ink); }

.footer { padding: 40px 0; background: #0c2033; color: #b9c6d2; text-align: center; font-size: 14px; }
.footer .wrap { display: flex; flex-direction: column; gap: 6px; }
.footer strong { font: 700 20px var(--head); color: #fff; }
.footer small { opacity: .6; margin-top: 8px; }

@media (max-width: 860px) {
	.nav nav a:not(.btn) { display: none; }
	.trust ul { grid-template-columns: repeat(2, 1fr); }
	.results, .est-grid { grid-template-columns: 1fr; }
	.hero::before { background: linear-gradient(180deg, rgba(10, 28, 44, .75), rgba(10, 28, 44, .6)); }
}