/* HYENAS STUDIO signs the introduction; the client work remains the main event. */
#work #practice{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,330px);gap:clamp(28px,5vw,72px);align-items:center;min-height:220px}
#work #practice>div{max-width:680px;width:auto}
#work #practice .collection-intro{max-width:610px}
.studio-placement{position:relative;margin:0;justify-self:end;width:100%;max-width:330px;height:236px}
.studio-mark-stage{position:absolute;inset:0 0 24px}
.studio-mark-stage iframe,.studio-mark-still{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:dark;object-fit:contain}
.studio-mark-stage iframe{opacity:0;pointer-events:none;transition:opacity .35s ease}
.studio-mark-still{transition:opacity .35s ease}
.studio-motion-ready iframe{opacity:1}.studio-motion-ready .studio-mark-still{opacity:0}
.studio-placement .studio-motion-toggle{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:10px;border:1px solid #ffffff28;border-radius:50%;background:#ffffff05;color:#bcc6cb;box-shadow:inset 0 1px #ffffff13;cursor:pointer;transition:color .2s,background .2s;transform:none!important}
.studio-placement .studio-motion-toggle[hidden]{display:none}
.studio-motion-toggle svg{width:16px;height:16px;flex:none}.studio-motion-toggle .studio-play-symbol{display:none}
.studio-motion-toggle[aria-pressed=true] .studio-play-symbol{display:block}.studio-motion-toggle[aria-pressed=true] .studio-pause-symbol{display:none}
.studio-placement .studio-motion-toggle:hover{background:#ffffff12;color:#fff}
.studio-motion-toggle:focus-visible{outline:1px solid #e0e8dd;outline-offset:3px}
/* Small actions get an even perimeter and deliberate space around the label. */
.chapter-rail .inline-contact{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-height:38px;padding:8px 14px;margin-left:10px;gap:10px;max-width:100%;border:1px solid #ffffff38;border-radius:999px;background:linear-gradient(120deg,#ffffff0b,#ffffff03);box-shadow:inset 0 1px #ffffff14;color:#dce6db;font:400 11px/1.4 Arial,sans-serif;text-decoration:none;transform:none!important;transition:background .2s,border-color .2s}
.chapter-rail .inline-contact::before,.chapter-rail .inline-contact::after{display:none!important}
.chapter-rail .inline-contact .ui-icon{width:15px;height:15px;flex:0 0 15px;transform:none!important}
.chapter-rail .inline-contact:hover{background:#ffffff12;border-color:#ffffff60;transform:none!important}
.chapter-rail .inline-contact:focus-visible{outline:1px solid #dce6db;outline-offset:3px}
#work .rail-context{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
#work .rail-context .inline-contact{margin:0}
@media(max-width:760px){
 #work #practice{grid-template-columns:minmax(0,1fr) 122px;gap:0 16px;min-height:0;align-items:start}
 #work #practice>div{display:contents}
 #work #practice>div>.eyebrow{grid-column:1;grid-row:1;align-self:end;margin:0;padding-top:8px;font-size:8px;line-height:1.5}
 #work #practice h2{grid-column:1;grid-row:2;font-size:28px!important;line-height:1.06;margin:10px 0 0;max-width:230px;text-wrap:balance}
 #work #practice .collection-intro{grid-column:1 / -1;grid-row:3;margin-top:20px}
 #work #practice .rail-context{grid-column:1 / -1;grid-row:4;gap:10px;margin-top:14px}
 .studio-placement{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:122px;max-width:none;height:114px;margin:0}
 .studio-placement .studio-mark-stage{inset:0 0 24px}
 .studio-placement .studio-motion-toggle{right:-7px;bottom:-6px;width:44px;height:44px;min-height:44px;padding:15px;border-color:transparent;box-shadow:none;background:transparent;color:#b8c2cb}
 .studio-placement .studio-motion-toggle svg{width:14px;height:14px}
 .chapter-rail .inline-contact{min-height:44px;padding:10px 14px;margin:0;font-size:10px}
}
@media(max-width:370px){
 .site-header .nav-glass>a:not(.brand),.site-header .nav-glass>button,.site-header.compact .nav-glass>a:not(.brand),.site-header.compact .nav-glass>button{padding-inline:6px!important}
}
@media(max-width:360px){
 #work #practice{grid-template-columns:minmax(0,1fr) 104px;column-gap:12px}
 #work #practice h2{font-size:26px!important}
 .studio-placement{width:104px;height:108px}
}
@media(prefers-reduced-motion:reduce){.studio-mark-stage iframe,.studio-mark-still{transition:none}}