/* Photo and intro share row one; the light follow-up owns row two. */
.photo-hero { --photo-deep:#142f32; --photo-mint:#c6ead5; --green:#235340; --muted:#4e656e; }
.photo-hero .photo-layout::before { content:none; }
.photo-hero .scene-image { height:100%; }
.photo-hero .photo-button { margin-top:14px; background:#e6f3e8; border-color:#e4f3e9; color:#183f35; }
.photo-hero .photo-after { color:#162f38; }
.photo-hero .photo-after .ba5-extra-links a { color:#235340; }
.photo-hero .photo-layout .calc .button.full { background:#235340; border-color:#235340; }
.photo-hero .photo-layout .calc .button.full:hover { background:#163e2d; }
.photo-hero .photo-layout > .calc::before { background:linear-gradient(90deg,#bcd9c5,#749e8b); }

@media (min-width:801px) {
  .photo-hero .photo-layout {
    position:relative;
    isolation:isolate;
    padding-top:0;
    margin-top:0;
    grid-template-rows:minmax(var(--photo-height),auto) auto;
  }
  .photo-hero .photo-scene {
    position:relative;
    inset:auto;
    grid-column:1 / -1;
    grid-row:1 / 2;
    align-self:stretch;
    justify-self:center;
    width:100vw;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    z-index:-1;
  }
  .photo-hero .scene-image { position:absolute; inset:0; }
  .photo-hero .scene-shade {
    background:linear-gradient(180deg,#0b18180a 15%,#0b18180d 30%,#0c1f1f85 49%,#0d2424ed 76%,#142f32 100%);
  }
  .photo-hero .photo-copy { padding-top:calc(var(--photo-start) + 14px); padding-bottom:20px; }
  .photo-hero .photo-layout > .calc { margin-top:var(--photo-start); }
}
@media (min-width:801px) and (max-width:1060px) {
  .photo-hero { --photo-start:200px; --photo-height:570px; }
}
@media (max-width:800px) {
  .photo-hero .photo-scene { width:100%; order:0; }
  .photo-hero .photo-copy { background:#142f32; }
  .photo-hero .scene-shade { background:linear-gradient(180deg,#142f3200 40%,#142f3200 66%,#142f32 100%); }
}