/* =================== WHAT TO EXPECT =================== */
.ph-title.big{font-size:clamp(38px,4.6vw,56px);line-height:1.12}
.ph-a .ph-img{background-color:#000}

.split2{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding:49px 0 60px}
.split2.lav{background:var(--lavender)}
.s-art{display:flex;justify-content:center}
.s-copy{padding:0 24px 0 max(24px,24.7%)}
.s-copy > *{max-width:454px}
.s-copy h2,.step h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(36px,4.6vw,56px);line-height:1.12;color:var(--text)}
.s-copy p,.step p{font-family:var(--font-helv);font-size:18px;line-height:1.75;letter-spacing:.18px;color:#000;margin-top:22px;max-width:454px}

.steps2{display:grid;grid-template-columns:1fr 1fr}
.step{padding:49px 24px 60px}
.step > *{max-width:454px}
.steps2 .step:first-child{padding-left:max(24px,40%)}
.steps2 .step:last-child{padding-left:max(24px,24.7%)}
.step.lav{background:var(--lavender)}
.step.plum{background:var(--plum)}
.step.plum h2{color:var(--cream)}
.step.plum p{color:#fff}
.step h2.terra{color:var(--terracotta)}

.badge-art{position:relative;width:150px;height:155px;margin:0 auto 20px}
.badge-art .b1{position:absolute;left:0;top:29px;width:122px;height:116px}
.badge-art .b2{position:absolute;left:73px;top:0;width:77px;height:78px}
.closer h2:not(:has(em)){max-width:719px}

@media (max-width:900px){
  .split2,.steps2{grid-template-columns:1fr}
  .split2{padding:40px 0}
  .s-copy{margin-top:24px}
  .step{padding:40px 24px}
  .steps2 .step:first-child,.steps2 .step:last-child{padding-left:24px}
  .s-copy{padding:0 24px}
}

/* Hero and panels share the same 50/50 split */
.ph-a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split2,.steps2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.ph-a,.split2,.steps2{grid-template-columns:1fr}}