/* ============================================================
   CGS Carbon — HOK® Activated Lignite product page styles
   Grade cards, technical reference table, supply section.
   ============================================================ */

.page-hero.on-photo{background-image:url(../img/hok-hero.jpg)}

/* ---------- grade cards ---------- */
.grade-card{position:relative}
.grade-card .form{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px}
.grade-card .size{font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.045em;
  margin-bottom:12px;line-height:1.15}
.grade-card ul{list-style:none;margin:14px 0 0;padding:0}
.grade-card li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.92rem;color:var(--slate)}
.grade-card li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;
  background:var(--teal)}

/* ---------- process figure ---------- */
.process-fig{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 34px;margin:0}
.process-fig ol{list-style:none;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:18px;align-items:center;margin:0;padding:0;text-align:center}
.process-fig li{margin:0}
.process-fig .node h4{margin-bottom:6px}
.process-fig .node p{font-size:.85rem;color:var(--slate);margin:0;line-height:1.5}
.process-fig .flow{color:var(--teal);font-weight:700}
.process-fig .flow svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;margin:0 auto}
.process-fig figcaption{margin-top:26px;font-size:.85rem;color:var(--slate);text-align:center}

/* ---------- supply / packaging ---------- */
.pack-card .qty{font-size:.8rem;color:var(--teal);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px}

@media(max-width:900px){
  .process-fig ol{grid-template-columns:1fr;gap:10px}
  .process-fig .flow svg{transform:rotate(90deg)}
}