body.brand-page{min-height:760px}
.brand-detail{display:block;height:auto;min-height:760px;padding:145px 54px 110px;overflow:visible}
.brand-return{position:absolute;left:54px;top:86px;color:#999;font-size:14px;text-decoration:none;padding-bottom:5px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.brand-return:hover,.brand-return:active,.brand-return:focus-visible{color:#111;border-bottom-color:#aaa}
.brand-gallery{opacity:1}
.brand-page:not(.is-ready) .brand-grid{visibility:hidden}
.brand-project h1{opacity:0;transition:opacity .25s}
.brand-page.is-ready .brand-project h1{opacity:1}
.brand-project h1{font-size:22px;line-height:1.4;font-weight:500;margin:0 0 25px;letter-spacing:.015em}
.brand-project+.brand-project{border-top:1px solid #ddd;margin-top:54px;padding-top:42px}
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
.brand-shot{display:block;border:0;background:#f5f5f5;padding:0;cursor:zoom-in;aspect-ratio:1658/931;overflow:hidden;transition:transform .24s,box-shadow .24s}
.brand-shot img{display:block;width:100%;height:100%;object-fit:contain}
.brand-shot:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0002}
.brand-shot:focus-visible{outline:2px solid #01ff01;outline-offset:4px}
.brand-intro{position:fixed;inset:0;overflow:hidden;z-index:6;pointer-events:none;perspective:1100px}
.brand-ribbon-image{position:absolute;left:0;top:0;width:260px;height:146px;object-fit:cover;box-shadow:0 9px 20px #0002;will-change:transform;backface-visibility:hidden;transform-origin:0 0}
.brand-page.is-entering{overflow:hidden;height:760px}
.brand-page.is-entering .brand-scroll{opacity:0;pointer-events:none}
.brand-scroll{position:fixed;bottom:18px;left:calc(50% - 35px);width:70px;border:0;padding:0;background:transparent;cursor:pointer;z-index:7;transition:opacity .2s;animation:brand-hint 2s ease-in-out infinite}
.brand-scroll img{display:block;width:100%;pointer-events:none}
.brand-scroll.at-end{opacity:0;pointer-events:none}
@keyframes brand-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.brand-lightbox{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:auto;color:white}
.brand-lightbox::backdrop{background:#000b;animation:shade-in .22s ease-out}
.lightbox-content{min-height:100%;display:flex;align-items:center;justify-content:center;padding:65px 5vw;pointer-events:none}
.lightbox-content img{display:block;width:min(1400px,90vw);height:auto;box-shadow:0 20px 70px #0006;pointer-events:auto;animation:art-in .3s cubic-bezier(.2,.7,.2,1)}
.lightbox-close{position:fixed;right:24px;top:16px;background:#0006;border:1px solid #fff4;border-radius:50%;width:42px;height:42px;font:30px/1 Arial;color:#fff;cursor:pointer;z-index:2}
@keyframes shade-in{from{background:#0000}to{background:#000b}}
@keyframes art-in{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.brand-scroll,.lightbox-content img,.brand-lightbox::backdrop{animation:none}.brand-shot,.brand-gallery{transition:none}}

.brand-return{border:0;padding-bottom:7px;line-height:0}
.brand-return img{display:block;width:77px;height:auto}
.brand-return::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#01ff01;opacity:0;transition:opacity .18s}
.brand-return:hover::after,.brand-return:active::after,.brand-return:focus-visible::after{opacity:1}
.brand-intro canvas{display:block}
.lightbox-content{display:block;min-height:0;width:min(1400px,90vw);margin:65px auto;padding:0;box-shadow:0 20px 70px #0006;animation:art-in .3s cubic-bezier(.2,.7,.2,1)}
.lightbox-content img{display:block;width:100%;height:auto;aspect-ratio:1658/931;margin:0;box-shadow:none;animation:none;background:#fff}
@media(prefers-reduced-motion:reduce){.lightbox-content{animation:none}}

.lightbox-content{width:min(1000px,72vw);margin:56px auto}
.brand-detail{padding-bottom:35px}

.brand-shot{position:relative;transform-origin:center;transition:transform .25s cubic-bezier(.2,.65,.3,1),box-shadow .25s}
.brand-shot:hover,.brand-shot:focus-visible{transform:translateY(-5px) scale(1.09);z-index:3;box-shadow:0 18px 36px #0003}