/* ===== ADAYA — Our Mission · Scroll Flow =====
   A clean, editorial two-column mission section. A sticky left rail
   holds the heading + a live index counter; the right column is a
   list of four commitments. As you scroll, each item reveals and the
   one nearest the viewport centre lifts into a glass spotlight while
   the counter, progress bar and dots stay in sync. Fully theme-aware,
   no-JS and reduced-motion safe. */

.mv{position:relative;overflow:hidden;
  /* .section (shorthand padding:… 0) zeroes the .wrap horizontal padding on
     this combined-class section, bleeding content to the viewport edges.
     Restore it so the heading and cards keep breathing room from the frame. */
  padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

/* (blue aura removed — its blurred circle was clipped by overflow:hidden,
   leaving a hard cut edge. Keep the mission area clean.) */
.mv::before{content:none}

.mv-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:0.82fr 1.18fr;
  gap:clamp(32px,6vw,96px);align-items:start;
}

/* ---------- LEFT · sticky rail ---------- */
.mv-aside{position:sticky;top:clamp(96px,15vh,150px)}
.mv-aside .overline{display:inline-block;margin-bottom:20px}
.mv-aside h2{margin-bottom:20px}
.mv-sub{font-size:clamp(1rem,1.3vw,1.16rem);color:var(--text-2);line-height:1.62;max-width:33ch;text-wrap:pretty}

.mv-progress{margin-top:clamp(30px,4vw,50px)}
.mv-count{display:flex;align-items:baseline;gap:9px;font-family:"IBM Plex Mono",monospace;margin-bottom:18px}
.mv-cur{
  font-size:clamp(2.6rem,5vw,3.7rem);font-weight:600;line-height:1;letter-spacing:-.02em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.mv-sep,.mv-total{font-size:1.4rem;color:var(--text-3);font-weight:500}
.mv-track{height:3px;border-radius:999px;background:var(--border);overflow:hidden;max-width:220px}
.mv-fill{
  display:block;height:100%;width:25%;border-radius:999px;background:var(--grad-core);
  box-shadow:0 0 12px color-mix(in srgb,var(--sky) 45%,transparent);
  transition:width .55s var(--ease);
}
.mv-dots{display:flex;gap:11px;margin-top:22px}
.mv-dot{
  width:9px;height:9px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:var(--border-strong);transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.mv-dot:hover{background:var(--text-3)}
.mv-dot.active{background:var(--sky);box-shadow:0 0 10px var(--sky);transform:scale(1.3)}
.mv-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--sky) 55%,transparent);outline-offset:3px}

/* ---------- RIGHT · mission list ---------- */
.mv-list{list-style:none;margin:0;padding:0}
.mv-item{
  position:relative;display:grid;grid-template-columns:minmax(58px,auto) 1fr;
  gap:clamp(18px,2.6vw,34px);align-items:start;
  padding:clamp(26px,3.4vw,40px) clamp(18px,2.6vw,32px);
  border-top:1px solid var(--border);border-radius:var(--r-xl);
}
.mv-item:last-child{border-bottom:1px solid var(--border)}

/* the glass spotlight for the active item */
.mv-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  opacity:0;transform:scale(.985);
  background:var(--glass-reg);border:1px solid var(--glass-border);
  box-shadow:var(--elev-2),var(--glass-hi);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.mv-item.active::before{opacity:1;transform:scale(1)}
.mv-item>*{position:relative;z-index:1}

/* left rail — number + icon */
.mv-lead{display:flex;flex-direction:column;align-items:flex-start}
.mv-num{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(1.55rem,2.4vw,2.15rem);
  font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--text-3);margin-bottom:18px;
  transition:color .4s var(--ease);
}
.mv-item.active .mv-num{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mv-ic{
  width:clamp(46px,3.4vw,54px);aspect-ratio:1;border-radius:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--sapphire) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--sky) 26%,transparent);
  color:var(--text-brand);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);
}
.mv-ic svg{width:clamp(23px,2vw,26px);height:clamp(23px,2vw,26px)}
.mv-item.active .mv-ic{
  background:var(--grad-cta);border-color:transparent;color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(26,132,242,.3),0 0 30px color-mix(in srgb,var(--sky) 40%,transparent);
}

/* body */
.mv-body h3{
  font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  margin-bottom:12px;color:var(--text);transition:color .4s var(--ease);
}
.mv-body p{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--text-2);line-height:1.62;max-width:44ch;text-wrap:pretty}

/* ---------- scroll reveal ---------- */
.mv-fx{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mv-fx.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mv-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
  .mv-aside{position:static}
  .mv-sub{max-width:54ch}
  .mv-progress{display:none}
}
@media (max-width:560px){
  .mv-item{grid-template-columns:1fr;gap:16px;padding:26px 18px}
  .mv-lead{flex-direction:row;align-items:center;gap:16px}
  .mv-num{margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .mv-fx{opacity:1;transform:none;transition:none}
  .mv-item::before,.mv-fill{transition:none}
}