/* scope: .msi-page--about */
/* About Us (wire about: 741:2292 / 741:7482 / 741:4760). Owner: agent content. Every selector must start with the
   scope above; _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.
   Layout and type come from the content idiom (msi-page-content.css); this file holds the About rhythm, the two
   photos and the cross mark. The photos are the wire's composed groups (mask, chamfer and the nurse's head
   over the top edge), exported at 1x. */

/* 1440: breadcrumb bottom to the intro photo's frame 56; frame 455 with the copy centred on it */
.msi-page--about .msi-about__intro { margin-top: 56px; }
.msi-page--about .msi-about__mission {
  position: relative;
  margin-top: 104px;
}
.msi-page--about .msi-about__mission .msi-page__copy { gap: 16px; }
.msi-page--about .msi-page__contact { margin-top: 104px; }

.msi-page--about .msi-about__photo--intro { background-image: none; }
/* the frame is the mask box; the head rises 61 over it (group 515x516, mask 515x455 at +61) */
.msi-page--about .msi-about__photo--intro::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-61 / 455 * 100%);
  height: calc(516 / 455 * 100%);
  background: url("../images/content/about-intro@2x.webp") center / 100% 100% no-repeat;
}
.msi-page--about .msi-about__photo--mission { background-image: url("../images/content/about-mission@2x.webp"); }

/* cross mark (741:2384): centred, 35 under the intro frame, in the gap beside the mission photo */
.msi-page--about .msi-about__mission::before {
  content: "";
  position: absolute;
  top: -69px;
  left: 50%;
  width: 87.5px;
  height: 87.5px;
  margin-left: -43.75px;
  background: url("../images/content/about-cross.svg") center / 90.5px 90.5px no-repeat;
}

/* 992-1439 is undesigned: the photo/copy gap shrinks to 40, so the mark would sit on the copy. It centres in
   the 104 between the two rows instead. */
@media (min-width: 992px) and (max-width: 1439px) {
  .msi-page--about .msi-about__mission::before { top: -95.75px; }
}

/* ---- tablet: 834 wire --------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page--about .msi-about__intro { margin-top: 32px; }
  .msi-page--about .msi-about__mission,
  .msi-page--about .msi-page__contact { margin-top: 120px; }
  /* the 834 photos are their own crops: 754x468 frames, chamfer top right, head 71 over the intro frame */
  .msi-page--about .msi-about__photo--intro { margin-top: 71px; }
  .msi-page--about .msi-about__photo--intro::before {
    top: calc(-71 / 468 * 100%);
    height: calc(539 / 468 * 100%);
    background-image: url("../images/content/about-intro-834@2x.webp");
  }
  .msi-page--about .msi-about__photo--mission { background-image: url("../images/content/about-mission-834@2x.webp"); }
  .msi-page--about .msi-about__mission .msi-page__copy { max-width: 624px; }
  .msi-page--about .msi-about__mission .msi-page__copy { gap: 16px; }
  /* no cross mark in the 834 wire */
  .msi-page--about .msi-about__mission::before { display: none; }
}

/* ---- mobile: 440 wire --------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .msi-page--about .msi-about__intro { margin-top: 40px; }
  /* the 440 photos are the 1440 crops at 392 wide; head 46.43 over the intro frame */
  .msi-page--about .msi-about__photo--intro { margin-top: 46.43px; }
  .msi-page--about .msi-about__photo--intro::before {
    top: calc(-61 / 455 * 100%);
    height: calc(516 / 455 * 100%);
    background-image: url("../images/content/about-intro@2x.webp");
  }
  .msi-page--about .msi-about__photo--mission { background-image: url("../images/content/about-mission@2x.webp"); }
  .msi-page--about .msi-about__mission .msi-page__copy { max-width: none; }
  .msi-page--about .msi-about__mission .msi-page__copy { gap: 24px; }
  /* cross mark in flow: 59.24 under the intro photo, 59.5 over the mission heading (741:4796) */
  .msi-page--about .msi-about__mission { margin-top: 206.24px; }
  .msi-page--about .msi-about__mission::before {
    display: block;
    top: -147px;
  }
  .msi-page--about .msi-page__contact { margin-top: 88.67px; }
}