/* ======================================================
   Why Choose Section (Home)
   ====================================================== */

/* --- Why Choose (Home) — two-two + wide closer --- */
/* Assumes your brand tokens exist globally; if not, keep these fallbacks: */
:root{
  --brand:#0b5e66;         /* teal */
  --brand-dark:#0a3f45;    /* deeper teal */
  --accent:#e87722;        /* warm orange */
  --paper:#fff;
  --ink:#1f2a30;
  --muted-ink:#617485;
}

.why-choose { padding: clamp(2.25rem, 3vw, 3rem) 0; background: var(--paper); color: var(--ink); }
.why-choose .wrapper { max-width: 1100px; margin: 0 auto; }
.why-choose h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; color: var(--brand-dark); margin: 0 0 1.5rem; text-wrap: balance; }

/* Grid: 1 col mobile, 2 cols from 700px up. Last card spans both columns. */
.wc-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* mobile */
}
@media (min-width:700px){
  .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-card--wide { grid-column: 1 / -1; max-width: 980px; justify-self: center; }
}

/* Cards: equal height, soft shadow, subtle alt background on odds */
.wc-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  isolation: isolate;
}
.wc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.wc-card:nth-child(odd){
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 3%, transparent), transparent 24%), var(--paper);
}

/* Number badge — ORIGINAL gradient (teal → orange) */
.wc-num{
  --size: 40px;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  font-weight: 700; color: var(--paper);
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  position: absolute; top: -14px; left: -14px;
}

/* Type */
.wc-card h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: .9rem 0 .4rem; color: var(--brand-dark); }
.wc-card p { margin: 0; color: var(--muted-ink); line-height: 1.55; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .wc-card{transition:none} .wc-card:hover{transform:none} }