:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --steel:#252b2e;--steel-2:#323a3e;--paper:#f2f3ef;--paper-2:#e6e8e1;--ink:#1d2326;--muted:#586166;
  --yellow:#f5b50a;--green:#006b01;--green-dk:#0d4d17;--green-lt:#6cc070;--mulch:#5a3a22;
  --bg:var(--paper);--bg-alt:var(--paper-2);--text:var(--ink);--line:#c9ccc3;
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1d2326;--bg-alt:#252b2e;--text:#eceee8;--muted:#a3abae;--line:#3b4347}}
:root[data-theme="dark"]{--bg:#1d2326;--bg-alt:#252b2e;--text:#eceee8;--muted:#a3abae;--line:#3b4347}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--green-lt);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;margin:0;letter-spacing:.005em}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:#fff;color:#1d2326;border-bottom:4px solid var(--green)}
header .top{display:flex;align-items:center;justify-content:space-between;height:70px;gap:12px}
.mark{display:block;width:84px;height:58px;background:url(/logo-green.png) left center/contain no-repeat;font-size:0;line-height:0;color:transparent;text-decoration:none;overflow:hidden}
.mark small{display:none}
.call{background:var(--green);color:#fff;padding:8px 14px;font-weight:600;text-decoration:none;font-size:15px;white-space:nowrap}
.navbar{display:flex;gap:4px;overflow-x:auto;white-space:nowrap;border-top:1px solid #e2e4dc;scrollbar-width:none}
.navbar::-webkit-scrollbar{display:none}
.navbar a{padding:11px 12px;font-weight:600;font-size:15px;text-decoration:none;color:#3a4348;border-bottom:3px solid transparent}
.navbar a.on{color:var(--green);border-bottom-color:var(--green)}
.menubtn{display:none;background:#fff;border:2px solid var(--green);color:var(--green);font:600 15px var(--body);padding:6px 12px;cursor:pointer}
@media(max-width:819px){
.call .num{display:none}
.menubtn{display:inline-block}
.navbar{display:none;flex-direction:column;overflow:visible;gap:0;white-space:normal}
.navbar.open{display:flex}
.navbar a{padding:14px 6px;font-size:17px;border-bottom:1px solid #e2e4dc;border-left:4px solid transparent}
.navbar a.on{border-bottom-color:#e2e4dc;border-left-color:var(--green)}
}
.hero{background:var(--steel);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding-top:56px}
.eyebrow{font-weight:600;font-size:15px;color:var(--green-lt);margin:0 0 14px}
.hero h1{font-size:clamp(52px,12vw,132px);max-width:11ch}
.hero p{max-width:34em;font-size:19px;color:#d6dadb;margin:24px 0 28px}
.phero{background:var(--steel);color:#fff;padding:46px 0 40px}
.phero h1{font-size:clamp(44px,10vw,90px);max-width:14ch}
.phero p{max-width:36em;font-size:18px;color:#d6dadb;margin:18px 0 0}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:14px 24px;font-weight:600;text-decoration:none;border:2px solid var(--green);font-size:16px}
.btn.solid{background:var(--green);color:#fff}
.btn.ghost{border-color:var(--green-lt);color:#fff}
.pile{display:block;width:100%;height:auto;margin-top:40px}
section{padding:68px 0}
section.alt{background:var(--bg-alt)}
h2{font-size:clamp(38px,6vw,64px);margin-bottom:16px}
.lede{max-width:38em;color:var(--muted);font-size:18px;margin:0 0 36px}
.recycle{background:var(--mulch);color:#fff}
.recycle .row{display:grid;gap:26px;align-items:center}
@media(min-width:820px){.recycle .row{grid-template-columns:1.1fr 1fr}}
.recycle p{margin:0 0 14px;color:#ecdccd;font-size:18px;max-width:34em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:20px 0 6px}
.stats div{border-top:3px solid var(--green-lt);padding-top:10px}
.stats b{font-family:var(--display);font-weight:900;font-size:clamp(38px,7vw,56px);line-height:1;display:block;color:#fff}
.stats span{color:#ecdccd;font-size:15px}
@media(max-width:600px){.stats{grid-template-columns:1fr;gap:16px}.stats b{font-size:44px}}
.loop{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.loop li{border:2px solid var(--green-lt);padding:8px 14px;font-weight:600;font-size:15px}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.sw{background:var(--bg);border:1px solid var(--line)}
.sw .chip{height:140px;background-color:var(--c);background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.10) 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,rgba(0,0,0,.28) 0 4px,transparent 5px),repeating-linear-gradient(112deg,rgba(0,0,0,.14) 0 2px,transparent 2px 11px);background-size:46px 46px,58px 58px,auto}
.sw img.chip{width:100%;height:140px;object-fit:cover;display:block;background:none}
.sw .t{padding:16px 18px 20px}
.sw h3{font-size:34px;margin-bottom:6px}
.sw p{margin:0;color:var(--muted);font-size:16px}
.sw .price{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.05;color:var(--text);margin:0 0 8px}
.sw .price small{font-family:var(--body);font-weight:500;font-size:15px;color:var(--muted)}
.pricebox{margin-top:26px;background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--green);padding:22px 24px;display:grid;gap:8px}
.pricebox p{margin:0;color:var(--muted)}
.pricebox .big{color:var(--text);font-weight:600}
.pricebox a{font-weight:600;color:var(--text)}
.trade{margin-top:22px;background:var(--steel);color:#fff;padding:24px 26px;display:grid;gap:12px}
.trade h3{font-size:34px}
.trade p{margin:0;color:#d6dadb;max-width:42em}
.trade ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.trade li{border:2px solid var(--green-lt);padding:6px 12px;font-weight:600;font-size:15px}
.trade .btn{justify-self:start}
.storm{background:var(--steel);color:#fff}
.storm .row{display:grid;gap:26px;align-items:start}
@media(min-width:820px){.storm .row{grid-template-columns:1fr 1fr}}
.storm .lede{color:#cfd5d7;margin-bottom:22px}
.storm ul{margin:0;padding:0;list-style:none}
.storm li{padding:12px 0;border-bottom:1px solid #46505a;color:#e3e7e8}
.storm li b{color:#fff;display:block}
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:2px solid var(--text)}
.who div{padding:22px 24px 24px 0;border-bottom:1px solid var(--line)}
.who h3{font-size:28px;margin-bottom:8px}
.who p{margin:0;color:var(--muted)}
.notice{background:var(--yellow);color:#1d2326;font-weight:600;font-size:15px}
.notice .wrap{padding-top:10px;padding-bottom:10px}
.notice p{margin:0}
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:30px}
.place{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--steel-2);padding:22px}
.place.yard{border-top-color:var(--green)}
.place h3{font-size:34px;margin-bottom:10px}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;padding:6px 12px;margin-bottom:6px;border:2px solid currentColor}
.status i{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block}
.status.open{color:#2e7d4f}.status.closed{color:#b23a2a}
.status-sub{color:var(--muted);font-size:15px;margin:0 0 14px}
.place table{width:100%;border-collapse:collapse;font-size:16px}
.place td{padding:7px 0;border-bottom:1px solid var(--line)}
.place td:last-child{text-align:right}
.place tr.today td{font-weight:700}
.place .phone{display:inline-block;margin-top:16px;font-weight:600;font-size:18px}
.addr{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.addr div{border-top:2px solid var(--text);padding-top:10px}
.addr h3{font-size:24px;margin-bottom:6px}
.addr p{margin:0;color:var(--muted)}
.addr a{font-weight:600;color:var(--text)}
.serving{margin:0 0 24px;color:var(--muted);font-size:16px;max-width:46em}
.contact{background:var(--green-dk);color:#fff}
.contact .lede{color:#d4ded8}
form{display:grid;gap:14px;max-width:560px}
label{font-size:15px;font-weight:600;display:grid;gap:6px}
input,select,textarea{font:inherit;font-size:16px;-webkit-text-size-adjust:100%;padding:12px 14px;border:2px solid transparent;background:#f2f3ef;color:#1d2326;width:100%;border-radius:0}
textarea{min-height:110px;resize:vertical}
form button{font:600 16px var(--body);background:#fff;color:var(--green);border:0;padding:15px 24px;cursor:pointer;justify-self:start}
.note{font-size:14px;color:#d4ded8;margin:6px 0 0}
footer{background:var(--steel);color:#b9c0c2;padding:28px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer .wrap::before{content:"";flex:0 0 100%;height:64px;margin-bottom:6px;background:url(/logo-white.png) left center/contain no-repeat}
footer a{color:#fff}
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.teaser{border:1px solid var(--line);background:var(--bg);padding:22px;display:grid;gap:8px;align-content:start}
.teaser h3{font-size:32px}
.teaser p{margin:0;color:var(--muted)}
.teaser a{font-weight:600}
.feelayout{display:grid;gap:20px;margin-top:26px;align-items:start}
@media(min-width:980px){.feelayout{grid-template-columns:3fr 1fr}}
.feegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feegrp{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--green);padding:18px 20px}
.feegrp h3{font-size:28px;margin-bottom:8px}
.feegrp table{width:100%;border-collapse:collapse;font-size:16px}
.feegrp td{padding:6px 0;border-bottom:1px solid var(--line)}
.feegrp td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.feegrp th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding-bottom:4px}
.feegrp th:last-child{text-align:right}
.finder{margin-top:26px;background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--green);padding:22px 24px;display:grid;gap:14px;max-width:560px}
.finder [hidden]{display:none}
.finder select{border-color:var(--line)}
.finder .chk{display:flex;align-items:center;gap:10px}
.finder .chk input{width:auto}
.finder table{width:100%;border-collapse:collapse;font-size:16px}
.finder td{padding:7px 0;border-bottom:1px solid var(--line)}
.finder td:last-child{text-align:right;font-weight:600}
.finder .tot td{font-family:var(--display);font-size:36px;font-weight:900;border-bottom:0;padding-top:12px}
.finder .small{margin:0;color:var(--muted);font-size:14px}
.okno{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.okno div{background:var(--bg);border:1px solid var(--line);padding:18px 20px}
.okno h3{font-size:28px;margin-bottom:8px}
.okno p{margin:0;color:var(--muted)}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.how div{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--green);padding:18px 20px}
.how b{font-family:var(--display);font-size:30px;display:block;margin-bottom:4px;line-height:1}
.how p{margin:0;color:var(--muted)}
.calc{margin-top:34px;background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--green);padding:22px 24px;display:grid;gap:14px}
.calc h3{font-size:clamp(30px,5vw,44px)}
.calc .small{margin:0;color:var(--muted);font-size:15px}
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.calc input,.calc select{border-color:var(--line)}
.calc .res{border-top:1px solid var(--line);padding-top:14px;overflow-anchor:none}
@media(max-width:600px){.calc .res{min-height:280px}}
.calc .big{font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,52px);line-height:1}
.calc .res p{margin:8px 0 0;color:var(--muted)}
.flow{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.flow li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;border:2px solid var(--green-lt);padding:12px 14px}
.flow .n{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:#fff}
.flow strong{display:block;color:#fff}
.flow span{color:#ecdccd;font-size:15px}
.feetop{display:grid;gap:20px;margin-top:26px;align-items:start}
@media(min-width:860px){.feetop{grid-template-columns:1fr 1fr}}
.feetop .finder{margin-top:0;max-width:none}
.infocard{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--steel-2);padding:20px 24px}
.infocard h3{font-size:clamp(30px,5vw,40px);margin-bottom:6px}
.irow{padding:12px 0;border-bottom:1px solid var(--line)}
.irow:last-child{border-bottom:0}
.irow b{display:block;font-size:17px}
.irow p{margin:4px 0 0;color:var(--muted);font-size:16px}
.irow table{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
.irow td{padding:5px 0;border-bottom:1px solid var(--line)}
.irow td:last-child{text-align:right;font-weight:600}
.irow tr:last-child td{border-bottom:0}
.govgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.govcard{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--green);padding:24px}
.govcard .stat{font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,60px);line-height:1;margin-bottom:8px}
.govcard h3{font-size:32px;margin-bottom:8px}
.govcard p{margin:0 0 10px;color:var(--muted)}
.govband{margin-top:26px;background:var(--steel);color:#fff;padding:26px;display:grid;gap:12px;justify-items:start}
.govband h3{font-size:clamp(30px,5vw,44px)}
.govband p{margin:0;color:#d6dadb;max-width:40em}
.contact h2,.contact .lede,.contact .note{text-align:center}
.contact .lede{margin-left:auto;margin-right:auto}
.contact form{margin:0 auto}
.contact form button{justify-self:center}

/* teaser links as green buttons */
.teaser a{display:inline-block;justify-self:start;background:var(--green);color:#fff;padding:12px 20px;font-weight:600;text-decoration:none}
/* wholesale pickup and delivery as plain lines */
.trade ul{display:block;list-style:disc;padding-left:22px;gap:0}
.trade li{border:0;padding:0;font-weight:400;font-size:inherit;margin-bottom:4px}
/* less empty space between a page title band and the content under it */
.phero + section{padding-top:28px}
