/* ---------- О нас ---------- */
/* Своя сетка, не переиспользуем .pains с лендинга: там spans заданы под три
   карточки, четвёртая схлопывалась в полоску. */

.about-hero{padding:170px 0 0}
.about-hero h1{max-width:21ch}
.about-hero .lede{max-width:60ch}

/* цифры проекта строкой под первым экраном */
.facts-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  margin-top:60px;padding-top:40px;border-top:var(--edge);
}
.fact b{
  display:block;font-family:var(--display);font-size:clamp(38px,3.6vw,52px);line-height:1;
  letter-spacing:-.03em;color:var(--brass);font-variant-numeric:tabular-nums;
}
.fact span{display:block;font-size:var(--fs-m);line-height:1.45;color:var(--green-dim);margin-top:10px;max-width:20ch}

/* четыре части проекта */
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.part{
  display:flex;flex-direction:column;padding:36px;border-radius:26px;border:var(--edge);
  background:linear-gradient(160deg,rgba(241,234,218,.045),rgba(241,234,218,.012));
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.part:hover{border-color:rgba(217,164,65,.3);transform:translateY(-3px)}
.part .num{
  font-size:var(--fs-s);letter-spacing:.17em;font-weight:600;color:var(--brass);
  line-height:1.5;margin-bottom:18px;
}
.part h3{
  font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:500;
  letter-spacing:-.02em;line-height:1.18;margin-bottom:14px;
}
.part p{font-size:var(--fs-m);line-height:1.7;color:var(--green-dim);font-weight:300}
.part .go{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:var(--fs-m);color:var(--brass);
}
.part .go i{font-style:normal;transition:transform .4s var(--ease)}
.part:hover .go i{transform:translateX(4px)}

/* опоры методологии — тёмный вариант блока .mgroup с лендинга */
.props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.prop{padding:28px 26px;border-radius:20px;border:var(--edge);background:rgba(241,234,218,.025)}
.prop b{
  display:block;font-size:var(--fs-s);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--brass);margin-bottom:14px;line-height:1.5;
}
.prop ul{list-style:none}
.prop li{
  font-size:var(--fs-m);line-height:1.55;font-weight:300;color:var(--green-dim);
  padding-left:15px;position:relative;margin-bottom:11px;
}
.prop li:last-child{margin-bottom:0}
.prop li::before{
  content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--brass);opacity:.6;
}

@media(max-width:1000px){
  .props{grid-template-columns:1fr}
}
@media(max-width:900px){
  .about-hero{padding:130px 0 0}
  .facts-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px;padding-top:32px}
  .parts{grid-template-columns:1fr}
  .part{padding:28px}
}
@media(max-width:480px){
  .facts-row{grid-template-columns:1fr;gap:20px}
  .fact span{max-width:none}
}