/*
Theme Name: Cary Sprinklers
Theme URI: https://carysprinklers.com
Author: Cary Sprinklers
Description: Local-SEO theme for Cary Sprinklers — sprinkler, irrigation & French drain services across the NC Triangle. Mobile-friendly, fast, brand green + blue.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: cary-sprinklers
*/


  :root{--ink:#0e2c1b;--spruce:#15432b;--turf:#4a9d3f;--turf-lo:#3c8233;--mist:#57a7db;--paper:#f4f7f3;--paper-2:#eef3ec;--line:#d3ded4;--muted:#5c6f68;--display:"Space Grotesk",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Space Mono",monospace;--wrap:1060px}
  *{box-sizing:border-box;margin:0;padding:0}
  /* Responsive-image guard: any <img> pasted into page content later scales to its container instead of overflowing on mobile. Classed images (.logo-img height cap, .hero-photo cover) are 0,1,0 selectors and outrank this element rule, so they're unaffected. */
  img{max-width:100%;height:auto}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.12;font-weight:700;letter-spacing:-.02em}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turf-lo);display:inline-flex;align-items:center;gap:.55rem}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--turf)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s}
  .btn-primary{background:var(--turf);color:#fff}.btn-primary:hover{background:var(--turf-lo)}
  .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}.btn-ghost:hover{background:#fff;color:var(--spruce)}
  :focus-visible{outline:3px solid var(--mist);outline-offset:2px}
  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(244,247,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 22px;gap:1rem;max-width:var(--wrap);margin:0 auto}
  .brand{font-family:var(--display);font-weight:700;color:var(--spruce);letter-spacing:-.03em;line-height:1}
  .brand span{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;color:var(--turf-lo);text-transform:uppercase;display:block;font-weight:400}
  .nav-r{display:flex;align-items:center;gap:1rem}
  .nav-phone{font-family:var(--mono);font-weight:700;color:var(--spruce);font-size:.92rem}
  /* breadcrumb */
  .crumb{font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:.9rem 0;letter-spacing:.03em}
  .crumb a:hover{color:var(--turf-lo)}
  /* hero */
  .hero{background:var(--spruce);color:#eaf4f0;padding:52px 0 58px}
  .hero .eyebrow{color:#a7d8ef}.hero .eyebrow::before{background:#a7d8ef}
  .hero h1{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin:.8rem 0 .9rem}
  .hero p{color:#c4dad3;max-width:56ch;font-size:1.05rem}
  .hero-cta{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}
  .trust{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;color:#8fb3aa}
  .trust b{font-family:var(--display);color:#fff;font-size:1.1rem;display:block}
  /* sections */
  section{padding:52px 0}
  h2.sh{font-size:clamp(1.5rem,3vw,2rem);color:var(--spruce);margin-bottom:.5rem}
  .lead{color:var(--muted);max-width:64ch;margin-bottom:1.6rem}
  /* local callout */
  .local{background:#fff;border:1px solid var(--line);border-left:4px solid var(--turf);border-radius:6px;padding:26px 28px}
  .local h3{color:var(--spruce);font-size:1.2rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
  .local ul{list-style:none;display:grid;gap:.7rem;margin-top:.4rem}
  .local li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem}
  .local li svg{flex:none;margin-top:3px}
  .local li b{color:var(--spruce)}
  /* fix grid */
  .fixgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:1.4rem}
  .fix{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px}
  .fix h4{color:var(--spruce);font-size:1.02rem;margin-bottom:.25rem}
  .fix p{font-size:.9rem;color:var(--muted)}
  /* why band */
  .band{background:var(--paper-2)}
  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
  .whyc{padding:4px}
  .whyc .n{font-family:var(--mono);color:var(--turf-lo);font-size:.74rem}
  .whyc h4{color:var(--spruce);font-size:1.02rem;margin:.4rem 0 .3rem}
  .whyc p{font-size:.9rem;color:var(--muted)}
  /* faq */
  .faq details{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 20px;margin-bottom:10px}
  .faq summary{font-family:var(--display);font-weight:600;color:var(--spruce);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--turf);font-size:1.3rem;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq p{padding:0 0 16px;color:var(--muted);font-size:.95rem}
  /* cta band */
  .cta{background:var(--spruce);color:#eaf4f0;text-align:center}
  .cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.6rem}
  .cta p{color:#c4dad3;margin-bottom:1.4rem}
  .cta .hero-cta{justify-content:center}
  /* footer */
  footer{background:var(--ink);color:#bcccc5;font-size:.9rem;padding:40px 0}
  .nap{display:flex;gap:2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.82rem}
  .nap b{color:#a7d8ef;font-family:var(--display)}
  .foot-bar{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:16px;font-family:var(--mono);font-size:.72rem;color:#7d938b}
  @media(max-width:760px){.fixgrid,.why{grid-template-columns:1fr}.nav-phone{display:none}}

  /* --- global nav retrofit --- */
  .promo{background:var(--ink);color:#c4dad3;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.5rem 22px}
  .promo b{color:#a7d8ef}
  header{z-index:100}
  .menu{display:flex;align-items:center;gap:1.35rem;list-style:none}
  .menu>li{position:relative}
  .menu>li>a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--spruce);padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem}
  .menu>li>a:hover{color:var(--turf-lo)}
  .caret{width:8px;height:8px;border-right:2px solid var(--turf);border-bottom:2px solid var(--turf);transform:rotate(45deg);margin-top:-3px;transition:.15s}
  .dd{position:absolute;top:calc(100% + 10px);left:-14px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(12,59,55,.12);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
  .menu>li:hover .dd,.menu>li:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
  .menu>li:hover .caret{transform:rotate(225deg);margin-top:2px}
  .dd a{display:block;padding:.55rem .7rem;border-radius:5px;font-size:.9rem;color:var(--ink)}
  .dd a:hover{background:var(--paper-2);color:var(--turf-lo)}
  .dd a small{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
  .nav-toggle,.nav-toggle-label{display:none}
  @media(max-width:900px){
    .nav-phone{display:none}
    .nav-toggle-label{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
    .nav-toggle-label span{width:24px;height:2px;background:var(--spruce);border-radius:2px}
    .menu{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 18px;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .nav-toggle:checked~.menu{max-height:90vh;overflow:auto}
    .menu>li>a{padding:.85rem 0;border-bottom:1px solid var(--line)}
    .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem;min-width:0}
    .caret{display:none}
  }
  .callbar{display:none}
  @media(max-width:760px){
    .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;gap:1px}
    .callbar a{flex:1;text-align:center;padding:.9rem;font-family:var(--display);font-weight:600;font-size:.95rem}
    .callbar .c{background:var(--turf);color:#fff}.callbar .t{background:var(--spruce);color:#fff}
    footer{padding-bottom:80px}
  }


  @media(max-width:600px){.nav-r .btn{display:none}.nav-r{gap:0}}

  .logo-img{height:50px;width:auto;display:block}
  @media(max-width:600px){.logo-img{height:44px}}

  /* ===== light theme (match live site) ===== */
  .hero{background:linear-gradient(180deg,#ffffff,#eef5ec);color:var(--ink);border-bottom:1px solid var(--line)}
  .hero h1{color:var(--spruce)}
  .hero p,.hero p.sub{color:var(--muted)}
  .hero .eyebrow{color:var(--turf-lo)}
  .hero .eyebrow::before{background:var(--turf)}
  .hero-micro{color:var(--turf-lo)}
  .trust{color:var(--muted)}
  .trust b{color:var(--spruce)}
  .arcs{opacity:.16}
  .cta{background:#eef5ec;color:var(--ink);border-top:1px solid var(--line)}
  .cta h2{color:var(--spruce)}
  .cta p{color:var(--muted)}
  .cta .eyebrow{color:var(--turf-lo)}
  .btn-ghost{color:var(--turf-lo);border-color:var(--turf)}
  .btn-ghost:hover{background:var(--turf);color:#fff}
  .badges{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .badge{color:var(--muted)}
  .badge b{color:var(--spruce)}
  .promo{background:var(--spruce)}
  .promo b{color:#a7d8ef}


  :root{--ink:#0e2c1b;--spruce:#15432b;--turf:#4a9d3f;--turf-lo:#3c8233;--mist:#57a7db;--paper:#f4f7f3;--paper-2:#eef3ec;--line:#d3ded4;--muted:#5c6f68;--display:"Space Grotesk",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Space Mono",monospace;--wrap:1100px}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.14;font-weight:700;letter-spacing:-.02em}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turf-lo);display:inline-flex;align-items:center;gap:.55rem}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--turf)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s}
  .btn-primary{background:var(--turf);color:#fff}.btn-primary:hover{background:var(--turf-lo)}
  .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}.btn-ghost:hover{background:#fff;color:var(--spruce)}
  :focus-visible{outline:3px solid var(--mist);outline-offset:2px}
  .promo{background:var(--ink);color:#c4dad3;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.5rem 22px}
  .promo b{color:#a7d8ef}
  header{position:sticky;top:0;z-index:100;background:rgba(244,247,243,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto;padding:.7rem 22px}
  .brand{font-family:var(--display);font-weight:700;color:var(--spruce);letter-spacing:-.03em;line-height:1;font-size:1.05rem}
  .brand span{font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;color:var(--turf-lo);text-transform:uppercase;display:block;font-weight:400}
  .menu{display:flex;align-items:center;gap:1.35rem;list-style:none}
  .menu>li{position:relative}
  .menu>li>a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--spruce);padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem}
  .menu>li>a:hover{color:var(--turf-lo)}
  .caret{width:8px;height:8px;border-right:2px solid var(--turf);border-bottom:2px solid var(--turf);transform:rotate(45deg);margin-top:-3px;transition:.15s}
  .dd{position:absolute;top:calc(100% + 10px);left:-14px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(12,59,55,.12);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
  .menu>li:hover .dd,.menu>li:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
  .menu>li:hover .caret{transform:rotate(225deg);margin-top:2px}
  .dd a{display:block;padding:.55rem .7rem;border-radius:5px;font-size:.9rem;color:var(--ink)}
  .dd a:hover{background:var(--paper-2);color:var(--turf-lo)}
  .dd a small{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
  .nav-r{display:flex;align-items:center;gap:1rem}
  .nav-phone{font-family:var(--mono);font-weight:700;color:var(--spruce);font-size:.9rem;white-space:nowrap}
  .nav-toggle,.nav-toggle-label{display:none}
  @media(max-width:900px){
    .nav-phone{display:none}
    .nav-toggle-label{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
    .nav-toggle-label span{width:24px;height:2px;background:var(--spruce);border-radius:2px}
    .menu{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 18px;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .nav-toggle:checked~.menu{max-height:90vh;overflow:auto}
    .menu>li>a{padding:.85rem 0;border-bottom:1px solid var(--line)}
    .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem;min-width:0}
    .caret{display:none}
  }
  .crumb{font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:.9rem 0;letter-spacing:.03em}
  .crumb a:hover{color:var(--turf-lo)}
  .hero{position:relative;overflow:hidden;background:var(--spruce);color:#eaf4f0;padding:54px 0 58px}
  .hero .eyebrow{color:#a7d8ef}.hero .eyebrow::before{background:#a7d8ef}
  .hero h1{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin:.8rem 0 .95rem;max-width:22ch}
  .hero p.sub{color:#c4dad3;max-width:58ch;font-size:1.06rem}
  .hero-cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
  .arcs{position:absolute;right:-140px;bottom:-160px;width:480px;height:480px;pointer-events:none;opacity:.4}
  .arcs circle{fill:none;stroke:#57a7db;stroke-width:1.2}
  .badges{background:var(--ink)}
  .badgerow{display:flex;flex-wrap:wrap;gap:1.1rem 2rem;padding:16px 0}
  .badge{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.73rem;color:#a9c1ba}
  .badge b{font-family:var(--display);color:#fff;font-size:.92rem}
  section{padding:54px 0}
  .sh{color:var(--spruce);font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.5rem}
  .lead{color:var(--muted);max-width:66ch;margin-bottom:1.4rem}
  .prose p{max-width:68ch;margin-bottom:1rem}
  .prose a{color:var(--turf-lo);border-bottom:1px solid var(--line)}
  .prose a:hover{border-color:var(--turf)}
  .fixgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.4rem}
  .fix{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px}
  .fix h4{color:var(--spruce);font-size:1.04rem;margin-bottom:.3rem}
  .fix p{font-size:.9rem;color:var(--muted)}
  .band{background:var(--paper-2)}
  .towns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.4rem}
  .town{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 20px}
  .town.live{border-left:4px solid var(--turf)}
  .town.soon{opacity:.72}
  .town h4{color:var(--spruce);font-size:1.02rem}
  .town .m{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
  .town .go{font-family:var(--mono);font-size:.74rem;color:var(--turf-lo);font-weight:700}
  /* Service list on the six city-hub pages (/cary-nc/ etc.). Same card idiom as .town.
     Without this the hubs' only route into the 60 town pages renders as plain body text —
     a{color:inherit} leaves the links visually indistinguishable. */
  .svc-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.4rem}
  .svc-list a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 20px;color:var(--spruce);font-family:var(--display);font-weight:600;font-size:1.02rem}
  .svc-list a:hover{border-color:var(--turf);color:var(--turf-lo)}

  /* The .cs-hub layer that used to live here was RETIRED 2026-07-25: Adam's townhubpagespatch
     replaced all six city-hub bodies with self-contained design-system markup (breadcrumb bar,
     hero band, trust row, service grid, local callout), so the hubs now style themselves from
     the same classes as the other 99 pages. page.php's main.cs-hub wrapper went with it. */

  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
  .whyc .n{font-family:var(--mono);color:var(--turf-lo);font-size:.74rem}
  .whyc h4{color:var(--spruce);font-size:1.02rem;margin:.4rem 0 .3rem}
  .whyc p{font-size:.9rem;color:var(--muted)}
  .faq details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 20px;margin-bottom:10px}
  .faq summary{font-family:var(--display);font-weight:600;color:var(--spruce);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--turf);font-size:1.3rem;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq p{padding:0 0 16px;color:var(--muted);font-size:.95rem}
  .cta{background:var(--spruce);color:#eaf4f0;text-align:center}
  .cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.6rem}
  .cta p{color:#c4dad3;margin-bottom:1.4rem}
  .cta .hero-cta{justify-content:center}
  footer{background:var(--ink);color:#bcccc5;font-size:.9rem;padding:48px 0 40px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px}
  .fcol h4{color:#fff;font-size:.82rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
  .fcol a{display:block;color:#bcccc5;padding:.2rem 0;font-size:.88rem}
  .fcol a:hover{color:#a7d8ef}
  .nap{font-family:var(--mono);font-size:.82rem;line-height:1.9}
  .nap b{color:#a7d8ef;font-family:var(--display)}
  .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;font-family:var(--mono);font-size:.72rem;color:#7d938b}
  .callbar{display:none}
  @media(max-width:760px){
    .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;gap:1px}
    .callbar a{flex:1;text-align:center;padding:.9rem;font-family:var(--display);font-weight:600;font-size:.95rem}
    .callbar .c{background:var(--turf);color:#fff}.callbar .t{background:var(--spruce);color:#fff}
    footer{padding-bottom:80px}
    .fixgrid,.why,.towns,.fgrid,.svc-list{grid-template-columns:1fr}
    .arcs{opacity:.22}
  }
  @media(max-width:900px){.fixgrid,.why{grid-template-columns:1fr 1fr}}

  @media(max-width:600px){.nav-r .btn{display:none}.nav-r{gap:0}}

  .logo-img{height:50px;width:auto;display:block}
  @media(max-width:600px){.logo-img{height:44px}}

  /* ===== light theme (match live site) ===== */
  .hero{background:linear-gradient(180deg,#ffffff,#eef5ec);color:var(--ink);border-bottom:1px solid var(--line)}
  .hero h1{color:var(--spruce)}
  .hero p,.hero p.sub{color:var(--muted)}
  .hero .eyebrow{color:var(--turf-lo)}
  .hero .eyebrow::before{background:var(--turf)}
  .hero-micro{color:var(--turf-lo)}
  .trust{color:var(--muted)}
  .trust b{color:var(--spruce)}
  .arcs{opacity:.16}
  .cta{background:#eef5ec;color:var(--ink);border-top:1px solid var(--line)}
  .cta h2{color:var(--spruce)}
  .cta p{color:var(--muted)}
  .cta .eyebrow{color:var(--turf-lo)}
  .btn-ghost{color:var(--turf-lo);border-color:var(--turf)}
  .btn-ghost:hover{background:var(--turf);color:#fff}
  .badges{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .badge{color:var(--muted)}
  .badge b{color:var(--spruce)}
  .promo{background:var(--spruce)}
  .promo b{color:#a7d8ef}


  :root{--ink:#0e2c1b;--spruce:#15432b;--turf:#4a9d3f;--turf-lo:#3c8233;--mist:#57a7db;--paper:#f4f7f3;--paper-2:#eef3ec;--line:#d3ded4;--muted:#5c6f68;--display:"Space Grotesk",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Space Mono",monospace;--wrap:1100px}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.12;font-weight:700;letter-spacing:-.02em}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turf-lo);display:inline-flex;align-items:center;gap:.55rem}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--turf)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s}
  .btn-primary{background:var(--turf);color:#fff}.btn-primary:hover{background:var(--turf-lo)}
  .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}.btn-ghost:hover{background:#fff;color:var(--spruce)}
  :focus-visible{outline:3px solid var(--mist);outline-offset:2px}

  /* promo bar */
  .promo{background:var(--ink);color:#c4dad3;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.5rem 22px}
  .promo b{color:#a7d8ef}

  /* ===== global header nav ===== */
  header{position:sticky;top:0;z-index:100;background:rgba(244,247,243,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto;padding:.7rem 22px}
  .brand{font-family:var(--display);font-weight:700;color:var(--spruce);letter-spacing:-.03em;line-height:1;font-size:1.05rem}
  .brand span{font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;color:var(--turf-lo);text-transform:uppercase;display:block;font-weight:400}
  .menu{display:flex;align-items:center;gap:1.35rem;list-style:none}
  .menu>li{position:relative}
  .menu>li>a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--spruce);padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem}
  .menu>li>a:hover{color:var(--turf-lo)}
  .caret{width:8px;height:8px;border-right:2px solid var(--turf);border-bottom:2px solid var(--turf);transform:rotate(45deg);margin-top:-3px;transition:.15s}
  .dd{position:absolute;top:calc(100% + 10px);left:-14px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(12,59,55,.12);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
  .menu>li:hover .dd,.menu>li:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
  .menu>li:hover .caret{transform:rotate(225deg);margin-top:2px}
  .dd a{display:block;padding:.55rem .7rem;border-radius:5px;font-size:.9rem;color:var(--ink)}
  .dd a:hover{background:var(--paper-2);color:var(--turf-lo)}
  .dd a small{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
  .nav-r{display:flex;align-items:center;gap:1rem}
  .nav-phone{font-family:var(--mono);font-weight:700;color:var(--spruce);font-size:.9rem;white-space:nowrap}
  .nav-toggle,.nav-toggle-label{display:none}
  @media(max-width:900px){
    .nav-phone{display:none}
    .nav-toggle-label{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
    .nav-toggle-label span{width:24px;height:2px;background:var(--spruce);border-radius:2px;transition:.2s}
    .menu{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 18px;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .nav-toggle:checked~.menu{max-height:90vh;overflow:auto}
    .menu>li>a{padding:.85rem 0;border-bottom:1px solid var(--line)}
    .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem;min-width:0}
    .caret{display:none}
  }

  /* hero */
  .hero{position:relative;overflow:hidden;background:var(--spruce);color:#eaf4f0;padding:64px 0 66px}
  .hero .eyebrow{color:#a7d8ef}.hero .eyebrow::before{background:#a7d8ef}
  .hero h1{font-size:clamp(2.1rem,5vw,3.35rem);color:#fff;margin:.85rem 0 1rem;max-width:20ch}
  .hero p.sub{color:#c4dad3;max-width:56ch;font-size:1.08rem}
  .hero-cta{display:flex;gap:.8rem;margin-top:1.7rem;flex-wrap:wrap}
  .hero-micro{margin-top:1.2rem;font-family:var(--mono);font-size:.74rem;color:#8fb3aa}
  .arcs{position:absolute;right:-120px;bottom:-140px;width:520px;height:520px;pointer-events:none;opacity:.5}
  .arcs circle{fill:none;stroke:#57a7db;stroke-width:1.2}
  @media(max-width:760px){.arcs{opacity:.25;right:-160px}}

  /* trust row */
  .badges{background:var(--ink)}
  .badgerow{display:flex;flex-wrap:wrap;gap:1.1rem 2rem;padding:16px 0}
  .badge{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.73rem;color:#a9c1ba}
  .badge b{font-family:var(--display);color:#fff;font-size:.92rem}

  section{padding:58px 0}
  .sh{color:var(--spruce);font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:.5rem}
  .lead{color:var(--muted);max-width:64ch;margin-bottom:1.6rem}
  .center{text-align:center;margin:0 auto}

  /* service silos */
  .silos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.8rem}
  .silo{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 22px;transition:.16s;display:flex;flex-direction:column}
  .silo:hover{border-color:var(--turf);transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,59,55,.08)}
  .silo .ic{width:42px;height:42px;border-radius:9px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
  .silo h3{color:var(--spruce);font-size:1.14rem;margin-bottom:.35rem}
  .silo p{font-size:.92rem;color:var(--muted);flex:1}
  .silo .go{font-family:var(--mono);font-size:.76rem;color:var(--turf-lo);margin-top:.9rem;font-weight:700}
  .silo.feat{border-color:var(--turf);background:linear-gradient(180deg,#fff,#f3f9f4)}
  .silo .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--turf);border-radius:100px;padding:.2rem .55rem;align-self:flex-start;margin-bottom:.7rem}

  /* band + owner */
  .band{background:var(--paper-2)}
  .split{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
  .prose p{margin-bottom:1rem;max-width:60ch}
  .note{background:#fff;border:1px dashed var(--turf);border-radius:8px;padding:18px 20px;color:var(--muted);font-size:.9rem}
  .note b{color:var(--turf-lo);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.35rem}
  .ownercard{background:var(--spruce);color:#eaf4f0;border-radius:12px;padding:28px}
  .ownercard h3{color:#fff;font-size:1.3rem;margin-bottom:.5rem}
  .ownercard p{color:#c4dad3;font-size:.95rem;margin-bottom:1rem}
  .ownercard .stat{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.72rem;color:#8fb3aa}
  .ownercard .stat b{display:block;font-family:var(--display);color:#a7d8ef;font-size:1.3rem}

  /* areas */
  .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.3rem}
  .area{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);background:#fff;border-radius:2px;padding:.5rem .85rem;color:var(--spruce)}
  .area.live{border-color:var(--turf);color:var(--turf-lo)}
  .area.live:hover{background:var(--turf);color:#fff}

  /* reviews */
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
  .rev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px}
  .rev .stars{color:#f0a500;font-size:1rem;letter-spacing:2px}
  .rev p{font-size:.92rem;color:var(--ink);margin:.6rem 0 .9rem}
  .rev .who{font-family:var(--mono);font-size:.74rem;color:var(--muted)}

  /* cta */
  .cta{background:var(--spruce);color:#eaf4f0;text-align:center}
  .cta h2{color:#fff;font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:.6rem}
  .cta p{color:#c4dad3;margin-bottom:1.4rem}
  .cta .hero-cta{justify-content:center}

  /* footer */
  footer{background:var(--ink);color:#bcccc5;font-size:.9rem;padding:48px 0 40px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px}
  .fcol h4{color:#fff;font-size:.82rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
  .fcol a{display:block;color:#bcccc5;padding:.2rem 0;font-size:.88rem}
  .fcol a:hover{color:#a7d8ef}
  .nap{font-family:var(--mono);font-size:.82rem;line-height:1.9}
  .nap b{color:#a7d8ef;font-family:var(--display)}
  .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;font-family:var(--mono);font-size:.72rem;color:#7d938b}

  /* sticky mobile call bar */
  .callbar{display:none}
  @media(max-width:760px){
    .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;gap:1px}
    .callbar a{flex:1;text-align:center;padding:.9rem;font-family:var(--display);font-weight:600;font-size:.95rem}
    .callbar .c{background:var(--turf);color:#fff}
    .callbar .t{background:var(--spruce);color:#fff}
    footer{padding-bottom:80px}
    .silos,.revgrid{grid-template-columns:1fr}
    .split,.fgrid{grid-template-columns:1fr}
  }
  @media(max-width:900px){.silos{grid-template-columns:1fr 1fr}}

  @media(max-width:600px){.nav-r .btn{display:none}.nav-r{gap:0}}

  .logo-img{height:50px;width:auto;display:block}
  @media(max-width:600px){.logo-img{height:44px}}

  /* trust + brand strips */
  .truststrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tsrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:26px 0 10px;align-items:stretch;justify-content:center}
  .tsb{display:flex;align-items:center;gap:.65rem;border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--paper)}
  .tsb{text-decoration:none}a.tsb:hover{border-color:var(--turf)}
  .tsb .t{font-family:var(--display);font-weight:600;color:var(--spruce);font-size:.92rem;line-height:1.15}
  .tsb .s{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.03em}
  .stars{color:#f5a623;letter-spacing:1px;font-size:1rem}
  .tsnote{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:center;max-width:74ch;margin:6px auto 26px;padding:0 22px}
  .brandstrip{background:var(--paper-2);border-top:1px solid var(--line)}
  .brow{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;padding:18px 0;font-family:var(--mono);font-size:.82rem;color:var(--turf-lo)}
  .brow b{font-family:var(--display);color:var(--spruce);font-size:.95rem;letter-spacing:-.01em;margin-right:.4rem}

  /* ===== light theme (match live site) ===== */
  .hero{background:linear-gradient(180deg,#ffffff,#eef5ec);color:var(--ink);border-bottom:1px solid var(--line)}
  .hero h1{color:var(--spruce)}
  .hero p,.hero p.sub{color:var(--muted)}
  .hero .eyebrow{color:var(--turf-lo)}
  .hero .eyebrow::before{background:var(--turf)}
  .hero-micro{color:var(--turf-lo)}
  .trust{color:var(--muted)}
  .trust b{color:var(--spruce)}
  .arcs{opacity:.16}
  .cta{background:#eef5ec;color:var(--ink);border-top:1px solid var(--line)}
  .cta h2{color:var(--spruce)}
  .cta p{color:var(--muted)}
  .cta .eyebrow{color:var(--turf-lo)}
  .btn-ghost{color:var(--turf-lo);border-color:var(--turf)}
  .btn-ghost:hover{background:var(--turf);color:#fff}
  .badges{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .badge{color:var(--muted)}
  .badge b{color:var(--spruce)}
  .promo{background:var(--spruce)}
  .promo b{color:#a7d8ef}


  @media(max-width:860px){.tsrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:480px){.tsrow{grid-template-columns:1fr}}

  /* quote form */
  .quote{background:#eef5ec;border-top:1px solid var(--line)}
  .qgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
  .qbul{list-style:none;margin-top:1rem;display:grid;gap:.5rem}
  .qbul li{font-size:.93rem;color:var(--muted);padding-left:1.4rem;position:relative}
  .qbul li::before{content:"\2713";position:absolute;left:0;color:var(--turf);font-weight:700}
  .qform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fld{margin-bottom:12px}
  .fld label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
  .fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;font-family:var(--body);font-size:.95rem;background:var(--paper);color:var(--ink)}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--mist);border-color:var(--mist)}
  .fnote{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:.7rem;line-height:1.5}
  @media(max-width:760px){.qgrid{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

  /* Contact Form 7 quote form — maps CF7's default markup onto the .qform field styling
     so the plugin form matches the hand-built Formspree form. Scoped to .qform-cf7 (the
     wrapper div injected in front-page.php + cs_form_action); the .wpcf7-* classes never
     appear on the legacy Formspree forms, so none of this can touch them. Mirrors the
     .fld input/select/textarea rules above. */
  .qform-cf7 .wpcf7,.qform-cf7 form.wpcf7-form{margin:0}
  .qform-cf7 .wpcf7 p{margin:0 0 12px}
  .qform-cf7 .wpcf7-form-control-wrap{display:block} /* the CF7 wrapper span -> block so width:100% fills the field */
  .qform-cf7 .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
  .qform-cf7 .wpcf7 select,
  .qform-cf7 .wpcf7 textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;font-family:var(--body);font-size:.95rem;background:var(--paper);color:var(--ink)}
  .qform-cf7 .wpcf7 input:focus,.qform-cf7 .wpcf7 select:focus,.qform-cf7 .wpcf7 textarea:focus{outline:2px solid var(--mist);border-color:var(--mist)}
  .qform-cf7 .wpcf7-submit{width:100%;text-align:center;margin-top:.4rem} /* button also carries .btn .btn-primary from the form template */
  .qform-cf7 .wpcf7-not-valid-tip{font-family:var(--mono);font-size:.68rem;color:#b3261e;margin-top:.3rem}
  .qform-cf7 .wpcf7-response-output{font-family:var(--body);font-size:.85rem;line-height:1.5;margin:.9rem 0 0;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px}
  .qform-cf7 .wpcf7-spinner{margin:.5rem auto 0;display:block}

  :root{--ink:#0e2c1b;--spruce:#15432b;--turf:#4a9d3f;--turf-lo:#3c8233;--mist:#57a7db;--paper:#f4f7f3;--paper-2:#eef3ec;--line:#d3ded4;--muted:#5c6f68;--display:"Space Grotesk",system-ui,sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Space Mono",monospace;--wrap:1080px}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  /* Anchor targets (#contact, #services, #reviews…) were scrolling UNDER the sticky header —
     Andrew's phone test 7/24, tapping "Contact" in the hamburger. Measured header height:
     57px at <=600px (logo 34px) and 75px above it (logo 42px + the "Request service" button).
     The promo ticker is static, not sticky, so it doesn't count toward the offset. */
  [id]{scroll-margin-top:92px}
  @media(max-width:600px){[id]{scroll-margin-top:74px}}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.14;font-weight:700;letter-spacing:-.02em}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turf-lo);display:inline-flex;align-items:center;gap:.55rem}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--turf)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s}
  .btn-primary{background:var(--turf);color:#fff}.btn-primary:hover{background:var(--turf-lo)}
  .btn-ghost{color:var(--turf-lo);border-color:var(--turf)}.btn-ghost:hover{background:var(--turf);color:#fff}
  :focus-visible{outline:3px solid var(--mist);outline-offset:2px}
  .logo-img{height:50px;width:auto;display:block}
  @media(max-width:600px){.logo-img{height:44px}.nav-r .btn{display:none}}
  .promo{background:var(--spruce);color:#dbe9e0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.5rem 22px}
  .promo b{color:#a7d8ef}
  header{position:sticky;top:0;z-index:100;background:rgba(244,247,243,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto;padding:.7rem 22px}
  .brand{display:block}
  .menu{display:flex;align-items:center;gap:1.35rem;list-style:none}
  .menu>li{position:relative}
  .menu>li>a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--spruce);padding:.4rem 0;display:inline-flex;align-items:center;gap:.3rem}
  .menu>li>a:hover{color:var(--turf-lo)}
  .caret{width:8px;height:8px;border-right:2px solid var(--turf);border-bottom:2px solid var(--turf);transform:rotate(45deg);margin-top:-3px;transition:.15s}
  .dd{position:absolute;top:calc(100% + 10px);left:-14px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(21,67,43,.12);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
  .menu>li:hover .dd,.menu>li:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
  .menu>li:hover .caret{transform:rotate(225deg);margin-top:2px}
  .dd a{display:block;padding:.55rem .7rem;border-radius:5px;font-size:.9rem;color:var(--ink)}
  .dd a:hover{background:var(--paper-2);color:var(--turf-lo)}
  .dd a small{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
  .nav-r{display:flex;align-items:center;gap:1rem}
  .nav-phone{font-family:var(--mono);font-weight:700;color:var(--spruce);font-size:.9rem;white-space:nowrap}
  .nav-toggle,.nav-toggle-label{display:none}
  @media(max-width:900px){
    .nav-phone{display:none}
    .nav-toggle-label{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
    .nav-toggle-label span{width:24px;height:2px;background:var(--spruce);border-radius:2px}
    .menu{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 18px;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .nav-toggle:checked~.menu{max-height:90vh;overflow:auto}
    .menu>li>a{padding:.85rem 0;border-bottom:1px solid var(--line)}
    .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem;min-width:0}
    .caret{display:none}
  }
  /* Collapsed mobile menu was still 27px tall: box-sizing:border-box floors max-height:0 at
     padding + border, so a paper-coloured strip with a hairline sat ~26px below the nav and
     swallowed taps on the content under it. Zero the padding/border while closed. */
  @media(max-width:900px){
    .menu{padding-top:0;padding-bottom:0;border-bottom-width:0}
    .nav-toggle:checked~.menu{padding-top:8px;padding-bottom:18px;border-bottom-width:1px}
  }
  .crumb{font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:.9rem 0;letter-spacing:.03em}
  .crumb a:hover{color:var(--turf-lo)}
  .hero{background:linear-gradient(180deg,#ffffff,#eef5ec);border-bottom:1px solid var(--line);padding:52px 0 44px}
  .hero h1{font-size:clamp(2rem,4.6vw,3rem);color:var(--spruce);margin:.8rem 0 .9rem;max-width:20ch}
  .hero p{color:var(--muted);max-width:60ch;font-size:1.06rem}
  .hero-cta{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}
  .truststrip{background:#fff;border-bottom:1px solid var(--line)}
  .tsrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:24px 0 8px;align-items:stretch;justify-content:center}
  .tsb{display:flex;align-items:center;gap:.65rem;border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--paper)}
  .tsb{text-decoration:none}a.tsb:hover{border-color:var(--turf)}
  .tsb .t{font-family:var(--display);font-weight:600;color:var(--spruce);font-size:.92rem;line-height:1.15}
  .tsb .s{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.03em}
  .stars{color:#f5a623;letter-spacing:1px;font-size:1rem}
  .tsnote{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:center;max-width:74ch;margin:6px auto 24px;padding:0 22px}
  section{padding:54px 0}
  .sh{color:var(--spruce);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.5rem}
  .lead{color:var(--muted);max-width:66ch;margin-bottom:1.4rem}
  .band{background:var(--paper-2)}
  .founder{display:grid;grid-template-columns:1fr .8fr;gap:38px;align-items:start}
  .founder .story p{max-width:60ch;margin-bottom:1rem;font-size:1.02rem}
  .founder .story .sig{font-family:var(--display);font-weight:600;color:var(--spruce);margin-top:.6rem}
  .founder .story .sig span{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted);font-weight:400;letter-spacing:.04em}
  .pullbox{background:var(--spruce);color:#eaf4f0;border-radius:12px;padding:28px;position:sticky;top:90px}
  .pullbox .q{font-family:var(--display);font-size:1.25rem;line-height:1.35;color:#fff}
  .pullbox .q b{color:#a7d8ef}
  .photo-note{border:1px dashed var(--turf);border-radius:10px;padding:16px 18px;margin-top:14px;font-family:var(--mono);font-size:.68rem;color:var(--muted);background:#fff}
  .note{background:#fff;border:1px dashed var(--turf);border-radius:8px;padding:16px 20px;color:var(--muted);font-size:.9rem;max-width:70ch}
  .note b{color:var(--turf-lo);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.3rem}
  .brandstrip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-top:1.4rem}
  .brow{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-family:var(--mono);font-size:.84rem;color:var(--turf-lo)}
  .brow b{font-family:var(--display);color:var(--spruce);font-size:.98rem;margin-right:.4rem}
  .equip{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:1.4rem}
  .ec{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px}
  .ec .n{font-family:var(--mono);color:var(--turf-lo);font-size:.72rem;letter-spacing:.08em}
  .ec h4{color:var(--spruce);font-size:1.08rem;margin:.35rem 0 .4rem}
  .ec p{font-size:.93rem;color:var(--muted)}
  .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.3rem}
  .area{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);background:#fff;border-radius:2px;padding:.5rem .85rem;color:var(--spruce)}
  .area.live{border-color:var(--turf);color:var(--turf-lo)}
  .area.live:hover{background:var(--turf);color:#fff}
  .cta{background:#eef5ec;border-top:1px solid var(--line);text-align:center}
  .cta h2{color:var(--spruce);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.6rem}
  .cta p{color:var(--muted);margin-bottom:1.4rem}
  .cta .hero-cta{justify-content:center}
  footer{background:var(--ink);color:#bcccc5;font-size:.9rem;padding:48px 0 40px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px}
  .fcol h4{color:#fff;font-size:.82rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
  .fcol a{display:block;color:#bcccc5;padding:.2rem 0;font-size:.88rem}
  .fcol a:hover{color:#a7d8ef}
  .nap{font-family:var(--mono);font-size:.82rem;line-height:1.9}
  .nap b{color:#a7d8ef;font-family:var(--display)}
  .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;font-family:var(--mono);font-size:.72rem;color:#7d938b}
  .callbar{display:none}
  @media(max-width:760px){
    .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;gap:1px}
    .callbar a{flex:1;text-align:center;padding:.9rem;font-family:var(--display);font-weight:600;font-size:.95rem}
    .callbar .c{background:var(--turf);color:#fff}.callbar .t{background:var(--spruce);color:#fff}
    footer{padding-bottom:80px}
    .founder,.equip,.fgrid{grid-template-columns:1fr}
    .pullbox{position:static}
  }

  @media(max-width:860px){.tsrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:480px){.tsrow{grid-template-columns:1fr}}

  .promo{overflow:hidden}
  .promo .ticker{display:inline-flex;white-space:nowrap;animation:promoscroll 40s linear infinite;will-change:transform}
  .promo .ticker span{padding:0 1.4rem}
  .promo:hover .ticker{animation-play-state:paused}
  @keyframes promoscroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
  @media(prefers-reduced-motion:reduce){.promo .ticker{animation:none}}

/* ===== Homepage hero photo + site-wide Recent Work gallery (Customizer) ===== */
.hero.has-hero-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;border-bottom:none;padding:78px 0 84px}
.hero.has-hero-img h1{color:#fff}
.hero.has-hero-img p,.hero.has-hero-img p.sub{color:#eef4f1}
.hero.has-hero-img .eyebrow{color:#bfe3f4}
.hero.has-hero-img .eyebrow::before{background:#bfe3f4}
.hero.has-hero-img .hero-micro{color:#dbe7e1}
.hero.has-hero-img .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.gallery-band .wrap{text-align:center}
.gallery-band .cs-gallery-inner{margin-top:1.4rem}

/* Hero photo as a real <img> element (SEO alt text + precise framing) */
.hero.has-hero-img{position:relative;overflow:hidden;min-height:clamp(440px,56vh,580px);display:flex;align-items:center}
.hero.has-hero-img .wrap{position:relative;z-index:2}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 22%;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,32,19,.9) 0%,rgba(9,32,19,.74) 42%,rgba(9,32,19,.42) 100%)}
@media(max-width:760px){.hero-photo{object-position:62% 18%}.hero.has-hero-img{min-height:clamp(400px,66vh,520px)}}

/* ===== "How our service works" step list (used on all money + sub-service pages) ===== */
.steps{display:grid;gap:16px;margin-top:1.4rem;counter-reset:cstep}
@media(min-width:720px){.steps{grid-template-columns:1fr 1fr;gap:20px 28px}}
.step{display:flex;gap:15px;align-items:flex-start;counter-increment:cstep}
.step .sn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--turf,#2f7d32);color:#fff;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:1.05rem;line-height:1}
.step .sn::before{content:counter(cstep)}
.step h4{margin:.1rem 0 .3rem;font-size:1.05rem;color:var(--ink,#12261b)}
.step p{margin:0;color:var(--muted,#5b6b60)}

/* ===== Mobile fixes from Andrew's phone pass, 7/25 =====
   Deliberately last in the file so they win the cascade over the earlier duplicated blocks. */

/* 1. Classic [gallery] layout — site-wide (the strip renders in footer.php, so every page).
   The theme declares html5 gallery support, which means WordPress emits NO inline gallery
   styles, and nothing else in this stylesheet targeted .gallery. So the strip was rendering
   as 11 raw 150px thumbnails stacked one per row at EVERY width, desktop included — not just
   a phone problem. 3 across on desktop, 2 across on phone. The image-size bump that goes with
   this lives in CS_GALLERY_DEFAULT_SHORTCODE (functions.php): 150px sources would look worse
   stretched into these cells than they did sitting at their natural size. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.4rem}
.gallery .gallery-item{width:auto;margin:0;float:none;text-align:left}
.gallery .gallery-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:0}
.gallery .gallery-caption{display:none}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;gap:10px}}

/* 2. Hamburger hugs the RIGHT edge — site-wide (shared header, so every page).
   nav.nav is justify-content:space-between. Below 900px the .menu goes position:fixed (out of
   flow) and .nav-phone hides, so the in-flow children are brand | label | .nav-r — which left
   the hamburger stranded in the middle slot. margin-left:auto pushes it right; the logo stays
   left. Below 600px .nav-r's button also hides, so the label then hugs the edge itself. */
@media(max-width:900px){.nav-toggle-label{margin-left:auto}}
/* …but margin-left:auto alone left it ~44px short of the edge (Andrew's phone, 7/25), against
   the logo's 22px inset on the left. Two things sat to its right: .nav has gap:1rem, and
   .nav-r keeps its slot in the flex row even at phone width where BOTH its children are
   hidden (.nav-phone from 900px, .nav-r .btn from 600px) — an empty box still earns a gap.
   16px gap + the label's own 6px padding = the missing 22px. Removing the empty box takes its
   gap with it; the negative margin pulls the BARS out to the same 22px content inset as the
   logo without shrinking the tap target (the padding stays, the box just shifts). */
@media(max-width:600px){
  .nav-r{display:none}
  .nav-toggle-label{margin-right:-6px}
}

/* 3. Call/Text buttons authored INSIDE a prose <p> stack below the text on phones.
   Was scoped to .cs-hub; that wrapper was retired 2026-07-25 (see above), and Adam's new
   hub bodies put their Call/Text pair in a .hero-cta row like every service page. The rule
   is re-scoped to .prose so it still catches any p-wrapped .btn in page copy — .hero-cta
   rows are untouched, which is what kept service-page hero buttons safe before. .btn is
   inline-flex, which is why "Call 919-341-9644" floated mid-sentence next to the warranty
   text at phone width. */
@media(max-width:760px){
  .prose p > a.btn{display:flex;width:100%;justify-content:center;margin-top:10px}
}

/* 4. Prose-bearing card grids go ONE column on phones (Andrew: "don't have thin cards").
   This is a CASCADE BUG being corrected, not a new preference — the stylesheet already said
   these collapse to 1fr at 760px, but a LATER 900px block re-set them to two columns:
     line ~291  @media(max-width:760px){ .fixgrid,.why,… {grid-template-columns:1fr} }
     line ~294  @media(max-width:900px){ .fixgrid,.why   {grid-template-columns:1fr 1fr} }
     line ~454  @media(max-width:760px){ .silos,.revgrid {grid-template-columns:1fr} }
     line ~457  @media(max-width:900px){ .silos          {grid-template-columns:1fr 1fr} }
   At 390px BOTH queries match at equal specificity, so the later 900px rule won and the
   cards stayed 2-up and too narrow for body copy. Restating it last fixes it without
   editing those blocks. 761-900px still gets two columns, which is right for a tablet.
   NOT included, deliberately: .gallery (photos — 2-across is the point, see item 1),
   .svc-list (hub link cards — already 1-up here, and labels like "Winterization & Spring
   Startup in Cary" would be unreadable in a ~170px column), .tsrow (icon badges, has its own
   860/480 ladder), .steps (min-width:720px for 2-col, so already 1-up below that). */
@media(max-width:760px){
  .fixgrid,.why,.silos{grid-template-columns:1fr}
}

/* ===== Review round, Adam 7/25 ===== */

/* 5. Trust badges alignment on phones — Adam's exact rule, appended verbatim.
   Last in the file so it wins over the earlier .trust{display:flex} blocks. */
@media(max-width:600px){.trust{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 1rem}}

/* 6. Footer NAP block — Adam's exact rule, appended verbatim. The block was
   display:flex + flex-wrap from an earlier duplicated block, which is why the phone
   number jumped its own line and the email/hours indented oddly on a phone. .nap exists
   only on the footer's FIRST column (footer.php), so .nap a cannot reach the Services /
   Service Areas columns — those are .fcol a and keep their own treatment. The
   x-apple-data-detectors rule stops iOS restyling the auto-detected phone number. */
.nap{display:block;line-height:1.9}
.nap a{display:inline;padding:0;color:inherit;text-decoration:none}
.nap a:hover{color:#a7d8ef}
.nap a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important}

/* 3. City hub service-link grid — Adam's svc-list.css, appended verbatim.
   His bodies wrap each link in an <li>, so .svc-list li a (0,1,2) outranks the theme's
   earlier .svc-list a (0,1,1). His own 640px breakpoint takes over the 1-column collapse
   that the theme's 760px block used to do for this grid. */
.svc-list{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem}
.svc-list li a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.68rem .85rem;font-weight:600;color:var(--spruce);text-decoration:none}
.svc-list li a:hover{border-color:var(--turf);color:var(--turf-lo)}
@media(max-width:640px){.svc-list{grid-template-columns:1fr}}

/* 2. Gallery lightbox (assets/lightbox.js). Scoped entirely under .cs-lb / the
   .cs-lb-open flag on <html>, so nothing here can reach the gallery grid itself — the
   3-across desktop / 2-across phone layout above is untouched. */
html.cs-lb-open{overflow:hidden}
.gallery .gallery-item a[data-cs-lb]{display:block;cursor:zoom-in}
.cs-lb{position:fixed;inset:0;z-index:1000;background:rgba(9,26,17,.94);display:flex;align-items:center;justify-content:center;padding:56px 16px}
.cs-lb[hidden]{display:none}
.cs-lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:.7rem;max-width:100%;max-height:100%}
.cs-lb-img{max-width:min(1100px,92vw);max-height:78vh;width:auto;height:auto;display:block;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cs-lb.is-loading .cs-lb-img{opacity:.35}
.cs-lb-img{transition:opacity .18s ease}
.cs-lb-cap{font-family:var(--body);font-size:.88rem;color:#cfe0d8;text-align:center;max-width:62ch;line-height:1.45}
.cs-lb-cap[hidden]{display:none}
.cs-lb-counter{position:absolute;top:18px;left:22px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:#9fb6ac}
.cs-lb-close{position:absolute;top:10px;right:14px;width:44px;height:44px;border:0;background:none;color:#e8f1ec;font-size:2rem;line-height:1;cursor:pointer;border-radius:8px}
.cs-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cs-lb-nav[hidden]{display:none}
.cs-lb-prev{left:14px}
.cs-lb-next{right:14px}
.cs-lb-close:hover,.cs-lb-nav:hover{background:rgba(255,255,255,.16)}
.cs-lb-close:focus-visible,.cs-lb-nav:focus-visible{outline:2px solid var(--turf);outline-offset:2px}
@media(max-width:760px){
  .cs-lb{padding:52px 8px}
  .cs-lb-img{max-height:70vh;max-width:96vw}
  .cs-lb-nav{width:46px;height:46px}
  .cs-lb-prev{left:6px}
  .cs-lb-next{right:6px}
}
@media(prefers-reduced-motion:reduce){.cs-lb-img{transition:none}}

/* ===== Review round follow-ups, 7/25 ===== */

/* Local callout sat FLUSH against its heading on the six city hubs (measured: 0px gap —
   the h3 carries margin-bottom:0 and .local carries margin-top:0), so the card read as
   part of the heading instead of a separate block. Scoped to the adjacent-sibling case,
   which is hub-only: on the 99 service pages .local follows a p.lead whose own
   margin-bottom already spaces it, and that case is deliberately left alone. */
h2 + .local, h3 + .local{margin-top:.9rem}

/* Honeypot trap for the quote form (paired with cs_cf7_honeypot_spam in functions.php).
   The field also carries its own inline off-screen style in the CF7 template so it stays
   hidden if the theme is ever swapped; this is the belt-and-braces copy. Off-screen, not
   display:none — some bots skip display:none inputs, which is the whole point of the trap. */
.cs-hp-wrap{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ===== Post-launch punch list, Adam 7/26 ===== */

/* 4. Homepage badge strip stacked five rows on phones — Adam's exact rule, appended verbatim.
   .badgerow is the flex trust strip under the hero; it exists on the homepage (front-page.php)
   and on the 99 service-page bodies, and `.badge` appears nowhere outside it, so the two-column
   grid lands on that strip and nothing else. Last in the file so it wins over the earlier
   duplicated .badgerow{display:flex} blocks. */
@media(max-width:600px){.badgerow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}.badgerow .badge{display:block}}

/* 5c. WCAG AA contrast, from the post-launch PageSpeed accessibility run (Adam, 7/26).
   Lighthouse flagged 19 nodes on the homepage, all from three roots — the fix is three
   colour values, deliberately last in the file so they win over the duplicated blocks above.

   (a) --turf-lo #3c8233 as TEXT: 4.21:1 on the .band background (#eef3ec), 4.39 on paper
       (#f4f7f3), 4.26 on the quote band (#eef5ec) — all under the 4.5 AA floor for normal
       text. This is every .eyebrow label plus the prose links inside the tinted bands.
       #38792f reads the same green and clears it: 4.73 / 4.93 / 4.79.
   (b) White text on the brand green --turf #4a9d3f: 3.39:1 on the hero "Call" button, the
       quote form's submit, and the phone-only bottom call bar. The brand green is UNCHANGED
       for icons, borders, hovers and accents; only the surfaces that carry white text on
       top of it deepen, to #3e8435 (4.61:1). .step .sn and .area.live:hover are the same
       white-on-green pattern and move with them so the greens still match each other.
   (c) The Trustindex review widget's own greys — the review date (#8a8a8a, 3.45:1) and the
       "read more" link (#808080, 3.95:1) on white. Plugin markup we do not control, so it
       takes an override; #717171 is 4.88:1 and reads as the same grey. The "read more" link
       also carries opacity:.5 from the plugin, which halves whatever colour it is given
       (#717171 at .5 over white computes as #b8b8b8, 1.98:1) — measured on the live widget
       after the first pass, so the opacity has to be pinned too or the colour alone does
       nothing. */
:root{--turf-lo:#38792f;--turf-btn:#3e8435}
.btn-primary{background:var(--turf-btn)}
.btn-primary:hover{background:#2f6828}
.callbar .c{background:var(--turf-btn)}
.step .sn{background:var(--turf-btn)}
.area.live:hover{background:var(--turf-btn)}
.ti-widget .ti-date,.ti-review-header .ti-date{color:#717171!important}
.ti-widget .ti-read-more-active,.ti-read-more .ti-read-more-active{color:#717171!important;opacity:1!important}

/* Hub / prose bullet lists sat FLUSH at the content edge — the global `*{padding:0}` reset
   strips a <ul>'s default padding-left and nothing put it back, so disc markers rendered
   outside the text column (Andrew's phone pass 7/26, "Common calls we get in Cary" on
   cary-nc). Direct-child + :not([class]) scoping on purpose: it catches the plain authored
   lists in page bodies and cannot reach .local ul (the check-icon callout, list-style:none
   inside .local), .svc-list, .qbul, .gallery or the nav menu — all of which style their own
   layout and would shift if they picked up an indent. */
.prose > ul:not([class]){padding-left:1.25rem}

/* ===== Adam's live edits, 7/28 — folded in verbatim =====
   He added a third "Schedule" button to the mobile call bar directly in the theme editor and
   wrote these two rules for it. Both are kept exactly as he wrote them. #2176ae is his own
   pick, chosen for WCAG contrast against white text; it measures 4.92:1, which clears AA for
   normal text and sits in line with the other two buttons (.c on --turf-btn #3e8435 = 4.61:1,
   .t on --spruce #15432b = 11.23:1). Do not "harmonise" it to a brand blue without re-running
   that ratio — the obvious candidate, --mist #57a7db, is 2.28:1 and would fail. The .quote
   padding keeps the last field of the quote form clear of the three-button bar on a phone. */
.callbar .q{background:#2176ae;color:#fff}
@media(max-width:760px){.quote{padding-bottom:70px}}