/* SolusCell visual refinement v5: scale and spacing only */

/* HOW WE WORK — make the process the visual center of the section */
#how-it-works .wrap{max-width:1240px}
.workflow-heading-v4{
  margin-bottom:42px;
  grid-template-columns:1.05fr .75fr;
}
.workflow-v4{
  grid-template-columns:
    minmax(190px,1.15fr) 26px
    minmax(175px,1fr) 26px
    minmax(220px,1.28fr) 26px
    minmax(180px,1.02fr) 26px
    minmax(190px,1.08fr);
  width:100%;
  max-width:1180px;
  margin:0 auto;
  align-items:start;
}
.wf-qc{
  min-width:126px;
  padding:10px 18px;
  margin-bottom:14px;
  font-size:16px;
  border-radius:14px;
}
.wf-main{
  min-height:92px;
  border-radius:20px;
  padding:18px 15px;
  font-size:20px;
  line-height:1.13;
}
.wf-arrow{
  height:92px;
  margin-top:48px;
  font-size:32px;
}
.wf-resource,.wf-note{
  min-height:52px;
  max-width:none;
  margin-top:10px;
  padding:11px 12px;
  font-size:14px;
  line-height:1.25;
  border-radius:0 0 12px 12px;
}

/* SERVICE HERO — give the diagram equal visual weight to the text */
.service-hero-grid{
  grid-template-columns:.84fr 1.16fr;
  gap:64px;
}
.service-diagram-v4{
  width:100%;
  max-width:590px;
  justify-self:end;
  padding:18px 20px;
  border-radius:20px;
  background:#fff;
}
.service-diagram-v4 img{
  width:100%;
  max-height:none;
  object-fit:contain;
}

/* Let the diagram SVGs occupy almost the entire card */
.service-diagram-v4 img[src*="rna-b-v4"],
.service-diagram-v4 img[src*="cut-a-v4"],
.service-diagram-v4 img[src*="dap-a-v4"]{
  transform:scale(1.045);
  transform-origin:center;
}

@media(max-width:1100px){
  .workflow-v4{
    grid-template-columns:
      minmax(165px,1.15fr) 20px
      minmax(150px,1fr) 20px
      minmax(190px,1.28fr) 20px
      minmax(155px,1.02fr) 20px
      minmax(165px,1.08fr);
  }
  .wf-main{font-size:18px;min-height:86px}
  .wf-qc{font-size:14px;min-width:108px}
  .wf-resource,.wf-note{font-size:12px}
}

@media(max-width:980px){
  .workflow-heading-v4{margin-bottom:34px}
  .workflow-v4{
    grid-template-columns:1fr;
    max-width:620px;
  }
  .wf-main{font-size:20px;min-height:76px}
  .wf-qc{font-size:15px;margin-bottom:10px}
  .wf-resource,.wf-note{font-size:14px}
  .wf-arrow{
    height:38px;
    margin:0;
    transform:rotate(90deg);
  }
  .service-hero-grid{grid-template-columns:1fr;gap:38px}
  .service-diagram-v4{
    justify-self:center;
    max-width:620px;
    padding:18px;
  }
}