/* Designscapes landing pages (devLOG 833, BOSS 26208). Built 2026-11-11 from the approved
   preview mock-ups in /preview/landing-pages/, scoped to main.lp so the site theme is untouched.
   Header/nav/footer rules of the mock-ups are left out: these pages use the site chrome. */
.lp .lp-raw{display:contents}
.lp{font-family:Arial,sans-serif}
/* Baseline: the site theme (theme3 custom.css) forces h2/h3/h4 sizes with !important and zeroes p and
   heading margins; the mock-ups were built on browser defaults. Restore those inside .lp only. */
.lp h1{font-size:2em !important;margin:.67em 0}.lp h2{font-size:1.5em !important;margin:.83em 0}
.lp h3{font-size:1.17em !important;margin:1em 0}.lp h4{font-size:1em !important;margin:1.33em 0}
.lp h1,.lp h2,.lp h3,.lp h4,.lp h5,.lp h6{line-height:inherit}
.lp p{margin:1em 0;line-height:inherit}.lp li{line-height:inherit}
.lp .lead-form textarea{min-height:102px}.lp .lead-form button{line-height:normal}
.lp .lead-form input,.lp .lead-form textarea{height:auto !important;background:#fff !important;line-height:normal !important;font-weight:400 !important;color:#000 !important;border:1px solid #ccc !important}
.lp .btn{line-height:1.7}
.lp .btn::before,.lp .btn::after{content:none !important;display:none !important}
.lp .lead-form input::placeholder,.lp .lead-form textarea::placeholder{text-transform:none !important;letter-spacing:normal !important;font-size:1em !important;font-weight:400 !important;color:#757575 !important}
.lp .lead-form input,.lp .lead-form textarea{text-transform:none !important;letter-spacing:normal !important;font-size:1em !important}
.lp{--primary: #456226; --primary-hover: #354c1d; --text-main: #333333; --bg-light: #f9f9f9;}
.lp{font-family: 'Open Sans', Arial, sans-serif; line-height: 1.7; color: var(--text-main); margin: 0; padding: 0; background-color: #ffffff;}
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6{font-family: 'Montserrat', sans-serif; font-weight: 600;}
.lp .hero{position: relative; background-size: cover; background-position: center; height: 60vh; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff;}
.lp .hero::before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.65);}
.lp .hero-content{position: relative; z-index: 1; max-width: 900px; padding: 0 20px;}
.lp .hero-content h1{font-size: 3.5em !important; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px;}
.lp .hero-content p{font-size: 1.25em; margin-bottom: 35px; font-weight: 300;}
.lp .btn{display: inline-block; background-color: var(--primary); color: #ffffff; padding: 16px 40px; text-decoration: none; font-size: 1.1em; font-family: 'Montserrat', sans-serif; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; transition: background-color 0.3s, transform 0.2s;}
.lp .btn:hover{background-color: var(--primary-hover); transform: translateY(-2px);}
.lp .main-container{max-width: 1200px; margin: 70px auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr; gap: 60px;}
@media(max-width: 900px){.lp .main-container{grid-template-columns: 1fr;}}
.lp .content-area h2{font-size: 2em !important; color: var(--primary); margin-top: 50px; border-bottom: 2px solid var(--bg-light); padding-bottom: 12px;}
.lp .content-area h2:first-child{margin-top: 0;}
.lp .content-area p{font-size: 1.1em; margin-bottom: 25px; color: #444;}
.lp .sidebar{background-color: var(--bg-light); padding: 40px 30px; border-radius: 8px; border: 1px solid #e0e0e0; height: fit-content; position: sticky; top: 110px; box-shadow: 0 4px 20px rgba(0,0,0,0.04);}
.lp .sidebar h3{margin-top: 0; font-size: 1.7em !important; color: var(--text-main); margin-bottom: 15px;}
.lp .sidebar p{font-size: 0.95em; color: #666; margin-bottom: 25px;}
.lp .lead-form input, .lp .lead-form textarea{width: 100%; padding: 14px; margin-bottom: 18px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 1em;}
.lp .lead-form input:focus, .lp .lead-form textarea:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 5px rgba(69, 98, 38, 0.2);}
.lp .lead-form button{width: 100%; background-color: var(--primary); color: white; border: none; padding: 18px; font-size: 1.1em; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, transform 0.2s;}
.lp .lead-form button:hover{background-color: var(--primary-hover); transform: translateY(-2px);}
.lp .faq-section{background-color: var(--bg-light); padding: 80px 20px; margin: 60px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.lp .faq-container{max-width: 900px; margin: 0 auto;}
.lp .faq-container h2{text-align: center; font-size: 2.5em !important; margin-bottom: 50px; color: var(--text-main);}
.lp .faq-item{margin-bottom: 30px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border-left: 4px solid var(--primary);}
.lp .faq-item h4{margin: 0 0 12px 0; font-size: 1.25em !important; color: var(--text-main);}
.lp .faq-item p{margin: 0; font-size: 1.05em; color: #555;}
.lp .portfolio-section{max-width: 1200px; margin: 80px auto; padding: 0 20px;}
.lp .portfolio-more{text-align: center; margin-top: 42px;}
.lp .portfolio-section h2{text-align: center; font-size: 2.5em !important; margin-bottom: 50px; color: var(--text-main);}
.lp .gallery-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px;}
.lp .gallery-item{background-color: #f4f4f4; height: 280px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 2px dashed #ddd; transition: background-color 0.3s;}
.lp .gallery-item.has-photo{border: none; background: none; padding: 0; overflow: hidden;}
.lp .gallery-item.has-photo img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}
.lp .gallery-item:hover{background-color: #eaeaea;}
.lp .intro-block{max-width: 1200px; margin: 60px auto 0; padding: 0 20px;}
.lp .intro-block p{font-size: 1.15em; line-height: 1.75; color: #444; margin: 0;}
.lp .intro-block + .main-container{margin-top: 40px;}
@media (max-width: 900px){.lp .intro-block{margin-top: 34px; padding: 0 20px;}}
@media (max-width: 900px){.lp .intro-block p{font-size: 1.02em;}}
@media (max-width: 900px){.lp .intro-block + .main-container{margin-top: 28px;}}
@font-face{font-family: 'Copperplate Light'; src: url(/custom/fonts/Copperplate_Light.ttf);}
.lp{--primary: #6B755F; --primary-hover: #5B6351;}
.lp{font-family: Arial, sans-serif;}
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6{font-family: 'Copperplate Light', Copperplate, serif; font-weight: 400;}
.lp .lead-form button, .lp .btn{font-family: 'Copperplate Light', Copperplate, serif; font-weight: 400;}
.lp .lead-form input, .lp .lead-form textarea{font-family: Arial, sans-serif;}
@media (max-width: 900px){.lp .hero{min-height: 380px; height: auto; padding: 64px 20px;}}
@media (max-width: 900px){.lp .hero h1, .lp .hero-content h1{font-size: 2rem !important; line-height: 1.18;}}
@media (max-width: 900px){.lp .hero p, .lp .hero-content p{font-size: 1rem;}}
@media (max-width: 900px){.lp .main-container{gap: 34px;}}
@media (max-width: 900px){.lp .content-area h2{font-size: 1.6em !important;}}
@media (max-width: 900px){.lp .content-area p{font-size: 1.02em;}}
@media (max-width: 900px){.lp .sidebar{position: static; padding: 28px 22px;}}
@media (max-width: 420px){.lp .hero h1, .lp .hero-content h1{font-size: 1.7rem !important;}}
@media (max-width: 420px){.lp .hero{min-height: 330px; padding: 52px 16px;}}
.lp section.hero{height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; background-size: cover;}
.lp .portfolio-section .gallery-grid img[data-lb]{cursor: zoom-in;}
.lp .portfolio-section .gallery-grid img[data-lb]:focus-visible{outline: 3px solid #2f5d3a; outline-offset: 3px;}
.dslb{position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(12,16,13,0.92); padding: 56px 64px; -webkit-tap-highlight-color: transparent;}
.dslb.is-open{display: flex;}
.dslb-fig{margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center;}
.dslb-img{display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); background: #222;}
.dslb-cap{color: #eee; font: 14px/1.45 Arial, sans-serif; text-align: center; margin-top: 12px; max-width: 900px;}
.dslb-cap strong{display: block; color: #fff;}
.dslb-btn{position: absolute; border: 0; background: rgba(255,255,255,0.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font: 28px/48px Arial, sans-serif; text-align: center; padding: 0;}
.dslb-btn:hover, .dslb-btn:focus-visible{background: rgba(255,255,255,0.28); outline: 2px solid #fff; outline-offset: 2px;}
.dslb-close{top: 12px; right: 12px;}
.dslb-prev{left: 10px; top: 50%; transform: translateY(-50%);}
.dslb-next{right: 10px; top: 50%; transform: translateY(-50%);}
.dslb-count{position: absolute; top: 24px; left: 20px; color: #ccc; font: 13px Arial, sans-serif;}
body.dslb-lock{overflow: hidden;}
@media (max-width: 700px){.dslb{padding: 60px 8px 70px;}}
@media (max-width: 700px){.dslb-img{max-height: calc(100vh - 170px);}}
@media (max-width: 700px){.dslb-prev, .dslb-next{top: auto; bottom: 12px; transform: none;}}
@media (max-width: 700px){.dslb-prev{left: calc(50% - 60px);}}
@media (max-width: 700px){.dslb-next{right: calc(50% - 60px);}}
.lp .hero{height: 42vh !important; min-height: 320px !important; padding: 0 !important;}
.lp .hero::before{background: rgba(0,0,0,0.18);}
.lp .hero-copy{max-width: 1200px; margin: 44px auto 0; padding: 0 20px;}
.lp .hero-copy h1{font-size: 2.9em !important; line-height: 1.18; letter-spacing: -0.5px; color: #1f3b2c; margin: 0 0 22px;}
@media (max-width: 900px){.lp .hero{height: 34vh !important; min-height: 240px !important;}}
@media (max-width: 900px){.lp .hero-copy{margin-top: 30px;}}
@media (max-width: 900px){.lp .hero-copy h1{font-size: 2.1em !important;}}
@media (max-width: 767px){.lp .hero{height: 30vh !important; min-height: 200px !important;}}
@media (max-width: 767px){.lp .hero-copy{margin-top: 26px;}}
@media (max-width: 767px){.lp .hero-copy h1{font-size: 1.75em !important;}}
.lp section.hero{display:flex !important;align-items:center !important;justify-content:center !important}
.lp .hero-title-box{position:relative;z-index:1;max-width:920px;width:calc(100% - 40px);box-sizing:border-box;background:rgba(255,255,255,.72);border-radius:3px;padding:26px 36px 30px;text-align:center}
.lp .hero-title-box h1{color:#1f3b2c;font-size:2.6em !important;line-height:1.18;letter-spacing:-.5px;margin:0 0 22px;}
.lp .hero-title-box .btn{margin:0}
@media (max-width:900px){.lp .hero-title-box{padding:20px 24px 22px}}
@media (max-width:900px){.lp .hero-title-box h1{font-size:1.9em !important;margin-bottom:16px;}}
@media (max-width:767px){.lp section.hero{display:block !important;aspect-ratio:auto;height:auto !important;min-height:0 !important;padding:0 !important;background-size:0 0 !important;background-color:transparent !important;text-align:left !important}}
@media (max-width:767px){.lp section.hero::before{content:'';position:static;display:block;width:100%;aspect-ratio:16/9;background-image:inherit;background-position:inherit;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.18)}}
@media (max-width:767px){.lp .hero-title-box{width:auto;max-width:1200px;margin:26px auto 0;padding:0 20px;background:none;border-radius:0;text-align:left}}
@media (max-width:767px){.lp .hero-title-box h1{font-size:1.75em !important;line-height:1.18;margin:0 0 22px;}}
/* fall-cleanup-winter-prep gallery photo cells */
.lp .gallery-item--photo{padding: 0; border: 0; background-color: #f4f4f4; overflow: hidden; margin: 0;}
.lp .gallery-item--photo img{width: 100%; height: 100%; object-fit: cover; display: block;}
/* landscape-lighting-audio: its full mock-up stylesheet again, limited to that page (it is the only one with .areas-section) */
.lp:where(:has(.areas-section)){--primary: #456226; --primary-hover: #354c1d; --text-main: #333333; --bg-light: #f9f9f9;}
.lp:where(:has(.areas-section)){font-family: 'Open Sans', Arial, sans-serif; line-height: 1.7; color: var(--text-main); margin: 0; padding: 0; background-color: #ffffff;}
.lp:where(:has(.areas-section)) h1, .lp:where(:has(.areas-section)) h2, .lp:where(:has(.areas-section)) h3, .lp:where(:has(.areas-section)) h4, .lp:where(:has(.areas-section)) h5, .lp:where(:has(.areas-section)) h6{font-family: 'Montserrat', sans-serif; font-weight: 600;}
.lp:where(:has(.areas-section)) .hero{position: relative; background-size: cover; background-position: center; height: 60vh; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff;}
.lp:where(:has(.areas-section)) .hero::before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.65);}
.lp:where(:has(.areas-section)) .hero-content{position: relative; z-index: 1; max-width: 900px; padding: 0 20px;}
.lp:where(:has(.areas-section)) .hero-content h1{font-size: 3.5em !important; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px;}
.lp:where(:has(.areas-section)) .hero-content p{font-size: 1.25em; margin-bottom: 35px; font-weight: 300;}
.lp:where(:has(.areas-section)) .btn{display: inline-block; background-color: var(--primary); color: #ffffff; padding: 16px 40px; text-decoration: none; font-size: 1.1em; font-family: 'Montserrat', sans-serif; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; transition: background-color 0.3s, transform 0.2s;}
.lp:where(:has(.areas-section)) .btn:hover{background-color: var(--primary-hover); transform: translateY(-2px);}
.lp:where(:has(.areas-section)) .main-container{max-width: 1200px; margin: 70px auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr; gap: 60px;}
@media(max-width: 900px){.lp:where(:has(.areas-section)) .main-container{grid-template-columns: 1fr;}}
.lp:where(:has(.areas-section)) .content-area h2{font-size: 2em !important; color: var(--primary); margin-top: 50px; border-bottom: 2px solid var(--bg-light); padding-bottom: 12px;}
.lp:where(:has(.areas-section)) .content-area h2:first-child{margin-top: 0;}
.lp:where(:has(.areas-section)) .content-area p{font-size: 1.1em; margin-bottom: 25px; color: #444;}
.lp:where(:has(.areas-section)) .sidebar{background-color: var(--bg-light); padding: 40px 30px; border-radius: 8px; border: 1px solid #e0e0e0; height: fit-content; position: sticky; top: 110px; box-shadow: 0 4px 20px rgba(0,0,0,0.04);}
.lp:where(:has(.areas-section)) .sidebar h3{margin-top: 0; font-size: 1.7em !important; color: var(--text-main); margin-bottom: 15px;}
.lp:where(:has(.areas-section)) .sidebar p{font-size: 0.95em; color: #666; margin-bottom: 25px;}
.lp:where(:has(.areas-section)) .lead-form input, .lp:where(:has(.areas-section)) .lead-form textarea{width: 100%; padding: 14px; margin-bottom: 18px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 1em;}
.lp:where(:has(.areas-section)) .lead-form input:focus, .lp:where(:has(.areas-section)) .lead-form textarea:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 5px rgba(69, 98, 38, 0.2);}
.lp:where(:has(.areas-section)) .lead-form button{width: 100%; background-color: var(--primary); color: white; border: none; padding: 18px; font-size: 1.1em; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, transform 0.2s;}
.lp:where(:has(.areas-section)) .lead-form button:hover{background-color: var(--primary-hover); transform: translateY(-2px);}
.lp:where(:has(.areas-section)) .faq-section{background-color: var(--bg-light); padding: 80px 20px; margin: 60px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.lp:where(:has(.areas-section)) .faq-container{max-width: 900px; margin: 0 auto;}
.lp:where(:has(.areas-section)) .faq-container h2{text-align: center; font-size: 2.5em !important; margin-bottom: 50px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .faq-item{margin-bottom: 30px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border-left: 4px solid var(--primary);}
.lp:where(:has(.areas-section)) .faq-item h4{margin: 0 0 12px 0; font-size: 1.25em !important; color: var(--text-main);}
.lp:where(:has(.areas-section)) .faq-item p{margin: 0; font-size: 1.05em; color: #555;}
.lp:where(:has(.areas-section)) .portfolio-section{max-width: 1200px; margin: 80px auto; padding: 0 20px;}
.lp:where(:has(.areas-section)) .portfolio-more{text-align: center; margin-top: 42px;}
.lp:where(:has(.areas-section)) .portfolio-section h2{text-align: center; font-size: 2.5em !important; margin-bottom: 50px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .gallery-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px;}
.lp:where(:has(.areas-section)) .gallery-item{background-color: #f4f4f4; height: 280px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 2px dashed #ddd; transition: background-color 0.3s;}
.lp:where(:has(.areas-section)) .gallery-item:hover{background-color: #eaeaea;}
.lp:where(:has(.areas-section)) .hero{height: 40vh; min-height: 320px;}
.lp:where(:has(.areas-section)) .hero-content h1{font-size: 2.6em !important; margin-bottom: 22px;}
.lp:where(:has(.areas-section)) .intro-block{max-width: 1200px; margin: 55px auto 0; padding: 0 20px;}
.lp:where(:has(.areas-section)) .intro-block p{font-size: 1.15em; line-height: 1.75; color: #444; margin: 0 0 18px;}
.lp:where(:has(.areas-section)) .intro-block p:last-child{margin-bottom: 0;}
.lp:where(:has(.areas-section)) .main-container{margin-top: 45px;}
.lp:where(:has(.areas-section)) .content-area ul{font-size: 1.08em; color: #444; margin: 0 0 28px; padding-left: 22px;}
.lp:where(:has(.areas-section)) .content-area ul li{margin-bottom: 9px;}
.lp:where(:has(.areas-section)) .content-area ul ul{font-size: 1em; margin: 8px 0 0;}
.lp:where(:has(.areas-section)) .content-area h3{font-size: 1.32em !important; margin: 34px 0 10px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .content-area h4{font-size: 1.12em !important; margin: 26px 0 8px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .section-kicker{font-family: Arial, sans-serif; font-size: 1.02em; color: var(--primary); letter-spacing: .04em; margin: -6px 0 18px;}
.lp:where(:has(.areas-section)) .icon-boxes{display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; margin: 34px 0 10px;}
.lp:where(:has(.areas-section)) .icon-box{background: var(--bg-light); border: 1px solid #e6e8e1; border-radius: 8px; padding: 24px 20px;}
.lp:where(:has(.areas-section)) .icon-box img{width: 54px; height: 54px; object-fit: contain; display: block; margin-bottom: 14px;}
.lp:where(:has(.areas-section)) .icon-box h4{margin: 0 0 8px; font-size: 1.08em !important;}
.lp:where(:has(.areas-section)) .icon-box p{font-size: .98em; margin: 0; color: #555;}
.lp:where(:has(.areas-section)) .team-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 30px 0 10px;}
@media (min-width: 1100px), (min-width: 700px) and (max-width: 900px){.lp:where(:has(.areas-section)) .team-grid{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;}}
.lp:where(:has(.areas-section)) .team-member img{width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 8px; display: block; background: #f4f4f4;}
.lp:where(:has(.areas-section)) .team-member h5{margin: 12px 0 4px; font-size: 1.1em !important; line-height: 1.3; color: var(--text-main);}
.lp:where(:has(.areas-section)) .team-member p{font-family: Arial, sans-serif; font-size: .82em; letter-spacing: .05em; text-transform: uppercase; color: #6E6E6E; margin: 0;} /* devLOG 833 nav-bold: #777 4.48:1 -> #6E6E6E AA */
@media (max-width: 600px){.lp:where(:has(.areas-section)) .team-grid{gap: 22px 16px;}}
@media (max-width: 600px){.lp:where(:has(.areas-section)) .team-grid .team-member h5{font-size: 1em !important;}}
@media (max-width: 600px){.lp:where(:has(.areas-section)) .team-grid .team-member p{font-size: .74em; letter-spacing: .03em; line-height: 1.5;}}
.lp:where(:has(.areas-section)) .areas-section{background: var(--bg-light); padding: 70px 20px; margin: 60px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.lp:where(:has(.areas-section)) .areas-inner{max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center;}
.lp:where(:has(.areas-section)) .areas-inner h2{font-size: 2.2em !important; margin: 0 0 14px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .areas-inner > div > p{font-size: 1.08em; color: #444;}
.lp:where(:has(.areas-section)) .areas-list{columns: 3; column-gap: 26px; list-style: none; margin: 22px 0 0; padding: 0; font-size: 1.02em; color: #444;}
.lp:where(:has(.areas-section)) .areas-list li{padding: 4px 0; break-inside: avoid;}
.lp:where(:has(.areas-section)) .areas-inner img{width: 100%; border-radius: 8px; display: block;}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .areas-inner{grid-template-columns: 1fr; gap: 28px;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .areas-list{columns: 2;}}
.lp:where(:has(.areas-section)) .gallery-item{background: none; border: 0; height: auto; display: block; margin: 0; letter-spacing: normal; text-transform: none; color: inherit;}
.lp:where(:has(.areas-section)) .gallery-item:hover{background: none;}
.lp:where(:has(.areas-section)) .gallery-item img{display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 8px; background: #f4f4f4;}
.lp:where(:has(.areas-section)) .gallery-item figcaption{font-family: Arial, sans-serif; font-size: .92em; color: #666; padding: 10px 2px 0; line-height: 1.45;}
.lp:where(:has(.areas-section)) .gallery-item figcaption strong{display: block; color: var(--text-main); font-weight: 700;}
.lp:where(:has(.areas-section)) .gallery-lead{max-width: 900px; margin: -24px auto 44px; text-align: center; color: #555; font-size: 1.08em;}
.lp:where(:has(.areas-section)) .testimonial-quotes{display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; margin: 30px 0 10px;}
.lp:where(:has(.areas-section)) .testimonial-quote{margin: 0; padding: 26px 28px; background: #f7f7f4; border-left: 4px solid var(--primary, #6b755f); border-radius: 6px; font-style: italic;}
.lp:where(:has(.areas-section)) .testimonial-quote p{margin: 0 0 12px; line-height: 1.65;}
.lp:where(:has(.areas-section)) .testimonial-more a{text-decoration: underline;}
.lp:where(:has(.areas-section)) .testimonials-section{max-width: 900px; margin: 70px auto; padding: 0 20px; text-align: center;}
.lp:where(:has(.areas-section)) .testimonials-section h2{font-size: 2.2em !important; color: var(--text-main); margin-bottom: 10px;}
.lp:where(:has(.areas-section)) .testimonials-section h4{font-size: 1.15em !important; margin: 0 0 10px; color: var(--primary);}
.lp:where(:has(.areas-section)) .testimonials-section p{color: #555; margin: 0;}
.lp:where(:has(.areas-section)) .testimonial-video{position: relative; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; margin: 30px auto 10px; border-radius: 6px; overflow: hidden; background: #000;}
.lp:where(:has(.areas-section)) .testimonial-video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.lp:where(:has(.areas-section)) .cta-section{background: var(--bg-light); border-top: 1px solid #eee; padding: 70px 20px;}
.lp:where(:has(.areas-section)) .cta-inner{max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;}
.lp:where(:has(.areas-section)) .cta-inner h2{font-size: 2.2em !important; margin: 0 0 14px; color: var(--text-main);}
.lp:where(:has(.areas-section)) .cta-inner p{font-size: 1.08em; color: #444;}
.lp:where(:has(.areas-section)) .cta-inner img{width: 100%; border-radius: 8px; display: block;}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .cta-inner{grid-template-columns: 1fr; gap: 28px;}}
.lp:where(:has(.areas-section)) .review-banner{background: #EFF1EA; color: #4A5142; font: 13.5px/1.5 Arial, sans-serif; padding: 9px 20px; text-align: center; border-bottom: 1px solid #dfe3d8;}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .intro-block{margin-top: 34px;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .intro-block p{font-size: 1.02em;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .gallery-item img{height: 210px;}}
@font-face{font-family: 'Copperplate Light'; src: url(/custom/fonts/Copperplate_Light.ttf);}
.lp:where(:has(.areas-section)){--primary: #6B755F; --primary-hover: #5B6351;}
.lp:where(:has(.areas-section)){font-family: Arial, sans-serif;}
.lp:where(:has(.areas-section)) h1, .lp:where(:has(.areas-section)) h2, .lp:where(:has(.areas-section)) h3, .lp:where(:has(.areas-section)) h4, .lp:where(:has(.areas-section)) h5, .lp:where(:has(.areas-section)) h6{font-family: 'Copperplate Light', Copperplate, serif; font-weight: 400;}
.lp:where(:has(.areas-section)) .lead-form button, .lp:where(:has(.areas-section)) .btn{font-family: 'Copperplate Light', Copperplate, serif; font-weight: 400;}
.lp:where(:has(.areas-section)) .lead-form input, .lp:where(:has(.areas-section)) .lead-form textarea{font-family: Arial, sans-serif;}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero{min-height: 380px; height: auto; padding: 64px 20px;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero h1, .lp:where(:has(.areas-section)) .hero-content h1{font-size: 2rem !important; line-height: 1.18;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero p, .lp:where(:has(.areas-section)) .hero-content p{font-size: 1rem;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .main-container{gap: 34px;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .content-area h2{font-size: 1.6em !important;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .content-area p{font-size: 1.02em;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .sidebar{position: static; padding: 28px 22px;}}
@media (max-width: 420px){.lp:where(:has(.areas-section)) .hero h1, .lp:where(:has(.areas-section)) .hero-content h1{font-size: 1.7rem !important;}}
@media (max-width: 420px){.lp:where(:has(.areas-section)) .hero{min-height: 330px; padding: 52px 16px;}}
.lp:where(:has(.areas-section)) section.hero{height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; background-size: cover;}
.lp:where(:has(.areas-section)) .portfolio-section .gallery-grid img[data-lb]{cursor: zoom-in;}
.lp:where(:has(.areas-section)) .portfolio-section .gallery-grid img[data-lb]:focus-visible{outline: 3px solid #2f5d3a; outline-offset: 3px;}
.dslb{position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(12,16,13,0.92); padding: 56px 64px; -webkit-tap-highlight-color: transparent;}
.dslb.is-open{display: flex;}
.dslb-fig{margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center;}
.dslb-img{display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); background: #222;}
.dslb-cap{color: #eee; font: 14px/1.45 Arial, sans-serif; text-align: center; margin-top: 12px; max-width: 900px;}
.dslb-cap strong{display: block; color: #fff;}
.dslb-btn{position: absolute; border: 0; background: rgba(255,255,255,0.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font: 28px/48px Arial, sans-serif; text-align: center; padding: 0;}
.dslb-btn:hover, .dslb-btn:focus-visible{background: rgba(255,255,255,0.28); outline: 2px solid #fff; outline-offset: 2px;}
.dslb-close{top: 12px; right: 12px;}
.dslb-prev{left: 10px; top: 50%; transform: translateY(-50%);}
.dslb-next{right: 10px; top: 50%; transform: translateY(-50%);}
.dslb-count{position: absolute; top: 24px; left: 20px; color: #ccc; font: 13px Arial, sans-serif;}
body.dslb-lock{overflow: hidden;}
@media (max-width: 700px){.dslb{padding: 60px 8px 70px;}}
@media (max-width: 700px){.dslb-img{max-height: calc(100vh - 170px);}}
@media (max-width: 700px){.dslb-prev, .dslb-next{top: auto; bottom: 12px; transform: none;}}
@media (max-width: 700px){.dslb-prev{left: calc(50% - 60px);}}
@media (max-width: 700px){.dslb-next{right: calc(50% - 60px);}}
.lp:where(:has(.areas-section)) .hero{height: 42vh !important; min-height: 320px !important; padding: 0 !important;}
.lp:where(:has(.areas-section)) .hero::before{background: rgba(0,0,0,0.18);}
.lp:where(:has(.areas-section)) .content-figure{margin: 26px 0 32px;}
.lp:where(:has(.areas-section)) .content-figure img{width: 100%; height: auto; display: block;}
.lp:where(:has(.areas-section)) .content-figure figcaption{font-size: 0.95em; color: #6b7566; margin-top: 9px;}
.lp:where(:has(.areas-section)) .hero-copy{max-width: 1200px; margin: 44px auto 0; padding: 0 20px;}
.lp:where(:has(.areas-section)) .hero-copy h1{font-size: 2.9em !important; line-height: 1.18; letter-spacing: -0.5px; color: #1f3b2c; margin: 0 0 22px;}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero{height: 34vh !important; min-height: 240px !important;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero-copy{margin-top: 30px;}}
@media (max-width: 900px){.lp:where(:has(.areas-section)) .hero-copy h1{font-size: 2.1em !important;}}
@media (max-width: 767px){.lp:where(:has(.areas-section)) .hero{height: 30vh !important; min-height: 200px !important;}}
@media (max-width: 767px){.lp:where(:has(.areas-section)) .hero-copy{margin-top: 26px;}}
@media (max-width: 767px){.lp:where(:has(.areas-section)) .hero-copy h1{font-size: 1.75em !important;}}
.lp:where(:has(.areas-section)) section.hero{display:flex !important;align-items:center !important;justify-content:center !important}
.lp:where(:has(.areas-section)) .hero-title-box{position:relative;z-index:1;max-width:920px;width:calc(100% - 40px);box-sizing:border-box;background:rgba(255,255,255,.72);border-radius:3px;padding:26px 36px 30px;text-align:center}
.lp:where(:has(.areas-section)) .hero-title-box h1{color:#1f3b2c;font-size:2.6em !important;line-height:1.18;letter-spacing:-.5px;margin:0 0 22px;}
.lp:where(:has(.areas-section)) .hero-title-box .btn{margin:0}
@media (max-width:900px){.lp:where(:has(.areas-section)) .hero-title-box{padding:20px 24px 22px}}
@media (max-width:900px){.lp:where(:has(.areas-section)) .hero-title-box h1{font-size:1.9em !important;margin-bottom:16px;}}
@media (max-width:767px){.lp:where(:has(.areas-section)) section.hero{display:block !important;aspect-ratio:auto;height:auto !important;min-height:0 !important;padding:0 !important;background-size:0 0 !important;background-color:transparent !important;text-align:left !important}}
@media (max-width:767px){.lp:where(:has(.areas-section)) section.hero::before{content:'';position:static;display:block;width:100%;aspect-ratio:16/9;background-image:inherit;background-position:inherit;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.18)}}
@media (max-width:767px){.lp:where(:has(.areas-section)) .hero-title-box{width:auto;max-width:1200px;margin:26px auto 0;padding:0 20px;background:none;border-radius:0;text-align:left}}
@media (max-width:767px){.lp:where(:has(.areas-section)) .hero-title-box h1{font-size:1.75em !important;line-height:1.18;margin:0 0 22px;}}
/* Service pages Residential / Commercial / Maintenance (tblpage 39/40/41, devLOG 833 step 877, 2026-11-13).
   Built from the approved /preview/landing-pages/{residential,commercial,maintenance}-cherry-hills-style.html
   mock-ups (BugHerd #250, #273-#276, #283, #285, #288-#290). Same template 63 as the landing pages; these rules
   only apply where the Body article is wrapped in .svc-content, so the 12 landing pages are unchanged. */
.lp:has(.svc-content) .intro-block{margin-top:55px}
.lp:has(.svc-content) .intro-block + .main-container{margin-top:45px}
@media (max-width: 900px){.lp:has(.svc-content) .intro-block{margin-top:34px}}
.lp .svc-content ul{font-size:1.08em;color:#444;margin:0 0 28px;padding-left:22px;list-style:disc}
.lp .svc-content ul li{margin-bottom:9px;list-style:disc}
.lp .svc-content h3{font-size:1.32em !important;margin:34px 0 10px;color:var(--text-main)}
/* gallery: real photos with captions (figure.gallery-item) */
.lp:has(.svc-content) figure.gallery-item{background:none;border:0;height:auto;display:block;margin:0;letter-spacing:normal;text-transform:none;color:inherit}
.lp:has(.svc-content) figure.gallery-item:hover{background:none}
.lp:has(.svc-content) figure.gallery-item img{display:block;width:100%;height:260px;object-fit:cover;border-radius:8px;background:#f4f4f4}
.lp:has(.svc-content) figure.gallery-item figcaption{font-family:Arial,sans-serif;font-size:0.92em;color:#666;padding:10px 2px 0;line-height:1.45}
.lp:has(.svc-content) figure.gallery-item figcaption strong{display:block;color:var(--text-main);font-weight:700}
@media (max-width: 900px){.lp:has(.svc-content) figure.gallery-item img{height:210px}}
/* Maintenance: BugHerd #285 services as photo cards (Option A), 2 wide x 3 rows, each links to its section */
.lp .svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px;margin:8px 0 34px}
.lp .svc-card{display:block;color:inherit;text-decoration:none;container-type:inline-size}
.lp .svc-card img{display:block;width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:8px;background:#f4f4f4;transition:opacity .2s}
.lp .svc-card:hover img,.lp .svc-card:focus-visible img{opacity:.85}
.lp .svc-card:focus-visible{outline:3px solid var(--primary);outline-offset:4px;border-radius:8px}
.lp .svc-content .svc-card .svc-name{font-family:'Copperplate Light',Copperplate,serif;font-weight:400;color:var(--primary);font-size:min(1.6rem,5.6cqi) !important;line-height:1.2;white-space:nowrap;margin:14px 0 6px;border:0;padding:0}
.lp .svc-card:hover .svc-name{color:var(--primary-hover)}
.lp .svc-content .svc-card p{font-size:1em;font-weight:400;color:#444;line-height:1.55;margin:0}
.lp .svc-content [id]{scroll-margin-top:110px}
@media (max-width: 560px){.lp .svc-grid{grid-template-columns:1fr}}
/* devLOG 833 hdr: hero starts below the fixed header (desktop 171px, phone/tablet 79px) */
@media (min-width: 992px) { .lp section.hero { margin-top: 171px; } }
@media (max-width: 991.98px) { .lp section.hero { margin-top: 79px; } }