@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

/* ==========================================================================
   MOTHER NATURE TREE SERVICE - design system v4 "TIMBER DARK"
   Graduated verbatim from approved design candidate A (page /design-a/).
   Prefix da-. Dark ink pages (#171717) with #101010 deep and #1f1f1f soft
   bands, one paper band (#F7F5F0) for reviews, brand green #008430,
   Oswald display caps + Barlow body, 12px radius on cards and photos,
   17px body-text floor. Every page is ONE YOOtheme Section holding ONE
   html element whose root div is class="da-page".
   Chrome (toolbar, header, offcanvas, footer) carried over from v3
   unchanged - the client approved it and it must not change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CANDIDATE A CORE - verbatim from the approved /design-a/ page
   -------------------------------------------------------------------------- */
.da-page{background:#171717;color:#F7F5F0;font-family:'Barlow',sans-serif;font-size:19px;line-height:1.65;overflow:hidden}
.da-page *,.da-page *::before,.da-page *::after{box-sizing:border-box}
.da-page img{max-width:100%}
.da-wrap{max-width:none;margin:0 auto;padding-left:clamp(20px,3.4vw,80px);padding-right:clamp(20px,3.4vw,80px)}
.da-wrap--wide{max-width:none}
.da-sec{padding:clamp(76px,7vw,130px) 0}
.da-sec--deep{background:#101010}
.da-sec--soft{background:#1f1f1f}
.da-sec--paper{background:#F7F5F0;color:#171717}
.da-label{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:#8f8b83;margin:0 0 18px}
.da-h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(44px,3.4vw,64px);line-height:1.05;text-transform:uppercase;margin:0 0 22px;color:#F7F5F0}
.da-sec--paper .da-h2{color:#171717}
.da-lede{font-size:clamp(19px,1.25vw,23px);max-width:980px;color:#c9c5bc;margin:0}
.da-sec--paper .da-lede{color:#4a4741}
.da-btn{display:inline-block;background:#008430;color:#fff !important;font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:.1em;text-transform:uppercase;padding:25px 54px;border-radius:8px;text-decoration:none;box-shadow:0 8px 22px rgba(0,132,48,.30);transition:background .2s ease,transform .15s ease,box-shadow .15s ease}
.da-btn:hover{background:#00551F;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,132,48,.40)}
.da-btn--ghost{background:#2b2b2b;box-shadow:none}
.da-btn--ghost:hover{background:#3a3a3a;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.da-hero{position:relative;min-height:min(92vh,1100px);display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(13,13,13,.42) 0%,rgba(13,13,13,.66) 55%,#171717 100%),url('/wp-content/uploads/tree-removal-winchester-va-drone-boom-extended-pasture.jpg') center/cover no-repeat;padding:clamp(150px,18vh,260px) 0 clamp(70px,8vh,120px)}
.da-hero .da-wrap{width:100%}
.da-display{display:block;font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(48px,7vw,128px);line-height:.98;text-transform:uppercase;color:#F7F5F0;margin:0 0 20px;max-width:1420px}
.da-hero h1{font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(23px,1.9vw,36px);letter-spacing:.14em;text-transform:uppercase;color:#c9c5bc;margin:0 0 26px}
.da-hero-lede{font-size:clamp(19px,1.3vw,24px);color:#e6e2d9;max-width:820px;margin:0 0 40px}
.da-btns{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 48px}
.da-proof{display:flex;flex-wrap:wrap;gap:14px 46px;font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#e6e2d9}
.da-stars{color:#008430;letter-spacing:.06em}
.da-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,56px)}
.da-stat-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(58px,5vw,108px);line-height:1;color:#008430}
.da-stat-label{font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:#c9c5bc;margin-top:12px}
.da-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2vw,40px);margin-top:clamp(44px,4vw,68px)}
.da-svc{background:#1f1f1f;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.da-svc img{width:100%;height:290px;object-fit:cover;display:block}
.da-svc-num{height:290px;display:flex;align-items:center;justify-content:center;background:#101010;font-family:'Oswald',sans-serif;font-weight:700;font-size:96px;color:#008430}
.da-svc-body{padding:34px 36px 38px;display:flex;flex-direction:column;flex:1}
.da-svc h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:26px;text-transform:uppercase;line-height:1.15;margin:0 0 12px;color:#F7F5F0}
.da-svc p{margin:0 0 24px;color:#c9c5bc;font-size:19px}
.da-svc-link{margin-top:auto;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:#008430;text-decoration:none}
.da-svc-link:hover{text-decoration:underline;color:#008430}
.da-vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2vw,40px);margin-top:clamp(44px,4vw,64px)}
.da-vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block;background:#101010}
.da-vid h3{font-family:'Oswald',sans-serif;font-weight:500;font-size:21px;text-transform:uppercase;color:#F7F5F0;margin:20px 0 0}
/* a section with a single video gets a full-width cinema embed instead of
   one small card marooned in a 3 column grid */
.da-vid-grid .da-vid:only-child{grid-column:1/-1;justify-self:center;width:100%;max-width:1600px}
.da-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(260px,24vw,440px);gap:clamp(18px,1.6vw,28px);margin-top:clamp(44px,4vw,64px)}
.da-gal img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.da-gal .g2{grid-column:span 2}
.da-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,1.8vw,30px);margin-top:clamp(44px,4vw,64px)}
.da-why{background:#1f1f1f;border-radius:12px;padding:42px 38px}
.da-why h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:24px;text-transform:uppercase;line-height:1.15;color:#F7F5F0;margin:0 0 14px}
.da-why p{margin:0;color:#c9c5bc;font-size:19px}
.da-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2vw,36px);margin:clamp(44px,4vw,64px) 0 52px}
.da-rev{background:#fff;border-radius:12px;padding:46px 42px;display:flex;flex-direction:column}
.da-rev-stars{color:#008430;font-size:25px;letter-spacing:.12em;margin-bottom:20px}
.da-rev blockquote{margin:0 0 26px;padding:0;font-size:21px;font-weight:500;line-height:1.5;color:#171717;border:0}
.da-rev-name{margin-top:auto;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#4a4741}
.da-area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,1.5vw,24px);margin:clamp(44px,4vw,60px) 0 44px}
.da-area{display:block;background:#1f1f1f;border-radius:12px;padding:34px 32px;font-family:'Oswald',sans-serif;font-weight:500;font-size:23px;text-transform:uppercase;color:#F7F5F0 !important;text-decoration:none;transition:background .2s ease}
.da-area:hover{background:#008430;color:#fff !important;text-decoration:none}
.da-area-more{font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:#008430;text-decoration:none}
.da-area-more:hover{text-decoration:underline;color:#008430}
.da-faq{list-style:none;margin:clamp(44px,4vw,64px) 0 0;padding:0;max-width:none}
.da-faq>li{background:#1f1f1f;border-radius:12px;border:0}
.da-faq.uk-accordion>:nth-child(n+2){margin-top:18px}
.da-page .da-faq .uk-accordion-title{display:block;padding:28px 36px;font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(20px,1.5vw,26px);line-height:1.3;color:#F7F5F0;text-decoration:none}
.da-page .da-faq .uk-accordion-title:hover{color:#F7F5F0}
.da-page .da-faq .uk-accordion-content{padding:0 36px 30px;margin:0}
.da-page .da-faq .uk-accordion-content p{font-size:19px;color:#c9c5bc;margin:0}
.da-page .da-faq a[href^="tel"]{color:#008430;font-weight:600;text-decoration:none}
.da-cta{background:linear-gradient(180deg,#171717 0%,rgba(16,16,16,.84) 35%,rgba(16,16,16,.9) 100%),url('/wp-content/uploads/tree-service-winchester-va-aerial-shenandoah-valley-wide.jpg') center/cover no-repeat;padding:clamp(100px,10vw,190px) 0;text-align:center}
.da-chip{display:inline-block;background:#B42424;color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;padding:11px 24px;border-radius:6px;margin-bottom:28px}
.da-cta .da-h2{font-size:clamp(44px,3.8vw,72px)}
.da-cta p{font-size:clamp(19px,1.3vw,23px);color:#c9c5bc;max-width:820px;margin:0 auto}
.da-tel{display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(48px,5.5vw,104px);line-height:1.05;color:#008430 !important;text-decoration:none;margin:30px 0 20px}
.da-tel:hover{text-decoration:none;color:#008430 !important}
.da-cta-foot{font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:#c9c5bc}
@media (max-width:1250px){
.da-svc-grid{grid-template-columns:repeat(2,1fr)}
.da-why-grid{grid-template-columns:repeat(2,1fr)}
.da-area-grid{grid-template-columns:repeat(2,1fr)}
.da-rev-grid{grid-template-columns:1fr;max-width:860px}
}
@media (max-width:1100px){
.da-vid-grid{grid-template-columns:1fr;max-width:860px}
.da-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(220px,32vw,340px)}
}
@media (max-width:900px){
.da-stats{grid-template-columns:repeat(2,1fr);gap:44px 28px}
}
@media (max-width:760px){
.da-svc-grid{grid-template-columns:1fr}
.da-svc img,.da-svc-num{height:240px}
/* phones: cut the dead air above the hero text. Home keeps some drama,
   interior heroes go compact. */
.da-hero{min-height:min(72vh,720px);padding-top:clamp(72px,10vh,110px);padding-bottom:56px}
.da-hero--int{min-height:0;padding-top:clamp(64px,9vh,96px);padding-bottom:44px}
.da-hero--int h1{margin-bottom:14px}
.da-hero .da-btns{margin-bottom:32px}
}
@media (max-width:640px){
/* the bigger desktop buttons are too wide for a narrow phone, so on small
   screens they go full width instead of overflowing the rail */
.da-btn{display:block;width:100%;text-align:center;padding:22px 20px;font-size:17px}
.da-btns{gap:14px}
.da-why-grid{grid-template-columns:1fr}
.da-area-grid{grid-template-columns:1fr}
.da-gal{grid-template-columns:1fr;grid-auto-rows:260px}
.da-gal .g2{grid-column:auto}
.da-page .da-faq .uk-accordion-title{padding:24px 26px}
.da-page .da-faq .uk-accordion-content{padding:0 26px 26px}
}

/* ==========================================================================
   INTERIOR PAGE ADDITIONS - same Timber Dark language, new since candidate.
   Body text floor 17px. Oswald labels may sit at 15-16px like .da-chip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTERIOR HERO. Shorter band: photo + dark grade + big h1, no giant
   tagline. The page supplies ONLY the photo, inline on the element:
   style="background-image:url('/wp-content/uploads/PHOTO.jpg')".
   The shorthand below resets the home hero image; the inline URL layers
   back in and the ::before grade darkens it.
   -------------------------------------------------------------------------- */
.da-hero--int{min-height:min(56vh,680px);padding:clamp(150px,16vh,220px) 0 clamp(56px,6vh,90px);background:#101010 center/cover no-repeat}
.da-hero--int::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.5) 0%,rgba(13,13,13,.7) 55%,#171717 100%)}
.da-hero--int .da-wrap{position:relative;z-index:1}
.da-hero--int h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(40px,4.6vw,84px);line-height:1;letter-spacing:0;text-transform:uppercase;color:#F7F5F0;margin:0 0 18px;max-width:1240px}
.da-hero--int .da-hero-lede{margin-bottom:34px}
.da-hero--int .da-btns{margin-bottom:0}
/* tracked caps kicker above the interior h1 (plays the role the small h1
   plays on the home hero) */
.da-kicker{display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.24em;text-transform:uppercase;color:#c9c5bc;margin:0 0 16px}

/* --------------------------------------------------------------------------
   PROSE. Service-page body copy. One column capped for measure, or two
   columns via .da-cols (text + photo, or text + text).
   -------------------------------------------------------------------------- */
.da-prose{max-width:1120px;font-size:20px;line-height:1.7;color:#c9c5bc}
.da-prose h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(30px,2.3vw,44px);line-height:1.1;text-transform:uppercase;color:#F7F5F0;margin:48px 0 18px}
.da-prose h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(22px,1.6vw,28px);line-height:1.2;text-transform:uppercase;color:#F7F5F0;margin:36px 0 14px}
.da-prose h2:first-child,.da-prose h3:first-child{margin-top:0}
.da-prose p{margin:0 0 20px}
.da-prose p:last-child{margin-bottom:0}
.da-prose ul,.da-prose ol{margin:0 0 20px;padding-left:1.2em}
.da-prose li{margin:0 0 10px}
.da-prose strong{color:#F7F5F0}
.da-prose a{color:#008430;font-weight:600;text-decoration:none}
.da-prose a:hover{text-decoration:underline}
.da-sec--paper .da-prose{color:#4a4741}
.da-sec--paper .da-prose h2,.da-sec--paper .da-prose h3,.da-sec--paper .da-prose strong{color:#171717}
.da-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,72px);align-items:start;margin-top:clamp(44px,4vw,64px)}
.da-cols--flush{margin-top:0}
.da-cols .da-prose{max-width:none}
.da-cols img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:12px;display:block}
/* text + photo pairs. The photo is a real grid child so it stretches to the
   height of the copy beside it, and sticks while long copy scrolls past. */
.da-cols--media{grid-template-columns:1.05fr .95fr;align-items:start}
.da-cols--media img{height:auto;aspect-ratio:4/3;min-height:0;max-height:clamp(340px,30vw,640px);object-fit:cover}
.da-cols--media .da-prose{max-width:none}
.da-cols figure{margin:0}
.da-cols figure img{min-height:clamp(320px,26vw,560px)}
.da-cols figcaption{margin-top:14px;font-family:'Oswald',sans-serif;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#8f8b83}
.da-sec--paper .da-cols figcaption{color:#6b675f}
@media (max-width:900px){
.da-cols--media{grid-template-columns:1fr;align-items:start}
.da-cols--media img{aspect-ratio:16/10;max-height:none}
.da-cols figure img{min-height:260px}
}

/* --------------------------------------------------------------------------
   RELATED SERVICES. Row of link cards at the bottom of a service page.
   Whole card is one <a>, hover flips green like .da-area.
   -------------------------------------------------------------------------- */
.da-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.5vw,24px);margin-top:clamp(44px,4vw,60px)}
.da-rel{display:flex;flex-direction:column;background:#1f1f1f;border-radius:12px;padding:34px 32px;text-decoration:none;transition:background .2s ease}
.da-rel h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:23px;text-transform:uppercase;line-height:1.15;color:#F7F5F0;margin:0 0 10px}
.da-rel p{margin:0 0 20px;color:#c9c5bc;font-size:17px}
.da-rel span{margin-top:auto;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:#008430}
.da-rel:hover{background:#008430;text-decoration:none}
.da-rel:hover h3,.da-rel:hover p,.da-rel:hover span{color:#fff}

/* --------------------------------------------------------------------------
   CONTACT. Info panel (soft card, NAP items) beside the map + GHL form.
   .da-frame wraps any light-background embed so corners stay rounded.
   -------------------------------------------------------------------------- */
.da-contact{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,3vw,56px);align-items:start;margin-top:clamp(44px,4vw,64px)}
.da-info{background:#1f1f1f;border-radius:12px;padding:clamp(34px,3vw,52px)}
.da-info-item{margin:0 0 28px}
.da-info-item:last-child{margin-bottom:0}
.da-info-k{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#8f8b83;margin:0 0 8px}
.da-info-v{font-size:18px;color:#F7F5F0}
.da-info-v a{color:#F7F5F0;text-decoration:none}
.da-info-v a:hover{color:#008430}
.da-info-tel{display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(30px,2.4vw,44px);line-height:1.1;color:#008430 !important;text-decoration:none}
.da-info-tel:hover{text-decoration:none}
.da-map{width:100%;height:400px;border:0;border-radius:12px;display:block}
.da-frame{background:#fff;border-radius:12px;overflow:hidden}
.da-page .mn-formframe{border-radius:12px;background:#1f1f1f}

/* --------------------------------------------------------------------------
   VIDEO ROW VARIANTS. Base .da-vid-grid is 3-up 16:9. --2 is a 2-up row
   for interior pages, --shorts is 4-up vertical 9:16.
   -------------------------------------------------------------------------- */
.da-vid-grid--2{grid-template-columns:repeat(2,1fr);max-width:1240px}
.da-vid-grid--shorts{grid-template-columns:repeat(4,1fr)}
.da-vid--tall iframe{aspect-ratio:9/16}

/* interior responsive */
@media (max-width:1100px){
.da-vid-grid--shorts{grid-template-columns:repeat(2,1fr);max-width:none}
}
@media (max-width:960px){
.da-contact{grid-template-columns:1fr}
.da-cols{grid-template-columns:1fr}
.da-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.da-vid-grid--2{grid-template-columns:1fr;max-width:860px}
}
@media (max-width:640px){
.da-rel-grid{grid-template-columns:1fr}
.da-vid-grid--shorts{grid-template-columns:1fr;max-width:420px}
.da-hero--int h1{font-size:clamp(34px,10vw,44px)}
}

/* focus is never removed */
.da-page a:focus-visible,.da-page button:focus-visible,.da-page input:focus-visible,
.da-page textarea:focus-visible,.da-page select:focus-visible,
.tm-header a:focus-visible,.tm-header-mobile a:focus-visible,
.uk-offcanvas-bar a:focus-visible,.uk-navbar-dropdown a:focus-visible,
.mn-foot a:focus-visible{
  outline:2px solid #008430; outline-offset:2px;
}

/* carried over: motion is optional */
@media (prefers-reduced-motion:reduce){
  .mn-page *,.mn-page *::before,.mn-page *::after,
  .da-page *,.da-page *::before,.da-page *::after{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   FULL BLEED BLOCK - carried over unchanged (scoped to #tm-main).
   Every page is one YOOtheme Section holding one HTML element. The block
   brings its own .da-wrap containers, so the theme's section padding,
   container max-width and grid gutters must all be stripped or the design
   sits in a narrow column with dead space top and bottom.
   Scoped to #tm-main so the header, toolbar and footer are untouched.
   ========================================================================== */
#tm-main > .uk-section{ padding-top:0; padding-bottom:0; }
#tm-main > .uk-section > .uk-container{ max-width:none; padding-left:0; padding-right:0; }
#tm-main > .uk-section > .uk-container > .uk-grid{ margin-left:0; margin-top:0; }
#tm-main > .uk-section > .uk-container > .uk-grid > *{ padding-left:0; }
#tm-main .da-page,#tm-main .mn-page,#tm-main .mnk-page{ width:100%; }

/* --------------------------------------------------------------------------
   CHROME: HEADER. White navbar, black links, green hover and active.
   Carried over unchanged. Do not regress this.
   -------------------------------------------------------------------------- */
.tm-header{ position:relative; z-index:970; }
.tm-header .uk-navbar-container,
.uk-sticky.uk-active .uk-navbar-container,
.uk-sticky-fixed .uk-navbar-container{
  background:#FFFFFF; min-height:150px; border:0;
  box-shadow:0 1px 0 rgba(23,23,23,.08);
}
.uk-sticky-fixed .uk-navbar-container{ box-shadow:0 2px 12px rgba(23,23,23,.10); }
.tm-header .uk-container{ max-width:none; padding-inline:clamp(20px,3.4vw,80px); }
.tm-header .uk-navbar,
.tm-header .uk-navbar-left,.tm-header .uk-navbar-right{ min-height:150px; }
.tm-header .uk-logo img{ height:130px; width:auto; max-width:60vw; }
.tm-header-mobile .uk-logo img{ height:80px; width:auto; max-width:58vw; }
@media (min-width:1700px){ .tm-header .uk-logo img{ height:146px; } }
.tm-header .uk-navbar-nav > li > a{
  font-family:"Barlow",system-ui,sans-serif; font-size:1.0625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#171717; min-height:150px;
  transition:color .15s ease;
}
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a.uk-open,
.tm-header .uk-navbar-nav > li.uk-active > a{ color:#008430; }
.uk-navbar-dropdown{
  background:#FFFFFF; color:#171717; border-radius:4px;
  box-shadow:0 10px 30px rgba(23,23,23,.14); padding:14px 0;
}
.uk-navbar-dropdown .uk-nav > li > a{
  color:#171717; font-weight:600; font-size:.95rem; padding:9px 24px;
}
.uk-navbar-dropdown .uk-nav > li > a:hover,
.uk-navbar-dropdown .uk-nav > li.uk-active > a{ color:#008430; }
.tm-header-mobile .uk-navbar-container{ background:#FFFFFF; min-height:64px; box-shadow:0 1px 0 rgba(23,23,23,.08); }
.tm-header-mobile .uk-navbar-toggle{ color:#171717; }
.uk-offcanvas-bar{ background:#171717; color:#F7F5F0; }
.uk-offcanvas-bar .uk-nav > li > a{
  color:#F7F5F0; font-weight:600; font-size:1.05rem; padding:10px 0;
}
.uk-offcanvas-bar .uk-nav > li > a:hover,
.uk-offcanvas-bar .uk-nav > li.uk-active > a{ color:#B9E3C4; }

/* --------------------------------------------------------------------------
   CHROME: MOBILE MENU. Timber Dark offcanvas. Markup comes from the theme;
   the CTA block (.da-oc-cta) is injected by the HFCM "Mobile Buttons"
   footer snippet.
   -------------------------------------------------------------------------- */
#tm-dialog-mobile .uk-offcanvas-bar{
  width:min(86vw,370px); background:#171717; color:#F7F5F0;
  padding:26px 26px calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
#tm-dialog-mobile .uk-offcanvas-close{ color:#F7F5F0; }
#tm-dialog-mobile .uk-nav > li > a{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:19px;
  text-transform:uppercase; letter-spacing:.08em; color:#F7F5F0;
  padding:14px 0; border-bottom:1px solid rgba(247,245,240,.12);
}
#tm-dialog-mobile .uk-nav > li:last-child > a{ border-bottom:0; }
#tm-dialog-mobile .uk-nav > li > a:hover,
#tm-dialog-mobile .uk-nav > li.uk-active > a{ color:#B9E3C4; }
#tm-dialog-mobile .uk-nav-sub{ padding:6px 0 16px 18px; }
#tm-dialog-mobile .uk-nav-sub a{
  font-family:'Barlow',sans-serif; font-weight:500; font-size:16px;
  letter-spacing:0; text-transform:none; color:#c9c5bc; padding:7px 0; border:0;
}
#tm-dialog-mobile .uk-nav-sub a:hover{ color:#B9E3C4; }
.da-oc-cta{ margin-top:26px; }
.da-oc-cta a{
  display:block; text-align:center; font-family:'Oswald',sans-serif;
  font-weight:600; font-size:17px; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 18px; border-radius:8px; text-decoration:none;
}
.da-oc-call{ background:#008430; color:#fff !important; margin-bottom:12px; }
.da-oc-call:hover,.da-oc-call:active{ background:#00551F; }
.da-oc-quote{ background:#2b2b2b; color:#F7F5F0 !important; }
.da-oc-quote:hover,.da-oc-quote:active{ background:#3a3a3a; }
.da-oc-proof{
  margin:16px 0 0; text-align:center; font-family:'Oswald',sans-serif;
  font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#B9B3A6;
}
.da-oc-proof span{ color:#B9E3C4; letter-spacing:.06em; }

/* --------------------------------------------------------------------------
   CHROME: MOBILE STICKY ACTION BAR. Fixed call + estimate buttons under
   960px, rendered by the HFCM "Mobile Buttons" footer snippet (.da-mb).
   Replaces the old template .mobile-buttons markup. Body gets bottom
   padding so the bar never covers the footer.
   -------------------------------------------------------------------------- */
.da-mb{
  position:fixed; left:0; right:0; bottom:0; z-index:960; display:none;
  grid-template-columns:1fr 1fr; gap:10px; background:#101010;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(0,0,0,.4);
}
.da-mb a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.25;
  padding:14px 10px; border-radius:8px; text-decoration:none;
}
.da-mb-call{ background:#008430; color:#fff !important; }
.da-mb-call:active{ background:#00551F; }
.da-mb-quote{ background:#2b2b2b; color:#F7F5F0 !important; }
.da-mb-quote:active{ background:#3a3a3a; }
@media (max-width:959px){
  .da-mb{ display:grid; }
  body{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   CHROME: TOOLBAR. Slim ink strip above the white navbar, prefix mn-tb.
   Carried over unchanged.
   -------------------------------------------------------------------------- */
.tm-toolbar{
  background:#171717; color:#F7F5F0;
  font-family:"Barlow",system-ui,sans-serif; padding-block:17px;
}
.tm-toolbar a{ text-decoration:none; }
.mn-toolbar-l,.mn-toolbar-r{
  display:flex; align-items:center; gap:22px;
  font-size:1.125rem; font-weight:500; letter-spacing:.02em; color:#C9C5BC;
}
.mn-tb-rule{ width:1px; height:24px; background:rgba(247,245,240,.30); display:inline-block; }
.mn-tb-city{ color:#F7F5F0; font-weight:700; }
.mn-tb-rating{ display:flex; align-items:center; gap:10px; color:#C9C5BC; }
.mn-tb-rating:hover .mn-tb-count{ color:#FFFFFF; }
.mn-tb-stars{ color:#B9E3C4; font-size:1.1875rem; letter-spacing:.08em; }
.mn-tb-score{ font-weight:700; font-size:1.1875rem; color:#F7F5F0; }
.mn-tb-count{ color:#B9B3A6; }
.mn-tb-tel{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:1.625rem;
  color:#FFFFFF; letter-spacing:.02em;
}
.mn-tb-tel:hover{ color:#B9E3C4; }

/* --------------------------------------------------------------------------
   CHROME: FOOTER. Ink band, prefix mn-foot. Carried over unchanged.
   These are the classes the footer builder layout uses.
   -------------------------------------------------------------------------- */
.mn-foot,.mn-foot *,.mn-foot *::before,.mn-foot *::after{ box-sizing:border-box; }
.mn-foot{
  background:#171717; color:#F7F5F0;
  font-family:"Barlow",system-ui,sans-serif; font-size:1rem; line-height:1.65;
}
.mn-foot a{ color:inherit; text-decoration:none; }
.mn-foot-wrap{ max-width:none; margin-inline:auto; padding:64px clamp(20px,3.4vw,80px) 0; }
.mn-foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px clamp(24px,3vw,48px);
  padding-bottom:52px;
}
@media (max-width:959px){ .mn-foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:539px){ .mn-foot-grid{ grid-template-columns:1fr; } }
.mn-foot-brand img{ height:150px; width:auto; border-radius:0; }
.mn-foot-tag{
  margin-top:16px; font-family:"Oswald",sans-serif; font-weight:600;
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.08em; color:#F7F5F0;
}
.mn-foot-h{
  font-family:"Oswald",sans-serif; font-weight:600; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.14em; color:#FFFFFF; margin:0 0 16px;
}
.mn-foot-nav{ list-style:none; margin:0; padding:0; }
.mn-foot-nav li{ margin:0 0 10px; }
.mn-foot-nav a,.mn-foot p{ color:#B9B3A6; }
.mn-foot-nav a:hover{ color:#FFFFFF; }
.mn-foot-tel{
  display:inline-block; font-family:"Oswald",sans-serif; font-weight:700;
  font-size:1.5rem; color:#FFFFFF; margin-bottom:8px;
}
.mn-foot-tel:hover{ color:#B9E3C4; }
.mn-foot-base{
  border-top:1px solid rgba(247,245,240,.15);
  padding:22px 0 26px;
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; justify-content:space-between;
  font-size:.8125rem; color:#B9B3A6;
}
.mn-foot-base a:hover{ color:#FFFFFF; }

/* --------------------------------------------------------------------------
   CHROME: GHL FORM IFRAME. Carried over (class name kept for compat).
   Rendered WITHOUT form_embed.js on purpose, so it gets a fixed height.
   Do not add the script back.
   -------------------------------------------------------------------------- */
.mn-formframe{
  width:100%; height:940px; border:0; border-radius:12px; display:block;
  background:#1f1f1f;
}
@media (max-width:640px){ .mn-formframe{ height:1080px; } }

/* the Local Klicks template theme.1.css paints .tm-toolbar-default with an orange/gold
   gradient; it loads after this sheet, so kill it with importance. */
.tm-toolbar.tm-toolbar-default,.tm-toolbar{ background:#171717 !important; background-image:none !important; color:#F7F5F0; }

/* --------------------------------------------------------------------------
   KILL THE TEMPLATE LINK COLOURS
   theme.1.css ships the Local Klicks starter palette: links gold #a87c50 and
   hover purple #9d48f8. It loads after this sheet, so these need the extra
   element specificity to win. Any link we have not explicitly styled inherits
   brand green instead of gold and purple.
   -------------------------------------------------------------------------- */
html body a,
html body .uk-link{ color:#008430; }
html body a:hover,
html body .uk-link:hover,
html body .uk-link-toggle:hover .uk-link{ color:#00551F; }
html body .da-page a:not(.da-btn):not(.da-area):not(.da-rel):not(.da-svc-link){ color:#008430; }
html body .da-page a:not(.da-btn):not(.da-area):not(.da-rel):not(.da-svc-link):hover{ color:#4fbb6a; }
/* chrome links keep their own colours */
html body .tm-header a,html body .tm-header a:hover,
html body .tm-toolbar a,html body .tm-toolbar a:hover,
html body .mn-foot a,html body .mn-foot a:hover,
html body #tm-dialog-mobile a,html body #tm-dialog-mobile a:hover,
html body .da-btn,html body .da-btn:hover,
html body .da-area,html body .da-area:hover{ color:inherit; }
html body .da-btn,html body .da-btn:hover{ color:#fff; }
html body .tm-header .uk-navbar-nav > li.mn-nav-cta > a{ color:#FFFFFF; }

/* a button row that follows a text+photo pair needs air above it */
.da-cols + .da-btns,
.da-prose + .da-btns{ margin-top:clamp(36px,3.5vw,56px); }

/* Contact page: the form is the entire point of this page, so the hero is
   cut down to a compact banner and every gap above the form is tightened.
   Utility page, not a landing page, it does not need the full drama. */
.page-id-31 .da-hero--int{
  min-height:0 !important;
  padding:clamp(72px,8vh,110px) 0 clamp(26px,2.6vh,40px) !important;
}
.page-id-31 .da-hero--int h1{ margin-bottom:10px; }
.page-id-31 .da-hero--int .da-hero-lede{ margin-bottom:0; }
.page-id-31 .da-sec:first-of-type{ padding-top:clamp(28px,2.4vw,42px); }
.page-id-31 .da-sec:first-of-type .da-h2{ margin-bottom:12px; }
.page-id-31 .da-sec:first-of-type .da-lede{ font-size:19px; }
.page-id-31 .da-contact{ margin-top:clamp(18px,1.6vw,28px); }
.tm-toolbar .uk-container{ max-width:none; padding-inline:clamp(20px,3.4vw,80px); }

/* --------------------------------------------------------------------------
   ULTRAWIDE BREATHING ROOM
   The rails are full width on purpose, but on a 2500px+ monitor edge to edge
   text reads as stretched. Above 1700px the side padding ramps up from exactly where the
   base clamp leaves it (58px at 1700px, so there is no step at the
   breakpoint) and grows 0.12px per extra viewport pixel up to a 340px cap. Every rail uses the same
   value so the logo, nav, hero copy and footer stay on one vertical line.
   Nothing below 1700px changes.
   -------------------------------------------------------------------------- */
@media (min-width:1700px){
  .da-wrap,
  .tm-header .uk-container,
  .tm-toolbar .uk-container{ padding-inline:clamp(58px, calc(58px + (100vw - 1700px) * 0.14), 440px); }
  .da-wrap{
    padding-left:clamp(58px, calc(58px + (100vw - 1700px) * 0.14), 440px);
    padding-right:clamp(58px, calc(58px + (100vw - 1700px) * 0.14), 440px);
  }
  .mn-foot-wrap{
    padding-left:clamp(58px, calc(58px + (100vw - 1700px) * 0.14), 440px);
    padding-right:clamp(58px, calc(58px + (100vw - 1700px) * 0.14), 440px);
  }
  /* two-up video rows spread across the rail instead of stopping at 1240px */
  .da-vid-grid--2{max-width:none}
  /* text + photo pairs center vertically so a tall photo doesn't strand an
     empty corner when the copy beside it is short */
  .da-cols--media{align-items:center}
}
.tm-header-mobile .uk-container{ max-width:none; padding-inline:clamp(16px,4vw,28px); }
.tm-header-mobile .uk-navbar-container,
.tm-header-mobile .uk-navbar-left,
.tm-header-mobile .uk-navbar-right{ min-height:98px; }

/* the old Local Klicks template LESS still compiles a 70px top margin under
   1100px for its retired fixed .mobile-buttons bar. That bar is gone, so the
   margin is dead space at the top of every phone and tablet view. theme.1.css
   loads after this file, so the override needs the extra element specificity
   to win against its !important. */
@media (max-width:1100px){ html body .tm-page{ margin-top:0 !important; } }

/* --------------------------------------------------------------------------
   CHROME: DESKTOP HEADER CTA
   Menu items flagged .mn-nav-cta render as the green estimate button. Hidden
   inside the mobile offcanvas, which carries its own .da-oc-cta pair.
   -------------------------------------------------------------------------- */
.tm-header .uk-navbar-nav > li.mn-nav-cta{ margin-left:26px; display:flex; align-items:center; }
.tm-header .uk-navbar-nav > li.mn-nav-cta > a{
  min-height:0; height:68px; padding:0 42px; border-radius:8px;
  background:#008430; color:#FFFFFF !important; font-family:"Oswald",sans-serif;
  font-weight:700; font-size:1.125rem; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 6px 18px rgba(0,132,48,.34);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tm-header .uk-navbar-nav > li.mn-nav-cta > a:hover{ background:#046b28; transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,132,48,.44); }
.tm-header .uk-navbar-nav > li.mn-nav-cta > a::after,
.tm-header .uk-navbar-nav > li.mn-nav-cta > a::before{ display:none !important; }
#tm-dialog-mobile .mn-nav-cta{ display:none !important; }

/* --------------------------------------------------------------------------
   CHROME: DESKTOP NAV POLISH
   Green slide-in underline on links, and the dropdown panels restyled from
   stock white UIkit to Timber Dark cards so the menu matches the site.
   -------------------------------------------------------------------------- */
.tm-header .uk-navbar-nav > li:not(.mn-nav-cta) > a{ position:relative; }
.tm-header .uk-navbar-nav > li:not(.mn-nav-cta) > a::before{
  content:""; position:absolute; left:18px; right:18px; bottom:20px; height:3px;
  background:#008430; border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.tm-header .uk-navbar-nav > li:not(.mn-nav-cta) > a:hover::before,
.tm-header .uk-navbar-nav > li.uk-active:not(.mn-nav-cta) > a::before{ transform:scaleX(1); }
.tm-header .uk-navbar-nav > li > a:hover{ color:#008430; }

.tm-header .uk-navbar-dropdown{
  background:#171717; border-radius:12px; border-top:3px solid #008430;
  padding:14px 10px; min-width:280px; margin-top:0;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.tm-header .uk-navbar-dropdown-nav > li > a{
  font-family:"Barlow",system-ui,sans-serif; font-size:1rem; font-weight:600;
  color:#c9c5bc; padding:11px 16px; border-radius:8px;
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.tm-header .uk-navbar-dropdown-nav > li > a:hover,
.tm-header .uk-navbar-dropdown-nav > li.uk-active > a{
  background:#1f1f1f; color:#FFFFFF; padding-left:22px;
  box-shadow:inset 3px 0 0 #008430;
}