/* ==========================================================================
   about.css — "Par mums" content blocks (used on home teaser + full page)
   ========================================================================== */

.about{
  background:var(--cream);
}
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.about-visual{
  position:relative;
  height:420px;
  border-radius:2px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--teal) 0%, var(--night) 100%);
}
.about-visual svg{position:absolute;inset:0;width:100%;height:100%;}
.about-fact{
  display:flex;
  gap:36px;
  margin-top:38px;
  padding-top:28px;
  border-top:1px solid rgba(61,74,74,0.2);
}
.about-fact div strong{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--teal);
}
.about-fact div span{
  font-size:0.85rem;
  color:var(--stone-light);
}
.about-body p{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--stone);
  margin-bottom:20px;
}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr;}
  .about-visual{height:280px;}
}

/* ---------- values grid (full about page only) ---------- */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(61,74,74,0.15);
  margin-top:20px;
}
.value-card{
  background:var(--cream);
  padding:34px;
}
.value-card h3{
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:12px;
  color:var(--teal);
}
.value-card p{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--stone);
}
@media (max-width:820px){
  .values-grid{grid-template-columns:1fr;}
}