/* A visual studio: enter a project, follow its decisions, then try the work. */
.folio-intro{padding-block:4rem;align-items:end}.folio-intro>p{font:500 clamp(1.7rem,3.25vw,3rem)/1.2 var(--font-display);max-width:24ch;letter-spacing:-.025em}
.folio-section-head h2{font-size:clamp(3.5rem,7.5vw,7.25rem);line-height:.96}
.work-entrances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:3rem 0 5rem}
.work-entrance{appearance:none;display:block;padding:0;border:0;background:transparent;color:var(--brand-ink);text-align:start;cursor:pointer}
.entrance-image{display:block;position:relative;overflow:hidden;aspect-ratio:1.2;background:var(--brand-nude)}
.entrance-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.entrance-image>span{position:absolute;inset-inline-start:1rem;top:.7rem;font:400 clamp(2.4rem,5vw,4.5rem)/1 var(--font-display);color:var(--brand-ink)}
.entrance-label{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding-top:.9rem}
.entrance-label strong{font:500 clamp(1.4rem,2.4vw,2.2rem)/1.15 var(--font-display)}
.entrance-label small{font-size:.75rem;line-height:1.5;max-width:14ch;text-align:end;color:var(--brand-secondary)}
.work-entrance:hover img{transform:scale(1.06)}.work-entrance:focus-visible{outline:3px solid var(--brand-ink);outline-offset:6px}
.folio-project.case-study{padding-top:3rem;padding-bottom:4.5rem;scroll-margin-top:110px;--scene-height:min(740px,calc(100svh - 125px))}
.case-heading{grid-template-columns:1.1fr 1fr;gap:8%;margin-bottom:2.5rem;align-items:end}
.case-study h3{max-width:none;line-height:1;margin:0}
.case-name{display:block;font:500 clamp(3.7rem,7.8vw,7.8rem)/.95 var(--font-display);letter-spacing:-.05em;color:var(--brand-ink)}
.case-title{display:block;font:400 1.125rem/1.55 var(--font-body);letter-spacing:0;margin-top:1.1rem;max-width:32ch}
.case-overview>p{font-size:1rem;line-height:1.65}.case-study .folio-project-meta dd{font-size:.875rem}.case-study .folio-project-meta dt{font-size:.75rem}
.case-kind{font-size:.75rem;margin-bottom:.8rem}.case-study .folio-project-top{margin-bottom:.75rem!important}
.case-story-grid{display:block;position:relative}
.case-visual{position:sticky;top:102px;height:var(--scene-height);min-height:470px;max-width:none;width:100%;margin:0;background:var(--case-color);overflow:hidden;--pointer-x:0px;--pointer-y:0px}
.case-image-wrap{inset:0 32% 95px 0;overflow:hidden}
[dir=rtl] .case-image-wrap{inset:0 0 95px 32%}
.case-image{width:100%;height:100%;transform:translate3d(var(--pointer-x),calc(var(--case-shift) + var(--pointer-y)),0) scale(var(--case-scale,1.05));transform-origin:56% 48%;transition:transform .35s ease-out}
.case-scene-number{position:absolute;top:.5rem;inset-inline-start:1.5rem;font:400 clamp(5rem,10vw,9rem)/1 var(--font-display);color:var(--brand-ink);opacity:.75;pointer-events:none;z-index:1}
.case-visual figcaption{inset-inline-end:32%;font-size:.75rem;padding:.5rem 1.25rem;bottom:62px;line-height:1.45}
.case-controls{inset-inline-end:32%;grid-template-columns:repeat(3,minmax(0,1fr))}
.case-controls button{min-height:62px;font-size:.875rem;padding:.75rem 1rem}.case-controls button>span:first-child{font-size:.75rem}
.case-controls button[aria-pressed=true]{background:var(--brand-ink);color:var(--brand-paper)}
.case-chapters{position:relative;z-index:2;width:32%;margin-inline-start:auto;margin-top:calc(-1 * var(--scene-height));pointer-events:none}
.case-chapter{min-height:calc(var(--scene-height) * .76);padding:2rem 1.9rem;border:0;display:flex;justify-content:center;pointer-events:auto}
.case-chapter:first-child{min-height:var(--scene-height);padding-top:2rem}.case-chapter:last-child{padding-bottom:4rem}
.case-chapter .folio-overline{font-size:.75rem;color:var(--brand-ink);margin-bottom:1.4rem}
.case-chapter h4{font-size:clamp(1.85rem,2.9vw,2.9rem);line-height:1.08;max-width:15ch;margin-bottom:1.25rem}
.case-chapter>p:not(.folio-overline){font-size:1rem;line-height:1.7;max-width:none}
.case-annotation{border-inline-start:2px solid var(--brand-ink);padding-inline-start:.9rem;margin-top:1.5rem}
.case-annotation>span{font-size:.75rem}.case-annotation>p{font-size:1.4rem;color:var(--brand-ink)}
.case-chapter .folio-link{font-size:.9375rem}
.case-live-surface{position:absolute;inset-inline-start:3%;bottom:124px;width:330px;max-width:59%;z-index:4}
.case-play{background:var(--brand-paper);box-shadow:none;border:1px solid var(--brand-ink);transform:translate3d(calc(var(--pointer-x) * -1.5),calc(var(--pointer-y) * -1.5),0);transition:transform .35s ease-out}
.case-play summary{background:var(--brand-acid);list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.3rem;min-height:60px;font:500 1rem/1.5 var(--font-body);color:var(--brand-ink)}
.case-play summary::-webkit-details-marker{display:none}.play-open-mark{font-size:1.4rem;line-height:1;transition:transform .2s}
.case-play[open] .play-open-mark{transform:rotate(45deg)}
.case-play[open] summary{background:var(--brand-paper);border-bottom:1px solid var(--brand-line)}
.case-play .play-hint{padding:1rem 1.3rem 0;font-size:.875rem;line-height:1.5;color:var(--brand-secondary)}
.case-play-body{padding:1rem 1.3rem 1.15rem;max-height:calc(var(--scene-height) - 265px);overflow:auto;overscroll-behavior:contain}
.play-progress{display:flex;justify-content:space-between;gap:1rem;color:var(--brand-secondary);font:.75rem/1.5 var(--font-mono);margin-bottom:.5rem}
.case-play h5{font:500 1.8rem/1.15 var(--font-display);margin:.3rem 0 1rem;letter-spacing:-.025em}
.play-options{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.play-options button{border:1px solid var(--brand-line);min-height:46px;border-radius:0;padding:.65rem .5rem;background:transparent;color:var(--brand-ink);font:400 .875rem/1.35 var(--font-body);cursor:pointer;text-align:start}
.play-options button:hover,.play-options button[aria-pressed=true]{background:var(--case-color);border-color:var(--brand-ink)}
.play-option-colors{display:flex;height:12px;margin-bottom:.5rem}.play-option-colors i{display:block;flex:1}
.play-footer{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;border-top:1px solid var(--brand-line);padding-top:.5rem}
.play-footer button{border:0;border-radius:0;background:transparent;font:400 .8125rem var(--font-body);color:var(--brand-secondary);padding:.6rem 0;min-height:40px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.play-palette{display:flex;height:26px;margin:1rem 0}.play-palette span{flex:1}
.play-result{font-size:.9375rem;line-height:1.65!important;padding-bottom:1rem}
.play-copy>button{background:var(--brand-acid);color:var(--brand-ink);padding:.8rem 1rem;min-height:44px;font:500 .875rem var(--font-body);cursor:pointer;border:0;border-radius:0;width:100%}
.play-copy .status{display:block;font-size:.8125rem;margin-top:.5rem}
.case-play button:focus-visible,.case-play summary:focus-visible,.case-play h5:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}
.folio-library{background:var(--brand-ink);color:var(--brand-paper);padding-block:5.5rem}
.folio-library h2,.folio-library h2 span,.folio-library h3{color:var(--brand-paper)!important}
.folio-library h2{font-size:clamp(4rem,9.5vw,9rem);line-height:.95;margin-top:1.5rem}
.folio-library .folio-overline{color:var(--brand-nude)}.folio-library-copy>p,.folio-library .folio-tags{color:var(--brand-nude)}
.folio-library-copy h3{font:500 clamp(1.8rem,2.8vw,2.7rem)/1.12 var(--font-display)}
.folio-library .folio-link{color:inherit}.folio-library>.library-demo.bot-container{border-color:#ffffff30;margin-top:3.5rem}
.library-demo-head{grid-template-columns:1fr 1fr;margin-bottom:2.5rem}.library-demo-head>div>p:not(.folio-overline){color:var(--brand-nude)}.library-demo-head .library-disclosure{color:var(--brand-nude)}
.library-briefs legend{color:var(--brand-nude);font-size:.8125rem}.library-briefs button{color:var(--brand-paper);border-color:#ffffff50}
.library-briefs button[aria-pressed=true]{background:var(--brand-nude);border-color:var(--brand-nude);color:var(--brand-ink)}
.library-briefs button:hover:not([aria-pressed=true]){background:#ffffff15}
.library-workbench{display:block;background:transparent;border:0;color:var(--brand-ink)}
.library-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem;padding:1.5rem 0 2rem;background:transparent;border:0;isolation:isolate}
.library-tabs::before{content:'';position:absolute;top:50%;height:1px;background:var(--brand-muted);inset-inline:4%;z-index:-1}
.library-tabs button{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.7rem;text-align:start;border:1px solid var(--brand-muted);min-height:0;background:var(--brand-ink);color:var(--brand-paper);padding:1rem;transform:translateY(0);transition:transform .3s,background .3s,border-color .3s}
.library-tabs button[aria-selected=true]{background:var(--brand-acid);border-color:var(--brand-acid);color:var(--brand-ink);transform:translateY(-8px)}
.library-tabs button:hover:not([aria-selected=true]){background:var(--brand-secondary)}
.library-node-number{font:.75rem var(--font-mono)}
.library-node-faces{display:flex;gap:5px;height:95px;margin:.1rem 0;overflow:hidden}
.library-node-faces img{width:calc(50% - 2.5px);height:auto;max-height:100%;aspect-ratio:4/3;align-self:center;object-fit:cover;object-position:center;display:block;border-radius:0}
.library-node-faces.is-human img{aspect-ratio:4/5;width:76px;height:95px;object-position:center 26%;margin-inline:auto}
.library-tabs button strong{font:500 1.05rem/1.3 var(--font-body)}.library-tabs button small{font-size:.8125rem;line-height:1.4;color:inherit;opacity:.85}
.library-panel{position:relative;padding:2.5rem 3rem;min-height:440px;background:var(--brand-paper);border-top:5px solid var(--brand-nude);color:var(--brand-ink);display:flow-root}
.library-panel>.folio-overline{color:var(--brand-ink);font-size:.75rem}.library-panel h4{font-size:clamp(2.1rem,3.7vw,3.7rem);line-height:1.05;max-width:24ch;color:var(--brand-ink)}
.library-panel>.library-people{float:inline-end;width:200px;display:block;border:0;margin:0 0 1.5rem 2.5rem;padding:0}
.library-people .library-person{margin-bottom:1.25rem;display:flex;font-size:1rem}.library-person small{font-size:.8125rem;line-height:1.4}
.library-person>b{flex:0 0 42px;height:42px;width:42px;background:var(--brand-nude)}
.library-panel>.folio-overline{margin-top:0}.library-panel>p:not(.folio-overline):not(.library-people){font-size:1.0625rem;line-height:1.7;max-width:64ch}
.library-deliverable{clear:both;max-width:65ch;border-color:var(--brand-ink)}.library-deliverable>span,.library-questions>span,.library-comparison>div>span{font-size:.75rem}
.library-questions{clear:both;max-width:68ch;background:var(--brand-nude);padding:1.4rem 1.7rem}.library-questions li{font-size:1rem}
.library-panel blockquote{clear:both;font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;padding:1.5rem 2rem;background:var(--brand-nude);color:var(--brand-ink)}
.library-comparison{clear:both;grid-template-columns:.8fr 1.2fr;gap:1.5rem;margin:2rem 0}
.library-comparison p{font:500 clamp(1.35rem,2.4vw,2.2rem)/1.25 var(--font-display)}.library-comparison>div{padding:1.5rem;background:var(--brand-nude)}.library-comparison>div+div{background:var(--brand-paper);border:1px solid var(--brand-ink)}
.library-panel .folio-link{color:var(--brand-ink)}
.library-demo-actions{background:var(--brand-paper);border-color:var(--brand-line);padding:1rem 2rem}
.library-demo-actions button{font-size:.875rem}.library-demo-actions>span{font-size:.75rem}.library-demo-actions button[data-library-next]{background:var(--brand-ink)}
.library-briefs button:focus-visible,.library-tabs button:focus-visible{outline-color:var(--brand-acid)}.library-panel:focus-visible{outline-color:var(--brand-paper)}.library-demo-actions button:focus-visible{outline-color:var(--brand-ink)}
.folio-expertise{padding-block:6rem}.folio-services>a{padding-block:2.1rem;transition:background .25s,padding .25s}
.folio-services>a:hover{background:var(--brand-nude);padding-inline:1rem}.folio-services>a>span{color:var(--brand-ink)}
.folio-contact{padding-block:4rem 5rem}.folio-contact h2{font:500 clamp(3rem,6.6vw,6.6rem)/1.05 var(--font-display);max-width:13ch;color:var(--brand-ink)}
.portfolio-motion-paused .case-image{transform:none;transition:none}.portfolio-motion-paused .case-play{transform:none;transition:none}.portfolio-motion-paused .library-tabs button,.portfolio-motion-paused .entrance-image img{transition:none}
[dir=rtl] .library-panel>.library-people{margin:0 2.5rem 1.5rem 0}
@media(max-width:1100px){.case-chapter{padding-inline:1.25rem}.case-chapter h4{font-size:2.05rem}.case-overview>p{font-size:.9375rem}.library-node-faces{height:75px}.library-node-faces.is-human img{height:75px;width:60px}.library-tabs{gap:.75rem}.library-tabs button{padding:.75rem}.library-tabs button strong{font-size:.9375rem}.library-panel>.library-people{width:170px}}
@media(max-width:850px){
 .work-entrances{gap:1rem;margin-bottom:3rem}.entrance-label{display:block}.entrance-label small{display:block;text-align:start;max-width:none;margin-top:.3rem}
 .case-heading{grid-template-columns:1fr;gap:1.6rem}.case-name{font-size:clamp(3.5rem,9vw,6rem)}.case-title{font-size:1.0625rem;max-width:none}.case-overview>p{font-size:1rem}.case-study .folio-project-meta dd{font-size:.9375rem}
 .folio-project.case-study{--scene-height:560px;padding-bottom:3rem}.case-visual{position:relative;top:auto;min-height:0;height:auto;overflow:visible;display:flex;flex-direction:column;isolation:auto}
 .case-image-wrap{position:relative;inset:auto!important;height:390px;width:100%;overflow:hidden}.case-image{height:100%;width:100%;object-fit:cover}
 .case-scene-number{font-size:6rem;top:1rem}.case-live-surface{position:relative;inset:auto;width:auto;max-width:none;margin:-4.5rem 1.2rem 1.25rem;align-self:stretch}
 .case-play{transform:none!important}.case-play-body{max-height:380px}.case-play summary{min-height:60px}.play-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .case-visual figcaption{position:relative;bottom:auto;inset:auto;padding:.75rem 1.2rem;font-size:.75rem;order:3}.case-controls{position:relative;bottom:auto;inset:auto;order:4}.case-controls button{font-size:.875rem}
 .case-chapters{width:100%;margin:0;pointer-events:auto}.case-chapter,.case-chapter:first-child{display:block;min-height:0;padding:1.8rem 0;border-bottom:1px solid var(--brand-line)}.case-chapter:last-child{padding-bottom:0;border:0}.case-chapter h4{font-size:2.3rem;max-width:25ch}.case-chapter>p:not(.folio-overline){max-width:65ch}
 .library-demo-head{grid-template-columns:1fr;gap:1.3rem}.library-panel{padding:2rem}.library-panel>.library-people{float:none;width:auto;display:flex;margin:0 0 1rem!important;gap:1.5rem;border-bottom:1px solid var(--brand-line)}.library-people .library-person{margin-bottom:1rem}
 .library-comparison{grid-template-columns:1fr 1fr;gap:1rem}.library-comparison>div{padding:1.2rem}
}
@media(max-width:600px){
 .folio-intro{padding-block:2.5rem}.folio-intro>p{font-size:1.9rem}.folio-section-head h2{font-size:3.7rem}
 .work-entrances{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:2rem -6.8% 2.5rem;padding:0 6.8% 1rem}.work-entrance{flex:0 0 74%;scroll-snap-align:center}.entrance-image{aspect-ratio:1.3}.entrance-label{display:flex}.entrance-label strong{font-size:1.7rem}.entrance-label small{font-size:.75rem;max-width:14ch;text-align:end}
 .case-name{font-size:3.6rem}.case-title{font-size:1rem}.case-study .folio-project-meta>div{grid-template-columns:4.7rem minmax(0,1fr)}.case-study .folio-project-meta dd{font-size:.875rem}
 .case-image-wrap{height:320px}.case-live-surface{margin:-3rem .9rem 1rem}.case-play-body{max-height:420px}.case-controls button{font-size:.8125rem;padding:.8rem .65rem;display:block}.case-controls button>span:first-child{display:block;margin-bottom:.35rem}.case-play summary{font-size:1rem}
 .case-chapter h4{font-size:2.2rem}.folio-project.case-study{scroll-margin-top:145px}.case-chapter .folio-overline{margin-bottom:.8rem}
 .folio-library{padding-block:3.5rem}.folio-library h2{font-size:4.4rem}.library-demo-head h3{font-size:2.8rem!important}.library-demo-head>div>p:not(.folio-overline){font-size:1rem}.library-briefs button{font-size:.9375rem}
 .library-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;padding:1rem 0 1.5rem}.library-tabs::before{display:none}.library-tabs button{padding:.85rem;gap:.5rem;border:1px solid var(--brand-muted)!important;min-height:0}.library-tabs button[aria-selected=true]{transform:none;border-color:var(--brand-acid)!important}
 .library-node-faces{height:82px}.library-node-faces.is-human img{height:82px;width:65px}.library-tabs button strong{font-size:.9375rem}.library-tabs button small{font-size:.75rem}
 .library-panel{padding:1.5rem 1.2rem;min-height:0}.library-panel h4{font-size:2.35rem}.library-panel>p:not(.folio-overline):not(.library-people){font-size:1rem}.library-person small{font-size:.75rem}.library-person>b{width:36px;height:36px;flex-basis:36px}
 .library-questions{padding:1.2rem}.library-panel blockquote{padding:1.2rem;font-size:2.3rem}.library-comparison{grid-template-columns:1fr}.library-comparison p{font-size:1.65rem}.library-demo-actions{padding:.9rem .8rem}.library-demo-actions button{font-size:.8125rem}.library-demo-actions>span{font-size:.75rem}
 .folio-expertise{padding-block:3.5rem}.folio-services>a:hover{padding-inline:0}.folio-contact{padding-block:3rem}.folio-contact h2{font-size:3.5rem}
}
@media(max-height:650px) and (min-width:851px){.case-visual{position:relative;top:auto;min-height:480px;height:480px}.case-chapters{margin-top:-480px}.case-chapter,.case-chapter:first-child{min-height:480px}.case-play-body{max-height:210px}}
@media(prefers-reduced-motion:reduce){.case-image,.case-play{transform:none!important;transition:none}.library-tabs button,.entrance-image img,.folio-services>a{transition:none}.work-entrances{scroll-behavior:auto}}

/* The brand accent belongs to the action, never to body text on paper. */
.folio-contact>.folio-link{background:var(--brand-acid);color:var(--brand-ink);padding:.9rem 1.2rem;border:1px solid var(--brand-ink)}
.folio-contact>.folio-link:hover{background:var(--brand-ink);color:var(--brand-paper)}