/* Top Trimmers Home mock. Webild "GreenScape" look in Top Trimmers' own brand; desktop first, then a separate
   phone layout (max-width 900px) built on Roto-Rooter's phone mechanics: alternating grounds, angled cuts,
   shapes over boxes, one idea per screen, three stacked buttons under the hero. Feedback round 22 Oct 2026. */
:root{
  --ground:#f7f9f4; --card:#ffffff; --ink:#16210f; --muted:#56624f; --dark:#0b0f09;
  --line:rgba(22,33,15,.09);
  --r-card:24px; --r-pill:999px;
  --wrap:1360px; --gut:48px; --sec:128px;
  /* Emerald (picked 22 Oct). Contrast, computed: white on deep 6.58, deep on ground 6.20, on-dark on #0b0f09 10.83 */
  --acc:#1FA463; --deep:#0E6B3F; --on-dark:#3DDC84; --deep-ink:#08321d;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--ground);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.pill.on-photo{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(8px)}
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 24px;border-radius:var(--r-pill);font-weight:600;font-size:15px;border:0;cursor:pointer;white-space:nowrap;font-family:inherit;transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn .chip{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.btn-main{background:var(--deep);color:#fff}
.btn-call{background:#fff;color:var(--ink)}
.btn-call .chip{background:var(--deep);color:#fff}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-ghost .chip{background:var(--ground)}
.btn-wa{background:#25D366;color:#0b2414}
h2{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.lede{color:var(--muted);max-width:56ch;margin-top:16px}
.sec{padding:var(--sec) 0}
.sec.tight{padding-top:0}
.sec-head{text-align:center;display:grid;justify-items:center;gap:16px;margin-bottom:56px}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.eyebrow.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:middle}
.acc{color:var(--deep)}
.g{width:22px;height:22px;flex:none}
.gstars{color:#FBBC04;letter-spacing:2px;font-size:17px}
.only-phone{display:none}

/* 1 Header: the see-through bar as a floating pill on desktop, its inner edge on the page's one container edge */
.hdr{position:fixed;top:14px;left:calc(max(var(--gut),(100% - var(--wrap)) / 2 + var(--gut)) - 36px);right:calc(max(var(--gut),(100% - var(--wrap)) / 2 + var(--gut)) - 36px);z-index:30;border-radius:var(--r-pill);background:rgba(11,15,9,.38);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px -24px rgba(0,0,0,.5);transition:background .3s}
.hdr.scrolled{background:rgba(11,15,9,.82)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;max-width:none;padding:0 36px;transition:height .3s}
.hdr.scrolled .hdr-in{height:74px}
.hdr .logo img{height:65px;width:auto;transition:height .3s}
.hdr.scrolled .logo img{height:54px}
.hdr nav{display:flex;gap:28px;color:#fff;font-size:15px;font-weight:500}
.hdr nav a{opacity:.9}.hdr nav a:hover{opacity:1;color:var(--on-dark)}
.hdr .acts{display:flex;gap:16px;align-items:center}
.hdr-tel{display:flex;align-items:center;gap:10px;color:#fff}
.hdr-tel .ic{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--on-dark);color:var(--dark)}
/* The call button pulses gently so it reads as something to press (Jéan, 22 Oct) */
.hdr-tel .ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--on-dark);animation:ping 2.4s ease-out infinite;z-index:-1}
.hdr-tel .ph-call{display:none}
.hdr-tel small{display:block;font-size:12px;opacity:.75;line-height:1.2}
.hdr-tel b{font-size:17px;letter-spacing:.01em;line-height:1.2}
.hdr .btn{height:46px;font-size:14px;padding:0 6px 0 20px}
.hdr .btn .chip{width:34px;height:34px}
.menu{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);place-items:center;font-size:20px;color:#fff}

/* 2 Hero (pool photo, form on the hero): fills the screen (no white strip), content sits low and grounded,
   promise badges slide in one by one (Roto-Rooter), an angled cut into the reviews */
.hero{position:relative;height:100vh;height:100svh;min-height:720px;color:#fff;display:flex;align-items:flex-end;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%)}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,6,.68) 0%,rgba(10,18,6,.4) 42%,rgba(10,18,6,.1) 70%),linear-gradient(180deg,rgba(10,18,6,.45) 0%,rgba(10,18,6,0) 22%,rgba(10,18,6,0) 60%,rgba(10,18,6,.45) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(56px,8vw,128px);align-items:end;padding-top:118px;padding-bottom:calc(4vw + clamp(28px,5vh,64px))}
.hero h1{all:unset}
.hero .line{font-size:clamp(40px,4.2vw,62px);line-height:1.04;letter-spacing:-.025em;font-weight:600;margin:20px 0 16px;max-width:15ch;text-shadow:0 1px 24px rgba(0,0,0,.25)}
.hero .intro{font-size:18px;max-width:46ch;color:rgba(255,255,255,.9)}
.hero .ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.h-areas{margin-top:14px;font-size:14px;color:rgba(255,255,255,.85)}
.h-badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0}
.h-badges li{transform:skewX(-12deg);background:var(--on-dark);color:var(--dark);border-radius:6px;padding:7px 14px;font-weight:700;font-size:14px;animation:slidein .8s ease both}
.h-badges li span{display:block;transform:skewX(12deg)}
.h-badges li:nth-child(1){animation-delay:.5s}.h-badges li:nth-child(2){animation-delay:.8s}
.h-badges li:nth-child(3){animation-delay:1.1s}.h-badges li:nth-child(4){animation-delay:1.4s}
@keyframes slidein{from{transform:skewX(-12deg) translateX(110vw)}to{transform:skewX(-12deg)}}
.hero .ctas{margin-top:24px}
.btn .chip svg{width:18px;height:18px}
.gpill{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:#fff;color:#202124;border-radius:var(--r-pill);padding:8px 16px 8px 10px;font-size:14px;font-weight:500}
.gpill .stars{color:#FBBC04;letter-spacing:1px}
.form{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:28px;padding:26px 28px 28px}
.form h2{font-size:24px;letter-spacing:-.01em}
.form .sub{font-size:14px;color:rgba(255,255,255,.88);margin-top:4px}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:16px}
.form label{display:grid;gap:5px;font-size:13px;font-weight:500;color:rgba(255,255,255,.92)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:0;border-radius:14px;height:46px;padding:0 14px;width:100%}
.form textarea{height:72px;padding:12px 14px;resize:none}
.form .btn{width:100%;justify-content:space-between;margin-top:14px}

/* 4 Reviews: Bobby's scroller (shelf 10), now moving on its own; pauses on hover or touch */
.grev h2{margin:10px 0 24px}
.gbar{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 20px;box-shadow:0 10px 30px -18px rgba(10,18,6,.35);font-size:16px}
.gbar a{color:var(--deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gtrack-wrap{position:relative;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gtrack-wrap{overflow:hidden}
.gtrack{display:flex;width:max-content;padding:4px 0 24px;will-change:transform}
.gtrack>*{margin-right:20px}
.gtrack.run{animation:marquee var(--dur,60s) linear infinite}
.gtrack-wrap:hover .gtrack.run,.gtrack.paused{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.gtrack::-webkit-scrollbar{display:none}
.gcard{flex:0 0 440px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:grid;grid-template-rows:auto 1fr auto;gap:18px;box-shadow:0 10px 30px -22px rgba(10,18,6,.4)}
.gtop{display:flex;align-items:center;gap:10px}
.gtop .q{margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:30px;line-height:1;padding-top:10px;font-family:Georgia,serif}
.gcard p{font-size:16px}
.gwho{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:2px}
.gwho b{text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.gwho span{color:var(--muted);font-size:14px}
.gnav{display:flex;justify-content:flex-end;gap:12px}
.gnav button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--deep);background:transparent;color:var(--deep);font-size:20px;cursor:pointer;display:grid;place-items:center}
.gnav svg{width:20px;height:20px;fill:currentColor}
.gpause .i-play,.gpause[aria-pressed="true"] .i-pause{display:none}
.gpause[aria-pressed="true"] .i-play{display:block}
.gnav button:hover{background:var(--deep);color:#fff}
#quote{scroll-margin-top:120px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* 5 Owner: shelf 5, photo + floating checklist; the checklist is see-through so Tylor shows through it */
.about-in{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"media head" "media copy";column-gap:72px;row-gap:22px;align-items:center}
.about-head{grid-area:head;align-self:end;display:grid;gap:22px;justify-items:start}
.about-media{grid-area:media;position:relative;padding-bottom:64px;padding-right:56px}
.about-photo{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 25%}
.checklist{position:absolute;right:0;bottom:0;width:min(310px,66%);background:rgba(8,40,22,.5);backdrop-filter:blur(5px) saturate(1.3);-webkit-backdrop-filter:blur(5px) saturate(1.3);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:20px;padding:24px 24px 14px;box-shadow:0 30px 60px -25px rgba(10,18,6,.5);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.checklist h3{font-size:19px;line-height:1.25;margin-bottom:12px}
.checklist ul{list-style:none}
.checklist li{display:flex;gap:10px;align-items:center;font-size:15px;padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
.checklist li::before{content:"\2713";flex:none;width:20px;height:20px;border-radius:50%;background:var(--on-dark);color:var(--dark);font-size:12px;font-weight:700;display:grid;place-items:center}
.about-copy{grid-area:copy;align-self:start;display:grid;gap:22px;justify-items:start}
.since{display:flex;align-items:center;gap:18px;background:linear-gradient(160deg,var(--deep),var(--deep-ink));color:#fff;border-radius:18px;padding:18px 24px;width:100%}
.since b{font-size:44px;line-height:1;color:var(--on-dark)}
.since span{display:grid;font-size:14px;color:rgba(255,255,255,.8)}
.since strong{color:#fff;font-size:17px}
.about-copy p{color:var(--muted)}

/* 6 + 7 How it works with the promises: the three steps are tiles in one puzzle, each with its promise,
   beside a job photo, the Google rating and a customer's words; then the mower rides the slogan */
.puzzle{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:290px 230px;gap:16px;grid-template-areas:"s1 s2 s3 ph" "b q q ph"}
.pz{position:relative;margin:0;border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
.pz .n{position:absolute;top:24px;left:28px;font-size:44px;font-weight:600;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.3px var(--deep)}
.pz h3{font-size:21px;line-height:1.25}
.pz>span:not(.n){font-size:15px;color:var(--muted);max-width:30ch}
.pz b{font-size:clamp(56px,5.4vw,80px);line-height:.95;letter-spacing:-.04em;font-weight:600}
.pz b i{font-style:normal;font-size:.42em;color:#FBBC04;vertical-align:.9em;margin-left:4px}
.pz-s1{grid-area:s1}.pz-s2{grid-area:s2}.pz-s3{grid-area:s3}
.pz-s1,.pz-s2,.pz-s3,.pz-b,.pz-quote{background:#fff;border:1px solid var(--line)}
.pz-s2 b{color:var(--deep)}
.pz-photo{grid-area:ph;padding:0}
.pz-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.pz-b{grid-area:b}
.pz-b b{color:var(--deep)}
.pz-b>span:not(.n){color:var(--muted)}
.pz-quote{grid-area:q;color:var(--ink);justify-content:space-between}
.pz-quote p{font-size:20px;line-height:1.45;letter-spacing:-.01em}
.pz-quote footer{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);background:none;margin:0;padding:0}

/* 8 Services: bento with captions */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:16px}
.bt{position:relative;border-radius:20px;overflow:hidden;display:block;color:#fff}
.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bt:hover img{transform:scale(1.04)}
.bt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,6,0) 35%,rgba(10,22,6,.85) 100%)}
.bt .cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:grid;gap:6px}
.bt .cap b{font-size:22px;letter-spacing:-.01em}
.bt .cap span{font-size:14px;color:rgba(255,255,255,.88);max-width:46ch}
.b-tall{grid-row:span 2}
.b-wide{grid-column:span 2}

/* 9 Recent jobs: before/after sliders on top, then job photos */
.ba-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.ba{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:1/1;--p:50%;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .bef{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--p);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--deep);display:grid;place-items:center;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}
.ba{cursor:ew-resize}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba .lab{position:absolute;top:16px;padding:5px 12px;border-radius:var(--r-pill);background:rgba(11,15,9,.6);color:#fff;font-size:13px;font-weight:600;pointer-events:none}
.ba .lab.l{left:16px}.ba .lab.r{right:16px}
.ba figcaption{position:absolute;left:16px;bottom:16px;padding:6px 14px;border-radius:var(--r-pill);background:#fff;font-size:14px;font-weight:600;pointer-events:none}
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.job{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:1/1}
.job img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.job::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,18,6,.75))}
.job span{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff;font-weight:600}
.job small{display:block;font-weight:400;opacity:.85}

/* 10 Who it's for: photo tiles with the caption on the photo, the same as the services */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wt{height:360px}

/* 11 Blogs (three planned posts, coming soon) */
.blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-rows:220px auto}
.bcard .ph{position:relative}
.bcard img{width:100%;height:100%;object-fit:cover}
.bcard .soon{position:absolute;left:16px;top:16px;background:#fff;color:var(--ink);padding:5px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600}
.bcard div.t{padding:22px 26px 28px;display:grid;gap:8px}
.bcard small{color:var(--deep);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.bcard h3{font-size:20px;line-height:1.3}

/* 12 FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start}
.faq details{background:var(--card);border-radius:18px;padding:20px 24px;border:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:500;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:28px;height:28px;flex:none;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);margin-top:12px;font-size:15px}

/* 13 Locations: shelf 09 structure */
.loc-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.loc-head h2{margin-top:10px}
.acards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.acard{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:16px;padding:16px 18px;transition:transform .2s}
.acard:hover{transform:translateY(-2px)}
.pin{width:40px;height:40px;flex:none;border-radius:12px;background:var(--deep);color:var(--on-dark);display:grid;place-items:center}
.acard small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.acard b{font-size:18px}
.also-h{font-size:17px;margin:40px 0 14px}
.also{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin-bottom:36px}
.also li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:500}
.also .pin{width:28px;height:28px;border-radius:8px}
.also .pin svg{width:14px;height:14px}

/* 14 Call to action: their old homepage hero (estate lawn) as a full-width band with angled edges, no box */
.cta{position:relative;margin-top:var(--sec);padding:calc(120px + 4vw) 0 calc(120px + 4vw);color:#fff;background:var(--dark);clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%);overflow:hidden}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,9,.6),rgba(11,15,9,.82))}
.cta .pill.on-photo{background:rgba(11,15,9,.72);border-color:rgba(255,255,255,.35);backdrop-filter:none}
.cta-in{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:20px}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* 15 Footer */
footer{background:var(--deep-ink);color:#e9f2e2;margin-top:var(--sec);padding:80px 0 32px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer .flogo{height:84px;width:auto}
footer h3,footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px;font-size:15px}
footer .base{border-top:1px solid rgba(255,255,255,.18);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;font-size:13px;opacity:.8}

/* Floating WhatsApp, bottom right */
.fwa{position:fixed;right:24px;bottom:24px;z-index:45;width:62px;height:62px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);transition:transform .3s,opacity .3s}
.fwa:hover{transform:scale(1.07)}
.fwa.fwa-off{opacity:0;pointer-events:none}
.fwa svg{width:34px;height:34px}
.fwa::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;animation:ping 2.4s ease-out infinite;z-index:-1}
@keyframes ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.6);opacity:0}}

/* Phone sticky bar (8.24: hidden until the hero form is passed) */
.sticky{display:none}

/* Scroll reveals: short, one direction, staggered */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .hero picture img,.h-badges li,.fwa::before,.hdr-tel .ic::before{animation:none!important}
  .h-badges li{transform:skewX(-12deg)}
}

@media (min-width:901px) and (max-height:860px){
  .hero .intro{display:none}
}
@media (max-width:1180px){
  .hdr nav{gap:18px;font-size:14px}
  .hdr-tel small{display:none}
}
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) 400px;gap:48px}
  .hdr nav{display:none}
}

/* ===================== Phone: its own layout (Roto-Rooter mechanics, this look) ===================== */
@media (max-width:900px){
  :root{--sec:56px;--gut:20px;--cut:7vw}
  .hdr{left:0;right:0}
  body{font-size:16px;line-height:1.55}
  .only-phone{display:block}
  .only-desk{display:none!important}
  h2{font-size:30px;line-height:1.12}
  .sec-head{text-align:left;justify-items:start;margin-bottom:28px;gap:10px}
  .btn{height:52px}

  /* Header: a full-width bar pinned to the very top (no floating gap on a phone); logo, call, menu */
  .hdr{top:0;width:100%;border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.14);box-shadow:none;background:rgba(11,15,9,.6);padding-top:env(safe-area-inset-top);backdrop-filter:none;-webkit-backdrop-filter:none}
  #quote{scroll-margin-top:80px}
  .hdr::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:inherit}
  .hdr.scrolled{background:rgba(11,15,9,.96)}
  .hdr-in{height:64px}
  .hdr.scrolled .hdr-in{height:64px}
  .hdr .logo img,.hdr.scrolled .logo img{height:46px}
  .hdr .acts .btn,.hdr-tel span:not(.ic){display:none}
  /* Phone: a labelled green "Call now" pill, so it's obvious the button rings them */
  .hdr-tel{height:44px;padding:0 16px 0 4px;gap:6px;border-radius:var(--r-pill);background:var(--on-dark);color:var(--deep-ink);font-weight:700;font-size:15px;white-space:nowrap;position:relative}
  .hdr-tel::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--on-dark);animation:callpulse 2.4s ease-out infinite;pointer-events:none}
  .hdr-tel .ic{width:36px;height:36px;background:none;color:var(--deep-ink)}
  .hdr-tel .ic::before{display:none}
  .hdr-tel .ph-call{display:inline;font-style:normal}
  @keyframes callpulse{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.18,1.45);opacity:0}}
  .menu{display:grid}
  .hdr .acts{gap:10px}

  /* Alternating grounds with angled cuts between them (no boxes, no borders) */
  .ph-cut{position:relative;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);margin-top:calc(var(--cut) * -1);padding-top:calc(var(--sec) + var(--cut))}
  .ph-cut.rev{clip-path:polygon(0 0,100% var(--cut),100% 100%,0 100%)}
  .gw{background:#fff}
  .gt{background:color-mix(in srgb,var(--acc) 9%,#f4f6f1)}
  .gd{background:linear-gradient(170deg,var(--deep),var(--deep-ink));color:#fff}
  .gd .eyebrow{color:var(--on-dark)}
  .gd .eyebrow.dot::before{background:var(--on-dark)}
  .gd .acc{color:var(--on-dark)}

  /* Hero on a phone (Roto-Rooter order): the photo, the line, promise badges sliding in one by one, the Google chip,
     then the form as a slimmer white card; Call, WhatsApp and Quote live in the sticky bar instead of three big buttons */
  /* The hero is the whole first screen (photo, line, badges, Google chip low over the photo, clear of the sticky bar);
     the quote form follows it, with room before the angled edge of the reviews */
  .hero{height:auto;min-height:0;display:block;background:var(--dark);clip-path:none}
  .hero picture,.hero picture img{position:absolute;inset:0 0 auto 0;height:100vh;height:100svh}
  .hero picture img{object-position:52% 62%;animation:settle 1.6s cubic-bezier(.19,1,.22,1) both}
  @keyframes settle{from{transform:scale(1.12)}to{transform:none}}
  .hero::after{bottom:auto;height:100vh;height:100svh;background:linear-gradient(180deg,rgba(10,18,6,.5) 0%,rgba(10,18,6,.3) 14%,rgba(11,15,9,.58) 28%,rgba(11,15,9,.52) 44%,rgba(11,15,9,.32) 60%,rgba(11,15,9,.85) 82%,var(--dark) 100%)}
  .hero .wrap{display:block;padding-top:0;padding-bottom:calc(var(--cut) + 48px);margin-top:0}
  /* Headline up in the tree line, then clear gaps: the badges and the Google chip sit low, apart from it and each
     other (Jéan, 22 Oct) */
  .hero .wrap>div:first-child{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding-top:calc(64px + env(safe-area-inset-top) + 17svh);padding-bottom:calc(84px + 13svh)}
  .hero h1 .pill{font-size:12.5px;padding:6px 12px}
  .hero .line{font-size:32px;line-height:1.08;margin:12px 0 0;max-width:none;text-shadow:0 2px 16px rgba(0,0,0,.35)}
  .h-badges{margin:auto 0 0;padding-top:40px;gap:6px}
  .h-badges li{font-size:12.5px;padding:6px 11px}
  .hero .gpill{margin:28px 0 0;font-size:13px;padding:6px 14px 6px 8px}
  .form{background:#fff;color:var(--ink);border:0;border-radius:20px;backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px 18px 20px}
  .form h2{font-size:22px}
  .form .sub{color:var(--muted);font-size:13.5px}
  .form label{color:var(--ink);font-size:12.5px}
  .form .grid{gap:10px}
  .form input,.form select,.form textarea{background:var(--ground);border:1px solid var(--line);height:44px;font-size:16px;border-radius:12px}
  .form textarea{height:64px}

  /* Reviews: one card a screen, keeps moving */
  .gtrack-wrap{-webkit-mask-image:none;mask-image:none;margin-top:28px}
  .gcard{flex-basis:76vw;padding:18px;gap:12px}
  .gcard p{font-size:14.5px;line-height:1.5}
  .gtop .q{width:34px;height:34px;font-size:22px;padding-top:7px}
  .gwho{padding-top:12px}
  .gbar{font-size:15px;padding:12px 16px}
  .gnav{justify-content:flex-start}

  /* Owner: heading first, then the photo edge to edge with the see-through checklist pulled up over it */
  .about-in{grid-template-columns:1fr;grid-template-areas:"head" "media" "copy";row-gap:24px}
  .about-media{padding:0;margin:0 -20px}
  .about-photo{border-radius:0;aspect-ratio:1/1}
  .checklist{position:relative;width:auto;margin:-96px 20px 0}
  .since b{font-size:36px}

  /* How it works + promises: the desktop tiles stacked in order, one under the other */
  .puzzle{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;gap:10px;grid-template-areas:"s1" "s2" "s3" "ph" "b" "q"}
  .pz{padding:20px;border-radius:18px;min-height:0}
  .pz .n{position:static;font-size:34px;margin-bottom:6px}
  .pz h3{font-size:18px}
  .pz>span:not(.n){font-size:14.5px}
  .pz-s2 b{font-size:44px}
  .pz-photo{padding:0;height:240px}
  .pz-b{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .pz-b b{font-size:46px}
  .pz-quote p{font-size:16px}
  .pz-quote footer{font-size:12.5px;margin-top:14px}

  /* Services: all seven visible, a puzzle of tall, wide and square tiles. Jobs move on their own; blogs swipe */
  .swipe{display:flex!important;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 80vw;scroll-snap-align:center}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:168px;gap:10px}
  .bento .bt{border-radius:16px}
  .bento .bt:nth-child(7){grid-column:span 2}
  .bt .cap{left:14px;right:14px;bottom:13px;gap:3px}
  .bt .cap b{font-size:17px}
  .bt .cap span{font-size:12.5px;line-height:1.4}
  .bento .bt:not(.b-wide):not(.b-tall):not(:nth-child(7)) .cap span{display:none}
  /* Before/after: stacked, not a swipe row, so a sideways drag only ever moves the divider (Jéan, 22 Oct: "stuck") */
  .ba-row.swipe{display:grid!important;grid-template-columns:1fr;gap:12px;margin:0 0 24px;padding:0;overflow:visible;scroll-snap-type:none}
  .ba{border-radius:18px;aspect-ratio:4/5}
  .ba .bef{will-change:clip-path}
  #jobs-track{scroll-snap-type:none}
  #jobs-track>*{flex-basis:62vw}
  .jobs .job{aspect-ratio:4/5;border-radius:18px}

  /* Who it's for: one wide photo tile over two squares, the same tiles as the services */
  .who{grid-template-columns:1fr 1fr;gap:10px}
  .wt{height:200px;border-radius:16px}
  .wt:first-child{grid-column:span 2;height:220px}

  .bcard{grid-template-rows:200px auto;border:0}

  /* FAQ: lines, no boxes */
  .faq{grid-template-columns:1fr;gap:0}
  .faq details{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:18px 0}

  /* Locations: two columns of area chips */
  .loc-head{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  .acards{grid-template-columns:1fr 1fr;gap:10px}
  .acard{border:0;border-radius:14px;padding:12px;gap:10px;background:#fff}
  .acard .pin{width:32px;height:32px;border-radius:10px}
  .acard b{font-size:15.5px}
  .acard small{font-size:10.5px}
  .also{grid-template-columns:1fr 1fr}

  /* CTA band */
  .cta{padding:calc(64px + var(--cut)) 0 calc(64px + var(--cut));clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%);margin-top:0}
  .cta h2{font-size:28px}
  .cta .btns{display:grid;width:100%;justify-content:stretch}
  .cta .btns .btn{justify-content:center;border-radius:14px}

  footer{margin-top:0;padding:56px 0 120px}
  footer .cols{grid-template-columns:1fr 1fr;gap:32px 20px}
  footer .cols>div:first-child{grid-column:1/-1}
  footer .flogo{height:64px}
  footer .base{flex-direction:column}

  .sticky{display:grid;grid-template-columns:1fr 1.25fr 1.25fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,15,9,.96);border-top:1px solid rgba(255,255,255,.14)}
  .sticky a{height:46px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;font-weight:600;font-size:14.5px;white-space:nowrap}
  .sticky svg{width:17px;height:17px}
  .s-call{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
  .s-wa{background:#25D366;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.25)}   /* WhatsApp's own green and white, always (Jéan) */
  .s-call svg path{fill:#fff}
  .s-wa svg{width:18px;height:18px}
  .s-wa svg path{fill:#fff}
  .s-q{background:#fff;color:var(--deep-ink);font-weight:700}   /* white, so it never looks like the WhatsApp green */
  .fwa{display:none}
}

/* 15a Map card (Dr Kaplan's): words left on a pale green, the static street map right, attribution under it */
/* 15a Map above the footer: full-width service-area map, the details on a white card over the sea */
.mapsec{position:relative;display:flex;align-items:center;min-height:600px;padding:64px 0;background:#eef3ea}
.mc-map{position:absolute;inset:0;margin:0}
.mc-map picture,.mc-map img{position:absolute;inset:0;width:100%;height:100%}
.mc-map img{object-fit:cover;object-position:70% 50%}
.mc-map figcaption{position:absolute;right:12px;bottom:10px;z-index:1;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.85);font-size:12px;line-height:1.4;color:var(--muted)}
.mc-map figcaption a{text-decoration:underline;text-underline-offset:2px}
.mc-wrap{position:relative;z-index:1;width:100%}
.mc-text{max-width:440px;padding:40px;border-radius:var(--r-card);background:#fff;box-shadow:0 30px 60px -30px rgba(10,40,20,.35);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.mc-text h2{font-size:clamp(28px,3vw,40px)}
.mc-text ul{list-style:none;display:grid;gap:14px}
.mc-text li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.mc-text .pin{width:32px;height:32px;border-radius:10px}
.mc-text .pin svg{width:15px;height:15px}
/* Narrower screens: the words first, the map under them */
@media (max-width:1199px){
  .mapsec{flex-direction:column;align-items:stretch;min-height:0;padding:var(--sec) 0 0}
  .mc-wrap{order:-1;margin-bottom:40px}
  .mc-text{max-width:none;padding:0;background:none;box-shadow:none;border-radius:0}
  .mc-map,.mc-map picture{position:relative;inset:auto;display:block}
  .mc-map img{position:static;height:440px}
}
@media (max-width:600px){
  .mc-wrap{margin-bottom:28px}
  .mc-map img{height:auto;aspect-ratio:6/5;object-fit:cover;object-position:50% 16%}
}
footer{margin-top:0}

/* A quote + call row under most sections (lead site: a next step after every block) */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:48px}
.grev .cta-row{justify-content:flex-start;margin-top:32px}
@media (max-width:900px){
  .cta-row,.grev .cta-row{display:none}   /* the sticky bar does this job on a phone */
}
@media (max-width:900px){
  .acards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acard,.acard>span{min-width:0}
  .acard small{letter-spacing:.06em}
}

/* 5 Owner, two looks to choose from (preview switch bottom left). Nothing covers him; the checklist sits in the words */
.ow{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:22px;align-items:center}
.own-a .ow{grid-template-areas:"head fig" "copy fig"}
.ow-head{grid-area:head;align-self:end;display:grid;gap:22px;justify-items:start}
.ow-copy{grid-area:copy;align-self:start;display:grid;gap:22px;justify-items:start}
.ow-copy p{color:var(--muted)}
.ow-fig{grid-area:fig;position:relative;margin:0;height:640px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:var(--r-card)}
.ow-fig img{position:relative;z-index:1;height:94%;width:auto;max-width:none;object-fit:contain;object-position:bottom}
.own-a .ow-fig{height:auto;overflow:visible;border-radius:0;align-self:end;justify-content:center;margin-bottom:calc(var(--sec) * -1)}
.own-a .ow-fig img{position:static;height:700px;width:auto;-webkit-mask-image:linear-gradient(#000 74%,transparent 98%);mask-image:linear-gradient(#000 74%,transparent 98%)}
.tag{position:absolute;z-index:2;display:grid;gap:0;line-height:1.25}
.own-a .tag{left:0;bottom:calc(var(--sec) + 40px);padding-left:14px;border-left:3px solid var(--acc);color:var(--ink)}
.own-a .tag span{font-size:13px;color:var(--muted)}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;width:100%}
.ticks li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:500}
.ticks li::before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;background:var(--deep);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
@media (max-width:900px){
  .ow,.own-a .ow{grid-template-columns:1fr;grid-template-areas:"head" "fig" "copy";row-gap:24px}
  /* Tylor smaller, to the right, fading out at the waist; his name beside him */
  .own-a .ow-fig{margin:0;padding-left:40px;justify-content:center;align-self:stretch}
  .own-a .ow-fig img{height:330px}
  .own-a .tag{bottom:40px}
  .only-desk-btn{display:none!important}
  .ticks{grid-template-columns:1fr}
}

/* The mower rides "A CUT ABOVE" at the top of the footer and cuts the grass on it as you scroll down; scroll back up
   and he turns round */
.cutband{position:relative;--x:0;--mw:clamp(110px,15vw,210px);margin-bottom:64px}
.cb-art{display:block;width:100%;height:auto;overflow:visible}
.cb-art text{font-family:Inter,system-ui,sans-serif;font-weight:700;fill:#fff}
.cb-art .soil{fill:#2c6b3a}
.cb-art .gb{fill:#1d7a45}
.cb-art .gf{fill:var(--acc)}
.cb-art .stub{fill:#59c08a}
.cutband .mw{position:absolute;bottom:var(--top);left:calc(var(--x) * (100% - var(--mw)));width:var(--mw);line-height:0;transition:transform .35s ease}
.cutband .mw svg{width:100%;height:auto;display:block}
.cutband.back .mw{transform:scaleX(-1)}
@media (max-width:900px){.cutband{margin-bottom:48px}}
@media (max-width:340px){.own-a .ow-fig img{height:280px}}
@media (prefers-reduced-motion:reduce){.hdr-tel::after,.gtrack.run{animation:none!important}.gtrack-wrap{overflow-x:auto}}
@media (max-width:360px){.hdr-tel{padding-right:12px;font-size:14px;white-space:nowrap}.hdr .logo img,.hdr.scrolled .logo img{height:40px}}
@media (max-width:600px){.mc-map figcaption{font-size:10.5px;right:6px;bottom:6px;left:auto;padding:3px 8px}}

/* Very short phones (iPhone SE 1st gen, 320x568): the headline sits a little lower in the photo and the badges
   closer, so the Google chip stays clear of the sticky bar */
@media (max-width:900px) and (max-height:640px){
  .hero .wrap>div:first-child{padding-top:calc(64px + env(safe-area-inset-top) + 7svh);padding-bottom:calc(84px + 5svh)}
  .h-badges{padding-top:28px}
}

/* ===== Stage 5 (22 Oct 2026): links, menus, footer facts. Nothing here shows at rest except the footer additions ===== */
/* Laptop: Services opens its dropdown on hover or keyboard focus, in the header's own dark glass */
.hdr nav .dd{position:relative;display:flex}
.hdr .dd-m{position:absolute;top:100%;left:-22px;padding-top:22px;display:grid;min-width:250px;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.hdr .dd-m::before{content:"";position:absolute;inset:22px 0 0;border-radius:20px;background:rgba(11,15,9,.92);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.hdr .dd-m a{position:relative;padding:10px 22px;white-space:nowrap}
.hdr .dd-m a:first-child{margin-top:10px}.hdr .dd-m a:last-child{margin-bottom:10px}
.hdr .dd:hover .dd-m,.hdr .dd:focus-within .dd-m{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
/* Phone: the menu button opens the same six items, Services folding open */
.hdr .mnav{display:none}
@media (max-width:900px){
  .hdr.open{background:rgba(11,15,9,.96)}
  .hdr .mnav:not([hidden]){display:grid;padding:4px var(--gut) 18px;max-height:calc(100svh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;border-top:1px solid rgba(255,255,255,.14)}
  .mnav a,.mnav summary{display:block;padding:13px 0;color:#fff;font-weight:600;font-size:17px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer}
  .mnav summary{list-style:none;display:flex;justify-content:space-between}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav summary::after{content:"+";font-weight:400}
  .mnav details[open] summary::after{content:"\2212"}
  .mnav details a{padding-left:16px;font-weight:500;font-size:16px;color:rgba(255,255,255,.88)}
  body.typing .sticky{display:none}   /* 8.24: the bar steps aside while a form field is in use */
}
/* Blog cards: the title link covers the whole card */
.bcard{position:relative}
.bcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* Hero form on the preview: the inline note after a send */
.form .form-msg{margin-top:12px}
.form .form-msg a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* Footer: profile links and the Business Facts summary (12.5) */
footer .soc{display:flex;gap:10px;margin-top:20px}
footer .soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;transition:background .2s}
footer .soc a:hover{background:rgba(255,255,255,.2)}
footer .soc a svg{width:20px;height:20px}
footer .soc .soc-g{background:#fff}
footer a:hover{color:#fff}
footer .facts{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18);font-size:14px}
footer .facts p{opacity:.85;margin-bottom:12px}
footer .facts ul{grid-template-columns:1fr 1fr;gap:6px 40px;font-size:14px;opacity:.85}
footer .facts b{color:#fff;font-weight:600}
@media (max-width:900px){footer .facts ul{grid-template-columns:1fr}}
/* The shared placeholder page (coming-soon.html): the closing band at the top of the page */
.cs-page .cta.cs{margin-top:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%);padding-top:calc(160px + 4vw)}
.cs h1{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.02em;font-weight:600;max-width:20ch}
.cs p{max-width:52ch;opacity:.9}
@media (max-width:900px){.cs-page .cta.cs{padding-top:calc(100px + var(--cut));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}.cs h1{font-size:30px}}

/* Hero words column 10% bigger on desktop (Jean, 23 Oct 2026); the form and phones unchanged */
@media (min-width:901px){.hero .wrap>div:first-child{zoom:1.1}}
/* Hero keeps its full screen height; the words and the form sit centred between the menu bar (ends at 104px) and the slanted bottom, tops level, at least 32px clear of each (Jean, 23 Oct 2026) */
@media (min-width:901px){.hero{height:auto;min-height:max(720px,100vh);align-items:stretch}.hero .wrap{align-content:center;align-items:start;padding-top:136px;padding-bottom:calc(4vw + 32px)}}