
/* Layout: utility bar → 3-col header → 88vh hero (giant floating SODSQUAD wordmark with lime sweep, Jonathan on the mower in front)
   → ink category strip → dark story split → service icons → before/after drag grid → ink request block → footer.
   Single deliberate light look; lime is the only saturated color. */
:root{
  --bg:#E9E7E2; --panel:#F4F3F0; --ink:#121210; --muted:#75726B; --line:#D3D0C9; --story:#161614;
  --lime:#9BEA1E; --lime-ink:#0E1A02;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mark:"Archivo","Arial Black","Helvetica Neue",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
::selection{background:var(--lime);color:var(--lime-ink)}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;text-wrap:balance}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
.lbl{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--ink);color:var(--bg);border:0;padding:1.05rem 1.7rem;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--lime);color:var(--lime-ink)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{background:var(--bg);color:var(--ink)}
.tlink{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;cursor:pointer;background:none;border:0;color:inherit;padding:0}
.tlink:hover{text-decoration-color:var(--lime);text-decoration-thickness:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* utility */
.util{background:var(--ink);color:#BEBBB3}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.6rem}
.util b{color:var(--lime);font-weight:500}
.util nav{display:flex;gap:1.6rem}
.util a{text-decoration:none}
.util a:hover{color:var(--lime)}
@media (max-width:640px){.util nav{display:none}.util .wrap{justify-content:center;text-align:center}}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;background:rgba(233,231,226,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:.7rem}
.hdr nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.hdr nav a{text-decoration:none;white-space:nowrap}
.hdr nav a[aria-current="page"],.pnav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:6px}
.hdr nav a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:6px}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;justify-self:center}
.logo img.b{height:46px;width:auto}
.logo img.w{height:22px;width:auto}
.hdr .right{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem}
.hdr .right a{display:flex;align-items:center;gap:.45rem;text-decoration:none}
.hdr .right a:hover{color:var(--muted)}
.hdr .right .btn{padding:.85rem 1.1rem}
.hdr .right .btn:hover{color:var(--lime-ink)}
@media (max-width:900px){.hdr nav{display:none}.hdr{grid-template-columns:auto 1fr}.logo{justify-self:start}.hdr .right .call{display:none}}
@media (max-width:420px){.logo img.w{display:none}}

/* hero */
.hero{position:relative;height:88vh;min-height:560px;max-height:980px;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,#F4F3F0 0%,var(--bg) 60%)}
.mark{position:absolute;left:50%;top:46%;width:96vw;transform:translate(-50%,-50%);animation:float 7s ease-in-out infinite;pointer-events:none}
.mark span{display:block;font-family:var(--mark);font-style:italic;font-weight:900;font-size:clamp(3.6rem,15.5vw,15.5rem);line-height:.8;letter-spacing:-.04em;text-align:center;white-space:nowrap;color:var(--ink)}
.mark span.lime{position:absolute;inset:0;color:var(--lime);-webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 35%,#000 45%,#000 55%,transparent 65%,transparent 100%);mask-image:linear-gradient(100deg,transparent 0%,transparent 35%,#000 45%,#000 55%,transparent 65%,transparent 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;animation:sweep 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}}
@keyframes sweep{0%{-webkit-mask-position:100% 0;mask-position:100% 0}100%{-webkit-mask-position:0% 0;mask-position:0% 0}}
.rider{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:86%;max-width:none;width:auto;aspect-ratio:1100/1407;filter:drop-shadow(0 30px 30px rgba(18,18,16,.28));
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 56%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 52% at 50% 56%,#000 62%,transparent 100%)}
.hero .tag{position:absolute;left:max(20px,env(safe-area-inset-left,0px));top:2rem;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;z-index:2}
.hero .bl{position:absolute;left:max(20px,env(safe-area-inset-left,0px));bottom:2rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;z-index:2}
.hero .br{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:2rem;text-align:right;z-index:2;line-height:1.6}
.hero .br b{font-weight:800;font-size:13px;letter-spacing:.06em}
.hero .ghost{position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(233,231,226,.85));pointer-events:none}
@media (max-width:700px){.hero{height:auto;min-height:0;padding-bottom:9rem}.hero .tag{position:relative;left:auto;top:auto;padding:1.4rem 20px 0}.mark{top:30%}.rider{position:relative;left:auto;transform:none;display:block;margin:1rem auto 0;height:auto;width:min(92%,440px)}.hero .br{display:none}.hero .bl{bottom:1.6rem}}

/* category strip */
.cats{background:var(--ink);color:var(--bg)}
.cats .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.cat{display:grid;grid-template-columns:96px 1fr;gap:1.2rem;align-items:center;padding:1.8rem 1.6rem;border-left:1px solid #2A2A27}
.cat:first-child{border-left:0;padding-left:0}
.cat img{width:96px;height:128px;object-fit:cover;display:block}
.cat h3{font-size:1.5rem;color:var(--bg)}
.cat p{color:#A7A49C;font-size:13.5px;margin:.4rem 0 .8rem}
.cat .price{color:var(--lime);font-weight:700}
.cat a{color:var(--lime);text-decoration:none}
.cat a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:900px){.cats .wrap{grid-template-columns:1fr}.cat{border-left:0;border-top:1px solid #2A2A27;padding-left:0}.cat:first-child{border-top:0}}

/* story */
.story{background:var(--story);color:var(--bg);display:grid;grid-template-columns:1fr 1fr}
.story .txt{padding:clamp(3rem,8vw,7rem) max(20px,env(safe-area-inset-left,0px)) clamp(3rem,8vw,7rem) max(20px,calc((100vw - 1360px)/2 + 20px));display:grid;gap:1.6rem;align-content:center;min-width:0}
.story .lbl{color:#A7A49C}
.story h2{font-size:clamp(3.4rem,8vw,7.5rem)}
.story h2 i{font-style:normal;color:var(--lime)}
.story p{color:#C9C6BE;font-size:16px;max-width:46ch}
.story .btn{justify-self:start;background:var(--bg);color:var(--ink)}
.story .btn:hover{background:var(--lime)}
.story .pic{min-height:460px;background:#222 50% 45%/cover no-repeat;filter:saturate(.55) contrast(1.05)}
@media (max-width:860px){.story{grid-template-columns:1fr}.story .pic{min-height:360px}}

/* services row */
.svc .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding-block:2.6rem;border-bottom:1px solid var(--line)}
.svc div{display:flex;gap:.9rem;align-items:flex-start}
.svc svg.i{width:30px;height:30px;stroke-width:1.2}
.svc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.svc span{color:var(--muted);font-size:13.5px}
@media (max-width:900px){.svc .wrap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.svc .wrap{grid-template-columns:1fr}}

/* work grid */
.work{padding-block:clamp(3rem,7vw,5.5rem)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2rem}
.work-head h2{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.1rem}
.card{display:grid;gap:.7rem;min-width:0}
.frame{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;background:var(--panel);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.frame .after{clip-path:inset(0 0 0 var(--pos,50%))}
.frame .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--lime);transform:translateX(-1px)}
.frame .handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.frame .tagB,.frame .tagA{position:absolute;top:.7rem;font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:rgba(18,18,16,.78);color:var(--bg);padding:.4rem .55rem}
.frame .tagB{left:.7rem}.frame .tagA{right:.7rem;background:var(--lime);color:var(--lime-ink)}
.frame .pill{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);background:var(--bg);border-radius:999px;padding:.45rem .8rem;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:opacity .3s}
.frame.used .pill{opacity:0}
.compare{cursor:ew-resize}
.card .meta{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.card h3{font-size:14px;letter-spacing:.02em;line-height:1.2}
.card .code{color:var(--muted);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.card p{color:var(--muted);font-size:13px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:460px){.card .meta{flex-direction:column;gap:.2rem}}

/* drainage */
.drain{background:var(--ink);color:var(--bg)}
.drain .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);padding-block:clamp(3.5rem,8vw,6.5rem);align-items:center}
.drain .txt{display:grid;gap:1.4rem;min-width:0}
.drain .lbl{color:#A7A49C}
.drain h2{font-size:clamp(2.8rem,6.5vw,5.6rem)}
.drain h2 i{font-style:normal;color:var(--lime)}
.drain p{color:#C9C6BE;max-width:48ch;font-size:16px}
.dsteps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid #2A2A27}
.dsteps li{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;padding-block:.9rem;border-bottom:1px solid #2A2A27}
.dsteps b{display:block;color:var(--bg);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.dsteps span.n{color:var(--lime);font-weight:800;font-size:1.1rem}
.dsteps span.d{color:#A7A49C;font-size:14px}
.drain .btn{justify-self:start;background:var(--lime);color:var(--lime-ink)}
.drain .btn:hover{background:var(--bg);color:var(--ink)}
.dpics{display:grid;grid-template-columns:1.25fr 1fr;gap:.9rem;align-items:end;min-width:0}
.dpics figure{margin:0;display:grid;gap:.5rem;min-width:0}
.dpics img{width:100%;height:auto;display:block;object-fit:cover}
.dpics .p1 img{aspect-ratio:900/765}
.dpics .p2 img{aspect-ratio:3/4}
.dpics figcaption{color:#A7A49C}
@media (max-width:900px){.drain .wrap{grid-template-columns:1fr}}
@media (max-width:560px){.dpics{grid-template-columns:1fr}.dpics .p2 img{aspect-ratio:4/3}}

/* guarantee */
.promise{background:var(--lime);color:var(--lime-ink)}
.promise .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.2rem)}
.seal{width:clamp(110px,14vw,150px);aspect-ratio:1;border-radius:50%;border:2px solid var(--lime-ink);display:grid;place-items:center;text-align:center;font:800 11px/1.35 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:1rem}
.seal b{display:block;font-size:2rem;letter-spacing:-.02em;line-height:1}
.promise h2{font-size:clamp(2.2rem,5.4vw,4.4rem)}
.promise p{font-size:clamp(1rem,1.5vw,1.15rem);max-width:60ch;margin-top:.9rem}
@media (max-width:620px){.promise .wrap{grid-template-columns:1fr}}

/* service area */
.area .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(3rem,7vw,5rem);border-bottom:1px solid var(--line);align-items:start}
.area h2{font-size:clamp(2.2rem,5vw,4rem)}
.area .side{display:grid;gap:1rem}
.area .side p{color:var(--muted);max-width:36ch}
.towns{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.05}
.towns span::after{content:"/";color:var(--lime);margin-left:.9rem}
.towns span:last-child::after{content:""}
.towns span.home{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:.12em;text-underline-offset:.12em}
.area .hunt{grid-column:2;color:var(--muted)}
@media (max-width:860px){.area .wrap{grid-template-columns:1fr}.area .hunt{grid-column:auto}}

/* footer contact */
.fcontact{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.fcontact a{text-decoration:none}
.fcontact a:hover{color:var(--muted)}

/* sticky phone bar */
.mbar{display:none}
@media (max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);padding:.6rem max(12px,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:.6rem;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem .6rem;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
  .mbar .call{border:1px solid #3A3A36;color:var(--bg)}
  .mbar .est{background:var(--lime);color:var(--lime-ink)}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* ===== seasonal ===== */
/* holiday hero */
.xhero{position:relative;overflow:hidden;height:88vh;min-height:560px;max-height:980px;background:radial-gradient(ellipse 70% 60% at 50% 100%,#1C2416 0%,#0B0C0A 70%);color:var(--bg)}
.xhero .strand{position:absolute;left:0;right:0;top:0;width:100%;height:clamp(60px,9vw,110px);z-index:1}
.xhero .wire{fill:none;stroke:#2C2F27;stroke-width:2}
.xhero .bulb ellipse{fill:#FFE6A6;filter:drop-shadow(0 0 6px rgba(255,214,120,.9))}
.xhero .bulb.b1 ellipse,.xhero .bulb.b4 ellipse{fill:var(--lime);filter:drop-shadow(0 0 6px rgba(155,234,30,.9))}
.xhero .bulb .cap{fill:#3A3D34}
.xhero .xmark{position:absolute;left:50%;top:50%;width:96vw;transform:translate(-50%,-50%);animation:float 7s ease-in-out infinite;pointer-events:none}
.xhero .xmark span{display:block;font-family:var(--mark);font-style:italic;font-weight:900;font-size:clamp(4rem,15vw,14rem);line-height:.8;letter-spacing:-.04em;text-align:center;white-space:nowrap;color:#1B1E18}
.xhero .xmark span.lime{position:absolute;inset:0;color:var(--lime);opacity:.9;-webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 35%,#000 45%,#000 55%,transparent 65%,transparent 100%);mask-image:linear-gradient(100deg,transparent 0%,transparent 35%,#000 45%,#000 55%,transparent 65%,transparent 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;animation:sweep 5.5s ease-in-out infinite}
.xhero .house{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1100px,96%);height:auto;z-index:1}
.house .hs{fill:#15180F}.house .hr{fill:#0F110C}.house .hw{fill:#3B3115}.house .hd{fill:#21241C}.house .hb{fill:#13200C}
.house .bl{fill:#FFE6A6;filter:drop-shadow(0 0 5px rgba(255,214,120,.95))}
.house .bl.b2,.house .bl.b5{fill:var(--lime);filter:drop-shadow(0 0 5px rgba(155,234,30,.9))}
.house .bs{fill:var(--lime);filter:drop-shadow(0 0 4px rgba(155,234,30,.9))}
.house .bs.b0,.house .bs.b3{fill:#FFE6A6}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.b1{animation:twinkle 2.6s ease-in-out infinite}.b3{animation:twinkle 3.4s ease-in-out .8s infinite}.b5{animation:twinkle 2.2s ease-in-out 1.4s infinite}
.xhero .tag{position:absolute;left:max(20px,env(safe-area-inset-left,0px));top:clamp(5rem,8.5vw,7rem);z-index:2;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.xhero .tag i{font-style:normal;color:var(--lime)}
.xhero .bl2{position:absolute;left:max(20px,env(safe-area-inset-left,0px));bottom:2rem;z-index:2;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.xhero .btn{background:var(--lime);color:var(--lime-ink)}
.xhero .btn:hover{background:var(--bg);color:var(--ink)}
.xhero .tlink{color:var(--bg)}
.xhero .br{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:2rem;text-align:right;z-index:2;line-height:1.6;color:#C9C6BE}
.xhero .br b{color:var(--lime);font-weight:800;font-size:13px;letter-spacing:.06em}
@media (max-width:700px){.xhero{height:auto;min-height:0;padding:6.5rem 0 1.5rem;display:grid;gap:1.4rem}.xhero .tag,.xhero .bl2{position:relative;left:auto;top:auto;bottom:auto;padding-inline:20px}.xhero .xmark{top:32%}.xhero .house{position:relative;left:auto;transform:none;width:100%;margin-top:1rem}.xhero .br{display:none}}

/* promo sections */
.promo{background:var(--panel);border-bottom:1px solid var(--line)}
.promo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);padding-block:clamp(3.5rem,8vw,6rem);align-items:start}
.promo .lead{display:grid;gap:1.3rem;min-width:0}
.promo h2{font-size:clamp(2.6rem,6vw,5.2rem)}
.promo h2 i{font-style:normal;color:var(--lime)}
.promo .lead p{color:var(--muted);font-size:16px;max-width:46ch}
.promo .lead .btn{justify-self:start}
.promo .note2{display:flex;align-items:center;gap:.6rem;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.promo .note2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);flex:none}
.incl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.incl li{display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.incl .n{font-weight:800;font-size:1.05rem;color:var(--muted)}
.incl b{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.incl span.d{color:var(--muted);font-size:14px}
.promo .pic{margin:0;display:grid;gap:.5rem}
.promo .pic img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;max-height:520px}
.promo .pic figcaption{color:var(--muted)}
.promo .right{display:grid;gap:1.4rem;min-width:0}
@media (max-width:860px){.promo .wrap{grid-template-columns:1fr}}

/* reviews */
.reviews{background:var(--panel);border-top:1px solid var(--line)}
.reviews .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4rem);padding-block:clamp(3rem,7vw,5.5rem);align-items:start}
.reviews h2{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.reviews .side{display:grid;gap:1.2rem;align-content:start}
.reviews .side p{color:var(--muted);max-width:36ch}
.rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.rev{margin:0;background:var(--bg);padding:1.5rem 1.6rem;display:grid;gap:1.2rem;align-content:space-between;border-left:4px solid var(--lime)}
.rev blockquote{margin:0;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.rev .by{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;color:var(--muted)}
.rev .by b{color:var(--ink);font-weight:700}
.rev .src{display:inline-flex;align-items:center;gap:.4rem}
.rev .src::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime)}
@media (max-width:860px){.reviews .wrap{grid-template-columns:1fr}}
@media (max-width:560px){.rlist{grid-template-columns:1fr}}

/* request block */
.order{background:var(--ink);color:var(--bg);text-align:center}
.order .wrap{display:grid;justify-items:center;gap:1.4rem;padding-block:clamp(4rem,9vw,7rem)}
.order h2{font-size:clamp(3.4rem,12vw,11rem);cursor:pointer;transition:color .25s;line-height:.85}
.order h2:hover,.order-h:hover h2{color:var(--lime)}
.order-h{text-decoration:none;color:inherit}
.order p{font-size:clamp(1rem,1.8vw,1.35rem);color:#C9C6BE}
.order mark{background:var(--lime);color:var(--lime-ink);padding:0 .3em}


/* request window */
.ov[hidden]{display:none}
.ov{position:fixed;inset:0;z-index:50;background:rgba(18,18,16,.55);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.win{background:var(--panel);width:min(860px,100%);max-height:100%;overflow:auto;position:relative}
.win-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.6rem 1.6rem 1rem;border-bottom:1px solid var(--line)}
.win-h h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.win-h .lbl{color:var(--muted);margin-top:.6rem;display:block}
.x{background:none;border:0;font-size:22px;cursor:pointer;line-height:1;padding:.2rem .4rem;color:var(--ink)}
.win-b{padding:1.4rem 1.6rem 1.8rem;display:grid;gap:1.4rem}
.steps-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.steps-bar li{display:flex;align-items:center;gap:.6rem;padding-bottom:.7rem;border-bottom:3px solid var(--line);font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.steps-bar li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink);letter-spacing:0}
.steps-bar li.on{border-color:var(--ink);color:var(--ink)}
.steps-bar li.on span{background:var(--ink);color:var(--lime)}
.steps-bar li.done{border-color:var(--lime)}
.steps-bar li.done span{background:var(--lime);color:var(--lime-ink)}
.step{display:grid;gap:1rem}
.step[hidden],.jobber-load[hidden],.jobber-fallback[hidden]{display:none}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover{background:var(--lime);color:var(--lime-ink)}
.picked{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--bg);padding:.85rem 1rem;font-size:13.5px;color:var(--muted)}
.picked b{color:var(--ink)}
.jobber{min-height:120px;display:grid;gap:1rem}
.jobber iframe{width:100%!important;border:0;display:block}
.jobber-load{color:var(--muted);font-size:13.5px}
.jobber-fallback{background:var(--bg);padding:1.3rem 1.4rem;display:grid;gap:1rem;justify-items:start}
.jobber-fallback p{color:var(--muted);font-size:14px;max-width:52ch}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:.7rem .9rem;font:600 10.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:center;color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.opt:hover{border-color:var(--ink)}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.seg button{background:none;border:0;padding:.75rem 1.2rem;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sum{background:var(--bg);padding:1rem 1.1rem;font-size:13.5px;color:var(--muted)}
.sum b{color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.contact-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;border-top:1px solid var(--line);padding-top:1.2rem}
.contact-lines div{display:grid;gap:.25rem;min-width:0}
.contact-lines .lbl{color:var(--muted)}
.contact-lines span.v{font-weight:700;word-break:break-all;font-variant-numeric:tabular-nums}
.copy{justify-self:start;background:none;border:1px solid var(--line);padding:.3rem .7rem;font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.copy:hover{border-color:var(--ink)}
.note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){.opts{grid-template-columns:repeat(2,1fr)}.contact-lines{grid-template-columns:1fr}}

/* scroll reveal: only where supported, content stays visible otherwise */
@supports (animation-timeline: view()){
  .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes up{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

#request{scroll-margin-top:120px}

/* about: owner photo */
.split .txt .sig{color:var(--ink);font-weight:700;font-size:15px}
.split .pic.owner{display:grid;gap:.6rem}
.split .pic.owner figcaption{color:var(--muted)}
/* header: stacked bulldog + SodSquad logo */
.hlogo img{height:80px;width:auto;display:block}
@media (max-width:900px){.hlogo img{height:64px}}
@media (max-width:420px){.hlogo img{height:58px}}

/* pricing */
.promo .lead .bigprice{color:var(--ink)}
.bigprice{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;font-weight:700;font-size:15px}
.bigprice b{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.bigprice span{flex-basis:100%;color:var(--muted);font-weight:500;font-size:14px}
.ptag{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);margin-top:-.15rem}
.ptag::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:.5rem;vertical-align:middle;position:relative;top:-1px}
.slist .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.slist .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.slist .sgrid{grid-template-columns:1fr}}
.slist:not(.rec) .sitem:last-child{grid-column:1/-1}
@media (max-width:900px){.slist:not(.rec) .sitem:last-child{grid-column:auto}}
.pnote{color:var(--muted);font-size:14px;padding-block:0 2.5rem;max-width:none}
.hedge{background:var(--panel)}
.hedge .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(3rem,7vw,5rem);align-items:start}
.hedge h2{font-size:clamp(2.2rem,5vw,4rem);margin:.8rem 0}
.hedge h2 i{font-style:normal;color:var(--lime)}
.hedge p{color:var(--muted)}
.ptable{border-top:2px solid var(--ink)}
.pr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.pr span{font-weight:700;font-size:1.05rem}
.pr em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:14px}
.pr b{font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:820px){.hedge .wrap{grid-template-columns:1fr}}

/* how it works / promises / calendar / talk */
.how .wrap,.checks .wrap{padding-block:clamp(3.5rem,8vw,6rem);display:grid;gap:2.2rem}
.how{border-bottom:1px solid var(--line)}
.how-head{display:grid;gap:.8rem}
.how h2,.checks h2,.cal h2{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.how h2 i,.checks h2 i,.cal h2 i{font-style:normal;color:var(--lime)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;counter-reset:none}
.how-steps li{display:grid;gap:.6rem;align-content:start;padding-top:1.2rem;border-top:3px solid var(--ink)}
.how-steps .n{font-weight:800;font-size:1.6rem;color:var(--lime-ink);background:var(--lime);justify-self:start;padding:.1rem .5rem}
.how-steps h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.how-steps p,.chk-grid p{color:var(--muted);font-size:15px}
.how .btn{justify-self:start}
@media (max-width:820px){.how-steps{grid-template-columns:1fr}}
.checks{background:var(--panel)}
.chk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.chk-grid article{background:var(--bg);padding:1.6rem;display:grid;gap:.6rem;align-content:start}
.chk-i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:800}
.chk-grid h3{font-size:clamp(1.2rem,2vw,1.5rem)}
@media (max-width:820px){.chk-grid{grid-template-columns:1fr}}
.cal{background:var(--ink);color:var(--bg)}
.cal .wrap{padding-block:clamp(3.5rem,8vw,6rem);display:grid;gap:2rem}
.cal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#2A2A27;border:1px solid #2A2A27}
.cal-i{background:var(--ink);padding:1.5rem;display:grid;gap:.5rem;align-content:start}
.cal-i .lbl{color:#A7A49C}
.cal-i h3{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--bg)}
.cal-i p{color:#A7A49C;font-size:14.5px}
.cal-i.now{background:var(--lime)}
.cal-i.now h3,.cal-i.now p,.cal-i.now .lbl{color:var(--lime-ink)}
.cal-note{color:#A7A49C}
@media (max-width:900px){.cal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cal-grid{grid-template-columns:1fr}}
.talk{background:var(--panel);border-top:1px solid var(--line)}
.talk .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:2.2rem}
.talk h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.talk p{color:var(--muted)}
.talk .btn{margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:640px){.talk .btn{margin-left:0}}

/* seasonal recommendations on Home */
.rec{border-bottom:1px solid var(--line)}
.rec .work-head .lbl{display:block;margin-bottom:.8rem}
.rec-intro{color:var(--muted);max-width:56ch;margin:-0.6rem 0 2rem;font-size:16px}
.rec .sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.rec .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.rec .sgrid{grid-template-columns:1fr}}


/* Christmas hero photo */
.xhero .xphoto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 55%;z-index:0}
.xhero .xshade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,9,7,.82) 0%,rgba(8,9,7,.35) 42%,rgba(8,9,7,0) 65%),linear-gradient(0deg,rgba(8,9,7,.75) 0%,rgba(8,9,7,0) 30%)}
.xhero .strand{z-index:1}
@media (max-width:700px){.xhero{padding-top:0}.xhero .xphoto{position:relative;height:auto;aspect-ratio:4/3;object-position:62% 50%}.xhero .xshade{display:none}.xhero .strand{height:56px}}

/* ===== base (matches the artifact skeleton so every page behaves the same) ===== */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html[data-season="holiday"] [data-only]:not([data-only~="holiday"]),
html[data-season="spring"] [data-only]:not([data-only~="spring"]),
html[data-season="mowing"] [data-only]:not([data-only~="mowing"]){display:none!important}

/* ===== multi-page ===== */
.pnav{display:none;border-top:1px solid var(--line)}
.pnav .wrap{display:flex;gap:1.3rem;overflow-x:auto;padding-block:.7rem;scrollbar-width:none}
.pnav a{text-decoration:none;white-space:nowrap}
@media (max-width:900px){.pnav{display:block}}
.row2{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.tlink-d{color:var(--bg)}
.phead{background:var(--ink);color:var(--bg)}
.phead .wrap{padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4.2rem);display:grid;gap:1.2rem}
.phead .lbl{color:#A7A49C}
.phead h1{margin:0;font-size:clamp(3rem,9.5vw,8.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.88;text-wrap:balance}
.phead h1 i,.mowsec h2 i,.split h2 i,.faq h2 i{font-style:normal;color:var(--lime)}
.phead p{color:#C9C6BE;max-width:56ch;font-size:clamp(1rem,1.5vw,1.15rem)}

/* services */
.mowsec .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);padding-block:clamp(3.5rem,8vw,6rem);align-items:start;border-bottom:1px solid var(--line)}
.mowsec .txt,.split .txt{display:grid;gap:1.3rem;align-content:start;min-width:0}
.mowsec h2,.split h2{font-size:clamp(2.6rem,6vw,5rem)}
.mowsec .txt p,.split .txt p{color:var(--muted);font-size:16px;max-width:48ch}
.mowsec .btn,.split .btn{justify-self:start}
.plans{display:grid;gap:.9rem;min-width:0}
.plan{background:var(--panel);padding:1.4rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;align-items:baseline;border-left:4px solid var(--line)}
.plan .lbl{grid-column:1/-1;color:var(--muted)}
.plan h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.plan .price{font-weight:700;font-size:14px;white-space:nowrap}
.plan .price b{font-size:1.6rem;letter-spacing:-.02em}
.plan p:last-child{grid-column:1/-1;color:var(--muted);font-size:14px}
.plan.hot{background:var(--ink);color:var(--bg);border-left-color:var(--lime)}
.plan.hot .lbl{color:var(--lime)}
.plan.hot p:last-child{color:#A7A49C}
.plan.hot .price b{color:var(--lime)}
@media (max-width:860px){.mowsec .wrap{grid-template-columns:1fr}}
.slist .wrap{padding-block:clamp(3.5rem,8vw,6rem)}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sitem{background:var(--bg);padding:1.6rem 1.5rem 1.7rem;display:grid;gap:.6rem;align-content:start}
.sitem .n{font-weight:800;color:var(--muted);font-size:1rem}
.sitem h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.sitem p{color:var(--muted);font-size:14px}
.sitem .rq{color:var(--ink);text-decoration:underline;text-underline-offset:5px;margin-top:.3rem}
.sitem .rq:hover{text-decoration-color:var(--lime);text-decoration-thickness:3px}
@media (max-width:900px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.sgrid{grid-template-columns:1fr}}
.split{background:var(--panel)}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);padding-block:clamp(3.5rem,8vw,6rem);align-items:center}
.split .pic{margin:0;min-width:0}
.split .pic img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;max-height:620px}
@media (max-width:860px){.split .wrap{grid-template-columns:1fr}}
.work .grid + .grid{margin-top:1.6rem}

/* contact */
.cform .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);padding-block:clamp(3rem,7vw,5rem);align-items:start}
.formbox{background:var(--panel);padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1rem;min-width:0}
.jobber{min-height:140px;display:grid;gap:1rem}
.jobber iframe{width:100%!important;border:0;display:block}
.jobber-load{color:var(--muted);font-size:14px}
.jobber-fallback{display:grid;gap:1rem;justify-items:start}
.jobber-fallback p{color:var(--muted);font-size:15px;max-width:48ch}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line);min-width:0}
.crow{display:grid;gap:.25rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.crow .lbl{color:var(--muted)}
.crow .v{font-weight:700;font-size:1.15rem;text-decoration:none;word-break:break-word;font-variant-numeric:tabular-nums}
.crow .v.sm{font-size:.98rem;font-weight:500}
@media (max-width:860px){.cform .wrap{grid-template-columns:1fr}}
.faq{background:var(--panel)}
.faq .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(3rem,7vw,5rem);align-items:start}
.faq h2{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.faq-list{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:700;font-size:1.05rem;padding-block:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–";color:var(--lime-ink)}
.faq details p{color:var(--muted);padding-bottom:1.2rem;max-width:62ch}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink);color:#C9C6BE}
footer .wrap.fgrid{display:grid;grid-template-columns:1.2fr .6fr 1fr;gap:2rem;padding-block:clamp(2.5rem,6vw,4rem);align-items:start}
footer .logo{justify-self:start}
footer .flogo img{height:auto;width:min(240px,70vw);display:block}
.fbrand{display:grid;gap:1rem}
.fbrand p{font-size:14px;max-width:36ch;color:#A7A49C}
.flinks{display:grid;gap:.7rem}
.flinks a,.fcontact a{text-decoration:none;color:var(--bg)}
.flinks a:hover,.fcontact a:hover{color:var(--lime)}
.fcontact{display:grid;gap:.7rem}
footer .fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.3rem;border-top:1px solid #2A2A27}
footer .btn{background:var(--lime);color:var(--lime-ink)}
footer .btn:hover{background:var(--bg);color:var(--ink)}
@media (max-width:760px){footer .wrap.fgrid{grid-template-columns:1fr}}

/* readability pass: larger labels, buttons and small print */
.lbl{font-size:12.5px;letter-spacing:.16em}
.btn{font-size:12.5px;letter-spacing:.15em}
.tlink{font-size:12.5px;letter-spacing:.15em}
.mbar a{font-size:12.5px}
.frame .tagB,.frame .tagA{font-size:11px}
.frame .pill{font-size:11px}
.card .code{font-size:12px}
.note,.note2{font-size:12px}
.sitem p,.how-steps p,.chk-grid p,.cal-i p,.cat p,.incl span.d{font-size:15px}
.rev .by{font-size:12px}
.order-call{font-size:clamp(1rem,1.6vw,1.2rem);color:#C9C6BE}
.order-call a{color:var(--lime);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.how .btn[hidden]{display:none}
@media (max-width:560px){.work-head{flex-direction:column;align-items:flex-start;gap:1rem}}

/* season-filtered service list: auto numbering, no gaps when items hide */
.slist:not(.rec) .sgrid{counter-reset:svc;background:none;border:0;gap:1px}
.slist:not(.rec) .sitem{counter-increment:svc;box-shadow:0 0 0 1px var(--line)}
.slist:not(.rec) .sitem .n::before{content:counter(svc,decimal-leading-zero)}
.slist:not(.rec) .sitem:last-child{grid-column:auto}
