/* =========================================================
   BellydAnnS — страница «О школе» (подключается после style.css)
   ========================================================= */

/* ---------- WELCOME ---------- */
.welcome {
  position: relative;
  height: 1011px;
  color: #fff;
  overflow: hidden;
}
.welcome__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90.15deg, #22262d 0.71%, #1a0b2a 122.32%);
  overflow: hidden;
}
.welcome__lines { position: absolute; width: 1352px; height: 1236.25px; }
.welcome__lines--right { left: 34.79%; top: -71.58px; }
.welcome__lines--left  { left: -758px;  top: -142px; }
.welcome__photo {
  position: absolute;
  left: 39.79%;
  top: -228px;
  width: 76.82%;
  min-width: 1100px;
  height: 1356px;
  object-fit: cover;
  object-position: left top;
}

.welcome__content { z-index: 2; padding-top: 334px; }
.welcome__eyebrow { margin-left: 8px; }
.welcome__title {
  position: relative;
  margin-top: 41px;
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: clamp(38px, 3.646vw, 70px);
  line-height: normal;
}
.welcome__lead {
  position: relative;
  max-width: 865px;
  margin-top: 26px;
  font-size: 22px;
  font-weight: 200;
  line-height: normal;
}
.welcome__text {
  position: relative;
  max-width: 874px;
  margin: 63px 0 0 3px;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
  text-align: justify;
}
.welcome__text p + p { margin-top: 23px; }

/* ---------- MISSION ---------- */
.mission {
  position: relative;
  background: #fff;
  padding: 107px 0 97px;
  overflow: hidden;
}
.mission__inner { position: relative; }
.watermark--mission {
  top: -44px;
  right: calc(var(--gutter) - 2px);
  font-family: var(--ff-brand);
  font-size: clamp(70px, 9.896vw, 190px);
  color: var(--wm-light);
}
.mission__left { position: relative; z-index: 1; max-width: 686px; }
.mission .eyebrow { margin-left: 2px; }
.mission__title { margin: 22px 0 0 1px; }
.mission__text {
  max-width: 682px;
  margin: 26px 0 0 5px;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
  text-align: justify;
  color: var(--text);
}
.mission__text p + p { margin-top: 23px; }

.checklist {
  display: grid;
  grid-template-columns: 324px auto;
  row-gap: 37.4px;
  margin: 52px 0 0 2px;
}
.checklist li { display: flex; align-items: center; gap: 14.4px; font-size: 18px; font-weight: 300; line-height: normal; color: #000; }
.checklist img { flex: none; width: 52.6px; height: 52.6px; }

.mission__photo {
  position: absolute;
  top: 129px;
  right: calc(var(--gutter) + 3px);
  width: 562px;
  height: 372.1px;
  overflow: hidden;
  background: #d8d8d8;
}
.mission__photo img { position: absolute; left: 0.39%; top: -77.88%; width: 109.16%; height: 206.23%; object-fit: cover; }

.mission__badge {
  position: absolute;
  z-index: 2;
  top: 276px;
  right: calc(var(--gutter) + 366px);
  width: 288px;
  height: 288px;
  background: #2a9db4;
  color: #fff;
  text-align: center;
}
.mission__badge img { position: absolute; left: 44px; top: 36px; width: 200px; height: auto; }
.mission__badge p {
  position: absolute;
  left: 0; right: 0;
  top: 192px;
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 24px;
  line-height: normal;
}

.strive__title {
  position: relative;
  z-index: 1;
  margin: 81px 0 0 3px;
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 30px;
  line-height: normal;
  color: var(--text);
}
.strive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 330px));
  justify-content: space-between;
  padding: 0 16px 0 2px;
}
.strive__item { position: relative; padding-top: 236px; }
.strive__item img { position: absolute; z-index: 0; pointer-events: none; }
.strive__item--1 img { left: -53px; top: 1.7px;  width: 259.64px; height: 263.12px; }
.strive__item--2 img { left: -24px; top: 30px;   width: 201px;    height: 194px; }
.strive__item--3 img { left: -53px; top: 0.9px;  width: 247.89px; height: 261.25px; }
.strive__item--4 img { left: -33px; top: -2.9px; width: 222.9px;  height: 228px; }
.strive__item p {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
  color: var(--text);
}

/* ---------- SUCCESS ---------- */
.success {
  position: relative;
  background: var(--dark);
  padding: 82px 0 116px;
  color: #fff;
}
.success .eyebrow { margin-left: 4px; }
.success__title { margin: 21px 0 0 -2px; }
.success__grid {
  display: grid;
  grid-template-columns: 732px 1fr;
  margin: 73px 0 0 2px;
}
.success__card { display: flex; align-items: flex-start; gap: 54px; }
.success__img {
  position: relative;
  flex: none;
  width: 330px;
  height: 242px;
  border: 1px solid var(--accent);
}
.success__img img {
  position: absolute;
  left: 13px; top: 13px;
  width: 302px; height: 214px;
  object-fit: cover;
  transition: transform .4s;
}
.success__card:hover .success__img img { transform: scale(1.03); }
.success__name {
  margin-top: 89px;
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 30px;
  line-height: normal;
  transition: color .2s;
}
.success__card:hover .success__name { color: var(--accent); }

/* ---------- STORY ---------- */
.story {
  position: relative;
  background: #fff;
  padding: 90px 0 107px;
  overflow: hidden;
}
.story__bg { position: absolute; inset: 0; pointer-events: none; }
.story__lines {
  position: absolute;
  width: 1531.1px; height: 1278.69px;
  display: flex; align-items: center; justify-content: center;
}
.story__lines--right { left: 54.74%; top: -83px; }
.story__lines--left  { left: -512.97px; top: 648px; }
.story__lines img {
  flex: none;
  width: 1202.31px; height: 945.94px;
  rotate: 121deg;
  scale: .88 1.09;
  transform: skewX(10.42deg);
}

.watermark--story {
  top: -44px;
  right: calc(var(--gutter) - 4px);
  font-family: var(--ff-brand);
  font-size: clamp(70px, 9.896vw, 190px);
  color: var(--wm-light);
}
.story__eyebrow { margin-left: 4px; }
.story__title { margin: 22px 0 0 3px; }

.story__blocks { position: relative; margin: 64px 0 0 5px; }
.story__block { position: relative; }
.story__block + .story__block { margin-top: 54px; }
.story__block--1 { height: 438px; }
.story__block--2 { height: 497.45px; margin-top: 4px !important; }
.story__block--3 { height: 442px; }
.story__block--4 { height: 576px; }
.story__block--5 { height: 554px; margin-top: 65.55px !important; }

.story__text {
  position: absolute;
  width: 661px;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(13, 10, 65, .76);
}
.story__text p + p { margin-top: 22px; }
.story__text .story__gap { margin-top: 44px; }

.story__photo { position: absolute; overflow: hidden; background: #d9d9d9; }
.story__photo img { position: absolute; object-fit: cover; }

.story__block--1 .story__text  { left: -2px; top: 2px; }
.story__block--1 .story__photo { left: 730px; top: 0; width: 368px; height: 368px; }
.story__block--1 .story__photo img { left: 0; top: -2.99%; width: 99.96%; height: 143.21%; }

.story__block--2 .story__photo { left: 178px; top: 0; width: 342px; height: 497.45px; }
.story__block--2 .story__photo img { left: -2.86%; top: -9.29%; width: 107.01%; height: 110.36%; transform: scaleX(-1); }
.story__block--2 .story__text  { left: 731px; top: 95px; }

.story__block--3 .story__text  { left: -1px; top: 35px; }
.story__block--3 .story__photo { left: 783px; top: 0; width: 654.6px; height: 442px; }
.story__block--3 .story__photo img { left: -1.99%; top: -0.59%; width: 102.18%; height: 100.9%; }

.story__block--4 .story__photo { left: 151px; top: 0; width: 396px; height: 576px; }
.story__block--4 .story__photo img { left: 0.51%; top: -11.19%; width: 109.93%; height: 113.37%; }
.story__block--4 .story__text  { left: 730px; top: 113px; }

.story__block--5 .story__text  { left: 0; top: 33px; }
.story__block--5 .story__photo { left: 897px; top: 0; width: 368px; height: 554px; }
.story__block--5 .story__photo img { left: -15.76%; top: -27.44%; width: 132.61%; height: 132.13%; }
.story__btn { position: absolute; left: -1px; top: 394px; }

.teacher-card { position: absolute; left: 1141px; top: 6px; width: 306px; }
.teacher-card__name {
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 30px;
  line-height: normal;
  color: #0d0a41;
}
.teacher-card__line { width: 68.5px; height: 1px; margin: 4px 0 0 1.6px; }
.teacher-card__role {
  max-width: 289px;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  text-transform: uppercase;
  color: #2a9db4;
}

.story__quote {
  position: absolute;
  z-index: 1;
  left: 963px;
  top: 236px;
  width: 473px;
  height: 202px;
  background: url("../assets/quote-box.svg") center / 100% 100% no-repeat;
}
.story__quote-icon { position: absolute; left: 29px; top: 7px; width: 74px; height: 74px; }
.story__quote p {
  position: absolute;
  left: 56px; top: 54px;
  width: 393px;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  line-height: 22px;
  color: #fff;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1500px) {
  /* блоки истории — из абсолютной раскладки в сетку */
  .story__blocks { margin-left: 0; }
  .story__block, .story__block--1, .story__block--2, .story__block--3, .story__block--4, .story__block--5 {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 72px !important;
  }
  .story__block--1 { margin-top: 0 !important; }
  .story__text, .story__photo, .teacher-card, .story__quote, .story__btn { position: relative; left: auto !important; top: auto !important; }
  .story__text { width: auto; }
  .story__photo { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; }
  .story__block--3 .story__photo { aspect-ratio: 654.6 / 442; }
  .story__block--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .story__block--1 .story__photo { aspect-ratio: 1; max-width: 368px; }
  .story__block--1 .teacher-card { grid-column: 2; margin-top: -8px; }
  .story__block--1 .story__quote { grid-column: 2; max-width: 473px; }
  .story__block--1 .story__text { grid-row: 1 / span 3; }
  .story__btn { margin-top: 32px; }
}

@media (max-width: 1280px) {
  .welcome { height: auto; min-height: 860px; padding-bottom: 96px; }
  .welcome__content { padding-top: 260px; }
  .mission__photo, .mission__badge { position: relative; top: auto; right: auto; }
  .mission__inner { display: flex; flex-direction: column; }
  .mission__photo { order: 2; margin: 48px 0 0 auto; max-width: 100%; }
  .mission__badge { order: 3; margin: -120px 0 0 0; }
  .strive__title { order: 4; }
  .strive { order: 5; }
  .success__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .success__card { gap: 24px; flex-wrap: wrap; }
  .success__name { margin-top: 0; }
}

@media (max-width: 1100px) {
  .strive { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; padding: 0; }
  .success__grid { grid-template-columns: 1fr; }
  .story__block, .story__block--1, .story__block--2, .story__block--3, .story__block--4, .story__block--5 { grid-template-columns: 1fr; }
  .story__block--1 .teacher-card, .story__block--1 .story__quote { grid-column: 1; }
  .story__block--1 .story__text { grid-row: auto; }
  .story__block--2 .story__photo, .story__block--4 .story__photo { order: 2; }
  .story__photo { max-width: 520px; }
}

@media (max-width: 767px) {
  .welcome__content { padding-top: 190px; }
  .welcome__photo { opacity: .4; left: 15%; }
  .welcome__lead { font-size: 18px; }
  .welcome__text { margin-top: 32px; font-size: 16px; text-align: left; }
  .mission { padding: 72px 0; }
  .mission__text { text-align: left; font-size: 16px; }
  .checklist { grid-template-columns: 1fr; row-gap: 16px; margin-top: 32px; }
  .mission__photo { width: 100%; height: auto; aspect-ratio: 562 / 372; }
  .mission__badge { margin-top: -60px; transform: scale(.8); transform-origin: left top; }
  .strive { grid-template-columns: 1fr; }
  .strive__item { padding-top: 200px; }
  .success { padding: 64px 0 72px; }
  .success__img { width: 100%; max-width: 330px; }
  .success__img img { width: calc(100% - 28px); height: calc(100% - 28px); }
  .success__name { font-size: 24px; }
  .story { padding: 72px 0; }
  .story__blocks { margin-top: 40px; }
  .story__text { font-size: 16px; }
  .story__quote { width: 100%; height: auto; padding: 56px 24px 24px 40px; }
  .story__quote p { position: static; width: auto; font-size: 17px; }
}