.office-motion { --old-canvas:#F7F7F7; --old-ink:#232323; background:var(--old-canvas); }
.office-motion .office-world { position:absolute; inset:0; background:var(--canvas); pointer-events:none; }
.office-motion .motion-stage { opacity:var(--story-opacity,1); }
.office-canvas { display:block; position:absolute; inset:0 auto auto 0; width:100%; height:auto; }
.office-film-card { position:absolute; inset:7%; display:flex; flex-direction:column; color:var(--ink); pointer-events:none; }
.office-film-brand { display:flex; align-items:center; gap:30px; opacity:var(--chrome-opacity,0); }
.office-film-brand img { width:145px; height:auto; }
.office-film-brand span { font:400 clamp(9px,1vw,14px)/1.6 'JetBrains Mono',monospace; color:var(--muted); }
.office-film-end-main { flex:1; min-height:0; display:grid; grid-template-columns:60% 40%; grid-template-rows:minmax(0,1fr); align-items:center; }
.office-film-end-copy h3 { margin:0 0 22px; font-size:clamp(28px,4.3vw,61px); line-height:1.35; letter-spacing:.015em; font-weight:400; }
.office-film-end-copy h3>span { display:block; }
.office-film-end-copy h3 span { opacity:var(--headline-opacity,0); }
.office-film-end-copy p { font-size:clamp(15px,1.55vw,22px); line-height:1.65; margin:0; color:var(--muted); opacity:var(--copy-opacity,0); }
.office-film-end-mark { width:100%; height:100%; max-height:100%; aspect-ratio:312/376; }
.office-film-end-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.office-film-end-mark .on-dark { display:none; }
:root[data-theme=dark] .office-film-end-mark .on-light { display:none; }
:root[data-theme=dark] .office-film-end-mark .on-dark { display:block; }
.office-motion[data-ready] .office-film-end-mark img { visibility:hidden; }
.office-motion:not([data-ready]) { --headline-opacity:1; --copy-opacity:1; --chrome-opacity:1; background:var(--canvas); }
.office-caption { position:absolute; top:87%; left:24px; right:24px; transform:translateY(-50%); font-size:clamp(22px,2.45vw,36px); font-weight:400; line-height:1.4; letter-spacing:.015em; text-align:center; color:var(--caption-ink,var(--old-ink)); }
.office-caption span { display:inline-block; margin-inline:.145em; }
@media(max-width:760px){
  .office-motion .motion-stage { height:max(440px,calc(100vw * 9 / 16 + 168px)); }
  .office-canvas { top:32px; }
  .office-caption { top:calc(100vw * 9 / 16 + 96px); font-size:22px; }
  .office-film-card { inset:0 24px; }
  .office-film-brand { position:absolute; bottom:22px; left:0; right:0; justify-content:center; }
  .office-film-brand img { width:120px; }
  .office-film-brand span { display:none; }
  .office-film-end-main { display:contents; }
  .office-film-end-mark { position:absolute; width:clamp(120px,24vw,180px); height:auto; top:32px; left:50%; transform:translateX(-50%); }
  .office-film-end-copy { position:absolute; top:45%; left:0; right:0; text-align:center; }
  .office-film-end-copy h3 { font-size:28px; margin-bottom:14px; }
  .office-film-end-copy p { font-size:14px; }
}
@media(forced-colors:active){.office-world,.office-canvas{display:none}.office-motion{background:Canvas;color:CanvasText}.office-film-end-mark img{visibility:visible!important}}