/* Boise Junk Pros v2 — "City of Trees, crew that shows up"
   Palette law: orange NEVER carries white text. Dark sections carry --paper text. */

:root{
  --paper:#FAF7F0;
  --ink:#14211C;
  --pine:#16382C;
  --moss:#2E5D49;
  --sand:#E8DFCB;
  --safety:#F2760C;
  --rule:2px solid var(--ink);
  --wrap:72rem;
  --prose:72ch;
}

@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
}
img,svg{display:block;max-width:100%}
a{color:var(--moss);text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--safety);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{
  font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:750;
  letter-spacing:-0.015em;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:.75em 0}
ul,ol{padding-left:1.4em}
li{margin:.35em 0}
strong{font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.prose{max-width:var(--prose)}

.skip{position:absolute;left:-999px;top:0;background:var(--safety);color:var(--ink);padding:.6rem 1rem;font-weight:700;z-index:100}
.skip:focus{left:0}

/* ---------- eyebrow + section furniture ---------- */
.eyebrow{
  font-family:"Archivo",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  color:var(--moss);
  margin:0 0 .6rem;
}
.bg-pine .eyebrow,.hero .eyebrow{color:var(--sand)}
section{padding:3.5rem 0}
.section-rule{border-top:var(--rule)}
.bg-sand{background:var(--sand)}
.bg-pine{background:var(--pine);color:var(--paper)}
.bg-pine h1,.bg-pine h2,.bg-pine h3,.bg-pine h4,.bg-pine p,.bg-pine li{color:var(--paper)}
.bg-pine a{color:var(--paper)}
.bg-pine .accent{color:var(--safety)}

/* topographic contour texture — applied via ::before so text stays auditable */
.topo{position:relative}
.topo>.wrap{position:relative;z-index:1}
.topo::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.07;
  background-repeat:repeat;
  background-size:640px 420px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420' fill='none' stroke='%23FAF7F0' stroke-width='1.3'%3E%3Cpath d='M-20 60C90 20 180 90 300 60S520 20 660 70'/%3E%3Cpath d='M-20 110C90 70 190 140 310 110S530 70 660 120'/%3E%3Cpath d='M-20 170C100 130 200 200 320 165S540 130 660 180'/%3E%3Cpath d='M-20 235C110 195 210 265 330 225S550 195 660 245'/%3E%3Cpath d='M-20 300C100 260 205 330 325 292S545 262 660 310'/%3E%3Cpath d='M-20 360C95 325 195 390 315 355S535 325 660 372'/%3E%3Ccircle cx='140' cy='95' r='26'/%3E%3Ccircle cx='140' cy='95' r='44'/%3E%3Ccircle cx='480' cy='300' r='30'/%3E%3Ccircle cx='480' cy='300' r='52'/%3E%3C/svg%3E");
}
.topo-light::before{
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420' fill='none' stroke='%2316382C' stroke-width='1.3'%3E%3Cpath d='M-20 60C90 20 180 90 300 60S520 20 660 70'/%3E%3Cpath d='M-20 110C90 70 190 140 310 110S530 70 660 120'/%3E%3Cpath d='M-20 170C100 130 200 200 320 165S540 130 660 180'/%3E%3Cpath d='M-20 235C110 195 210 265 330 225S550 195 660 245'/%3E%3Cpath d='M-20 300C100 260 205 330 325 292S545 262 660 310'/%3E%3Cpath d='M-20 360C95 325 195 390 315 355S535 325 660 372'/%3E%3Ccircle cx='140' cy='95' r='26'/%3E%3Ccircle cx='140' cy='95' r='44'/%3E%3Ccircle cx='480' cy='300' r='30'/%3E%3Ccircle cx='480' cy='300' r='52'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--pine);
  border-bottom:3px solid var(--safety);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.wordmark{
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--paper);
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}
.wordmark .wm-accent{color:var(--safety)}
.desktop-nav{display:none;align-items:center;gap:1.4rem}
.desktop-nav a{color:var(--paper);text-decoration:none;font-weight:600;font-size:.95rem}
.desktop-nav a:hover{text-decoration:underline;color:var(--paper)}
.mobile-actions{display:flex;align-items:center;gap:.6rem}
.phone-chip{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;
  background:var(--safety);color:var(--ink);
}
.menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .7rem;
  color:var(--paper);font-weight:700;font-family:"Archivo",sans-serif;
  border:2px solid var(--paper);border-radius:8px;
}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--paper);color:var(--pine)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);
  min-width:240px;
  background:var(--paper);
  border:var(--rule);
  box-shadow:0 10px 24px rgba(20,33,28,.25);
  padding:.6rem 0;
  z-index:60;
}
.menu-panel a{
  display:block;padding:.55rem 1.1rem;
  color:var(--ink);text-decoration:none;font-weight:600;
}
.menu-panel a:hover{background:var(--sand)}
.menu-panel .mp-head{
  display:block;padding:.55rem 1.1rem .2rem;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);
}
@media(min-width:980px){
  .desktop-nav{display:flex}
  .mobile-actions{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Archivo",sans-serif;
  font-weight:750;
  text-decoration:none;
  border-radius:10px;
  padding:.95rem 1.6rem;
  font-size:1.1rem;
  letter-spacing:.01em;
  min-height:44px;
}
.btn-primary,.bg-pine .btn-primary,.hero .btn-primary,.mid-cta .btn-primary,.cta-band .btn-primary,.site-footer .btn-primary{background:var(--safety);color:var(--ink);border:2px solid var(--ink)}
.btn-primary:hover,.bg-pine .btn-primary:hover,.hero .btn-primary:hover,.mid-cta .btn-primary:hover,.cta-band .btn-primary:hover{background:#F98A2B;color:var(--ink)}
.btn-header,.desktop-nav a.btn-header,.site-header a.btn-header{background:var(--safety);color:var(--ink);border:none;padding:.55rem 1rem;font-size:1rem;border-radius:8px}
.btn-header:hover,.desktop-nav a.btn-header:hover,.site-header a.btn-header:hover{background:#F98A2B;color:var(--ink);text-decoration:none}
.btn-big{font-size:clamp(1.2rem,2.6vw,1.7rem);padding:1.1rem 2rem}
.cta-micro{font-size:.95rem;font-weight:600;margin-top:.6rem;color:var(--ink)}
.bg-pine .cta-micro{color:var(--sand)}
.cta-note{font-size:.95rem;margin-top:.5rem}

/* ---------- hero ---------- */
.hero{background:var(--pine);color:var(--paper);padding:4.5rem 0 4rem;border-bottom:var(--rule)}
.hero p,.hero li{color:var(--paper)}
.hero h1{color:var(--paper);max-width:18ch}
.hero .lede{font-size:clamp(1.1rem,1.9vw,1.35rem);max-width:56ch;color:var(--paper)}
.hero-cta{margin-top:1.8rem}
.hero .alt-link{color:var(--paper);font-weight:600}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--sand);border-bottom:var(--rule);padding:.9rem 0}
.trust-strip ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
  justify-content:center;
}
.trust-strip li{
  display:flex;align-items:center;gap:.45rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.92rem;color:var(--ink);
  margin:0;
}
.trust-strip svg{flex:none}

/* ---------- tile grid ---------- */
.tile-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  margin-top:1.5rem;
}
.tile{
  display:block;
  background:var(--paper);
  border:var(--rule);
  padding:1.2rem 1.1rem 1.1rem;
  text-decoration:none;color:var(--ink);
  transition:transform .12s ease;
}
.tile:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--safety);color:var(--ink)}
.tile h3{font-size:1.08rem;margin:.7rem 0 .25rem}
.tile p{font-size:.92rem;margin:0;color:var(--ink)}
.tile .icon{width:44px;height:44px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.6rem}
@media(min-width:820px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step{border-top:var(--rule);padding-top:1rem}
.step-num{
  display:block;
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-size:clamp(3rem,6vw,4.4rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:2px var(--moss);
  margin-bottom:.4rem;
}
.bg-pine .step-num{-webkit-text-stroke:2px var(--sand)}
.step h3{margin:.2rem 0 .3rem}

/* ---------- checklist ---------- */
.check-list{list-style:none;padding:0;margin:1rem 0}
.check-list li{
  padding-left:2rem;position:relative;margin:.6rem 0;
}
.check-list li::before{
  content:"";
  position:absolute;left:0;top:.32em;
  width:1.15em;height:1.15em;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='4' stroke='%232E5D49' stroke-width='2'/%3E%3Cpath d='M6 12.5l4 4L18 8' stroke='%23F2760C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:1.5rem}
.card{border:var(--rule);background:var(--paper);padding:1.4rem 1.3rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.bg-sand .card{background:var(--paper)}

/* ---------- price table ---------- */
.price-table{
  width:100%;
  border-collapse:collapse;
  margin:1.4rem 0 .4rem;
  font-variant-numeric:tabular-nums;
}
.price-table th{
  background:var(--pine);color:var(--paper);
  text-align:left;padding:.7rem .9rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;
}
.price-table td{
  border-bottom:1.5px solid var(--moss);
  padding:.75rem .9rem;
  vertical-align:top;
}
.price-table td.num{
  font-family:"Archivo",sans-serif;font-weight:750;font-size:1.15rem;white-space:nowrap;
}
.table-caption{font-size:.92rem;color:var(--moss);margin-top:.5rem}

/* ---------- quick answer box ---------- */
.quick-answer{
  border:var(--rule);
  border-left:8px solid var(--safety);
  background:var(--paper);
  padding:1.3rem 1.4rem;
  margin:1.6rem 0;
  max-width:75ch;
}
.quick-answer p{margin:.4em 0}

/* ---------- callouts ---------- */
.callout{
  background:var(--sand);
  border:var(--rule);
  padding:1.3rem 1.4rem;
  margin:1.6rem 0;
  max-width:75ch;
}
.callout-orange{border-left:8px solid var(--safety)}

/* ---------- FAQ ---------- */
.faq-group{margin-top:1.6rem}
details.faq{border-top:var(--rule)}
details.faq:last-of-type{border-bottom:var(--rule)}
details.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem .2rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1.08rem;
  color:var(--ink);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";
  font-weight:800;font-size:1.3rem;color:var(--moss);flex:none;line-height:1;
}
details.faq[open] summary::after{content:"–"}
details.faq .faq-a{padding:0 .2rem 1.2rem;max-width:70ch}
details.faq .faq-a p{margin:.4em 0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--pine);color:var(--paper);border-top:var(--rule);text-align:center}
.cta-band h2{color:var(--paper);max-width:26ch;margin-left:auto;margin-right:auto}
.cta-band p,.cta-band li,.cta-band a{color:var(--paper)}
.cta-band .cta-micro{color:var(--sand)}
.cta-band .btn{margin-top:1rem}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:.9rem 0 0;font-size:.9rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.crumbs li{margin:0;display:flex;gap:.35rem;align-items:center}
.crumbs li+li::before{content:"/";color:var(--moss)}
.crumbs a{color:var(--moss)}
.crumbs .here{color:var(--ink);font-weight:600}

/* ---------- footer ---------- */
.site-footer{
  background:var(--pine);color:var(--paper);
  border-top:4px solid var(--safety);
  padding:3rem 0 2rem;
  position:relative;
}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr;position:relative;z-index:1}
@media(min-width:820px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer h2{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.site-footer p,.site-footer li{color:var(--paper)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.45rem 0}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-phone{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:1.6rem;color:var(--paper);text-decoration:none;
}
.footer-phone:hover{color:var(--safety)}
.footer-bottom{
  margin-top:2.4rem;padding-top:1.2rem;
  border-top:1px solid var(--moss);
  font-size:.9rem;color:var(--sand);
  position:relative;z-index:1;
}
.footer-bottom p{color:var(--sand);margin:.3em 0}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background:var(--safety);color:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;
  text-decoration:none;
  border-top:2px solid var(--ink);
}
.callbar:hover{color:var(--ink)}
body{padding-bottom:72px}
@media(min-width:980px){
  .callbar{display:none}
  body{padding-bottom:0}
}

/* ---------- misc ---------- */
.two-col{display:grid;gap:2rem}
@media(min-width:880px){.two-col{grid-template-columns:1fr 1fr}}
.mid-cta{
  border:var(--rule);
  background:var(--pine);
  padding:1.8rem 1.6rem;
  margin:2.2rem 0;
}
.mid-cta h2,.mid-cta h3,.mid-cta p,.mid-cta li,.mid-cta a{color:var(--paper)}
.mid-cta .cta-micro{color:var(--sand)}
.big-phone{
  display:inline-block;
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(1.8rem,4.5vw,3rem);
  color:var(--ink);text-decoration:none;
  border-bottom:4px solid var(--safety);
  line-height:1.2;
}
.big-phone:hover{color:var(--moss)}
.area-cols{columns:2;column-gap:2.5rem;max-width:44rem}
@media(min-width:700px){.area-cols{columns:3}}
.area-cols li{break-inside:avoid}
.ring-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.ring-links a{
  border:2px solid var(--moss);border-radius:8px;
  padding:.5rem .9rem;text-decoration:none;font-weight:600;color:var(--moss);
}
.ring-links a:hover{background:var(--sand);color:var(--ink)}
.related{margin-top:2.5rem}
.related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.related li{margin:0}
.related a{
  display:inline-block;border:2px solid var(--moss);border-radius:999px;
  padding:.45rem 1rem;text-decoration:none;font-weight:600;color:var(--moss);font-size:.95rem;
}
.related a:hover{background:var(--sand);color:var(--ink)}
.icon-row{display:flex;align-items:flex-start;gap:1rem;margin:1.2rem 0}
.icon-row .icon{flex:none;width:40px;height:40px;margin-top:.2rem}
.hero-sub{margin-top:.6rem}
.lede{font-size:1.15rem}