/* Lyons Wealth — WM · Approach steps (wm_approach)
   Source: flexible_css.css (reference design). Loaded only on pages that use this layout.
   Every selector is scoped to this section's root class; nothing is global. */

.wmo.wmo-approach { background:var(--paper); border-top:1px solid rgba(22,40,59,.06); border-bottom:1px solid rgba(22,40,59,.06); }
.wmo.wmo-approach .wmo-steps { list-style:none; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); }
.wmo.wmo-approach .wmo-steps::before { content:""; position:absolute; top:36px; left:calc(16.66% + 20px); right:calc(16.66% + 20px); height:1px; background:linear-gradient(90deg,rgba(201,154,46,.6),rgba(201,154,46,.25)); }
.wmo.wmo-approach .wmo-step { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 clamp(6px,1vw,16px); }
.wmo.wmo-approach .wmo-step__icon { position:relative; display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:var(--paper); border:1px solid rgba(201,154,46,.5); box-shadow:0 0 0 10px var(--paper); }
.wmo.wmo-approach .wmo-step__icon img { width:36px; height:36px; }
.wmo.wmo-approach .wmo-step__num { margin-top:26px; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--golddeep); }
.wmo.wmo-approach .wmo-step h3 { margin-top:6px; font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.4vw,24px); line-height:1.15; color:var(--navy); }
.wmo.wmo-approach .wmo-step p { margin-top:12px; max-width:34ch; font-size:15px; line-height:1.7; color:var(--body); }
@media (max-width:820px) {
  .wmo.wmo-approach .wmo-steps { grid-template-columns:1fr; gap:44px; max-width:440px; margin:0 auto; }
  .wmo.wmo-approach .wmo-steps::before { top:36px; bottom:120px; left:50%; right:auto; width:1px; height:auto; background:rgba(201,154,46,.4); }
  .wmo.wmo-approach .wmo-step { background:var(--paper); padding-bottom:8px; }
}
.wmo-anim .wmo.wmo-approach .wmo-steps::before { transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.5,0,.2,1) .2s; }
.wmo-anim .wmo.wmo-approach .wmo-steps.is-in::before { transform:scaleX(1); }
.wmo.wmo-approach .wmo-step__icon { transition:background .4s ease, border-color .4s ease; }
.wmo.wmo-approach .wmo-step:hover .wmo-step__icon { background:rgb(252 238 212); border-color:var(--golddeep); }
@media (max-width:820px) {
  .wmo-anim .wmo.wmo-approach .wmo-steps::before { transform:scaleY(0); transform-origin:top; }
  .wmo-anim .wmo.wmo-approach .wmo-steps.is-in::before { transform:scaleY(1); }
}
@media (prefers-reduced-motion:reduce) {
  .wmo-anim .wmo.wmo-approach .wmo-steps::before { transform:none !important; transition:none !important; }
}

/* Theme additions: 1, 2 or 4 steps (the design is built for 3) */
.wmo.wmo-approach .wmo-steps--1 { grid-template-columns:minmax(0,520px); justify-content:center; }
.wmo.wmo-approach .wmo-steps--1::before { display:none; }
.wmo.wmo-approach .wmo-steps--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wmo.wmo-approach .wmo-steps--2::before { left:calc(25% + 20px); right:calc(25% + 20px); }
.wmo.wmo-approach .wmo-steps--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.wmo.wmo-approach .wmo-steps--4::before { left:calc(12.5% + 20px); right:calc(12.5% + 20px); }
@media (max-width:820px) {
  .wmo.wmo-approach .wmo-steps--2, .wmo.wmo-approach .wmo-steps--4 { grid-template-columns:1fr; }
  .wmo.wmo-approach .wmo-steps--2::before, .wmo.wmo-approach .wmo-steps--4::before { left:50%; right:auto; }
}

/* Options: background, number-in-circle steps (no icon), button (used on the Philosophy page "Beliefs to decisions") */
.wmo.wmo-approach--cream { background:var(--cream); border-color:transparent; }
.wmo.wmo-approach--white { background:#fff; }
.wmo.wmo-approach--cream .wmo-step__icon { background:var(--cream); box-shadow:0 0 0 10px var(--cream); }
.wmo.wmo-approach--white .wmo-step__icon { background:#fff; box-shadow:0 0 0 10px #fff; }
@media (max-width:820px) {
  .wmo.wmo-approach--cream .wmo-step { background:var(--cream); }
  .wmo.wmo-approach--white .wmo-step { background:#fff; }
}
.wmo.wmo-approach .wmo-step__icon--num { border-color:var(--golddeep); font-family:var(--serif); font-size:22px; font-weight:600; color:var(--navy); }
.wmo.wmo-approach .wmo-step__icon--num + h3 { margin-top:24px; }
.wmo.wmo-approach .wmo-step:hover .wmo-step__icon--num { background:var(--gold); }
.wmo.wmo-approach .wmo-approach__more { display:flex; justify-content:center; margin-top:clamp(48px,7vh,72px); }

/* Tags (chips) under a step — both styles */
.wmo.wmo-approach .wmo-pstep__chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wmo.wmo-approach .wmo-step .wmo-pstep__chips { justify-content:center; }
.wmo.wmo-approach .wmo-pstep__chips li { font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--navy); padding:7px 12px; border-radius:100px; background:rgba(255,196,81,.22); }

/* ---------- Style "list": two-column process list (Our Process page). Source: flexible_css.css (.lwp) ---------- */
.wmo.wmo-approach--list { position:relative; overflow:hidden; border:0; scroll-margin-top:70px; }
.wmo.wmo-approach--list .wrap { position:relative; z-index:2; max-width:1180px; }
.wmo.wmo-approach--list .head { max-width:720px; margin-bottom:clamp(52px,7vh,84px); }
.wmo.wmo-approach--list .h2 { font-size:clamp(34px,4.4vw,58px); line-height:1.06; }
.wmo.wmo-approach--list .wmo-plist { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,7vw,120px); row-gap:clamp(34px,5vh,54px); }
.wmo.wmo-approach--list .wmo-pstep { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:22px; align-items:start; padding:6px 0; }
.wmo.wmo-approach--list .wmo-pstep--last { grid-column:1 / -1; justify-self:center; max-width:calc(50% - clamp(20px,3.5vw,60px)); width:100%; }
.wmo.wmo-approach--list .wmo-pstep__icon { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.wmo.wmo-approach--list .wmo-pstep__icon::before { content:""; position:absolute; inset:0; border-radius:50%; background:rgba(255,196,81,.16); transition:transform .9s var(--ease), opacity .9s ease; }
.wmo.wmo-approach--list .wmo-pstep__icon::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(201,154,46,.45); transition:transform 1.2s var(--ease), opacity 1s ease; }
.wmo.wmo-approach--list .wmo-pstep__icon img { position:relative; width:44px; height:44px; object-fit:contain; transition:transform .9s var(--ease), opacity .8s ease; }
.wmo.wmo-approach--list .wmo-pstep__n { position:relative; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--navy); }
.wmo.wmo-approach--list .wmo-pstep__num { display:block; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--golddeep); letter-spacing:.04em; }
.wmo.wmo-approach--list .wmo-pstep__h { font-family:var(--sans); font-weight:700; font-size:clamp(18px,1.5vw,21px); line-height:1.3; color:var(--navy); margin-top:4px; }
.wmo.wmo-approach--list .wmo-pstep__p { margin-top:8px; font-size:15px; line-height:1.68; color:var(--body); max-width:42ch; }
.wmo.wmo-approach--list .wmo-pstep__bar { display:block; height:1px; margin-top:16px; width:100%; max-width:220px; background:linear-gradient(90deg,var(--golddeep),transparent); transform-origin:left; transition:transform 1.1s var(--ease) .35s; }
.wmo.wmo-approach--list .wmo-pstep:hover .wmo-pstep__icon::after { animation:wmoSpin 6s linear infinite; }
.wmo.wmo-approach--list .wmo-pstep:hover .wmo-pstep__icon img { transform:translateY(-3px) scale(1.06); }
.wmo.wmo-approach--list .wmo-approach__more { margin-top:clamp(52px,7vh,76px); }

/* reveal (only while html.wmo-anim): the step itself stays put, its parts animate */
.wmo-anim .wmo.wmo-approach--list [data-wmo-reveal="step"] { opacity:1; transform:none; transition:none; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep__text { opacity:0; transform:translateY(18px); transition:opacity .8s ease .12s, transform .8s var(--ease) .12s; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon::before { transform:scale(.4); opacity:0; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon::after { opacity:0; transform:rotate(-90deg) scale(.8); }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon img, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__n { transform:translateY(10px) rotate(-8deg); opacity:0; transition:transform .9s var(--ease), opacity .8s ease; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep__bar { transform:scaleX(0); }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__text { opacity:1; transform:none; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__icon::before { transform:scale(1); opacity:1; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__icon::after { transform:rotate(0) scale(1); opacity:1; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__icon img, .wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__n { transform:none; opacity:1; }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep.is-in .wmo-pstep__bar { transform:scaleX(1); }
.wmo-anim .wmo.wmo-approach--list .wmo-pstep--d .wmo-pstep__text, .wmo-anim .wmo.wmo-approach--list .wmo-pstep--d .wmo-pstep__icon img { transition-delay:.26s; }

/* decorative shapes */
.wmo.wmo-approach--list .wmo-deco { position:absolute; pointer-events:none; z-index:1; }
.wmo.wmo-approach--list .wmo-deco--quarter { top:0; left:clamp(16px,4vw,60px); width:clamp(70px,8vw,110px); height:clamp(56px,6vw,82px); background:#E9D9BE; border-bottom-right-radius:100% 100%; animation:wmoFloat 9s ease-in-out infinite; }
.wmo.wmo-approach--list .wmo-deco--half { top:0; right:clamp(60px,10vw,180px); width:clamp(60px,6vw,90px); height:clamp(30px,3vw,45px); background:#EBC872; border-radius:0 0 999px 999px; animation:wmoFloat 7s ease-in-out infinite reverse; }
.wmo.wmo-approach--list .wmo-deco--donut { top:12%; right:-12vw; width:clamp(320px,42vw,620px); aspect-ratio:1; border-radius:50%; border:clamp(46px,6vw,90px) solid rgba(255,196,81,.1); animation:wmoSpin 60s linear infinite; }
.wmo.wmo-approach--list .wmo-deco--arc { bottom:-90px; left:-90px; width:clamp(220px,22vw,320px); aspect-ratio:1; border-radius:50%; border:3px solid rgba(201,154,46,.75); border-right-color:transparent; border-top-color:transparent; animation:wmoSpin 40s linear infinite; }
.wmo.wmo-approach--list .wmo-deco--blob { bottom:28px; left:clamp(30px,4vw,60px); width:56px; height:28px; background:#EBC872; border-radius:999px 999px 0 0; opacity:.9; animation:wmoFloat 8s ease-in-out infinite; }
.wmo.wmo-approach--list .wmo-deco--dot { width:18px; height:18px; border-radius:50%; background:rgba(255,196,81,.35); top:48%; left:49%; animation:wmoBob 5s ease-in-out infinite; }
.wmo.wmo-approach--list .wmo-deco--ring { bottom:-22px; left:44%; width:44px; height:44px; border-radius:50%; border:8px solid rgba(255,196,81,.3); animation:wmoBob 6s ease-in-out infinite reverse; }
.wmo.wmo-approach--list .wmo-deco--ring2 { bottom:-80px; right:-60px; width:220px; height:220px; border-radius:50%; border:2px solid rgba(201,154,46,.35); border-bottom-color:transparent; border-right-color:transparent; }
@keyframes wmoFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(10px); } }
@keyframes wmoBob { 0%,100% { transform:translate(0,0); } 50% { transform:translate(6px,-12px); } }
@keyframes wmoSpin { to { transform:rotate(360deg); } }

@media (max-width:900px) {
  .wmo.wmo-approach--list .wmo-plist { grid-template-columns:1fr; row-gap:34px; }
  .wmo.wmo-approach--list .wmo-pstep--last { grid-column:auto; justify-self:stretch; max-width:none; }
  .wmo.wmo-approach--list .wmo-deco--donut { right:-40vw; }
  .wmo.wmo-approach--list .wmo-deco--dot { display:none; }
}
@media (max-width:520px) {
  .wmo.wmo-approach--list .wmo-pstep { grid-template-columns:56px minmax(0,1fr); gap:16px; }
  .wmo.wmo-approach--list .wmo-pstep__icon { width:56px; height:56px; }
  .wmo.wmo-approach--list .wmo-pstep__icon img { width:36px; height:36px; }
}
@media (prefers-reduced-motion:reduce) {
  .wmo.wmo-approach--list .wmo-deco { animation:none !important; }
  .wmo-anim .wmo.wmo-approach--list .wmo-pstep__text, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon img, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__n, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon::before, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__icon::after, .wmo-anim .wmo.wmo-approach--list .wmo-pstep__bar { opacity:1 !important; transform:none !important; transition:none !important; }
}