/* NINEWORKS branding process spacing — 2026-09-01 */
body.branding-page .branding-process-intro{
  display:none!important;
  width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
}

/*
  Sticky guard: the global stability layer uses overflow-x:hidden on html/body.
  That can turn an ancestor into a scrolling container and prevent sticky from
  following the viewport. `clip` keeps horizontal overflow suppressed without
  creating that scroll container.
*/
html:has(body.branding-page),
body.branding-page{
  overflow-x:clip!important;
}

body.branding-page .site-shell,
body.branding-page main,
body.branding-page .brand-process,
body.branding-page .brand-process__layout{
  overflow:visible!important;
}

/* Keep the process index visible while the right-side steps scroll. */
body.branding-page .brand-process__layout{
  align-items:start!important;
}

body.branding-page .brand-process__side{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:calc(var(--header-h,104px) + 24px)!important;
  align-self:start!important;
  height:max-content!important;
  min-height:0!important;
  padding-top:34px!important;
  padding-bottom:34px!important;
  z-index:6!important;
}

body.branding-page .brand-step:first-of-type{
  padding-top:34px!important;
}

body.branding-page .brand-step:first-of-type .brand-step__node{
  top:46px!important;
}

@media(max-width:1040px){
  body.branding-page .brand-process__side{
    position:static!important;
  }
}

@media(max-width:900px){
  body.branding-page .branding-process-intro{display:none!important}
  body.branding-page .brand-step:first-of-type{padding-top:28px!important}
}