/* Let the artwork set the frame, never crop it to a fixed tile. */
body.work-body .tile .thumb{height:auto!important;aspect-ratio:auto!important;background:none!important;overflow:visible!important;transform:none!important}
body.work-body .tile .thumb img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;transform:none!important;filter:none!important}
body.work-body .tile:hover .thumb{transform:none!important}
body.work-body .tiles{align-items:flex-start}
body.work-body #brand-strategy-design .tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 40px;overflow:visible;scroll-snap-type:none;padding:0}
body.work-body #brand-strategy-design .tile{width:100%!important;min-width:0!important;max-width:none!important;margin:0;align-self:start}
body.work-body #brand-strategy-design .tile:nth-child(even){padding-top:100px!important}
body.work-body #brand-strategy-design .tile .thumb img{max-height:620px;object-fit:contain;object-position:left center}
body.work-body #brand-strategy-design .tile[data-key=mend] .thumb{background:#edf2bc!important;border-radius:16px}
body.work-body #brand-strategy-design .tile[data-key=mend] .thumb img{padding:12%;max-height:480px}
body.work-body #brand-strategy-design .tarr{display:none!important}
body.work-body #modal .panel-vis{display:flex;align-items:center;justify-content:center;min-height:0;height:auto;padding:28px;background:#eeeee7;overflow:visible}
body.work-body #mHero{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:75svh;object-fit:contain!important;object-position:center!important;transform:none!important}
body.work-body #modal .mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;columns:auto;align-items:start}
body.work-body #modal .mosaic figure{margin:0;background:transparent;overflow:visible;height:auto!important}
body.work-body #modal .mosaic figure.landscape{grid-column:1/-1}
body.work-body #modal .mosaic figure img{width:100%;height:auto!important;object-fit:contain!important;transform:none!important;max-height:none;aspect-ratio:auto!important}
body.work-body #modal .mosaic figure::after{display:none}
body.work-body #modal .mosaic figure figcaption{position:static;color:#697063;opacity:1;font-size:10px;margin-top:10px}
@media(max-width:700px){body.work-body #brand-strategy-design .tiles{grid-template-columns:1fr;gap:38px}body.work-body #brand-strategy-design .tile:nth-child(even){padding-top:0!important}body.work-body #modal .mosaic{grid-template-columns:1fr;gap:24px}body.work-body #modal .panel-vis{padding:18px}}
body.work-body .tile .thumb{min-height:0!important;padding:0!important}
body.work-body .tile .thumb img{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;margin:0!important}
body.work-body #brand-strategy-design .tile .thumb img{max-height:none!important}
body.work-body #brand-strategy-design .tile[data-key=mend] .thumb img{padding:12%;box-sizing:border-box}
/* Compact bento: varied footprints with uncropped artwork inside each cell. */
body.work-body #brand-strategy-design .tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 22px;align-items:start}
body.work-body #brand-strategy-design .tile{grid-column:span 2;padding:0!important}
body.work-body #brand-strategy-design .tile:nth-child(even){padding:0!important}
body.work-body #brand-strategy-design .tile:nth-child(5n+1),body.work-body #brand-strategy-design .tile:nth-child(5n+2){grid-column:span 3}
body.work-body #brand-strategy-design .tile .thumb{height:260px!important;min-height:0!important;display:flex!important;align-items:center;justify-content:center;background:#eeeee8!important;border-radius:16px;overflow:hidden!important}
body.work-body #brand-strategy-design .tile .thumb img{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
body.work-body #brand-strategy-design .tile:nth-child(5n+1) .thumb,body.work-body #brand-strategy-design .tile:nth-child(5n+2) .thumb{height:300px!important}
body.work-body #brand-strategy-design .tile[data-key=mend] .thumb img{padding:30px!important}
body.work-body #brand-strategy-design .tile .t-name{font-size:22px!important}
body.work-body #brand-strategy-design .tile .t-bot{padding-top:12px!important}
body.work-body #modal .mosaic{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
body.work-body #modal .mosaic figure{grid-column:span 2;min-width:0}
body.work-body #modal .mosaic figure.landscape{grid-column:span 3}
body.work-body #modal .mosaic figure img{height:280px!important;object-fit:contain!important;background:#eeeee8;border-radius:12px}
body.work-body #mHero{max-height:420px!important}
@media(max-width:800px){body.work-body #brand-strategy-design .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}body.work-body #brand-strategy-design .tile,body.work-body #brand-strategy-design .tile:nth-child(n){grid-column:span 1}body.work-body #brand-strategy-design .tile .thumb,body.work-body #brand-strategy-design .tile:nth-child(n) .thumb{height:230px!important}body.work-body #modal .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}body.work-body #modal .mosaic figure,body.work-body #modal .mosaic figure.landscape{grid-column:span 1}body.work-body #modal .mosaic figure img{height:220px!important}}
@media(max-width:480px){body.work-body #brand-strategy-design .tile .thumb,body.work-body #brand-strategy-design .tile:nth-child(n) .thumb{height:180px!important}body.work-body #brand-strategy-design .tile .t-name{font-size:18px!important}body.work-body #brand-strategy-design .tile .t-view{display:none!important}body.work-body #brand-strategy-design .tile[data-key=mend] .thumb img{padding:12px!important}body.work-body #modal .mosaic figure img{height:180px!important}body.work-body #mHero{max-height:280px!important}}
body.work-body #brand-strategy-design .tile{grid-column:span 2!important}
body.work-body #brand-strategy-design .tile:nth-child(5n+1),body.work-body #brand-strategy-design .tile:nth-child(5n+2){grid-column:span 3!important}
@media(max-width:800px){body.work-body #brand-strategy-design .tile:nth-child(n){grid-column:span 1!important}}
/* Focus galleries replace the collection grids. */
body.work-body .focus-collection{height:var(--travel);padding:0!important;position:relative;margin-top:80px;scroll-margin-top:0;overflow:visible!important}
body.work-body .focus-stage{position:sticky;top:0;height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;padding:140px 0 35px;background:#f7f7f3}
body.work-body .focus-heading{text-align:center;flex:none}
body.work-body .focus-heading h2{font-family:inherit;font-weight:400;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.045em;line-height:1.1;margin:0}
body.work-body .focus-heading p{font-size:13px;color:#777e72;margin:14px 0 0}
body.work-body .focus-heading p span{margin-left:10px}
body.work-body .focus-strip{height:58svh;position:relative;width:100%;overflow:hidden;touch-action:pan-y;isolation:isolate}
body.work-body .focus-card{position:absolute;top:43%;transform:translateY(-50%);border:0;background:none;padding:0;margin:0;color:#283027;cursor:pointer;text-align:left;font:inherit;overflow:visible}
body.work-body .focus-card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:none}
body.work-body .focus-card>span{position:absolute;top:calc(100% + 16px);left:0;right:0;text-align:center;font-size:13px;line-height:1.3;min-width:100px;transition:opacity .1s}
body.work-body .focus-card small{display:block;margin-top:6px;font-size:11px;color:#7b8177}
body.work-body .focus-card:not(.is-current) small{visibility:hidden}
body.work-body .focus-card:focus-visible{outline:2px solid #66735c;outline-offset:8px}
body.work-body .focus-footer{display:flex;align-items:center;justify-content:center;gap:24px;position:relative}
body.work-body .focus-footer button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:10px}
body.work-body .focus-ticks{display:flex;align-items:center;gap:5px}
body.work-body .focus-ticks button{width:9px;height:32px;padding:0;position:relative}
body.work-body .focus-ticks button::after{content:'';position:absolute;left:4px;top:10px;width:1px;height:12px;background:#b8bdb1;transition:height .2s,top .2s}
body.work-body .focus-ticks button.active::after{height:26px;top:3px;background:#283027;width:2px}
body.work-body .focus-count{position:absolute;right:0;font-size:12px;color:#777e72}
@media(max-width:700px){body.work-body .focus-stage{padding:140px 0 28px;min-height:500px}body.work-body .focus-heading h2{font-size:32px}body.work-body .focus-strip{width:calc(100% + 40px);margin-left:-20px;height:52svh}body.work-body .focus-count{display:none}body.work-body .focus-card>span{font-size:12px}}
body.work-body .focus-heading h2{font-size:clamp(30px,3.4vw,52px)!important;line-height:1.1!important;letter-spacing:-.045em!important}
@media(max-width:700px){body.work-body .focus-heading h2{font-size:32px!important}body.work-body .focus-strip{width:100%;margin-left:0}}
/* Rounded, edge-to-edge artwork; details appear on interaction. */
body.work-body .focus-card img{border-radius:16px;transition:transform .4s cubic-bezier(.2,.7,.3,1);object-fit:contain}
body.work-body .focus-card:hover,body.work-body .focus-card:focus-visible{z-index:200!important}
body.work-body .focus-card:hover img,body.work-body .focus-card:focus-visible img{transform:scale(1.09)}
body.work-body .focus-card>span{opacity:0!important;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s;top:calc(100% + 28px)}
body.work-body .focus-card:hover>span,body.work-body .focus-card:focus-visible>span{opacity:1!important;transform:translateY(0)}
body.work-body .focus-card small{display:none!important}
body.work-body .focus-strip{width:100vw;max-width:none;margin-left:calc((100% - 100vw)/2)}
body.work-body .focus-collection{margin-top:0}
body.work-body .focus-stage{background:transparent}
@media(prefers-reduced-motion:reduce){body.work-body .focus-card img,body.work-body .focus-card>span{transition:none}}
/* Curated collections end with a scrolling editorial line. */
body.work-body .focus-ending{position:absolute;inset:30% 0 15%;width:100vw;margin-left:calc((100% - 100vw)/2);display:flex;align-items:center;overflow:hidden;pointer-events:none;opacity:0}
body.work-body .focus-ending p{font-size:clamp(70px,11vw,190px)!important;line-height:1.06!important;letter-spacing:-.055em;white-space:nowrap;font-weight:400;margin:0;will-change:transform}
body.work-body .focus-ending em{font-family:'Instrument Serif',serif;font-weight:400}
body.work-body:has(#modal.open)>.nav{z-index:1150!important;background:#f7f7f4!important;color:#242923!important}
body.work-body #modal{top:var(--project-nav-height,76px)}
body.work-body #modal .modal-panel{border-top:1px solid #ddd}
@media(max-width:700px){body.work-body .focus-ending p{font-size:19vw!important;white-space:normal;width:150vw;min-width:150vw}body.work-body .focus-ending{inset:27% 0 10%}}
body.work-body .focus-ending p{transform-origin:left center;will-change:transform,opacity}
body.work-body .focus-strip{will-change:transform,opacity}
/* The closing phrase is the next item in the filmstrip, not an overlay. */
body.work-body .focus-strip .focus-ending{position:absolute;inset:auto;top:43%;transform:translateY(-50%);width:max-content;height:auto;margin:0;overflow:visible;opacity:1;display:block}
body.work-body .focus-strip .focus-ending p{width:max-content;min-width:0;white-space:nowrap;font-size:clamp(70px,11vw,190px)!important;line-height:1.1!important;transform-origin:left center}
@media(max-width:700px){body.work-body .focus-strip .focus-ending p{font-size:19vw!important}}
/* Product history sits alongside the opening statement. */
body.work-body .work-lede>.product-evolution{display:flex;flex-direction:column;gap:22px;width:100%;max-width:none;padding:4px 0 0;margin:0;border:0;color:#283027}
body.work-body .work-lede>.product-evolution>span{display:flex;align-items:baseline;justify-content:space-between;gap:24px;font-size:clamp(25px,2.4vw,38px);font-weight:400;letter-spacing:-.04em;line-height:1.15;text-align:left}
body.work-body .work-lede>.product-evolution small{font-size:12px;letter-spacing:0;line-height:1.4;color:#77806f;margin:0;text-align:right}
@media(max-width:800px){body.work-body .work-lede>.product-evolution{margin-top:16px;gap:20px}body.work-body .work-lede>.product-evolution>span{font-size:28px}body.work-body .work-lede>.product-evolution small{font-size:11px}}
@media(pointer:coarse){
 body.work-body .focus-ticks{gap:0}
 body.work-body .focus-ticks button{width:32px;height:44px}
 body.work-body .focus-ticks button::after{left:15px;top:16px}
 body.work-body .focus-ticks button.active::after{top:9px}
 body.work-body .focus-footer{gap:12px}
 body.work-body .focus-prev,body.work-body .focus-next{min-width:44px;min-height:44px}
 body.work-body .focus-card:hover img{transform:none}
 body.work-body .exit{min-width:70px;min-height:44px}
}
@media(max-height:600px){
 body.work-body .focus-stage{min-height:0;padding:120px 0 8px}
 body.work-body .focus-heading h2{font-size:24px!important}
 body.work-body .focus-heading p{display:none}
 body.work-body .focus-strip{flex:1;min-height:0;height:auto}
 body.work-body .focus-footer{flex-shrink:0}
 body.work-body .focus-strip .focus-ending p{font-size:16vh!important}
}
/* Collection titles lead the same horizontal strip as the artwork. */
body.work-body .focus-stage{justify-content:center}
body.work-body .focus-strip{flex:1;min-height:0;height:auto}
body.work-body .focus-intro{position:absolute;top:43%;transform:translateY(-50%);text-align:center;padding:0 24px}
body.work-body .focus-intro h2{font-size:clamp(42px,6.5vw,98px)!important;line-height:1.08!important;letter-spacing:-.05em;font-weight:400;margin:0}
body.work-body .focus-intro p{margin:20px 0 0;font-size:13px;color:#777e72}
body.work-body .focus-footer{flex-shrink:0}
@media(max-width:700px){body.work-body .focus-intro h2{font-size:44px!important}body.work-body .focus-intro{padding:0 12px}}
@media(max-height:600px){body.work-body .focus-intro h2{font-size:38px!important}body.work-body .focus-intro p{margin-top:10px}}