.hero{padding:clamp(2.75rem,6vw,4.5rem) 0 0}
  .crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--text-faint);display:flex;gap:.6rem;flex-wrap:wrap}
  .crumbs a{text-decoration:none}
  .crumbs a:hover{color:var(--text-soft)}
  .hero h1{margin:1.5rem 0 0;max-width:18ch}
  .hero .lede{margin-top:1.5rem}
  .factbar{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:2.4rem;padding-top:1.6rem;
    border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--text-faint)}
  .factbar b{display:block;font-family:var(--font);font-size:.95rem;font-weight:600;
    letter-spacing:-0.005em;text-transform:none;color:var(--text);margin-top:.35rem}

  /* headline result band, the page's one loud moment */
  .results{margin-top:clamp(2.5rem,5vw,3.75rem)}
  .results .stats{--cols:4}
  .stat.hero-stat{background:linear-gradient(165deg,var(--surface),var(--bg-2))}
  .stat.hero-stat .k{color:var(--accent)}

  /* situation / approach / outcome, as an editorial three-beat */
  .beat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
    padding:clamp(2.25rem,4vw,3.25rem) 0;border-bottom:1px solid var(--line);align-items:start}
  @media(max-width:860px){.beat{grid-template-columns:1fr;gap:1.25rem}}
  .beat .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--accent);position:sticky;top:110px}
  @media(max-width:860px){.beat .tag{position:static}}
  .beat h2{font-size:clamp(1.6rem,2.9vw,2.3rem);margin-bottom:1.2rem}
  .beat p{color:var(--text-soft);max-width:var(--measure)}
  .beat p + p{margin-top:1.1rem}
  .beat ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;max-width:var(--measure)}
  .beat li{display:flex;gap:.75rem;color:var(--text-soft);font-size:.97rem;align-items:flex-start}
  .beat li svg{flex:none;margin-top:.34rem}

  figure{margin:2.2rem 0 0;max-width:var(--measure)}
  figure .card{padding:1.5rem}
  figure .head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:1.2rem}
  .draw{transition:stroke-dashoffset 1.9s var(--ease)}
  .key{display:flex;gap:1.15rem;margin-top:1.05rem;font-family:var(--mono);font-size:.67rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
  .key span{display:flex;align-items:center;gap:.45rem}
  .key i{width:15px;height:2px;border-radius:2px;display:block}
  figcaption{margin-top:.85rem;font-family:var(--mono);font-size:.67rem;line-height:1.6;color:var(--text-faint)}

  .pull{margin:2.4rem 0 0;padding:0 0 0 1.6rem;border-left:2px solid var(--accent);max-width:var(--measure)}
  .pull blockquote{margin:0;font-family:var(--serif);font-style:italic;
    font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.4;color:var(--text)}
  .pull cite{display:block;margin-top:.9rem;font-family:var(--mono);font-style:normal;font-size:.68rem;
    letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}

  .channels{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}

  .more{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.2rem;
    background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  @media(max-width:860px){.more{grid-template-columns:1fr}}
  .more a{background:var(--bg-2);padding:1.7rem 1.5rem;text-decoration:none;display:block;transition:background .3s}
  .more a:hover{background:var(--surface)}
  .more .brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--data)}
  .more .k{font-size:1.9rem;font-weight:800;letter-spacing:-0.04em;margin:.7rem 0 .45rem;line-height:1}
  .more p{font-size:.88rem;color:var(--text-faint);line-height:1.5}