/* Home hero: motion-graphics loop of the real site designs.
   One loop is rendered twice, once on the dark token bg and once on the light one, so its
   background disappears into the page. The frame carries the matching poster (background-image,
   so only the current mode's file is fetched); it shows until the video has data and is what
   reduced-motion users get. */
.hero-video-frame {
  position: absolute; inset: 0;
  background: var(--bg) url(../assets/video/hero-poster-dark.webp) 50% 50% / contain no-repeat;
}
:root[data-theme="light"] .hero-video-frame {
  background-image: url(../assets/video/hero-poster-light.webp);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
  opacity: 0; transition: opacity .3s linear;
}
.hero-video.is-on { opacity: 1; }

/* The video gets its own area above the text, with nothing laid over it: the whole loop stays
   visible. Its background matches the page, so the unused edges of the frame disappear. */
.hero--work::before { content: none; }
.hero--work .hero-media { position: relative; inset: auto; z-index: 0; flex: 1 1 auto; min-height: clamp(200px, 44svh, 620px); }
.hero--work .hero-inner { flex: 0 0 auto; grid-template-rows: auto auto; padding-top: clamp(14px, 2vw, 28px); }
/* The hero starts below the sticky nav, so the nav never covers the video. */
.page-home .hero--work { margin-top: 0; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }

/* Text block: title on the left, buttons on the right, one tight band under the video. */
@media (min-width: 761px) {
  .hero--work .hero-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: end; padding-top: 10px; }
  .hero--work .hero-mid { display: contents; }
  .hero--work .hero-services { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: 22px; margin-bottom: 12px; }
  .hero--work .hero-bottom { grid-column: 1; grid-row: 2; }
  .hero--work .hero-lead { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end; width: min(300px, 26vw); }
  .hero--work .hero-title { font-size: clamp(34px, 4.7cqi, 86px); }
}