.responsibility-showcase{position:relative;background:#fff;color:#fff;isolation:isolate}
.responsibility-stage{position:relative;background:#fff}
.responsibility-image{position:relative;height:100svh;overflow:hidden}
.responsibility-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 54%}
.responsibility-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,39,.20),rgba(4,17,39,.05) 67%,rgba(4,17,39,.24));pointer-events:none}
.responsibility-heading{position:absolute;z-index:2;top:38svh;left:50%;width:min(90vw,1150px);text-align:center;transform:translate3d(-50%,-50%,0);pointer-events:none}
.responsibility-heading h2{font-size:clamp(42px,6vw,104px);font-weight:700;line-height:1.03;letter-spacing:-.052em;text-wrap:balance;text-shadow:0 2px 20px rgba(2,17,36,.23)}
.responsibility-bands{position:relative;z-index:3;display:grid;grid-template-rows:repeat(5,minmax(140px,auto));margin:0;padding:0;list-style:none}
.responsibility-band{display:grid;grid-template-columns:minmax(55px,.13fr) minmax(0,.9fr) minmax(220px,.65fr);align-items:center;column-gap:clamp(24px,4vw,80px);padding:22px var(--gutter);background:#050607;color:#fff;border-top:1px solid rgba(255,255,255,.15)}
.responsibility-number{font-size:clamp(35px,4.2vw,70px);font-weight:700;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.responsibility-band h3{font-size:clamp(25px,2.65vw,48px);font-weight:600;line-height:1.12;letter-spacing:-.04em}
.responsibility-band p{max-width:430px;justify-self:end;color:#cbd3db;font-size:clamp(14px,1.1vw,19px);line-height:1.4}
.showcase-motion .responsibility-showcase{height:660svh}
.showcase-motion .responsibility-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.showcase-motion .responsibility-image{position:absolute;inset:calc(clamp(24px,10svh,100px)*(1 - var(--image-expand,0))) calc(clamp(24px,6vw,108px)*(1 - var(--image-expand,0)));height:auto;border-radius:calc(28px*(1 - var(--image-expand,0)));overflow:hidden;will-change:inset,border-radius}
.showcase-motion .responsibility-heading{top:38%;width:min(78vw,1080px);opacity:var(--intro-opacity,1);transform:translate3d(-50%,calc(-50% + var(--intro-y,0px)),0);will-change:transform,opacity}
.showcase-motion .responsibility-bands{position:absolute;inset:0;grid-template-rows:repeat(5,minmax(0,1fr))}
.showcase-motion .responsibility-band{min-height:0;overflow:hidden;background:#fff;color:#050607;border:0;transform:translate3d(100%,0,0);will-change:transform;transition:background-color .18s ease,color .18s ease}
.showcase-motion .responsibility-band.is-filled{background:#050607;color:#fff}
.showcase-motion .responsibility-band p{color:#46535e}
.showcase-motion .responsibility-band.is-filled p{color:#cbd3db}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled{position:relative;isolation:isolate}
  .showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled::before{content:"";position:absolute;z-index:0;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .65s cubic-bezier(.22,1,.36,1);pointer-events:none}
  .showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled:hover::before{transform:scaleX(1)}
  .showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled:hover>:is(.responsibility-number,h3,p){position:relative;z-index:1;color:#fff;mix-blend-mode:difference}
}
@media(max-width:760px){
  .responsibility-image img{object-position:35% center}
  .responsibility-heading{width:calc(100% - 2*var(--gutter))}
  .showcase-motion .responsibility-heading{width:calc(100% - 4*var(--gutter))}
  .responsibility-heading h2{font-size:clamp(38px,8.8vw,64px)}
  .responsibility-band{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:start;column-gap:14px;row-gap:6px;padding:12px var(--gutter)}
  .responsibility-number{grid-row:span 2;font-size:clamp(30px,7vw,48px);align-self:start}
  .responsibility-band h3{font-size:clamp(19px,4.8vw,29px)}
  .responsibility-band p{justify-self:start;max-width:100%;font-size:clamp(12px,3.2vw,15px);line-height:1.28}
}
@media(max-height:620px){
  .responsibility-band{padding-top:8px;padding-bottom:8px}
  .responsibility-number{font-size:clamp(26px,3vw,48px)}
  .responsibility-band h3{font-size:clamp(18px,2.1vw,31px)}
  .responsibility-band p{font-size:clamp(11px,1vw,15px)}
}
@media(prefers-reduced-motion:reduce){
  .responsibility-heading,.responsibility-band{transition:none}
}
@media(hover:hover) and (prefers-reduced-motion:reduce){
  .responsibility-band:hover{background:#fff;color:#050607}
  .responsibility-band:hover p{color:#050607}
}