/* User sketch: two horizontal and two vertical icon streams, with an open centre. */
.mobbin-hero{position:relative;isolation:isolate;overflow:clip;padding-top:250px;padding-bottom:66px;min-height:980px}
.mobbin-hero .orbit-field{inset:95px 0 160px;z-index:0;max-width:1600px}
.mobbin-hero .orbit-field a{pointer-events:auto;display:block;border-radius:18px}
.mobbin-hero .hero-icon-stack{display:none}
.mobbin-hero .hero-copy,.mobbin-hero .library-brands{position:relative;z-index:1}
.mobbin-hero .hero-copy{pointer-events:none}.mobbin-hero .hero-actions a{pointer-events:auto}
.mobbin-hero .library-brands{margin-top:200px}
/* Mobbin: a pinned viewport, three 80vh line reveals, and a 50vh final hold. */
.library-scroll{height:390vh;min-height:0}
.crossing-belts{position:absolute;inset:0;--icon:72px;--step:140px;--column-left:27%;--column-right:73%;--row-top:23%;--row-bottom:77%;overflow:hidden;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.icon-belt{position:absolute;pointer-events:none}
.belt-horizontal{left:0;width:100%;height:var(--icon);transform:translateY(-50%);z-index:2;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.belt-top{top:var(--row-top)}.belt-bottom{top:var(--row-bottom)}
.belt-vertical{top:0;height:100%;width:var(--icon);transform:translateX(-50%);z-index:1}
.belt-left{left:var(--column-left)}.belt-right{left:var(--column-right)}


.belt-icon{display:grid;place-items:center;flex:none;width:var(--icon);height:var(--icon);pointer-events:auto;border-radius:18px;background:white}
.belt-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}

.library-message{max-width:42%;width:540px}.library-message h2{font-size:clamp(14px,1.4vw,20px);margin-bottom:28px}.library-message .library-line{font-size:clamp(20px,2.5vw,38px);line-height:1.7;white-space:nowrap}

@media(max-width:760px){
.mobbin-hero{min-height:760px;padding:210px 24px 50px}.mobbin-hero .orbit-field{inset:80px 0 170px}.mobbin-hero .library-brands{margin-top:135px}
.library-scroll{height:100svh;min-height:700px}.library-sticky{min-height:660px}
.crossing-belts{--icon:44px;--step:102px;--column-left:12%;--column-right:88%;--row-top:24%;--row-bottom:76%}
.belt-icon{border-radius:12px}.library-message{max-width:70%;padding:0;width:100%}.library-message h2{font-size:13px;margin-bottom:22px}.library-message .library-line{font-size:clamp(15px,4.2vw,24px)}
}


.library-scroll[data-scroll-motion] .library-line{opacity:0;transform:translateY(320px)}
@media(max-width:809.98px),(prefers-reduced-motion:reduce){
 .library-scroll{height:auto;min-height:700px}
 .library-sticky{position:relative;height:100svh;min-height:660px}
 .library-scroll[data-scroll-motion] .library-line{opacity:1!important;transform:none!important}
}


.icon-belt .belt-icon{position:absolute;left:0;top:0;will-change:transform}

/* The archived sources for these two brands are only 48px. Keep them sharp at 2x. */
[data-site="toha-urban-research"] img,
a[href="/websites#site/toha-urban-research"] img,
[data-site="cabo-uehara-jp"] img,
a[href="/websites#site/cabo-uehara-jp"] img{max-width:24px;max-height:24px;align-self:center;justify-self:center}