/* ===========================================
   ICON UTILITIES
   Sizing / color helpers for the inline-SVG icon
   set in js/components/Icons.js (replaces emoji).
   =========================================== */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: -3px;
}
.ic svg { width: 100%; height: 100%; display: block; }

/* Sizes */
.ic-12 { width: 12px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.ic-28 { width: 28px; height: 28px; }

/* Colors (brand scheme) */
.ic-teal   { color: var(--teal); }
.ic-orange { color: var(--orange); }
.ic-white  { color: #fff; }
.ic-muted  { color: var(--text-muted); }
.ic-gold   { color: #f4b942; }
.ic-green  { color: #3f9142; }

/* Circular icon badge (used for pillar/why-us/stat/specialty cards) */
.ic-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ic-badge svg { width: 60%; height: 60%; }

/* Inline icon + text row */
.ic-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}