/* Restored office scene. Only the hero changes; existing pages and controls keep their styles. */
@media (min-width: 768px) {
  .hero { background: var(--bg); }
  .hero-grid { position: relative; isolation: isolate; }
  .hero-grid::before,
  .hero-grid::after {
    position: absolute;
    z-index: -1;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    inset: -76px calc((100% - 100vw) / 2) 0;
    pointer-events: none;
    content: "";
  }
  .hero-grid::before {
    background: #07151e url('../assets/images/hero-office-desktop.a7762e6ffef1.webp') center center / cover no-repeat;
    filter: blur(3px);
    clip-path: inset(0);
  }
  .hero-grid::after {
    background: linear-gradient(90deg, rgba(2,15,22,.5), rgba(2,15,22,.64) 32%, rgba(2,15,22,.68) 50%, rgba(2,15,22,.64) 68%, rgba(2,15,22,.5));
    border-bottom: 1px solid rgba(180,204,208,.18);
  }
  .hero-content { padding-bottom: 28px; }
  .hero-subject { -webkit-mask-image: none; mask-image: none; }
  .hero-subject--owner { aspect-ratio: 1122 / 1402; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-grid::before,
  .hero-grid::after { grid-row: 1 / 3; inset-block-start: -58px; }
  .hero-content { padding-bottom: 0; }
}
@media (max-width: 767px) {
  /* Keep the scene height; enlarge the owner and blend the lower crop like the AI portrait. */
  .hero .hero-subject--owner {
    left: 38%;
    width: 70.4%;
    aspect-ratio: 1122 / 1402;
    -webkit-mask-image: linear-gradient(#000 84%, transparent);
    mask-image: linear-gradient(#000 84%, transparent);
  }
}

/* Bring the portraits toward the central copy without changing the hero grid. */
.hero .hero-subject--ai { transform: translateX(30px); }
.hero .hero-subject--owner { transform: translateX(-30px); }

/* Mobile portrait composition: AI up and left; owner farther right and enlarged relative to the previous mobile scale. */
@media (max-width: 767px) {
  .hero .hero-subject { transform-origin: center bottom; }
  .hero .hero-subject--ai { transform: translate(-2px, -32px) scale(.9); }
  .hero .hero-subject--owner { transform: translateX(14px) scale(.972); }
}