/* broadway-css-build 707f0a5d */
/* self-hosted Google Fonts, latin subset, variable woff2 - broadway L1 2026-09-02 (canon 3: kills the fonts.googleapis.com -> fonts.gstatic.com render-blocking chain) */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-var.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/montserrat-var.woff2) format('woff2');}

/* ============================================================================
   Broadway Tree Care — stylesheet
   Re-branded for Broadway Tree Care 2026-08-18.

   ⚠️ BRAND ASSETS: Broadway has NO logo file and NO brand colours on record —
   nothing in the dossier, nothing in the GBP, no asset drop from the client.
   The palette below is a defensible trade-appropriate choice (deep canopy green
   + warm amber), NOT a sampled brand colour. Per the SSKM pattern the token
   NAMES stay stable, so when a real logo lands, only these values change.
   NEEDS CLIENT: logo file + brand colours.
   ============================================================================ */

:root{
  --green:#14532d;        /* deep canopy green — primary */
  --green-2:#166534;
  --green-dk:#0b3a1f;
  --amber:#d97706;        /* warm accent — CTAs */
  --amber-dk:#b45309;
  --sky:#ecfdf5;          /* tint background */
  --ink:#111827;
  --body:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --white:#fff;
  --wrap:1180px;
  --radius:14px;        /* container/card rung */
  --radius-sm:9px;       /* small chrome rung: inputs, chips, notes, sub-menu items */
  --radius-pill:99px;    /* pill rung */
  --radius-bar:2px;      /* hairline bar rung (nav-toggle) */
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08);
  --shadow-lg:0 12px 40px rgba(16,24,40,.14);
  /* [LaneL5 2026-09-02] the boundary tint for a repeated band: deliberately neither
     transparent nor --sky, so a repeat band can never compute the same background as
     either of its neighbours (canon 204 / 253). */
  --repeat-bg:#f4f6f4;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--body);
  font-size:17px;line-height:1.65;background:var(--white)}
h1,h2,h3,.logo span{font-family:Montserrat,system-ui,sans-serif;color:var(--ink);line-height:1.2;font-weight:800}
h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 .5em;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem);margin:0 0 .7em;letter-spacing:-.015em}
h3{font-size:1.12rem;margin:0 0 .4em;font-weight:700}
p{margin:0 0 1.15em}
a{color:var(--green-2);text-underline-offset:3px}
a:hover{color:var(--amber-dk)}
img,iframe{max-width:100%;height:auto}
.muted{color:var(--muted)}
.lead{font-size:1.15rem;color:var(--ink)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,780px)}
.section{padding:clamp(2.75rem,6vw,4.75rem) 0}
.section-tint{background:var(--sky)}
.kicker{text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;font-weight:700;
  color:var(--green-2);margin:0 0 .55em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--white);padding:.7rem 1.1rem;border-radius:var(--radius-sm)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.ic{width:1.35em;height:1.35em;flex:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:1.5rem;padding:.85rem 0}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--green);flex:none}
.logo span{font-size:1.22rem;font-weight:700;color:var(--green);letter-spacing:-.02em}
.logo b{font-weight:800;color:var(--ink)}
.logo-ic{width:1.85em;height:1.85em;color:var(--green)}
.nav{margin-left:auto}
.nav>ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;align-items:center}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover{color:var(--green-2)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:-1rem;min-width:250px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.5rem;
  list-style:none;margin:.5rem 0 0;display:none;z-index:60}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block;padding:.5rem .75rem;border-radius:var(--radius-sm);font-weight:500}
.sub a:hover{background:var(--sky)}
.btn-call{display:inline-flex;align-items:center;gap:.45rem;background:var(--green);color:var(--white);
  padding:.6rem 1.05rem;border-radius:var(--radius-pill);text-decoration:none;font-weight:700;font-size:.95rem;flex:none}
.btn-call:hover{background:var(--green-2);color:var(--white)}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:var(--radius-bar)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-pill);text-decoration:none;font-weight:700;
  border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit;transition:.15s}
.btn-primary{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-dk);border-color:var(--amber-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--green-dk) 0%,var(--green) 62%,var(--green-2) 100%);
  color:#fff;padding:clamp(2.5rem,6vw,4.5rem) 0}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hero h1{color:#fff}
.hero .kicker{color:#a7f3d0}
.hero-sub{font-size:1.12rem;color:#d1fae5;margin-bottom:1.5rem;max-width:56ch}
/* [LaneC 2026-09-01] canon 245: each trust claim must sit in its OWN visually
   bounded element. Measured live before the fix: .badge-row li computed
   border-top-width 0px, background-color rgba(0,0,0,0), border-radius 0px,
   padding 0px -- four bare text runs on one line, not chips. Now a pill each. */
.badge-row{list-style:none;margin:0 0 1.75rem;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.badge-row li{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:#ecfdf5;
  border:1px solid rgba(236,253,245,.34);background:rgba(255,255,255,.08);
  border-radius:var(--radius-pill);padding:.34rem .8rem}
.badge-row .ic{color:#6ee7b7}
.badge-dark li{color:var(--body)}
.badge-dark .ic{color:var(--green-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn-ghost:hover{background:#fff;color:var(--green)}

/* ---------- forms ---------- */
.lead-form{background:var(--white);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-lg);color:var(--body)}
.lead-form h3{font-size:1.3rem;margin-bottom:.6rem}
.lead-form label{display:block;font-weight:600;font-size:.86rem;color:var(--ink);margin:.85rem 0 .3rem}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--green-2);outline:none;
  box-shadow:0 0 0 3px rgba(22,101,52,.14)}
.lead-form .btn{width:100%;margin-top:1.15rem}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:.84rem;color:var(--muted);margin:.85rem 0 0;text-align:center}

/* ---------- rating strip ---------- */
.rating-strip{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.9rem;
  padding:.6rem .8rem;background:var(--sky);border-radius:var(--radius-sm);margin-bottom:.4rem}
.rating-strip strong{font-size:1.05rem;color:var(--ink)}
.stars{display:inline-flex;gap:1px}
.star-on{width:1em;height:1em;color:#f59e0b;fill:#f59e0b}

/* ---------- answer block (Page SOP Appendix 2) ---------- */
.answer-block{padding:clamp(1.75rem,3.5vw,2.5rem) 0 0}
.answer-card{border:1px solid var(--line);border-left:5px solid var(--green);border-radius:var(--radius);
  padding:1.5rem 1.7rem;background:var(--white);box-shadow:var(--shadow)}
.answer-lead{font-size:1.08rem;color:var(--ink);font-weight:500;margin-bottom:1.1rem}
.answer-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin:0 0 1rem}
.answer-facts div{border-top:1px solid var(--line);padding-top:.6rem}
.answer-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--green-2)}
.answer-facts dd{margin:.25rem 0 0;font-size:.93rem}
.answer-qs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.answer-qs li{background:var(--sky);border-radius:var(--radius-pill);padding:.35rem .85rem;font-size:.85rem;font-weight:600;color:var(--green-dk)}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:1.15rem}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.svc-card,.area-card{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--body);
  box-shadow:var(--shadow);transition:.18s}
.svc-card:hover,.area-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--green-2)}
.svc-card .ic,.area-card .ic{width:2.1em;height:2.1em;color:var(--green)}
.svc-card p,.area-card p{font-size:.92rem;margin:0}
.svc-card.compact{padding:1.1rem;gap:.35rem}
.link-more{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--green-2);font-size:.88rem}
.benefit-card{padding:1.5rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.benefit-card .ic{color:var(--green-2);width:1.7em;height:1.7em;margin-bottom:.5rem}
.benefit-card p{font-size:.94rem;margin:0}

/* ---------- lists ---------- */
.check-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem}
.check-list li{display:flex;gap:.65rem;align-items:flex-start}
.check-list .ic{color:var(--green-2);margin-top:.22em}
.step-list{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.step-list li{display:flex;gap:.9rem;align-items:flex-start;background:var(--white);
  padding:1.35rem;border-radius:var(--radius);border:1px solid var(--line)}
.step-n{flex:none;width:2.1rem;height:2.1rem;border-radius:var(--radius-pill);background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem}
.step-list p{font-size:.92rem;margin:0}

/* ---------- access / directions block ---------- */
.access-block{border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;background:var(--white);box-shadow:var(--shadow)}
.route-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.route-list li{display:flex;gap:.7rem;align-items:flex-start}
.route-list .ic{color:var(--amber);margin-top:.15em}
.landmarks{font-size:.95rem;color:var(--body)}
.access-note{display:flex;gap:.6rem;align-items:flex-start;background:var(--sky);padding:.9rem 1.1rem;
  border-radius:var(--radius-sm);font-size:.93rem;margin:0}
.access-note .ic{color:var(--green-2);margin-top:.15em;flex:none}

/* ---------- reviews ---------- */
.review-card{margin:0;padding:1.5rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem}
.review-card p{font-size:.95rem;margin:0;color:var(--ink)}
.review-card cite{font-style:normal;font-weight:700;color:var(--ink);font-size:.92rem;margin-top:auto;padding-top:.6rem}
.review-card cite small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.reviews-cta{text-align:center;margin:1.75rem 0 0}
.entity-row{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem;padding:0;margin:0}
.entity-row li a{display:inline-block;padding:.5rem 1rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-pill);text-decoration:none;font-weight:600;font-size:.9rem}

/* ---------- maps / media ---------- */
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.map-embed iframe{width:100%;height:340px;border:0;display:block}
.media{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);line-height:0}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.source-note{font-size:.86rem;color:var(--muted);text-align:left;border-top:1px solid var(--line);
  border-left:3px solid var(--line);padding:.75rem 0 0 .9rem;margin-top:1.1rem}

/* ---------- faq ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.7rem;background:var(--white)}
.faq summary{cursor:pointer;padding:1.05rem 1.25rem;font-weight:700;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--green-2);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 1.25rem 1.15rem}
.faq p{margin:0;font-size:.96rem}

/* ---------- page head / crumbs / cta band ---------- */
.page-head{background:var(--sky);padding:clamp(2.25rem,5vw,3.5rem) 0;border-bottom:1px solid var(--line)}
.page-head .hero-sub{color:var(--body);margin:0;max-width:62ch}
.crumbs{padding:1rem 0;font-size:.86rem;color:var(--muted)}
.crumbs a{color:var(--green-2)}
.cta-band{background:var(--green-dk);color:#fff;padding:clamp(2.25rem,5vw,3.25rem) 0}
.cta-in{display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center;justify-content:space-between}
.cta-band h2{color:#fff;margin-bottom:.35em}
.cta-band p{color:#a7f3d0;margin:0;max-width:52ch}
.cta-actions{display:flex;gap:.85rem;flex-wrap:wrap}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn-ghost:hover{background:#fff;color:var(--green-dk)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.contact-list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:1.35rem}
.contact-list li{display:flex;gap:.85rem;align-items:flex-start}
.contact-list .ic{color:var(--green);margin-top:.2em;width:1.6em;height:1.6em}
.contact-list h3{margin-bottom:.15em;font-size:1rem}
.contact-list p{margin:0;font-size:.94rem}
.contact-list a{font-weight:700}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#d1d5db;padding:clamp(2.5rem,5vw,3.5rem) 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.25rem}
.site-footer h3{color:#fff;font-size:.95rem;margin-bottom:.85em;text-transform:uppercase;letter-spacing:.08em}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-footer a{color:#d1d5db;text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .logo span,.site-footer .logo b{color:#fff}
.site-footer .logo-ic{color:#6ee7b7}
.site-footer .muted{color:#9ca3af;font-size:.9rem}
.nap{margin-top:1.1rem!important}
.nap li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}
.nap .ic{color:#6ee7b7;margin-top:.15em;flex:none}
.gbp-listing{margin-top:1.35rem}
.gbp-listing a{display:flex;flex-direction:column;gap:.3rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:.9rem 1rem;text-decoration:none}
.gbp-listing strong{color:#fff;font-size:.95rem}
.gbp-listing .link-more{color:#6ee7b7;padding-top:.2rem}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding:1.35rem 0;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-size:.85rem}
.footer-bar p{margin:0}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-in,.contact-grid,.map-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  /* backdrop-filter on the header makes it the containing block for the fixed
     nav overlay — it MUST be removed at this breakpoint (fork checklist F). */
  .site-header{backdrop-filter:none;background:var(--white)}
  .nav-toggle{display:flex;order:3}
  .nav{position:fixed;inset:64px 0 auto;background:var(--white);border-bottom:1px solid var(--line);
    display:none;margin:0;padding:1rem 1.25rem 1.5rem;max-height:calc(100vh - 64px);overflow:auto;z-index:70}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;gap:.25rem}
  .nav>ul>li>a{display:block;padding:.7rem .25rem;border-bottom:1px solid var(--line)}
  .sub{position:static;display:block;box-shadow:none;border:0;padding:.25rem 0 .5rem 1rem;margin:0}
  .btn-call span{display:none}
  .btn-call{padding:.6rem}
}
@media(max-width:560px){
  /* [LaneC 2026-09-01] HORIZONTAL OVERFLOW AT 375. Measured live on
     broadwaytreecare.biz: documentElement.scrollWidth 386 vs clientWidth 375 on
     EVERY page. Cause: .header-in is a flex row (logo 234px + btn-call 45px +
     nav-toggle 40px = 319px) with gap:1.5rem (24px x 2 = 48px) inside a 335px
     .wrap -- .nav-toggle rendered at right:386. Narrowing the gap at this
     breakpoint returns scrollWidth to 375 and nav-toggle right to 358.
     Re-measured after deploy on the live domain. */
  .header-in{gap:.6rem}
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
  .map-embed iframe{height:260px}
}

/* form heading — h2 for correct document outline, sized as a widget title */
.form-title{font-size:1.3rem;margin-bottom:.6rem}

/* [J3][J5] 2026-08-29 Jeff site scan: "Why Property Owners Here Call Us" (676
   words) and "How We Price and Schedule Work" (788 words) were single columns
   of <p> at the 780px narrow measure -- 1497px and 1815px tall respectively.
   Flowing them two-up at the wide wrap halves the scroll WITHOUT cutting a
   single word (the copy is 7 distinct points, it reads fine in columns).
   Reading order is preserved: CSS columns fill column 1 top-to-bottom first. */
.prose-2col{columns:2;column-gap:3rem;max-width:1080px}
.prose-2col p{break-inside:avoid;margin:0 0 1.05em}
.prose-2col p:last-child{margin-bottom:0}
@media (max-width:820px){.prose-2col{columns:1}}

/* [J1] 2026-08-29 Jeff: "form is too long in homepage and service pages,
   doesnt fit the first load reduce height a bit". Measured: form bottom sat at
   950px against a 900px viewport, so the submit button was below the fold on a
   1440x900 screen. This trims ~60px of padding/label/textarea slack -- no field
   is removed and none is made smaller than a comfortable tap target. */
.lead-form{padding:1.25rem 1.3rem}
.lead-form label{margin:.55rem 0 .22rem}
.lead-form input,.lead-form select,.lead-form textarea{padding:.58rem .8rem}
.lead-form textarea{min-height:84px;height:84px}
.lead-form .btn{margin-top:.8rem}
.form-note{margin:.6rem 0 0;font-size:.8rem}

/* [J4] 2026-08-29 Jeff: "about us, service area hub, and service area page
   content at the beginning is too much, include images, reviews, and CTA's".
   Both pages opened with ~970 words as one narrow column (~2200px tall) and
   ZERO calls to action. Two-up flow + a real CTA under the prose. Reviews
   already render further down both pages (reviewsSection). Images stay absent
   on purpose: photos.js is empty by design and the rule on this build is no
   stock and no AI job photos -- see the GBP media export in the dossier. */
.inline-cta{margin-top:1.6rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.inline-cta .btn{margin:0}


/* ---------- motion ---------- */
/* [LaneC 2026-09-01] canon 251: this stylesheet shipped with ZERO @keyframes
   (grep -c '@keyframes' /assets/style.css = 0, read live 2026-09-01) -- the
   mechanical signature of a static build. This is the one motion the site has:
   the mobile nav panel easing in when the visitor opens it. It is triggered by
   a click, never by scroll or an observer, so no content is ever gated behind
   an animation frame (canon 246). It animates opacity and transform only, so it
   contributes nothing to CLS (canon 249). Fully short-circuited under
   prefers-reduced-motion (canon 247) and under print (canon 248). */
@keyframes bw-nav-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav.open{animation:bw-nav-in .18s ease-out both}
@media (prefers-reduced-motion:reduce){
  .nav.open{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .nav.open{animation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;opacity:1!important}
}

/* [LaneB 2026-09-01] canon 311/313 semantic-triple entity block + canon 301
   visible last-updated stamp. Appended block: no existing rule is altered. */
.entity-facts{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(11,58,31,.14)}
.entity-facts p{margin:0 0 .45rem;font-size:.95rem;line-height:1.55;color:var(--ink-2,#3d4a42)}
.entity-facts p:last-child{margin-bottom:0}
.page-updated{margin:1.5rem 0 0;font-size:.85rem;color:var(--ink-2,#3d4a42);opacity:.8}
/* [LaneB 2026-09-01] canon 297/244: the comparison table on the Tree Removal x town
   pages shipped with a .cmp-table class that resolved to NO rule in any stylesheet. */
.cmp-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.cmp-table th,.cmp-table td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid rgba(11,58,31,.14);vertical-align:top}
.cmp-table thead th{background:rgba(11,58,31,.06);font-weight:600}
.cmp-table tbody tr:last-child td{border-bottom:0}
@media(max-width:560px){.cmp-table{display:block;overflow-x:auto}}
/* [LaneB 2026-09-01] canon 107: footer GBP embed sits under the NAP, kept short so it
   does not push the footer links off a phone screen. */
.map-embed-foot{margin-top:1rem;max-width:420px}
.map-embed-foot iframe{height:200px}

/* [LaneL4 2026-09-02] canon 297 / 244: the comparison-table band added to the 18
   money pages that carried none. .table-scroll and .is-current are declared here
   so no class token on the page resolves to zero rules. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-table th[scope="row"]{font-weight:600;white-space:normal}
.cmp-table tbody tr.is-current{background:rgba(11,58,31,.05)}
.cmp-table tbody tr.is-current th[scope="row"]{box-shadow:inset 3px 0 0 var(--brand,#0b3a1f)}

/* ============================================================================
   [LaneL5 2026-09-02] structure + visual/conversion pass. Appended only:
   no existing rule above is altered. Every class declared here is a class the
   generator already emits, so no token on any page resolves to zero rules
   (canon 223 / 244).
   ============================================================================ */

/* canon 170: full-width social-proof strip, header close -> hero open. */
.proof-strip{background:var(--green-dk);border-bottom:1px solid rgba(255,255,255,.12)}
.proof-strip-in{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem 0;text-decoration:none;color:#ecfdf5;font-size:.94rem}
.proof-strip-in:hover{color:#fff}
.proof-strip-in strong{color:#fff;font-size:1.05rem}
.proof-strip .stars{display:inline-flex;color:#fbbf24}
.proof-strip .star-on{width:1.05em;height:1.05em}
.proof-strip-txt{white-space:nowrap}
.proof-strip-cta{margin-left:auto;font-weight:600;color:#a7f3d0}
@media(max-width:560px){.proof-strip-cta{margin-left:0}}

/* canon 204 / 253: markTintRuns() stamps the SECOND band of any same-tint pair
   with data-tint-repeat="1". Until now nothing in the stylesheet painted it, so
   adjacent same-tint bands still merged into one slab. This is the boundary:
   a hairline top border AND a deeper top padding than the alternating bands. */
section[data-tint-repeat="1"]{border-top:1px solid var(--line);
  padding-top:calc(clamp(2.75rem,6vw,4.75rem) + 1.5rem)}
/* .answer-block is a band in its own right (it declares data-tint) but carries no
   .section class, so the boundary rule is written on the ATTRIBUTE, not the class. */
.answer-block[data-tint-repeat="1"]{background:var(--sky)}
/* A repeated band must differ from its neighbour in BACKGROUND too, not only in the
   hairline: measured live 2026-09-02, a bordered-but-transparent repeat band still
   computed the same background-color as the plain band under it. */
section[data-tint-repeat="1"]:not(.section-tint):not(.hero):not(.cta-band){background:var(--repeat-bg)}
.section-tint[data-tint-repeat="1"]{background:var(--white);border-top-color:#cfe8da}
.hero[data-tint-repeat="1"],.cta-band[data-tint-repeat="1"]{border-top:1px solid rgba(255,255,255,.16)}

/* canon 261: closing-band lead form on the page types that carry no hero form. */
.closing-form-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.closing-form-copy h2{margin-bottom:.5em}
.closing-form-copy .btn{margin-top:.4rem}
@media(max-width:860px){.closing-form-in{grid-template-columns:1fr}}

/* canon 226: sticky mobile tap-to-call. Phone only - it would cover desktop copy
   for no gain, and the header already carries a call button at that width. */
.sticky-call{display:none}
@media(max-width:760px){
  .sticky-call{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
    background:rgba(11,58,31,.96);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.14)}
  .sticky-call .btn{display:flex;width:100%;justify-content:center;margin:0}
  body{padding-bottom:4.5rem}
}

/* canon 190 / 265: directions block as CARDS in a multi-column grid. */
.dir-grid{margin-top:1.25rem}
.dir-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem;box-shadow:var(--shadow)}
.dir-card h3{margin-bottom:.6rem}
.dir-field{margin:0 0 .7rem;font-size:.95rem}
.dir-label{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;
  font-weight:700;color:var(--green-2);margin-bottom:.15rem}
.dir-more{margin:0;font-weight:600}

/* canon 187 / 188 / 189: map figures and the paired neighbour maps. */
.map-fig{margin:0}
.map-fig figcaption{margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.map-pair{margin-top:1.25rem}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* canon 223 / 244: tokens the generator emits that had no rule of their own. */
.hero-copy{min-width:0}
.hero-form{min-width:0}
.logo-foot{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.next-step{margin-top:1.1rem;padding:1rem 1.15rem;background:var(--sky);
  border-left:4px solid var(--green);border-radius:var(--radius-sm)}

/* canon 244: .reviews is the review band's own hook. It had no rule of its own -
   every review style hung off .review-card - so the token resolved to nothing. */
.reviews .review-card{height:100%}
.reviews h2{margin-bottom:.8em}

/* canon 244: two more tokens the generator emits that resolved to no rule -
   the closing-form band's own hook and the contact page's info column. */
.closing-form{border-top:1px solid var(--line)}
.contact-info{min-width:0}
.contact-info .rating-strip{margin-top:1rem}

/* [LaneL1 2026-09-02] canon "Mobile rendering clean on real viewport" - tap targets.
   Measured live at 375px before this rule: footer nav links 18px tall, breadcrumb links
   17px, the rating-strip review link 18px, the form-note phone link 16px. All four are
   discrete navigation/action controls, so each now clears a 24px minimum target.
   Inline links inside body prose are deliberately untouched - they inherit the paragraph
   line box by design and padding them would break the measure. Marker: LaneL1-tap24 */
@media (max-width:560px){
  .site-footer ul a,
  .crumbs a,
  .form-note a,
  .rating-strip a,
  dd a,
  .table-scroll th a,
  a[href^="tel:"]:not(.btn){display:inline-flex;align-items:center;min-height:24px}
  .site-footer ul{gap:.7rem}
}

/* [L6 2026-09-02 canon 361] provenance line under the directions grid */
.dir-note{font-size:.85rem;opacity:.75;margin:0 0 .9rem}