/* Greensand Tree Care: site header, dropdown panels and mobile menu (shared by every page). Sizes in rem. */
html{scroll-padding-top:5.5rem}

/* bar: always solid enough to read over video and photos */
.top{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(19,20,14,.78);backdrop-filter:blur(.875rem) saturate(1.2);-webkit-backdrop-filter:blur(.875rem) saturate(1.2);border-bottom:1px solid var(--line-soft);transition:background .3s ease,box-shadow .3s ease}
.top.scrolled{background:rgba(19,20,14,.94);box-shadow:0 .5rem 2rem rgba(0,0,0,.35)}
.top-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.5rem;padding:0 var(--gutter)}

.brand{display:flex;align-items:center;gap:.75rem;flex:none}
.brand svg{width:2.5rem;height:2.5rem;flex:none}
.brand b{display:block;font:500 1.25rem/1 var(--sans);letter-spacing:-.02em;color:var(--paper)}
.brand small{display:block;font:500 0.75rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lime);margin-top:.375rem}

/* desktop menu */
.nav-list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.has-panel{position:static}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:.4375rem;font:500 1rem/1 var(--sans);letter-spacing:-.005em;color:var(--paper);padding:.8125rem 1rem;border:0;border-radius:.5rem;background:transparent;cursor:pointer;transition:background .2s ease,color .2s ease}
.nav-link:hover,.has-panel.open>.nav-link,.nav-link:focus-visible{background:rgba(244,243,232,.09);outline:none}
.nav-link:focus-visible{box-shadow:0 0 0 2px var(--lime)}
.nav-link.is-here{color:var(--lime)}
.nav-link.is-here::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.3125rem;height:2px;border-radius:2px;background:var(--lime)}
.chev{width:.75rem;height:.5rem;transition:transform .25s ease}
.has-panel.open .chev{transform:rotate(180deg)}

/* dropdown panels: centred under the bar */
.panel{position:absolute;top:calc(100% + .5rem);left:50%;width:min(68rem,calc(100vw - 2 * var(--gutter)));transform:translate(-50%,.5rem);opacity:0;visibility:hidden;pointer-events:none;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:.75rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.5);padding:1.25rem;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s linear .25s}
.panel::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1rem}
.has-panel.open .panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s}
.panel-label{font:500 0.8125rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin:.25rem .5rem 1rem}
.panel-foot{display:inline-flex;align-items:center;gap:.5rem;margin:1rem .5rem .25rem;font:500 0.875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.panel-foot span{transition:transform .2s}
.panel-foot:hover span{transform:translateX(4px)}

.svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}
.svc-item{display:flex;flex-direction:column;border-radius:.5rem;padding:.5rem;transition:background .2s}
.svc-item:hover,.svc-item:focus-visible,.svc-item[aria-current]{background:rgba(244,243,232,.06);outline:none}
.svc-item .ph{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:.375rem}
.svc-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-item:hover img{transform:scale(1.05)}
.svc-item .lbl{font:500 0.75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-top:.875rem}
.svc-item .ttl{font:500 1rem/1.25 var(--sans);color:var(--paper);margin-top:.5rem}
.svc-item[aria-current] .ttl{color:var(--lime)}

.panel-area{width:min(52rem,calc(100vw - 2 * var(--gutter)))}
.town-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.town-grid a{display:flex;justify-content:space-between;align-items:center;font:500 1rem/1 var(--sans);color:var(--paper);padding:.875rem .75rem;border-radius:.5rem;transition:background .2s,color .2s}
.town-grid a::after{content:"\2192";color:var(--lime);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.town-grid a:hover,.town-grid a:focus-visible{background:rgba(244,243,232,.06);color:var(--lime);outline:none}
.town-grid a:hover::after{opacity:1;transform:none}
.town-grid a[aria-current]{color:var(--lime);background:rgba(255,214,10,.08)}

/* right-hand actions */
.top-cta{display:flex;align-items:center;gap:1rem;flex:none}
.phone{display:inline-flex;align-items:center;gap:.5rem;font:600 1.125rem/1 var(--mono);letter-spacing:.03em;color:var(--paper);padding:.625rem .75rem;border-radius:.5rem;transition:background .2s,color .2s}
.phone svg{width:1.125rem;height:1.125rem;color:var(--lime);flex:none}
.phone:hover{background:rgba(244,243,232,.09);color:var(--lime)}
.top .quote-btn{padding:.9375rem 1.25rem;font-size:.875rem}

/* mobile menu button */
.burger{display:none;position:relative;width:2.875rem;height:2.875rem;border-radius:.5rem;border:1px solid var(--line-soft);background:rgba(244,243,232,.06);cursor:pointer;flex:none}
.burger span{position:absolute;left:50%;width:1.25rem;height:2px;margin-left:-.625rem;border-radius:2px;background:var(--paper);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger span:nth-child(1){top:calc(50% - 7px)}
.burger span:nth-child(2){top:calc(50% - 1px)}
.burger span:nth-child(3){top:calc(50% + 5px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile menu sheet */
.mnav{position:fixed;inset:4.5rem 0 0 0;z-index:59;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-.75rem);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.mnav.open{opacity:1;transform:none}
.mnav-in{display:flex;flex-direction:column;padding:1rem var(--gutter) 2.5rem}
.mnav summary,.m-link{display:flex;justify-content:space-between;align-items:center;font:500 1.625rem/1.1 var(--sans);letter-spacing:-.02em;color:var(--paper);padding:1.125rem 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .chev{width:1rem;height:.625rem;color:var(--lime)}
.mnav details[open] summary .chev{transform:rotate(180deg)}
.m-svc{display:grid;gap:.25rem;padding:.75rem 0 1rem}
.m-svc a{display:flex;align-items:center;gap:.875rem;font:500 1.0625rem/1.25 var(--sans);color:var(--paper);padding:.5rem;border-radius:.5rem}
.m-svc a[aria-current],.m-town a[aria-current]{color:var(--lime);background:rgba(255,214,10,.08)}
.m-svc .ph{width:4.5rem;aspect-ratio:3/2;flex:none;overflow:hidden;border-radius:.375rem}
.m-svc img{width:100%;height:100%;object-fit:cover}
.m-town{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;padding:.75rem 0 1rem}
.m-town a{font:500 1rem/1 var(--sans);color:var(--paper);padding:.875rem .625rem;border-radius:.5rem;background:rgba(244,243,232,.04)}
.m-cta{display:grid;gap:.75rem;margin-top:1.75rem}
.m-cta .btn{justify-content:center;padding:1.125rem 1.25rem;font-size:.9375rem}
.m-phone svg{width:1.125rem;height:1.125rem;color:var(--lime)}
body.menu-open{overflow:hidden}

/* below 1200px the desktop menu folds into the button; the phone number keeps its icon */
@media (max-width:1360px){.phone span{display:none}.phone{padding:.6875rem;border:1px solid var(--line-soft)}}
@media (max-width:1200px){.nav{display:none}.burger{display:block}}
@media (max-width:760px){
  .top-in{height:4rem;gap:.75rem}
  .mnav{inset:4rem 0 0 0}
  .brand svg{width:2.125rem;height:2.125rem}
  .brand b{font-size:1.0625rem}
  .phone{display:none}
  .top .quote-btn{padding:.75rem .875rem;font-size:.75rem}
}
@media (min-width:1201px){.mnav{display:none!important}}
@media (prefers-reduced-motion:reduce){.panel,.mnav,.burger span,.chev{transition:none}}