/* A portfolio image unfolds into framing, editing and publication studies. */
.hero.hero-motion{display:block;padding:48px 0 0;overflow:hidden;background:#fafafa}
.hero-motion .hero-copy{max-width:none;padding:0 5% 42px;display:grid;grid-template-columns:1.15fr 1fr;gap:0 7vw;align-items:start}
.hero-motion .hero-copy .eyebrow{grid-column:1/-1;margin-bottom:22px}
.hero-motion h1{grid-column:1;grid-row:2/4;font-size:clamp(42px,4.7vw,78px);margin:0;line-height:1.02}
.hero-motion .lead{grid-column:2;margin:0;font-size:14px;line-height:1.8;max-width:530px}
.hero-motion .actions{grid-column:2;margin-top:24px}
.motion-stage{--spread:0;--mx:0;--my:0;background:#111;color:#eee;position:relative;isolation:isolate;overflow:hidden;min-height:520px}
.stage-topline,.stage-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;margin:0 5%;gap:20px}
.stage-topline{padding:24px 0;font-size:9px;letter-spacing:.14em;color:#bbb;border-bottom:1px solid #ffffff24}
.stage-space{height:440px;max-width:1600px;margin:auto;position:relative;perspective:1200px}
.stage-orbit{position:absolute;left:20%;top:14%;width:60%;height:72%;border:1px solid #ffffff17;border-radius:50%;pointer-events:none}
.orbit-one{transform:rotate(-18deg) scaleX(1.3)}.orbit-two{transform:rotate(17deg) scaleX(1.15)}
.stage-film{position:absolute;left:24%;top:12%;width:52%;height:73%;background:#222;overflow:hidden;z-index:3;box-shadow:0 26px 65px #000a;transform:translate3d(calc(var(--mx)*7px),calc(var(--my)*5px),0) rotateY(calc(var(--mx)*-2deg)) scale(calc(1 - var(--spread)*.07));transition:width .7s,left .7s,opacity .7s;will-change:transform;border:1px solid #ffffff38}
.stage-film video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.9}
.film-guides{position:absolute;inset:15px;border:1px solid #ffffff3d;pointer-events:none}
.film-caption{position:absolute;bottom:27px;left:28px;right:28px;display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.07em;text-shadow:0 1px 6px #000}
.film-timeline{display:flex;position:absolute;bottom:0;left:0;width:100%;height:8px;gap:3px;background:#0b0b0b}
.film-timeline i{flex:1;background:#aaa}.film-timeline i:nth-child(3n){flex:1.8;background:#eee}.film-timeline i:nth-child(2n){background:#555}
.study-plan,.study-publish{position:absolute;top:18%;width:23%;padding:17px;background:#ebebeb;color:#111;border:1px solid #fff6;box-shadow:0 18px 45px #0009;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s;z-index:2}
.study-plan{left:5%;transform:translateX(calc(16px - var(--spread)*24px)) rotate(-9deg)}
.study-publish{right:5%;width:20%;top:4%;transform:translateX(calc(-12px + var(--spread)*22px)) rotate(9deg);background:#ddd}
.study-label{display:block;font-size:8px;letter-spacing:.15em;margin-bottom:14px}
.frame-study{position:relative;aspect-ratio:4/3;overflow:hidden;background:#aaa}.frame-study img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) contrast(.65) brightness(1.35)}
.frame-grid{position:absolute;inset:8px;background:linear-gradient(90deg,transparent 33%,#1118 33%,#1118 33.4%,transparent 33.4%,transparent 66%,#1118 66%,#1118 66.4%,transparent 66.4%),linear-gradient(transparent 33%,#1118 33%,#1118 33.4%,transparent 33.4%,transparent 66%,#1118 66%,#1118 66.4%,transparent 66.4%);border:1px solid #1119}
.frame-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:300}
.study-plan p,.study-publish p{font-size:10px;margin:12px 0;line-height:1.5}.study-small{font-size:6px;letter-spacing:.08em;color:#555}
.format-study{position:relative;aspect-ratio:4/5;overflow:hidden;background:#555}.format-study img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7)}.format-study>span{position:absolute;left:12px;bottom:18px;font-size:clamp(19px,2.6vw,42px);line-height:.95;letter-spacing:-.05em;color:white}
.format-lines{display:flex;gap:4px;margin-top:9px}.format-lines i{height:3px;background:#888;flex:1}.format-lines i:last-child{flex:3;background:#333}
.stage-contactsheet{position:absolute;left:36%;bottom:3%;display:flex;gap:5px;align-items:center;z-index:1;transform:rotate(-4deg);opacity:.55}.stage-contactsheet img{width:75px;height:44px;object-fit:cover;filter:grayscale(1)}.stage-contactsheet span{font-size:9px;color:#aaa;padding-left:10px}
.stage-bottom{padding:16px 0 24px;border-top:1px solid #ffffff24}.stage-tabs{display:flex;gap:6px}.stage-tabs button{background:transparent;border:1px solid transparent;color:#999;font:10px Inter,Arial,sans-serif;padding:10px 14px;border-radius:30px;cursor:pointer;white-space:nowrap}.stage-tabs button span{margin-left:9px}.stage-tabs button[aria-pressed=true]{background:#eee;color:#111}.stage-tabs button:focus-visible{outline:2px solid #fff;outline-offset:3px}.stage-caption{font-size:10px;color:#aaa;line-height:1.6;margin:0}
.motion-stage[data-phase=frame] .study-plan{transform:translate(12%,-2%) rotate(-2deg) scale(1.2);z-index:4}
.motion-stage[data-phase=frame] .stage-film{opacity:.7}.motion-stage[data-phase=connect] .study-publish{transform:translate(-10%,1%) rotate(1deg) scale(1.13);z-index:4}.motion-stage[data-phase=connect] .stage-film{opacity:.7}
section.capability-discovery{padding:65px 5% 35px;background:#f6f6f6}.discovery-heading{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}.discovery-heading .eyebrow{grid-column:1/-1;margin:0 0 12px}.discovery-heading h2{font-size:clamp(27px,3vw,42px);letter-spacing:-.045em;margin:0}.discovery-heading>p:last-child{font-size:13px;color:#666;align-self:center;margin:0}.capability-discovery .creative{max-width:1300px}.capability-discovery .composition{padding-top:35px}
@media(min-width:1600px){.stage-space{height:530px}}
@media(max-width:800px){.hero-motion .hero-copy{grid-template-columns:1fr;gap:20px}.hero-motion h1{grid-row:auto;grid-column:1}.hero-motion .lead,.hero-motion .actions{grid-column:1}.hero-motion .hero-copy .eyebrow{margin:0}.hero-motion .actions{margin:0}.stage-space{height:350px}.stage-film{left:16%;width:68%;top:20%;height:62%}.study-plan{left:3%;width:30%;top:9%;padding:10px}.study-publish{right:3%;width:25%;padding:10px}.study-small{font-size:5px}.study-plan p,.study-publish p{font-size:8px}.stage-contactsheet{left:25%;bottom:1%}.stage-bottom{align-items:flex-start;flex-direction:column;gap:12px}.stage-instruction{display:none}.discovery-heading{grid-template-columns:1fr}}
@media(max-width:480px){.hero.hero-motion{padding-top:32px}.hero-motion .hero-copy{padding-bottom:28px}.hero-motion .lead{font-size:13px}.hero-motion .actions{gap:18px}.stage-space{height:330px}.motion-stage{min-height:0}.stage-film{left:10%;width:80%;top:28%;height:55%}.study-publish{width:29%;top:3%;right:8%}.study-plan{width:37%;left:6%;top:8%}.study-label{font-size:7px;margin-bottom:7px}.study-plan p,.study-publish p{margin:6px 0}.film-caption{font-size:7px;left:18px;right:18px;bottom:22px}.stage-contactsheet img{width:48px;height:28px}.stage-contactsheet span{font-size:7px}.stage-tabs button{padding:9px 11px}.stage-topline{font-size:8px}.motion-stage[data-phase=frame] .study-plan{transform:translate(6%,10%) rotate(-2deg) scale(1.15)}.motion-stage[data-phase=connect] .study-publish{transform:translate(-12%,4%) rotate(1deg) scale(1.1)}section.capability-discovery{padding-top:44px}}
@media(prefers-reduced-motion:reduce){.stage-film,.study-plan,.study-publish{transition:none;will-change:auto}.stage-film{transform:none}.motion-stage .stage-orbit{display:none}}

/* Diverse portfolio content; original composition and interaction retained. */
.study-plan .frame-study{background:#ececec}.study-plan .frame-study img{object-fit:contain;filter:grayscale(1)}.study-publish .format-study{background:#202020}.study-publish .format-study img{height:62%;object-fit:contain;object-position:top;filter:grayscale(1)}.study-publish .format-study>span{font-size:clamp(19px,2.5vw,38px);bottom:10px}.stage-tabs button span{margin-left:6px}@media(max-width:480px){.stage-tabs{gap:0}.stage-tabs button{padding:9px 6px;font-size:9px}.study-publish .format-study>span{font-size:21px}}