/* A continuous full-bleed stage; the static reading layout remains available. */
#u-imenu.is-cinematic { height: 660svh; border: 0; background: transparent; z-index: 2; pointer-events: none; }
.is-cinematic .brand-story-stage { display: block; padding: 0; min-height: 0; isolation: isolate; background: var(--papir-2); }
.is-cinematic .brand-story-art { position: absolute; inset: 0; margin: 0; height: 100%; perspective: 1200px; z-index: 2; }
.is-cinematic .brand-word { inset: 12% 0 auto; height: 44%; width: 90%; max-width: 1500px; z-index: 2; }
.is-cinematic .brand-pulse { display: none; }
.is-cinematic .brand-city { inset: 0; width: 100%; height: 100%; max-width: none; mask-image: none; filter: brightness(.48); object-fit: cover; }
.is-cinematic .brand-coordinate { bottom: auto; top: 18%; right: var(--pad); color: #fff; z-index: 2; }
.is-cinematic .brand-scene-color { z-index: 1; }
.is-cinematic .brand-story-heading { position: absolute; inset: auto var(--pad) 17%; display: block; z-index: 3; text-align: center; }
.is-cinematic .brand-story-heading .oz { display: none; }
.is-cinematic .brand-story-heading h2 { max-width: none; margin: 0; font-size: clamp(28px,4vw,62px); }
.is-cinematic .brand-story-copy { position: absolute; inset: auto var(--pad) 14%; height: 180px; z-index: 3; }
.is-cinematic .brand-story-copy article { display: block; max-width: 620px; }
.is-cinematic .brand-story-copy h3 { font-size: clamp(36px,4.2vw,64px); }
.is-cinematic .brand-story-copy article > p:last-child { margin: 16px 0 0; width: auto; max-width: 40ch; font-size: 15px; }
.is-cinematic .brand-story-copy article:nth-child(2) { margin-left: auto; }
.is-cinematic .brand-story-copy article:nth-child(3) { max-width: none; text-align: center; }
.is-cinematic .brand-story-copy article:nth-child(3) > p:last-child { margin-inline: auto; }
.is-cinematic .brand-story-controls { position: absolute; inset: auto var(--pad) 28px; display: flex; justify-content: center; gap: 28px; z-index: 4; pointer-events: auto; }
.is-cinematic .brand-story-controls button { border: 0; padding: 12px 4px; min-height: 44px; opacity: .5; }
.is-cinematic .brand-story-controls button[aria-pressed=true] { opacity: 1; }
.is-cinematic .brand-story-controls b { font-size: 16px; }
.is-cinematic .brand-story-controls span { display: none; }
.is-cinematic .brand-ink { inset: 0; width: 100%; height: 100%; color: #fff; z-index: 1; }
.is-cinematic .brand-connections { inset: 10% 0 auto; height: 60%; z-index: 1; }
.is-cinematic .brand-project { width: 26%; height: 25%; border-radius: 12px; object-fit: contain; background: #e8e4de; padding: 10px; z-index: 3; }
.is-cinematic .brand-project-a { top: 13%; left: 4%; }
.is-cinematic .brand-project-b { top: 37%; right: 4%; bottom: auto; }
.film-light-ink .brand-story-copy h3,.film-light-ink .brand-story-copy h3 em,.film-light-ink .brand-story-copy article > p,.film-light-ink .brand-story-controls b { color: #fff; }
.film-light-ink .brand-story-controls button[aria-pressed=true] b { color: #fff; }
@media(max-height:720px){
 .is-cinematic .brand-story-copy{bottom:13%;height:160px}
 .is-cinematic .brand-story-copy h3{font-size:clamp(28px,4vw,44px)}
 .is-cinematic .brand-story-copy article>p:last-child{font-size:13px;margin-top:10px}
 .is-cinematic .brand-story-controls{bottom:10px}
 .is-cinematic .brand-coordinate{top:14%}
}
@media(max-height:480px){
 .is-cinematic .brand-story-copy{left:53%;top:90px;bottom:65px;height:auto}
 .is-cinematic .brand-story-copy article{position:absolute;inset:auto 0 0;width:100%;text-align:left}
 .is-cinematic .brand-story-copy h3{font-size:26px}
 .is-cinematic .brand-story-heading h2{font-size:26px}
 .is-cinematic .brand-coordinate{display:none}
}
@media(max-width:700px) {
 #u-imenu.is-cinematic { height: 620svh; }
 .is-cinematic .brand-word { inset: 20% 0 auto; height: 32%; width: 90%; }
 .is-cinematic .brand-story-copy { bottom: 15%; height: 200px; }
 .is-cinematic .brand-story-copy h3 { font-size: 36px; }
 .is-cinematic .brand-story-copy article > p:last-child { font-size: 14px; }
 .is-cinematic .brand-story-heading { bottom: 22%; }
 .is-cinematic .brand-story-heading h2 { font-size: 32px; max-width: 18ch; margin-inline: auto; }
 .is-cinematic .brand-project { width: 40%; height: 17%; padding: 5px; }
 .is-cinematic .brand-project-a { top: 14%; left: 4%; }
 .is-cinematic .brand-project-b { top: 40%; right: 4%; }
 .is-cinematic .brand-story-controls { bottom: 20px; }
}