/* s-subaio.css: owned by the subaio agent. Default = static stacked layout; .is-pinned = desktop morph stage. */
.home-subaio {
  background: #000;
  color: #fff;
  position: relative;
  overflow-x: clip;
}
.home-subaio :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.home-subaio__stage {
  position: relative;
  padding: clamp(88px, 12vw, 128px) var(--rg) clamp(48px, 8vw, 96px);
  display: flex; flex-direction: column; gap: 32px;
}
.home-subaio__title {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 7vw, 4.25rem);
  line-height: 1.02; font-weight: 500; letter-spacing: -0.02em;
  text-wrap: balance;
}
.home-subaio__frame { margin: 0 0 16px; max-width: 56ch; color: rgba(255, 255, 255, 0.85); }
.home-subaio__desc { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, 0.7); }

.home-subaio__frame-box { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 0; }
.home-subaio__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: 0; }

.home-subaio__controls { display: flex; gap: 8px; z-index: 5; }
.home-subaio__controls[hidden] { display: none; }
.home-subaio__btn {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  background: #000; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0;
  cursor: pointer; font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}
.home-subaio__btn:hover { background: #fff; color: #000; }
.home-subaio__btn[aria-pressed="true"][data-subaio-sound] { border-color: #fff; }

/* ---------- desktop pinned stage ---------- */
.home-subaio.is-pinned .home-subaio__stage {
  height: 100vh; height: 100dvh; padding: 0; display: block; overflow: hidden;
}
.home-subaio.is-pinned .home-subaio__text {
  position: absolute; left: var(--rg); top: 50%; transform: translateY(-50%);
  width: calc(100% - 58vw - 3 * var(--rg)); min-width: 280px; will-change: opacity;
}
.home-subaio.is-pinned .home-subaio__title { font-size: clamp(2.4rem, 3.6vw, 4.25rem); }
.home-subaio.is-pinned .home-subaio__frame-box {
  position: absolute; right: var(--rg); top: calc(50% - 58vw * 9 / 32);
  width: 58vw; aspect-ratio: 16 / 9; will-change: transform;
}
.home-subaio.is-pinned .home-subaio__controls { position: absolute; left: var(--rg); bottom: 24px; }

/* Handoff from Work: the section overlaps the last 100vh of the Work pin (spacer end - 200vh = stage top at pin end - 100vh),
   sits above it, and is transparent so only the clipped black stage shows. s-work.js drives the stage clip-path. */
.home-subaio.is-pinned { margin-top: -200vh; z-index: 3; background: transparent; }
.home-subaio.is-pinned .home-subaio__stage { background: #000; }

/* ---------- tablet + phone pinned stage (class .is-mp from s-subaio.js; --m-vh = innerHeight in px, set by s-work.js) ---------- */
.home-subaio.is-mp { z-index: 3; background: transparent; }
.home-subaio.is-mp .home-subaio__stage {
  height: var(--m-vh, 100svh); padding: 0; display: block; overflow: hidden; background: #000;
}
.home-subaio.is-mp .home-subaio__text {
  position: absolute; left: var(--rg); right: var(--rg); top: calc(var(--nav-h, 56px) + 20px); will-change: opacity;
}
.home-subaio.is-mp .home-subaio__title { font-size: clamp(1.9rem, 7.5vw, 3.4rem); margin-bottom: 14px; }
.home-subaio.is-mp .home-subaio__frame { font-size: 15px; line-height: 1.35; margin-bottom: 10px; }
.home-subaio.is-mp .home-subaio__desc { font-size: 13px; line-height: 1.35; }
.home-subaio.is-mp .home-subaio__frame-box {
  position: absolute; left: var(--rg); right: var(--rg); bottom: calc(68px + env(safe-area-inset-bottom));
  margin: 0; will-change: transform;
}
.home-subaio.is-mp .home-subaio__controls { position: absolute; left: var(--rg); bottom: max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 420px) {
  .home-subaio.is-mp .home-subaio__desc { display: none; }
}