/* Atomic Shelf Visual System — decorative artwork uses available space, never layout rows. */
.hero__copy,
.page-head {
  position: relative;
}

/* The hero illustration is a REAL grid item.
   It used to be absolutely positioned inside .hero__copy, which put it in the
   bottom-right corner of the headline column - a small image floating in dead
   space, overlapping the note under the buttons - and it was hidden outright
   below 62rem, so the tablet and mobile hero had no illustration at all.

   Now it is a grid item in the hero itself:
     - wide  : it sits under the headline block, in the column that block is in,
               at the column's own measure, so it reads as part of the spread
     - narrow: the hero is a single column, so it falls between the headline
               block and the two doors, still visible, still never overlapping
               anything
   The containing block is the hero grid, which is measured and known, so
   nothing here depends on an unverified offset. */
.as-hero-visual {
  position: static;
  margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
  max-width: 26rem;
}
.as-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 25 / 16;
  object-fit: contain;
  border-radius: 8px;
}
.as-hero-visual figcaption {
  margin: .15rem 0 0;
  padding: .3rem 0 0;
  border: 0;
  color: var(--cocoa);
  font-family: var(--face-meta, ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .1em;
  line-height: 1.35;
  text-align: end;
  text-transform: uppercase;
}
.hero__copy > :not(.as-hero-visual),
.page-head > :not(.as-page-divider) {
  position: relative;
  z-index: 1;
}

/* On a wide screen the hero is two columns: the headline block and the
   illustration share the left, and the two doors share the right. The doors
   span both rows so they keep their full height, and the illustration sits
   under the headline rather than inside it. */
@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .as-hero-visual { grid-column: 1; grid-row: 2; align-self: start; }
  .hero .doors { grid-column: 2; grid-row: 1 / span 2; }
}

/* Service illustrations live at the foot of the existing description column.
   They decorate the blank column space and are removed from document flow. */
.as-service-art {
  display: none;
}
@media (min-width: 62rem) {
  .sd-head {
    position: relative;
  }
  .sd-head > .as-service-art {
    display: block;
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: clamp(4.75rem, 7vw, 7rem);
    max-height: 7rem;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: right bottom;
    opacity: .92;
    z-index: 0;
  }
  .sd-head > :not(.as-service-art) {
    position: relative;
    z-index: 1;
  }
}

/* The divider occupies the page-head's existing lower padding, without
   creating another block or pushing the next section down. */
.as-page-divider {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: .35rem;
  display: block;
  width: min(42%, 25rem);
  height: auto;
  margin: 0;
  opacity: .9;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .as-hero-visual, .as-service-art, .as-page-divider { scroll-behavior: auto; }
}