*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:var(--base);line-height:var(--lead);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:var(--track);font-weight:var(--head-weight)}
h1{font-size:clamp(2.2rem,4.4vw,var(--h1));line-height:1.03}
h2{font-size:clamp(1.7rem,3.6vw,var(--h2));line-height:1.14}
h3{font-size:var(--h3);font-weight:600;line-height:1.3}
p{margin:0}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blaze);outline-offset:3px;border-radius:3px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 26px}
.prose{max-width:var(--prose)}
.label{font-family:var(--display);font-weight:600;font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bark)}
p.muted{color:var(--soft)}

/* ---------- brand lockup ---------- */
.lock{display:flex;align-items:center;gap:calc(var(--u)*.46);text-decoration:none;font-family:var(--display);flex:0 0 auto}
.lock .mk{height:calc(var(--u)*var(--treeH,2.05));width:auto;display:block;flex:0 0 auto;margin-top:calc(var(--u)*var(--treeShift,0))}
.words{display:flex;flex-direction:column;gap:calc(var(--u)*.10)}
.wm{height:calc(var(--u)*var(--wmH,1.91));width:auto;display:block;flex:0 0 auto;overflow:visible}
.wm1{font-family:var(--display);font-weight:700;font-size:128px;fill:var(--blue);letter-spacing:normal}
.wmr{fill:var(--blue-lt);opacity:.4}
.wm2{font-family:var(--display);font-weight:700;font-size:128px;fill:var(--blue-lt);letter-spacing:normal}
.l1{font-weight:700;font-size:calc(var(--u)*1);letter-spacing:.015em;line-height:1;text-transform:uppercase;color:var(--blue)}
.l2{font-weight:700;font-size:calc(var(--u)*var(--l2s,.52));letter-spacing:var(--l2ls,.19em);line-height:1;text-transform:uppercase;color:var(--blue-lt);white-space:nowrap;margin-right:calc(-1 * var(--l2ls,.19em));text-align:center;position:relative;left:calc(-.5 * var(--l2ls,.19em))}
.rule{height:2px;background:var(--blue-lt);opacity:.4;border-radius:2px}
.lock.hdr{--u:40px;--l2s:.6595;--l2ls:.20em;--treeH:1.618;--treeShift:.109}
@media (max-width:1280px){.lock.hdr{--u:33px}}
@media (max-width:1024px){.lock.hdr{--u:26px}}
@media (max-width:700px){.lock.hdr{--u:19px}}
/* strapline beside the logo */
.strap{font-family:var(--body);font-size:.95rem;font-weight:600;color:#8D8F7C;letter-spacing:.03em;line-height:1.34;max-width:26ch;margin-left:24px;padding-left:24px;border-left:2px solid var(--rule);flex:0 1 auto;min-width:0}
/* The review button takes room the strapline used to spread into. Below 1580 it
   steps out entirely — letting it wrap to a third line was making the whole
   header 37px taller than it was before the button existed. */
@media (max-width:1180px){.strap{display:none}}
/* The header shell is width-capped, so there is no spare room at any screen
   size: with the review button in, the strapline can only wrap to more lines
   and push the bar taller. When the button is on, the strapline steps out. */
.top.has-rev .strap{display:none}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:100;background:var(--nav-bg);border-bottom:2px solid var(--rule)}
.top-in{max-width:var(--rail);margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:18px}
.top-cta{display:flex;gap:10px;align-items:stretch;margin-left:auto;--btnh:44px}
/* Every control in the bar is the same box. Each one used to size itself from
   its own padding and font, which is why they came out 40, 46.7 and 50.9px
   tall and sat on three different baselines. */
.top-cta > *{height:var(--btnh);padding-top:0;padding-bottom:0;align-self:center}
/* One shape for every outline control in the bar. They had drifted apart:
   black border against grey, 5px corners against 8px, and the display font in
   capitals beside the body font in sentence case. Same box, same type, same
   capitals, same hover — only the orange call button stands apart, because it
   is the one thing we want people to press. */
.top-cta .quote-link,
.top-cta .rev-mini,
.top-cta .fb-mini{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  gap:8px;padding:0 15px;white-space:nowrap;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:.86rem;line-height:1;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--dark);background:transparent;
  border:2px solid var(--dark);border-radius:var(--btn-radius);
  transition:background .16s ease,color .16s ease,transform .16s cubic-bezier(.34,1.4,.64,1);
}
.top-cta .quote-link:hover,
.top-cta .rev-mini:hover,
.top-cta .fb-mini:hover{background:var(--dark);color:var(--cream);transform:translateY(-1px)}
/* ...except Facebook, which turns Facebook blue rather than black. */
.top-cta .fb-mini:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.top-cta .fb-mini{width:var(--btnh);padding:0}
.call-btn{display:inline-flex;align-items:center;box-sizing:border-box;gap:8px;background:var(--blaze);color:var(--btn-text);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.02rem;padding:12px 19px;border-radius:5px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.22)}
.call-btn:hover{background:var(--blaze-lt)}
@media (max-width:820px){.top-cta .quote-link{padding:0 11px;font-size:.74rem}.call-btn{padding:11px 14px;font-size:.92rem}.call-btn .num{display:none}}

/* ---------- nav with drop-downs ---------- */
nav.mainnav{border-top:1px solid var(--rule);background:var(--nav-bg)}
.nav-in{max-width:var(--rail);margin:0 auto;padding:0 26px;display:flex;gap:2px;align-items:stretch;flex-wrap:wrap}
.navitem{position:relative}
.navlink{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--nav-text);text-decoration:none;padding:14px 16px;white-space:nowrap;border-bottom:3px solid transparent}
.navlink:hover,.navitem.open>.navlink,.navlink[aria-current]{color:var(--green-dk);border-bottom-color:var(--green)}
.caret{border:0;background:transparent;padding:4px;margin-left:-8px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;align-self:center}
.caret svg{transition:transform .16s}
.navitem.open .caret svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:262px;z-index:120;
  background:var(--dark);border-radius:12px;padding:12px 0 14px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55);display:none;
  max-height:min(70vh,520px);overflow-y:auto;
}
.drop::before{content:"";position:absolute;top:-7px;left:26px;width:14px;height:14px;background:var(--dark);transform:rotate(45deg);border-radius:3px}
.navitem.open .drop{display:block}
.drop a{display:flex;gap:9px;align-items:baseline;white-space:nowrap;color:#D8DCCE;text-decoration:none;font-size:.97rem;padding:8px 22px;line-height:1.35;border-radius:6px;margin:0 8px}
.drop a::before{content:"–";color:#7F9070;flex:0 0 auto}
.drop a:hover{background:rgba(255,255,255,.10);color:#fff}
.drop a:hover::before{color:var(--green-pale)}
.drop .dhead{color:#8FA37F;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 20px 5px}
.drop .dall{border-top:1px solid rgba(255,255,255,.14);margin:9px 8px 0;padding-top:13px;color:#fff;font-weight:600;border-radius:0 0 6px 6px}
.drop .dall::before{content:"";display:none}
.drop.wide{min-width:470px}
.dcols{columns:2;column-gap:0}
.dcols a{break-inside:avoid}

/* ---------- phone / small tablet: real menu, no sideways scrolling ---------- */
.navtoggle{display:none;align-items:center;gap:9px;background:transparent;border:2px solid var(--dark);
  color:var(--dark);font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.07em;
  text-transform:uppercase;padding:10px 14px;border-radius:5px;cursor:pointer;min-height:44px}
.navtoggle .bars{position:relative;width:18px;height:13px;flex:0 0 auto}
.navtoggle .bars i{position:absolute;left:0;right:0;height:2.4px;background:currentColor;border-radius:2px;transition:transform .18s,opacity .18s}
.navtoggle .bars i:nth-child(1){top:0}
.navtoggle .bars i:nth-child(2){top:5.3px}
.navtoggle .bars i:nth-child(3){top:10.6px}
header.top.navopen .navtoggle{background:var(--dark);color:var(--cream)}
header.top.navopen .bars i:nth-child(1){transform:translateY(5.3px) rotate(45deg)}
header.top.navopen .bars i:nth-child(2){opacity:0}
header.top.navopen .bars i:nth-child(3){transform:translateY(-5.3px) rotate(-45deg)}
.nav-quote{display:none}

@media (max-width:900px){
  .navtoggle{display:inline-flex}
  nav.mainnav{display:none}
  header.top.navopen nav.mainnav{display:block;border-top:2px solid var(--rule)}
  .nav-in{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:8px 18px 18px;
    max-height:calc(100dvh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .nav-quote{display:flex;justify-content:center;background:var(--blaze);color:#fff;text-decoration:none;
    font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
    padding:15px;border-radius:6px;margin:6px 0 12px;min-height:48px;align-items:center}
  .navitem{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--rule)}
  .navitem:last-of-type{border-bottom:0}
  .navlink{flex:1 1 auto;padding:16px 4px;font-size:1.08rem;border-bottom:0;min-height:52px}
  .navlink:hover,.navitem.open>.navlink,.navlink[aria-current]{border-bottom-color:transparent}
  .caret{margin:0;padding:14px;min-width:48px;min-height:48px;justify-content:center;
    border-radius:6px;background:var(--cream-2)}
  .drop{position:static;display:none;width:100%;flex:1 0 100%;min-width:0;max-height:none;
    margin:0 0 12px;border-radius:10px;box-shadow:none;padding:10px 0 12px}
  .drop::before{display:none}
  .navitem.open .drop{display:block}
  .drop a{white-space:normal;font-size:1.02rem;padding:12px 18px;min-height:46px;align-items:center}
  .drop .dhead{padding:8px 18px 6px}
  .drop.wide{min-width:0}
  .dcols{columns:1}
  .drop a.town{display:none}          /* full town list lives on the Service Area page */
  /* On a phone the bar is the wordmark, the call button and the menu. These
     three have to be written as .top-cta X, not X: the block that makes them
     all one shape up above is .top-cta X too, and the more specific rule
     wins. Written plainly they lost, every one of them stayed on screen, and
     the header ran 300px wider than the phone. */
  .top-cta .quote-link{display:none}
  .top-cta .rev-mini{display:none}
  .top-cta .fb-mini{display:none}
}
@media (max-width:420px){
  .top-in{gap:10px;padding:10px 16px}
  .navtoggle{padding:10px;font-size:0;gap:0;letter-spacing:0}
  .navtoggle .bars{width:20px;height:14px}
}
/* The smallest phones still sold are 320px across. The wordmark is set not to
   shrink — a name that squashes looks wrong — so at that width it, the call
   button and the menu came to 340px and the page scrolled sideways. Measured
   at 320: the name fits at 18px and no larger, with the bar tightened up. One
   size smaller again leaves a little air. */
@media (max-width:360px){
  .top-in{gap:8px;padding:10px 10px}
  .top-cta{gap:6px}
  .lock.hdr{--u:17px}
  .navtoggle{padding:9px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--hero-bg);overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0 0 0 24%;z-index:0}
/* The picture is wider and taller than the space it sits in, so something is
   always cropped off. --heroX / --heroY choose WHICH part stays: 0% is the
   left or top edge, 100% the right or bottom, 50% dead centre. Set from the
   editor, because only the owner knows what matters in the shot. */
.hero-photo img,.hcar .hslide{object-position:var(--heroX,50%) var(--heroY,50%)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* carousel: every slide stacked, one shown. Each effect changes only how the
   incoming slide arrives, so the markup stays identical between them. */
.hcar .hslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;z-index:0}
.hcar .hslide.on{opacity:1;visibility:visible;z-index:2}
.hcar .hslide.was{visibility:visible;z-index:1}
.hcar-fade .hslide{transition:opacity .85s ease-in-out,visibility 0s linear .85s}
.hcar-fade .hslide.on{transition:opacity .85s ease-in-out,visibility 0s}
.hcar-slide .hslide{transform:translateX(100%);
  transition:transform .7s cubic-bezier(.5,.05,.2,1),opacity 0s,visibility 0s linear .7s}
.hcar-slide .hslide.on{transform:translateX(0);opacity:1;
  transition:transform .7s cubic-bezier(.5,.05,.2,1),visibility 0s}
.hcar-slide .hslide.was{opacity:1;transform:translateX(-100%);
  transition:transform .7s cubic-bezier(.5,.05,.2,1)}
.hcar-cut .hslide{transition:none}
/* A shown slide is lifted above the rest of the stack, which also put it above
   the ::after wash that feathers the photo into the cream behind the headline.
   Lift the wash higher again so the carousel keeps the soft left edge a single
   hero photo has. */
.hero-photo.hcar::after{z-index:3}
/* The dots live OUTSIDE the picture. Inside it they were sealed into the
   photo's own stacking context, which parked them under the bottom fade and
   under the headline layer — visible, but impossible to click. */
.hdots{position:absolute;left:30%;right:0;bottom:16px;z-index:6;display:flex;
  justify-content:center;gap:8px;pointer-events:auto}
/* The headline layer is stretched over the whole hero, so the mouse never
   reached the picture and hovering it did not pause the rotation. Let the
   empty parts of that layer fall through; the words and buttons keep theirs. */
.hero .shell{pointer-events:none}
.hero .hero-copy > *{pointer-events:auto}
.hdot{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);
  background:rgba(0,0,0,.25);cursor:pointer;transition:transform .18s,background .18s}
.hdot.on{background:#fff;transform:scale(1.25)}
.hdot:hover{background:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){
  .hcar .hslide{transition:none!important}
}
/* The cream wash that lets the headline sit on a plain background. It used to
   finish at a fixed 52% across the picture, which on some shots buried the
   part worth looking at. --heroFade moves where it finishes; the steps in
   between keep their spacing by riding on the same number. */
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,
    var(--cream) 0%,
    var(--cream)              calc(var(--heroFade,52%) * .423),
    rgba(246,242,230,.86)     calc(var(--heroFade,52%) * .577),
    rgba(246,242,230,.55)     calc(var(--heroFade,52%) * .731),
    rgba(246,242,230,.22)     calc(var(--heroFade,52%) * .885),
    rgba(246,242,230,0)       var(--heroFade,52%));}
.hero-photo.blank{background:linear-gradient(150deg,var(--green-wash),var(--cream-3) 60%,var(--cream-2));display:flex;align-items:center;justify-content:center}
.hero-photo.blank span{font-family:var(--display);color:var(--mute);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:20px;max-width:22ch}
.hero-fade-b{position:absolute;left:0;right:0;bottom:0;height:var(--heroFadeB,90px);z-index:1;
  pointer-events:none;background:linear-gradient(to bottom, rgba(246,242,230,0), var(--cream))}
.hero .shell{position:relative;z-index:2;max-width:var(--rail)}
/* tightened so the mulching strip lands inside the first screenful */
.hero-grid{display:grid;grid-template-columns:1fr;min-height:min(54vh,455px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:18px;padding:44px 0 54px;max-width:min(40vw,545px)}
.hero-copy h1{font-size:clamp(2.3rem,4.7vw,3.7rem);color:var(--hero-title)}
/* short laptop screens: tighter copy, so it still sits comfortably inside a
   hero that the rule below has sized to the screen */
@media (min-width:901px) and (max-height:820px){
  .hero-copy{padding:18px 0 22px;gap:12px}
  .hero-copy h1{font-size:clamp(2rem,3.5vw,2.75rem)}
  .hero-badges{padding-top:8px}
}
/* The mulching strip should finish exactly at the bottom of the first screen.
   Awkwardly, the strip is one wide picture, so its HEIGHT follows the window's
   WIDTH, while the fold follows the window's HEIGHT. The hero takes up the
   difference between the two.

   Measured across 1280 / 1366 / 1440 / 1920: the strip always occupies 12.1%
   of the window's width in vertical space once its negative top margin is
   counted. So:  hero = screen height − header − 12.1% of screen width.

   The floor stops a very short window from crushing the words; the ceiling
   stops a very tall one from turning the hero into a poster. */
@media (min-width:901px){
  .hero{--hdrH:161px}
  .hero-grid{min-height:clamp(340px, calc(100vh - var(--hdrH) - 12.1vw), 900px)}
}
@media (min-width:901px) and (max-width:1280px){ .hero{--hdrH:148px} }
.hero-sub{font-size:1.24rem;color:var(--hero-text);line-height:1.55;max-width:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 20px;padding-top:16px;font-size:1rem;font-weight:600;color:var(--soft)}
.hero-badges span{display:inline-flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:34px 0 44px;max-width:none}
  .hero-photo{position:relative;inset:auto;height:280px;order:-1;margin:0 -26px}
  .hero-photo::after{background:linear-gradient(to bottom, rgba(246,242,230,0) 40%, var(--cream) 100%)}
  .hero-fade-b{display:none}
  /* the picture runs across the top of the hero on a phone, so the dots
     follow it up there instead of sitting at the foot of the whole block */
  .hdots{left:0;bottom:auto;top:246px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.08rem;padding:15px 26px;border-radius:var(--btn-radius);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-blaze{background:var(--blaze);color:var(--btn-text);box-shadow:0 3px 0 rgba(0,0,0,.22)}
.btn-blaze:hover{background:var(--blaze-lt)}
.btn-dark{border-color:var(--dark);color:var(--dark);background:transparent}
.btn-dark:hover{background:var(--dark);color:var(--cream)}
.btn-green{background:var(--green-dk);color:#fff}
.btn-green:hover{background:#26492D}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- sections ---------- */
section{padding:62px 0}
.sec-head{display:flex;flex-direction:column;gap:11px;margin-bottom:30px;max-width:var(--prose)}
.sec-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.alt{background:var(--cream-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.deep{background:var(--dark);color:#DDE3D3}
.deep h2,.deep h3{color:#fff}.deep .label{color:var(--green-pale)}.deep p{color:#B5BFA8}
.stack{display:flex;flex-direction:column;gap:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}
.card{background:var(--surface);border:1.5px solid var(--dark);border-radius:7px;padding:23px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:border-color .13s,transform .13s}
.alt .card{background:var(--cream)}
a.card:hover{border-color:var(--green-dk);background:var(--green-wash);transform:translateY(-2px)}
.card h3{color:var(--green-dk)}
.card p{font-size:.95rem;color:var(--soft)}
.card .more{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--green-dk);margin-top:auto;padding-top:6px}
.explain{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media (max-width:860px){.explain{grid-template-columns:1fr;gap:28px}}
.pull{background:var(--green-wash);border-left:4px solid var(--green);padding:24px 26px;border-radius:0 5px 5px 0;display:flex;flex-direction:column;gap:12px}
.pull h3{color:var(--green-dk)}
.pull ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:8px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;counter-reset:s}
.stepx{display:flex;flex-direction:column;gap:10px;position:relative;padding-top:52px}
.stepx::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;font-family:var(--display);font-weight:700;font-size:1.35rem;width:42px;height:42px;border-radius:50%;background:var(--green-dk);color:#fff;display:flex;align-items:center;justify-content:center}
.stepx p{color:var(--soft);font-size:.97rem}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px 36px}
.why>div{display:flex;gap:13px;align-items:flex-start}
.why>div>div{display:block;min-width:0}
.why h4{font-family:var(--display);font-size:1.05rem;font-weight:600;margin:0 0 3px;line-height:1.3}
.why p{font-size:.95rem;color:var(--soft)}
.check{flex:0 0 auto;color:var(--green);margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:12px}
.tile{background:var(--surface);border:1.5px solid var(--dark);border-radius:7px;padding:16px 17px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;cursor:pointer;text-align:left;font:inherit;transition:border-color .13s,transform .13s}
.alt .tile{background:var(--cream)}
.tile:hover{border-color:var(--green-dk);background:var(--green-wash);transform:translateY(-2px)}
.tile .tn{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--green-dk);display:flex;align-items:center;gap:7px}
.tile .tc{font-size:.83rem;color:var(--mute)}
.tile .tk{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-pale);padding:2px 6px;border-radius:3px}

/* ---------- mulching strip ---------- */
/* positioned + z-index so the balloon, which hangs above the band, paints
   over the hero section rather than under its background */
.mulch-strip{position:relative;z-index:3;background:var(--cream-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0 0}
/* the blended look: no frame of its own, so the only line in the band is the
   ground the machine rides on — which is the section divider itself */
.mulch-strip.blend{background:transparent;border:0;padding:0}
.mulch-strip.blend + .alt{border-top:0}
/* flow-root stops the negative margin collapsing out through the section:
   the band takes only its own height in the page, and the balloon still
   paints above it because nothing here clips */
.mulch-wrap{position:relative;width:100%;display:flow-root}
.mulch-svg{display:block;width:100%;height:auto;margin-top:-24.5%}
/* the empty top of that box hangs over the section above, so it must not
   swallow clicks meant for the buttons up there */
.mulch-svg{pointer-events:none}
.mulch-svg .machine{pointer-events:auto}
/* Everything that moves is drawn on one canvas laid exactly over the still
   scene. It never takes a click: those pass through to the scene below. */
.mulch-cv{position:absolute;left:0;top:0;width:100%;height:0;display:block;pointer-events:none}
/* The balloon's own layer, the top one: the same box as the scene (the same
   width-based margin lines it up), so it always paints in front of the hedge
   letters and everything else on the canvas. Only the balloon takes clicks. */
.mulch-top{position:absolute;left:0;top:0;width:100%;height:auto;display:block;margin-top:-24.5%;pointer-events:none;overflow:visible}
.mulch-top .bub{pointer-events:auto;filter:drop-shadow(0 4px 9px rgba(16,24,10,.30))}
@media (prefers-reduced-motion:reduce){ .mulch-top .bub{filter:none} }
.hedge-wide,.trees-wide,.sky-wide{display:none}
@media (min-width:901px){
  /* a computer screen shows the long word, and the scene shrinks to match so
     the machine and the timber sit between the mulch and the top of the word */
  .hedge-wide,.trees-wide,.sky-wide{display:block}
  .hedge-narrow,.trees-narrow,.sky-narrow{display:none}
}
.machine{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.machine:focus{outline:none}
.machine:focus-visible{outline:3px solid var(--blaze);outline-offset:4px;border-radius:8px}
.bub{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* a presentation attribute cannot read a CSS variable, so the balloon's words
   never got the site's display face — set it here instead */
.mulch-top .bub text{font-family:var(--display)}
@media (max-width:700px){.mulch-strip{padding-top:4px}.mulch-strip.blend{padding-top:0}}

/* ---------- social ---------- */
.fb-link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.95rem;color:#1877F2;border:2px solid #1877F2;padding:9px 14px;border-radius:var(--btn-radius);white-space:nowrap}
.fb-link:hover{background:#1877F2;color:#fff}
.fb-link svg{flex:0 0 auto}
/* The shape, type and hover for these two live with .quote-link up in the
   header block, so all three stay one control. Only what is unique to each
   one is set here. */
.rev-mini .stars{display:inline-flex;gap:1px}
.rev-mini .stars svg{width:14px;height:14px;display:block}
/* Under 1180px the words go and the stars carry it, so the bar never wraps. */
@media (max-width:1180px){ .rev-mini .revtxt{display:none} .top-cta .rev-mini{padding:0 10px} }
.quote-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.quote-social .fb-link{color:#fff;border-color:rgba(255,255,255,.5)}
.quote-social .fb-link:hover{background:#1877F2;border-color:#1877F2}

/* ---------- rolling gallery ---------- */
.roll{display:flex;flex-direction:column;gap:14px}
.roll-hero{display:block;position:relative;border-radius:9px;overflow:hidden;background:var(--cream-3);border:1px solid var(--rule)}
.roll-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.8) brightness(.86);transform:scale(1.15)}
.roll-img{position:relative;width:100%;height:clamp(280px,42vw,470px);object-fit:contain;display:block}
.roll-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 16px;color:#fff;font-size:1rem;background:linear-gradient(to top,rgba(10,16,8,.82),rgba(10,16,8,0))}
.roll-strip{display:flex;align-items:center;gap:10px}
.rarrow{flex:0 0 auto;width:42px;height:66px;border-radius:6px;border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rarrow:hover:not(:disabled){background:var(--dark);color:var(--cream);border-color:var(--dark)}
.rarrow:disabled{opacity:.3;cursor:default}
.rwin{flex:1;overflow:hidden}
.rtrack{display:flex;gap:10px;transition:transform .3s ease}
@media (prefers-reduced-motion:reduce){.rtrack{transition:none}}
.rthumb{flex:0 0 auto;border-radius:6px;overflow:hidden;border:2px solid var(--rule);background:var(--cream-3);cursor:pointer;padding:0;display:block}
.rthumb:hover{border-color:var(--green-pale)}
.rthumb img{width:100%;height:66px;object-fit:cover;display:block}
.rthumb.on{outline:0}
.rthumb.on{border-color:var(--green)}
.rthumb{position:relative}
.rthumb .rplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50%;background:rgba(17,22,14,.66);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.rthumb .rplay svg{width:11px;height:11px;margin-left:1px}
.roll-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;
  border-radius:50%;background:rgba(17,22,14,.6);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.42),inset 0 0 0 2.5px rgba(255,255,255,.9);pointer-events:none}
.roll-play[hidden]{display:none}
.roll-play svg{width:26px;height:26px;margin-left:4px}
.roll-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.roll-count{font-size:.9rem;color:var(--mute)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.gal figure{margin:0;display:flex;flex-direction:column;gap:8px}
.galshot{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;overflow:hidden;
  border:1px solid var(--rule);border-radius:7px;background:var(--cream-3);cursor:zoom-in}
.galshot .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(.8) brightness(.86);transform:scale(1.15)}
.galshot .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.galshot .zoom{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;
  background:rgba(10,16,8,.72);color:#fff;font-family:var(--display);font-weight:600;font-size:.8rem;
  padding:7px 11px;border-radius:20px;opacity:0;transition:opacity .15s}
.galshot:hover .zoom,.galshot:focus-visible .zoom{opacity:1}
@media (hover:none){.galshot .zoom{opacity:.92}}
/* video tiles carry a play badge so a clip reads as a clip at a glance */
.galshot .playdot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(17,22,14,.62);color:#fff;backdrop-filter:blur(2px);
  box-shadow:0 4px 18px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.85);
  transition:transform .18s ease,background .18s ease}
.galshot .playdot svg{width:22px;height:22px;margin-left:3px}
.galshot.isvid:hover .playdot{transform:translate(-50%,-50%) scale(1.08);background:rgba(17,22,14,.78)}

/* ---------- full-screen photo viewer ---------- */
.lb{position:fixed;inset:0;z-index:400;background:#070C04;display:none;flex-direction:column}
.lb.on{display:flex}
.lb-top{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 18px;color:#E7ECDC}
.lb-count{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.06em;color:#C9D2B8}
.lb-close{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--dark);
  border:0;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 18px;border-radius:6px;cursor:pointer;min-height:46px}
.lb-close:hover{background:var(--blaze);color:#fff}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:0 78px;min-height:0}
.lb-stage img,.lb-stage video{width:100%;height:100%;object-fit:contain;border-radius:6px;filter:drop-shadow(0 18px 46px rgba(0,0,0,.6))}
.lb-stage video{background:#000;outline:none}
.lb-stage video[hidden],.lb-stage img[hidden]{display:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:58px;height:58px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);background:rgba(10,16,8,.74);color:#fff;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:#fff;color:var(--dark);border-color:#fff}
.lb-nav[hidden]{display:none}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-foot{flex:0 0 auto;padding:14px 18px 22px;text-align:center;color:#D6DCC8}
.lb-cap{font-size:1.02rem;line-height:1.4}
.lb-hint{font-size:.85rem;color:#939E85;margin-top:8px}
@media (max-width:760px){
  .lb-stage{padding:0 8px}
  .lb-nav{width:46px;height:46px}
  .lb-prev{left:4px}.lb-next{right:4px}
  .lb-close{padding:11px 14px;font-size:.9rem}
}
.gal figcaption{font-size:.92rem;color:var(--soft)}

/* ---------- map ---------- */
.mapbox{background:var(--surface);border-radius:8px;overflow:hidden;border:1px solid var(--rule)}
.mapbox svg{display:block;width:100%;height:auto}
.mapnote{font-size:.8rem;color:var(--mute);padding:8px 12px;border-top:1px solid var(--rule);background:var(--cream-2)}

/* ---------- modal ---------- */
.ovl{position:fixed;inset:0;z-index:200;background:rgba(14,20,10,.7);display:none;padding:22px;overflow-y:auto}
.ovl.on{display:flex;align-items:flex-start;justify-content:center}
.sheet{background:var(--cream);border-radius:11px;max-width:820px;width:100%;margin:auto;position:relative;box-shadow:0 30px 90px -20px rgba(0,0,0,.65)}
.sheet-top{background:var(--dark);color:#fff;padding:26px 30px;padding-right:68px;border-radius:11px 11px 0 0;position:relative}
.sheet-top h2{color:#fff;margin-bottom:8px}
.sheet-top .kick{font-family:var(--display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-pale);display:block;margin-bottom:9px}
.sheet-top p{color:#B5BFA8;font-size:1rem;max-width:56ch}
.xbtn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.14);border:0;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer}
.xbtn:hover{background:rgba(255,255,255,.26)}
.sheet-body{padding:26px 30px 30px;display:flex;flex-direction:column;gap:20px}
.sheet-body h3{color:var(--green-dk);margin-top:6px}
.sheet-cta{display:flex;flex-wrap:wrap;gap:11px;border-top:1px solid var(--rule);margin-top:4px;padding-top:20px}
.sheet-note{font-size:.87rem;color:var(--mute)}
.serving{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.7rem);color:var(--green-dk);text-align:center;padding:16px 10px 4px;letter-spacing:-.01em}
@media (max-width:640px){.sheet-top,.sheet-body{padding-left:20px;padding-right:20px}.sheet-top{padding-right:60px}}

/* ---------- popup ---------- */
.pop{position:fixed;inset:0;z-index:300;background:rgba(14,20,10,.68);display:none;align-items:center;justify-content:center;padding:20px}
.pop.on{display:flex}
.pop-card{background:var(--cream);border-radius:12px;max-width:470px;width:100%;overflow:hidden;box-shadow:0 30px 90px -20px rgba(0,0,0,.7);position:relative}
.pop-head{background:var(--dark);color:#fff;padding:24px 26px 22px;padding-right:66px}
.pop-head h2{color:#fff;font-size:1.5rem;margin-bottom:7px}
.pop-head p{color:#B5BFA8;font-size:.97rem}
.pop-body{padding:20px 26px 24px;display:flex;flex-direction:column;gap:13px}
.pop-body label{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ink)}
.pop-later{background:transparent;border:0;color:var(--mute);font-family:var(--body);font-size:.9rem;text-decoration:underline;padding:4px;cursor:pointer;align-self:center}
.pop-later:hover{color:var(--ink)}

/* ---------- estimate ---------- */
.quote-wrap{background:var(--dark);color:#DDE3D3}
.quote-wrap h2{color:#fff}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:860px){.quote-grid{grid-template-columns:1fr;gap:32px}}
.quote-copy{display:flex;flex-direction:column;gap:18px}
.quote-copy p{color:#B5BFA8}
.big-num{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,5vw,2.6rem);color:#fff;text-decoration:none;display:inline-block;letter-spacing:-.02em}
.big-num:hover{color:var(--blaze)}
form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.quote-wrap label{font-family:var(--display);font-weight:600;font-size:.9rem;color:#C3CDB4}
input,select,textarea{font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--rule-2);border-radius:5px;padding:13px 14px;width:100%}
textarea{resize:vertical;min-height:100px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blaze);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:.85rem;color:#93A085;line-height:1.5}
button[type=submit]{font-family:var(--display);font-weight:700;font-size:1.1rem;background:var(--blaze);color:#fff;border:0;border-radius:5px;padding:16px 24px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25)}
button[type=submit]:hover{background:var(--blaze-lt)}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#909C82;padding:44px 0 96px;font-size:.93rem}
footer a{color:#C7D0B8;text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 52px;justify-content:space-between;align-items:flex-start}
.foot-col{display:flex;flex-direction:column;gap:7px;min-width:150px}
.foot-col strong{font-family:var(--display);color:#fff;font-size:1rem;font-weight:600}
.fine{margin-top:32px;padding-top:20px;border-top:1px solid #2A3520;font-size:.85rem;color:#6E7A61}
/* Thumb bar. On a phone the header can only hold the logo, a call icon and the
   menu, so Quote and Review were dropping out of the page entirely. They live
   down here instead, where a thumb actually reaches, above the home indicator. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  box-shadow:0 -3px 14px rgba(0,0,0,.24);padding-bottom:env(safe-area-inset-bottom)}
.callbar .cbrow{display:grid;grid-template-columns:repeat(var(--cbn,1),1fr)}
.callbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:58px;padding:9px 6px;color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.1;text-align:center}
/* The stars are shorter than the icons, so without a fixed row the three labels
   sit at three different heights. */
.callbar a > :first-child{display:flex;align-items:center;justify-content:center;height:20px}
.callbar a.cb-call{background:var(--blaze)}
.callbar a.cb-quote{background:var(--dark)}
.callbar a.cb-rev{background:var(--green-dk,#2F5A38)}
.callbar a:active{filter:brightness(.92)}
.callbar .cbsub{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;opacity:.85}
.callbar .cbstars{display:inline-flex;gap:1px}
.callbar .cbstars svg{width:11px;height:11px;display:block}
@media (max-width:700px){.callbar{display:block}footer{padding-bottom:132px}body{font-size:17px}section{padding:48px 0}}

/* ---------- sub hero ---------- */
.subhero{background:var(--dark);color:#DDE3D3;padding:50px 0 54px}
.subhero h1{color:#fff;font-size:clamp(1.9rem,5vw,3rem)}
.subhero .sub{font-size:1.13rem;color:#B5BFA8;margin-top:15px;max-width:58ch}
/* Optional page picture. With no picture the grid never exists, so the band
   keeps exactly the height it has today — no reserved hole. */
.subhero .shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:34px;align-items:center}
/* No fixed shape — a wide panorama stays wide and a tall shot stays tall,
   so nothing important gets cropped away. Only very tall pictures are capped. */
.subhero .spic{margin:0;border-radius:12px;overflow:hidden;line-height:0;
  box-shadow:0 14px 34px rgba(0,0,0,.34);background:#0d120b}
.subhero .spic img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover}
@media (max-width:820px){
  .subhero .shead{grid-template-columns:1fr;gap:22px}
  .subhero .spic img{max-height:240px}
}
.crumb{font-family:var(--display);font-size:.9rem;color:#93A085;margin-bottom:14px;display:block;width:fit-content;text-decoration:none}
.crumb:hover{color:#fff}
.kicker{display:inline-flex;gap:9px;align-items:center;font-family:var(--display);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green-pale);margin-bottom:11px}

/* Computers: the picture fills the space right of the headline, so the cream
   fade sits where it always has. That space is much wider than a normal photo
   is tall, which trims the photo's top and bottom. Instead of hiding them for
   good, the picture glides slowly from its top edge to its bottom edge:
     - one picture: down, then back up, over and over;
     - rotating pictures: each glides one way during its turn and the next one
       glides the other way (the carousel script puts .up on every other one).
   Both corners travel together, so a very wide picture, trimmed at its sides
   instead, glides across. Phones are unchanged, and anyone whose device asks
   for less motion gets the picture held still where the editor places it. */
@keyframes heroGlideDn{from{object-position:0% 0%}to{object-position:100% 100%}}
@keyframes heroGlideUp{from{object-position:100% 100%}to{object-position:0% 0%}}
@media (min-width:901px){
  .hero-photo:not(.hcar) img{animation:heroGlideDn 12s ease-in-out infinite alternate}
  .hcar .hslide.on{animation:heroGlideDn var(--hglide,6s) ease-in-out forwards}
  .hcar .hslide.on.up{animation-name:heroGlideUp}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo img,.hcar .hslide{animation:none!important}
}