.ip-inop-mth,.ip-inop-mth *{box-sizing:border-box}
.ip-inop-mth{
  --ip-teal:#00a4ef;--ip-deep:#0078d4;--ip-petrol:#1f5a73;--ip-navy:rgba(6,2,74,.85);
  --ip-dot:56px;--ip-divider:#ffb900;--ip-orange:#ff8c00;--ip-tint:#f2f9fa;
  width:100%;padding:50px 0;background:var(--ip-tint);color:#000;
  font:400 16px/1.6 "Roboto",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left
}
.ip-inop-mth__inner{max-width:1200px;margin:0 auto;padding:0}
@media (max-width:1300px){.ip-inop-mth__inner{padding:0 20px}}
.ip-inop-mth__head{max-width:900px;margin-bottom:30px}
.ip-inop-mth__kicker{font-family:"Roboto",Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-teal);margin:0 0 8px;line-height:1.6}
.ip-inop-mth__title{font-family:"Roboto",Arial,sans-serif;font-size:36px;line-height:1.15;font-weight:700;color:var(--ip-navy);margin:0;padding:0}
.ip-inop-mth__divider{display:block;width:70px;height:6px;background:var(--ip-divider);margin:14px 0 18px}

.ip-inop-mth__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:10px 0 34px;position:relative}
.ip-inop-mth__steps::before{content:"";position:absolute;left:8%;right:8%;top:calc(var(--ip-dot) / 2 - 2px);height:4px;background:var(--ip-deep);opacity:.35}
.ip-inop-mth__step{text-align:center;position:relative;padding:0 6px}
.ip-inop-mth__dot{width:var(--ip-dot);height:var(--ip-dot);flex:none;border-radius:50%;background:var(--ip-petrol);color:#fff;font-family:"Roboto",Arial,sans-serif;font-size:22px;font-weight:700;line-height:1.6;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;position:relative;border:4px solid #fff;box-shadow:0 0 0 2px var(--ip-deep)}
.ip-inop-mth__step:last-child .ip-inop-mth__dot{background:var(--ip-orange)}
.ip-inop-mth__label{font-family:"Roboto",Arial,sans-serif;font-size:15px;font-weight:500;line-height:20px;display:block;color:#000}

@media (max-width:1024px){
  .ip-inop-mth{--ip-dot:52px}
  .ip-inop-mth__title{font-size:32px}
  .ip-inop-mth__step{padding:0 4px}
}
@media (max-width:767px){
  .ip-inop-mth{padding:40px 0}
  .ip-inop-mth__inner{padding:0 20px}
  .ip-inop-mth__title{font-size:26px}
  .ip-inop-mth__head{margin-bottom:24px}
  .ip-inop-mth__steps{margin-bottom:0}

  /* Vertical timeline (default) */
  .ip-inop-mth--m-vertical{--ip-dot:48px}
  .ip-inop-mth--m-vertical .ip-inop-mth__steps{grid-template-columns:1fr;row-gap:22px}
  .ip-inop-mth--m-vertical .ip-inop-mth__steps::before{display:block;left:calc(var(--ip-dot) / 2 - 2px);right:auto;top:calc(var(--ip-dot) / 2);bottom:calc(var(--ip-dot) / 2);width:4px;height:auto}
  .ip-inop-mth--m-vertical .ip-inop-mth__step{display:flex;align-items:center;gap:16px;text-align:left;padding:0}
  .ip-inop-mth--m-vertical .ip-inop-mth__dot{margin:0}
  .ip-inop-mth--m-vertical .ip-inop-mth__label{font-size:16px}

  /* 2-column grid */
  .ip-inop-mth--m-grid .ip-inop-mth__steps{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .ip-inop-mth--m-grid .ip-inop-mth__steps::before{display:none}
}

/* ---------- scroll reveal (hidden state is added by JS only; animation runs via Web Animations API) ---------- */
[data-ip-reveal] .ip-inop-rv{opacity:0}
[data-ip-reveal="up"] .ip-inop-rv{transform:translateY(28px)}
[data-ip-reveal="left"] .ip-inop-rv{transform:translateX(-32px)}
[data-ip-reveal="right"] .ip-inop-rv{transform:translateX(32px)}
[data-ip-reveal="zoom"] .ip-inop-rv{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){[data-ip-reveal] .ip-inop-rv{opacity:1;transform:none}}