.brand-orbit{position:relative;isolation:isolate;overflow:hidden;background:#080c12;padding:105px 0 65px}
.brand-orbit:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,#05090e90,transparent 65%);pointer-events:none}
.bo-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.bo-heading .eyebrow{font-size:10px;color:#8b9eb5;letter-spacing:.13em;margin-bottom:25px}
.bo-heading h2{font-size:clamp(32px,3.8vw,52px);font-weight:550;line-height:1.55;letter-spacing:-.04em}
.bo-heading h2>span{color:color-mix(in srgb,var(--bo-light) 20%,#d0dfef);transition:color .7s}
.bo-heading>p{font-size:14px;line-height:2.05;color:#9aa9bc;padding-bottom:8px}
.bo-experience{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;column-gap:45px;margin-top:35px}
.bo-copy{padding:25px 0 15px;min-width:0}
.bo-copy-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px}
.bo-copy-top>span{font-size:8px;letter-spacing:.17em;color:#6f829c}
.bo-arrows{display:flex;gap:7px}.bo-arrows[hidden],.bo-selector[hidden]{display:none}
.bo-arrows button{width:38px;height:38px;border:1px solid #9bb6d030;border-radius:50%;background:#172232;color:#bdd0e6;font-size:18px;cursor:pointer;transition:background .2s,transform .2s}
.bo-arrows button:hover{background:#263a52;transform:translateY(-2px)}
.bo-brand-line{display:flex;align-items:center;gap:15px;margin-bottom:17px;font-size:11px}
.bo-count{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--bo-accent)}.bo-count i{font-style:normal;color:#53647b;margin-left:3px}
.bo-category{color:#a9b8cb;border-left:1px solid #788da33b;padding-left:15px;letter-spacing:.06em}
.bo-panel h3{font-size:clamp(64px,6.8vw,88px);font-weight:650;line-height:1.1;letter-spacing:-.055em;color:#f7f9fc;margin-bottom:18px;text-shadow:0 0 50px color-mix(in srgb,var(--bo-light) 25%,transparent)}
.bo-service{display:block;font-size:10px;color:var(--bo-accent);letter-spacing:.035em}
.bo-panel h4{font-size:clamp(23px,2.5vw,32px);font-weight:500;line-height:1.55;letter-spacing:-.03em;color:#dce7f5;margin:28px 0 17px}
.bo-panel>p{font-size:14px;line-height:1.95;color:#94a5ba;max-width:390px}
.brand-orbit:not(.bo-ready) .bo-panel+.bo-panel{margin-top:45px}
/* Keep every panel in the sizing grid, but paint the selected text on top.
   Text must not depend on an opacity/transform animation completing. */
.bo-ready .bo-panels{display:grid;position:relative;isolation:isolate}
.bo-ready .bo-panel{grid-area:1/1;min-width:0;position:relative}
.bo-ready .bo-panel:not(.is-active){visibility:hidden;pointer-events:none;z-index:0}
.bo-ready .bo-panel.is-active{visibility:visible;opacity:1;transform:none;z-index:1}
.bo-stage{height:540px;position:relative;min-width:0;isolation:isolate}
.bo-halo{position:absolute;inset:18% -6% 1%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--bo-light) 20%,transparent),transparent 66%);pointer-events:none}
.bo-ring{position:absolute;left:5%;right:5%;top:22%;height:52%;border:1px solid color-mix(in srgb,var(--bo-light) 46%,#74899c24);border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.bo-ring-one{box-shadow:0 1px 1px #c0d5f406,inset 0 -1px 1px #beddf40b}
.bo-ring-two{left:1%;right:1%;top:15%;height:66%;border-style:dashed;border-color:color-mix(in srgb,var(--bo-light) 24%,transparent);transform:rotate(15deg)}
.bo-axis{position:absolute;left:50%;top:9%;height:79%;border-left:1px dashed #7c9bbc15;transform:rotate(32deg);pointer-events:none}
.bo-center{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;white-space:nowrap}
.bo-center>span{display:block;font-size:32px;line-height:1;color:color-mix(in srgb,var(--bo-light) 28%,#d6e6f6);margin-bottom:13px;text-shadow:0 0 30px color-mix(in srgb,var(--bo-light) 55%,transparent)}
.bo-center small{display:block;font-size:6px;letter-spacing:.17em;color:#6b84a1;margin-bottom:10px}
.bo-center p{font-size:19px;font-weight:400;line-height:1.6;letter-spacing:.025em;color:#99b0cb}
.bo-object{position:absolute;left:var(--bo-x);top:var(--bo-y);z-index:var(--bo-z);width:185px;padding:0 4px 9px;border:0;background:transparent;color:white;transform:translate(-50%,-50%) scale(var(--bo-scale));transform-origin:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bo-object:before{content:"";position:absolute;inset:18% 2% 3%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--bo-accent) 17%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.bo-object[aria-pressed="true"]:before,.bo-object:hover:before{opacity:1}
.bo-object-art{display:block;transform:rotate(var(--bo-lean,0deg));transition:filter .3s;filter:drop-shadow(0 10px 9px #0005)}
.bo-object img{display:block;width:100%;height:auto;animation:bo-float 10s ease-in-out infinite;animation-delay:var(--bo-delay);animation-play-state:paused}
.bo-in-view .bo-object img{animation-play-state:running}
.bo-object-name{display:inline-block;transform:scale(var(--bo-label-scale,1));transform-origin:top center;padding:6px 3px;border:0;border-bottom:1px solid #b2c5db59;border-radius:0;background:transparent;color:#e7eef7;font-size:17px;font-weight:600;letter-spacing:.015em;line-height:1.5;white-space:nowrap;text-shadow:0 2px 10px #000b;transition:color .35s,border-color .35s,background .35s}
.bo-object[aria-pressed="true"] .bo-object-name{color:#fff;border-bottom-color:var(--bo-accent);background:transparent;box-shadow:none;text-shadow:0 2px 10px #000b,0 0 22px color-mix(in srgb,var(--bo-light) 50%,transparent)}
.bo-object:hover .bo-object-art{filter:drop-shadow(0 8px 12px color-mix(in srgb,var(--bo-accent) 25%,transparent))}
.bo-stage-hint{position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:10px;color:#7288a3;letter-spacing:.035em;pointer-events:none}
.bo-stage-hint>span{display:inline-block;font-size:17px;vertical-align:middle;margin-right:6px;color:#9bb7d4}
.bo-selector{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;border-top:1px solid #8ba5c12b;padding-top:24px;margin-top:12px}
.bo-selector button{display:flex;align-items:center;gap:11px;padding:15px 13px;min-height:70px;border:1px solid transparent;border-radius:4px;background:transparent;color:#d0d9e5;font:inherit;text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.bo-selector button:hover{background:#1a273a66}
.bo-selector button[aria-selected="true"]{background:color-mix(in srgb,var(--bo-accent) 9%,#0c121b);border-color:color-mix(in srgb,var(--bo-accent) 27%,transparent);color:#ecf4ff}
.bo-selector-dot{width:5px;height:5px;border-radius:50%;background:var(--bo-accent);flex-shrink:0;opacity:.5}
.bo-selector button[aria-selected="true"] .bo-selector-dot{opacity:1;box-shadow:0 0 14px var(--bo-accent)}
.bo-selector small{display:block;font-size:9px;color:#7489a2;margin-bottom:5px;white-space:nowrap}
.bo-selector b{display:block;font-size:19px;font-weight:600;white-space:nowrap;line-height:1.4}
.brand-orbit .bo-note{font-size:10px;line-height:1.9;color:#6f829b;margin-top:28px;max-width:none}
.bo-object:focus-visible,.bo-selector button:focus-visible,.bo-arrows button:focus-visible,.bo-panel:focus-visible{outline:2px solid #a2c6ee;outline-offset:5px;border-radius:12px}
@keyframes bo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:1050px) and (min-width:761px){.bo-experience{column-gap:24px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}.bo-stage{height:480px}.bo-object{width:128px}.bo-heading>p{font-size:12px}.bo-selector{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.bo-selector button{padding:12px 8px;gap:7px}.bo-selector b{font-size:17px}.bo-selector small{font-size:8px}.bo-center p{font-size:16px}}
@media(max-width:760px){
 .brand-orbit{padding:75px 0 50px}.bo-heading{display:block}.bo-heading .eyebrow{font-size:8px;letter-spacing:.08em;margin-bottom:20px}.bo-heading h2{font-size:clamp(24px,6.7vw,38px)}.bo-heading>p{font-size:13px;margin-top:24px;padding:0;line-height:1.9}
 .bo-experience{grid-template-columns:minmax(0,1fr);gap:0;margin-top:7px}.bo-stage{order:0;height:375px;margin:0 -8px}.bo-copy{order:2;padding:28px 5px 0}.bo-selector{order:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding-top:16px}
 .bo-object{width:111px}.bo-object-name{font-size:13px;padding:4px 7px}.bo-center{top:46%}.bo-center>span{font-size:25px;margin-bottom:9px}.bo-center small{font-size:5px;letter-spacing:.1em}.bo-center p{font-size:14px;line-height:1.7}.bo-stage-hint{font-size:8px;bottom:1%}
 .bo-copy-top{margin-bottom:19px}.bo-copy-top>span{font-size:7px}.bo-arrows button{width:40px;height:40px}.bo-brand-line{font-size:10px;margin-bottom:13px}.bo-panel h3{font-size:66px;margin-bottom:14px}.bo-service{font-size:9px}.bo-panel h4{font-size:25px;margin:22px 0 15px}.bo-panel>p{font-size:13px;line-height:1.9;max-width:none}
 .bo-selector button{padding:11px 9px;gap:8px;min-height:65px}.bo-selector small{font-size:8px;margin-bottom:4px}.bo-selector b{font-size:18px}.brand-orbit .bo-note{font-size:9px;margin-top:30px}
}
@media(max-width:360px){.bo-heading h2{font-size:24px}.bo-stage{height:355px;margin:0 -6px}.bo-object{width:96px}.bo-object-name{font-size:12px;padding:4px 6px}.bo-center p{font-size:12px}.bo-center small{font-size:4px}.bo-selector button{padding:10px 5px;gap:6px}.bo-selector b{font-size:16px}.bo-selector small{font-size:7px}.bo-selector-dot{width:4px;height:4px}.bo-panel h3{font-size:58px}}
@media(prefers-reduced-motion:reduce){.bo-object img{animation:none}.bo-object-art,.bo-object-name,.bo-object:before,.bo-selector button,.bo-arrows button{transition:none}}

/* Brand-colored light surrounds restrained, precision-drawn objects. */
.bo-lights{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bo-light{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background:radial-gradient(ellipse at 76% 47%,color-mix(in srgb,var(--bo-light) 42%,transparent),transparent 63%),radial-gradient(ellipse at 35% 90%,color-mix(in srgb,var(--bo-light) 16%,transparent),transparent 60%)}
.bo-light.is-active{opacity:1}
.bo-panel[data-company="hoshino"] h3,.bo-panel[data-company="sekisui"] h3{font-size:clamp(38px,4.4vw,58px);letter-spacing:-.04em;line-height:1.2}
.bo-panel[data-company="uniqlo"] h3{font-size:clamp(48px,5vw,68px)}
.bo-panel[data-company="amazon"] h3{font-size:clamp(56px,6vw,78px)}
.bo-copy-top{border-bottom:1px solid color-mix(in srgb,var(--bo-light) 33%,#859bb21c);padding-bottom:15px;margin-bottom:25px;transition:border-color .6s}
.bo-selector button[aria-selected="true"]{box-shadow:inset 0 -2px var(--bo-accent)}
.bo-ring{transition:border-color .8s}
@media(max-width:1050px) and (min-width:761px){.bo-object-name{font-size:14px}.bo-panel[data-company="hoshino"] h3{font-size:37px}}
@media(max-width:760px){
 .bo-panel[data-company="hoshino"] h3,.bo-panel[data-company="sekisui"] h3{font-size:42px}
 .bo-panel[data-company="uniqlo"] h3{font-size:50px}.bo-panel[data-company="amazon"] h3{font-size:60px}
 .bo-light{background:radial-gradient(ellipse 85% 34% at 50% 35%,color-mix(in srgb,var(--bo-light) 40%,transparent),transparent 73%),radial-gradient(ellipse at 65% 78%,color-mix(in srgb,var(--bo-light) 18%,transparent),transparent 50%)}
}
@media(max-width:360px){.bo-panel[data-company="hoshino"] h3,.bo-panel[data-company="sekisui"] h3{font-size:36px}.bo-panel[data-company="uniqlo"] h3{font-size:44px}.bo-panel[data-company="amazon"] h3{font-size:53px}}
@media(prefers-reduced-motion:reduce){.bo-light,.bo-ring,.bo-copy-top{transition:none}}

/* Each company brings its industry photograph into the whole scene. */
.bo-backdrops{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.bo-backdrop{position:absolute;inset:0;opacity:0;transform:scale(1.035);transition:opacity .65s ease,transform 1.2s ease}
.bo-backdrop.is-active{opacity:1;transform:scale(1)}
.bo-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--bo-photo-position,center)}
.brand-orbit:before{background:linear-gradient(90deg,#06101de6 0%,#07111dc7 30%,#07111d42 68%,#07111d33),linear-gradient(180deg,#080e18b8,transparent 34%,#080e1833 65%,#080e18ed)}
.brand-orbit .bo-lights{z-index:-2;opacity:.8}
.bo-heading .eyebrow{color:#c2d1e4}
.bo-heading h2{color:#fff;text-shadow:0 2px 22px #0007}
.bo-heading h2>span{color:#e5efff}
.bo-heading>p{color:#d6e1ef;text-shadow:0 2px 10px #0008}
.bo-copy{position:relative;isolation:isolate;padding:26px 26px 30px;border:1px solid #bfd3ea2b;border-radius:22px;background:transparent;box-shadow:0 15px 45px #02091429}
/* Isolate the decorative blur from the changing text layer. */
.bo-copy:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bo-copy-background,linear-gradient(130deg,#0a1624b8,#0a16245c));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
.bo-copy-top>span{color:#a9bbd0}.bo-count i{color:#9badc3}.bo-category{color:#d8e3f1}
.bo-panel h3{color:#fff}.bo-panel h4{color:#eef4fd}.bo-panel>p{color:#d1ddeb}
.bo-stage{border-radius:50%;background:radial-gradient(ellipse,#08111b40,transparent 69%)}
.bo-center>span,.bo-center p{color:#eaf3ff;text-shadow:0 2px 20px #000b}.bo-center small{color:#b5c8df}
.bo-stage-hint{color:#e1eaf6;text-shadow:0 2px 8px #000}
.bo-selector{position:relative;isolation:isolate;padding:12px;margin-top:25px;border:1px solid #c7d8ee3d;border-radius:14px;background:transparent}
.bo-selector:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#08111bc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none}
.bo-selector small{color:#b0c1d7}.bo-selector b{color:#edf4ff}.bo-selector button{border-radius:8px}
.bo-selector button[aria-selected="true"]{background:color-mix(in srgb,var(--bo-accent) 17%,#0c121b);border-color:color-mix(in srgb,var(--bo-accent) 60%,transparent)}
.brand-orbit .bo-note{color:#bacbdd}
@media(max-width:1050px) and (min-width:761px){.bo-copy{padding:22px}.bo-experience{column-gap:20px}}
@media(max-width:760px){
 .bo-backdrops{bottom:auto;height:930px;mask-image:linear-gradient(#000 0%,#000 68%,transparent);-webkit-mask-image:linear-gradient(#000 0%,#000 68%,transparent)}
 .brand-orbit:before{background:linear-gradient(180deg,#08111bd9 0%,#08111b7a 23%,#08111b4d 42%,#08111bd9 68%,#080c12 85%)}
 .bo-heading h2{text-shadow:0 2px 20px #000b}.bo-heading>p{color:#d7e2f0}
 .bo-copy{margin-top:22px;padding:23px 21px 26px;--bo-copy-background:linear-gradient(130deg,#142238ed,#0b1525ed)}
 .bo-selector{margin-top:7px;padding:10px;gap:5px}.bo-selector button{padding:10px 7px}
 .bo-stage-hint{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.bo-backdrop{transition:none;transform:none}}

/* Brand color belongs to the company name; explanatory text stays neutral. */
[data-bo-panel][data-company="ana"],[data-bo-object="0"],[data-bo-tab="0"]{--bo-name:#5593ff}
[data-bo-panel][data-company="bmw"],[data-bo-object="1"],[data-bo-tab="1"]{--bo-name:#4aa6ff}
[data-bo-panel][data-company="hoshino"],[data-bo-object="2"],[data-bo-tab="2"]{--bo-name:#77c6a6}
[data-bo-panel][data-company="sekisui"],[data-bo-object="3"],[data-bo-tab="3"]{--bo-name:#f26d88}
[data-bo-panel][data-company="amazon"],[data-bo-object="4"],[data-bo-tab="4"]{--bo-name:#ffb347}
[data-bo-panel][data-company="uniqlo"],[data-bo-object="5"],[data-bo-tab="5"]{--bo-name:#ff4551}
.bo-object .bo-object-name,.bo-selector button b{color:#d0d9e5}
.bo-selector button:not([aria-selected="true"]) .bo-selector-dot{background:#a4b1c3;opacity:.55}
.bo-panel h3,.bo-object[aria-pressed="true"] .bo-object-name,.bo-selector button[aria-selected="true"] b{color:var(--bo-name,#fff)}
.bo-panel h3{text-shadow:0 2px 14px #02071066,0 0 38px color-mix(in srgb,var(--bo-name) 18%,transparent)}

/* Give names a display weight; repeat the industry motif beside mobile titles. */
.bo-brand-title{margin-bottom:18px}
.bo-panel .bo-brand-title h3{font-family:'Arial Black','Hiragino Kaku Gothic StdN','Hiragino Sans','Noto Sans JP',sans-serif;font-weight:900;letter-spacing:-.045em;margin:0;white-space:nowrap}
.bo-panel[data-company="ana"] h3,.bo-panel[data-company="bmw"] h3{font-size:clamp(64px,6.8vw,96px)}
.bo-title-icon{display:none}
.bo-object-name,.bo-selector b{font-family:'Arial Black','Hiragino Kaku Gothic StdN','Hiragino Sans','Noto Sans JP',sans-serif;font-weight:800;letter-spacing:-.025em}
@media(max-width:1050px) and (min-width:761px){.bo-panel[data-company="amazon"] h3{font-size:clamp(48px,5.8vw,62px)}}
@media(max-width:760px){
 .bo-brand-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;min-height:70px}
 .bo-panel[data-company="ana"] h3,.bo-panel[data-company="bmw"] h3{font-size:clamp(54px,16.4vw,70px)}
 .bo-panel[data-company="hoshino"] h3{font-size:clamp(28px,9.4vw,42px)}
 .bo-panel[data-company="sekisui"] h3{font-size:clamp(32px,10.5vw,46px)}
 .bo-panel[data-company="uniqlo"] h3{font-size:clamp(38px,12vw,52px)}
 .bo-panel[data-company="amazon"] h3{font-size:clamp(38px,12.3vw,54px)}
 .bo-title-icon{display:block;flex:0 0 clamp(56px,16vw,84px);height:70px;filter:drop-shadow(0 5px 10px #0005)}
 .bo-title-icon img{display:block;width:100%;height:100%;object-fit:contain}
}
@media(max-width:360px){
 .bo-brand-title{gap:7px;min-height:60px}
 .bo-panel[data-company="hoshino"] h3{font-size:28px}
 .bo-panel[data-company="sekisui"] h3{font-size:32px}
 .bo-panel[data-company="amazon"] h3{font-size:38px}
 .bo-title-icon{flex-basis:52px;height:60px}
}
