:root {
  color: #15221c;
  background: #f2f0e9;
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; }
a { color: inherit; }

.site-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px;
}

.wordmark { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 900; line-height: 1; text-decoration: none; }
.wordmark small { display: block; margin-top: 4px; color: #617067; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff; background: #176b51; }
.mark svg { width: 22px; height: 22px; fill: currentColor; }
nav { display: flex; gap: 28px; }
nav a { color: #445249; font-size: 14px; font-weight: 700; text-decoration: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: 70px;
  align-items: center;
  max-width: 1240px;
  min-height: 610px;
  margin: 0 auto;
  padding: 80px 28px 110px;
}

.kicker { margin: 0 0 12px; color: #176b51; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 820px; margin: 0; font: 700 clamp(48px, 8vw, 92px)/.95 Georgia, serif; letter-spacing: -.055em; }
h1 em { color: #176b51; font-weight: 400; }
.lead { max-width: 670px; margin: 30px 0; color: #526058; font-size: clamp(18px, 2.4vw, 23px); }
.hero-cta { display: inline-block; padding: 14px 21px; border-radius: 9px; color: #fff; background: #176b51; font-weight: 850; text-decoration: none; }
.hero aside { padding: 30px; border-left: 3px solid #e1ad43; background: rgba(255, 255, 255, .6); }
.hero aside p { margin-top: 0; font-size: 18px; }
.hero aside ul { margin: 0; padding-left: 20px; color: #526058; }
.hero aside li + li { margin-top: 10px; }

.finder { padding: 90px max(28px, calc((100vw - 1184px) / 2)); background: #fff; }
.section-heading { max-width: 740px; margin: 0 0 38px; }
h2 { margin: 0; font: 700 clamp(34px, 5vw, 55px)/1.03 Georgia, serif; letter-spacing: -.035em; }
.section-heading > p:last-child { color: #617067; font-size: 18px; }

.proof { display: grid; grid-template-columns: .8fr 1.3fr; gap: 70px; max-width: 1240px; margin: 0 auto; padding: 110px 28px; }
.proof-grid { display: grid; gap: 20px; }
.proof article { padding: 26px; border: 1px solid #d8d8d0; border-radius: 14px; background: rgba(255, 255, 255, .45); }
.proof article > strong { float: left; display: grid; width: 32px; height: 32px; margin-right: 13px; place-items: center; border-radius: 50%; color: #176b51; background: #dfece6; }
.proof h3 { margin: 3px 0 8px; font-size: 18px; }
.proof article p { clear: both; margin: 15px 0 0; color: #617067; }

footer { display: flex; justify-content: space-between; gap: 25px; padding: 30px max(28px, calc((100vw - 1184px) / 2)); color: #dbe7e1; background: #14251d; font-size: 13px; }
footer p { margin: 0; }
footer output { color: #a9cbbb; text-align: right; }

.ecowizard { background: #f2f5ec; }
.ecowizard .mark,
.ecowizard .hero-cta { background: #2d7b38; }
.ecowizard .kicker,
.ecowizard h1 em,
.ecowizard .proof article > strong { color: #2d7b38; }
.ecowizard .proof article > strong { background: #e1edda; }
.ecowizard .hero aside { border-left-color: #f3a712; }
.ecowizard footer { background: #18331d; }
.ecowizard footer output { color: #b8d8b7; }

.leisurepower { background: #eef4f6; }
.leisurepower .mark,
.leisurepower .hero-cta { background: #155c7c; }
.leisurepower .kicker,
.leisurepower h1 em,
.leisurepower .proof article > strong { color: #155c7c; }
.leisurepower .proof article > strong { background: #dbeaf0; }
.leisurepower .hero aside { border-left-color: #f0a32f; }
.leisurepower footer { background: #123140; }
.leisurepower footer output { color: #b8d3de; }

.hampshire { background: #f4f2ef; }
.hampshire .mark,
.hampshire .hero-cta { background: #a53d16; }
.hampshire .kicker,
.hampshire h1 em,
.hampshire .proof article > strong { color: #8e3212; }
.hampshire .proof article > strong { background: #f8ded2; }
.hampshire .hero aside { border-left-color: #163b58; }
.hampshire footer { background: #163b58; }
.hampshire footer output { color: #d5e5ef; }

.energian { background: #eef6f5; }
.energian .mark,
.energian .hero-cta { background: #006d77; }
.energian .kicker,
.energian h1 em,
.energian .proof article > strong { color: #00636c; }
.energian .proof article > strong { background: #d5ebea; }
.energian .hero aside { border-left-color: #f0a323; }
.energian footer { background: #123c40; }
.energian footer output { color: #bfe0df; }

.thermaright { background: #eef5f7; }
.thermaright .mark,
.thermaright .hero-cta { background: #005a70; }
.thermaright .kicker,
.thermaright h1 em,
.thermaright .proof article > strong { color: #005a70; }
.thermaright .proof article > strong { background: #d6e8ed; }
.thermaright .hero aside { border-left-color: #f1b52b; }
.thermaright footer { background: #113a45; }
.thermaright footer output { color: #c1dce2; }

.offer-page { background: #f2f0e9; }
.offer-hero { min-height: 650px; }
.offer-price { margin: 0 0 8px; font-size: 18px; }
.offer-price strong { font: 700 42px/1 Georgia, serif; }
.offer-section { padding-top: 100px; padding-bottom: 100px; }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; }
.offer-grid article { padding: 28px; border: 1px solid #d8d8d0; border-radius: 14px; background: #f7f7f3; }
.offer-grid article > strong { color: #176b51; font-size: 13px; letter-spacing: .12em; }
.offer-grid h3 { margin: 10px 0 8px; font-size: 21px; }
.offer-grid p { margin: 0; color: #617067; }
.offer-proof { background: #f2f0e9; }
.offer-close { padding: 110px max(28px, calc((100vw - 900px) / 2)); text-align: center; background: #fff; }
.offer-close p:not(.kicker) { max-width: 700px; margin: 24px auto 30px; color: #617067; font-size: 18px; }
.offer-close .hero-cta { background: #176b51; }
.prospect-offer { font-weight: 800; }

@media (max-width: 820px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 45px; min-height: auto; padding-top: 65px; }
  .proof { grid-template-columns: 1fr; gap: 45px; }
  .offer-grid { grid-template-columns: 1fr; }
  footer { display: block; }
  footer output { display: block; margin-top: 12px; text-align: left; }
}
