.work-intro{background:#fff;padding:clamp(65px,7vw,100px) clamp(20px,6vw,100px) 60px}.kicker,.section-kicker,.case-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;font:900 10px Arial;letter-spacing:.12em}.work-intro h1{font:900 clamp(70px,13vw,175px)/.84 Arial;letter-spacing:-.11em;margin:50px 0 30px}.work-intro h1 span{color:#a7a7a7}.work-intro p{font-size:19px;margin:0;color:#555}.loopi-case-studies{background:#f0f0ee;padding:60px clamp(20px,6vw,100px) 40px}.section-kicker{border-bottom:1px solid #aaa;padding-bottom:19px}.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}.case-card{min-width:0;position:relative}.case-visual{position:relative;aspect-ratio:.78;background:#161616;overflow:hidden;isolation:isolate}.case-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.19,1,.25,1),opacity .7s}.case-image.primary{z-index:1}.case-image.secondary{z-index:2;opacity:0;transform:scale(1.16)}.case-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#000e 0%,#0009 37%,transparent 86%);opacity:0;transition:opacity .5s}.case-reveal-copy{position:absolute;left:26px;right:20px;bottom:28px;color:#fff;transform:translateY(20px);transition:transform .65s cubic-bezier(.18,1,.24,1)}.case-micro,.case-tag{display:block;font:900 9px Arial;letter-spacing:.13em}.case-reveal-copy strong{display:block;font:900 clamp(24px,2.9vw,44px)/1.05 Arial;letter-spacing:-.06em;margin:13px 0 11px}.case-reveal-copy p{font-size:13px;line-height:1.55;max-width:300px;margin:0 0 18px}.case-tag{opacity:.8;line-height:1.4}.image-counter{position:absolute;z-index:4;top:21px;left:22px;color:white;font:900 10px Arial;letter-spacing:.1em;text-shadow:0 2px 10px #000b}.case-card:is(:hover,:focus-within,.is-open) .case-image.primary{transform:scale(1.08);opacity:.1}.case-card:is(:hover,:focus-within,.is-open) .case-image.secondary{opacity:1;transform:scale(1)}.case-card:is(:hover,:focus-within,.is-open) .case-overlay{opacity:1}.case-card:is(:hover,:focus-within,.is-open) .case-reveal-copy{transform:translateY(0)}.case-base{border-top:1px solid #111;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;padding-top:17px}.case-base>div>span{font:900 9px Arial;letter-spacing:.1em;color:#777}.case-base h2{font:900 clamp(18px,2vw,27px) Arial;letter-spacing:-.055em;margin:9px 0}.case-link{background:#111;color:#fff;width:104px;min-width:104px;height:46px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:6px;font:900 9px Arial;letter-spacing:.04em;transition:background .2s}.case-link b{font-size:20px;font-weight:400}.case-link:hover{background:#555}.case-foot{margin-top:48px;border-top:1px solid #aaa;padding-top:25px;color:#555}.case-foot a{border-bottom:1px solid;padding-bottom:6px;color:#111}.study-next{padding:110px clamp(20px,6vw,100px);background:#fff}.study-next>span{font:900 10px Arial;letter-spacing:.14em}.study-next h2{font:900 clamp(55px,8vw,120px)/.96 Arial;letter-spacing:-.085em;margin:30px 0}.study-next h2 em{font-family:Georgia,serif;font-weight:400}.study-next p{font-size:16px;line-height:1.6;max-width:500px;color:#666}.study-next a{font:900 11px Arial;letter-spacing:.08em;border-bottom:1px solid;display:inline-block;padding-bottom:8px;margin-top:22px}@media(max-width:970px){.case-grid{grid-template-columns:1fr 1fr}.case-card:last-child{grid-column:1/-1}.case-card:last-child .case-visual{aspect-ratio:1.5}}@media(max-width:650px){.case-grid{grid-template-columns:1fr}.case-card:last-child{grid-column:auto}.case-visual,.case-card:last-child .case-visual{aspect-ratio:1.05}.section-kicker span:last-child,.case-foot span{display:none}.work-intro h1{font-size:clamp(63px,14vw,105px)}.case-reveal-copy strong{font-size:32px}}@media(prefers-reduced-motion:reduce){.case-image,.case-overlay,.case-reveal-copy{transition:none!important}}

/* OPTION 02 / EDITORIAL REBUILD — three distinct story formats, in the card itself. */
.case-visual{cursor:pointer;isolation:isolate;outline-offset:4px}
.case-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:grayscale(.12);transform:scale(1);transition:filter .65s,transform .8s}
.cover-index{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px;color:#fff;font:900 9px/1.4 Arial;letter-spacing:.08em;background:linear-gradient(180deg,#0008,transparent 28%,transparent 70%,#0005);transition:opacity .35s}
.cover-index span:last-child{text-align:right}
.project-dossier{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;overflow:hidden;background:#151515;color:#fff;transform:translateY(100%);transition:transform .8s cubic-bezier(.2,.9,.2,1),opacity .45s}
.case-card:is(:hover,:focus-within,.is-open) .project-dossier{opacity:1;transform:translateY(0)}
.case-card:is(:hover,:focus-within,.is-open) .cover-index{opacity:0}
.dossier-top{position:absolute;z-index:10;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:8px;border-bottom:1px solid #ffffff42;font:900 9px/1.3 Arial;letter-spacing:.075em;background:#141414}
.dossier-bottom{position:absolute;z-index:10;left:0;right:0;bottom:0;min-height:105px;background:#161616;display:flex;justify-content:space-between;align-items:end;gap:10px;padding:17px;border-top:1px solid #ffffff45}
.dossier-bottom strong{font:900 clamp(24px,2.4vw,40px)/.93 Arial;letter-spacing:-.065em}
.dossier-bottom>span{font:800 8px/1.5 Arial;letter-spacing:.06em;text-align:right;max-width:98px;color:#bbb}
.feed-reel{position:absolute;inset:46px 0 105px;background:#f1f0ea;overflow:hidden;perspective:500px}
.reel-card{position:absolute;top:8%;height:85%;width:48%;min-height:110px;background:white;color:#111;padding:5px;box-shadow:0 8px 20px #0005;will-change:transform;transition:none}
.reel-card img{width:100%;height:65%;object-fit:cover}
.reel-head{font:900 7px Arial;display:flex;justify-content:space-between;gap:4px;padding:5px 3px}
.reel-actions{font-size:10px;letter-spacing:.06em;padding:5px 3px}
.reel-line{height:3px;width:68%;background:#ddd;margin:0 3px}
.reel-one{left:5%;transform:translateX(-65%) scale(.75) rotate(-8deg)}
.reel-two{left:25%;transform:translateX(0) scale(1) rotate(0);z-index:2}
.reel-three{left:74%;transform:translateX(30%) scale(.75) rotate(8deg)}
.case-card:is(:hover,:focus-within,.is-open) .reel-one{animation:loopi-reel-1 7.2s ease-in-out .35s infinite}
.case-card:is(:hover,:focus-within,.is-open) .reel-two{animation:loopi-reel-2 7.2s ease-in-out .35s infinite}
.case-card:is(:hover,:focus-within,.is-open) .reel-three{animation:loopi-reel-3 7.2s ease-in-out .35s infinite}
@keyframes loopi-reel-1{0%,10%,100%{transform:translateX(-65%) scale(.75) rotate(-8deg);z-index:1}24%,43%{transform:translateX(58%) scale(1) rotate(0);z-index:4}58%,77%{transform:translateX(130%) scale(.75) rotate(8deg);z-index:1}90%{transform:translateX(-65%) scale(.75) rotate(-8deg);z-index:1}}
@keyframes loopi-reel-2{0%,10%,100%{transform:translateX(0) scale(1) rotate(0);z-index:4}24%,43%{transform:translateX(100%) scale(.75) rotate(8deg);z-index:1}58%,77%{transform:translateX(-85%) scale(.75) rotate(-8deg);z-index:1}90%{transform:translateX(0) scale(1) rotate(0);z-index:4}}
@keyframes loopi-reel-3{0%,10%,100%{transform:translateX(30%) scale(.75) rotate(8deg);z-index:1}24%,43%{transform:translateX(-133%) scale(.75) rotate(-8deg);z-index:1}58%,77%{transform:translateX(-112%) scale(1) rotate(0);z-index:4}90%{transform:translateX(30%) scale(.75) rotate(8deg);z-index:1}}
.dossier-shoot{background:#e7e6df;color:#111}
.dossier-shoot .dossier-top{background:#e7e6df;color:#111;border-color:#1114}
.dossier-shoot .dossier-bottom{background:#e7e6df;color:#111;border-color:#1114}
.dossier-shoot .dossier-bottom>span{color:#555}
.proof-sheet{position:absolute;inset:46px 0 105px;background-image:linear-gradient(#00000012 1px,transparent 1px),linear-gradient(90deg,#00000012 1px,transparent 1px);background-size:23px 23px;overflow:hidden}
.proof{position:absolute;width:57%;height:70%;margin:0;padding:7px 7px 20px;background:#fff;box-shadow:0 9px 20px #0004;opacity:0;transform:translateY(130%) rotate(0);transition:transform .7s cubic-bezier(.14,1.1,.23,1),opacity .3s}
.proof img{width:100%;height:100%;object-fit:cover}
.proof figcaption{font:900 7px Arial;letter-spacing:.1em;margin-top:5px}
.proof-a{left:2%;top:12%;z-index:1}
.proof-b{left:25%;top:8%;z-index:2}
.proof-c{left:43%;top:17%;z-index:3}
.case-card:is(:hover,:focus-within,.is-open) .proof-a{opacity:1;transform:translateY(0) rotate(-13deg);transition-delay:.15s}
.case-card:is(:hover,:focus-within,.is-open) .proof-b{opacity:1;transform:translateY(0) rotate(0deg);transition-delay:.32s}
.case-card:is(:hover,:focus-within,.is-open) .proof-c{opacity:1;transform:translateY(0) rotate(13deg);transition-delay:.49s}
.proof-crosshair{position:absolute;right:15px;top:12px;font-size:25px;line-height:1}
.case-card:is(:hover,:focus-within,.is-open) .proof-b{animation:loopi-contact-sheet 5s ease-in-out 1.2s infinite}
@keyframes loopi-contact-sheet{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}
.dossier-video{background:#0b0b0b}
.film-screen{position:absolute;top:46px;left:0;right:0;height:calc(100% - 205px);min-height:70px;overflow:hidden;background:#000}
.film-screen>img{height:100%;width:100%;object-fit:cover;filter:brightness(.8);transform:scale(1.05)}
.film-embed{position:absolute;inset:0;z-index:2;overflow:hidden}
.film-embed iframe{position:absolute;border:0;width:130%;height:130%;left:-15%;top:-15%;opacity:0;animation:loopi-film-in .5s ease .7s forwards}
@keyframes loopi-film-in{to{opacity:1}}
.film-indicator{position:absolute;z-index:3;bottom:8px;left:10px;padding:6px 8px;background:#111b;font:900 8px Arial;letter-spacing:.06em}
.edit-timeline{position:absolute;bottom:105px;height:54px;left:0;right:0;border-top:1px solid #888;overflow:hidden;padding:7px 5px;background:#1a1a1a}
.timeline-stills{display:flex;height:100%;gap:3px}
.timeline-stills img{height:100%;width:20%;object-fit:cover;filter:saturate(.4) brightness(.8)}
.timeline-cursor{position:absolute;top:0;left:0;width:2px;height:100%;background:#fff;box-shadow:0 0 0 1px #0003;transform:translateX(0)}
.case-card:is(:hover,:focus-within,.is-open) .timeline-cursor{animation:loopi-playhead 6s linear .5s infinite}
@keyframes loopi-playhead{from{left:0}to{left:100%}}
.case-visual:focus-visible{outline:3px solid #555}
@media(max-width:1100px){.dossier-bottom{min-height:92px}.feed-reel,.proof-sheet{bottom:92px}.film-screen{height:calc(100% - 192px)}.edit-timeline{bottom:92px}.dossier-bottom strong{font-size:clamp(23px,3vw,34px)}}
@media(max-width:650px){.case-visual{aspect-ratio:.88!important}.dossier-bottom{min-height:105px}.feed-reel,.proof-sheet{bottom:105px}.film-screen{height:calc(100% - 205px)}.edit-timeline{bottom:105px}.dossier-bottom strong{font-size:31px}}
@media(prefers-reduced-motion:reduce){.project-dossier,.proof,.reel-card,.film-embed iframe{transition:none!important;animation:none!important}.case-card:is(:hover,:focus-within,.is-open) .proof{opacity:1}.film-embed iframe{opacity:1}}
/* SOCIAL CAMPAIGNS / RECOGNISABLE POST CARDS.  Keep existing reel motion. */
.dossier-feed .reel-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:3px;background:#fff;color:#141414}
.dossier-feed .reel-head{height:31px;min-height:31px;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:4px 6px;font:700 8px Arial,sans-serif;letter-spacing:0}
.dossier-feed .reel-avatar{width:20px;height:20px;min-width:20px;border-radius:50%;display:grid;place-items:center;background:#161616;color:#fff;font:900 11px Arial,sans-serif}
.dossier-feed .reel-identity{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}
.dossier-feed .reel-identity strong{font:900 8px/1 Arial,sans-serif}
.dossier-feed .reel-identity small{font:600 5px/1.2 Arial,sans-serif;color:#888;letter-spacing:.03em}
.dossier-feed .reel-menu{font-size:11px;margin-left:auto;line-height:1;letter-spacing:1px}
.dossier-feed .reel-card .reel-photo{display:block;width:100%;height:auto;min-height:0;flex:1 1 auto;object-fit:cover;aspect-ratio:auto}
.dossier-feed .reel-actions{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:0 0 auto;padding:7px 7px 2px}
.dossier-feed .reel-actions-left{display:flex;align-items:center;gap:7px}
.dossier-feed .reel-actions svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dossier-feed .reel-caption{flex:0 0 auto;padding:4px 7px 2px;font:500 7px/1.25 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dossier-feed .reel-caption strong{font-weight:900}
.dossier-feed .reel-comment{flex:0 0 auto;padding:0 7px 7px;color:#888;font:500 7px Arial,sans-serif}
@media(max-width:650px){.dossier-feed .reel-head{height:34px;min-height:34px}.dossier-feed .reel-actions svg{width:14px;height:14px}.dossier-feed .reel-caption{font-size:8px}}

/* Official Loopi profile icon in the miniature social posts. */
.dossier-feed .reel-avatar{overflow:hidden;background:#fff;border:1px solid #e8e8e8}
.dossier-feed .reel-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}