/* Give page opening photos a clear edge instead of a fading white overlay. */
.arch-hero { background: #f8faf7; }
.arch-hero:before { display: none; }
.arch-hero-visual {
  inset: 0 0 0 50%;
  border-left: 1px solid #dce5dc;
}

.image-hero:before {
  inset: 0 0 0 50%;
  border-left: 1px solid #dce5dc;
}
.image-hero:after { display: none; }
.image-hero>.shell>h1,
.image-hero>.shell>p,
.image-hero>.shell>.hero-actions { max-width: min(48%, 670px); }

@media (max-width: 760px) {
  .arch-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .arch-hero-visual {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: clamp(260px, 70vw, 420px);
    border-left: 0;
    border-top: 1px solid #dce5dc;
  }
  .arch-hero-shell {
    display: block;
    order: 1;
    min-height: 0;
    padding-top: 150px;
    padding-bottom: 30px;
  }
  .arch-hero-copy { padding-bottom: 0; }
  .arch-hero-footer {
    position: static;
    margin-top: 42px;
    padding-right: 0;
  }

  .image-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .image-hero:before {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    order: 2;
    flex: none;
    width: 100%;
    height: clamp(240px, 68vw, 390px);
    border-left: 0;
    border-top: 1px solid #dce5dc;
  }
  .image-hero>.shell {
    order: 1;
    width: calc(100% - 38px);
    margin-inline: auto;
    padding-block: 70px 55px;
  }
  .image-hero>.shell>h1,
  .image-hero>.shell>p,
  .image-hero>.shell>.hero-actions { max-width: none; }
}