.two-choice-grid {
     grid-template-columns: repeat(2, 1fr)
 }

 .three-choice-grid {
     grid-template-columns: repeat(3, 1fr)
 }

 .is-hidden {
     display: none !important
 }

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

 .addon-choice {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 11px 12px;
     border: 1px solid var(--line);
     font-size: 11px;
     color: var(--ink-soft);
     cursor: pointer
 }

 .addon-choice input {
     display: none
 }

 .addon-choice:has(input:checked) {
     background: #f1f6df;
     border-color: #8ca63a;
     color: var(--ink)
 }

 .addon-choice .fake-check {
     flex: none
 }

 .calculator-disclaimer {
     display: flex;
     gap: 8px;
     align-items: flex-start;
     margin: 0;
     color: var(--ink-soft);
     font-size: 10px;
     line-height: 1.4
 }

 .calculator-disclaimer svg {
     width: 14px;
     flex: none;
     color: #799033
 }

 .standalone-check {
     margin-bottom: 25px
 }

 .contact-details {
     display: flex;
     flex-direction: column;
     gap: 5px;
     margin-top: 26px;
     padding: 13px 16px;
     border-left: 3px solid var(--lime);
     background: rgba(255, 253, 248, .08);
     font-size: 12px;
     color: #e5eee8
 }

 .contact-details a {
     color: var(--lime);
     font: 600 17px var(--serif)
 }

 .contact-details span {
     font-size: 11px;
     color: #d3ded8
 }

 .contact-actions .light-link {
     padding: 13px 18px;
     border: 1px solid var(--lime);
     color: var(--lime);
     font-size: 14px
 }

 .contact-actions .light-link:hover {
     background: var(--lime);
     color: var(--ink)
 }

 @media(min-width:801px) {
     .hero h1 {
         font-size: clamp(58px, 7vw, 96px);
         margin-top: 31px;
         margin-bottom: 25px
     }
 }

 :root {
     --ink: #17231f;
     --ink-soft: #53635d;
     --lime: #d4f56c;
     --paper: #f4f2ec;
     --warm: #e7e4da;
     --line: #d4d6cc;
     --white: #fffdf8;
     --serif: 'Space Grotesk', sans-serif;
     --sans: 'DM Sans', sans-serif
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: var(--sans);
     font-size: 16px;
     line-height: 1.5
 }

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

 button,
 input {
     font: inherit
 }

 button {
     cursor: pointer
 }

 .site-header {
     height: 84px;
     padding: 0 5.5vw;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--paper);
     border-bottom: 1px solid var(--line);
     position: relative;
     z-index: 5
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 11px;
     font: 600 18px var(--serif);
     letter-spacing: -.7px
 }

 .brand-sub {
     display: block;
     font: 500 9px var(--sans);
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--ink-soft);
     margin-top: -3px
 }

 .brand-logo {
     height: 48px;
     width: auto;
     display: block
 }

 .brand-mark {
     width: 29px;
     height: 29px;
     display: flex;
     align-items: flex-end;
     gap: 3px
 }

 .brand-mark span {
     display: block;
     width: 7px;
     background: var(--ink);
     transform: skew(-20deg)
 }

 .brand-mark span:nth-child(1) {
     height: 15px
 }

 .brand-mark span:nth-child(2) {
     height: 23px;
     background: #9ab13b
 }

 .brand-mark span:nth-child(3) {
     height: 29px
 }

 .main-nav {
     display: flex;
     gap: 34px;
     font-size: 13px;
     color: var(--ink-soft)
 }

 .main-nav a:hover,
 .header-phone:hover,
 .text-link:hover {
     color: #71900d
 }

 .header-phone {
     display: flex;
     align-items: center;
     gap: 8px;
     font: 600 13px var(--serif)
 }

 .header-phone svg {
     width: 15px
 }

 .menu-toggle {
     display: none;
     border: 0;
     background: none
 }

 .hero {
     height: calc(100vh - 84px);
     min-height: 620px;
     position: relative;
     overflow: hidden;
     background: var(--ink);
     color: var(--white)
 }

  .hero-image {

     position: absolute;
     inset: 0;
     background-image: linear-gradient(90deg, rgba(15, 26, 22, .9) 0%, rgba(15, 26, 22, .48) 51%, rgba(15, 26, 22, .12)), url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2200&q=90');
     background-size: contain;
     background-position: center 70%

 }

 .hero-content {
     position: relative;
     z-index: 1;
     padding: clamp(90px, 13vh, 160px) 11vw;
     max-width: 790px
 }

 .eyebrow,
 .section-kicker {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 2.3px;
     font-weight: 700
 }

 .eyebrow {
     display: flex;
     align-items: center;
     gap: 12px;
     color: #d3e3d9
 }

 .eyebrow-line {
     height: 1px;
     width: 38px;
     background: var(--lime)
 }

 h1,
 h2,
 h3,
 p {
     margin-top: 0
 }

 h1,
 h2 {
     font-family: var(--serif);
     letter-spacing: -3px;
     line-height: .96
 }

 h1 {
     font-size: clamp(58px, 8.2vw, 122px);
     font-weight: 500;
     margin: 37px 0 29px
 }

 em {
     font-style: normal;
     color: #9ab13b
 }

 .hero-copy {
     max-width: 370px;
     color: #d3ded8;
     font-size: 16px
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 29px;
     margin-top: 40px
 }

 .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     padding: 14px 20px;
     border: 0;
     font: 600 13px var(--serif);
     transition: transform .2s, background .2s
 }

 .button:hover {
     transform: translateY(-2px)
 }

 .button svg,
 .text-link svg {
     width: 16px;
     height: 16px
 }

 .button-lime {
     background: var(--lime);
     color: var(--ink)
 }

 .button-lime:hover {
     background: #e4ff8e
 }

 .button-dark {
     background: var(--ink);
     color: var(--white)
 }

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font: 600 13px var(--serif);
     border-bottom: 1px solid currentColor;
     padding-bottom: 4px
 }

 .light-link {
     color: var(--white);
     border-color: #95a79f
 }

 .hero-note {
     position: absolute;
     left: 5.5vw;
     bottom: 42px;
     display: flex;
     gap: 13px;
     align-items: center;
     color: #bfcec6;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-size: 9px
 }

 .hero-note span:first-child {
     color: var(--lime);
     font-weight: bold
 }

 .hero-badge {
     position: absolute;
     right: 5.5vw;
     bottom: 39px;
     display: flex;
     align-items: center;
     gap: 13px;
     border-left: 1px solid #82928a;
     padding-left: 15px
 }

 .hero-badge strong {
     font: 500 45px var(--serif);
     color: var(--lime);
     letter-spacing: -3px
 }

 .hero-badge span {
     font-size: 12px;
     font-weight: 600;
     line-height: 1.35;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--ink)
 }

 .section-pad {
     padding: 110px 11vw
 }

 .section-kicker {
     color: #71900d;
     margin-bottom: 24px
 }

 .intro {
     background: var(--paper)
 }

 .intro-grid {
     display: grid;
     grid-template-columns: 1.25fr .75fr;
     gap: 8vw
 }

 .intro h2,
 .services h2,
 .quote-header h2,
 .reviews h2,
 .contact h2 {
     font-size: clamp(42px, 5.7vw, 82px);
     font-weight: 500;
     margin: 0
 }

 .intro-copy {
     padding-top: 12px;
     max-width: 370px;
     color: var(--ink-soft)
 }

 .intro-copy p {
     font-size: 18px;
     margin-bottom: 31px
 }

 .stat-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     border-top: 1px solid var(--line);
     margin-top: 106px;
     padding-top: 23px
 }

 .stat strong {
     font: 500 40px var(--serif);
     letter-spacing: -2px
 }

 .stat strong span {
     font-size: 19px;
     letter-spacing: -.5px;
     color: #799033;
     margin-left: 3px
 }

 .stat small {
     display: block;
     color: var(--ink-soft);
     font-size: 11px;
     margin-top: 1px
 }

 .stat-note {
     display: flex;
     gap: 13px;
     align-items: flex-start;
     font: 500 13px var(--serif);
     line-height: 1.3
 }

 .stat-note svg {
     color: #9ab13b;
     width: 21px
 }

 .work {
     background: var(--warm)
 }

 .section-heading {
     display: flex;
     justify-content: space-between;
     align-items: end;
     margin-bottom: 43px
 }

 .section-heading h2 {
     margin: 0
 }

 .project-grid {
     display: grid;
    grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     align-items: start
 }

 .project img {
     display: block;
     width: 100%;
     height: 340px;
     object-fit: cover;
     filter: saturate(.8)
 }

 .project-meta {
     display: flex;
     justify-content: space-between;
     padding-top: 12px;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--ink-soft)
 }

 .project-meta span:last-child {
     color: #799033
 }

 .services {
     background: #eef0e9
 }

 .services-intro {
     display: grid;
     grid-template-columns: 1.25fr .75fr;
     gap: 8vw;
     align-items: end;
     margin-bottom: 76px
 }

 .services-intro p {
     color: var(--ink-soft);
     max-width: 270px;
     margin: 0;
     font-size: 17px
 }

 .service-list {
     border-top: 1px solid var(--line)
 }

 .service-item {
     display: grid;
     grid-template-columns: 90px 70px 1fr 30px;
     gap: 25px;
     align-items: center;
     padding: 28px 0;
     border-bottom: 1px solid var(--line)
 }

 .service-thumb {
     width: 90px;
     height: 70px;
     object-fit: cover;
     border-radius: 6px
 }

 .service-number {
     font: 600 11px var(--serif);
     color: #799033
 }

 .service-item h3 {
     font: 500 25px var(--serif);
     margin: 0 0 5px;
     letter-spacing: -1px
 }

 .service-item p {
     color: var(--ink-soft);
     font-size: 13px;
     margin: 0
 }

 .service-item>svg {
     width: 22px;
     color: #799033
 }

 .quote-section {
     background: var(--ink);
     color: var(--white)
 }

 .quote-header {
     display: grid;
     grid-template-columns: 1.3fr 1.2fr .7fr;
     gap: 4vw;
     align-items: end;
     margin-bottom: 52px
 }

 .quote-header .section-kicker {
     color: var(--lime);
     align-self: start
 }

 .quote-header h2 {
     font-size: clamp(40px, 5vw, 70px)
 }

 .quote-header p {
     font-size: 14px;
     color: #b6c5bd;
     max-width: 240px;
     margin: 0
 }

 .calculator-wrap {
     display: grid;
     grid-template-columns: 1.35fr .65fr;
     align-items: stretch;
     max-width: 1050px
 }

 .calculator {
     background: var(--white);
     color: var(--ink);
     padding: 31px 37px 28px
 }

 .form-top {
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid var(--line);
     padding-bottom: 19px;
     margin-bottom: 25px;
     text-transform: uppercase;
     font: 700 10px var(--serif);
     letter-spacing: 1.5px
 }

 .step-label {
     color: #7b9636
 }

 .step-label span {
     color: #9da69c
 }

 .calculator fieldset {
     padding: 0;
     border: 0;
     margin: 0 0 27px
 }

 .calculator legend {
     font: 600 14px var(--serif);
     margin-bottom: 12px
 }

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

 .choice {
     border: 1px solid var(--line);
     padding: 13px 14px;
     cursor: pointer;
     position: relative
 }

 .choice.active {
     border-color: #8ca63a;
     background: #f1f6df
 }

 .choice input {
     position: absolute;
     opacity: 0
 }

 .choice span {
     display: block;
     font: 600 14px var(--serif)
 }

 .choice small {
     font-size: 10px;
     color: var(--ink-soft)
 }

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

 .measure-grid label {
     font-size: 11px;
     color: var(--ink-soft)
 }

 .input-unit {
     display: flex;
     align-items: center;
     border-bottom: 1px solid var(--ink);
     margin-top: 2px
 }

 .input-unit input {
     width: 100%;
     border: 0;
     background: none;
     padding: 7px 0;
     font: 500 20px var(--serif);
     color: var(--ink);
     outline: 0
 }

 .input-unit span {
     font-size: 12px
 }

 .calculator-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     margin-top: 5px
 }

 .check-label {
     display: flex;
     gap: 9px;
     align-items: center;
     font-size: 11px;
     color: var(--ink-soft);
     cursor: pointer
 }

 .check-label input {
     display: none
 }

 .fake-check {
     width: 16px;
     height: 16px;
     border: 1px solid #89968d;
     display: grid;
     place-items: center
 }

 .check-label input:checked+.fake-check {
     background: #9ab13b;
     border-color: #9ab13b
 }

 .fake-check svg {
     width: 12px;
     height: 12px;
     stroke: var(--ink);
     display: none
 }

 .check-label input:checked+.fake-check svg {
     display: block
 }

 .quote-result {
     padding: 38px 34px;
     background: #cfed68;
     color: var(--ink);
     display: flex;
     flex-direction: column
 }

 .result-label {
     font: 700 10px var(--serif);
     text-transform: uppercase;
     letter-spacing: 1.6px
 }

 .result-price {
     font: 500 36px var(--serif);
     letter-spacing: -2px;
     margin: 25px 0 11px
 }

 .result-price span {
     font-size: 20px;
     letter-spacing: -1px
 }

 .quote-result p {
     font-size: 12px;
     line-height: 1.4;
     color: #4e6323
 }

 .result-rule {
     height: 1px;
     background: rgba(23, 35, 31, .24);
     margin: 25px 0 19px
 }

 .result-note {
     display: flex;
     gap: 9px;
     font-size: 11px;
     line-height: 1.4;
     color: #536223;
     margin-bottom: 30px
 }

 .result-note svg {
     width: 15px;
     flex: none
 }

 .full-button {
     margin-top: auto;
     width: 100%;
     font-size: 12px
 }

 .reviews {
     background: var(--paper)
 }

 .review-rating {
     text-align: right
 }

 .review-rating strong {
     display: block;
     letter-spacing: 3px;
     color: #9ab13b;
     font-size: 15px
 }

 .review-rating span {
     font-size: 11px;
     color: var(--ink-soft)
 }

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

 .review-grid blockquote {
     background: var(--white);
     margin: 0;
     padding: 29px 27px;
     min-height: 248px;
     display: flex;
     flex-direction: column;
     justify-content: space-between
 }

 .review-grid p {
     font: 500 17px/1.35 var(--serif);
     letter-spacing: -.5px
 }

 .review-grid footer {
     border-top: 1px solid var(--line);
     padding-top: 14px;
     font-size: 11px
 }

 .review-grid footer strong {
     display: block
 }

 .review-grid footer span {
     color: var(--ink-soft)
 }

 .contact {
     background: var(--ink);
     color: var(--white);
     display: flex;
     justify-content: space-between;
     min-height: 475px
 }

 .contact .section-kicker {
     color: var(--lime)
 }

 .contact h2 {
     font-size: clamp(50px, 7vw, 100px);
     margin-bottom: 27px
 }

 .contact-content>p {
     color: #b6c5bd;
     max-width: 330px;
     font-size: 16px
 }

 .contact-actions {
     display: flex;
     align-items: center;
     gap: 27px;
     margin-top: 37px
 }

 .contact-aside {
     align-self: end;
     color: #b6c5bd;
     font-size: 13px;
     min-width: 245px
 }

 .availability {
     color: var(--white);
     border-top: 1px solid #53635d;
     padding-top: 16px;
     margin-bottom: 30px
 }

 .availability strong {
     display: block;
     color: var(--lime);
     font-weight: 400;
     margin-top: 4px
 }

 .status-dot {
     display: inline-block;
     width: 7px;
     height: 7px;
     background: var(--lime);
     border-radius: 50%;
     margin-right: 8px
 }

 .site-footer {
     padding: 25px 5.5vw;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #111b18;
     color: #b6c5bd;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1.1px
 }

 .site-footer .brand {
     color: var(--white);
     text-transform: none;
     letter-spacing: -.7px
 }

 .site-footer .brand-mark {
     transform: scale(.72);
     transform-origin: left center;
     margin-right: -7px
 }

 .site-footer .brand-sub {
     color: #9aa9a0
 }

 @media(max-width:800px) {
     .site-header {
         height: 70px;
         padding: 0 6vw
     }

     .main-nav,
     .header-phone {
         display: none
     }

     .menu-toggle {
         display: block;
         color: var(--ink)
     }

     .main-nav.mobile-open {
         display: flex;
         position: absolute;
         top: 70px;
         left: 0;
         right: 0;
         padding: 20px 8vw;
         flex-direction: column;
         gap: 17px;
         background: var(--paper);
         border-bottom: 1px solid var(--line);
         box-shadow: 0 10px 20px rgba(23, 35, 31, .08)
     }

     .hero {
         height: calc(100vh - 70px);
         min-height: 650px
     }

     .hero-image {
         background-position: 62% center
     }

     .hero-content {
         padding: 95px 8vw
     }

     .hero h1 {
         font-size: 64px;
         letter-spacing: -3px
     }

     .hero-copy {
         max-width: 295px
     }

     .hero-badge {
         right: 8vw
     }

     .section-pad {
         padding: 78px 8vw
     }

     .intro-grid,
     .services-intro {
         grid-template-columns: 1fr;
         gap: 28px
     }

     .intro h2,
     .services h2,
     .quote-header h2,
     .reviews h2 {
         font-size: 52px
     }

     .intro-copy {
         padding: 0
     }

     .service-item {
         grid-template-columns: 64px 46px 1fr 24px;
         gap: 14px
     }

     .service-thumb {
         width: 64px;
         height: 52px
     }

     .stat-row {
         grid-template-columns: repeat(2, 1fr);
         gap: 26px 10px;
         margin-top: 65px
     }

     .stat-note {
         grid-column: span 2
     }

     .section-heading {
         align-items: start;
         gap: 20px;
         flex-direction: column
     }

     .project-grid {
         grid-template-columns: 1fr 1fr
     }

    .project img {
         height: 280px
     }

     .services-intro {
         margin-bottom: 45px
     }

     .quote-header {
         grid-template-columns: 1fr;
         gap: 20px;
         margin-bottom: 38px
     }

     .quote-header p {
         max-width: 320px
     }

     .calculator-wrap {
         grid-template-columns: 1fr
     }

     .calculator {
         padding: 25px 22px
     }

     .calculator-bottom {
         align-items: flex-start;
         flex-direction: column
     }

     .button-dark {
         width: 100%
     }

     .quote-result {
         min-height: 330px;
         padding: 30px 22px
     }

     .review-grid {
         grid-template-columns: 1fr
     }

     .review-grid blockquote {
         min-height: 220px
     }

     .review-rating {
         text-align: left
     }

     .contact {
         display: block;
         min-height: auto
     }

     .contact-aside {
         margin-top: 73px
     }

     .site-footer {
         align-items: flex-start;
         gap: 18px;
         flex-direction: column;
         padding: 25px 8vw
     }

     .site-footer>span {
         font-size: 9px
     }

     .choice-grid {
         gap: 5px
     }

     .choice {
         padding: 11px 8px
     }

     .choice span {
         font-size: 12px
     }

     .choice small {
         font-size: 9px
     }
 }

 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 18px;
     margin-top: 32px;
     padding: 24px;
    background: rgba(255, 253, 248, .08);
    border: 1px solid rgba(255, 253, 248, .18)
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .form-group label {
     font-weight: 600;
     font-size: 14px;
    color: var(--white)
 }

 .form-group input,
 .form-group textarea {
     padding: 12px;
     border: 1px solid var(--line);
     border-radius: 4px;
     font-family: var(--sans);
     font-size: 14px;
    color: var(--white);
    background: rgba(255, 253, 248, .1)
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: var(--lime);
    background: rgba(255, 253, 248, .16)
 }

 .contact-form button {
     align-self: flex-start;
     margin-top: 8px
 }

 .contact-form .button {
     display: inline-flex;
     align-items: center;
     gap: 8px
 }

 .contact-details {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 24px;
     padding: 16px;
     border-left: 3px solid var(--lime);
     background: rgba(212, 245, 108, .08)
 }

 .contact-details strong {
     font-weight: 600;
     color: var(--ink)
 }

 .contact-details a {
     display: block;
     color: var(--lime);
     font-weight: 600;
     text-decoration: none;
     margin-top: 8px
 }

 .contact-details a:hover {
     color: #71900d
 }

 .service-details {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
     margin-top: 48px
 }

 .service-detail-item {
     padding: 20px;
     border: 1px solid var(--line);
     background: var(--white)
 }

 .service-detail-item h3 {
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 12px 0
 }

 .service-detail-item p {
     margin: 0;
     color: var(--ink-soft);
     line-height: 1.6
 }

 .contact-details-large {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     margin-top: 48px;
     padding: 32px;
     background: var(--white);
     border: 1px solid var(--line)
 }

 .contact-info h3 {
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 16px 0
 }

 .contact-info p {
     margin: 0 0 12px 0;
     color: var(--ink-soft);
     line-height: 1.6
 }

 .contact-info a {
     color: var(--lime);
     font-weight: 600
 }

 .contact-info a:hover {
     color: #71900d
 }

 @media(max-width:800px) {
     .contact-form {
         padding: 16px;
         gap: 14px
     }

     .form-group input,
     .form-group textarea {
         padding: 10px;
         font-size: 13px
     }

     .contact-details {
         padding: 12px;
         gap: 8px
     }

     .service-details {
         grid-template-columns: 1fr;
         gap: 16px
     }

     .contact-details-large {
         grid-template-columns: 1fr;
         gap: 24px;
         padding: 20px
     }
 }

 @media(max-width:390px) {
     .hero h1 {
         font-size: 55px
     }

     .hero-actions {
         align-items: flex-start;
         flex-direction: column;
         gap: 20px
     }

     .measure-grid {
         gap: 7px
     }

     .result-price {
         font-size: 32px
     }
 }