/* The logo opens a window into the film; the footage never scales with the mask. */
.city-film{position:relative;background:var(--ink);color:var(--paper)}
.city-stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh}
.city-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.city-canvas{position:absolute;inset:0;display:none;width:100%;height:100%;pointer-events:none}
.city-promises{position:relative;list-style:none;display:grid;gap:56px;padding:140px var(--gutter);text-align:center}
.city-promise{width:min(100%,1080px);margin:auto}
.city-promise p{font-family:var(--disp);font-weight:500;font-size:clamp(32px,4.8vw,72px);line-height:1.13;letter-spacing:.035em;text-transform:uppercase;text-wrap:balance}
.city-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.city-film.is-enhanced{height:640vh;height:640svh}
.is-enhanced .city-stage{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;transform:scale(var(--city-scale,1));transform-origin:50% 50%}
.is-enhanced .city-poster{visibility:hidden}
.is-enhanced .city-canvas{display:block}
.is-enhanced .city-promises{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.is-enhanced .city-promise{position:absolute;left:50%;top:52%;width:min(calc(100% - var(--gutter)*2),1080px);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.city-word{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.city-word-inner{display:inline-block;transform:translateY(110%);opacity:0}
.site-header.in-city:not(.menu-open){background-color:transparent;border-color:transparent}
.site-header.in-city:not(.menu-open)::before{opacity:1}
@media(max-width:767px){
  .city-promises{gap:44px;padding-block:120px}
  .city-promise p{font-size:clamp(30px,7.8vw,52px);letter-spacing:.025em;line-height:1.17}
  .is-enhanced .city-promise{width:calc(100% - 40px)}
}
@media(max-height:500px) and (min-width:768px){.city-promise p{font-size:clamp(30px,4.2vw,48px)}}
@media(prefers-reduced-motion:reduce){
  .city-film.is-enhanced{height:auto}
  .is-enhanced .city-stage{position:relative;height:auto;min-height:100svh;transform:none}
  .is-enhanced .city-canvas{display:none}
  .is-enhanced .city-poster{visibility:visible}
  .is-enhanced .city-promises{position:relative;display:grid;padding:120px var(--gutter)}
  .is-enhanced .city-promise{position:relative;left:auto;top:auto;transform:none;opacity:1;width:100%}
  .city-word-inner{transform:none;opacity:1}
}
