/* Editorial covers: one composition per stage, no portrait widgets. */
.intro-studio { position:relative; overflow:hidden; background:#eeece5; }
.studio-cover,.folio-motion .studio-cover { position:relative; display:block; padding:0; min-height:750px; overflow:hidden; isolation:isolate; }
.studio-cover::before { content:''; position:absolute; inset:36% 0 0; background:linear-gradient(to bottom,#eeece500 0%,#1b1c1b 52%,#101110 90%); z-index:-1; }
.studio-cover::after { content:''; position:absolute; inset:0; opacity:.055; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.studio-heading,.folio-motion .studio-heading { display:contents; }
.studio-heading .studio-eyebrow,.folio-motion .studio-heading .studio-eyebrow { position:absolute; top:20px; left:3%; font-size:11px; letter-spacing:.13em; margin:0; z-index:4; }
.studio-heading h1,.folio-motion .studio-heading h1 { position:absolute; top:43px; left:3%; right:3%; margin:0; z-index:1; }
.studio-name,.folio-motion .studio-name { display:flex; align-items:baseline; justify-content:space-between; width:100%; gap:.08em; font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,sans-serif; font-weight:700; font-size:clamp(82px,12.8vw,188px); line-height:.88; letter-spacing:-.075em; }
.studio-name>span+span,.folio-motion .studio-name>span+span { margin:0; gap:0; }
.studio-name .name-star,.folio-motion .studio-name .name-star { display:none; }
.studio-intro,.folio-motion .studio-intro { position:absolute; top:36%; left:3.5%; width:21%; display:block; margin:0; z-index:4; }
.studio-chinese-name,.folio-motion .studio-chinese-name { display:block; font-size:22px; line-height:1.4; }
.studio-intro p,.folio-motion .studio-intro p { margin:14px 0 0; padding:0; border:0; font-size:14px; line-height:1.7; max-width:13em; }
.studio-slogan,.folio-motion .studio-slogan { position:absolute; bottom:76px; left:3.5%; width:26%; margin:0; color:#f5f2eb; font-size:clamp(22px,2.3vw,35px); line-height:1.5; z-index:4; }
.studio-link,.folio-motion .studio-link { position:absolute; left:3.5%; bottom:22px; color:#e9e5dc; z-index:4; border-color:#e9e5dc70; font-size:12px; min-height:32px; }
.studio-visual,.folio-motion .studio-visual { position:absolute; inset:0; width:100%; max-width:none; margin:0; display:block; pointer-events:none; }
.portrait-instrument,.folio-motion .portrait-instrument { position:absolute; inset:27% 17% 0 22%; aspect-ratio:auto; min-height:0; max-height:none; border:0; background:transparent; transform:none; overflow:visible; pointer-events:none; }
.portrait-window,.folio-motion .portrait-window { inset:0; overflow:hidden; }
.portrait-window img { width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:translateY(calc(var(--folio-p,0) * 3%)) scale(calc(1 + var(--folio-p,0) * .12)); transform-origin:50% 0; filter:grayscale(1) contrast(1.1); transition:none; }
.portrait-disc,.portrait-grid,.portrait-reticle,.portrait-coordinate,.portrait-control { display:none; }
.studio-visual-footer,.folio-motion .studio-visual-footer { position:absolute; inset:36% 3.5% 22px auto; width:17%; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; padding:0; font-size:13px; line-height:1.8; text-align:right; letter-spacing:.06em; }
.studio-visual-footer>span { max-width:9em; }
.studio-wechat { display:block; width:124px; padding:8px; background:#fff; color:#111; pointer-events:auto; font-size:10px; text-decoration:none; text-align:center; letter-spacing:.1em; }
.studio-wechat img { display:block; width:100%; height:auto; margin:0 0 4px; }
.studio-wechat>div { color:var(--ink); }
.studio-meta,.folio-motion .studio-meta { border-bottom:1px solid #1112; font-size:10px; min-height:40px; padding:10px 3%; }
.studio-disciplines { background:#111210; color:#eeeae2; border-top:1px solid #eee3; }
.studio-disciplines a { border-color:#eee2; min-height:52px; }
.folio-motion .intro-studio { grid-template-rows:40px minmax(0,1fr) 52px; filter:none; transform:translateY(calc(var(--folio-p) * -8%)) scale(calc(1 - var(--folio-p) * .025)); }
.folio-motion .studio-cover { min-height:0; }
.studio-profile,.folio-motion .studio-profile { background:#111210; }
.folio-motion .studio-profile { grid-template-rows:58px minmax(0,1fr) 96px; transform:translate3d(0,calc((1 - var(--folio-p)) * 104%),0); border-top:1px solid #f2efe850; }
.studio-profile-top,.folio-motion .studio-profile-top { font-size:11px; letter-spacing:.12em; }
.studio-profile-grid,.folio-motion .studio-profile-grid { grid-template-columns:1.1fr 1fr; gap:60px; padding:30px 0 0; align-items:center; }
.studio-biography h2,.folio-motion .studio-biography h2 { font-size:clamp(28px,3.25vw,48px); line-height:1.4; letter-spacing:-.04em; }
.studio-biography h2 em { margin-top:12px; }
.studio-summary,.folio-motion .studio-summary { font-size:16px; line-height:1.9; max-width:31em; margin-top:26px; }
.studio-detail,.folio-motion .studio-detail { font-size:14px; line-height:1.85; margin-top:16px; max-width:32em; }
.studio-full-portrait,.folio-motion .studio-full-portrait { position:relative; align-self:stretch; height:100%; min-height:0; overflow:hidden; }
.studio-image-frame,.folio-motion .studio-image-frame { padding:0; background:transparent; overflow:hidden; }
.studio-image-frame::before { display:none; }
.studio-image-frame::after { content:''; position:absolute; width:80%; aspect-ratio:1; border:1px solid #edebdf35; border-radius:50%; top:8%; left:10%; z-index:0; pointer-events:none; }
.studio-image-frame img { position:relative; z-index:1; object-fit:contain; object-position:50% 100%; transform:scale(calc(1.07 - var(--folio-p,1) * .07)); transform-origin:center bottom; }
.studio-full-portrait figcaption { position:absolute; z-index:3; bottom:12px; inset-inline:10px; color:#d7d4cb; }
.studio-transition,.folio-motion .studio-transition { position:relative; z-index:3; font-size:clamp(42px,6.5vw,100px); padding:18px 0; font-weight:500; line-height:.8; letter-spacing:-.065em; }
.folio-pager button { min-height:34px; }
@media(min-width:1600px){.studio-cover{max-width:none;margin:0}.studio-name,.folio-motion .studio-name{font-size:clamp(170px,12vw,215px)}}
@media(max-width:1100px) and (min-width:701px){
 .studio-name,.folio-motion .studio-name{font-size:14vw}
 .studio-profile-grid,.folio-motion .studio-profile-grid{gap:30px}
 .studio-biography h2,.folio-motion .studio-biography h2{font-size:30px}
 .studio-slogan,.folio-motion .studio-slogan{font-size:24px;width:28%}
 .studio-intro,.folio-motion .studio-intro{width:20%}
 .studio-intro p,.folio-motion .studio-intro p{font-size:13px}
}
@media(max-width:700px){
 .studio-meta,.folio-motion .studio-meta{padding:10px 20px;font-size:9px;gap:6px;min-height:62px}
 .studio-availability{font-size:11px}
 .studio-cover,.folio-motion .studio-cover{min-height:620px}
 .folio-motion .studio-cover{min-height:0}
 .folio-motion .intro-studio{grid-template-rows:62px minmax(0,1fr) 48px}
 .studio-heading .studio-eyebrow,.folio-motion .studio-heading .studio-eyebrow{font-size:8px;letter-spacing:.05em;top:18px;left:20px}
 .studio-heading h1,.folio-motion .studio-heading h1{top:43px;left:18px;right:22px}
 .studio-name,.folio-motion .studio-name{font-size:15vw;letter-spacing:-.075em;line-height:1}
 .studio-intro,.folio-motion .studio-intro{top:110px;left:20px;width:54%;display:flex;align-items:center;gap:10px}
 .studio-chinese-name,.folio-motion .studio-chinese-name{font-size:16px}
 .studio-intro p,.folio-motion .studio-intro p{margin:0;font-size:10px;line-height:1.5;max-width:9em}
 .studio-visual-footer,.folio-motion .studio-visual-footer{top:110px;right:20px;bottom:16px;width:22%;font-size:8px;letter-spacing:0}
 .portrait-instrument,.folio-motion .portrait-instrument{inset:155px 7% 152px 7%}
 .portrait-window img{object-fit:cover;object-position:50% 0;transform:scale(calc(1 + var(--folio-p,0) * .10));transform-origin:50% 0}
 .studio-slogan,.folio-motion .studio-slogan{bottom:60px;left:20px;width:calc(100% - 138px);font-size:clamp(18px,5.4vw,23px);line-height:1.4}
 body.english .portrait-instrument,body.english .folio-motion .portrait-instrument{bottom:190px}
 .studio-link,.folio-motion .studio-link{display:flex;bottom:14px;left:20px;font-size:11px}
 .studio-wechat,.folio-motion .studio-wechat{font-size:8px;width:84px;padding:5px}
 .studio-disciplines,.folio-motion .studio-disciplines{grid-template-columns:repeat(3,1fr)}
 .studio-disciplines a,.folio-motion .studio-disciplines a{font-size:9px;line-height:1.4;min-height:48px;padding:8px 12px;justify-content:center;}
 .studio-disciplines a>span:first-child,.studio-disciplines b{display:none}
 .studio-disciplines a>span:nth-child(2){margin:0}
 .studio-profile,.folio-motion .studio-profile{padding:0 22px}
 .studio-profile-grid{padding:34px 0 0;display:flex;flex-direction:column;gap:28px;align-items:stretch}
 .studio-biography h2,.folio-motion .studio-biography h2{font-size:27px;line-height:1.4}
 .studio-summary,.folio-motion .studio-summary{font-size:15px;line-height:1.75;margin-top:18px}
 .studio-detail,.folio-motion .studio-detail{font-size:13px;line-height:1.7;margin-top:12px}
 .studio-actions,.folio-motion .studio-actions{margin-top:20px;gap:16px}
 .studio-button,.folio-motion .studio-button{font-size:12px;min-height:44px;padding:10px 14px}
 .studio-pdf,.folio-motion .studio-pdf{font-size:12px}
 .studio-full-portrait{height:440px;flex:none;width:100%;margin:0}
 .studio-image-frame{height:100%;aspect-ratio:auto;background:transparent}
 .studio-full-portrait figcaption,.folio-motion .studio-full-portrait figcaption{writing-mode:horizontal-tb;width:auto;inset-inline:0;font-size:9px}
 .studio-transition,.folio-motion .studio-transition{font-size:7.6vw;line-height:1;padding:18px 0;white-space:nowrap;gap:12px}
 .folio-motion .studio-profile{grid-template-rows:44px minmax(0,1fr) 62px}
 .folio-motion .studio-profile-grid{padding:20px 0 0;gap:16px;display:flex;align-items:stretch}
 .folio-motion .studio-full-portrait{flex:1;min-height:130px;display:block}
 .folio-motion .studio-image-frame{height:100%;padding:0;background:transparent}
}

/* Recruiter-facing polish: early document access, legible case evidence, and stable keyboard navigation. */
.studio-resume { color:var(--red); border-color:var(--red); font-weight:600; }
.studio-resume:hover { color:#f4f1e9; border-color:#f4f1e9; }
main > section[id] { scroll-margin-top:72px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.case-copy dd { font-size:14px; line-height:1.72; text-wrap:pretty; }
.project-disclaimer { font-size:13px; line-height:1.7; }
.education-grid p,.capability-table p,.award-list p { font-size:13px; line-height:1.72; text-wrap:pretty; }
.showcase-detail p { font-size:14px; line-height:1.55; }
@media(max-width:700px){
 main > section[id] { scroll-margin-top:58px; }
 .studio-actions,.folio-motion .studio-actions { column-gap:18px; row-gap:8px; }
 .studio-resume,.folio-motion .studio-resume { font-size:12px; }
 .case-copy dd { font-size:14px; line-height:1.68; }
 .education-grid p,.capability-table p,.award-list p { font-size:13px; }
}
@media(prefers-reduced-motion:reduce){.portrait-window img,.studio-image-frame img{transform:none}}
/* The live firmware preview keeps its 390px drawing coordinates; its wrapper scales to fit. */
.wearable-slide-live { min-height:0; align-self:flex-start; }
.wearable-slide-live iframe { display:block; width:100%; max-width:100%; min-height:740px; }
.wearable-deck-viewport,.wearable-deck-track { min-width:0; }
.wearable-deck-track { align-items:flex-start; }
.wearable-deck-viewport { transition:height .25s ease; }
.wearable-slide { flex:0 0 100%; width:100%; min-width:100%; max-width:100%; }
.wearable-slide-live>span { position:static; display:block; background:#181818; color:#aaa; padding:14px 24px; }
.contact-grid .contact-direct { display:flex; flex-direction:row; align-items:center; gap:clamp(20px,3vw,40px); padding:32px; min-width:0; border-right:1px solid var(--line); }
.contact-grid .contact-direct p { border:0; padding:0; margin:0; flex:1 1 180px; min-width:0; line-height:1.8; text-wrap:pretty; }
.contact-grid a.contact-qr { flex:0 0 156px; width:156px; max-width:100%; min-height:0; display:block; padding:10px; border:1px solid #d7d4ce; background:#fff; color:#11110f; font:500 12px/1.5 "PingFang SC",sans-serif; text-align:center; transform:none; transition:border-color .2s; }
.contact-grid a.contact-qr:hover, .contact-grid a.contact-qr:focus-visible { background:#fff; color:#11110f; border-color:var(--red); transform:none; outline-offset:4px; }
.contact-grid .contact-qr img { width:100%; max-width:134px; height:auto; display:block; margin:0 auto 10px; object-fit:contain; transform:none; }
@media(max-width:900px){.contact-grid .contact-direct{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:700px){.contact h2{font-size:clamp(26px,8vw,34px);line-height:1.2;letter-spacing:-.035em;text-wrap:balance}.contact-grid .contact-direct{padding:24px;gap:24px}.contact-grid a.contact-qr{width:144px;flex-basis:144px}}
@media(max-width:380px){.contact-grid .contact-direct{flex-wrap:wrap}.contact-grid .contact-direct p{flex-basis:100%}}
.intro-studio.name-scroll-shift .studio-name>span:first-child { color:var(--red); }
.intro-studio.name-scroll-shift .studio-name>span+span { color:var(--ink); }
.studio-wechat:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
@media(prefers-reduced-motion:reduce){.wearable-deck-viewport{transition:none}}

/* A single portrait changes framing across the two covers. */
.folio-portrait { display:none; }
.portrait-window img { max-width:none; object-fit:initial; transform:none!important; }
.folio-motion .intro-studio { transform:none; opacity:var(--cover-opacity,1); }
.folio-motion .studio-profile { transform:none; clip-path:inset(calc((1 - var(--folio-p)) * 100%) 0 0); box-shadow:none; }
.folio-motion .studio-biography { opacity:var(--profile-opacity,0); transform:translateY(calc((1 - var(--folio-p)) * 24px)); }
.folio-motion .studio-full-portrait img,.folio-motion .portrait-window img { visibility:hidden; }
.folio-motion .studio-image-frame::after { opacity:var(--profile-opacity,0); }
.folio-motion .studio-full-portrait figcaption { opacity:var(--profile-opacity,0); }
.folio-motion .studio-full-portrait figcaption { display:none; }
.folio-motion .folio-portrait { display:block; position:absolute; left:0; top:0; z-index:4; pointer-events:none; overflow:hidden; will-change:transform,width,height; }
.folio-motion .studio-profile.is-observed .studio-biography,.folio-motion .studio-profile.is-observed .studio-full-portrait { animation:none; }
.folio-portrait { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0 calc(100% - var(--portrait-fade,34px)),transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0 calc(100% - var(--portrait-fade,34px)),transparent 100%); mask-composite:intersect; }
.folio-portrait img { position:absolute; max-width:none; display:block; filter:grayscale(1) contrast(1.1); }
.folio-sequence:not(.folio-motion) .portrait-window { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0 calc(100% - 34px),transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0 calc(100% - 34px),transparent 100%); mask-composite:intersect; }
.folio-sequence:not(.folio-motion) .studio-full-portrait { display:none; }
.folio-sequence:not(.folio-motion) .studio-profile-grid { grid-template-columns:1fr; }
.folio-sequence:not(.folio-motion) .studio-biography { max-width:880px; padding:20px 0 34px; }
.folio-sequence:not(.folio-motion) .studio-biography h2 { font-size:clamp(30px,5vw,68px); }
@media(max-width:700px){
 .folio-sequence:not(.folio-motion) .studio-biography h2 {font-size:32px;line-height:1.45}
 .folio-sequence:not(.folio-motion) .studio-biography {padding:12px 0 22px}
}

/* CCI data field and a staggered single-letter reel, restricted to the first cover. */
.studio-cover { --hero-x:0; --hero-y:0; }
.cci-walker { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:auto; touch-action:pan-y; opacity:.72; }
.cci-data-field { position:absolute; inset:0; z-index:0; overflow:hidden; color:#f4f1e9; mix-blend-mode:difference; opacity:.12; pointer-events:none; }
.cci-data-field::before { content:''; position:absolute; inset:-8%; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:clamp(38px,4.5vw,72px) clamp(38px,4.5vw,72px); transform:translate3d(calc(var(--hero-x) * -8px),calc(var(--hero-y) * -8px),0) rotate(-2deg); opacity:.24; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.cci-data-field::after { content:'CCI / CREATIVE COMPUTING / PHYSICAL SYSTEMS / 2026'; position:absolute; right:3.5%; bottom:2.5%; font:500 10px/1.4 "PingFang SC",sans-serif; letter-spacing:.14em; white-space:nowrap; }
.cci-data-field>span { position:absolute; left:-8%; width:116%; white-space:nowrap; font:500 clamp(9px,.8vw,12px)/1 "PingFang SC",sans-serif; letter-spacing:.44em; transform:translate3d(calc(var(--hero-x) * var(--shift,12px)),calc(var(--hero-y) * var(--lift,5px)),0); transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.cci-data-field>span:nth-child(1) { top:29%; --shift:16px; --lift:7px; }
.cci-data-field>span:nth-child(2) { top:56%; left:12%; --shift:-11px; --lift:5px; letter-spacing:.32em; }
.cci-data-field>span:nth-child(3) { top:76%; --shift:9px; --lift:-6px; }
.studio-heading,.studio-visual { z-index:2; }
.studio-name .name-word { display:flex; align-items:baseline; }
.studio-name .name-letter { position:relative; display:inline-block; min-width:.56em; overflow:hidden; font:inherit; font-style:normal; will-change:transform; }
.studio-name .name-letter[data-char="I"] { min-width:.27em; }
.studio-name .name-letter::before,.studio-name .name-letter::after { content:attr(data-char); position:absolute; inset:0; display:block; opacity:0; color:currentColor; -webkit-text-fill-color:currentColor; pointer-events:none; }
.studio-name .name-letter.is-flipping { -webkit-text-fill-color:transparent; animation:name-letter-pulse .64s cubic-bezier(.18,.78,.18,1) both; }
.studio-name .name-letter.is-flipping::before { opacity:1; animation:name-letter-out .64s cubic-bezier(.45,0,.2,1) both; }
.studio-name .name-letter.is-flipping::after { opacity:1; animation:name-letter-in .64s cubic-bezier(.18,.82,.18,1) both; }
@keyframes name-letter-pulse { 0%,100%{transform:translateY(0)} 46%{transform:translateY(.035em) scaleX(.92)} 66%{transform:translateY(-.025em) scaleX(1.035)} }
@keyframes name-letter-out { 0%{transform:translateY(0) skewY(0);filter:blur(0)} 48%{transform:translateY(-112%) skewY(-7deg);filter:blur(1px)} 49%,100%{transform:translateY(-112%);opacity:0} }
@keyframes name-letter-in { 0%,30%{transform:translateY(112%) skewY(8deg);filter:blur(1.4px)} 68%{transform:translateY(-7%) skewY(-2deg);filter:blur(0)} 84%{transform:translateY(2%)} 100%{transform:translateY(0);filter:blur(0)} }

/* iPad portrait: keep the shoulder silhouette and QR in separate safe areas. */
@media (min-width:701px) and (max-width:1180px) and (orientation:portrait){
 .studio-name,.folio-motion .studio-name{font-size:11.8vw}
 .portrait-instrument,.folio-motion .portrait-instrument{inset:28% 18% 0 14%}
 .portrait-window{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 95%,transparent 100%),linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 95%,transparent 100%),linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);mask-composite:intersect}
 .studio-visual-footer,.folio-motion .studio-visual-footer{inset:34% 2.4% 24px auto;width:13.5%;font-size:10px;line-height:1.55}
 .studio-visual-footer>span{max-width:8em}
 .studio-wechat,.folio-motion .studio-wechat{width:100%;max-width:108px;padding:6px;font-size:8px}
 .studio-slogan,.folio-motion .studio-slogan{width:19.5%;font-size:clamp(17px,2.05vw,22px);z-index:6}
 .cci-data-field>span:nth-child(2){top:59%}
}
@media(max-width:700px){
 .cci-walker{opacity:.58}
 .cci-data-field{opacity:.08}
 .cci-data-field::after{display:none}
 .cci-data-field>span{letter-spacing:.28em}
 .studio-name,.folio-motion .studio-name{font-size:13.2vw}
 .studio-name .name-letter{min-width:.55em}
 .studio-name .name-letter[data-char="I"]{min-width:.26em}
 .portrait-window{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);mask-composite:intersect}
}
@media(prefers-reduced-motion:reduce){
 .cci-walker{pointer-events:none}
 .cci-data-field::before,.cci-data-field>span{transform:none;transition:none}
 .studio-name .name-letter{animation:none!important}
}

/* Final cascade for the continuous close-up → half-body scene. */
html{overscroll-behavior-y:none}
.folio-sequence.folio-motion{height:240svh}
.folio-motion .folio-stage{height:calc(100svh - var(--folio-top));contain:layout paint}
.folio-motion .intro-studio{opacity:var(--cover-opacity,1);transform:scale(calc(1 - var(--folio-p) * .018));transform-origin:50% 48%}
.folio-motion .studio-profile{opacity:var(--profile-opacity,0);clip-path:none;transform:none;border-top:0;box-shadow:none}
.folio-motion .studio-profile::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 72% 48%,rgba(237,58,49,.11),transparent 26%),linear-gradient(115deg,transparent 0 56%,rgba(244,241,233,.035) 56.2% 56.5%,transparent 56.7%);opacity:var(--profile-opacity,0)}
.folio-motion .studio-profile>*{position:relative;z-index:2}
.folio-motion .studio-biography{opacity:var(--profile-opacity,0);transform:translate3d(calc((1 - var(--folio-p)) * -22px),0,0)}
.folio-motion .folio-portrait{z-index:4}
.folio-motion .folio-pager{z-index:8}
.showcase-sticky{height:calc(100svh - 70px)!important}
#neuroheal .portfolio-spread>button,#familyfit .portfolio-spread>button{background:#11110f}
#neuroheal .portfolio-spread>button img,#familyfit .portfolio-spread>button img{transform:scale(1.075);transform-origin:center}
#neuroheal .portfolio-spread>button:hover img,#familyfit .portfolio-spread>button:hover img{transform:scale(1.095)}
@media(max-width:820px){
 .showcase-sticky{height:calc(100svh - 60px)!important;min-height:0!important}
 .showcase-stage{min-height:0!important}
 #neuroheal .portfolio-spread>button,#familyfit .portfolio-spread>button{aspect-ratio:1.42;overflow:hidden;border-bottom:1px solid currentColor}
 #neuroheal .portfolio-spread>button img,#familyfit .portfolio-spread>button img{width:100%;height:100%;object-fit:cover;transform:scale(1.17)}
}
@media(max-width:700px){
 .folio-sequence.folio-motion{height:230svh}
 .folio-motion .studio-profile{grid-template-rows:38px minmax(0,1fr) 44px;padding:0 18px}
 .folio-motion .studio-profile-top{padding:9px 0;font-size:8px}
 .folio-motion .studio-profile-top>span:last-child{font-size:18px}
 .folio-motion .studio-profile-grid{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,54%) minmax(0,46%);gap:0;padding:10px 0 0;min-height:0}
 .folio-motion .studio-biography{grid-row:1;min-height:0;padding-right:4px;overflow:hidden}
 .folio-motion .studio-biography .studio-eyebrow{margin-bottom:8px;font-size:9px}
 .folio-motion .studio-biography h2{font-size:clamp(20px,5.7vw,26px);line-height:1.25;letter-spacing:-.035em}
 .folio-motion .studio-biography h2 em{display:inline;margin:0 0 0 .25em}
 .folio-motion .studio-summary{margin-top:9px;font-size:12px;line-height:1.52;max-width:30em}
 .folio-motion .studio-detail{margin-top:6px;font-size:10px;line-height:1.48;max-width:34em}
 .folio-motion .studio-actions{margin-top:8px;gap:7px 12px}
 .folio-motion .studio-button{min-height:32px;padding:6px 10px;font-size:9px;gap:12px}
 .folio-motion .studio-button>span:last-child{font-size:14px}
 .folio-motion .studio-pdf,.folio-motion .studio-resume{font-size:9px;padding:5px 0}
 .folio-motion .studio-full-portrait{grid-row:2;width:100%;height:100%;min-height:0;margin:0;overflow:hidden}
 .folio-motion .studio-image-frame{height:100%;width:min(78%,320px);margin-left:auto;overflow:hidden}
 .folio-motion .studio-transition{font-size:7vw;padding:8px 0}
 .folio-motion .folio-pager{height:30px;padding:0 14px;gap:12px}
 .folio-pager button{font-size:8px;min-height:30px}
}
@media(max-height:620px) and (orientation:landscape){
 .folio-sequence.folio-motion{height:250svh}
 .folio-motion .studio-profile-grid{grid-template-columns:1.12fr .88fr;grid-template-rows:1fr;gap:20px;padding:10px 0}
 .folio-motion .studio-biography{grid-column:1;grid-row:1}
 .folio-motion .studio-full-portrait{grid-column:2;grid-row:1;width:100%;height:100%}
 .folio-motion .studio-image-frame{width:100%;height:100%}
 .folio-motion .studio-biography h2{font-size:20px;line-height:1.22}
 .folio-motion .studio-summary{font-size:11px;line-height:1.45;margin-top:7px}
 .folio-motion .studio-detail{display:none}
 .folio-motion .studio-actions{margin-top:7px}
 .folio-motion .studio-transition{display:none}
}