/* v2 inner-page layouts (job L): Studio as full-width spreads, Labs index as an image-led grid, case pages without empty columns.
   Loaded after rb-v2.css. Same words and images as before; only the layout changes. */

/* ---------- Studio ---------- */
/* Everything is lit at rest: no lamp-on reveal while scrolling (content stays visible in captures and without scrolling) */
html.js:not(.reduced-motion) .st-piece.st-wait .st-frame{filter:none}
html.js:not(.reduced-motion) .st-piece.st-wait .st-plaque>*{opacity:1;transform:none}
html.js:not(.reduced-motion) .st-piece.st-wait .st-pool{opacity:1}

@media (min-width:1000px){
  .st-head .page-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  .st-head .st-h1{grid-column:1/-1}
  .st-head .st-artist{grid-column:1;margin:0}
  .st-head .st-index{grid-column:2;justify-self:end;margin:0;border-top:0;padding-top:0;flex-wrap:nowrap;white-space:nowrap}
  .st-pieces{display:flex;flex-direction:column;gap:clamp(96px,10vw,160px)}
  /* one spread per piece: the large photograph across seven columns, the plaque beside it, alternate sides */
  .st-art{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);row-gap:clamp(16px,1.6vw,24px);align-items:end}
  .st-piece .st-stage,.st-piece.has-portrait .st-stage{grid-column:1/span 7;grid-row:1;margin:0}
  .st-piece .st-plaque,.st-piece.has-portrait .st-plaque{grid-column:8/span 5;grid-row:1;align-self:start;padding-bottom:0;position:sticky;top:calc(var(--head-h,72px) + 40px)}
  .st-piece.is-flip .st-stage,.st-piece.has-portrait.is-flip .st-stage{grid-column:6/span 7;grid-row:1}
  .st-piece.is-flip .st-plaque,.st-piece.has-portrait.is-flip .st-plaque{grid-column:1/span 5;grid-row:1}
  .st-stage.is-portrait .st-frame{aspect-ratio:4/5;overflow:hidden}
  .st-stage.is-portrait .st-frame .st-img{width:100%;height:100%;object-fit:cover}
  .st-plaque .st-title{font-size:clamp(2.5rem,3.6vw,3.75rem);line-height:1;margin:.2em 0 .45em}
  .st-plaque .st-text{font-size:1.1875rem;line-height:1.5;max-width:30rem}
  /* the other photographs: one full-width strip of equal height under the spread */
  .st-more{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;gap:clamp(10px,1vw,16px);margin:0;align-items:stretch;height:clamp(220px,22vw,330px)}
  .st-more li,.st-more li.is-land{width:auto;min-width:0;height:100%}
  .st-more li.is-port{flex:.8 1 0}
  .st-more li.is-land{flex:1.7 1 0}
  .st-more figure{height:100%;position:relative}
  .st-more .st-img{width:100%;height:100%;object-fit:cover;display:block}
  .st-more .st-cap{position:absolute;left:0;bottom:0;margin:0;padding:6px 10px;background:rgba(8,8,8,.72)}
  /* replicas: one row of six, the full width */
  .st-replicas-inner{max-width:var(--content-max,1240px);padding-left:max(var(--section-pad-x),env(safe-area-inset-left));padding-right:max(var(--section-pad-x),env(safe-area-inset-right));display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  .st-replicas-inner .st-h2{grid-column:1;margin-bottom:0}
  .st-replicas-text{grid-column:1;margin:0}
  .st-replicas-enquiry{grid-column:2;grid-row:1/span 2;justify-self:end;align-self:end;margin:0}
  .st-replicas-grid{grid-column:1/-1;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(28px,3vw,44px)}
}

/* ---------- Labs index ---------- */
/* The UI Vault leads with its own screenshot; every note leads with its two copied numbers, then the title */
html body .labs-list{display:grid!important;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,48px)}
html body .labs-note{display:flex;flex-direction:column}
.labs-note .acc{order:-2}
.labs-note .labs-nums{order:-1;margin:14px 0 18px;gap:12px clamp(16px,2vw,32px);flex-wrap:nowrap}
.labs-note .labs-num{min-width:0}
.labs-note .labs-num dd{color:var(--red,#e2422e);font-size:clamp(2.25rem,2.2vw + .9rem,3.25rem);white-space:nowrap}
.labs-note .labs-num dt{opacity:1;color:var(--ink-3,#a3a7a7)}
.labs-note .h3-like{font-size:clamp(1.2rem,.6vw + 1rem,1.45rem);line-height:1.22;margin:0 0 .6em}
.labs-note .labs-finding{font-size:1rem;line-height:1.55;color:var(--ink-2,#c9cdcd)}
.labs-note .labs-ev{margin-top:auto;padding-top:8px}
.labs-shot{margin:18px 0 0;border:1px solid var(--line,#212121);border-radius:6px;overflow:hidden;background:#0b0b0b}
.labs-shot img{display:block;width:100%;height:auto}
@media (min-width:700px){html body .labs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){html body .labs-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:700px){
  html body .labs-list>.labs-note:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:48px!important}
  html body .labs-list>.labs-note:first-child>*{grid-column:1}
  html body .labs-list>.labs-note:first-child .h3-like{font-size:clamp(1.8rem,2.2vw + .6rem,2.6rem);margin-top:10px}
  html body .labs-list>.labs-note:first-child .labs-shot{grid-column:2;grid-row:1/span 4;margin:0}
}

/* ---------- Case pages ---------- */
/* Gallery and pager paint like the rest of the page: content-visibility skipped them in full-page captures and its
   900 px placeholder did not match the real height */
html.js .pf-casepage .pf-gallery,html.js .pf-casepage .pf-pager{content-visibility:visible;contain-intrinsic-size:none}
@media (min-width:1100px){
  /* credits on the left; the lead paragraph across the rest; notes and "What we built" side by side under it */
  .pf-main{display:flow-root}
  .pf-main>*{margin-left:calc(50% + clamp(16px,1.75vw,28px))}
  .pf-main>.pf-case-text{margin-left:0}
  .pf-main>.pf-notes{float:left;width:calc(50% - clamp(16px,1.75vw,28px));margin-left:0;margin-top:0}
  .pf-main>.pf-notes:only-child,.pf-main>.pf-notes:last-child{float:none;width:auto}
  .pf-main>.pf-h2:first-of-type,.pf-main>.pf-latest{margin-top:0}
  .pf-main>.pf-notes>p:first-child{margin-top:0}
  .pf-main>.pf-latest+.pf-h2{margin-top:1.8em}
  .pf-main .pf-latest-list li{grid-template-columns:7.5rem 1fr}
}

/* ---------- Work index ---------- */
/* Two columns on desktop instead of eight cards each a full screen tall */
@media (min-width:1100px){
  html .pf-index .pf-grid,html.pf-3d .pf-index .pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,3.5vw,56px);row-gap:clamp(56px,6vw,88px)}
  html .pf-index .pf-grid .pf-card,html.pf-3d .pf-index .pf-grid .pf-card{grid-column:auto!important;margin-top:0!important;height:auto;min-height:0;display:block;text-align:left}
  html.pf-3d .pf-index .pf-grid .pf-card .pf-card-meta{justify-content:flex-start}
}

/* Replicas case: the six pieces from the Studio page, as a grid */
.pf-rep-grid{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pf-rep-grid figure{margin:0}
.pf-rep-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--line,#212121);border-radius:4px;background:#0b0b0b}
.pf-rep-grid figcaption{margin-top:8px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2,#c9cdcd)}
.pf-rep-grid figcaption span{color:var(--red,#e2422e);margin-right:6px}
.pf-rep-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.pf-rep-more{display:inline-flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (min-width:700px){.pf-rep-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Contact ---------- */
/* The address fits on one line from 360 px instead of breaking inside the domain */
.contact-grid .ctl-mail{font-size:clamp(.75rem,calc((100vw - 66px) / 19),1rem);padding:0 12px;white-space:nowrap}
@media (max-width:339px){.contact-grid .ctl-mail{white-space:normal}}
/* The brief leads: one pre-filled email (subject plus the five questions as headings), the questions as a numbered sheet */
.ct-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.ct-brief{gap:10px;font-weight:600}
.ct-act-note{font-size:.9375rem;color:var(--ink-3,#a3a7a7);max-width:30ch}
.ct-card{border-color:var(--line-strong,#3a3a3a);background:linear-gradient(180deg,rgba(226,66,46,.06),transparent 40%)}
.ct-qs{list-style:none;margin:0;padding:0;counter-reset:none}
.ct-qs li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:baseline;border-top:1px solid var(--line,#212121);padding:14px 0;font-size:1.0625rem;line-height:1.45;color:var(--ink-2,#c9cdcd)}
.ct-qs li:first-child{border-top:0}
main .ct-qs li span:last-child{max-width:40ch}
.ct-n{color:var(--red,#e2422e);font-size:.875rem;letter-spacing:.08em}
.ct-card-act{margin:18px 0 0}
@media (min-width:881px){.contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.ct-card{padding:clamp(28px,3vw,40px)}}

/* Phones: the film Pause control sits under the film, not on the picture */
@media (max-width:760px){.pf-casepage .pf-hero-frame{overflow:visible;margin-bottom:56px}.pf-casepage .pf-hero-frame>video,.pf-casepage .pf-hero-frame>img{border-radius:inherit}html body.pf-casepage .pf-play{top:auto!important;right:0!important;bottom:-54px!important}}

/* Capabilities: the four method steps stack on phones instead of a sideways strip cut mid-word */
@media (max-width:760px){#method .method{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important;overflow:visible!important;gap:14px;scroll-snap-type:none}#method .method .step{width:auto!important;min-width:0!important;max-width:none!important;flex:none}}

/* Labs index at three columns: seven notes as 2 + 3 + 2 (the newest and the oldest note take two columns), no orphan card */
@media (min-width:1100px){html body .labs-list>.labs-note:nth-child(2):nth-last-child(7),html body .labs-list>.labs-note:last-child:nth-child(8){grid-column:span 2}html body .labs-list>.labs-note:nth-child(2):nth-last-child(7) .labs-finding,html body .labs-list>.labs-note:last-child:nth-child(8) .labs-finding{max-width:44rem}}

/* ---------- Cable endline (job M): the second, smaller use of the signature ----------
   A run of the mark's tiles ends in its plug beside "Discuss your project". When the line first scrolls into view the
   slack cable pulls taut and the plug seats into the button (CSS transitions, once; nothing runs at rest).
   No JS, reduced motion or Lite: drawn seated from the start. */
.rb-endline{border-top:1px solid var(--line,#212121);padding:clamp(48px,6vw,88px) var(--pad-x,20px) clamp(56px,7vw,96px)}
.rb-endline .wrap{max-width:var(--max,1240px);margin:0 auto;padding:0;display:grid;gap:28px;align-items:center}
.rb-endline-t{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,2.6vw + .8rem,3rem);line-height:1;letter-spacing:-.03em}
.rb-endline-t em{font-style:normal;color:var(--red,#e2422e)}
.rb-endline-row{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
.rb-ec{display:flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;overflow:visible}
.rb-ec i{display:block;flex:none;width:13px;height:13px;transform:translateY(calc(var(--s) * var(--sag,7px))) rotate(calc(var(--a,0deg) * var(--tk,1)));transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 28ms)}
.rb-ec{padding-bottom:12px}.rb-endline{--sag:10px;--tk:1.4}
.rb-ep{display:block;flex:none;margin-left:4px;transition:transform .5s cubic-bezier(.2,.8,.2,1) .36s}
.rb-socket{position:relative;margin-left:-1px;border-top-left-radius:6px;border-bottom-left-radius:6px;gap:10px}
.rb-sock-dot{width:8px;height:8px;border-radius:50%;background:#3fbf6a;flex:none;transition:background-color .2s linear .8s}
html:not(.reduced-motion) .rb-endline.is-armed:not(.is-on) .rb-ec i{transform:translateY(calc(var(--s) * var(--sag2,26px))) rotate(calc(var(--a,0deg) * var(--tk,1) * 3.4))}
html:not(.reduced-motion) .rb-endline.is-armed:not(.is-on) .rb-ep{transform:translate(-26px,14px) rotate(-14deg)}
html:not(.reduced-motion) .rb-endline.is-armed:not(.is-on) .rb-sock-dot{background:var(--line-strong,#3a3a3a);transition:none}
@media (prefers-reduced-motion:reduce){.rb-ec i,.rb-ep{transition:none!important}.rb-ep{transform:none!important}.rb-ec i{transform:translateY(calc(var(--s) * var(--sag,7px))) rotate(calc(var(--a,0deg) * var(--tk,1)))!important}.rb-sock-dot{transition:none!important;background:#3fbf6a!important}}
@media (max-width:520px){.rb-ec i:nth-child(n+6){display:none}}
@media (min-width:900px){.rb-endline .wrap{grid-template-columns:minmax(0,1fr) auto;column-gap:48px}}

/* ---------- Case pages, job M: an exhibit, not a grid ----------
   The copied facts sit at the top of the credits plaque (like the Studio plaques) instead of a four-across stat band;
   the hero film runs edge to edge; each desktop screen is shown with its phone screen standing in front of it,
   pairs alternate sides; the pager leads with the next project. */
.pf-plaque-facts{list-style:none;margin:0 0 28px;padding:0 0 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;border-bottom:1px solid var(--line,#212121)}
.pf-plaque-facts .pf-fact,.pf-plaque-facts .pf-fact+.pf-fact{padding:0;border:0!important;display:flex;flex-direction:column;gap:4px}
.pf-plaque-facts .pf-fact:only-child{grid-column:1/-1}
.pf-plaque-facts .pf-fact-v{font-family:var(--font-display);font-weight:700;font-size:clamp(2.25rem,1.6vw + 1.4rem,3.25rem);line-height:.95;letter-spacing:-.03em;color:var(--red,#e2422e);text-transform:none}
.pf-plaque-facts .pf-fact-l{font-size:.8125rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,#c9cdcd)}
@media (max-width:880px){.pf-casepage .pf-body-grid{display:flex;flex-direction:column}.pf-casepage .pf-aside{display:contents}.pf-casepage .pf-plaque-facts{order:-1;margin-bottom:8px}.pf-casepage .pf-aside>.pf-h2,.pf-casepage .pf-aside>.pf-credits{order:2}.pf-casepage .pf-aside>.pf-h2{margin-top:24px}}
@media (min-width:900px){
  .pf-casepage .pf-hero-wrap{padding-inline:0}
  .pf-casepage .pf-hero-frame{border-radius:0;border-left:0;border-right:0;max-height:88vh}
  .pf-casepage .pf-case-text{font-size:clamp(1.35rem,.7vw + 1rem,1.65rem);line-height:1.42;max-width:44ch}
  .pf-casepage .pf-stills{grid-auto-flow:row dense;row-gap:clamp(36px,4vw,64px);column-gap:clamp(16px,2vw,28px);align-items:start}
  /* a desktop screen and its phone screen: the phone stands in front of the lower corner */
  .pf-casepage .pf-still.g-8{grid-column:1/span 8}
  .pf-casepage .pf-still.is-portrait.g-4{grid-column:9/span 3;position:relative;z-index:2;margin-top:clamp(48px,6vw,104px);transform:translateX(-34%)}
  .pf-casepage .pf-still.g-8:nth-child(4n+3){grid-column:5/span 8}
  .pf-casepage .pf-still.is-portrait.g-4:nth-child(4n+4){grid-column:2/span 3;transform:translateX(34%)}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-box{box-shadow:0 30px 60px rgba(0,0,0,.6);border-radius:14px;overflow:hidden}
  /* two of a kind: side by side, the second set lower */
  .pf-casepage .pf-still.g-6{grid-column:span 6}
  .pf-casepage .pf-still.g-6+.pf-still.g-6{margin-top:clamp(32px,4vw,64px)}
  .pf-casepage .pf-still.g-12{grid-column:2/span 10}
  /* the pager leads with what comes next */
  .pf-casepage .pf-pager{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .pf-casepage .pf-pager-link.is-prev .pf-pager-t{font-size:clamp(1.25rem,1.4vw,1.6rem)}
  .pf-casepage .pf-pager-link.is-next{min-height:clamp(320px,34vw,520px)}
}
@media (min-width:900px){
  .pf-casepage .pf-still.is-portrait.g-4{display:block}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-box{aspect-ratio:9/16;flex:none;width:100%;max-height:none;position:relative}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-link{display:block;position:absolute;inset:0}
}
@media (min-width:900px){.pf-casepage .pf-still.g-8:nth-child(4n+3) .pf-still-cap{text-align:right;align-self:flex-end}.pf-casepage .pf-still.g-8:nth-child(4n+3) .pf-still-fig{display:flex;flex-direction:column}}
.pf-casepage .pf-plaque-facts .pf-fact-l{font-family:var(--font-mono,"IBM Plex Mono",monospace);font-size:.75rem!important;line-height:1.4!important;letter-spacing:.06em!important}.pf-casepage .pf-plaque-facts .pf-fact-v{font-size:clamp(2.25rem,1.6vw + 1.4rem,3.25rem)!important;line-height:.95!important}
/* Studio, tablets and wide phones (560 to 999): the other photographs as one row of equal height, not stacked full width */
@media (min-width:560px) and (max-width:999px){
  .st-more{display:flex;flex-wrap:nowrap;align-items:stretch;height:clamp(200px,34vw,320px)}
  .st-more li,.st-more li.is-land{width:auto;min-width:0;height:100%}
  .st-more li.is-port{flex:.8 1 0}.st-more li.is-land{flex:1.6 1 0}
  .st-more figure{height:100%;position:relative}
  .st-more .st-img{width:100%;height:100%;object-fit:cover;display:block}
}
/* the endline at desktop: bigger tiles and a deeper hang, so it reads as the mark's cable, not a dashed rule */
@media (min-width:900px){.rb-endline{--sag:24px;--sag2:44px;--tk:2.7}.rb-ec{gap:6px;padding-bottom:26px}.rb-ec i{width:18px;height:18px}.rb-ep{width:36px;height:27px;margin-left:6px}}

/* ---------- Job O: one look with the new home ----------
   Same closing call as home (no cable), numbered section heads, the work page as the same framed list,
   and the same motion: photographs open from an inset frame as they enter the screen (CSS scroll-driven where supported, static elsewhere). */
/* Closing call: as on home, a big two-line call and one ink button; the cable tiles and plug are gone */
.rb-endline{border-top:0;padding:0 var(--pad-x,20px) clamp(64px,8vw,112px)}
.rb-endline .wrap{padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line-strong,#454545);align-items:end}
.rb-endline-t{font-size:clamp(2.25rem,4.4vw + .6rem,5.25rem);line-height:.94;letter-spacing:-.04em;max-width:16ch}
.rb-endline-t em{display:block}
.rb-endline .rb-ec,.rb-endline .rb-sock-dot{display:none}
.rb-endline .rb-socket{margin-left:0;border-radius:999px;min-height:52px;padding:0 24px}
@media (min-width:900px){.rb-endline .rb-socket{margin-bottom:.6em}}
/* Numbered section heads (the numbers are decoration, hidden from screen readers) */
.pf-casepage main,.st main{counter-reset:o-sx}
.pf-casepage .pf-h2,.st .st-h2{counter-increment:o-sx}
.pf-casepage .pf-h2::before,.st .st-h2::before{content:counter(o-sx,decimal-leading-zero) / "";display:inline-block;min-width:2.4em;margin-right:.5em;font:500 .8125rem/1 var(--font-mono);letter-spacing:.08em;color:var(--red-ink);vertical-align:.3em}
.pf-casepage .pf-h2.mono-h::before{min-width:auto;vertical-align:0}
.o-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:500 .8125rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.o-n{color:var(--red-ink);letter-spacing:.08em}
/* Work index on phones and tablets: a plain list of framed cards, like home, instead of a sideways carousel */
@media (max-width:1099px){
  html .pf-index .pf-grid,html.pf-3d .pf-index .pf-grid{display:grid!important;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,64px) clamp(16px,2vw,28px);overflow:visible;margin-inline:0;padding:8px 0 0;scroll-snap-type:none}
  html .pf-index .pf-grid .pf-card,html .pf-index .pf-grid .pf-card[data-pos],html .pf-index .pf-grid.is-hung .pf-card[data-pos],html.pf-3d .pf-index .pf-grid .pf-card{flex:none;width:auto;height:auto;min-height:0;margin:0!important;padding:0;border:0;background:none;display:block;text-align:left;animation:none!important;transform:none!important;opacity:1!important}
  html .pf-index .pf-grid .pf-card[hidden]{display:none}
  .pf-index .pf-card-sum{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
  .pf-index .mb-pos{display:none!important}
}
@media (min-width:700px) and (max-width:1099px){html .pf-index .pf-grid,html.pf-3d .pf-index .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-index .pf-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.pf-index .pf-media img{transition:transform .7s var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html:not(.reduced-motion) .pf-index .pf-card-link:hover .pf-media img{transform:scale(1.04)}}
/* The motion */
@keyframes o-frame-open{from{clip-path:inset(8% 6% 8% 6% round var(--radius,6px))}to{clip-path:inset(0 0 0 0 round var(--radius,6px))}}
@keyframes o-settle{from{transform:scale(1.14)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) :is(.pf-index .pf-media,.pf-casepage .pf-still-box,.st .st-more figure){animation:o-frame-open linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) :is(.pf-casepage .pf-still-box,.st .st-more figure) img{animation:o-settle linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
.pf-crumbs a{display:inline-flex;align-items:center;min-width:48px;min-height:48px}
/* Phones: Settings as an icon in the header on every page, as on home */
@media (max-width:760px){
  #site-header .rb-set-btn{min-width:48px;min-height:48px;padding:0 12px;justify-content:center}
  #site-header .rb-set-btn .rb-set-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Case page gallery on desktop: a clean grid, no overlapping screens; captions on one line under each */
@media (min-width:900px){
  .pf-casepage .pf-still.is-portrait.g-4,.pf-casepage .pf-still.is-portrait.g-4:nth-child(4n+4){transform:none;margin-top:0}
  .pf-casepage .pf-still.g-8,.pf-casepage .pf-still.g-8:nth-child(4n+3){grid-column:span 8}
  .pf-casepage .pf-still.is-portrait.g-4,.pf-casepage .pf-still.is-portrait.g-4:nth-child(4n+4){grid-column:span 4}
  .pf-casepage .pf-still.g-8:nth-child(4n+3) .pf-still-cap{text-align:left;align-self:auto}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-box{box-shadow:none}
  .pf-casepage .pf-stills{align-items:stretch}
  .pf-casepage .pf-still.g-6+.pf-still.g-6{margin-top:0}
}
/* The closing call on inner pages lines up with the page's own content edge (1240 px wrap minus its padding) */
.rb-endline .wrap{max-width:calc(var(--content-max,1240px) - 2 * var(--section-pad-x,var(--pad-x,20px)))}
/* Case gallery on desktop: a landscape screen (9 columns) beside its phone screen (3 columns), same height, no hole under either */
@media (min-width:900px){
  .pf-casepage .pf-still.g-8,.pf-casepage .pf-still.g-8:nth-child(4n+3){grid-column:span 9}
  .pf-casepage .pf-still.is-portrait.g-4,.pf-casepage .pf-still.is-portrait.g-4:nth-child(4n+4){grid-column:span 3;display:flex}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-fig{display:flex;flex-direction:column;width:100%;height:100%;margin:0}
  .pf-casepage .pf-still.is-portrait.g-4 .pf-still-box{aspect-ratio:auto!important;flex:1 1 0;min-height:0}
}
/* Work page: the projects come first, the four numbers after them; the filter row fades at its right edge so it reads as scrollable */
.pf-index main{display:flex;flex-direction:column}
.pf-index main>.pf-scale-strip{order:3}
.pf-index main>.pf-browse{order:2}
@media (max-width:960px){.pf-index .pf-filters{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}}
/* Case pages on phones: a compact Pause control */
@media (max-width:760px){html body.pf-casepage .pf-play{min-height:48px;padding:0 14px;font-size:.75rem}}
/* Studio: replica labels readable */
.st-replicas-grid .st-replica-cap{font-size:.8125rem!important;line-height:1.4}
/* Contact: space between the brief button and its note */
.ct-act{row-gap:16px}
/* The film progress bar follows the video's own timeupdate events (no rAF loop while a preview plays) */
.pf-bar i{transition:transform .3s linear}
@media (prefers-reduced-motion:reduce){.pf-bar i{transition:none}}
@media (max-width:960px){.pf-index .pf-filters{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}}
/* Kiosk case hero: Pause sits in the empty top corner of the kiosk screen, clear of its "Powered by" mark (desktop) */
@media (min-width:761px){html body .pf-case[data-slug="hh-kiosks"] .pf-play{top:14px!important;right:14px!important;bottom:auto!important}}