.workbench-hero {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  margin: 0 auto;
  max-width: 1380px;
  min-height: 0;
  padding: 0 28px clamp(72px, 9vw, 122px);
}

.opening-story {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.opening-story-frame {
  aspect-ratio: 16 / 9;
  background: #181a16;
  border-block: 2px solid #181a16;
  overflow: hidden;
  position: relative;
}

.opening-story-frame::after {
  border-bottom: 8px solid #a45530;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}

.opening-story video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Invisible hit target laid over the moteops.tech button painted into the
   closing frame of the opening film. Geometry is measured from the film
   master (1920x1080): the button occupies x 1291..1698, y 697..781, i.e.
   left 67.2%, width 21.3%, height 7.8%, vertical centre 68.4%.
   Anchored on its centre so the 44px minimum touch target grows
   symmetrically instead of sliding off the bottom of the button on narrow
   frames. Pinned by tests/opening-film.test.mjs — remeasure the film before
   changing these numbers. */
.opening-story [data-opening-consultation] {
  color: transparent;
  height: 7.8%;
  left: 67.2%;
  min-height: 44px;
  overflow: hidden;
  position: absolute;
  text-indent: -9999px;
  top: 68.4%;
  transform: translateY(-50%);
  width: 21.3%;
  z-index: 3;
}

.opening-story [data-opening-consultation][data-active="false"] {
  pointer-events: none;
  visibility: hidden;
}

/* The target is invisible, so hover and focus are the only signals that the
   painted button is live. Both draw the same ring. */
.opening-story [data-opening-consultation]:hover,
.opening-story [data-opening-consultation]:focus-visible {
  border-radius: 2px;
  outline: 4px solid #f5f1e8;
  outline-offset: 4px;
}

.opening-story [data-replay-story] {
  background: #f5f1e8;
  border: 2px solid #181a16;
  bottom: 28px;
  box-shadow: 4px 4px 0 #a45530;
  color: #181a16;
  cursor: pointer;
  font: 900 .76rem/1 "Arial Narrow", "Helvetica Neue", sans-serif;
  letter-spacing: .08em;
  min-height: 44px;
  padding: 12px 16px;
  position: absolute;
  right: 28px;
  text-transform: uppercase;
  z-index: 4;
}

.workbench-hero > .hero-copy {
  align-self: start;
  background: #f7f0df;
  border: 2px solid #171713;
  box-shadow: 8px 9px 0 #9b552f;
  max-width: 760px;
  padding: clamp(28px, 4vw, 54px);
  position: static;
}

.workbench-hero > .hero-copy h1 {
  font-size: clamp(3.4rem, 6vw, 6.8rem);
  line-height: .88;
}

.workbench-hero > .owner-story {
  margin-top: 0;
}

html[data-motion="off"] .opening-story video {
  background: #181a16;
}

@media (min-width: 1021px) {
  .opening-story {
    max-width: 1040px;
    width: calc(100vw - 96px);
  }
}

@media (max-width: 1020px) {
  .workbench-hero {
    grid-template-columns: 1fr;
  }

  .workbench-hero > .hero-copy,
  .workbench-hero > .owner-story {
    grid-column: 1;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .workbench-hero {
    gap: 30px;
    padding: 16px 16px 72px;
  }

  .opening-story {
    margin: 0;
    width: 100%;
  }

  .opening-story-frame {
    border: 2px solid #181a16;
    box-shadow: 6px 7px 0 #a45530;
  }

  .opening-story-frame::after {
    display: none;
  }

  /* On narrow frames the film's closing button and the 44px consultation
     target reach down into the bottom-right corner, so replay moves to the
     opposite corner rather than sitting on top of the call to action. */
  .opening-story [data-replay-story] {
    bottom: 14px;
    left: 14px;
    right: auto;
  }

  .workbench-hero > .hero-copy {
    box-shadow: 6px 7px 0 #9b552f;
    padding: 26px 20px 28px;
  }

  .workbench-hero > .hero-copy h1 {
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-story video {
    animation: none;
  }
}