/* instiv2 story.css (HS2, 19 Oct 2026): the photo story hero for /about and /technology, the same parts as the home
   hero (home.css carries its own copy): one plate cross fades through its frames in order, a caption pill with a small
   pause control and a segment timer. story.js drives it. Linked only by pages with a [data-story] plate. */
.hxs .ph { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.hxs .hxs-f { opacity: 0; }
.hxs .hxs-f.is-on { opacity: 1; }
.hxs .hxs-shot { filter: brightness(.82) saturate(.9); }
.hxs-bar { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: min(100%, 560px); margin: 0 0 18px; padding: 4px 14px 4px 4px; border-radius: 22px;
  background: rgba(5,8,15,.5); border: 1px solid rgba(214,226,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 13px/1.3 Inter, "Inter Fallback", sans-serif; color: rgba(236,241,250,.92); }
.hxs-pp { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: 3px 0 3px 3px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(242,245,251,.62); cursor: pointer; transition: background .25s, color .25s; }
.hxs-pp svg { width: 11px; height: 11px; }
.hxs-bar.is-paused .hxs-pp { background: rgba(242,245,251,.16); color: #F2F5FB; }
.hxs-pp::after { content: ""; position: absolute; inset: -9px; } /* 44 px target */
.hxs-pp:hover { background: rgba(242,245,251,.16); color: #F2F5FB; }
.hxs-pp svg { fill: currentColor; }
.hxs-pp .i-play, .hxs-bar.is-paused .hxs-pp .i-pause { display: none; }
.hxs-bar.is-paused .hxs-pp .i-play { display: block; }
.hxs-n { flex: none; font: 600 12px/1 "Azeret Mono", "JBM Fallback", monospace; color: #F2F5FB; }
.hxs-t { min-width: 0; transition: opacity .26s; }
.hxs-t.is-out, .hxs-n.is-out { opacity: 0; }
.hxs-n { transition: opacity .26s; }
.hxs-seg { flex: none; display: flex; gap: 3px; margin-left: 4px; }
.hxs-seg i { position: relative; width: 14px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(214,226,255,.24); }
.hxs-seg i::after { content: ""; position: absolute; inset: 0; background: #F2F5FB; transform: scaleX(0); transform-origin: 0 50%; }
.hxs-seg i.is-done::after { transform: none; }
.hxs-bar.is-run .hxs-seg i.is-on::after { animation: hxsFill 5.2s linear forwards; }
.hxs-bar.is-paused .hxs-seg i.is-on::after, .hxs-bar.is-held .hxs-seg i.is-on::after { animation-play-state: paused; }
@keyframes hxsFill { to { transform: none; } }
.no-js .hxs-pp, .no-js .hxs-seg, .hxs-bar.is-static .hxs-pp, .hxs-bar.is-static .hxs-seg { display: none; }
.no-js .hxs-bar, .hxs-bar.is-static { padding-left: 14px; min-height: 32px; }
/* a portrait frame (the founder photo): on wide screens it stands at the right of the plate, never stretched */
.hxs .hxs-port { object-fit: contain; object-position: 88% 50%; background: #05080F; }
.layer.has-story { background: #05080F; }
@media (max-width: 860px) {
  .layer.has-story .hxs .ph { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .layer.has-story .hxs .hxs-port { object-fit: cover; }
  /* phones: the story fills the band between the header and the copy and fades into the dark under the copy */
  .layer.has-story .plate.hxs { inset: 0 0 auto 0; height: 50svh; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .layer.has-story .plate.hxs .ph { transform: none; }
  .layer.has-story .plate.hxs .ph-inset { display: none; }
  .layer.has-story .hxs .hxs-shot { filter: none; } /* no copy sits on the screens here */
  .hxs-bar { margin-bottom: 14px; gap: 8px; font-size: 12.5px; }
  .hxs-seg i { width: 8px; }
}
@media (max-width: 380px) { .hxs-seg { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } } /* still animates: its animationend drives the story */
@media (prefers-reduced-motion: reduce) { .hxs .ph { transition: none; } .hxs-seg { display: none; } }
/* wide screens: a bright frame (a white meeting room, a light theme screen) keeps the headline readable, as on home */
@media (min-width: 861px) {
  .layer.has-story .scrim { background: linear-gradient(to right, rgba(5,8,15,.86) 0%, rgba(5,8,15,.62) 38%, rgba(5,8,15,.12) 68%), linear-gradient(to top, rgba(5,8,15,.92) 0%, rgba(5,8,15,.4) 42%, rgba(5,8,15,.16) 78%, rgba(5,8,15,.42) 100%); }
}