:root {
  --ink: #18362d;
  --muted: #5d7169;
  --paper: #f8f6ef;
  --cream: #efeee5;
  --green: #1b6a4d;
  --light-green: #dcebdc;
  --line: #dce0d8;
  --orange: #eea664;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }

.site-header, .hero, .section, footer { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.site-header { min-height: 82px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px 9px 9px 2px; background: var(--green); color: white; font-family: Fraunces, serif; font-size: 18px; }
.header-link, .text-link { font-size: 14px; font-weight: 700; color: var(--green); }
.header-link span, .text-link span { margin-left: 5px; }

.hero { min-height: 590px; padding-top: 88px; padding-bottom: 86px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 78px; }
.eyebrow { margin: 0 0 17px; text-transform: uppercase; font-size: 11px; line-height: 1; letter-spacing: .14em; font-weight: 700; color: var(--green); }
h1, h2 { font-family: Fraunces, Georgia, serif; letter-spacing: -.055em; line-height: .99; }
h1 { max-width: 620px; margin: 0; font-size: clamp(43px, 5.5vw, 72px); }
h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); }
.hero-intro { max-width: 545px; margin: 25px 0 30px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 8px; padding: 15px 21px; font-size: 15px; font-weight: 700; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: white; }
.button-outline { border: 1px solid #b9c8be; color: var(--green); background: transparent; }
.button-secondary { background: var(--ink); color: white; margin-top: 29px; }
.button-light { background: white; color: var(--green); margin-top: 22px; }
.pilot-note { display: flex; align-items: center; gap: 8px; margin: 25px 0 0; color: var(--muted); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #58a47e; }

.quote-card { width: 100%; max-width: 425px; justify-self: end; padding: 17px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 55px rgba(27, 61, 47, .12); transform: rotate(2.3deg); }
.card-topline, .address-row, .quote-result, .problem-strip, footer { display: flex; align-items: center; }
.card-topline { justify-content: space-between; margin: 2px 3px 14px; font-size: 13px; font-weight: 700; }
.status { color: var(--green); background: #e4f1e6; border-radius: 999px; padding: 4px 9px; font-size: 11px; }
.property-art { height: 174px; position: relative; overflow: hidden; border-radius: 10px; background: #b7d7b9; }
.house { position: absolute; left: 47%; top: 25%; width: 110px; height: 74px; background: #f3eee0; border: 4px solid #c9b99d; transform: rotate(-8deg); }
.house::after { content: ""; position: absolute; left: 19px; bottom: 0; width: 27px; height: 37px; background: #ae7652; }
.path { position: absolute; width: 190px; height: 55px; right: -28px; bottom: -23px; border-radius: 60% 0 0 0; background: #e3d3b9; transform: rotate(-20deg); }
.lawn { position: absolute; border: 1px solid rgba(255,255,255,.42); border-radius: 45%; background: rgba(94, 166, 101, .55); }
.lawn-one { width: 155px; height: 130px; left: -21px; top: 42px; }.lawn-two { width: 130px; height: 90px; right: 15px; top: -24px; }
.tree { position: absolute; width: 35px; height: 35px; border: 5px solid #6e976e; border-radius: 50%; background: #386b42; z-index: 1; }.tree-one { left: 35px; top: 29px; }.tree-two { left: 75px; bottom: 18px; }.tree-three { right: 21px; bottom: 31px; }
.address-row { gap: 7px; padding: 16px 3px 12px; font-size: 13px; font-weight: 600; }.pin { color: var(--orange); font-size: 16px; }
.quote-result { justify-content: space-between; padding: 14px; border-radius: 9px; background: #f0f7f0; }.quote-result span:first-child { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }.quote-result strong { font-size: 22px; }.quote-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: white; font-weight: 700; }.card-footnote { margin: 13px 3px 2px; color: var(--muted); font-size: 11px; }

.problem-strip { justify-content: space-between; gap: 20px; padding: 20px max(28px, calc((100vw - 1124px) / 2)); background: var(--ink); color: white; }.problem-strip p { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 21px; letter-spacing: -.03em; }.problem-items { display: flex; gap: 15px; flex-wrap: wrap; color: #bed1c5; font-size: 13px; }.problem-items span:not(:last-child)::after { content: "•"; margin-left: 15px; color: #769587; }

.section { padding-top: 118px; padding-bottom: 118px; }.section-heading { max-width: 670px; }.section-heading h2 { max-width: 620px; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 61px; }.step { padding: 4px 18px 0 0; }.step:not(:last-child) { border-right: 1px solid var(--line); }.step-number { color: var(--orange); font-family: Fraunces, Georgia, serif; font-size: 30px; }.step h3 { max-width: 240px; margin: 20px 0 10px; font-size: 18px; letter-spacing: -.025em; }.step p, .benefit-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; background: var(--cream); max-width: none; padding-left: max(28px, calc((100vw - 1124px) / 2)); padding-right: max(28px, calc((100vw - 1124px) / 2)); }.benefit-copy { max-width: 510px; }.benefit-copy > p:not(.eyebrow) { margin: 23px 0 0; font-size: 17px; }.benefit-list { display: grid; align-content: center; gap: 25px; }.benefit-list > div { display: flex; gap: 15px; align-items: flex-start; }.benefit-list p { margin: 0; color: var(--muted); line-height: 1.55; }.benefit-list strong { color: var(--ink); }.benefit-icon { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #d8e8d7; color: var(--green); font-weight: 700; }
.final-cta { padding: 102px 28px; text-align: center; background: var(--green); color: white; }.final-cta .eyebrow { color: #b8e2bf; }.final-cta h2 { max-width: 720px; margin: auto; }.final-cta > p:not(.eyebrow) { margin: 19px 0 0; color: #dcece1; }.final-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; }.footer-email { color: #dcece1; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
footer { justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 28px; color: var(--muted); font-size: 13px; }.brand-footer { color: var(--ink); } footer p { margin: 0; }

@media (max-width: 760px) { .site-header, .hero, .section, footer { padding-left: 20px; padding-right: 20px; }.header-link { font-size: 12px; }.hero { min-height: 0; grid-template-columns: 1fr; gap: 56px; padding-top: 55px; padding-bottom: 58px; }.hero-intro { font-size: 17px; }.quote-card { max-width: 390px; justify-self: center; transform: rotate(0); }.problem-strip { display: block; padding: 23px 20px; }.problem-strip p { margin-bottom: 13px; font-size: 19px; }.problem-items { gap: 8px; }.problem-items span:not(:last-child)::after { margin-left: 8px; }.section { padding-top: 76px; padding-bottom: 76px; }.steps, .benefits { grid-template-columns: 1fr; }.steps { gap: 38px; margin-top: 43px; }.step:not(:last-child) { padding-bottom: 28px; border-right: 0; border-bottom: 1px solid var(--line); }.benefits { gap: 50px; padding-left: 20px; padding-right: 20px; }.final-cta { padding: 74px 20px; } footer { display: block; } footer p { margin-top: 12px; } }
