/* bestlittleyard.net, Panel variant. Tokens from DESIGN.md. */
@font-face{font-family:"Zilla Slab";src:url(/fonts/ZillaSlab-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(/fonts/ZillaSlab-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --brand:#38521F;--brand-deep:#2F451A;--brand-press:#263815;--brand-soft:#EEF2E9;--brand-tint:#F6F8F3;
  --action:#C74A08;--action-deep:#AD3803;--action-press:#8F2F04;
  --ink:#16202B;--ink-2:#3D4C5A;--ink-mute:#5C6B80;--on-dark:#F2F5F8;--on-dark-mute:#C9D2BE;
  --canvas:#fff;--band:#1B2410;--band-alt:#26331A;--hair:#DDE3EA;
  --r-sm:12px;--r-md:16px;--r-lg:20px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --display:"Zilla Slab",Rockwell,Georgia,serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.15;margin:0 0 var(--s4)}
h1{font-size:clamp(34px,5vw,48px);font-weight:700}
h2{font-size:clamp(26px,3.4vw,34px);font-weight:700}
h3{font-size:21px;font-weight:600;line-height:1.3;margin-top:var(--s5)}
p,ul,ol{margin:0 0 var(--s4)}
li{margin-bottom:var(--s2)}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s4)}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s4);top:var(--s4);background:#fff;padding:var(--s2);z-index:99}

/* header: two rows */
.utility{background:var(--brand-soft);font-size:15px}
.utility .wrap{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:40px}
.utility-tel{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-head{border-bottom:1px solid var(--hair);background:#fff}
.site-head .wrap{display:flex;align-items:center;gap:var(--s5);min-height:72px}
.logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--brand);font:700 24px var(--display)}
.logo svg{width:28px;height:28px;fill:none;stroke:var(--brand);stroke-width:2}
.site-head nav{display:flex;gap:var(--s5);margin-left:auto}
.site-head nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.site-head nav a:hover{color:var(--brand)}

/* buttons: rectangles, action color only on call and quote */
.btn-call,.btn-quote{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--s5);
  border-radius:var(--r-sm);font:700 18px var(--body);text-decoration:none;text-align:center}
.btn-call{background:var(--action);color:#fff;box-shadow:0 4px 14px rgba(199,74,8,.32)}
.btn-call:hover{background:var(--action-deep)}.btn-call:active{background:var(--action-press)}
.btn-call-sm{min-height:48px;font-size:16px;padding:0 var(--s4)}
.btn-quote{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn-strip{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0 var(--s3)}
/* on brand and dark bands the action fill sits on a white strip so it measures against white */
.hero .btn-strip,.brand-cta .btn-strip,.band-dark-cta .btn-strip{background:#fff;padding:var(--s3);border-radius:var(--r-md);width:fit-content;max-width:100%}

/* hero: solid brand block, copy left, call-and-form panel right */
.hero{background:var(--brand);color:var(--on-dark);padding:var(--s8) 0}
.hero h1,.hero h2{color:#fff}
.hero a:not(.btn-call):not(.btn-quote){color:#fff}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:var(--s7);align-items:start}
.pill{display:inline-block;background:var(--brand-deep);color:var(--on-dark);border-radius:var(--r-sm);padding:var(--s1) var(--s3);font-size:15px;margin-bottom:var(--s4)}
.subhead{font:600 21px/1.35 var(--display);color:var(--on-dark-mute);margin-bottom:var(--s4)}
.opener{font-size:19px;line-height:1.6}
.needs{list-style:none;padding:0}
.needs li{padding-left:28px;position:relative}
.needs li:before{content:"";position:absolute;left:0;top:7px;width:16px;height:9px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.updated{font-size:14px;color:var(--on-dark-mute)}
.hero .btn-quote{background:#fff}
.call-panel{background:var(--brand-tint);color:var(--ink);border-radius:var(--r-lg);padding:var(--s5)}
.call-panel .btn-call{width:100%}
.panel-h{font:700 24px var(--display);color:var(--ink)!important;margin:0 0 var(--s3)}
.panel-h2{font:600 19px var(--display);margin:0 0 var(--s3)}
.panel-note{font-size:15px;color:var(--ink-2);margin-top:var(--s3)}
.form-estimate{background:#fff;border-radius:var(--r-md);padding:var(--s4);box-shadow:0 12px 28px rgba(15,26,36,.12);overflow:hidden}
/* Networx replaces #nx_form with a div named after the affiliate id holding an iframe at height:100%,
   so the wrapper needs a real height or the iframe falls back to 150px. */
#networx_form_container>div{width:100%;max-width:320px;height:440px;margin:0 auto}
#networx_form_container iframe{display:block;width:100%;height:100%}
.article-hero .btn-strip{margin-bottom:0}

/* bands: white and brand-tint alternating, one dark band */
.band{padding:var(--s8) 0}
.band+.band{padding-top:0}
.tint{background:var(--brand-tint);padding:var(--s8) 0!important}
.band-cta{margin-top:var(--s6)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.tile{display:flex;flex-direction:column;gap:var(--s2);background:var(--brand-soft);border-radius:var(--r-lg);padding:var(--s5);text-decoration:none;color:var(--ink)}
.tile svg{width:36px;height:36px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile-h{font:700 20px var(--display);color:var(--brand)}
.tile-p{font-size:16px;color:var(--ink-2)}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:0;list-style:none;counter-reset:p}
.proof li{background:var(--brand-soft);border-radius:var(--r-md);padding:var(--s5);margin:0}
.fear-panel{background:var(--brand-tint);border-radius:var(--r-lg);padding:var(--s6) var(--s5) var(--s5);position:relative}
.fear-n{position:absolute;top:-18px;left:var(--s5);width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;
  font:700 20px/40px var(--display);text-align:center}
.panel-cta{margin-top:var(--s5)}
.photo{margin:0}
.photo img{border-radius:var(--r-lg);width:100%}
.faq-item{border-top:1px solid var(--hair);padding-top:var(--s2)}
.faq-item h3{margin-top:var(--s4)}
.brand-cta,.band-dark-cta{background:var(--band);color:var(--on-dark);padding:var(--s8) 0!important}
.brand-cta h2,.band-dark-cta h2{color:#fff}
.band-dark-cta a:not(.btn-call){color:#fff}
.guides{list-style:none;padding:0}.guides li{margin-bottom:var(--s5)}
.article h2{margin-top:var(--s6)}
.video{position:relative;padding-top:56.25%;margin:var(--s5) 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r-md)}

/* footer: three columns on a dark band */
.site-foot{background:var(--band-alt);color:var(--on-dark);padding:var(--s7) 0 var(--s8);font-size:16px}
.site-foot a{color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s6)}
.foot-brand{font:700 24px var(--display);color:#fff}
.foot-h{font:700 18px var(--display);color:#fff}
.site-foot ul{list-style:none;padding:0}
.foot-tel{font-weight:700}
.foot-legal{border-top:1px solid #3A4A2A;margin-top:var(--s6);padding-top:var(--s4);font-size:14px;color:var(--on-dark-mute)}

/* sticky call bar, mobile only */
.sticky-call{display:none}
@media (max-width:900px){
  .hero-grid,.foot-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}.proof{grid-template-columns:1fr}
  .site-head nav{display:none}
  .site-head .btn-call-sm{margin-left:auto}
  .utility span{display:none}.utility .wrap{justify-content:center}
  .hero{padding:var(--s6) 0}
}
@media (max-width:767px){
  .tiles{grid-template-columns:1fr}
  .logo{font-size:19px;gap:6px}.logo svg{width:22px;height:22px}
  .site-head .wrap{gap:var(--s3)}
  .btn-call-sm{white-space:nowrap;font-size:15px;padding:0 var(--s3)}
  .sticky-call{display:block;position:fixed;left:0;right:0;bottom:0;height:64px;padding:4px var(--s3);background:var(--action);
    transform:translateY(100%);transition:transform .2s;z-index:50}
  .sticky-call.show{transform:translateY(0)}
  .btn-sticky{width:100%;height:56px;box-shadow:none;background:var(--action)}
  body{padding-bottom:64px}
}