/* Arbor Survey page styles: about.css */
/* ---------- Brand design system (Brand Guidelines v2.3) ---------- */
.bg-pale{background:var(--pale-green);}
/* ---------- Header / nav ---------- */
.subnav a[aria-current="page"]{background:var(--pale-green);}
.pillar,section[id]{scroll-margin-top:84px;}
.btn--soft{background:#fff;color:var(--dark-green);border-color:var(--dark-green);}
.btn--soft:hover{background:var(--dark-green);color:#fff;}
/* ---------- Hero ---------- */
.lead-statement{font-size:1.3rem;line-height:1.45;color:var(--dark-green);font-weight:700;max-width:18em;}
/* ---------- Value grid ---------- */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px;}
.value{background:#fff;border:1px solid var(--light-grey);border-radius:6px;padding:18px;}
.value h3{margin-bottom:.35em;}
.value p{font-size:.92rem;color:var(--mid-grey);margin:0;}
@media (max-width:880px){
  .values{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .values{grid-template-columns:1fr;}
}
/* ---------- Mini stats ---------- */
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:26px 0;}
.mini .num{font-size:2.1rem;font-weight:700;color:var(--dark-green);line-height:1.05;}
.mini .lab{font-size:.95rem;color:var(--mid-grey);margin-top:4px;}
@media (max-width:760px){
  .minis{grid-template-columns:1fr;gap:16px;}
}
/* ---------- Map embed ---------- */
.mapwrap{margin-top:8px;border:1px solid var(--light-grey);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 14px rgba(35,31,32,.06);}
.mapwrap iframe{display:block;width:100%;height:790px;border:0;}
.mapcap{font-size:.9rem;color:var(--mid-grey);margin:14px 0 0;}
@media (max-width:760px){
  .mapwrap iframe{height:560px;}
}
/* ---------- Lifecycle flow ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:32px;align-items:start;}
.step{position:relative;background:#fff;border:1px solid var(--light-grey);border-radius:8px;padding:20px 18px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
.step:hover,.step:focus-visible{border-color:var(--sage);box-shadow:0 3px 14px rgba(35,31,32,.08);outline:none;}
.step .n{width:34px;height:34px;border-radius:999px;background:var(--dark-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:13px;}
.step h3{font-size:1rem;margin-bottom:.3em;}
.step .step-lead{font-size:.87rem;color:var(--mid-grey);margin:0;}
.step .step-more{font-size:.85rem;color:var(--near-black);max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .25s ease,opacity .2s ease,margin .25s ease;}
.step[aria-expanded="true"] .step-more{max-height:340px;opacity:1;margin-top:.7rem;}
.step .tog{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dark-green);}
.step .tog svg{width:12px;height:12px;transition:transform .2s ease;}
.step[aria-expanded="true"] .tog svg{transform:rotate(45deg);}
@media (hover:hover){
  .step:hover .step-more{max-height:340px;opacity:1;margin-top:.7rem;}
}
@media (max-width:880px){
  .flow{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .flow{grid-template-columns:1fr;}
}
/* ---------- Stats band ---------- */
.band{background:var(--dark-green);color:#fff;}
.band h2{color:#fff;}
.band .intro{color:var(--pale-green);max-width:44em;}
.band .minis .num{color:var(--light-green);}
.band .minis .lab{color:var(--pale-green);}
/* ---------- Explore cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.card-link{display:block;background:#fff;border:1px solid var(--light-grey);border-radius:8px;padding:22px;
  text-decoration:none;color:var(--near-black);transition:border-color .15s ease,transform .15s ease;}
.card-link:hover{border-color:var(--sage);transform:translateY(-2px);color:var(--near-black);}
.card-link h3{margin-bottom:.3em;}
.card-link p{font-size:.95rem;color:var(--mid-grey);margin:0 0 .8rem;}
.card-link .go{color:var(--dark-green);font-weight:600;font-size:.9rem;}
@media (max-width:760px){
  .cards{grid-template-columns:1fr;}
}
.note .container{max-width:760px;}
.todo{background:var(--warm-tan);color:#231F20;padding:1px 6px;border-radius:3px;font-weight:600;font-size:.92em;}
@media (max-width:880px){
  h1{font-size:2rem;}
  .flow{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:480px){
  .flow{grid-template-columns:repeat(2,1fr);}
}