:root{color-scheme:dark;background:#000;color:#f2f0eb;font-family:Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:#000}body{overflow-x:hidden}main{width:100%;margin:auto}.page{margin-bottom:clamp(40px,6vw,96px);position:relative;width:100%;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#000;container-type:inline-size}.layer{position:absolute;overflow:hidden;pointer-events:none;transform-origin:center}.layer img{position:absolute;display:block;max-width:none;user-select:none}.motion .layer{opacity:0;transform:translateY(12px);transition:opacity 1.35s cubic-bezier(.22,1,.36,1),transform 1.8s cubic-bezier(.22,1,.36,1)}.motion .layer.revealed{opacity:1;transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.play{position:absolute;right:3.5%;top:var(--play-top);display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.68);color:#fff;border:1px solid rgba(255,255,255,.72);border-radius:999px;padding:12px 18px 12px 12px;min-height:44px;cursor:pointer;font:11px/1 Arial,sans-serif;letter-spacing:1.8px;box-shadow:0 3px 20px #0003;transition:background .2s,transform .2s,opacity .4s}.play svg{width:23px;height:23px;fill:currentColor}.play:hover{background:#f2f0eb;color:#000;transform:scale(1.035)}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}
dialog{position:fixed;inset:0;width:min(94vw,1600px);max-width:none;max-height:94dvh;padding:0;border:1px solid #333;background:#080808;color:#f2f0eb;overflow:auto;box-shadow:0 18px 90px #000a}dialog::backdrop{background:rgba(0,0,0,.94)}.player-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px}.player-head h2{font-size:16px;font-weight:400;margin:0}.player-head button{border:0;background:transparent;color:inherit;font:14px Arial,sans-serif;cursor:pointer;min-width:70px;min-height:44px}.player-head button span{font-size:25px;vertical-align:-2px;padding-left:8px}video{display:block;width:100%;max-height:calc(88dvh - 80px);background:#000}#video-error,#playback-message{padding:0 20px 16px;font-size:14px}#direct-film{color:#fff}
@media(max-width:600px){.play{padding:8px;right:4%;top:var(--mobile-play-top);width:44px;height:44px;justify-content:center}.play span{display:none}.play svg{width:22px;height:22px}.player-head{padding:8px 12px}.player-head h2{font-size:14px}dialog{width:100vw;border-left:0;border-right:0}.motion .layer{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.motion .layer{opacity:1;transform:none;transition:none}.play{transition:none}}
.page:last-child{margin-bottom:0}
.brand-logo img{inset:0;width:100%;height:100%;object-fit:contain}.brand-white img{filter:brightness(0) invert(1)}.brand-name{font:400 2.421875cqw/1.2 "Segoe UI",sans-serif;color:#f2f0eb;white-space:nowrap;padding-top:.3cqw}
/* Each image, heading and paragraph has its own entrance and pace. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
html{scrollbar-gutter:stable}
.page{perspective:1400px}
.motion-surface,.image-depth{position:absolute;inset:0;transform-origin:50% 50%}
/* Keep adjacent slide pixels out of the animated crops at fractional sizes. */
.image-depth,.layer[data-motion="image"] .motion-surface{overflow:hidden}
.layer:not(.brand-logo):not(.brand-name):not([data-motion="image"])>.motion-surface{clip-path:inset(1px 0)}
.brand-name .motion-surface{padding-top:.3cqw}
.motion .layer{
  opacity:0;
  transform:none;
  transition:opacity .8s ease var(--reveal-delay,0ms);
}
.motion .layer .motion-surface{
  transform:translate3d(0,32px,0);
  transition:transform 1.25s var(--motion-ease) var(--reveal-delay,0ms);
}
.motion .layer[data-motion="quiet"] .motion-surface{transform:translate3d(0,10px,0)}
.motion .layer[data-motion="title"] .motion-surface{
  transform:translate3d(0,105%,0) rotate(1.4deg);
  transform-origin:0% 100%;
  transition-duration:1.4s;
}
.motion .layer[data-motion="hero-title"] .motion-surface{
  transform:translate3d(0,105%,0) rotate(2deg) scale(.98);
  transform-origin:0% 100%;
  transition-duration:1.7s;
}
.motion .layer[data-motion="image"]{
  clip-path:inset(10% 7% 10% 7%);
  transform:translate3d(0,35px,0) rotateX(5deg);
  transition:opacity .95s ease var(--reveal-delay,0ms),
    clip-path 1.65s var(--motion-ease) var(--reveal-delay,0ms),
    transform 1.65s var(--motion-ease) var(--reveal-delay,0ms);
}
.motion .layer[data-motion="image"] .motion-surface{
  transform:scale(1.12);
  transition-duration:2s;
}
.motion .image-depth{transform:translate3d(0,var(--depth-y,0px),0) scale(1.035)}
.motion .layer[data-motion="brand"] .motion-surface{
  transform:translate3d(0,24px,0) scale(.72) rotateY(25deg);
  transition-duration:1.1s;
}
.motion .layer.revealed{opacity:1;transform:none;clip-path:inset(0)}
.motion .layer.revealed .motion-surface{transform:none}

.play{
  z-index:2;
  transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);
  transition:background .3s,color .3s,border-color .3s,box-shadow .4s,
    transform .45s var(--motion-ease);
}
.play svg{transition:transform .5s var(--motion-ease)}
.play:hover,.play:focus-visible{
  transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0) scale(1.045);
  box-shadow:0 5px 28px #0005;
}
.play:hover svg,.play:focus-visible svg{transform:rotate(-8deg) scale(1.12)}
.play:active{transform:scale(.97)}
.motion .project-page .play{opacity:0;transition:opacity .65s ease .3s,background .3s,color .3s,transform .45s var(--motion-ease)}
.motion .project-page:has(.layer[data-motion="image"].revealed) .play{opacity:1;visibility:visible}
.motion .project-page .play:focus-visible{opacity:1;transition-delay:0s}
.mobile-copy{display:none}
.brand-grid{display:contents}
@keyframes player-open{
  from{opacity:0;transform:translate3d(0,24px,0) scale(.955)}
  to{opacity:1;transform:none}
}
@keyframes backdrop-open{from{opacity:0}to{opacity:1}}
.motion dialog[open]{animation:player-open .65s var(--motion-ease) both}
.motion dialog[open]::backdrop{animation:backdrop-open .45s ease both}

@media(max-width:600px){
  .page.mobile-layout{aspect-ratio:auto!important;margin-bottom:48px;padding:28px 24px;display:flex;flex-direction:column}
  .page.mobile-layout>.layer{display:none}
  .page.mobile-layout .mobile-copy{display:block;order:1}
  .mobile-copy h3{font:800 clamp(26px,7.8vw,38px)/1.08 Arial,sans-serif;letter-spacing:-1px;text-transform:uppercase;margin:0 0 24px;overflow-wrap:break-word}
  .mobile-copy p{font:400 16px/1.6 Arial,sans-serif;color:#aaa9a3;margin:0 0 22px}
  .mobile-copy .mobile-kicker{display:block;font:400 10px/1.5 Arial,sans-serif;letter-spacing:1.6px;color:#8c8b86;margin:0 0 24px}
  .mobile-copy .mobile-lead{font-size:21px;color:#f2f0eb}
  .mobile-copy .mobile-credit{font-size:11px;line-height:1.5;margin:24px 0 0;color:#82817c}
  .mobile-copy .mobile-step{border-top:1px solid #292929;padding-top:22px}
  .mobile-copy .mobile-film-line{font:400 42px/1.1 Georgia,serif;color:#f2f0eb;margin-bottom:32px}
  .motion .mobile-unit{opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform 1.15s var(--motion-ease)}
  .motion .mobile-unit.revealed{opacity:1;transform:none}
  .page.project-page{padding:0}
  .page.project-page>.layer[data-motion="image"]{display:block;position:relative;left:0!important;top:0!important;width:100%!important;height:auto!important;aspect-ratio:960/352.5;order:0}
  .page.project-page .mobile-copy{padding:24px 24px 0}
  .page.project-page .play{top:calc(36.71875cqw - 54px)!important;right:20px}
  [data-kind="brands"] .brand-grid{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;margin-top:32px}
  [data-kind="brands"] .brand-grid .layer{position:relative;left:0!important;top:0!important;width:100%!important;height:64px!important;display:block}
  [data-kind="brands"] .brand-name{font-size:14px;white-space:normal}
  [data-kind="brands"] .brand-name .motion-surface{display:flex;align-items:center;justify-content:center;text-align:center}
  .motion .layer .motion-surface{transform:translate3d(0,16px,0)}
  .motion .layer[data-motion="image"]{transform:translateY(16px);clip-path:inset(5% 3%)}
  .motion .image-depth{transform:none}
  .motion .layer.revealed,.motion .layer.revealed .motion-surface{transform:none;clip-path:inset(0)}
}
@media(prefers-reduced-motion:reduce){
  .motion .mobile-unit{opacity:1;transform:none;transition:none}
  .motion .layer,.motion .layer .motion-surface,.motion .image-depth{
    opacity:1;transform:none;clip-path:none;transition:none;
  }
  .play,.play svg,.play:hover,.play:focus-visible,.play:active{transform:none;transition:none}
  .motion .project-page .play{opacity:1;visibility:visible;transition:none}
  .motion dialog[open],.motion dialog[open]::backdrop{animation:none}
}
@media print{
  .layer,.motion-surface,.image-depth{opacity:1!important;transform:none!important;clip-path:none!important}
  .page{break-after:page}.play,dialog{display:none}
}


/* Manifest-driven pages can be reordered or added without mobile page-number rules. */
@media(max-width:600px){
  .page[data-kind="brands"] .mobile-copy h3{font-size:28px;line-height:1.16}
  .page[data-kind="brands"] .mobile-copy .mobile-brands{font-size:15px;line-height:1.8}
  .page[data-kind="closing"]{padding-top:0;align-items:center}
  .page[data-kind="closing"]>.layer[data-region-index="1"]{display:block;position:relative;left:0!important;top:0!important;width:100%!important;height:auto!important;aspect-ratio:960/310;order:0}
  .page[data-kind="closing"] .mobile-copy{text-align:center;width:100%}
  .page[data-kind="closing"] .mobile-copy h3{text-transform:none;font-weight:400;letter-spacing:1.2px}
}

/* Give desktop presentations a comfortable, centred viewing width. */
@media (min-width: 601px) {
  main {
    width: calc(100% - clamp(48px, 8vw, 160px));
    max-width: 1440px;
    margin-inline: auto;
    padding-top: clamp(24px, 3vw, 56px);
  }
}