/* Spottable shared piece - PASSED on Bluegum 21 Oct (qa_text 0, a11y PASS, LH desktop 98 / mobile 97). Copy in with tools/use_shared.py; never re-hand-build. */
/* ---------- POLISH LAYER (21 Oct) ---------- */
/* smooth scroll: Lenis 1.3.23, lerp 0.1 (measured on the reference: one wheel tick settles in ~0.9 s) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
section[id]{scroll-margin-top:96px}
/* clean cursor (22 Oct v2): 9 px accent dot with a hairline white edge; 30 px soft halo on links; hidden over form fields */
@media (hover:hover) and (pointer:fine){body.cur2-on,body.cur2-on a,body.cur2-on button,body.cur2-on label,body.cur2-on summary{cursor:none}}
.cur2{position:fixed;left:0;top:0;z-index:95;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;opacity:0;
  background:var(--leaf-btn,var(--leaf));box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 8px rgba(0,0,0,.18);
  transition:opacity .25s,width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),margin .28s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s}
body.cur2-on .cur2{opacity:1}
.cur2.link{width:30px;height:30px;margin:-15px 0 0 -15px;background:color-mix(in srgb,var(--leaf) 18%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--leaf) 55%,transparent);backdrop-filter:blur(2px)}
.cur2.down{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.cur2.link.down{width:24px;height:24px;margin:-12px 0 0 -12px}
body.cur2-on .cur2.field{opacity:0}
@media (prefers-reduced-motion:reduce){.cur2{display:none}body.cur2-on,body.cur2-on *{cursor:auto}}
/* ambient edges (22 Oct, his ask): low-opacity glow + travelling current line in the empty side gutters, wide screens only */
.amb{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
@media (min-width:1280px){.amb{display:block}}
.amb i{position:absolute;top:0;bottom:0;width:max(60px,calc((100vw - var(--wrap,1200px))/2 - 24px))}
.amb i:first-child{left:0}.amb i:last-child{right:0}
.amb i::before{content:"";position:absolute;left:50%;width:240px;height:240px;margin-left:-120px;border-radius:50%;
  background:radial-gradient(circle,var(--leaf) 0,transparent 68%);opacity:.13;filter:blur(18px);animation:ambGlow 19s ease-in-out infinite}
.amb i:last-child::before{animation-duration:23s;animation-delay:-9s}
.amb i::after{content:"";position:absolute;left:50%;top:0;width:1px;height:140px;
  background:linear-gradient(transparent,var(--leaf),transparent);opacity:.35;animation:ambRun 9s linear infinite}
.amb i:last-child::after{animation-delay:-4.5s;animation-duration:11s}
@keyframes ambGlow{0%,100%{top:12%}50%{top:68%}}
@keyframes ambRun{from{transform:translateY(-140px)}to{transform:translateY(100vh)}}
@media (prefers-reduced-motion:reduce){.amb i::before,.amb i::after{animation:none}.amb i::after{display:none}}
/* magnetic CTAs use `translate`, so the hover lift (`transform`) still stacks */
.mag{transition:transform .22s ease,box-shadow .22s ease,background .22s ease,translate .45s var(--ease)}
/* translucent 3D glass leaves + pebbles in empty space (never behind body text) */
.glass{position:absolute;z-index:0;pointer-events:none}
.glass i{display:block;width:100%;height:100%;position:relative;animation:drift 16s ease-in-out infinite}
.glass:nth-of-type(2n) i{animation-duration:21s;animation-direction:reverse}
.leaf i{border-radius:0 76% 0 76%;background:linear-gradient(135deg,rgba(200,238,160,.62),rgba(126,197,58,.16) 55%,rgba(63,122,20,.22));
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 3px 4px 3px rgba(255,255,255,.8),inset -12px -16px 30px rgba(63,122,20,.18),0 26px 50px rgba(63,122,20,.13)}
.leaf i::after{content:"";position:absolute;left:7%;top:7%;width:122%;height:1.5px;transform-origin:0 50%;rotate:45deg;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,0) 85%)}
.pebble i{border-radius:58% 42% 52% 48%/46% 56% 44% 54%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.9),rgba(214,240,186,.5) 28%,rgba(114,181,64,.16) 72%);
  border:1px solid rgba(255,255,255,.65);box-shadow:inset -9px -11px 22px rgba(63,122,20,.16),0 20px 40px rgba(63,122,20,.11)}
.services,.team,.area,.quote{overflow:clip}
.about .wrap,.services .wrap,.team .wrap,.reviews .wrap,.faq .wrap,.quote .wrap,.area .wrap{position:relative;z-index:1}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(12px,-20px) rotate(9deg)}}
/* service-area checker */
.area{padding:0 0 110px}
.area-card{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:56px 60px;border-radius:28px;background:var(--mint);border:1px solid var(--line)}
.area .h2{margin-top:14px}
.area .lede{margin-top:14px;max-width:420px}
.checker label{display:block;font-size:12px;font-weight:600;color:#3d4a36;margin-bottom:8px}
.checker .in{display:flex;gap:8px}
.checker input{flex:1;min-width:0;height:54px;padding:0 18px;border:1px solid #dde8cc;border-radius:14px;background:#fff;font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.checker input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(114,181,64,.15)}
.checker .btn{padding:0 26px;height:54px;font-size:15px}
#sub-r{min-height:48px;margin-top:14px;font-size:15px;line-height:1.55;color:#3d4a36}
#sub-r b{color:var(--leaf-ink)}
#sub-r a{color:var(--leaf-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:#3d4a36;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.chips button:hover{background:var(--leaf-wash);border-color:#c9e3a8;transform:translateY(-1px)}
/* phone action bar (call + quote): a fixed nav, so it reads as chrome, not page text */
.mbar{display:none}
/* staggered reveals: photos unmask, grid children cascade */
.card.rv-in img,.mate.rv-in .ph img{clip-path:inset(10% 8% 10% 8% round 22px);scale:1.14;transition:scale .9s var(--ease),clip-path 1.1s var(--ease)}
.card.rv-in.seen img,.mate.rv-in.seen .ph img{clip-path:inset(0 0 0 0 round 0);scale:1}
.card.seen:hover img,.card.seen:focus-within img,.mate.seen:hover .ph img{scale:1.05}
@media (max-width:1023px){.glass{display:none}.area-card{grid-template-columns:1fr;gap:28px;padding:44px 36px}}
@media (max-width:700px){
  .area{padding-bottom:72px}
  .area-card{padding:34px 22px}
  .checker .in{flex-direction:column}
  .checker input{flex:none}
  .mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:45;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:8px;border-radius:18px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(10,31,4,.25);
    transform:translateY(150%);transition:transform .45s var(--ease)}
  .mbar.on{transform:none}
  .mbar a{height:48px;border-radius:12px;font-size:15px}
  .mbar .call-b{background:var(--mint);color:var(--forest);border:1px solid var(--line)}
  .mown{height:150px}
  .mown span{bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  .card.rv-in img,.mate.rv-in .ph img{clip-path:none;scale:1}
  .glass i{animation:none}
}


/* Spottable shared piece - PASSED on Bluegum 21 Oct (qa_text 0, a11y PASS, LH desktop 98 / mobile 97). Copy in with tools/use_shared.py; never re-hand-build. */
/* hero checklist additions (house rule: 10-point hero) */
.ticks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(126,197,58,.25);color:var(--leaf-light)}
.ticks i svg{width:12px;height:12px;stroke-width:3}
.hero .cta{margin-top:30px}
.proof{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:22px}
.thumbs{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.thumbs span{display:flex}
.thumbs img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px}
.thumbs img:first-child{margin-left:0}
.thumbs a{text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.rate{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:12.5px;color:rgba(255,255,255,.88)}
.rate b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;color:#1a5c0a;font-size:14px;font-weight:800}
.rate .st{color:#ffcf5a;letter-spacing:1px}
/* pop-up quote form (checklist point 2; point 9 = the short form, one tap from the hero) */
dialog.qd{margin:auto;width:min(460px,calc(100vw - 24px));padding:0;border:0;border-radius:24px;box-shadow:0 40px 100px rgba(10,31,4,.4);color:var(--ink)}
dialog.qd::backdrop{background:rgba(10,31,4,.55);backdrop-filter:blur(4px)}
dialog.qd[open]{animation:qdIn .45s var(--ease)}
.qd form{padding:34px 32px 30px}
.qd .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--forest)}
.qd .x svg{rotate:45deg}
.qd .full{display:block;margin-top:12px;text-align:center;font-size:13px;font-weight:600;color:var(--leaf-ink);text-decoration:underline;text-underline-offset:3px;padding:4px 0}
@keyframes qdIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}