/* Circle of sustainability graphic (native HTML/SVG) */
.cos{margin:2rem 0 2.5rem;padding:clamp(16px,3vw,28px);background:#faf7f0;border-radius:18px;border:1px solid rgba(0,49,27,.1)}
.cos-stage{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:1/1}
.cos-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cos-arc{fill:none;stroke:#fe7d1c;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cos.is-armed .cos-arc{stroke-dashoffset:1}
.cos.is-drawn .cos-arc{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out calc(var(--i)*.28s)}
.cos-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;text-align:center;color:#00311b}
.cos-label{margin:0 0 .4em;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#c45a32;font-weight:700}
.cos-live{margin:0;min-height:6.2em;display:flex;align-items:center;justify-content:center;font-size:clamp(.85rem,2.1vw,1rem);line-height:1.4;text-wrap:balance}
.cos-title{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(1.05rem,2.8vw,1.45rem);font-weight:700;line-height:1.2}
.cos-steps{list-style:none;margin:0;padding:0}
.cos-step{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:27%;margin:0}
.cos-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;text-align:center;position:relative;-webkit-tap-highlight-color:transparent}
.cos-dot{display:grid;place-items:center;width:clamp(54px,12vw,86px);aspect-ratio:1;border-radius:50%;background:#00311b;box-shadow:inset 0 0 0 4px #00311b,inset 0 0 0 6px rgba(254,125,28,.7);transition:transform .2s ease,box-shadow .2s ease}
.cos-num{position:absolute;top:-6px;left:calc(50% + clamp(14px,3vw,22px));z-index:1;width:28px;height:28px;border-radius:50%;background:#c45a32;color:#faf7f0;border:3px solid #faf7f0;font-weight:700;font-size:.85rem;display:grid;place-items:center;line-height:1}
.cos-txt{display:flex;flex-direction:column;color:#00311b;line-height:1.2;text-wrap:balance}
.cos-txt strong{font-size:clamp(.78rem,1.8vw,.95rem)}
.cos-txt span{font-size:clamp(.68rem,1.5vw,.8rem);opacity:.8}
.cos-btn:focus-visible .cos-dot{outline:3px solid #fe7d1c;outline-offset:3px}
.cos-btn.is-active .cos-dot,.cos-btn:hover .cos-dot{transform:scale(1.12);box-shadow:inset 0 0 0 4px #00311b,inset 0 0 0 6px #fe7d1c,0 0 0 6px rgba(254,125,28,.25),0 0 22px rgba(254,125,28,.55)}
.cos-exp{display:none}
@media (max-width:520px){
  .cos-stage{aspect-ratio:auto}
  .cos-arcs,.cos-center{display:none}
  .cos-steps{counter-reset:none;display:grid;gap:10px}
  .cos-steps::before{content:"Georgia Wood Char · A complete circle of sustainability";display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#c45a32;font-weight:700;margin-bottom:4px}
  .cos-step{left:auto;top:auto;transform:none;width:auto;padding:12px 14px 12px 56px;border-radius:12px;background:#fff;border:1px solid rgba(0,49,27,.1);position:relative;transition:box-shadow .2s ease}
  .cos-step:not(:last-child)::after{content:"";position:absolute;left:27px;bottom:-11px;width:3px;height:10px;background:#fe7d1c}
  .cos-btn{flex-direction:row;align-items:flex-start;text-align:left}
  .cos-dot{width:52px;flex:0 0 52px;margin-right:12px}
  .cos-num{position:absolute;left:-44px;top:0;width:32px;height:32px}
  .cos-txt{text-align:left}
  .cos-exp{display:block;margin:.4em 0 0;font-size:.88rem;line-height:1.45;color:#00311b;text-wrap:pretty}
  .cos-step:has(.is-active){box-shadow:0 0 0 2px #fe7d1c}
}
@media (prefers-reduced-motion:reduce){.cos .cos-arc{stroke-dashoffset:0!important;transition:none!important}.cos-dot{transition:none}}
.cos-ico{display:block;width:62%;height:62%;overflow:visible}