.brand-moment{position:relative;height:240svh;background:var(--ink);color:var(--paper);pointer-events:auto;isolation:isolate}
.brand-moment-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.brand-moment-video,.brand-moment-shade,.brand-moment-pixels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.brand-moment-video{object-fit:cover;object-position:center;transform:scale(1.015)}
.brand-moment-shade{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.3) 50%,rgba(0,0,0,.38))}
.brand-moment-pixels{z-index:2;image-rendering:pixelated}
.brand-moment h2{position:relative;z-index:3;width:100%;padding:0 var(--gutter);font-family:SuisseBPIntl,Helvetica,Arial,sans-serif;font-size:clamp(56px,7.7vw,168px);font-weight:700;line-height:.96;letter-spacing:-.045em;text-align:center;margin:0;pointer-events:none;text-shadow:0 2px 30px #0002}
.brand-moment-line{display:block;will-change:transform,opacity;opacity:0;transform:translateX(var(--line-x,0px));filter:blur(var(--line-blur,0px))}
.brand-moment-line+ .brand-moment-line{margin-top:.08em}
@media(max-width:639px){.brand-moment{height:210svh}.brand-moment-stage{min-height:540px}.brand-moment h2{font-size:clamp(42px,11vw,64px);line-height:.96;text-wrap:balance}.brand-moment-line+ .brand-moment-line{margin-top:.3em}.brand-moment-video{object-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.brand-moment{height:100svh;min-height:540px}.brand-moment-stage{position:relative}.brand-moment-pixels{display:none}.brand-moment-line{opacity:1;transform:none;filter:none;will-change:auto}}

/* A second reading moment follows the statement, before the pinned scene releases. */
.brand-moment{height:360svh;background:transparent}
.brand-moment-stage{background:transparent}
.brand-moment h2{will-change:transform,opacity;mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%}
.brand-moment-story{position:absolute;z-index:3;left:50%;top:50%;width:min(600px,calc(100% - 2 * var(--gutter)));margin:0;font-size:clamp(22px,2.15vw,34px);line-height:1.18;letter-spacing:-.025em;text-align:center;text-wrap:pretty;opacity:0;transform:translate(-50%,calc(-50% + 45svh));will-change:transform,opacity;text-shadow:0 2px 24px #0004}
.brand-moment-edge{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;image-rendering:pixelated}
.brand-moment-release{height:65svh;pointer-events:none}
@media(max-width:639px){.brand-moment{height:330svh}.brand-moment-story{font-size:24px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.brand-moment{height:auto}.brand-moment-stage{min-height:100svh;height:auto;padding:160px 0 180px;display:flex;flex-direction:column;gap:48px}.brand-moment h2{order:0;transform:none!important;opacity:1!important;mask-image:none!important}.brand-moment-story{order:1;position:relative;left:auto;top:auto;opacity:1!important;transform:none!important}.brand-moment-edge{display:none}.brand-moment-release{height:0}}

.brand-moment-stage{cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.brand-moment-stage.is-spinning{cursor:grabbing}
.brand-moment-stage:focus-visible{outline:1px solid var(--paper);outline-offset:-8px}
.brand-spin-hint{position:absolute;z-index:3;bottom:32px;left:var(--gutter);pointer-events:none;transition:opacity .3s}
.brand-moment-stage.has-spun .brand-spin-hint{opacity:0}

/* Keep the small dissolve cells and letter edges sharp. */
.brand-moment h2{text-shadow:none}
.brand-moment-line{filter:none}

.brand-logo-3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s}
.has-live-logo .brand-logo-3d{opacity:1}
.brand-moment-shade{z-index:1}
.brand-moment-story{pointer-events:none}
.logo-static-fallback{cursor:auto}
.logo-static-fallback .brand-spin-hint{display:none}

.brand-moment-pixels,.brand-moment-edge{image-rendering:auto}

@media(min-width:1024px){.brand-moment-story{width:min(860px,calc(100% - 2 * var(--gutter)))}}

.brand-logo-fallback{position:absolute;z-index:1;left:50%;top:40%;width:min(66svh,95vw);height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;opacity:1}
.has-live-logo .brand-logo-fallback{opacity:0}