/* The ten work examples use the same in-grid side expansion as the pack cards. */
#examples .examples{container-type:inline-size;--work-gap:16px;--work-original-width:calc((100cqw - 64px)/5);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px var(--work-gap);align-items:start}
#examples .example{position:relative;min-width:0;cursor:pointer}
#examples .work-project-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;width:100%;padding:0;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer}
#examples .work-project-toggle>span{color:#7b91aa;flex:0 0 auto;font-size:14px;line-height:1.4}
#examples .play-video{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;padding:0;border:0;border-radius:50%;background:transparent}
#examples .play-video>span{width:46px;height:46px}
#examples .examples.has-project-open{grid-template-columns:repeat(6,minmax(0,1fr))}
#examples .example.is-project-open{order:-1;grid-column:span 3;display:grid;grid-template-columns:var(--work-original-width) minmax(0,1fr);gap:18px;padding:8px;border:1px solid #dce5f1;border-radius:23px;background:linear-gradient(135deg,#fff 50%,#edf4fc);box-shadow:0 18px 40px -30px #25446855;cursor:default}
#examples .is-project-open>.video-frame{width:100%;align-self:start;border-radius:16px}
#examples .is-project-open>.example-label{display:none}
#examples .is-project-open>.play-error{grid-column:1/-1;grid-row:2}
#examples .work-project-panel{position:static;min-width:0;align-self:center;padding:36px 22px 24px 0}
#examples .work-project-client{margin:0 0 12px;font:550 12px/1.5 Inter,sans-serif;color:#465d74}
#examples .work-project-lead h3{font:700 27px/1.1 Display,'Arial Narrow',sans-serif;letter-spacing:-.025em;margin:0 0 20px;color:#174e88;text-wrap:balance;overflow-wrap:break-word}
#examples .work-project-summary{margin:0 0 20px;font:450 14px/1.55 Inter,sans-serif;color:#465d74}
#examples .work-project-channels{margin:0;font:500 11px/1.6 Inter,sans-serif;color:#465d74}
#examples .work-project-close{position:absolute;top:9px;right:9px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#607891;font:400 24px/1 Inter,sans-serif;cursor:pointer}
#examples .work-project-close:hover{background:#e9eff6;color:#174e88}
#examples .work-project-close:focus-visible,#examples .work-project-toggle:focus-visible,#examples .play-video:focus-visible{outline:2px solid #1b67ba;outline-offset:3px}
#examples .has-project-open .example:not(.is-project-open) h3{font-size:12px}
#examples .has-project-open .example:not(.is-project-open) .play-video,#examples .has-project-open .example:not(.is-project-open) .play-video>span{width:38px;height:38px;font-size:12px}
@media(max-width:1050px){
 #examples .example.is-project-open{gap:13px}
 #examples .work-project-panel{padding-right:14px}
 #examples .work-project-lead h3{font-size:25px}
}
@media(max-width:760px){
 #examples .examples{--work-gap:12px;--work-original-width:calc((100cqw - 12px)/2);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 #examples .examples.has-project-open{grid-template-columns:repeat(3,minmax(0,1fr))}
 #examples .example.is-project-open{grid-column:1/-1;gap:12px;padding:7px;border-radius:19px}
 #examples .is-project-open>.video-frame{border-radius:13px}
 #examples .work-project-panel{padding:38px 10px 18px 0}
 #examples .work-project-lead h3{font-size:24px}
 #examples .has-project-open .example:not(.is-project-open) h3{font-size:10px;line-height:1.4}
 #examples .has-project-open .example:not(.is-project-open) .play-video,#examples .has-project-open .example:not(.is-project-open) .play-video>span{width:30px;height:30px;font-size:10px}
}
@media(max-width:480px){
 #examples .example.is-project-open{column-gap:12px;row-gap:16px}
 #examples .work-project-panel:not([hidden]){display:contents}
 #examples .work-project-lead{grid-column:2;grid-row:1;align-self:center;min-width:0;padding:36px 7px 6px 0}
 #examples .work-project-client{font-size:11px;margin-bottom:10px}
 #examples .work-project-lead h3{font-size:23px;line-height:1.12;margin-bottom:0;text-wrap:initial}
 #examples .work-project-support{grid-column:1/-1;padding:0 10px 13px}
 #examples .work-project-summary{font-size:14px;margin-bottom:13px}
}
/* A small local filming scene introduces the reference gallery. */
#examples .work-heading{justify-content:flex-start;align-items:center;gap:26px;margin-bottom:28px}
#examples .work-heading-scene{display:block;flex:0 0 176px;width:176px;height:auto;object-fit:contain}
#examples .work-heading-copy{min-width:0;max-width:650px}
#examples .work-heading-intro{max-width:44ch;margin-top:10px;font-size:16px;line-height:1.5}
@media(max-width:760px){
 #examples .work-heading{gap:16px;margin-bottom:24px}
 #examples .work-heading-scene{flex-basis:104px;width:104px}
 #examples .work-heading h2{font-size:clamp(28px,7.7vw,34px);line-height:1.1}
 #examples .work-heading-intro{margin-top:8px;font-size:13px;line-height:1.5}
}
@media(max-width:370px){
 #examples .work-heading{gap:12px}
 #examples .work-heading-scene{flex-basis:84px;width:84px}
}

/* No layout movement: just a small tilt of a closed thumbnail. */
#examples .example.is-inviting:not(.is-project-open)>.video-frame{animation:work-card-hint 780ms ease-in-out both;transform-origin:50% 88%}
@keyframes work-card-hint{
  0%,100%{transform:translateY(0) rotate(0deg)}
  26%{transform:translateY(-1px) rotate(-.7deg)}
  56%{transform:translateY(-1px) rotate(.65deg)}
  78%{transform:translateY(0) rotate(-.25deg)}
}
@media(prefers-reduced-motion:reduce){
 #examples .example.is-inviting:not(.is-project-open)>.video-frame{animation:none;transform:none}
}