:root{--ink:#20201e;--muted:#73736f;--edge:24px}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.45 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
p,h1,figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,.carousel:focus-visible{outline:1px solid #555;outline-offset:3px}
header{padding:22px 24px 0}
.header-brand-row{display:flex;justify-content:flex-start;min-height:46px}
.header-links{display:flex;align-items:center;gap:18px}
.instagram{font-size:12px;color:var(--muted)}
.instagram:hover{color:var(--ink)}
.brand{display:flex;flex-direction:row;align-items:center;gap:16px}
.brand:hover{text-decoration:none}
.brand-mark{display:block;position:relative;width:112px;height:46px;overflow:hidden}
.brand-mark img{position:absolute;width:224px;height:auto;max-width:none;left:-28px;top:-9px}
.byline{text-align:left;font-size:12px;color:var(--muted);white-space:nowrap}
.header-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #e8e8e6;margin-top:12px;padding:9px 0 11px}
.locations{font-size:12px;color:var(--muted);white-space:nowrap}
h1,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
main{padding:0 var(--edge) var(--edge)}
.carousel{touch-action:pan-y}
.image-stage{position:relative;isolation:isolate}
.slides{width:100%;height:min(calc(100svh - 178px),calc((100vw - (2 * var(--edge))) * .4167));display:grid}
.slide{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;animation:fade .3s ease}
.slide[hidden]{display:none}
.project-image{width:100%;height:100%;aspect-ratio:12/5;display:block;object-fit:cover;transform-origin:center center}
#viru .project-image,#central .project-image,#ataco .project-image{transform:scale(1.1)}
#mil .project-image,#sushi-nikkei .project-image,#cora-cora .project-image{transform:scale(1.2)}
.image-stage::after{content:"";position:absolute;z-index:1;pointer-events:none;inset:auto 0 0;height:34%;background:linear-gradient(0deg,rgba(0,0,0,.34),rgba(0,0,0,0) 78%)}
.caption{position:absolute;z-index:2;left:24px;bottom:20px;color:#fff;line-height:1.18;text-shadow:0 1px 14px rgba(0,0,0,.42);white-space:nowrap;pointer-events:none}
.caption-client,.caption-project{display:block}
.caption-client{font-size:18px;font-weight:500;letter-spacing:-.015em}
.caption-project{margin-top:3px;font-size:13px;font-weight:400}
.central-logo{position:absolute;z-index:2;top:22px;right:24px;width:88px;height:auto;filter:drop-shadow(0 1px 8px rgba(255,255,255,.32))}
.image-navigation{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;opacity:0;pointer-events:none;transition:opacity .25s ease;mix-blend-mode:difference;z-index:3}
.image-navigation button{display:flex;align-items:center;justify-content:center;width:52px;height:64px;padding:14px;color:#fff;opacity:.28;transition:opacity .2s ease}
.image-navigation svg{width:24px;height:16px;fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.image-stage:hover .image-navigation,.image-stage:focus-within .image-navigation{opacity:1;pointer-events:auto}
.image-navigation button:hover{opacity:.6}
.image-navigation button:focus-visible{opacity:1;outline-color:#fff}
.carousel-footer{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:8px;padding:4px 16px 14px}
.controls{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:center}
.playback{width:44px;height:44px;font-size:15px;line-height:1;color:var(--muted)}
.playback:hover{color:var(--ink)}
.play-icon{display:none}
.playback.is-paused .pause-icon{display:none}
.playback.is-paused .play-icon{display:inline}
.contact{font-size:12px;color:var(--muted)}
.site-note{grid-column:1 / -1;grid-row:2;margin-top:2px;border-top:1px solid #e8e8e6;padding-top:10px;text-align:center;color:#888883;font-size:10px;font-weight:400;line-height:1.4}
@keyframes fade{from{opacity:.65}to{opacity:1}}
@media(max-width:900px){
 .site-note{padding-top:8px}
}
@media(max-width:650px){
 :root{--edge:8px}
 header{padding:20px 16px 0}
 .carousel-footer{padding:4px 12px 12px}
 .header-meta{margin-top:10px;padding:8px 0 10px}
 .brand-mark{width:101px;height:42px}
 .brand-mark img{width:202px;left:-25px;top:-8px}
 .image-navigation{padding:0 2px}
 .image-navigation button{width:44px;height:56px;padding:10px}
 .slides{height:auto;aspect-ratio:12/5}
 .caption{left:14px;bottom:12px}
 .caption-client{font-size:14px}
 .caption-project{margin-top:2px;font-size:10px}
 .central-logo{top:12px;right:14px;width:62px}
}
@media(max-width:360px){
 header{padding:20px 12px 0}
}
@media(hover:none){.image-navigation{opacity:1;pointer-events:auto}.image-navigation button{opacity:.25}}
@media(prefers-reduced-motion:reduce){.slide{animation:none}.image-navigation,.image-navigation button{transition:none}}