/* The original logo, surrounded by mixed moving references. */
.header{position:sticky;top:0;height:90px;z-index:30;background:#fff}.brand-logo{height:78px;width:108px}.brand-name{font-size:12px}.brand-name span{font-size:7px}
.hero-journey{height:175svh;position:relative;background:#fff}
.hero-journey .hero{position:sticky;top:90px;height:calc(100svh - 90px);min-height:590px;max-height:none;padding:0;overflow:clip;isolation:isolate}
.spatial-stage{position:absolute;left:5%;right:5%;top:6%;height:74%;min-height:0;perspective:1100px;perspective-origin:50% 50%;z-index:3;cursor:grab;touch-action:pan-y;outline:none;user-select:none}
.spatial-stage:focus-visible{outline:2px dashed var(--ocean);outline-offset:-5px}.spatial-stage.is-dragging,.spatial-stage.is-dragging *{cursor:grabbing!important}
.spatial-stage{transform-style:flat;isolation:isolate}
.orbit-world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;z-index:0}
.orbit-item{position:absolute;left:50%;top:50%;width:150px;transform-style:preserve-3d;will-change:transform;pointer-events:auto}
.orbit-item .postcard{position:relative;display:block;inset:auto;width:100%;max-width:none;transform:none!important;margin:0!important;transition:box-shadow .25s;background:#fffefb;padding:4px 4px 7px;border:1px solid #efe9df;box-shadow:0 12px 27px -18px #36282066;cursor:grab;will-change:auto}
.orbit-item .postcard:hover{box-shadow:0 20px 38px -20px #36282088;z-index:auto!important}.orbit-item .postcard:focus-visible{outline:3px solid var(--ocean);outline-offset:5px}
.orbit-item .photo{aspect-ratio:1}.orbit-item .postcard-caption{font-size:6px;padding-top:7px;letter-spacing:.02em;gap:5px}.orbit-item .postcard:hover img{transform:none}
.orbit-item-1{width:clamp(115px,11.5vw,180px)}.orbit-item-1 .photo{aspect-ratio:.82}
.orbit-item-2{width:clamp(130px,12.6vw,196px)}.orbit-item-2 .photo{aspect-ratio:1.05}
.orbit-item-3{width:clamp(150px,15vw,235px)}.orbit-item-3 .photo{aspect-ratio:1.7}
.orbit-item-4{width:clamp(102px,9.5vw,154px)}.orbit-item-4 .photo{aspect-ratio:.91}
.orbit-item-5{width:clamp(135px,13.4vw,211px)}.orbit-item-5 .photo{aspect-ratio:1.55}
.orbit-item-6{width:clamp(118px,10.7vw,170px)}.orbit-item-6 .photo{aspect-ratio:1.1}
.orbit-world .logo-stage{position:absolute;left:50%;top:50%;right:auto;width:clamp(240px,27vw,360px);max-width:none;z-index:auto;transform:translate(-50%,-50%);background:transparent;pointer-events:none;cursor:grab;backface-visibility:hidden;margin:0}
.orbit-world .logo-stage img{pointer-events:none;display:block;width:100%;height:auto}
.hero-tools{left:36px;right:150px;bottom:25px;display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:6}
.drag-hint{display:block;font:500 9px var(--sans);letter-spacing:.08em;background:transparent;color:#827a73;padding:0}.drag-hint>span:first-child{font-size:20px;vertical-align:-2px;color:var(--red);margin-right:9px}.orbit-controls{display:flex;gap:18px;align-items:center}
.hero-tools button{font:500 10px var(--jp);color:#827a73;background:transparent;border:0;border-radius:0;box-shadow:none;min-height:40px;padding:7px 2px;transition:color .2s}.hero-tools button:hover{color:var(--red)}.hero-tools #orbit-mode{border-bottom:1px solid #ddd5ce}.hero-tools #orbit-mode[aria-pressed=true]{color:var(--red);border-color:var(--red)}.hero-tools #orbit-next{font:500 23px var(--sans);padding:0;min-width:35px}.hero-tools #orbit-pause{min-width:90px;text-align:right}.hero-tools button:disabled{opacity:.5;cursor:default}
.hero-scroll{position:absolute;bottom:32px;right:36px;display:flex;align-items:center;gap:15px;font:500 8px var(--sans);letter-spacing:.1em;color:#827a73;z-index:6}.hero-scroll>span:last-child{font-size:25px;color:var(--red)}
.mobile-menu:not([hidden]){top:90px;position:fixed;z-index:40}
@media(min-width:701px) and (max-height:760px){.hero-journey .hero{min-height:540px}.spatial-stage{top:5%;height:74%}.orbit-world .logo-stage{width:clamp(230px,24vw,310px)}.orbit-item-1{width:11vw}.orbit-item-2{width:12vw}.orbit-item-3{width:14vw}.orbit-item-4{width:9vw}.orbit-item-5{width:12.5vw}.orbit-item-6{width:10vw}}
@media(min-width:701px) and (max-width:1050px){.spatial-stage{left:3%;right:3%}.orbit-world .logo-stage{width:28vw}.orbit-item .postcard-caption{font-size:5px}.hero-tools{left:24px;right:120px;gap:8px}.orbit-controls{gap:12px}.drag-hint{font-size:8px}.hero-scroll{right:24px;gap:10px}}
@media(max-width:700px){
 .header{height:76px;padding:0 18px}.brand-logo{height:66px;width:95px}.brand-name{font-size:10px}.mobile-menu:not([hidden]){top:76px}
 .hero-journey{height:150svh;min-height:0}.hero-journey .hero{top:76px;height:calc(100svh - 76px);min-height:560px;padding:0}
 .spatial-stage{top:3%;left:0;right:0;height:81%;perspective:850px;perspective-origin:50% 50%;z-index:3}
 .orbit-world .logo-stage{width:clamp(190px,53vw,255px)}.orbit-item-1{width:84px}.orbit-item-2{width:94px}.orbit-item-3{width:111px}.orbit-item-4{width:74px}.orbit-item-5{width:101px}.orbit-item-6{width:82px}
 .orbit-item .postcard{padding:3px 3px 5px}.orbit-item .postcard-caption{font-size:4px;gap:3px;padding-top:4px}
 .hero-tools{left:20px;right:65px;bottom:24px;display:flex;flex-direction:column;gap:2px;align-items:stretch}.drag-hint{font-size:7px;text-align:left;margin-bottom:0}.drag-hint>span:first-child{font-size:17px}.orbit-controls{justify-content:space-between;gap:6px}.hero-tools button{font-size:8px;min-height:36px;padding:6px 0}.hero-tools #orbit-pause{min-width:87px}.hero-tools #orbit-next{min-width:32px;font-size:21px}.hero-scroll{bottom:29px;right:20px;gap:0}.hero-scroll>span:first-child{display:none}.hero-scroll>span:last-child{font-size:27px}
}
@media(max-width:700px) and (max-height:720px){.hero-journey{height:auto}.hero-journey .hero{position:relative;top:0}.header{position:relative}}
@media(max-width:360px){.orbit-world .logo-stage{width:164px}.orbit-item-1{width:78px}.orbit-item-2{width:87px}.orbit-item-3{width:102px}.orbit-item-4{width:69px}.orbit-item-5{width:91px}.orbit-item-6{width:77px}.hero-tools{left:15px;right:57px}.hero-scroll{right:15px}.hero-tools button{font-size:7px}}
@media(prefers-reduced-motion:reduce){.hero-journey{height:auto!important;min-height:0!important}.hero-journey .hero{position:relative;top:0}.orbit-item,.orbit-world{will-change:auto}.spatial-stage{cursor:default}.orbit-item .postcard{cursor:pointer}.drag-hint{visibility:hidden}}
/* Mixed media: deliberately large differences in format and visual weight. */
.spatial-stage{left:-2%;right:-2%;top:5%;height:76%;perspective:1000px}
.orbit-item-1{width:clamp(210px,21vw,330px)}.orbit-item-1 .photo{aspect-ratio:4/5}
.orbit-item-2{width:clamp(138px,14vw,218px)}.orbit-item-2 .photo{aspect-ratio:1.1}
.orbit-item-3{width:clamp(270px,27vw,435px)}.orbit-item-3 .photo{aspect-ratio:1.85}
.orbit-item-4{width:clamp(60px,6vw,94px)}.orbit-item-4 .photo{aspect-ratio:.82}
.orbit-item-5{width:clamp(164px,16.5vw,265px)}.orbit-item-5 .photo{aspect-ratio:1.6}
.orbit-item-6{width:clamp(130px,13vw,200px)}.orbit-item-6 .photo{aspect-ratio:4/5}
.orbit-item .postcard{padding:0;border:0;background:transparent;box-shadow:none}.orbit-item .postcard:hover{box-shadow:none}.orbit-item .photo{position:relative;box-shadow:0 16px 25px -20px #30271d55}
.orbit-item .postcard-caption{position:absolute;left:0;right:0;top:100%;opacity:0;padding-top:8px;font-size:7px;color:var(--ink);transition:opacity .2s;pointer-events:none}.orbit-item .postcard:hover .postcard-caption,.orbit-item .postcard:focus-visible .postcard-caption{opacity:1}
.orbit-film{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.film-label{position:absolute;left:10px;bottom:10px;display:flex;gap:5px;align-items:center;padding:4px 6px;background:#15151177;color:#fff;font:600 7px var(--sans);letter-spacing:.13em}.film-label i{height:4px;width:4px;border-radius:50%;background:#fff}.film-fallback .film-label{display:none}
@media(min-width:701px) and (max-height:760px){.orbit-item-1{width:18vw;max-width:270px}.orbit-item-3{width:25vw;max-width:370px}.spatial-stage{top:4%;height:74%}}
@media(max-width:700px){.spatial-stage{left:-8%;right:-8%;top:4%;height:77%;perspective:800px}.orbit-item-1{width:clamp(125px,36vw,185px)}.orbit-item-2{width:clamp(87px,26vw,134px)}.orbit-item-3{width:clamp(174px,51vw,255px)}.orbit-item-4{width:48px}.orbit-item-5{width:clamp(105px,32vw,164px)}.orbit-item-6{width:90px}.orbit-item .postcard-caption{font-size:5px}.film-label{left:5px;bottom:5px;font-size:5px;padding:3px 4px;gap:3px}.film-label i{width:3px;height:3px}}
/* The campaign film is a broad landscape, distinct from the portrait film. */
.orbit-item-7{width:clamp(240px,26vw,390px)}
.orbit-item-7 .photo{aspect-ratio:16/9}
.orbit-item-7 .orbit-film{object-fit:contain;background:#111}
.film-detail{padding-top:90px}
.detail-film{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#111}
.detail-film--portrait{width:100%;max-width:52svh;height:auto;max-height:65svh;aspect-ratio:4/5;object-fit:contain;margin-inline:auto}
.detail-film:focus-visible{outline:3px solid var(--ocean);outline-offset:4px}
@media(min-width:701px) and (max-height:760px){.orbit-item-7{width:clamp(240px,24vw,350px)}}
@media(max-width:700px){.orbit-item-7{width:190px}}
@media(max-width:360px){.orbit-item-6{width:82px}.orbit-item-7{width:170px}}
/* Staff interviews stay full-height, at a quieter scale than the two lead films. */
.orbit-item-3{width:clamp(150px,15vw,225px)}
.orbit-item-3 .photo{aspect-ratio:9/16}
.orbit-item-3 .orbit-film{object-fit:contain;background:#111}
.detail-film--tall{width:100%;max-width:36.5625svh;height:auto;max-height:65svh;aspect-ratio:9/16;object-fit:contain;margin-inline:auto}
@media(max-width:700px){.orbit-item-3{width:100px}}
@media(max-width:360px){.orbit-item-3{width:92px}}

/* A single brand focal point, with a quieter navigation above it. */
.header{height:72px;justify-content:flex-end;border-bottom:0}
.hero-journey .hero{top:72px;height:calc(100svh - 72px)}
.mobile-menu:not([hidden]){top:72px}
.orbit-world .logo-stage{width:min(76vw,100svh);top:59%;pointer-events:none}

@media(max-width:700px){
 .header{height:64px}
 .mobile-menu:not([hidden]){top:64px}
 .hero-journey .hero{top:64px;height:calc(100svh - 64px)}
 .orbit-world .logo-stage{width:128vw;max-width:640px;top:54%}
}
@media(max-width:700px) and (max-height:720px){.hero-journey .hero{top:0}}

@media(prefers-reduced-motion:reduce){.hero-journey .hero{top:0}}

/* A fifth film: narrow portrait format, keeping the seven-item orbit. */
.orbit-item-5{width:clamp(110px,11vw,165px)}
.orbit-item-5 .photo{aspect-ratio:9/16}
.orbit-item-5 .orbit-film{object-fit:contain;background:#111}
@media(max-width:700px){.orbit-item-5{width:clamp(82px,23vw,118px)}}

/* Atami scenes add a medium landscape among the portrait films. */
.orbit-item-4{width:clamp(180px,18vw,280px)}
.orbit-item-4 .photo{aspect-ratio:16/9}
.orbit-item-4 .orbit-film{object-fit:contain;background:#111}
@media(max-width:700px){.orbit-item-4{width:clamp(120px,35vw,175px)}}

/* Keep each project KV complete when it takes a different orbit slot. */
.orbit-item .photo img{object-fit:contain;background:#fff}
.orbit-item .orbit-film{object-fit:contain;background:#fff}