/* Jessamine Landscaping: deferred CSS (preloaded, applied on load).
   Demo look first, then the skeleton components (answer-first, FAQ, forms,
   breadcrumbs, reviews, blog) restyled to the demo tokens. */

/* ---------- Headings ---------- */
.h-xl{font:700 60px/90px var(--serif);color:var(--ink);text-align:center}
.h-lg{font:700 40px/60px var(--serif)}
.h-md{font:700 clamp(26px,3.2vw,36px)/1.3 var(--serif);color:var(--ink)}
.card-title{font:700 clamp(26px,3.2vw,36px)/1.3 var(--serif);color:var(--ink);margin-bottom:12px}
.card-desc{margin:0 0 16px}
.card-desc:last-child{margin-bottom:0}
.center{text-align:center}
.stripe{color:var(--green)}
.text-gold{color:var(--green)}
.section-label,.pill{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--gold);border-radius:4px;padding:6px 10px;margin-bottom:14px}
.inline-link{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.inline-link:hover{color:#000}
.lead{font-size:18px;line-height:28px}

/* Page content */
.content{width:var(--wrap);margin-inline:auto;padding:30px 0 20px}
.content>*+*{margin-top:24px}
.prose p+p{margin-top:16px}
.prose h2{margin:32px 0 12px}
.prose ul{list-style:disc;padding-left:22px;margin-top:12px}
.prose li+li{margin-top:6px}
.post-content h2{font:700 28px/1.3 var(--serif);color:var(--ink);margin:28px 0 10px}
.post-content h3{font:700 22px/1.3 var(--serif);color:var(--ink);margin:22px 0 8px}
.post-content p{margin-bottom:14px}
.post-content ul,.post-content ol{padding-left:22px;margin-bottom:14px;list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:6px}
.post-content hr{border:0;border-top:1px solid var(--tan);margin:24px 0}

/* Breadcrumbs */
.breadcrumb{font-size:14px}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb-item a{text-decoration:underline;text-underline-offset:3px;color:var(--green)}
.breadcrumb-item a:hover{color:#000}
.breadcrumb-item[aria-current="page"]{color:var(--text)}

/* ---------- Cards ---------- */
.card{border-radius:var(--r-card);padding:20px 25px;margin-bottom:20px}
.card--green{background:var(--green);color:#fff}
.card--gold{background:var(--gold);color:#000}
.card--cream,.text-card{background:var(--cream);color:var(--text)}
.card--tan{background:var(--tan);color:#000}
.card--split{display:grid;grid-template-columns:1fr;align-items:center;gap:0}
.card--split .h-lg{text-align:center}
.card--green .h-lg{color:#fff}
.card__body{margin:20px 0}
.card .btn-wrap{margin-top:20px}
.frame{overflow:hidden;border-radius:var(--r-img);aspect-ratio:301/240;background:#222}
.frame img{width:100%;height:100%;object-fit:cover}
.why{margin-bottom:0}
.why .frame{aspect-ratio:850/567}
.why__body{margin:20px 0}
.checks{margin:0}
.checks li{display:flex;align-items:flex-start;font:400 18px/27px var(--sans);margin:0 0 20px}
.card--green .checks li,.areas .checks li{color:#fff}
.checks .ico{flex:0 0 25px;margin-right:10px;color:var(--gold);height:27px;display:flex;align-items:center}
.checks .ico .icon{width:20px;height:20px}
.checks--pins li{margin:0 0 5px}
.checks__title{display:block}
.intro{margin-top:20px;margin-bottom:40px}
.intro .h-xl{margin-bottom:10px}
.story{margin-bottom:40px;text-align:center}
.story .h-xl{margin-bottom:30px}
.story p+p{margin-top:20px}
.bio p+p{margin-top:16px}
@media (min-width:768px){
  .card--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:50px}
  .frame{aspect-ratio:526/240}
  .why .frame{aspect-ratio:850/567}
}
/* Portrait photo (About owner card). After the media block so it wins at every width. */
.frame.frame--portrait{aspect-ratio:4/5}
.frame--portrait img{object-position:50% 0}
/* About owner card: the bio leads, the photo supports it. The photo is capped
   so it stays a portrait on wide screens instead of growing with the card. */
.card--owner .frame{max-width:360px;margin:20px auto 0}
@media (min-width:768px){
  .card--owner{grid-template-columns:1fr}
  .card--owner .bio{font-size:18px;line-height:28px}
}
@media (min-width:900px){
  .card--owner{grid-template-columns:minmax(0,640px) minmax(0,360px);justify-content:center}
  .card--owner .frame{margin:0}
}

/* Small cards in grids (services list, values, blog) */
.grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.grid--2,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.service-card{display:block;background:var(--cream);color:var(--text);border-radius:var(--r-card);padding:20px;text-decoration:none;margin:0}
.service-card img{border-radius:var(--r-img);width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
.service-card h2,.service-card h3{font:700 22px/1.3 var(--serif);color:var(--ink);margin-bottom:8px}
.service-card-cta{display:inline-block;margin-top:10px;font-weight:600;color:var(--green)}
a.service-card:hover .service-card-cta{text-decoration:underline}
a.service-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.15)}

/* Answer-first (used outside the banner) */
.answer-first{font:400 18px/28px var(--sans)}

/* Photo gallery (service hubs) */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);background:#222}
@media (min-width:768px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* FAQ (details/summary, no JS) */
.faq details{background:var(--cream);border-radius:var(--r-card);padding:0 20px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font:700 19px/1.4 var(--serif);color:var(--ink);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 24px/1 var(--sans);color:var(--green)}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 16px}

/* ---------- Areas ---------- */
.areas{position:relative;background:var(--green-deep);color:#fff;overflow:hidden}
.areas__inner{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr;align-items:center}
.areas__img{line-height:0}
.areas__img img{width:100%;aspect-ratio:1419/711;object-fit:cover}
.areas h2{font:700 40px/60px var(--serif);text-align:center;color:#fff}
.areas__text p{margin:20px 0}
.areas__text .btn{margin-bottom:20px}
@media (min-width:768px){.areas__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px}}
.areas-list{display:flex;flex-wrap:wrap;gap:8px 16px}
.area-link{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.areas-cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.area-city-link{display:block;background:#fff;border-radius:var(--r-img);padding:12px 16px;text-decoration:none;color:var(--ink)}
.area-city-name{display:block;font-weight:700}
.area-city-county{display:block;font-size:14px}

/* ---------- Work ---------- */
.work{margin-top:20px}
.work .h-xl{margin-bottom:10px}
.work__grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px;margin-bottom:40px}
.work__grid--ba{gap:40px}
@media (min-width:768px){.work__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.work__grid--ba{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
.work__item{margin:0;overflow:hidden;border-radius:var(--r-img);background:#222}
.work__item img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Before/after slider (vanilla, matches the twentytwenty look) */
.ba{--pos:50;--accent:#fff;--hh:38px;--hb:3px;position:relative;margin:0;overflow:hidden;aspect-ratio:822/581;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;background:#222}
.ba img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba__before{z-index:20;clip-path:inset(0 calc(100% - var(--pos) * 1%) 0 0)}
.ba__after{z-index:10}
.ba__overlay{position:absolute;inset:0;z-index:25;background:rgba(0,0,0,0);transition:background .3s}
.ba__lbl{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none}
.ba__lbl::before{content:attr(data-content);position:absolute;top:50%;margin-top:-16px;color:#fff;text-transform:uppercase;font:500 12px/32px var(--sans);letter-spacing:.1em;background:rgba(255,255,255,.2);padding:0 18px;border-radius:2px}
.ba__lbl--b::before{left:10px}
.ba__lbl--a::before{right:10px}
@media (hover:hover){
  .ba:not(.is-active):hover .ba__overlay{background:rgba(0,0,0,.5)}
  .ba:not(.is-active):hover .ba__lbl{opacity:1}
}
.ba__handle{position:absolute;z-index:40;top:50%;left:calc(var(--pos) * 1%);width:var(--hh);height:var(--hh);margin:-22px 0 0 -22px;box-sizing:content-box;border-radius:9999px;border:var(--hb) solid var(--accent);box-shadow:0 0 12px rgba(51,51,51,.5);cursor:ew-resize}
.ba__handle::before,.ba__handle::after{content:"";position:absolute;left:50%;width:var(--hb);height:9999px;margin-left:-1.5px;background:var(--accent);box-shadow:0 0 12px rgba(51,51,51,.5)}
.ba__handle::before{bottom:50%;margin-bottom:22px}
.ba__handle::after{top:50%;margin-top:22px}
.ba__handle i{position:absolute;top:50%;width:0;height:0;border:6px inset transparent;margin-top:-6px}
.ba__handle i:first-child{left:50%;margin-left:-17px;border-right:6px solid #fff;border-left:0}
.ba__handle i:last-child{right:50%;margin-right:-17px;border-left:6px solid #fff;border-right:0}
.ba__handle:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ---------- CTA band ---------- */
.cta{position:relative;background:#000;color:#fff;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:1}
.cta__inner{position:relative;z-index:2;width:var(--wrap);margin:0 auto;padding:40px 0}
.cta h2{font:700 40px/60px var(--serif);color:#fff}
.cta p{margin:20px 0}

/* ---------- Reviews ---------- */
.review-card,.review{background:var(--cream);border-radius:var(--r-card);padding:20px 25px}
.review-card .stars,.review .stars{color:#b58900;font-size:20px;letter-spacing:2px;margin-bottom:8px}
.review-card blockquote,.review blockquote{font-style:italic;margin-bottom:12px}
.reviewer-name{font-weight:700;color:var(--ink)}
.reviewer-meta{font-size:14px}

/* ---------- Blog ---------- */
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.blog-card-meta .pill{margin-bottom:0}
.blog-card-date,.blog-post-byline{font-size:14px}
.post-card a{text-decoration:none;color:inherit;display:block}
.post-card h2,.post-card h3{font:700 22px/1.3 var(--serif);color:var(--ink);margin:8px 0}

/* ---------- Footer ---------- */
.footer{background:var(--green);color:#fff;padding:30px 0}
.footer__grid{display:grid;grid-template-columns:1fr}
.footer__col{padding:0 30px}
.footer__col>*{margin-top:20px;margin-bottom:20px}
.footer__logo{height:50px;width:100%;object-fit:scale-down;object-position:center}
.footer__col p+ul,.footer__col p+p{margin-top:0}
.footer__head{font-weight:700;margin-bottom:20px}
.footer__col li{line-height:24px;padding:3px 0}
.footer a{text-decoration:none}
.footer a:hover{color:var(--gold)}
.legal{background:#222;color:#9e9e9e;padding:20px 0;text-align:center;font-size:15px}
.legal a{color:#d6d6d6;text-decoration:none}
.legal a:hover{color:var(--gold)}
.legal .wrap{display:flex;flex-direction:column;gap:6px}
@media (min-width:768px){
  .footer__grid{width:calc(var(--wrap) + 60px);margin-inline:auto;grid-template-columns:repeat(4,minmax(0,1fr))}
  .legal{text-align:left}
  .legal .wrap{flex-direction:row;justify-content:space-between;flex-wrap:wrap}
}

/* ---------- Scroll to top ---------- */
.to-top{position:fixed;right:25px;bottom:25px;z-index:900;width:35px;height:35px;border-radius:9999px;background:#f7f7f7;color:#757575;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,background .2s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--gold);color:#000}
.to-top .icon{width:14px;height:14px}

/* ---------- Mobile sticky call bar ---------- */
.mobile-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:950;display:flex;gap:8px;padding:8px 10px;background:#000;box-shadow:0 -2px 8px rgba(0,0,0,.3)}
.mobile-sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:4px;font:500 16px/24px var(--sans);text-decoration:none}
.sticky-cta-call{background:var(--gold);color:#000}
.sticky-cta-estimate{background:#fff;color:#000}
@media (max-width:767px){
  body{padding-bottom:62px}
  .to-top{bottom:78px}
}
@media (min-width:768px){.mobile-sticky-cta{display:none}}

.faq summary h2,.faq summary h3{font:inherit;margin:0;color:inherit}
.nearby-areas-widget{margin-top:0}

/* Lead form (lead-form.md): labels above fields, 16px inputs (no iOS zoom), 48px tap targets */
.lead-form{max-width:560px}
.lead-form label{display:block;margin:16px 0 6px;font-weight:600;color:var(--ink)}
.lead-form input,.lead-form textarea{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid #c9c2b4;border-radius:8px}
.lead-form textarea{min-height:120px;resize:vertical}
.lead-form input:focus,.lead-form textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--green)}
.lead-form button{display:block;width:100%;min-height:48px;margin-top:20px;font-size:1.05rem;cursor:pointer;border:0}
.lead-form button[disabled]{opacity:.6;cursor:wait}
.lead-form-error{margin:16px 0 0;padding:12px 14px;border-radius:8px;background:#fdf1f0;border:1px solid #c0392b;color:#7a1f16}
.lead-form-error a{color:inherit;font-weight:600}

/* Tap targets: 48px minimum on phones (build rule). Visual size unchanged where it matters. */
.to-top{width:48px;height:48px}
.breadcrumb-item a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px}
.footer a[href^="tel:"],.footer li a{display:inline-flex;align-items:center;min-height:48px}
.legal a{display:inline-flex;align-items:center;min-height:48px;padding:0 6px}

/* Areas We Serve: jump row and per-town sections */
.area-jump{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 30px}
.area-jump a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:4px;background:var(--cream);color:var(--ink);text-decoration:none;font:500 16px/24px var(--sans)}
.area-jump a:hover{background:var(--gold)}
.area-town{margin:0 0 40px;scroll-margin-top:140px}
.area-town .h-md{margin-bottom:10px}
.area-town .work__grid{margin-top:20px;margin-bottom:20px}
@media (min-width:768px){.area-town__grid--one{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.area-town__grid--one .work__item:first-child{grid-column:1}}
.area-town__grid--one .work__item img{aspect-ratio:4/3}

/* Homepage: reviews and steps */
.home-reviews,.home-steps{margin-top:20px;margin-bottom:40px}
.home-reviews .h-xl,.home-steps .h-xl{margin-bottom:10px}
.home-reviews__grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:30px}
@media (min-width:768px){.home-reviews__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-reviews .review-card{margin:0;display:flex;flex-direction:column}
.home-reviews .review-card blockquote{flex:1}
.home-reviews__rating{margin-top:24px;font-weight:700;color:var(--ink)}
.home-steps__list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:20px;counter-reset:step}
@media (min-width:768px){.home-steps__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-steps__list li{counter-increment:step;background:var(--green);color:#fff;border-radius:var(--r-card);padding:20px 25px}
.home-steps__list li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#000;font:700 20px/1 var(--serif);margin-bottom:12px}
.home-steps__list h3{font:700 22px/1.3 var(--serif);margin-bottom:8px;color:#fff}
.home-steps__list a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Nav fit: 7 links plus the button. Keep it on one line from 960px up. */
.nav a{white-space:nowrap}
@media (min-width:960px) and (max-width:1199px){
  .nav a{font-size:14px;padding:0 7px}
  .nav .nav__btn{padding:0 0 0 2px}
  .nav .nav__btn span{padding:0 12px}
}

/* Service hub steps list */
.steps{list-style:decimal;padding-left:22px;margin-top:12px}
.steps li+li{margin-top:10px}
/* Town pages (services/service-template.php): 1 to 4 of Lex's photos from the town */
.town-work .work__grid{margin-top:20px;margin-bottom:8px}
@media (min-width:768px){.work__grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}.work__grid--solo{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.town-links{margin-top:8px}
.ba-item__title{font:700 22px/1.3 var(--serif);color:var(--ink);margin:12px 0 0}