/*
 * A code component's Shadow DOM doesn't inherit the prototype's global
 * resets (box-sizing) — see the same note in ../PageHero/PageHero.module.css.
 */
.IsztXupQqlyYesaSlYp3,
.IsztXupQqlyYesaSlYp3 *,
.IsztXupQqlyYesaSlYp3 *::before,
.IsztXupQqlyYesaSlYp3 *::after {
  box-sizing: border-box;
}

/* Fills the page's width as a block (a code component's host is otherwise inline). */
:host {
  display: block;
}

/*
 * The hero (prototype CaseStudy .hero): full bleed, from the very top of the window behind the floating
 * header, as the homepage's featured case study. The photo darkened from the lower left, the client's logo and
 * the title over it at the bottom left in the page gutter, in white.
 */
.IsztXupQqlyYesaSlYp3 {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  /*
   * The shape of a 2500 × 950 image (38% of the width), 100px taller up to
   * about 1800px (it holds at 784px from there until the image shape catches
   * up, at about 2060px, then follows it); at least 580px, at most about 1010px.
   */
  height: min(max(min(38vw + 100px, 784px), 38vw, 580px), 1010px);
  padding: 0 var(--page-gutter, 64px) max(32px, 2.78vw);
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #fff);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.GoJ9pjEsezAxOLj6iVjz {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.IsztXupQqlyYesaSlYp3::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* From the lower left to the upper right, over a wash rising from the bottom edge. */
  background:
    linear-gradient(to top right, rgb(16 16 16 / 0.92) 0%, rgb(16 16 16 / 0.55) 35%, rgb(0 0 0 / 0) 70%),
    linear-gradient(to top, rgb(16 16 16 / 0.6) 0%, rgb(16 16 16 / 0.25) 30%, rgb(0 0 0 / 0) 55%);
  pointer-events: none;
}

/* The logo over the title. */
.GKZMv5L4SQMxtVPqchQF {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The client's logo (white), over the title: 144px wide at 1728, no narrower than 96px. */
.KZeFiimI018xYXuLGpqn {
  width: max(96px, 8.33vw);
  height: auto;
  margin-bottom: max(16px, 1.39vw);
}

/* A long wordmark: wider, about 260px at 1728. */
.KZeFiimI018xYXuLGpqn.BIYpYltRFjIsHDlm0gdg {
  width: max(180px, 15vw);
}

/* A mark-only logo (Mastercard's circles): narrower than a wordmark. */
.KZeFiimI018xYXuLGpqn.CMEc_4usYel7NpAEcDg8 {
  width: max(72px, 6.13vw);
}

/* The client's name, as an eyebrow, in white (when there is no logo). */
.Mh3simq6ilYAZUGNoJVx {
  margin: 0 0 max(16px, 1.39vw);
  color: var(--text-inverse, #fff);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
}

/* Heading XL, Light, its bold words Medium. */
.wLzF5uxM8KAA37Ud5ZMQ {
  max-width: 16.2em;
  margin: 0;
  font-size: var(--type-heading-xl-size);
  font-weight: var(--type-heading-xl-weight);
  line-height: var(--type-heading-xl-lh);
  letter-spacing: var(--type-heading-xl-ls);
  /* A long unbroken word wraps rather than widening the page. */
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.wLzF5uxM8KAA37Ud5ZMQ strong {
  font-weight: 500;
}

@media (max-width: 1100px) {
  /*
   * No soft black panel: the photo (2:1 under the header's 110px; short, so
   * a photo cropped for the wide desktop shape still works) keeps the
   * gradient from its lower left, with the client's logo on it at the
   * bottom left; the title under it in soft black on the page's off-white.
   */
  .IsztXupQqlyYesaSlYp3 {
    --photo-h: calc(100vw / 2 + 110px);
    height: auto;
    justify-content: flex-start;
    padding: 0;
    background: transparent;
    color: var(--text-primary, #171717);
  }

  .GoJ9pjEsezAxOLj6iVjz {
    position: relative;
    z-index: -2;
    height: var(--photo-h);
  }

  .IsztXupQqlyYesaSlYp3::after {
    inset: 0 0 auto;
    height: var(--photo-h);
  }

  /* The logo (or client) and the title in line with the reading column under them. */
  .KZeFiimI018xYXuLGpqn,
  .Mh3simq6ilYAZUGNoJVx {
    position: absolute;
    top: calc(var(--photo-h) - max(20px, 2.6vw));
    left: max(var(--page-gutter, 64px), (100% - 960px) / 2);
    margin: 0;
    translate: 0 -100%;
  }

  /* Over the photo, so white even though the hero's text is now soft black. */
  .Mh3simq6ilYAZUGNoJVx {
    color: var(--text-inverse, #fff);
  }

  .GKZMv5L4SQMxtVPqchQF {
    padding: max(28px, 3.5vw) max(var(--page-gutter, 64px), (100% - 960px) / 2) 0;
  }
}

/* Phones: the photo 16:9 under the header's 90px. */
@media (max-width: 767px) {
  .IsztXupQqlyYesaSlYp3 {
    --photo-h: calc(100vw * 9 / 16 + 90px);
  }
}