/* Case study extras (2026-10-04): long pages that scroll inside their frame, phone-only stages, cover stages,
   screen recordings, and the closing line. Loaded after style.css on every project page. */
.stage.cover{display:block;padding:0;background:none;border:none}
.stage.cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:28px}
.stage .lb{width:74%;margin-right:90px}
.stage.solo .lb{width:72%;margin:0}
.stage.phones3{display:flex;gap:34px;justify-content:center;align-items:center}
.stage.phones3 .phone{position:static;width:210px}
.lview{position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff}
.lview img{display:block;width:100%;will-change:transform;transform:translate3d(0,0,0)}
.phone.lp .lview{aspect-ratio:9/19.5}
.lgal{display:grid;grid-template-columns:1fr;gap:56px;margin-top:40px}
.lgal.two{grid-template-columns:1fr 1fr;gap:30px}
.lshot{position:relative}
.lshot .browser{width:100%}
.lshot .cap,.vshot .cap{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:12px}
.lhint{position:absolute;right:4px;top:-40px;font-family:var(--hand);font-size:26px;color:var(--accent);display:flex;align-items:center;gap:6px}
.lhint .t-touch{display:none}
@media (pointer:coarse){.lhint .t-fine{display:none}.lhint .t-touch{display:inline}}
.vgal{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.vshot .browser{width:100%}
.vshot video{display:block;width:100%;background:#fff}
.close{padding:90px 0 0;text-align:center}
.close .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.close .line{font-family:var(--hand);font-size:56px;font-weight:700;line-height:1.1;max-width:900px;margin:14px auto 0}
.chero .name.long{font-size:118px}
@media (max-width:760px){
  .stage .lb{width:88%;margin-right:30px}
  .stage.solo .lb{width:90%}
  .stage.cover{height:auto;aspect-ratio:16/9}
  .stage.cover img{border-radius:20px}
  .stage.phones3{gap:12px}
  .stage.phones3 .phone{width:28%;border-width:4px;border-radius:16px}
  .lgal{gap:40px;margin-top:20px}
  .lgal.two{grid-template-columns:1fr;gap:40px}
  .lhint{top:-34px;font-size:22px}
  .vgal{grid-template-columns:1fr;gap:28px;margin-top:20px}
  .close{padding:60px 0 0}
  .close .line{font-size:36px}
  .chero .name.long{font-size:clamp(52px,15vw,80px)}
}
.chero h1 span[data-c]{display:inline-block;margin:0 .3em}