/* Client work only: supporting references beside the delivered imagery. */
#studio-work.case-gallery>.case-story{display:grid;grid-template-columns:minmax(160px,22%) minmax(0,1fr);column-gap:28px;row-gap:20px;padding-block:28px;align-items:start}
#studio-work>.case-story>.case-heading{grid-column:1/-1;display:flex;gap:16px;align-items:baseline;margin:0}
#studio-work>.case-story>.case-heading h3{font-size:28px;line-height:34px}#studio-work>.case-story>.case-heading p{margin:0 0 0 auto;max-width:55%;font-size:14px;line-height:22px}
#studio-work>.case-story>.case-context{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0;width:100%}
#studio-work .case-context .case-reference{display:block;flex:none;width:100%;min-width:0}
#studio-work .case-context .media-label,#studio-work .case-results>.media-label{display:block;min-height:40px;line-height:20px;padding:0 0 8px;margin:0 0 12px;border-bottom:1px solid var(--line);font-size:12px;flex:none;width:auto}
#studio-work .case-context .reference-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
#studio-work .case-context .reference-strip .image-open{display:block;width:100%;height:clamp(100px,15svh,150px);min-width:0;margin:0;flex:none}
#studio-work .case-context .reference-strip img{width:100%;height:100%;object-fit:contain}
#studio-work .case-context .case-actions{margin:0;align-self:start;white-space:normal}#studio-work .case-context .text-link{font-size:12px;line-height:20px}
#studio-work>.case-story>.case-results{grid-column:2;min-width:0;width:100%}
#studio-work .case-results .media-stage{height:clamp(300px,46svh,500px)}
#studio-work .result-gallery{max-width:none;margin:0}#studio-work .result-scroll{gap:12px}#studio-work .result-scroll>div{flex:0 0 calc((100% - 24px)/3);min-width:0}
#studio-work .result-scroll:has(>div:last-child:nth-child(2))>div{flex-basis:calc((100% - 12px)/2)}
#studio-work .rail-navigation{margin-top:8px}
@media(min-width:768px) and (max-width:1023px){#studio-work.case-gallery>.case-story{grid-template-columns:minmax(140px,23%) minmax(0,1fr);column-gap:20px}#studio-work .result-scroll>div{flex-basis:calc((100% - 12px)/2)}}
@media(max-width:767px){
 #studio-work.case-gallery>.case-story{grid-template-columns:84px minmax(0,1fr);column-gap:14px;row-gap:14px;padding-block:24px}
 #studio-work>.case-story>.case-heading{flex-wrap:wrap;gap:4px 10px}#studio-work>.case-story>.case-heading h3{font-size:24px;line-height:30px}#studio-work>.case-story>.case-heading p{width:100%;max-width:none;margin:0;font-size:13px;line-height:20px}
 #studio-work .case-context .media-label,#studio-work .case-results>.media-label{min-height:48px;margin-bottom:10px;font-size:11px;line-height:18px;padding-bottom:8px}
 #studio-work .case-context .reference-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 #studio-work .case-context .reference-strip .image-open{height:62px}
 #studio-work .case-context .case-actions{margin:0}#studio-work .case-context .text-link{font-size:11px;line-height:18px}
 #studio-work .case-results .media-stage{height:clamp(270px,40svh,340px)}
 #studio-work .result-scroll>div,#studio-work .result-scroll:has(>div:last-child:nth-child(2))>div,#studio-work .case-story[data-case="9"] .result-scroll>div{flex-basis:92%}
 #studio-work .result-scroll{gap:10px}#studio-work .rail-navigation{gap:8px}#studio-work .rail-navigation button{width:32px;height:32px}
}

/* One shared capability panel, including the additional retail application. */
[data-agent-suite] .agent-tabs{height:auto!important;min-height:0}
@media(min-width:1280px){[data-agent-suite]{align-items:stretch}[data-agent-suite] .agent-tabs{align-self:stretch;display:flex;flex-direction:column}[data-agent-suite] .agent-tabs button{flex:1;padding:10px 0;min-height:0}[data-agent-suite] .agent-tabs strong{font-size:15px;line-height:22px}[data-agent-suite] .agent-tabs span{font-size:12px;line-height:18px;margin-top:4px}}
@media(min-width:768px) and (max-width:1279px){[data-agent-suite] .agent-tabs{display:flex;flex-direction:row;overflow-x:auto}[data-agent-suite] .agent-tabs button{min-width:110px}}
#one-product .outfit-switch-controls{display:none}
[data-agent-suite] .demo-label{display:none}
@media(min-width:1024px){:is(#work,#studio-work) .result-scroll:has(>div:nth-child(4))>div{flex-basis:30%}}
@media(min-width:768px) and (max-width:1023px){:is(#work,#studio-work) .result-scroll:has(>div:nth-child(3))>div{flex-basis:46%}}
/* Keep the complete demonstration visible in short landscape viewports. */
[data-agent-suite] .agent-demo{max-width:min(100%,calc((100svh - 112px)*3018/1896))!important;margin-inline:auto;display:block}
@media(max-height:600px){[data-agent-suite]{grid-template-columns:1fr!important;gap:16px!important}[data-agent-suite] .agent-tabs{display:flex!important;flex-direction:row!important;overflow-x:auto;height:auto!important;min-height:48px!important;gap:20px!important}[data-agent-suite] .agent-tabs button{width:auto!important;flex:0 0 auto!important;min-width:100px;min-height:44px!important;padding:8px 0!important}[data-agent-suite] .agent-tabs span{display:none!important}[data-agent-suite] .agent-active-copy{display:block!important}}

/* Primary photo role: matches the tennis example, supporting references stay smaller. */
:is(#work,#studio-work) .case-results .media-stage{height:var(--media)!important}
@media(min-width:1024px){:is(#work,#studio-work) .result-scroll>div,:is(#work,#studio-work) .result-scroll:has(>div:last-child:nth-child(2))>div,:is(#work,#studio-work) .result-scroll:has(>div:nth-child(4))>div{flex:0 0 max(30%,calc(var(--media)*.67))}}
@media(min-width:768px) and (max-width:1023px){:is(#work,#studio-work) .result-scroll>div{flex:0 0 max(46%,calc(var(--media)*.67))}}
@media(max-width:767px){:is(#work,#studio-work) .result-scroll>div,:is(#work,#studio-work) .result-scroll:has(>div:last-child:nth-child(2))>div,:is(#work,#studio-work) .case-story[data-case="9"] .result-scroll>div{flex:0 0 max(92%,calc(var(--media)*.67))}}
@media(min-width:1280px) and (min-height:601px){[data-agent-suite] .agent-tabs button{padding-inline:14px!important;border-radius:2px;transition:background-color .16s,color .16s;cursor:pointer}[data-agent-suite] .agent-tabs button:hover,[data-agent-suite] .agent-tabs button.is-pointer-row{background:#e9e6e0;color:#191919}[data-agent-suite] .agent-tabs button[aria-selected="true"]{box-shadow:inset 3px 0 #191919}}
/* Narrow screens keep the whole person visible within the available result column. */
@media(max-width:767px){:is(#work,#studio-work) .result-scroll>div,:is(#work,#studio-work) .result-scroll:has(>div:last-child:nth-child(2))>div,:is(#work,#studio-work) .case-story[data-case="9"] .result-scroll>div{flex:0 0 92%}:is(#work,#studio-work) .case-results .media-stage{height:auto!important;aspect-ratio:3/4}:is(#work,#studio-work) .case-results .media-stage img{position:static!important;display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:contain!important;transform:none!important}}

/* Retail text stays inside the common feature panel, below the uniform video canvas. */
.agent-retail-note{font-size:14px;line-height:22px;margin:12px auto 0;color:var(--muted)}
@media(max-width:767px){.agent-retail-note{font-size:13px;line-height:20px}}
/* Keep the phone canvas aligned with its content column after the shared width cap. */
@media(max-width:767px){[data-agent-suite] .agent-demo{width:100%!important;margin-inline:auto!important}}

/* Latest request: reduce only the home brand AI canvas by 20%, proportionally. */
#brand-ai .agent-demo{width:80%!important;max-width:min(80%,calc((100svh - 112px)*3018/1896*.8))!important;margin-inline:auto!important}