/* V7: film, a short introduction, then the original project. */
dialog.is-case-study { inset:0; width:100%; max-width:none; height:100svh; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:var(--bg); color:var(--ink); box-shadow:none; overscroll-behavior:contain; overflow-x:hidden; }
dialog.is-case-study::backdrop { background:var(--bg); backdrop-filter:none; }
.is-case-study .dialog-top { position:sticky; top:0; z-index:10; height:76px; padding:0 5.5%; margin:0; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(18px); font-size:9px; }
.is-case-study .close-dialog { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; font-size:27px; transition:color .2s,background .2s,rotate .35s; }
.is-case-study .close-dialog:hover { rotate:90deg; color:var(--bg); background:var(--ink); }
.case-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.case-film { width:min(1280px,89%); margin:28px auto 0; }
.case-film-stage { position:relative; background:#050909; isolation:isolate; }
.case-video { display:block; width:100%; aspect-ratio:16/9; max-height:calc(100svh - 165px); background:#050909; object-fit:contain; }
.case-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:13px; min-height:62px; padding:15px 25px 15px 18px; border:1px solid #ffffff60; border-radius:40px; background:#eff7f2df; color:#14241d; backdrop-filter:blur(12px); box-shadow:0 8px 36px #0004; font-size:12px; }
.case-play svg { width:26px; height:26px; }
.case-play[hidden],.case-video-error[hidden] { display:none; }
.case-video-error { position:absolute; inset:auto 20px 50px; padding:16px; background:#0d141be8; color:#fff; text-align:center; font-size:13px; }
.case-film-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:17px; color:var(--muted); font-size:10px; }
.case-film-caption>span:first-child { font:8px var(--mono); letter-spacing:1.5px; }
.case-summary { display:grid; grid-template-columns:1fr 1fr; gap:12%; width:min(1120px,82%); margin:84px auto 108px; }
.case-kicker { font:8px var(--mono); letter-spacing:1.5px; color:var(--muted); margin:0 0 21px; }
.case-summary h3 { font-size:clamp(34px,4.2vw,60px); font-weight:500; line-height:1.4; letter-spacing:-.05em; margin:0; }
.case-summary-body { align-self:end; }
.case-summary-body>p { font-size:14px; line-height:2.1; color:var(--muted); margin:0 0 30px; max-width:440px; }
.case-visit { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:19px 23px; border:1px solid var(--accent-line); color:var(--ink); font-size:13px; overflow:hidden; position:relative; isolation:isolate; transition:color .3s; max-width:440px; }
.case-visit::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:translateY(103%); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.case-visit-label { height:20px; line-height:20px; overflow:hidden; }
.case-visit-label>span { display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.case-visit svg { width:21px; height:21px; color:var(--accent); transition:transform .5s,color .3s; }
.case-visit:is(:hover,:focus-visible) { color:var(--bg); }
.case-visit:is(:hover,:focus-visible)::before { transform:none; }
.case-visit:is(:hover,:focus-visible) .case-visit-label>span { transform:translateY(-100%); }
.case-visit:is(:hover,:focus-visible) svg { color:var(--bg); transform:translate(3px,-3px); }
@media(max-width:760px) {
  .is-case-study .dialog-top { height:66px; padding:0 6%; font-size:7px; letter-spacing:1px; }
  .is-case-study .close-dialog { width:36px; height:36px; font-size:24px; }
  .case-film { width:100%; margin-top:14px; }
  .case-film-caption { margin-inline:6%; font-size:8px; gap:8px; }
  .case-film-caption>span:first-child { font-size:6px; letter-spacing:1px; }
  .case-video { max-height:none; }
  .case-play { min-height:46px; padding:10px 18px 10px 12px; font-size:10px; gap:8px; }
  .case-play svg { width:21px; height:21px; }
  .case-summary { grid-template-columns:1fr; width:86%; margin:43px auto 65px; gap:25px; }
  .case-summary h3 { font-size:38px; }
  .case-summary h3 br { display:none; }
  .case-kicker { font-size:7px; margin-bottom:14px; }
  .case-summary-body>p { font-size:12px; line-height:2; margin-bottom:23px; }
  .case-visit { font-size:12px; padding:17px 19px; }
}
@media(prefers-reduced-motion:reduce) { .case-agentcrop *, .is-case-study .close-dialog { transition:none!important; } }