/* ==========================================================
   WHY CHOOSE US — page-specific styles
   Extends style.css design tokens (--c-black, --c-charcoal, --c-red,
   --c-orange, --font-display, --font-body). No new palette introduced.
   Layout mirrors the supplied reference: centered heading + intro
   paragraph, then a 2-column grid of icon / title / text blocks.
   ========================================================== */

.wc-section {
  background: var(--c-panel, #ffffff);
  padding: 40px 24px 70px;
}

.wc-inner {
  max-width: 1150px;
  margin: 0 auto;
}

.wc-intro {
  max-width: 900px;
  margin: 0 auto 50px;
  text-align: center;
}

.wc-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--c-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.wc-lead {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-ink-muted);
}

/* ---------- Feature grid (2 columns, icon above title/text) ---------- */

.wc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  row-gap: 46px;
}

.wc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wc-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  margin-bottom: 20px;
}

.wc-card-icon svg {
  width: 100%;
  height: 100%;
}

/* Alternate accent so the icons pick up the ZS red/orange palette
   without straying from the reference's plain-icon layout. */
.wc-card:nth-child(odd) .wc-card-icon { color: var(--c-red); }
.wc-card:nth-child(even) .wc-card-icon { color: var(--c-orange-2); }

.wc-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.wc-card-text {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--c-ink-muted);
}

@media (max-width: 900px) {
  .wc-section { padding: 32px 20px 56px; }
  .wc-grid { column-gap: 40px; row-gap: 38px; }
}

@media (max-width: 640px) {
  .wc-grid {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }
  .wc-card { align-items: flex-start; }
  .wc-card-icon { width: 54px; height: 54px; margin-bottom: 16px; }
}