/* WALKED 3-step "how it works" — Brand. 8px spacing scale. */
.w3s{--navy:#0B1F3A;--slate:#5B6B7C;--cream:#F7F5F1;--line:#E3E8EF;--orange:#E85D04;--orange-text:#B84A03;
  background:#fff;color:var(--navy);padding:64px 24px;font-family:"Source Sans 3",system-ui,sans-serif}
.w3s__inner{max-width:1120px;margin:0 auto}
.w3s__title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 48px;text-align:center;color:var(--navy)}
.w3s__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;margin-top:24px}
.w3s__steps::before{content:"";position:absolute;top:0;left:16.66%;right:16.66%;height:1px;background:var(--line);z-index:0}
.w3s__step{position:relative;z-index:1;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:56px 24px 32px;text-align:center}
.w3s__num{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--navy);font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:20px;line-height:48px;border:4px solid #fff;box-sizing:content-box}
.w3s__icon{display:block;width:48px;height:48px;margin:0 auto 16px}
.w3s__label{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:24px;line-height:1.25;margin:0 0 8px;color:var(--navy)}
.w3s__body{font-size:17px;line-height:1.5;margin:0;color:var(--slate)}
.w3s__sub{margin:40px auto 0;max-width:640px;text-align:center;font-size:18px;line-height:1.5;color:var(--slate)}
@media (max-width:899px){
  .w3s{padding:48px 16px}
  .w3s__title{margin-bottom:32px}
  .w3s__steps{grid-template-columns:1fr;gap:40px}
  .w3s__steps::before{top:0;bottom:0;left:50%;right:auto;width:1px;height:auto}
  .w3s__step{padding:48px 24px 24px}
}
/* Optional variant per Marketing 08:09 direction: navy section. Cards stay cream (contrast unchanged). */
.w3s--navy{background:var(--navy)}
.w3s--navy .w3s__title,.w3s--navy .w3s__sub{color:var(--cream)}
.w3s--navy .w3s__steps::before{background:#3A4E6B}
.w3s--navy .w3s__num{border-color:var(--navy)}
/* Step 3 badge: Hire a Pro / DIY / Noted */
.w3s__tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.w3s__tag{font-size:14px;font-weight:600;line-height:1;padding:8px 12px;border-radius:999px}
.w3s__tag--pro{background:var(--orange);color:var(--navy)}
.w3s__tag--diy{background:#4B2E5A;color:#fff}
.w3s__tag--noted{background:var(--navy);color:var(--cream)}
/* rev 3: separate navy 3-step from navy hero — +64px top padding, 1px lighter-navy divider (no orange) */
.w3s--navy{padding-top:128px;border-top:1px solid #1A3558}
@media (max-width:899px){.w3s--navy{padding-top:112px}}