/* About — Figma 2:2678 @1920; 188:26184 @1300; 188:26425 @900; 188:26629 @420; 161:6463 @360 */

.about-main {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Breadcrumbs — Figma List 161×140×1890×36; VerticalBorder → 10×1 #ddd; Link bottom 1px @16% */
.about-bc {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: calc(100% - 161px);
  min-height: 36px;
  margin: 35px 0 0 161px;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}

.about-bc__link {
  color: #666666;
  font-weight: 300;
  line-height: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 102, 102, 0.45);
  padding-bottom: 1px;
}

.about-bc__sep {
  display: block;
  width: 10px;
  height: 1px;
  margin: 0 16px;
  background: #dddddd;
  flex-shrink: 0;
}

.about-bc__current {
  color: #666666;
  font-weight: 400;
  line-height: 14px;
}

.about-title {
  margin: 32px 0 0 160px;
  font-size: 32px;
  font-weight: 300;
  line-height: 35.2px;
  color: #262626;
}

.about-title__br360 {
  display: none;
}

/* —— Values @1920 —— circles y=293, titles y=523, texts y≈587 —— */
.about-values {
  position: relative;
  width: 1920px;
  height: 520px;
  margin: 49px 0 0;
}

.about-value {
  position: absolute;
  top: 0;
}

.about-value--1 { left: 155px; width: 405px; }
.about-value--2 { left: 582px; width: 330px; }
.about-value--3 { left: 938px; width: 350px; }
.about-value--4 { left: 1314px; width: 450px; }

.about-value__photo {
  display: block;
  width: 202px;
  height: 202px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 8%;
}

.about-value__title {
  margin: 28px 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 26.6px;
  color: #262626;
}

.about-value--1 .about-value__title { margin-left: 6px; }   /* 161-155 */
.about-value--2 .about-value__title { margin-left: 2px; }   /* 584-582 */
.about-value--3 .about-value__title { margin-left: 1px; }   /* 939-938 */
.about-value--4 .about-value__title { margin-left: 0; }

.about-value__text {
  margin: 13px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  color: #262626;
  white-space: pre-line;
}

.about-value--1 .about-value__text { margin-left: 6px; width: 399px; }
.about-value--2 .about-value__text { margin-left: 2px; width: 294px; }
.about-value--2 .about-value__text--note {
  margin-top: 28px; /* 710.7 - (591.2+91) ≈ 28.5 */
  width: 312px;
}
.about-value--3 .about-value__text { margin-left: 1px; width: 339px; }
.about-value--4 .about-value__text { margin-left: 0; width: 436px; }

/* 1920: visual gap between the two halves of value-4 text (Figma 5px) */
.about-value__split {
  display: block;
  height: 5px;
}

/* Breakpoint copies of value texts — hidden on 1920 */
.about-value__text--4-compact,
.about-value__text--4-1300,
.about-value__text--4-360,
.about-value__text--1-360 {
  display: none;
}

.about-value__link {
  color: #262626;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 #ffd800;
}

.about-value__br-desk { display: inline; }
.about-value__br-mob { display: none; }

/* —— History @1920 — group 492×923×936.5×1309; title @918; body lh≈1.3 —— */
.about-history {
  width: 937px;
  margin: 110px auto 147px; /* title @923 after values end @813; footer gap 147 */
  padding: 0;
}

.about-history__title {
  margin: 0 0 34px; /* 993 - (923+36) ≈ 34 */
  text-align: center;
  font-size: 32px;
  font-weight: 300;
  line-height: 35.2px;
  color: #262626;
}

.about-history__body {
  font-size: 18px;
  font-weight: 300;
  color: #262626;
}

.about-history__body p {
  margin: 0 0 27px;
  white-space: pre-line;
  line-height: 1.3; /* Figma text boxes ≈23.4px/line @18px, not lh 100% */
}

.about-history__body p:first-child {
  margin-bottom: 3px; /* 1041 - (993+45) = 3 */
}

.about-history__body p:nth-child(2) {
  margin-bottom: 21px; /* 1251 - (1041+189) = 21 */
}

.about-history__body p:last-child {
  margin-bottom: 0;
}

/* Exact Figma text for 900/420/360 — hidden by default */
.about-history__body--merged,
.about-history__body--360 {
  display: none;
}

/* ================= 1300 — 188:26184 ================= */
@media (max-width: 1300px) and (min-width: 1000px) {
  .about-main { width: 100%; }

  /* header ~108; Figma crumbs y=130 → margin 22 */
  .about-bc {
    margin: 22px 0 0 19px;
    min-height: 20px;
    max-width: calc(100% - 19px);
  }

  .about-bc__current {
    color: #666666;
    font-weight: 400;
    border-bottom: none;
    padding-bottom: 1px;
  }

  .about-bc__sep {
    margin: 0 16px;
  }

  .about-title {
    margin: 32px 0 0 19px;
    width: fit-content;
  }

  .about-values {
    width: 1300px;
    height: 560px;
    margin-top: 24px; /* circles y=242 after title ~218 */
  }

  .about-value--1 { left: 19px; width: 270px; }
  .about-value--2 { left: 313px; width: 290px; }
  .about-value--3 { left: 645px; width: 280px; }
  .about-value--4 { left: 957px; width: 323px; }

  .about-value--1 .about-value__title { margin-left: 6px; }
  .about-value--2 .about-value__title { margin-left: 2px; }
  .about-value--3 .about-value__title { margin-left: 1px; }
  .about-value--4 .about-value__title { margin-left: 0; }

  /* Figma body texts @1300: lh 1.5 (not 25px from 1920) */
  .about-value__text {
    line-height: 1.5;
  }

  /* title→text gaps: v1 33 / v2 23 / v3 24 / v4 12 */
  .about-value--1 .about-value__text { width: 239px; margin: 33px 0 0 6px; }
  .about-value--2 .about-value__text { width: 257px; margin: 23px 0 0 2px; }
  .about-value--2 .about-value__text--note {
    width: 273px;
    margin: 12px 0 0 2px;
  }
  .about-value--3 .about-value__text { width: 237px; margin: 24px 0 0 1px; }

  /* v4: Figma single text node with exact line breaks @1300 */
  .about-value__text--4-1920,
  .about-value__text--4-360 {
    display: none;
  }

  .about-value__text--4-compact {
    display: none;
  }

  .about-value--4 .about-value__text--4-1300 {
    display: block;
    width: 323px;
    margin: 12px 0 0;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value__split {
    display: none;
  }

  .about-history {
    width: 937px;
    margin: 38px auto 80px; /* group y=840; footer gap 80 */
  }

  .about-history__body p {
    line-height: 1.3;
  }

  .about-history__body p:first-child {
    margin-bottom: 3px;
  }

  .about-history__body p:nth-child(2) {
    margin-bottom: 21px;
  }
}

/* ================= 900 — 188:26425 ================= */
@media (max-width: 999px) and (min-width: 700px) {
  .about-main { width: 100%; }

  .about-bc {
    margin: 16px 0 0 77px;
    min-height: 20px;
    max-width: calc(100% - 77px);
  }

  .about-bc__current {
    color: #666666;
    font-weight: 400;
    border-bottom: none;
    padding-bottom: 1px;
  }

  .about-bc__sep {
    margin: 0 16px;
  }

  .about-title {
    margin: 32px 0 0 77px;
    width: fit-content;
  }

  .about-values {
    width: 900px;
    height: 1015px; /* content ends ~1254; title history @1334 */
    margin-top: 32px; /* circles @240 */
  }

  .about-value {
    position: absolute;
  }

  /* Figma body @900: lh 1.5 */
  .about-value__text {
    line-height: 1.5;
  }

  /* top-left: photo @139, text @77 */
  .about-value--1 {
    left: 77px;
    top: 0;
    width: 315px;
  }
  .about-value--1 .about-value__photo { margin-left: 62px; }
  .about-value--1 .about-value__title { margin: 26px 0 0 62px; }
  .about-value--1 .about-value__text {
    margin: 17px 0 0 0;
    width: 315px;
    white-space: pre-line;
    line-height: 1.5;
  }

  /* top-right: photo @518, text @456 */
  .about-value--2 {
    left: 456px;
    top: 0;
    width: 367px;
  }
  .about-value--2 .about-value__photo { margin-left: 62px; }
  .about-value--2 .about-value__title { margin: 26px 0 0 64px; }
  .about-value--2 .about-value__text {
    margin: 16px 0 0 0;
    width: 367px;
    white-space: pre-line;
    line-height: 1.5;
  }
  .about-value--2 .about-value__text--note {
    margin-top: 16px;
    width: 367px;
    line-height: 1.5;
  }

  /* bottom-left: photo @139/747 → top 507 */
  .about-value--3 {
    left: 78px;
    top: 507px;
    width: 284px;
  }
  .about-value--3 .about-value__photo { margin-left: 61px; }
  .about-value--3 .about-value__title { margin: 28px 0 0 62px; }
  .about-value--3 .about-value__text {
    margin: 16px 0 0 0;
    width: 284px;
    white-space: normal; /* collapse 1920 hard-break before «нам» */
    line-height: 1.5;
  }

  /* bottom-right */
  .about-value--4 {
    left: 456px;
    top: 507px;
    width: 367px;
  }
  .about-value--4 .about-value__photo { margin-left: 62px; }
  .about-value--4 .about-value__title { margin: 28px 0 0 115px; }
  .about-value__text--4-1920,
  .about-value__text--4-1300,
  .about-value__text--4-360 { display: none; }
  .about-value--4 .about-value__text--4-compact {
    display: block;
    margin: 16px 0 0 0;
    width: 367px;
    white-space: pre-line;
    line-height: 1.5;
  }
  .about-value__split { display: none; }

  .about-history {
    width: 746px;
    margin: 80px auto 0;
  }

  .about-history__title {
    margin-bottom: 32px; /* 1402 - (1334+36) ≈ 32 */
  }

  /* Figma: one text node 746×1440, 16/1.5, blank lines between paras */
  .about-history__body:not(.about-history__body--merged) {
    display: none;
  }

  .about-history__body--merged {
    display: block;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #262626;
    white-space: pre-line;
  }
}

/* ================= 420 — 188:26629 ================= */
@media (max-width: 699px) and (min-width: 361px) {
  .about-main { width: 100%; }

  .about-bc {
    margin: 24px 0 0 12px;
    min-height: 20px;
    max-width: calc(100% - 12px);
  }

  .about-bc__current {
    color: #666666;
    font-weight: 400;
    border-bottom: none;
    padding-bottom: 1px;
  }

  .about-bc__sep {
    margin: 0 16px;
  }

  .about-title {
    margin: 32px 0 0 12px;
    font-size: 32px;
    line-height: 35.2px;
    width: fit-content;
  }

  .about-values {
    position: static;
    display: flex;
    flex-direction: column;
    width: 420px;
    height: auto;
    margin: 32px 0 0; /* circles @218 after title ~186 */
    gap: 0;
  }

  .about-value {
    position: static;
    width: 396px;
    margin: 0 auto 40px; /* next photo ~40px after text end */
  }

  .about-value:last-child {
    margin-bottom: 0;
  }

  .about-value__photo {
    width: 202px;
    height: 202px;
    margin: 0 auto;
  }

  .about-value__text {
    line-height: 1.5;
  }

  /* photo→title 26; title x≈109 */
  .about-value--1 .about-value__title,
  .about-value--2 .about-value__title {
    margin: 26px 0 0 97px;
    text-align: left;
    font-size: 20px;
    line-height: 26.6px;
  }

  /* photo→title 28 @v3/v4 */
  .about-value--3 .about-value__title,
  .about-value--4 .about-value__title {
    margin: 28px 0 0 98px;
    text-align: left;
    font-size: 20px;
    line-height: 26.6px;
  }

  .about-value--1 .about-value__text {
    margin: 17px 0 0 !important;
    width: 396px !important;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value--2 .about-value__text {
    margin: 16px 0 0 2px !important;
    width: 367px !important;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value--2 .about-value__text--note {
    margin: 16px 0 0 2px !important;
    width: 367px !important;
    line-height: 1.5;
  }

  .about-value--3 .about-value__text {
    margin: 16px 0 0 1px !important;
    width: 387px !important;
    white-space: normal !important;
    line-height: 1.5;
  }

  .about-value__text--4-1920,
  .about-value__text--4-1300,
  .about-value__text--4-360 { display: none; }
  .about-value--4 .about-value__text--4-compact {
    display: block;
    margin: 16px 0 0 2px !important;
    width: 394px !important;
    white-space: normal !important;
    line-height: 1.5;
  }

  .about-value__split { display: none; }

  .about-history {
    width: 392px;
    margin: 66px auto 0; /* title @2178 after v4 end ~2112 */
  }

  .about-history__title {
    font-size: 32px;
    line-height: 35.2px;
    text-align: center;
    margin-bottom: 24px; /* 2238 - (2178+36) ≈ 24 */
  }

  /* Figma: one text node 392×1911, 14/1.5 (same copy as 900) */
  .about-history__body:not(.about-history__body--merged) {
    display: none;
  }

  .about-history__body--merged {
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #262626;
    white-space: pre-line;
  }
}

/* ================= 360 — 161:6463 ================= */
@media (max-width: 360px) {
  .about-main { width: 100%; }

  .about-bc {
    margin: 25px 0 0 16px;
    min-height: 20px;
    max-width: calc(100% - 16px);
  }

  .about-bc__current {
    color: #666666;
    font-weight: 400;
    border-bottom: none;
    padding-bottom: 0;
  }

  .about-bc__sep {
    margin: 0 16px;
  }

  .about-title {
    margin: 29px 0 0 16px;
    font-size: 24px;
    line-height: 31.2px; /* 24 * 1.3 */
    width: fit-content;
  }

  .about-values {
    position: static;
    display: flex;
    flex-direction: column;
    width: 360px;
    height: auto;
    margin: 20px 0 0; /* photo @200 after title ~180 */
    gap: 0;
  }

  .about-value {
    position: static;
    width: 328px;
    margin: 0 auto 40px; /* next photo ~40px after text */
  }

  .about-value:last-child {
    margin-bottom: 0;
  }

  .about-value__photo {
    width: 328px;
    height: 328px;
    margin: 0;
    border-radius: 50%;
  }

  .about-value__title {
    margin: 32px 0 0 0 !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3;
    text-align: left;
  }

  /* «Мы ближе к людям» — одна строка на 360 */
  .about-value--4 .about-value__title br,
  .about-value--4 .about-value__br-desk {
    display: none;
  }

  .about-value__text {
    font-size: 14px;
    line-height: 1.5;
  }

  .about-value__text--1-desk {
    display: none;
  }

  .about-value--1 .about-value__text--1-360 {
    display: block;
    margin: 16px 0 0 !important;
    width: 328px !important;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value--2 .about-value__title,
  .about-value--3 .about-value__title {
    min-height: 51px; /* Figma text boxes 50.6 */
  }

  .about-value--2 .about-value__text:not(.about-value__text--note) {
    margin: 13px 0 0 2px !important;
    width: 294px !important;
    min-height: 91px; /* Figma h=91 */
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value--2 .about-value__text--note {
    margin: 9px 0 0 2px !important;
    width: 312px !important;
    line-height: 1.5;
  }

  .about-value--3 .about-value__text {
    margin: 12px 0 0 !important;
    width: 339px !important;
    white-space: pre-line !important;
    line-height: 1.5;
  }

  .about-value__text--4-1920,
  .about-value__text--4-compact,
  .about-value__text--4-1300 {
    display: none;
  }

  .about-value--4 .about-value__text--4-360 {
    display: block;
    margin: 12px 0 0 !important;
    width: 328px !important;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-value__split {
    display: none;
  }

  .about-history {
    width: 328px;
    margin: 60px auto 0; /* title @2725 after v4 end ~2665 */
  }

  .about-history__title {
    font-size: 24px;
    line-height: 31.2px;
    text-align: left;
    margin-bottom: 24px; /* 2781 - (2725+32) = 24 */
  }

  /* Separate paragraphs with exact Figma breaks @360 */
  .about-history__body:not(.about-history__body--360) {
    display: none;
  }

  .about-history__body--360 {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: #262626;
  }

  .about-history__body--360 p {
    display: block;
    margin: 0 0 16px;
    white-space: pre-line;
    line-height: 1.5;
  }

  .about-history__body--360 p:first-child,
  .about-history__body--360 p:nth-child(2) {
    margin-bottom: 16px;
  }

  .about-history__body--360 p:last-child {
    margin-bottom: 0;
  }
}