/* Film page: one way to present a project. Black, films first, big and clean.
   The only edge shape is the slant of the mark (1 across, 2 up). Stands alone: no site.css. */
@font-face{font-family:"Jost";src:url("../../assets/jost-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
html{background:#000}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;color:#000;padding:10px 14px;text-decoration:none}
.skip:focus-visible{top:12px}
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--g);display:flex;justify-content:space-between;align-items:center;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hdr>*{pointer-events:auto}
.hdr.hide:not(.open){transform:translateY(-110%)}
.hdr .pill{display:flex;align-items:center;gap:4px;color:#fff}
.hdr .brand{gap:10px;text-decoration:none;font:500 16px/1 "Jost",system-ui,sans-serif;letter-spacing:.01em;color:#fff}
.hdr .brand .mk{width:22px;height:22px;color:#fff}
.hdr .nav{display:flex}
.hdr .nav a{color:#fff;text-decoration:none;font:500 15px/1 "Jost",system-ui,sans-serif;padding:8px 12px}
.hdr .nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.hdr .menu-btn{display:none;background:none;border:0;color:#fff;padding:8px 0 8px 14px;font:500 15px/1 "Jost",system-ui,sans-serif;cursor:pointer}
.foot{background:#000;color:rgba(255,255,255,.6);font-size:14px;padding:26px var(--g);border-top:1px solid rgba(255,255,255,.22)}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.foot a{color:#fff;text-decoration:none}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
@media (max-width:760px){
  .hdr{padding:10px var(--g)}
  .hdr .nav{display:none}
  .hdr .menu-btn{display:block}
  .hdr.open .nav{display:flex;position:fixed;inset:0;background:#000;flex-direction:column;justify-content:center;padding:0 24px;gap:4px;z-index:-1}
  .hdr.open .nav a{font-size:44px;font-weight:300;padding:8px 0}
}
body.fp{--k:#000;--w:#fff;--dim:rgba(255,255,255,.72);--line:rgba(255,255,255,.22);--acc:#fff;
  --g:clamp(18px,3.4vw,56px);--hdr-bg:transparent;--hdr-fg:#fff;--hdr-mk:#fff;
  background:#000;color:#fff;margin:0;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.fp *{box-sizing:border-box}
body.fp main{display:block;background:#000}
.fp h1,.fp h2,.fp h3,.fp .j{font-family:"Jost",system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;margin:0}
.fp p{margin:0}
.fp video,.fp img{display:block}
.fp-lab{font:500 12px/1.25 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fp-lab b{color:#fff;font-weight:600}
.fp-rule{display:block;width:44px;height:1px;background:#fff;margin:18px 0}

/* ---------- 1 · hero film ---------- */
.fp-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.fp-hero .v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.fp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 46%,rgba(0,0,0,.78) 100%)}
.fp-hero .in{position:absolute;inset:0;z-index:2;padding:0 var(--g) clamp(22px,4.2vh,48px);display:flex;flex-direction:column;justify-content:flex-end}
.fp-hero .top{position:absolute;top:clamp(74px,11vh,112px);left:var(--g);right:var(--g);display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.fp-hero .src{display:inline-flex;align-items:center;gap:9px;font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.fp-hero .src i{width:6px;height:6px;background:#fff;border-radius:50%;animation:fpblink 1.6s infinite}
@keyframes fpblink{50%{opacity:.25}}
.fp-hero h1{font-size:clamp(84px,23.5vw,400px);line-height:.8;letter-spacing:-.045em;font-weight:500;margin-left:-.045em;margin-bottom:clamp(14px,2.4vh,30px)}
.fp-hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.fp-hero .what{font-size:clamp(15px,1.25vw,20px);line-height:1.35;max-width:34em}
.fp-hero .what strong{display:block;font:500 clamp(20px,2.1vw,34px)/1.1 "Jost",system-ui,sans-serif;letter-spacing:-.02em;margin-bottom:8px}
.fp-hero .what small{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fp-play{appearance:none;border:1px solid #fff;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:14px;
  padding:15px 26px 15px 20px;font:500 clamp(15px,1.15vw,18px)/1 "Jost",system-ui,sans-serif;letter-spacing:.01em;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .25s,color .25s}
.fp-play::before{content:"";border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.fp-play small{font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.fp-play:hover,.fp-play:focus-visible{background:#fff;color:#000;outline:0}
.fp-play.solid{background:#fff;color:#000}
.fp-play.solid:hover{background:transparent;color:#fff}
.fp-cue{position:absolute;left:50%;bottom:14px;z-index:3;width:1px;height:38px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:fpcue 2s infinite;transform-origin:top}
@keyframes fpcue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- 2 · statement ---------- */
.fp-say{padding:clamp(90px,17vh,210px) var(--g);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:var(--g);align-items:start}
.fp-say h2{font-size:clamp(30px,4.5vw,78px);line-height:1.04;letter-spacing:-.03em;max-width:17em;font-weight:400}
.fp-say h2 em{font-style:normal;color:var(--dim)}
.fp-say .facts{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:clamp(28px,5vh,56px)}
.fp-say .facts div{font-size:14px;line-height:1.4;color:var(--dim)}
.fp-say .facts b{display:block;color:#fff;font:500 clamp(17px,1.5vw,22px)/1.2 "Jost",system-ui,sans-serif;margin-bottom:2px}

/* chapter head, used between parts */
.fp-head{padding:clamp(80px,14vh,170px) var(--g) clamp(26px,5vh,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.fp-head h2{font-size:clamp(40px,7.6vw,132px);line-height:.92;letter-spacing:-.04em}
.fp-head p{max-width:30em;font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:var(--dim)}

/* ---------- pinned parts ---------- */
.fp-pin{position:relative;height:calc(var(--n,3)*100vh)}
.fp-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}

/* ---------- 3 · reel: full-screen clips, slant wipe ---------- */
.fp-reel .ly{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.fp-reel .ly video,.fp-reel .ly img.ps{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.fp-reel .ly::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%);pointer-events:none}
.fp-reel .cap{position:absolute;left:var(--g);right:var(--g);bottom:clamp(26px,5vh,56px);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.fp-reel .cap h3{font-size:clamp(44px,9.6vw,170px);line-height:.86;letter-spacing:-.045em;margin-left:-.04em}
.fp-reel .cap p{max-width:24em;font-size:clamp(15px,1.2vw,18px);line-height:1.4;text-align:right;color:#fff}
.fp-reel .cap p small{display:block;margin-top:8px}
.fp-reel .n{position:absolute;top:clamp(78px,11vh,112px);left:var(--g);z-index:2}
.fp-ticks{position:absolute;right:var(--g);top:clamp(78px,11vh,112px);z-index:5;display:flex;gap:6px}
.fp-ticks i{width:26px;height:2px;background:rgba(255,255,255,.3);transform:skewX(-26.5deg)}
.fp-ticks i.on{background:#fff}

/* ---------- 4 · plates: whole artworks, sideways ---------- */
.fp-plates .trk{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:clamp(28px,5vw,90px);padding:0 var(--g);will-change:transform}
.fp-plates figure{margin:0;flex:none;display:flex;flex-direction:column;gap:14px;width:min-content}
.fp-plates figure img{height:min(64vh,62svh);width:auto;max-width:86vw;object-fit:contain;background:#0b0b0d}
.fp-plates figure.tall img{height:min(70vh,68svh)}
.fp-plates figcaption{display:flex;gap:14px;align-items:baseline;font-size:15px;line-height:1.4;color:rgba(255,255,255,.72)}
.fp-plates figcaption b{font:500 17px/1.2 "Jost",system-ui,sans-serif;color:#fff;white-space:nowrap}
.fp-plates .lead{flex:none;width:min(78vw,520px)}
.fp-plates .lead h2{font-size:clamp(40px,6.4vw,112px);line-height:.92;letter-spacing:-.04em}
.fp-plates .lead p{margin-top:20px;font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:var(--dim);max-width:26em}
.fp-bar{position:absolute;left:var(--g);right:var(--g);bottom:clamp(18px,3.4vh,34px);height:1px;background:rgba(255,255,255,.2)}
.fp-bar i{display:block;height:1px;background:#fff;width:100%;transform-origin:left;transform:scaleX(0)}

/* ---------- 5 · the model: real 3D, then built ---------- */
.fp-model canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fp-model .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 46%),linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 30%)}
.fp-model .st{position:absolute;left:var(--g);bottom:clamp(40px,8vh,84px);width:min(32vw,460px);z-index:4;opacity:0;transform:translateY(18px);transition:opacity .18s;pointer-events:none;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.fp-model .st.on{opacity:1;transform:none;transition:opacity .45s .12s,transform .6s .12s cubic-bezier(.2,.8,.2,1)}
.fp-model .st h3{font-size:clamp(34px,4.7vw,84px);line-height:.9;letter-spacing:-.04em;margin:14px 0 16px}
.fp-model .st p{font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:rgba(255,255,255,.9);max-width:26em}
.fp-model .st .spec{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px}
.fp-model .st .spec span{font:500 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fp-model .st .spec b{display:block;font:500 clamp(18px,1.6vw,24px)/1.15 "Jost",system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;color:#fff}
.fp-built{position:absolute;right:var(--g);bottom:calc(clamp(40px,8vh,84px) + var(--e,0)*11vh);width:calc(27vw + var(--e,0)*33vw);z-index:3;opacity:0;transform:translateY(24px);transition:opacity .18s}
.fp-built.on{transition:opacity .45s .12s,transform .7s .12s cubic-bezier(.2,.8,.2,1)}
.fp-built.on{opacity:1;transform:none}
.fp-built .fr{position:relative;aspect-ratio:16/9;box-shadow:0 0 0 1px rgba(255,255,255,calc(var(--e,0)*.0));overflow:hidden;background:#111;clip-path:polygon(22px 0,100% 0,100% calc(100% - 44px),calc(100% - 22px) 100%,0 100%,0 44px)}
.fp-built video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-built .fp-lab{display:flex;justify-content:space-between;margin-top:10px}
.fp-dim{position:absolute;left:0;top:0;z-index:2;pointer-events:none;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;
  padding:6px 9px;background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.55);opacity:0;transition:opacity .4s;will-change:transform}
.fp-dim.on{opacity:1}
.fp-model .intro{position:absolute;left:var(--g);right:var(--g);top:50%;transform:translateY(-50%);z-index:4;pointer-events:none;transition:opacity .5s}
.fp-model .intro h2{font-size:clamp(46px,9.4vw,168px);line-height:.88;letter-spacing:-.045em}
.fp-model .intro p{margin-top:22px;max-width:28em;font-size:clamp(15px,1.2vw,19px);line-height:1.45;color:rgba(255,255,255,.8)}
.fp-model .hint{position:absolute;right:var(--g);top:clamp(78px,11vh,112px);z-index:4}
.fp-model .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.fp-model.no3d .fallback{display:block}

/* ---------- wide film band ---------- */
.fp-wide{padding:0 0 clamp(40px,8vh,90px)}
.fp-wide .band{position:relative;width:100%;overflow:hidden;background:#000}
.fp-wide .band video{width:100%;height:auto}
.fp-wide .meta{display:flex;justify-content:space-between;gap:20px;padding:14px var(--g) 0;flex-wrap:wrap}

/* ---------- 6 · end ---------- */
.fp-end{position:relative;padding:clamp(80px,14vh,170px) var(--g) clamp(40px,7vh,80px)}
.fp-end .film{position:relative;display:block;width:100%;aspect-ratio:16/8;overflow:hidden;cursor:pointer;border:0;padding:0;background:#111;color:#fff;
  clip-path:polygon(clamp(24px,4vw,70px) 0,100% 0,100% calc(100% - clamp(48px,8vw,140px)),calc(100% - clamp(24px,4vw,70px)) 100%,0 100%,0 clamp(48px,8vw,140px))}
.fp-end .film video,.fp-end .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fp-end .film:hover video,.fp-end .film:hover img{transform:scale(1.04)}
.fp-end .film::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.08) 60%)}
.fp-end .film .t{position:absolute;left:clamp(28px,5vw,84px);bottom:clamp(22px,4vw,60px);z-index:2;text-align:left}
.fp-end .film .t>b{display:block;font:500 clamp(34px,6.4vw,120px)/.9 "Jost",system-ui,sans-serif;letter-spacing:-.04em;margin-top:12px}
.fp-end .film .go{position:absolute;right:clamp(28px,5vw,84px);bottom:clamp(22px,4vw,60px);z-index:2;width:clamp(56px,6vw,96px);aspect-ratio:1;border:1px solid #fff;border-radius:50%;display:grid;place-items:center}
.fp-end .film .go::before{content:"";border-left:clamp(14px,1.5vw,22px) solid #fff;border-top:clamp(9px,1vw,14px) solid transparent;border-bottom:clamp(9px,1vw,14px) solid transparent;margin-left:5px}
.fp-end .more{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.fp-cred{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px var(--g);margin-top:clamp(56px,10vh,120px);border-top:1px solid var(--line);padding-top:26px}
.fp-cred div{font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}
.fp-cred .fp-lab{display:block;margin-bottom:8px}
.fp-cred figure{margin:0;display:flex;gap:14px;align-items:flex-end}
.fp-cred figure img{width:96px;height:128px;object-fit:cover}
.fp-next{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(56px,10vh,120px);padding-top:26px;border-top:1px solid var(--line);color:#fff;text-decoration:none}
.fp-next b{font:500 clamp(48px,11vw,200px)/.84 "Jost",system-ui,sans-serif;letter-spacing:-.045em;margin-left:-.04em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fp-next:hover b{transform:translateX(18px)}
.fp-next>span:last-child{font-size:28px}

/* ---------- player ---------- */
.fp-player{position:fixed;inset:0;z-index:200;background:#000;display:none;flex-direction:column}
.fp-player.open{display:flex}
.fp-player video{flex:1;min-height:0;width:100%;background:#000}
.fp-player .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px var(--g);font-size:13px;color:var(--dim)}
.fp-player button{appearance:none;background:none;border:1px solid #fff;color:#fff;padding:9px 16px;font:500 13px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* ---------- phone ---------- */
@media (max-width:760px){
  .fp-hero .top{top:70px}
  .fp-hero .top .fp-lab.r{display:none}
  .fp-hero h1{font-size:clamp(84px,29vw,170px)}
  .fp-hero .row{flex-direction:column;align-items:flex-start;gap:18px}
  .fp-say{grid-template-columns:1fr;gap:18px}
  .fp-reel .cap{flex-direction:column;align-items:flex-start;gap:12px}
  .fp-reel .cap p{text-align:left}
  .fp-reel .cap h3{font-size:clamp(50px,17vw,96px)}
  .fp-reel .ly video{inset:0 0 auto 0;height:66svh}
  .fp-reel .ly::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 44%,#000 66%)}
  .fp-reel .ly{background:#000}
  .fp-plates figure img,.fp-plates figure.tall img{height:auto;max-height:62svh;width:auto;max-width:86vw}
  .fp-say{padding-top:72px;padding-bottom:72px}
  .fp-head{padding-top:72px}
  .fp-plates .trk{gap:22px}
  .fp-plates figcaption{flex-direction:column;gap:4px;max-width:84vw}
  .fp-model .veil{background:linear-gradient(0deg,#000 0,#000 34%,rgba(0,0,0,0) 58%)}
  .fp-model .st{left:var(--g);right:var(--g);width:auto;bottom:16px}
  .fp-model .st h3{font-size:clamp(30px,9.2vw,44px);margin:8px 0 8px}
  .fp-model .st p{font-size:14.5px;line-height:1.4}
  .fp-model .st .spec{margin-top:10px;gap:6px 20px}
  .fp-model .st .spec b{font-size:16px}
  .fp-built{right:var(--g);left:var(--g);bottom:auto;top:calc(44svh - var(--e,0)*35svh);width:auto}
  .fp-built .fr{aspect-ratio:calc(2 - var(--e,0)*1.18)}
  .fp-built .fr{clip-path:polygon(12px 0,100% 0,100% calc(100% - 24px),calc(100% - 12px) 100%,0 100%,0 24px)}
  .fp-built .fp-lab span:last-child{display:none}
  .fp-model .intro h2{font-size:clamp(46px,14.5vw,84px)}
  .fp-end .film{aspect-ratio:4/5}
  .fp-cred{grid-template-columns:1fr 1fr}
  .fp-head{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.fp-hero .src i,.fp-cue{animation:none}}

.fp-model .chap{position:absolute;left:var(--g);top:clamp(78px,11vh,112px);z-index:4}
.fp-model .fp-ticks i{width:20px}
@media (max-width:760px){.fp-model .chap{top:64px}.fp-model .fp-ticks{top:64px}.fp-model .fp-ticks i{width:12px}.fp-reel .n{top:64px}.fp-ticks{top:64px}}
@media (max-width:760px){.fp-model .chap .x{display:none}}

/* whole artworks inside the built card and the reel */
.fp-built .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.fp-reel .ly img.ps.whole{object-fit:contain;background:#000}
.fp-mid{padding-top:0;padding-bottom:clamp(30px,6vh,70px)}
@media (max-width:760px){.fp-reel .ly img.ps{inset:0 0 auto 0;height:66svh}}
.fp-hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.fp-hero .btns .fp-play+.fp-play{border-color:rgba(255,255,255,.55)}
@media (max-width:760px){.fp-dim{font-size:11px;padding:5px 7px}.fp-model .st h3{text-wrap:balance}}

/* round 3: title arrives after the first shot registers; bigger facts; phone stage recomposed */
@keyframes fpin{from{opacity:0;transform:translateY(.12em)}to{opacity:1;transform:none}}
.fp-hero h1{animation:fpin 1.1s 1.5s both cubic-bezier(.2,.8,.2,1)}
.fp-hero .row{animation:fpin .9s 2.1s both cubic-bezier(.2,.8,.2,1)}
.fp-dim{font-size:13px}
.fp-dim.big{font:500 clamp(18px,1.7vw,26px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;padding:9px 13px}
.fp-plates figure.pick figcaption b::after{content:"Chosen";margin-left:10px;padding:3px 8px;border:1px solid #fff;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.fp-built .fr{clip-path:polygon(calc(14px + var(--e,0)*18px) 0,100% 0,100% calc(100% - 28px - var(--e,0)*36px),calc(100% - 14px - var(--e,0)*18px) 100%,0 100%,0 calc(28px + var(--e,0)*36px))}
@media (max-width:760px){
  .fp-dim.more{display:none}
  .fp-dim{font-size:12px}
  .fp-dim.big{font-size:18px}
  .fp-plates .lead h2{font-size:clamp(52px,15.5vw,84px)}
  .fp-built{top:calc(40svh - var(--e,0)*32svh)}
  .fp-built .fr{aspect-ratio:calc(2 - var(--e,0)*1.18);clip-path:polygon(12px 0,100% 0,100% calc(100% - 24px),calc(100% - 12px) 100%,0 100%,0 24px)}
  .fp-model .st{bottom:auto;top:calc(40svh + 46vw + 44px)}
  .fp-model .st h3{font-size:clamp(34px,10.4vw,50px);margin:6px 0 8px}
  .fp-model .st p{font-size:15.5px;line-height:1.4}
  .fp-model .st .spec b{font-size:18px}
  .fp-model .veil{background:linear-gradient(0deg,#000 0,#000 38%,rgba(0,0,0,0) 62%)}
}
@media (prefers-reduced-motion:reduce){.fp-hero h1,.fp-hero .row{animation:none}}

/* round 4: supporting text carries its weight */
.fp-lab{font-size:12.5px}
.fp-model .st .spec span{font-size:12.5px}
.fp-plates figcaption{font-size:16px}
.fp-plates figcaption b{font-size:20px}
.fp-plates figure.pick figcaption b::after{background:#fff;color:#000;font-size:12px;padding:4px 9px}
.fp-say .facts div{font-size:15px}
.fp-cred div{font-size:16px}
.fp-dim.huge{font:500 clamp(30px,3.6vw,58px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.02em;text-transform:none;padding:12px 18px;border-color:#fff}
.fp-end.fin{padding-top:clamp(36px,7vh,80px)}
@media (max-width:760px){
  .fp-plates .trk{align-items:center;padding-bottom:9svh}
  .fp-plates figcaption{font-size:15px}
  .fp-plates figcaption b{font-size:19px}
  .fp-dim.huge{font-size:26px}
}

/* keyboard focus, short phones */
.fp a:focus-visible,.fp button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.fp-end .film:focus-visible{outline-offset:-6px}
@media (max-width:760px) and (max-height:720px){
  .fp-built{top:calc(34svh - var(--e,0)*26svh)}
  .fp-built .fr{aspect-ratio:calc(2.5 - var(--e,0)*1.5)}
  .fp-model .st{top:calc(34svh + 37vw + 34px)}
  .fp-model .st h3{font-size:30px;margin:4px 0 6px}
  .fp-model .st p{font-size:14px;line-height:1.35}
  .fp-model .st .spec{margin-top:8px}
  .fp-model .st .spec b{font-size:15px}
  .fp-hero h1{font-size:clamp(72px,25vw,130px)}
  .fp-reel .cap h3{font-size:clamp(44px,14vw,70px)}
}

/* ===== approved targeted changes, 11 Oct ===== */
/* the built result: a whole-scene cut, model then film, never a card */
.fp-built,.fp-built.on{inset:0;left:0;right:0;top:0;bottom:0;width:auto;transform:none;transition:none;opacity:0;visibility:hidden;z-index:3;background:#000}
.fp-built.cut{opacity:1;visibility:visible}
.fp-built .fr{position:absolute;inset:0;aspect-ratio:auto;clip-path:none;box-shadow:none;background:#000}
.fp-built .fr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 100%);pointer-events:none}
.fp-built .fr img.cover{object-fit:cover}
.fp-built.native .fr video{inset:auto;left:50%;top:44%;transform:translate(-50%,-50%);width:min(848px,90vw);height:auto;object-fit:contain}
.fp-built.native .fr::after{display:none}
.fp-built.whole .fr{inset:13vh var(--g) 13vh 40vw}
.fp-built.whole .fr::after{display:none}
.fp-built .fp-lab,.fp-model .kind{position:absolute;right:var(--g);top:calc(clamp(78px,11vh,112px) + 22px);margin:0;display:block;text-align:right;z-index:6}
.fp-built .fp-lab span{display:block}.fp-built .fp-lab span+span{margin-top:4px}
.fp-stick.is-cut .kind{opacity:0}
.fp-model .st{z-index:5}
.fp-stick.is-cut .st .spec{opacity:0}
/* the opening on our own wide film, whole, at its real shape */
.fp-hero.band{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:clamp(70px,10vh,104px) 0 clamp(22px,4vh,44px)}
.fp-hero.band::after{display:none}
.fp-hero.band .hd{padding:0 var(--g);display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.fp-hero.band h1{font-size:clamp(72px,11.5vw,190px);line-height:.82;margin:10px 0 0 -.045em;animation:none}
.fp-hero.band .film{position:relative;margin:clamp(18px,3.4vh,40px) 0;width:100%;aspect-ratio:2816/648;background:#000;overflow:hidden}
.fp-hero.band .film .v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fp-hero.band .lo{padding:0 var(--g);display:flex;justify-content:space-between;gap:28px;align-items:flex-start;flex-wrap:wrap;animation:none}
.fp-hero.band .lo p.big{font:500 clamp(22px,2.1vw,34px)/1.1 "Jost",system-ui,sans-serif;letter-spacing:-.02em;margin:12px 0 10px}
.fp-hero.band .test{display:flex;gap:22px;align-items:flex-start}
.fp-hero.band .test figure{margin:0;width:min(340px,42vw)}
.fp-hero.band .test video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#111}
.fp-hero.band .test figcaption{margin-top:8px}
/* artworks whole, one under the other: no sideways gallery */
.fp-plates.stack{height:auto}
.fp-plates.stack .fp-stick{position:static;height:auto;overflow:visible}
.fp-plates.stack .trk{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(40px,7vh,90px) var(--g);padding:clamp(80px,14vh,170px) var(--g) clamp(40px,8vh,90px);height:auto;align-items:start}
.fp-plates.stack .lead{width:auto;position:sticky;top:110px;grid-row:1 / span 9}
.fp-plates.stack figure{width:auto;grid-column:2}
.fp-plates.stack figure img,.fp-plates.stack figure.tall img{height:auto;width:100%;max-width:100%;max-height:none}
.fp-plates.stack figure.tall img{width:auto;max-height:86vh}
.fp-plates.stack.three .trk{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-plates.stack.three .lead{grid-column:1 / -1;grid-row:auto;position:static;max-width:780px}
.fp-plates.stack.three figure{grid-column:auto}.fp-plates.stack.three figure.tall img{width:100%;max-height:none}
/* released: the finished film and the campaign artwork, whole */
.fp-rel{padding:clamp(80px,14vh,170px) var(--g) clamp(30px,6vh,70px)}
.fp-rel .tv{position:relative;display:block;width:100%;border:0;padding:0;background:#000;color:#fff;cursor:pointer}
.fp-rel .tv img{width:100%;height:auto;display:block}
.fp-rel .tv .go{position:absolute;right:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,48px);width:clamp(56px,6vw,96px);aspect-ratio:1;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35)}
.fp-rel .tv .go::before{content:"";border-left:clamp(14px,1.5vw,22px) solid #fff;border-top:clamp(9px,1vw,14px) solid transparent;border-bottom:clamp(9px,1vw,14px) solid transparent;margin-left:5px}
.fp-rel .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,4vh,40px)}
.fp-rel .hd h2{font-size:clamp(44px,8.4vw,150px);line-height:.9;letter-spacing:-.04em}
.fp-rel .set{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:var(--g);align-items:end;margin-top:clamp(28px,5vh,56px)}
.fp-rel .set figure{margin:0}.fp-rel .set img{width:100%;height:auto;display:block}.fp-rel .set figcaption{margin-top:10px}
.fp-rel .ctx{display:flex;gap:16px;align-items:flex-end;margin-top:clamp(28px,5vh,56px);opacity:.92}
.fp-rel .ctx img{height:150px;width:auto;display:block}
@media (max-width:760px){
  .fp-built.whole .fr{inset:12svh var(--g) 42svh var(--g)}
  .fp-model .st{top:auto;bottom:16px}
  .fp-model .veil{background:linear-gradient(0deg,#000 0,rgba(0,0,0,.9) 30%,rgba(0,0,0,0) 56%)}
  .fp-built .fr::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,.92) 72%)}
  .fp-built .fp-lab,.fp-model .kind{top:88px}
  .fp-hero.band h1{font-size:clamp(72px,24vw,130px)}
  .fp-hero.band .hd .r{display:none}
  .fp-hero.band .test{flex-direction:column;width:100%}.fp-hero.band .test figure{width:100%}
  .fp-plates.stack .trk,.fp-plates.stack.three .trk{grid-template-columns:1fr;padding-top:72px}
  .fp-plates.stack .lead{position:static;grid-row:auto}.fp-plates.stack figure{grid-column:auto}
  .fp-rel .set{grid-template-columns:1fr 1fr}.fp-rel .set figure:first-child{grid-column:1 / -1}
}
@media (max-width:760px) and (max-height:720px){.fp-model .st{top:auto;bottom:12px}}
.fp-hero.band h1{font-size:clamp(72px,9vw,150px)}
.fp-hero.band .film{margin:clamp(14px,2.4vh,26px) 0}
.fp-hero.band .lo>div:first-child{flex:1 1 300px;min-width:0}
.fp-hero.band .test{flex:0 0 auto}
.fp-hero.band .test figure{width:min(300px,40vw)}
@media (max-width:760px){.fp-hero.band .test{flex:1 1 100%}.fp-hero.band .test figure{width:100%}.fp-hero.band h1{font-size:clamp(72px,24vw,130px)}}
@media (max-width:760px){.fp-model .kind .x{display:none}}
.fp-player video:focus-visible,.fp-player button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
a.fp-play{text-decoration:none}

/* ===== repair pass, 11 Oct night ===== */
/* reduced motion: nothing eases or slides anywhere in the model journey */
@media (prefers-reduced-motion:reduce){.fp-model .st,.fp-model .st.on,.fp-built,.fp-built.on,.fp-dim,.fp-model .intro,.fp-next b,.fp-end .film video,.fp-end .film img,.hdr{transition:none!important}.fp-model .st{transform:none!important}}
.fp-hero.band .whole{margin-top:14px}
@media (max-width:760px){
  /* the model sits closer to its copy; dimensions are quiet details, not headlines */
  .fp-model .veil{background:linear-gradient(0deg,#000 0,rgba(0,0,0,.92) 24%,rgba(0,0,0,0) 44%)}
  .fp-dim.big,.fp-dim.huge{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-color:rgba(255,255,255,.4)}
  .fp-model .st .spec{gap:4px 18px}.fp-model .st .spec span{font-size:11px}.fp-model .st .spec b{font-size:15px}
  .fp-built.whole .fr{inset:11svh var(--g) 35svh var(--g)}
  .fp-built.whole .fr img{object-position:50% 100%}
  /* the wall film keeps the lead over the phone-quality test clip */
  .fp-hero.band .test figure{width:64%}
}

/* ===== reading pass, 12 Oct ===== */
/* 1 · reel captions: one readable caption at every scroll position, above the wipe */
.fp-reel .caps{position:absolute;inset:0;z-index:4;pointer-events:none}
.fp-reel .capset{position:absolute;inset:0;opacity:0;visibility:hidden}
.fp-reel .capset.on{opacity:1;visibility:visible}
.fp-reel .cap h3{opacity:1!important}
/* 2 · the play circle keeps its own space beside the title */
.fp-end .film .t{right:calc(clamp(28px,5vw,84px) + clamp(56px,6vw,96px) + 18px)}
.fp-end .film .t>b{overflow-wrap:break-word}
/* 3 · provenance stays readable: a firmer top gradient on film openings, and whole artworks start below their label */
.fp-hero:not(.band)::after{background:linear-gradient(180deg,rgba(0,0,0,.74) 0,rgba(0,0,0,.34) 13%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 46%,rgba(0,0,0,.78) 100%)}
.fp-hero .top .src,.fp-hero .top .fp-lab{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 16px rgba(0,0,0,.75)}
.fp-built.whole .fr{inset:calc(clamp(78px,11vh,112px) + 86px) var(--g) 11vh 40vw}
@media (max-width:760px){
  .fp-built.whole .fr{inset:150px var(--g) 35svh var(--g)}
  .fp-end .film .t{right:calc(28px + 56px + 14px)}
  .fp-end .film .t>b{font-size:clamp(28px,8.6vw,44px)}
}
/* the source line sits above the opening's gradient, like the title block already does */
.fp-hero .top{z-index:3}

/* header matched to the main pages (height, weight, tone), so it does not jump between a main page and a case; values agreed with the Web Intro session, 12 Oct */
.fp .hdr{padding:14px var(--g);min-height:70px;box-sizing:border-box}
.fp .hdr .pill,.fp .hdr .brand,.fp .hdr .brand .mk,.fp .hdr .nav a,.fp .hdr .menu-btn{color:#F7F5F1}
.fp .hdr .nav a{font-weight:400}
.fp .hdr .menu-btn{font-weight:400}
@media (max-width:760px){.fp .hdr{padding:10px var(--g);min-height:73px}}

/* an opening that is a released film shown whole: full-bleed on wide screens, the whole frame above the title on phones (never a slice of its titles) */
@media (max-width:760px){
  .fp-hero.whole .v{inset:auto;left:0;top:104px;width:100%;height:auto;aspect-ratio:1200/510;object-fit:contain}
  .fp-hero.whole .fp-cue{display:none}
  .fp-hero.whole::after{background:none}
  .fp-hero.whole .in{justify-content:flex-start;padding-top:calc(104px + 42.5vw + 26px)}
  .fp-hero.whole h1{animation:none}
  .fp-hero.whole .row{animation:none}
}

/* the result: a few large figures, with their source */
.fp-res{padding:clamp(70px,12vh,150px) var(--g) clamp(30px,6vh,70px)}
.fp-res .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,5vh,56px)}
.fp-res .hd h2{font-size:clamp(44px,8.4vw,150px);line-height:.9;letter-spacing:-.04em}
.fp-res .nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(22px,3vw,48px) var(--g);border-top:1px solid var(--line);padding-top:clamp(22px,4vh,40px)}
.fp-res .nums b{display:block;font:500 clamp(40px,5.6vw,104px)/.95 "Jost",system-ui,sans-serif;letter-spacing:-.04em}
.fp-res .nums span{display:block;margin-top:12px;font-size:clamp(14px,1.1vw,17px);line-height:1.4;color:rgba(255,255,255,.82);max-width:16em}
.fp-res .src{display:block;margin-top:clamp(26px,5vh,48px);max-width:60em;line-height:1.6}
@media (max-width:1100px){.fp-res .nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fp-res .nums{grid-template-columns:1fr 1fr}.fp-res .nums b{font-size:clamp(40px,13vw,64px)}}
.fp-res .nums{grid-template-columns:minmax(0,1.9fr) repeat(4,minmax(0,1fr))}
.fp-res .nums b{font-size:clamp(40px,5vw,92px)}
@media (max-width:1100px){.fp-res .nums{grid-template-columns:repeat(2,minmax(0,1fr))}.fp-res .nums div:first-child{grid-column:1 / -1}}
@media (max-width:760px){.fp-res .nums b{font-size:clamp(40px,13vw,64px)}}
/* the wide wall film as a section under the opening: same heading size, as an h2 */
.fp-hero.band h2{font-size:clamp(72px,9vw,150px);line-height:.82;letter-spacing:-.045em;font-weight:500;margin:10px 0 0 -.045em}
@media (max-width:760px){.fp-hero.band h2{font-size:clamp(56px,19vw,110px)}}
/* the longer story, closed until asked for: one line and one fact stay on the screen */
.fp-more{margin-top:clamp(24px,4.5vh,48px);max-width:68em}
.fp-more summary{display:inline-flex;align-items:center;gap:14px;cursor:pointer;list-style:none;min-height:44px;font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.fp-more summary::-webkit-details-marker{display:none}
.fp-more summary::after{content:"+";font:400 20px/1 "Jost",system-ui,sans-serif;letter-spacing:0}
.fp-more[open] summary::after{content:"\2013"}
.fp-more summary:focus-visible{outline:2px solid #fff;outline-offset:6px}
.fp-more .tx{margin-top:clamp(22px,4vh,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vh,40px) var(--g)}
.fp-more .tx .fp-lab{display:block;margin-bottom:12px}
.fp-more .tx p{margin:0 0 12px;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.82);max-width:34em}
@media (max-width:760px){.fp-more .tx{grid-template-columns:1fr}}

/* ---------- type system, as on the main pages (assets/type.css; Tony, 12 Oct: "all of them are very thin") ----------
   Two families, five styles: Jost Light 300 the quiet part of a big title (40 px and up) · Jost Semibold 600 the point of a
   title, names, numbers, calls to action · Jost Medium 500 titles of lists · Inter Regular 400 reading · Inter Semibold 600 labels.
   A title is light with its last phrase bold (b.tw); a one-phrase title is bold whole. */
.fp{font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.fp h1,.fp h2,.fp h3{text-wrap:balance}
.fp p,.fp figcaption{text-wrap:pretty}
/* names lead */
.fp-hero h1{font-weight:600}
/* section titles: light, the last phrase bold */
.fp-plates .lead h2,.fp-model .intro h2{font-weight:300}
.fp b.tw{font-weight:600;letter-spacing:-.05em}
.fp-hero.band h2,.fp-rel .hd h2,.fp-res .hd h2{font-weight:600}
/* the statement: what it was, light; what I did, bold */
.fp-say h2{font-weight:300}
.fp-say h2 em{font-weight:600;color:#fff}
@media (max-width:889px){.fp-say h2{font-weight:400}}
/* the name of each piece, each night, each call */
.fp-model .st h3,.fp-reel .cap h3,.fp-end .film .t>b,.fp-next b,.fp-play{font-weight:600}
/* numbers: Semibold, lining and tabular */
.fp-res .nums b,.fp-model .st .spec b,.fp-say .facts b,.fp-dim.big,.fp-dim.huge{font-weight:600;font-variant-numeric:lining-nums tabular-nums}
/* small labels: Inter Semibold */
.fp-lab,.fp-hero .src,.fp-play small,.fp-model .st .spec span,.fp-more summary,.fp-player button{font-weight:600}
/* titles of lists: Medium */
.fp-plates figcaption b,.fp-hero .what strong{font-weight:500}
/* more of the same record, in the same place, closed until asked for */
.fp-res .fp-more{max-width:none}
.fp-res .fp-more .nums{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(22px,4vh,40px)}
.fp-res .fp-more .nums b{font-size:clamp(34px,4vw,72px)}
@media (max-width:760px){.fp-res .fp-more .nums{grid-template-columns:1fr 1fr}}
.fp-res .fp-more .nums div:first-child{grid-column:auto}
/* a film layer shown whole: never a slice of it */
.fp-reel .ly video.whole{object-fit:contain;background:#000}
/* a film layer shown whole is never pushed past the frame by the wipe (it was scaled 6% and lost its edges) */
.fp-reel .ly video.whole{transform:none!important}
/* a whole picture in a reel is never scaled or slid past its frame (it was scaled 1.06 and lost its edges) */
.fp-reel .ly img.ps.whole{transform:none!important}
/* T-16: every film and picture is shown whole at every window shape; nothing is cover-cropped by the page */
.fp-hero .v,.fp-built .fr video,.fp-built .fr img,.fp-reel .ly video,.fp-reel .ly img.ps,.fp-end .film video,.fp-end .film img,.fp-cred figure img{object-fit:contain!important;background:#000}
.fp-end .film{aspect-ratio:16/9}