/* Approved motion direction → meaningful scroll-scrub scenes */

.studio-hero-visual {
  --hero-progress:0;
  width:100%;
  min-height:0;
  aspect-ratio:5/4;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:clamp(34px,4vw,58px);
  background:#05070b;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 42px 100px rgb(0 0 0 / .42)}
.studio-hero-poster,
.studio-hero-motion {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  filter:none;
  mix-blend-mode:normal;
  mask-image:none;
  -webkit-mask-image:none;
  transform:none;
  transition:opacity 420ms var(--ease-settle)}
.studio-hero-motion {top:0;right:0;opacity:0}
.studio-hero-visual.has-scrub-video .studio-hero-poster {opacity:0}
.studio-hero-visual.has-scrub-video .studio-hero-motion {opacity:1}
.studio-hero-halo {z-index:0;inset:15%;width:auto;filter:blur(100px);opacity:.24}
.hero-motion-rail {
  position:absolute;
  z-index:4;
  right:clamp(24px,4vw,56px);
  bottom:clamp(34px,5vw,62px);
  width:min(42%,440px);
  height:1px;
  background:rgb(255 255 255 / .22)}
.hero-motion-rail i {
  position:absolute;
  top:-4px;
  left:var(--hero-rail-x,0%);
  width:9px;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--club-acid);
  box-shadow:0 0 22px var(--club-acid)}
.hero-motion-rail span,
.hero-motion-rail b {
  position:absolute;
  top:12px;
  color:rgb(255 255 255 / .56);
  font-size:8px;
  letter-spacing:.13em}
.hero-motion-rail span {left:0}
.hero-motion-rail b {right:0;color:var(--studio-white);font-weight:650}
.control-story {
  padding:clamp(100px,10vw,160px) var(--studio-gutter);
  color:var(--studio-white);
  background:var(--studio-ink)}
.control-story-sticky {
  padding:0;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  align-items:center;
  gap:clamp(34px,5vw,82px)}
.control-story-heading h2 {
  max-width:620px;
  margin:18px 0 28px;
  font-size:clamp(58px,6vw,96px);
  line-height:.88}
.control-story-heading h2 span {color:#6380ff}
.control-story-heading>p:last-child {
  max-width:460px;
  color:rgb(255 255 255 / .5);
  font-size:16px;
  line-height:1.5}
.control-story-stage {
  --control-p:0;
  position:relative;
  min-height:min(70vh,700px);
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .17);
  border-radius:clamp(38px,4vw,58px);
  background:#030509;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 45px 100px rgb(0 0 0 / .4)}
.control-story-poster,
.control-story-video {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity 420ms var(--ease-settle)}
.control-story-video {opacity:0}
.control-story-stage.has-scrub-video .control-story-poster {opacity:0}
.control-story-stage.has-scrub-video .control-story-video {opacity:1}
.control-story-shade {
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg,rgb(2 4 10 / .82),transparent 44%),linear-gradient(0deg,rgb(2 4 10 / .64),transparent 48%);
  pointer-events:none}
.control-story-inputs {
  position:absolute;
  z-index:3;
  top:38%;
  left:5%;
  display:grid;
  gap:8px}
.control-story-inputs span {
  width:max-content;
  padding:9px 12px;
  border:1px solid rgb(255 255 255 / .22);
  border-radius:999px;
  background:rgb(4 7 14 / .6);
  color:var(--studio-white);
  font-size:10px;
  opacity:var(--enter,0);
  transform:translate3d(var(--enter-x,-52px),0,0) scale(var(--enter-scale,.88));
  backdrop-filter:blur(10px)}
.control-story-output {
  position:absolute;
  z-index:3;
  right:4%;
  bottom:6%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 28px;
  min-width:260px;
  padding:17px 18px;
  border-radius:22px;
  background:var(--studio-white);
  color:var(--studio-ink);
  opacity:var(--output-o,0);
  transform:translate3d(var(--output-x,44px),0,0) scale(var(--output-scale,.9));
  transform-origin:right bottom;
  box-shadow:0 22px 50px rgb(0 0 0 / .34)}
.control-story-output span {grid-column:1;color:var(--studio-muted);font-size:8px;font-weight:700;letter-spacing:.12em}
.control-story-output strong {grid-column:1;font-size:15px}
.control-story-output i {grid-column:2;grid-row:1/3;align-self:center;color:var(--studio-blue);font-size:20px;font-style:normal}
.control-story-progress {
  position:absolute;
  z-index:4;
  top:50%;
  left:18px;
  width:2px;
  height:30%;
  background:rgb(255 255 255 / .14);
  transform:translateY(-50%)}
.control-story-progress i {
  position:absolute;
  inset:0;
  background:var(--studio-blue);
  transform:scaleY(var(--control-p));
  transform-origin:top;
  box-shadow:0 0 18px rgb(53 94 255 / .78)}
.control-story-progress span {
  position:absolute;
  top:-22px;
  left:-3px;
  color:rgb(255 255 255 / .48);
  font-size:8px;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  transform:translateY(-100%) rotate(180deg)}
.control-story.is-enhanced {height:310svh;padding:0}
.control-story.is-enhanced .control-story-sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:660px;
  padding-right:var(--studio-gutter);
  padding-left:var(--studio-gutter);
  overflow:hidden}

.process-room-viewport {background:#030509}
.process-room-viewport::before,
.process-room-viewport::after {display:none}
.process-room-poster,
.process-room-video {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity 420ms var(--ease-settle)}
.process-room-video {opacity:0}
.process-room-viewport.has-scrub-video .process-room-poster {opacity:0}
.process-room-viewport.has-scrub-video .process-room-video {opacity:1}
.process-room-shade {
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg,rgb(2 5 13 / .88),rgb(2 5 13 / .2) 60%,rgb(2 5 13 / .08)),linear-gradient(0deg,rgb(2 5 13 / .68),transparent 58%);
  pointer-events:none}
.process-room-list {z-index:3}
.process-room-list li {text-shadow:0 2px 18px rgb(0 0 0 / .6)}
.process-room-list p {color:rgb(255 255 255 / .68)}

@media(max-width:1100px) {
  .studio-hero-motion,
  .control-story-video,
  .process-room-video {display:none}
  .studio-hero-visual.has-scrub-video .studio-hero-poster,
  .control-story-stage.has-scrub-video .control-story-poster,
  .process-room-viewport.has-scrub-video .process-room-poster {opacity:1}
  .control-story-sticky {grid-template-columns:1fr;gap:24px}
  .control-story-stage {min-height:54vh}
}

/* Portrait tablets get a deliberate stacked composition instead of two cramped columns. */
@media(min-width:768px) and (max-width:900px) {
  .hero {padding:88px 28px 38px}
  .hero-center {
    min-height:auto;
    padding:34px 0 22px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:24px}
  .hero-copy {display:contents}
  .hero h1 {
    order:1;
    max-width:760px;
    margin:0;
    font-size:clamp(66px,10.5vw,86px)}
  .studio-hero-visual {
    order:2;
    aspect-ratio:16/9;
    margin:0;
    border-radius:38px}
  .hero-stage {
    order:3;
    height:auto;
    padding:0}
  .hero-description {
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
    margin:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:28px;
    text-align:left}
  .hero-description p {max-width:38ch}
  .hero-actions {align-items:flex-end}
  .hero-motion-rail {right:28px;bottom:30px;width:calc(100% - 56px)}
}

/* Landscape tablets and small notebooks retain the split layout, but never a portrait media well. */
@media(min-width:901px) and (max-width:1100px) {
  .hero-center {
    grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
    gap:34px}
  .hero h1 {font-size:clamp(58px,6.6vw,76px)}
  .studio-hero-visual {
    aspect-ratio:16/10;
    min-height:0;
    max-height:min(68vh,570px)}
  .hero-stage {height:auto;padding:0}
  .hero-description {
    position:relative;
    inset:auto;
    width:100%;
    max-width:390px;
    margin:0;
    align-items:flex-start}
  .hero-description {gap:26px}
}

@media(max-width:767px) {
  .hero {padding:68px 18px 30px}
  .hero-center {
    min-height:calc(100svh - 68px);
    padding:28px 0 18px;
    gap:18px}
  .hero-copy {display:contents}
  .hero h1 {
    order:1;
    margin:0;
    max-width:100%}
  .studio-hero-visual {
    order:2;
    width:100%;
    aspect-ratio:auto;
    min-height:clamp(238px,39svh,310px);
    margin:2px 0 0;
    border-radius:28px}
  .studio-hero-poster {object-position:center}
  .hero-stage {
    order:3;
    height:auto;
    padding:0}
  .hero-description {
    width:100%;
    max-width:none;
    margin:0;
    align-items:flex-start;
    gap:18px;
    text-align:left}
  .hero-description p {
    max-width:34ch;
    font-size:14px}
  .hero-actions {width:100%;align-items:flex-start}
  .hero-motion-rail {right:18px;bottom:26px;width:calc(100% - 36px)}
  .control-story {padding:90px 18px}
  .control-story-sticky {display:block;padding:0}
  .control-story-heading h2 {font-size:clamp(49px,14vw,64px)}
  .control-story-heading>p:last-child {font-size:13px}
  .control-story-stage {min-height:620px;margin-top:40px;border-radius:34px}
  .control-story-inputs span {opacity:1;transform:none}
  .control-story-output {right:18px;bottom:20px;left:18px;min-width:0;opacity:1;transform:none}
  .control-story-progress {display:none}
  .process-room-poster {object-position:center}
}

@media(min-width:1600px) {
  .studio-hero-visual {aspect-ratio:4/3;max-height:720px}
}

@media(prefers-reduced-motion:reduce) {
  .studio-hero-motion,
  .control-story-video,
  .process-room-video {display:none}
  .studio-hero-visual.has-scrub-video .studio-hero-poster,
  .control-story-stage.has-scrub-video .control-story-poster,
  .process-room-viewport.has-scrub-video .process-room-poster {opacity:1}
  .control-story.is-enhanced {height:auto;padding:90px 18px}
  .control-story.is-enhanced .control-story-sticky {position:relative;height:auto;min-height:0;padding:0;overflow:visible}
  .control-story-inputs span,.control-story-output {opacity:1;transform:none}
  .control-story-progress,.hero-motion-rail {display:none}
}