/* Keep the original crop and rule, but reveal the j descender. */
.brand-stage{overflow:visible;isolation:isolate}
.brand-stage h1{height:100%;display:flex;align-items:flex-start;white-space:nowrap}
.brand-md{display:block;height:100%;overflow:hidden;flex:none;padding-right:.015em}
.brand-j{display:block;flex:none;position:relative;z-index:1}
.brand-stage h1>span{color:#92928f}
@supports (background-clip:text) or (-webkit-background-clip:text){
 .brand-stage h1>span{background-image:repeating-linear-gradient(135deg,#8e8e8b 0px,#8e8e8b 2px,transparent 2px,transparent 6px);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
 .brand-stage .brand-j{padding-bottom:.3em}
}
.stage-index{bottom:20px;right:0;z-index:2}
.hero-top{margin-top:clamp(155px,17vw,220px)}
@media(max-width:700px){
 .brand-stage{height:39vw}
 .brand-stage h1{font-size:49vw}
 .hero-top{margin-top:clamp(80px,22vw,150px)}
 .stage-index{bottom:12px;font-size:8px}
}



/* Place the idea line below the m, clear of the striped wordmark. */
.brand-stage .stage-index{left:0;right:auto;top:calc(100% + 24px);bottom:auto;font-size:12px;font-weight:600;letter-spacing:.14em;color:#252525}
@media(max-width:700px){.brand-stage .stage-index{top:calc(100% + 20px);font-size:11px}}

.brand-stage .stage-index{font:400 10px Arial,sans-serif;letter-spacing:.09em}
@media(max-width:700px){.brand-stage .stage-index{font-size:8px}}