html:not(.showcase-cards) .responsibility-mosaic,
html.showcase-cards .responsibility-showcase{display:none}

.responsibility-mosaic{
  --process-violet:#8c82ff;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
  align-items:center;
  column-gap:clamp(48px,5vw,120px);
  background:#fff;
  color:#050607;
  padding:clamp(88px,8vw,150px) var(--gutter) clamp(96px,9vw,170px)
}
.responsibility-mosaic__heading{
  position:sticky;
  top:calc(50vh - 80px);
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:40px;
  min-width:0
}
.responsibility-mosaic__heading h2{
  max-width:16ch;
  font-size:clamp(48px,3.4vw,72px);
  line-height:1.07;
  letter-spacing:-.05em;
  text-wrap:balance
}
.responsibility-mosaic__accent{color:var(--process-violet)}
.responsibility-mosaic__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,1.15vw,24px)
}
.responsibility-mosaic__card{
  --cut:clamp(30px,2.5vw,54px);
  position:relative;
  min-width:0;
  display:flex;
  align-items:flex-start;
  padding:clamp(29px,2.6vw,52px);
  overflow:hidden;
  border-radius:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s ease
}
.responsibility-mosaic__card>div{position:relative;z-index:1;max-width:100%}
.responsibility-mosaic__icon{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.responsibility-mosaic__card--conversation .responsibility-mosaic__icon{color:var(--blue)}
.responsibility-mosaic__card h3{
  max-width:22ch;
  font-size:clamp(25px,2.05vw,38px);
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.035em;
  text-wrap:balance
}
.responsibility-mosaic__card p{
  max-width:38ch;
  margin-top:clamp(22px,2.3vw,42px);
  font-size:clamp(18px,1.42vw,26px);
  font-weight:500;
  line-height:1.38
}
.responsibility-mosaic__card--understand{
  grid-column:span 7;
  min-height:clamp(270px,21vw,340px);
  background:var(--process-violet);
  color:#fff;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)
}
.responsibility-mosaic__card--reach{
  grid-column:span 5;
  min-height:clamp(270px,21vw,340px);
  background:#f4f7fa;
  clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))
}
.responsibility-mosaic__card--fit{
  grid-column:span 5;
  min-height:clamp(260px,19vw,315px);
  background:#f4f7fa;
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))
}
.responsibility-mosaic__card--conversation{
  grid-column:span 7;
  min-height:clamp(260px,19vw,315px);
  background:#eaf6ff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)
}
.responsibility-mosaic__card--start{
  grid-column:span 8;
  justify-self:start;
  width:fit-content;
  max-width:100%;
  min-height:0;
  background:#eaf9ed;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)
}
.responsibility-mosaic__card--start>div{max-width:44rem}
.responsibility-mosaic__card--start p{margin-top:clamp(18px,1.4vw,26px)}
@media(min-width:1201px){
  .responsibility-mosaic__card--fit,
  .responsibility-mosaic__card--conversation{left:calc(-1 * clamp(25px,3.2vw,50px))}
  .responsibility-mosaic__card--start{left:clamp(100px,12vw,190px)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .responsibility-mosaic__card:hover{transform:translateY(-6px)}
  .responsibility-mosaic__card--reach:hover{background:#e9eef2}
  .responsibility-mosaic__card--fit:hover{background:#e9eef2}
  .responsibility-mosaic__card--conversation:hover{background:#ddf0ff}
  .responsibility-mosaic__card--start:hover{background:#ddf5e2}
}
@media(max-width:1200px){
  .responsibility-mosaic{display:block}
  .responsibility-mosaic__heading{position:static;margin-bottom:clamp(42px,5vw,68px)}
  .responsibility-mosaic__heading h2{max-width:22ch}
  .responsibility-mosaic__card h3{font-size:clamp(26px,2.7vw,35px)}
  .responsibility-mosaic__card p{font-size:clamp(18px,1.8vw,23px)}
}
@media(max-width:760px){
  .responsibility-mosaic{padding-top:78px;padding-bottom:88px}
  .responsibility-mosaic__heading{margin-bottom:39px}
  .responsibility-mosaic__heading h2{font-size:clamp(43px,8.5vw,60px)}
  .responsibility-mosaic__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .responsibility-mosaic__card{--cut:32px;grid-column:span 1;min-height:250px;padding:clamp(24px,3.5vw,34px)}
  .responsibility-mosaic__card--understand,.responsibility-mosaic__card--start{grid-column:span 2}
  .responsibility-mosaic__card h3{font-size:clamp(24px,3.5vw,29px)}
  .responsibility-mosaic__card p{margin-top:22px;font-size:17px}
  .responsibility-mosaic__card--start{min-height:0}
}
@media(max-width:600px){
  .responsibility-mosaic__heading h2{font-size:clamp(42px,8.5vw,54px)}
  .responsibility-mosaic__grid{grid-template-columns:minmax(0,1fr)}
  .responsibility-mosaic__card{--cut:30px;grid-column:1;min-height:184px;padding:25px}
  .responsibility-mosaic__card h3{font-size:clamp(23px,6vw,28px)}
  .responsibility-mosaic__card p{max-width:32ch;margin-top:16px;font-size:16px;line-height:1.38}
  .responsibility-mosaic__card--start{min-height:0}
}