/* ============================================================================
   OVERVIEW — "Why Elyco" company overview band
   ----------------------------------------------------------------------------
   Loaded by : index.html
   Depends on: base/tokens.css, base/layout.css (.sec-eye / .sec-title / .sec-sub)

   Sits directly below the hero. Uses the --light background so it reads as a
   distinct band against the white hero above it.

   Three stacked parts:
     .ov-grid    four differentiator cards (4 → 2 → 1 columns)
     .ov-facts   a <dl> of registration facts (term / definition pairs)
     .ov-tags    product-category pills
   ============================================================================ */

.overview{background:var(--light);border-top:1px solid var(--border);}

/* ── Heading ────────────────────────────────────────────────────────────── */
.ov-hdr{text-align:center;margin-bottom:3.2rem;}
.ov-hdr .sec-sub{margin:0 auto;}
.ov-divider{width:48px;height:3px;background:var(--navy);border-radius:2px;margin:1rem auto 1.2rem;}

/* ── Differentiator cards ───────────────────────────────────────────────── */
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}

.ov-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:1.9rem 1.6rem;
  transition:transform 0.3s,box-shadow 0.3s;
  border-top:3px solid var(--navy);   /* accent bar distinguishes these from .feat-card */
}
.ov-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

.ov-icon{
  width:46px;height:46px;background:var(--light2);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--navy);margin-bottom:1.1rem;
}
.ov-card h3{font-size:1rem;font-weight:700;color:var(--text-dark);line-height:1.35;margin-bottom:0.5rem;}
.ov-card p{font-size:0.85rem;color:var(--text-mid);line-height:1.7;}

/* ── Registration facts ─────────────────────────────────────────────────── */
.ov-facts{
  margin-top:2.5rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:1.8rem 2rem;
}
.ov-facts > div{display:flex;flex-direction:column;gap:4px;}
.ov-facts dt{
  font-size:0.68rem;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--text-light);
}
.ov-facts dd{font-size:0.95rem;font-weight:700;color:var(--navy);}

/* ── Category pills ─────────────────────────────────────────────────────── */
.ov-tags{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:0.55rem;justify-content:center;}
.ov-tag{
  background:var(--white);color:var(--navy);
  font-size:0.75rem;font-weight:600;letter-spacing:0.5px;
  padding:6px 16px;border-radius:20px;border:1px solid var(--border);
}

@media(max-width:960px){
  .ov-grid{grid-template-columns:repeat(2,1fr);}
  .ov-facts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .ov-grid{grid-template-columns:1fr;}
  .ov-facts{grid-template-columns:1fr;padding:1.5rem;}
}
@media(prefers-reduced-motion:reduce){
  .ov-card{transition:none;}
}