/* ============================================================================
   FEATURES — "What We Offer" card grid
   ----------------------------------------------------------------------------
   Loaded by : index.html
   Depends on: base/tokens.css, base/layout.css

   Six cards describing product categories. Distinguished from the overview
   cards above by a left accent that appears on hover rather than a top bar.
   ============================================================================ */

.features{background:var(--white);}

.feat-hdr{text-align:center;margin-bottom:3.5rem;}
.feat-hdr .sec-sub{margin:0 auto;}
.feat-divider{width:48px;height:3px;background:var(--navy);border-radius:2px;margin:1rem auto 0;}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}

.feat-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:8px;padding:2rem;transition:all 0.3s;
  border-left:4px solid transparent;   /* reserved so hover doesn't shift layout */
}
.feat-card:hover{
  border-left-color:var(--navy);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

.feat-icon{
  width:52px;height:52px;background:var(--light2);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:1.2rem;
}
.feat-card h3{font-size:1.05rem;font-weight:700;color:var(--text-dark);margin-bottom:0.6rem;}
.feat-card p{font-size:0.875rem;color:var(--text-mid);line-height:1.75;}

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