/* ============================================================
GREENTAILS — design system
Locked before markup. One depth technique (hard offset),
two-shade green, Barlow Condensed display + Hanken Grotesk.
============================================================ */
:root{
--green:#1f8a50; /* brand green: large display text, accents, motifs */
--green-deep:#11693e; /* filled call CTAs, white text (AA) */
--green-dark:#0e3322; /* dark band */
--ground:#f2f6ef; /* page background, green-tinted near-white */
--surface:#ffffff;
--paper:#f8f5ea; /* secondary warm band, used sparingly */
--ink:#1a241d;
--ink-dim:#4d5c52;
--line:#d8e1d4;
--line-strong:#b9c7b4;
--amber:#8a5a12; /* stars + REAL VISIT tags only */
--shadow:3px 3px 0 rgba(26,36,29,.85);
--r-card:10px; --r-btn:6px;
--w:1120px;
--dw:min(86vw,max(330px,40vw)); /* off-canvas drawer width */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
body{margin:0;background:var(--ground);color:var(--ink);
font:400 17px/1.65 "Hanken Grotesk",system-ui,sans-serif;}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep)}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;line-height:1.12;
letter-spacing:-.01em;margin:0 0 .45em;color:var(--ink)}
h1{font-size:clamp(2.7rem,7.2vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600}
h3{font-size:1.28rem;font-weight:600}
p{margin:0 0 1em}
.small{font-size:.92rem;color:var(--ink-dim)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:780px}
/* ---------- buttons: action classes, closed vocabulary ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
min-height:50px;padding:.7em 1.45em;border:0;border-radius:var(--r-btn);
font:700 1.02rem/1.2 "Hanken Grotesk",sans-serif;text-decoration:none;
cursor:pointer;transition:transform .12s ease-out,box-shadow .12s ease-out}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn--call{background:var(--green-deep);color:#fff;box-shadow:var(--shadow)}
.btn--book{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.btn--more{background:transparent;color:var(--ink);border:2px solid var(--line-strong)}
.btn--lg{min-height:56px;font-size:1.1rem;padding:.8em 1.7em}
.btn--on-dark.btn--more{color:#fff;border-color:rgba(255,255,255,.55)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
@media (max-width:640px){
.cta-row{flex-direction:column;align-items:stretch}
.cta-row .btn{width:100%;min-height:48px}
}
/* ---------- header ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:1100}
.topbar .wrap{display:flex;align-items:center;gap:22px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;color:var(--green-deep)}
.brand svg{height:34px;width:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font:600 .98rem/1 "Hanken Grotesk",sans-serif;color:var(--ink);
text-decoration:none;padding:.65em .7em;border-radius:6px}
.nav a:hover{background:var(--ground)}
.nav a[aria-current]{color:var(--green-deep);
box-shadow:inset 0 -3px 0 var(--green)}
.topbar .tel-cta{margin-left:6px}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:10px;cursor:pointer}
@media (max-width:999px){
.topbar .tel-cta{display:none}
.nav-toggle{display:block}
/* the links move to the off-canvas drawer at the bottom of this file */
.nav{display:none}
}
/* ---------- hero (typographic) ---------- */
.hero{background:var(--green-dark);color:#fff;position:relative;overflow:hidden}
.hero .paws{position:absolute;inset:0;opacity:.07;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;
gap:40px;padding-top:56px;padding-bottom:84px;align-items:center}
.hero h1{color:#fff;margin-bottom:.3em}
.hero h1 .accent{color:#8fd6a4}
.hero .lede{font-size:1.14rem;max-width:34em;color:#e4efe4}
.hero .tel-line{font:600 1.05rem/1.4 "Hanken Grotesk",sans-serif;color:#cfe6d2;margin:.9em 0 0}
.hero .tel-line a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.trust-line{margin-top:1.1em;font-size:.95rem;color:#bcd9c0}
.trust-line .stars{color:#f3b73e;letter-spacing:2px}
@media (max-width:860px){
.hero .wrap{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:44px}
.hero h1{font-size:clamp(2.4rem,11vw,3.2rem)}
}
/* ---------- quote builder ---------- */
.builder{background:var(--surface);color:var(--ink);border-radius:var(--r-card);
box-shadow:var(--shadow);padding:22px 22px 24px}
.builder h2{font-size:1.5rem;margin-bottom:.2em}
.builder .sub{font-size:.95rem;color:var(--ink-dim);margin-bottom:1em}
.builder fieldset{border:0;margin:0 0 14px;padding:0}
.builder legend{font:600 .95rem/1.3 "Hanken Grotesk",sans-serif;margin-bottom:7px;color:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{background:var(--ground);border:2px solid var(--line);border-radius:6px;
color:var(--ink);font:600 .95rem/1.2 "Hanken Grotesk",sans-serif;
padding:.55em .9em;min-height:44px;cursor:pointer;
transition:transform .12s ease-out}
.opts button:active{transform:scale(.97)}
.opts button[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.builder .zip{width:100%;max-width:170px;border:2px solid var(--line-strong);border-radius:6px;
padding:.6em .8em;font:600 1rem/1.2 "Hanken Grotesk",sans-serif;color:var(--ink)}
.builder .zip:focus{outline:3px solid var(--green);outline-offset:1px}
.builder .go{margin-top:6px;width:100%}
.builder .alt{margin:.8em 0 0;font-size:.9rem;color:var(--ink-dim);text-align:center}
.builder .alt a{color:var(--green-deep)}
.zip-note{margin:.5em 0 0;font-size:.9rem;color:var(--ink-dim)}
/* ---------- proof bar ---------- */
.proof{background:transparent;position:relative;z-index:5;margin-top:-56px}
.proof .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:22px 26px;
background:var(--surface);border-radius:14px;box-shadow:var(--shadow)}
@media (max-width:620px){.proof{margin-top:-26px}.proof .wrap{padding:16px 16px}}
.proof .item{display:flex;align-items:center;gap:9px;font:600 .88rem/1.25 "Hanken Grotesk",sans-serif}
.proof svg{flex:none;width:26px;height:26px;stroke:var(--green-deep)}
@media (max-width:980px){.proof .wrap{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.proof .wrap{grid-template-columns:repeat(2,1fr);gap:12px 10px}}
/* ---------- sections & bands ---------- */
.band{padding:58px 0}
.band--white{background:var(--surface)}
.band--paper{background:var(--paper)}
.band--dark{background:var(--green-dark);color:#fff}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark .card{color:var(--ink)}
.band--dark .card h2,.band--dark .card h3{color:var(--green-dark)}
.band--dark .card p,.band--dark .card li{color:var(--ink)}
.band--dark p{color:#dceade} /* fixed below */
.band--tight{padding:40px 0}
/* ---------- visit steps + sms bubble ---------- */
.visit{display:grid;grid-template-columns:1fr .9fr;gap:44px;align-items:center}
@media (max-width:860px){.visit{grid-template-columns:1fr;gap:30px}}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line-strong)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;
background:var(--green);color:#fff;font:700 1.05rem/34px "Barlow Condensed",sans-serif;
text-align:center}
.steps b{display:block}
.phone{position:relative;width:272px;max-width:85vw;margin:0 auto;background:var(--ink);
border-radius:42px;padding:11px;box-shadow:var(--shadow)}
.phone::before{content:"";position:absolute;top:21px;left:50%;transform:translateX(-50%);
width:84px;height:22px;background:var(--ink);border-radius:12px;z-index:2}
.phone .screen{position:relative;background:#f4f6f4;border-radius:32px;
padding:52px 12px 30px;min-height:470px;overflow:hidden}
.phone .screen::after{content:"";position:absolute;bottom:9px;left:50%;
transform:translateX(-50%);width:104px;height:4px;border-radius:99px;background:rgba(26,36,29,.35)}
.phone .from{text-align:center;font:600 .82rem/1.3 "Hanken Grotesk",sans-serif;
color:var(--ink);margin:0 0 14px}
.phone .from::before{content:"";display:block;width:38px;height:38px;margin:0 auto 5px;
border-radius:50%;background:var(--green-deep)
url('data:image/svg+xml;utf8,') center/22px no-repeat}
.bubble{background:#e3e5e8;border-radius:16px 16px 16px 5px;padding:8px 12px;margin:0 30px 9px 0;
font-size:.88rem;line-height:1.42}
.bubble.me{background:var(--green-deep);color:#fff;border-radius:16px 16px 5px 16px;margin:0 0 9px 30px}
.bubble .t{display:block;font-size:.72rem;color:#5a6b60;margin-top:3px}
.bubble.me .t{color:#d9eadd}
/* ---------- cards / grids ---------- */
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border-radius:var(--r-card);
box-shadow:var(--shadow);padding:22px}
.card h2{font-size:1.28rem;font-weight:600}
.card h2 a,.card h3 a{color:var(--green-deep);text-decoration:none}
.card:hover h2 a,.card:hover h3 a{text-decoration:underline;text-underline-offset:3px}
.card-link::after{content:"";position:absolute;inset:0}
.card-actions{position:relative;z-index:1;margin-top:12px}
.card:focus-within{outline:3px solid var(--green);outline-offset:2px}
.band--paper .card,.band--dark .card{box-shadow:var(--shadow)}
/* ---------- reviews ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.review{display:flex;flex-direction:column;height:100%;background:var(--surface);
border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px}
.review .stars{color:#f3b73e;letter-spacing:2px;font-size:.95rem}
.review blockquote{margin:.6em 0;flex:1;font-size:.98rem}
.review cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--ink-dim)}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}
/* ---------- real visit grid (hidden until photos land) ---------- */
.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rv{position:relative;background:var(--surface);border-radius:8px;box-shadow:var(--shadow);
padding:8px 8px 10px}
.rv img{border-radius:5px;aspect-ratio:1/1;object-fit:cover}
.rv .tag{position:absolute;top:-10px;right:10px;background:var(--amber);color:#fff;
font:600 1rem/1 "Caveat",cursive;padding:4px 10px;border-radius:4px;transform:rotate(-2deg)}
.rv p{margin:.5em 0 0;font-size:.85rem;color:var(--ink-dim)}
@media (max-width:760px){.rv-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- town / map ---------- */
#map,.map{height:380px;border-radius:var(--r-card);box-shadow:var(--shadow);background:var(--surface)}
.town-links{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:14px 0 0;list-style:none}
.town-links a{display:inline-block;background:var(--surface);border:2px solid var(--line);
border-radius:6px;padding:.45em .8em;font:600 .92rem/1.2 "Hanken Grotesk",sans-serif;
color:var(--ink);text-decoration:none}
.town-links a:hover{border-color:var(--green)}
/* ---------- FAQ ---------- */
.faq details{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);
margin-bottom:10px;padding:0}
.faq summary{cursor:pointer;font:600 1.04rem/1.4 "Hanken Grotesk",sans-serif;
padding:15px 18px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";font:700 1.3rem/1 "Barlow Condensed",sans-serif;color:var(--green-deep)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 18px 16px;max-width:65ch}
/* ---------- prose / tables ---------- */
.prose{max-width:68ch}
.prose a:not(.btn){color:var(--green-deep)}
table{border-collapse:collapse;width:100%;background:var(--surface);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:.7em .9em;border-bottom:1px solid var(--line);font-size:.97rem}
th{font:600 .92rem/1.3 "Hanken Grotesk",sans-serif;background:var(--ground);white-space:nowrap}
/* ---------- footer ---------- */
footer{background:var(--green-dark);color:#cfe0d2;margin-top:64px;
padding:48px 0 110px;font-size:.95rem}
footer h2,footer h3{color:#fff;font-size:1.1rem;font-weight:600}
footer a{color:#e9f3ea;text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:30px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.35em 0}
.foot-legal{margin-top:34px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
font-size:.85rem;color:#9fbda5;display:flex;flex-wrap:wrap;gap:8px 22px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* ---------- sticky call pill ---------- */
.mobile-cta{position:fixed;right:1.1rem;bottom:1.1rem;z-index:1090}
.mobile-cta a{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
min-height:50px;padding:.7em 1.3em;background:var(--green-deep);color:#fff;
border-radius:999px;font:700 1rem/1 "Hanken Grotesk",sans-serif;text-decoration:none;
box-shadow:0 3px 0 rgba(26,36,29,.85)}
.mobile-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(26,36,29,.6)}
.pill-num{display:none}
@media (min-width:760px){.pill-tap{display:none}.pill-num{display:inline}}
/* page hero (inner pages) */
.page-hero{background:var(--green-dark);color:#fff;padding:44px 0 38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' fill='%23ffffff' fill-opacity='0.07'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cg transform='translate(-7 -12) scale(2.1)'%3E%3Cpath d='M12 10c-1.32 0 -1.983 .421 -2.931 1.924l-.244 .398l-.395 .688a50.89 50.89 0 0 0 -.141 .254c-.24 .434 -.571 .753 -1.139 1.142l-.55 .365c-.94 .627 -1.432 1.118 -1.707 1.955c-.124 .338 -.196 .853 -.193 1.28c0 1.687 1.198 2.994 2.8 2.994l.242 -.006c.119 -.006 .234 -.017 .354 -.034l.248 -.043l.132 -.028l.291 -.073l.162 -.045l.57 -.17l.763 -.243l.455 -.136c.53 -.15 .94 -.222 1.283 -.222c.344 0 .753 .073 1.283 .222l.455 .136l.764 .242l.569 .171l.312 .084c.097 .024 .187 .045 .273 .062l.248 .043c.12 .017 .235 .028 .354 .034l.242 .006c1.602 0 2.8 -1.307 2.8 -3c0 -.427 -.073 -.939 -.207 -1.306c-.236 -.724 -.677 -1.223 -1.48 -1.83l-.257 -.19l-.528 -.38c-.642 -.47 -1.003 -.826 -1.253 -1.278l-.27 -.485l-.252 -.432c-1.011 -1.696 -1.618 -2.099 -3.053 -2.099z'/%3E%3Cpath d='M19.78 7h-.03c-1.219 .02 -2.35 1.066 -2.908 2.504c-.69 1.775 -.348 3.72 1.075 4.333c.256 .109 .527 .163 .801 .163c1.231 0 2.38 -1.053 2.943 -2.504c.686 -1.774 .34 -3.72 -1.076 -4.332a2.05 2.05 0 0 0 -.804 -.164z'/%3E%3Cpath d='M9.025 3c-.112 0 -.185 .002 -.27 .015l-.093 .016c-1.532 .206 -2.397 1.989 -2.108 3.855c.272 1.725 1.462 3.114 2.92 3.114l.187 -.005a1.26 1.26 0 0 0 .084 -.01l.092 -.016c1.533 -.206 2.397 -1.989 2.108 -3.855c-.27 -1.727 -1.46 -3.114 -2.92 -3.114z'/%3E%3Cpath d='M14.972 3c-1.459 0 -2.647 1.388 -2.916 3.113c-.29 1.867 .574 3.65 2.174 3.867c.103 .013 .2 .02 .296 .02c1.39 0 2.543 -1.265 2.877 -2.883l.041 -.23c.29 -1.867 -.574 -3.65 -2.174 -3.867a2.154 2.154 0 0 0 -.298 -.02z'/%3E%3Cpath d='M4.217 7c-.274 0 -.544 .054 -.797 .161c-1.426 .615 -1.767 2.562 -1.078 4.335c.563 1.451 1.71 2.504 2.941 2.504c.274 0 .544 -.054 .797 -.161c1.426 -.615 1.767 -2.562 1.078 -4.335c-.563 -1.451 -1.71 -2.504 -2.941 -2.504z'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(70 80) rotate(-14)'/%3E%3Cuse href='%23p' transform='translate(240 40) rotate(9) scale(.8)'/%3E%3Cuse href='%23p' transform='translate(430 110) rotate(-6) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(640 60) rotate(13) scale(.7)'/%3E%3Cuse href='%23p' transform='translate(140 300) rotate(5) scale(.9)'/%3E%3Cuse href='%23p' transform='translate(520 330) rotate(-11)'/%3E%3Cuse href='%23p' transform='translate(700 260) rotate(4) scale(.85)'/%3E%3Cuse href='%23p' transform='translate(330 430) rotate(-8) scale(.75)'/%3E%3C/svg%3E");background-size:800px 500px}
.page-hero--roomy{padding-bottom:70px}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,5.5vw,3.4rem);margin-bottom:.25em}
.page-hero .lede{color:#dcead9;max-width:38em;font-size:1.08rem;margin:0}
.crumb{font-size:.85rem;margin:0 0 .8em}
.crumb a{color:#9fd3ab}
/* mobile hero: compact text, builder card peeks inside the first screen */
@media (max-width:860px){
.hero .wrap{padding-top:30px;padding-bottom:34px;gap:20px}
.hero .lede{font-size:1.02rem}
.trust-line{margin-top:.7em}
.builder{padding:16px 16px 18px}
.builder h2{font-size:1.3rem}
.builder fieldset{margin-bottom:10px}
}
.photo-card{border-radius:10px;box-shadow:var(--shadow)}
.photo-card--home{max-width:380px;justify-self:center}
/* ---------- Google-look review strip ---------- */
.rev-strip{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;
overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;
scrollbar-width:none}
.rev-strip::-webkit-scrollbar{display:none}
.rev-strip>*{scroll-snap-align:start}
@media (min-width:760px){.rev-strip{grid-auto-columns:calc((100% - 32px)/3)}}
.gcard{display:flex;flex-direction:column;height:100%;background:#fff;
border:1px solid #dadce0;border-radius:12px;padding:18px 18px 16px;
box-shadow:0 1px 3px rgba(60,64,67,.12)}
.gcard .top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.gcard .av{flex:none;width:40px;height:40px;border-radius:50%;color:#fff;
font:600 1.05rem/40px "Hanken Grotesk",sans-serif;text-align:center}
.gcard:nth-child(3n+1) .av{background:#1b5e33}
.gcard:nth-child(3n+2) .av{background:#4273b8}
.gcard:nth-child(3n) .av{background:#a3581c}
.gcard .who b{display:block;font-size:.98rem;color:#202124}
.gcard .who span{font-size:.82rem;color:#5f6368}
.gcard .gmark{margin-left:auto;flex:none}
.gcard .stars{color:#fbbc04;letter-spacing:2.5px;font-size:1rem;margin-bottom:7px}
.gcard blockquote{margin:0;flex:1;font-size:.96rem;line-height:1.55;color:#3c4043}
.rev-scroll{position:relative;height:4px;border-radius:99px;background:rgba(26,36,29,.1);
max-width:180px;margin:14px auto 0;overflow:hidden}
.rev-scroll>span{display:block;height:100%;border-radius:99px;background:var(--green-deep);
transition:transform .12s linear}
.rev-scroll.is-off{display:none}
@media (prefers-reduced-motion:reduce){.rev-scroll>span{transition:none}}
.rev-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;
border:1px solid #dadce0;border-radius:8px;padding:8px 14px;margin-bottom:16px;
font:600 .95rem/1.2 "Hanken Grotesk",sans-serif;color:#202124}
.rev-badge .stars{color:#fbbc04;letter-spacing:2px}
/* ---------- organic seams (Lawn Dogs-style wavy section edges) ---------- */
.page-hero{position:relative}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;
background:url('data:image/svg+xml;utf8,') repeat-x bottom/1200px 24px}
footer{position:relative}
footer .small{color:#9fb8a6}
input,textarea,select{font:inherit}
footer::before{content:"";position:absolute;left:0;right:0;top:-21px;height:22px;
background:url('data:image/svg+xml;utf8,') repeat-x bottom/1200px 24px}
/* home hero display scale */
@media (min-width:1000px){.hero h1{font-size:5.1rem}}
/* icon chips on service cards */
.icon-chip{width:44px;height:44px;border-radius:10px;background:var(--ground);
display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.icon-chip svg{width:24px;height:24px;stroke:var(--green-deep)}
/* builder selected check */
.opts button[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.solo-review{max-width:430px;margin:22px 0 6px}
/* Blue resting on the final CTA band */
.band--cta{position:relative;padding-top:74px}
.band--cta .blue-rest{position:absolute;top:-58px;right:6%;width:230px;height:auto;
filter:drop-shadow(2px 4px 0 rgba(26,36,29,.35))}
@media (max-width:640px){.band--cta{padding-top:120px}
.band--cta .blue-rest{width:132px;top:8px;right:5%}}
/* route ticker */
.ticker{background:var(--green-deep);color:#eaf4ec;overflow:hidden;padding:11px 0;
font:600 .95rem/1 "Hanken Grotesk",sans-serif}
.ticker .lane{display:flex;gap:2.2em;white-space:nowrap;width:max-content;
animation:tick 80s linear infinite}
.ticker:hover .lane{animation-play-state:paused}
.ticker .lane span{opacity:.55}
@media (prefers-reduced-motion:reduce){.ticker .lane{animation:none}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* flat illustration blocks */
.illus{display:block;margin:18px auto 0;max-width:420px}
.illus--wide{max-width:min(460px,100%);height:auto}
.illus-cap{text-align:center;color:#4d5c52;margin:6px 0 0}
/* ---------- visual steal round 3 ---------- */
/* marker underline (Purge Pros) */
.mk{position:relative;white-space:nowrap;display:inline-block;isolation:isolate}
.mk::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.28em;
background:url('data:image/svg+xml;utf8,') no-repeat center/100% 100%;z-index:-1;opacity:.85}
.band--dark .mk::after,.hero .mk::after{filter:brightness(1.6)}
/* callout note */
.note{display:flex;gap:12px;align-items:flex-start;background:#fdf6e4;border:1.5px solid #ecd9a8;
border-radius:10px;padding:14px 16px;margin:18px 0;max-width:62ch}
.note svg{flex:none;width:24px;height:24px;stroke:#9a7b1f;margin-top:2px}
.note b{display:block}
.note p{margin:0;font-size:.95rem}
/* pinned town chips + unpaged tier */
.town-links.pins a::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat;vertical-align:-1px}
.reach{margin:14px 0 0;font-size:.95rem;color:var(--ink-dim);max-width:70ch}
/* promise chips (About) */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.chips--3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){.chips--3{grid-template-columns:1fr 1fr}}
.chip-card{display:flex;gap:10px;align-items:flex-start;background:var(--surface);
border:1.5px solid var(--line);border-radius:8px;padding:11px 12px}
.chip-card svg{flex:none;width:22px;height:22px;stroke:var(--green-deep);margin-top:1px}
.chip-card b{display:block;font-size:.93rem}
.chip-card span{font-size:.85rem;color:var(--ink-dim)}
@media (max-width:560px){.chips{grid-template-columns:1fr}}
/* guarantee stamp */
/* blog cover tiles */
.post-tile{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;
padding:16px 0;border-bottom:1px solid var(--line)}
.post-tile .cover{width:150px;height:110px;border-radius:8px;box-shadow:var(--shadow);
display:flex;align-items:center;justify-content:center;text-align:center;
font:700 1.05rem/1.15 "Barlow Condensed",sans-serif;letter-spacing:.02em;
color:#fff;padding:10px;text-transform:uppercase}
.post-tile h2{font-size:1.4rem;margin:0 0 .2em}
.post-tile h2 a{text-decoration:none}
@media (max-width:560px){.post-tile{grid-template-columns:1fr}.post-tile .cover{width:100%}}
/* caption chip on photos */
.photo-wrap{position:relative;max-width:380px;justify-self:center}
.photo-chip{position:absolute;left:12px;bottom:12px;background:rgba(14,51,34,.9);color:#fff;
font:600 .85rem/1.2 "Hanken Grotesk",sans-serif;padding:6px 11px;border-radius:6px}
/* statement heading + builder sticker + owner quote */
.statement{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08}
.builder{position:relative}
/* stat strip (Poo Force) */
/* a stat strip right after the hero fuses into the dark band; the wave moves below it */
.page-hero:has(+ .stat-strip)::after{display:none}
.stat-strip{background:var(--green-dark);color:#dcead9;position:relative;padding-bottom:10px}
.stat-strip::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:22px;
background:url('data:image/svg+xml;utf8,') repeat-x top/1200px 24px}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px}
.stat-strip b{display:block;font:700 1.5rem/1.1 "Barlow Condensed",sans-serif;color:#fff}
.stat-strip span{font-size:.85rem;color:#9fd3ab}
@media (max-width:760px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr)}}
/* most-popular tag in builder */
.opts button .pop{display:block;font:600 .62rem/1 "Hanken Grotesk",sans-serif;
color:#8a5a12;letter-spacing:.02em;margin-top:3px;text-transform:uppercase}
.opts button[aria-pressed="true"] .pop{color:#ffd79a}
/* cross-sell slim band */
.xsell{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
padding:16px 20px;margin:26px 0 0}
.xsell p{margin:0;font-weight:600}
.xsell .small{font-weight:400;display:block}
.brand img{height:40px;width:auto}
.foot-logo{height:110px;width:auto;margin-bottom:10px}
.brand-name{font:700 1.35rem/1 "Barlow Condensed",sans-serif;letter-spacing:.5px;color:var(--green-deep)}
.town-links .soft{background:transparent;border-style:dashed;color:var(--ink-dim);cursor:default}
.town-links .soft:hover{border-color:var(--line)}
/* Service-area map. Both renderings share the frame so a site can switch from
the static PNG to Leaflet without touching the section around it. */
.area-map-frame {
position: relative;
max-width: 920px;
margin: 0 auto;
border: 2px solid var(--ink, #1a1a1a);
border-radius: 6px;
overflow: hidden;
line-height: 0;
background: #e8e4dd; /* tile-coloured, so a slow load is not a white flash */
}
/* --- static rendering: PNG + absolutely positioned pins --- */
.area-map-frame > img { display: block; width: 100%; height: auto; }
.area-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.area-map-pin {
position: absolute;
width: 30px;
height: 40px;
transform: translate(-50%, -100%); /* tip on the coordinate */
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
z-index: 2;
}
.area-map-flag {
position: absolute;
transform: translate(-50%, -56px);
background: var(--ink, #1a1a1a);
color: #fff;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
padding: .18rem .45rem;
border-radius: 3px;
white-space: nowrap;
z-index: 3;
}
/* --- interactive rendering --- */
#area-map { width: 100%; height: 520px; }
/* Height is explicit at every width: a percentage or aspect-ratio height on a
Leaflet container measures 0 during init and poisons the first fit. */
@media (max-width: 760px) { #area-map { height: 380px; } }
.am-pin { background: none; border: 0; } /* kill Leaflet's divIcon chrome */
.am-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: .6rem .8rem; font-size: .92rem; }
.area-map-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.6rem;
justify-content: center;
margin: .9rem auto 0;
font-size: .86rem;
line-height: 1.4;
}
.area-map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.amleg-swatch {
width: 18px; height: 12px;
background: color-mix(in srgb, var(--brand, #2d7dd2) 22%, transparent);
border: 2px solid var(--brand-dark, #1a4d8f);
}
.area-map-frame{border-radius:10px;border-color:var(--ink);box-shadow:var(--shadow)}
.amleg-swatch{background:rgba(31,138,80,.22);border-color:var(--green-deep)}
/* ---------- fun batch ---------- */
/* giant stars band (Lemonade move, but ours really is 5.0) */
.phone-wrap{position:relative;max-width:320px;margin:0 auto}
/* typing bubble */
.bubble.typing{display:inline-flex;gap:5px;align-items:center;width:auto;padding:12px 14px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:#8a958c;display:block;
animation:tybl 1.2s infinite ease-in-out}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}
@keyframes tybl{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.bubble.typing{display:none}}
/* Blue wags when you look at him */
.blue-rest{transform-origin:70% 90%}
.band--cta:hover .blue-rest{animation:wag 1.1s ease-in-out 2}
@keyframes wag{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.4deg)}65%{transform:rotate(1.8deg)}}
@media (prefers-reduced-motion:reduce){.band--cta:hover .blue-rest{animation:none}}
/* builder select pop */
.opts button[aria-pressed="true"]{animation:pop .22s ease-out}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.opts button[aria-pressed="true"]{animation:none}}
/* line-art neighborhood strip above the footer */
.nf{text-align:center;padding:10px 0 26px}
.nf-dog{display:inline-block;width:240px;height:auto;margin-top:-34px}
.nf-cap{margin:4px 0 20px;color:#4d5c52}
.nf-row{justify-content:center;margin-bottom:18px}
.bubble.arrive{animation:arrive .3s ease-out}
@keyframes arrive{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.hoodline-wrap{overflow:hidden;display:flex;justify-content:center;margin-bottom:-22px}
.hoodline{display:block;color:#8fae8c;height:56px;width:1050px;flex:none}
/* keep phone numbers on one line */
a[href^="tel:"],a[href^="sms:"]{white-space:nowrap}
/* service cards: CTA pinned to the bottom edge */
.grid .card{display:flex;flex-direction:column}
.card .card-cta{margin-top:auto;padding-top:14px;margin-bottom:0}
.card>.btn{align-self:flex-start}
@media (max-width:760px){}
@media (min-width:900px){.grid--2>div>.qcard{position:sticky;top:84px}
.grid--2>div:has(>.qcard){align-self:stretch}}
/* phones: the quote card comes first, right under the hero */
@media (max-width:899px){.grid--2>div:has(>.qcard){order:-1}}
.mobile-cta--off{opacity:0;pointer-events:none;transition:opacity .25s}
.mobile-cta{transition:opacity .25s}
.side-groups{display:grid;gap:30px}
.side-groups h2{margin-bottom:.2em}
.side-groups .town-links{margin-top:10px}
/* ZIP lookup card on the hub */
.ziplookup{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);
padding:18px 20px;max-width:520px;margin:0 auto 26px}
.ziplookup label{display:block;font:600 1.05rem/1.3 "Hanken Grotesk",sans-serif;margin-bottom:10px}
.zl-row{display:flex;gap:10px}
.zl-row input{flex:1;min-width:0;padding:.65em .8em;border:2px solid var(--line);border-radius:8px;font:inherit}
.zl-row input:focus{outline:2px solid var(--green-deep);outline-offset:1px}
.zl-out{margin:12px 0 0;font-size:.97rem}
@media (max-width:480px){.zl-row{flex-direction:column}.zl-row .btn{width:100%}}
/* phones see a full wave cycle, not a flat third of one */
@media (max-width:760px){
.page-hero::after{background-size:620px 18px;height:18px}
footer::before{background-size:620px 18px;height:18px;top:-17px}
.stat-strip::after{background-size:620px 18px;height:18px;bottom:-17px}
}
@media (max-width:759px){.tl-hide{display:none}}
.tl-more{margin-top:12px}
@media (min-width:760px){.tl-hide-d{display:none}}
/* Google rating badge (reviews page) */
.gbadge{display:flex;align-items:center;gap:16px;background:var(--surface);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
padding:18px 26px;width:max-content;max-width:100%;margin:0 auto 30px}
.gbadge-g{width:46px;height:46px;flex:none}
.gbadge-txt{display:flex;flex-direction:column;line-height:1.2}
.gbadge-label{font:600 .85rem/1.2 "Hanken Grotesk",sans-serif;color:#5f6368}
.gbadge-row{display:flex;align-items:baseline;gap:10px}
.gbadge-row b{font:700 2rem/1.1 "Hanken Grotesk",sans-serif;color:#202124}
.gbadge-stars{color:#fbbc04;font-size:1.35rem;letter-spacing:2px}
/* booking form, same fields as the 17hats intake */
.gsf input:not([type=radio]),.gsf select,.gsf textarea{width:100%;padding:.6em;border:2px solid var(--line-strong);border-radius:8px;background:#fff}
.gsf p{margin:0 0 12px}
.gsf label{font-weight:600;font-size:.95rem}
.gsf-radio{border:0;padding:0;margin:0 0 12px}
.gsf-radio legend{font-weight:600;font-size:.95rem;padding:0;margin-bottom:4px}
.gsf-radio label{font-weight:400;margin-right:18px}
.gsf-radio input{margin-right:5px}
.gsf-row{display:flex;gap:10px}
.gsf-row p{flex:1}
.gsf-row p:nth-child(2){flex:0 0 64px}
.gsf-row p:nth-child(3){flex:0 0 110px}
/* quote card: every page funnels to the one quote form */
.qcard{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:26px 26px 22px;text-align:center}
.qcard h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:.25em}
.qcard .sub{color:var(--ink);margin:0 0 18px}
.qcard-go{width:100%;justify-content:center}
.qcard-alt{margin:14px 0 0;color:#4d5c52}
.hero .qcard h2{color:var(--ink)}
@media (max-width:760px){.town-links a{min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:760px){footer a{display:inline-flex;align-items:center;min-height:44px}
footer .foot-grid ul li{line-height:1}}
/* ============================================================
OFF-CANVAS DRAWER (page steps back, panel settles)
Motion measured off spartan-waste.com. Two rules keep it safe:
the transform exists ONLY in the open state, so nothing re-anchors
the fixed call pill while the menu is closed, and the drawer and
scrim render outside .page-shift so they sit still while the page
moves. No will-change -- it would create the containing block
permanently and break .mobile-cta on every page.
============================================================ */
.page-shift{--shift-scale:1;--shift-gap:0vw;
transform-origin:50% var(--shift-origin-y,50%);
transition:transform 800ms cubic-bezier(.15,.2,.1,1)}
.mscrim{position:fixed;inset:0;z-index:1150;background:rgba(14,51,34,.46);
opacity:0;pointer-events:none;transition:opacity 800ms cubic-bezier(.15,.2,.1,1)}
#mob.mdrawer{position:fixed;top:0;right:0;left:auto;z-index:1160;width:var(--dw);
height:100vh;height:100dvh;background:var(--green-dark);color:#fff;
display:flex;flex-direction:column;
padding:calc(16px + env(safe-area-inset-top,0px)) 26px calc(20px + env(safe-area-inset-bottom,0px));
overflow-y:auto;overscroll-behavior:contain;
/* the panel slides only its last 110px: a quick burst into a long glide */
transform:translateX(110px);opacity:0;visibility:hidden;
transition:transform 800ms cubic-bezier(.15,.2,.1,1),opacity 420ms ease,
visibility 0s linear 800ms}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.mbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none;
min-height:44px}
.mbrand img{height:40px;width:auto}
.mbrand .brand-name{color:#fff}
.mclose{flex:none;width:44px;height:44px;position:relative;border:0;cursor:pointer;
background:none;color:#fff;opacity:.8;transition:opacity .16s ease}
.mclose:hover{opacity:1}
.mclose span{position:absolute;left:12px;top:21px;width:20px;height:2px;border-radius:2px;
background:#fff}
.mclose span:nth-child(1){transform:rotate(45deg)}
.mclose span:nth-child(2){transform:rotate(-45deg)}
/* The list against the header left a hole above the footer -- a quarter of the
panel reading as unfinished rather than as space. Letting it take the free
height and centring puts equal air above and below. */
.mlinks{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.mlinks a{display:block;padding:.62rem 0;min-height:44px;color:#fff;text-decoration:none;
font:600 1.06rem/1.5 "Hanken Grotesk",sans-serif;letter-spacing:.03em;position:relative}
/* cream text with a green bar beside it: the green stays a mark, the same role
it has in the logo, rather than a filled bar that reads as a pressed button */
.mlinks a[aria-current]::before{content:"";position:absolute;left:-13px;top:50%;
transform:translateY(-50%);width:3px;height:19px;background:var(--green)}
.mfoot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.mnap{display:flex;flex-direction:column;gap:9px;margin-bottom:4px;padding-bottom:15px;
border-bottom:1px solid rgba(255,255,255,.16);
color:rgba(255,255,255,.78);font-size:.86rem;line-height:1.45}
.mnap span{display:flex;gap:9px;align-items:flex-start}
.mnap .mic{flex:none;width:15px;height:15px;margin-top:3px;color:var(--green)}
/* A matched pair: same box for both, and the fill carries the hierarchy. The
site's two filled buttons (ink, green-deep) both sit too close to the dark
green panel to read as the primary ask, so the quote button takes the
brightest fill on the panel and the call button takes the on-dark outline
the rest of the site already uses. */
.mquote,.mtel{display:flex;align-items:center;justify-content:center;gap:.5em;
width:100%;min-height:56px;padding:0 18px;border-radius:var(--r-btn);box-sizing:border-box;
font:700 1.02rem/1.2 "Hanken Grotesk",sans-serif;text-align:center;text-decoration:none}
.mquote{background:#fff;color:var(--ink);border:2px solid #fff}
.mtel{background:none;color:#fff;border:2px solid rgba(255,255,255,.55)}
.mtel .mic{width:17px;height:17px}
@media (max-width:999px){
/* 7vw is (1 - 0.86)/2 against the viewport: exactly the gap a centre-origin
scale opens on each side, so subtracting the drawer width lands the page's
right edge flush on the drawer at any width, with no per-breakpoint
numbers. --shift-scale/--shift-gap stay 1/0vw until the JS sets them, so
with JS off this degrades to a clean slide that needs no origin. */
body:has(.nav-toggle[aria-expanded="true"]) .page-shift{
transform:translateX(calc(var(--shift-gap) - var(--dw))) scale(var(--shift-scale))}
body:has(.nav-toggle[aria-expanded="true"]) .mscrim{opacity:1;pointer-events:auto}
body:has(.nav-toggle[aria-expanded="true"]) #mob.mdrawer{
transform:none;opacity:1;visibility:visible;transition-delay:0s,0s,0s}
/* the pill rides inside the wrapper, so it shrinks and slides with the page */
body:has(.nav-toggle[aria-expanded="true"]) .mobile-cta{opacity:0;pointer-events:none;
transition:opacity 240ms ease}
/* the burger rides away with the page; an X out there would sit on the
shrunken strip competing with the drawer's own close button. Kept
clickable so a second tap on the same spot still closes. */
body:has(.nav-toggle[aria-expanded="true"]) .nav-toggle{opacity:0;transition:opacity 260ms ease}
html:has(.nav-toggle[aria-expanded="true"]),
body:has(.nav-toggle[aria-expanded="true"]){overflow:hidden}
}
@media (min-width:1000px){
#mob.mdrawer,.mscrim{display:none}
.page-shift{transform:none}
}
/* after the open-state rule on purpose: equal specificity, source order decides */
@media (prefers-reduced-motion:reduce){
.page-shift,#mob.mdrawer,.mscrim{transition-duration:1ms!important;transition-delay:0s!important}
body:has(.nav-toggle[aria-expanded="true"]) .page-shift{transform:none}
}