/* ==========================================================================
   MEENA DIGI SOLUTIONS — About / Our Story
   Loaded after css/style.css — inherits the full design system (tokens,
   nav, menu overlay, buttons, footer, cursor, grain). This file only adds
   the story-page components: chapters, word-fill, the MeeNa name merge,
   trust ledger, founder block, journey timeline and vision statement.
   ========================================================================== */

/* ---------- Shared chapter scaffolding ---------- */
.chapter{
  width:var(--container); margin-inline:auto;
  padding:clamp(72px, 14vw, 150px) 0;
  position:relative;
  scroll-margin-top:70px;
}
.chapter-tag{
  display:inline-flex; align-items:center; gap:12px;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:26px;
}
.chapter-tag::before{
  content:''; width:34px; height:1px; background:var(--accent); opacity:0.7;
}
.chapter-num{
  position:absolute; top:clamp(40px, 8vw, 80px); right:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(4rem, 12vw, 10rem); line-height:1;
  color:var(--text); opacity:0.05; pointer-events:none; user-select:none;
}

/* ---------- About hero ---------- */
.about-hero{
  position:relative; min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.about-hero .hero-inner{ position:relative; z-index:2; width:var(--container); margin-inline:auto; }
.about-hero-sub{
  margin-top:28px; max-width:52ch; color:var(--text-dim); font-size:1.08rem;
}

/* ---------- Chapter 01 — word-fill story ---------- */
.storyfill{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(1.45rem, 3.1vw, 2.35rem);
  line-height:1.42; max-width:26ch;
  max-width:32ch;
}
.sf-word{ opacity:0.13; display:inline; }
.sf-word.sf-accent{ color:var(--accent); }
/* JS animates opacity via scrub; this is the no-JS / reduced-motion floor */
.no-js .sf-word, [data-storyfill].is-static .sf-word{ opacity:1; }

/* ---------- Chapter 02 — the name merge ---------- */
.name-stage{ position:relative; }
.name-pin{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden;
}
.name-rows{ position:relative; z-index:2; }
.name-row{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem, 7vw, 5.6rem); line-height:1.08;
  letter-spacing:0.02em; white-space:nowrap;
}
.name-row + .name-row{ margin-top:8px; }
.nm-ch{ display:inline-block; will-change:transform, opacity; }
.nm-keep{ color:var(--accent); }
.name-row-label{
  font-family:var(--font-body); font-weight:600; text-transform:uppercase;
  letter-spacing:0.22em; font-size:0.72rem; color:var(--text-faint);
  margin-bottom:10px;
}
.name-final{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  z-index:1; opacity:0; white-space:nowrap;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.4rem, 11vw, 9rem); line-height:1;
}
.name-final .nf-accent{ color:var(--accent); }
.name-caption{
  margin-top:40px; z-index:2; color:var(--text-dim);
  font-size:1.05rem; max-width:44ch;
}
.name-caption strong{ color:var(--text); font-weight:600; }
/* thin gesture line behind the final name */
.name-trace{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}
.name-trace path{
  fill:none; stroke:var(--accent); stroke-width:1.2px; opacity:0.14;
  vector-effect:non-scaling-stroke;
}

/* ---------- Chapter 03 — the firm / trust ledger ---------- */
.firm-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px, 6vw, 80px);
  align-items:start;
}
.firm-copy p{ color:var(--text-dim); font-size:1.06rem; max-width:50ch; }
.firm-copy p + p{ margin-top:18px; }
.firm-copy .firm-lead{
  color:var(--text); font-size:clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight:500; line-height:1.4; max-width:34ch;
}
.trust-ledger{ display:grid; gap:16px; }
.trust-card{
  padding:26px 28px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.trust-card::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .8s var(--ease);
}
.trust-card.is-visible::after{ transform:scaleY(1); }
.trust-card h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:0.04em;
}
.trust-card p{ margin-top:8px; color:var(--text-dim); font-size:0.94rem; }
.trust-card .trust-mono{
  font-family:ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:0.92rem; letter-spacing:0.06em; color:var(--accent);
}

/* ---------- Chapter 04 — founder ---------- */
.founder-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px, 6vw, 90px);
  align-items:start;
}
.founder-visual{ position:sticky; top:110px; }
.founder-mark{
  width:min(380px, 100%); aspect-ratio:1/1; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:block; overflow:hidden;
}
.founder-mark svg{ width:100%; height:100%; }
.founder-photo{ background:linear-gradient(160deg, var(--surface), var(--surface-2)); display:flex; align-items:flex-end; }
.founder-photo img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.founder-name{
  margin-top:20px; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1.5rem;
}
.founder-role{ margin-top:6px; color:var(--text-dim); font-size:0.98rem; }
.founder-links{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.founder-copy > p{ color:var(--text-dim); font-size:1.06rem; max-width:52ch; }
.founder-copy > p + p{ margin-top:18px; }
.founder-copy .founder-lead{
  color:var(--text); font-size:clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight:500; line-height:1.4; max-width:36ch;
}

/* journey timeline */
.journey{ margin-top:54px; position:relative; padding-left:34px; }
.journey-line{
  position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:var(--border); border-radius:2px; overflow:hidden;
}
.journey-line-fill{
  position:absolute; inset:0; background:var(--accent);
  transform:scaleY(0); transform-origin:top;
}
.journey-step{ position:relative; padding:0 0 34px; }
.journey-step:last-child{ padding-bottom:0; }
.journey-step::before{
  content:''; position:absolute; left:-33px; top:6px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent);
  transition:background .4s var(--ease);
}
.journey-step.is-visible::before{ background:var(--accent); }
.journey-step h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0.03em;
}
.journey-step .journey-meta{
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:6px; display:block;
}
.journey-step p{ margin-top:8px; color:var(--text-dim); font-size:0.98rem; max-width:46ch; }

/* ---------- Chapter 05 — vision & mission editorial rows ----------
   Not cards. Two full-width story rows in the page's own language:
   big split-type statements + thin-stroke abstract line graphics that
   draw themselves on scroll (same visual family as the hero network). */
.vm-rows{
  margin-top:clamp(56px, 9vw, 110px);
  text-align:left;
}
.vm-row{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(36px, 6vw, 90px); align-items:center;
}
.vm-row-flip{ grid-template-columns:1.15fr 0.85fr; }
.vm-row-flip .vm-visual{ order:2; }
.vm-row-flip .vm-content{ order:1; }

.vm-divider{
  margin:clamp(56px, 9vw, 100px) 0;
  display:flex; justify-content:center;
}
.vm-divider span{
  display:block; width:1px; height:clamp(48px, 7vw, 90px);
  background:linear-gradient(to bottom, transparent, var(--accent), transparent);
  opacity:0.55;
}

.vm-visual{ position:relative; }
.vm-svg{ width:min(420px, 100%); margin-inline:auto; overflow:visible; }
.vm-draw{
  fill:none; stroke:var(--accent); stroke-width:1.4px;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.vm-thin{ stroke-width:0.8px; opacity:0.35; }
.vm-beam{
  stroke:var(--accent); stroke-width:0.8px; opacity:0;
  stroke-dasharray:2 7; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.vm-dot{ fill:var(--action); }
.vm-facet{
  fill:var(--accent); fill-opacity:0.1;
  stroke:var(--accent); stroke-width:0.8px; opacity:0;
  vector-effect:non-scaling-stroke;
}

.vm-statement{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem, 3.8vw, 3.2rem); line-height:1.06;
  margin:0;
}
.vm-statement em{ font-style:normal; color:var(--accent); }
.vm-text{
  margin-top:22px; color:var(--text-dim);
  font-size:clamp(1rem, 1.5vw, 1.12rem); line-height:1.65; max-width:52ch;
}

@media (max-width:860px){
  .vm-row, .vm-row-flip{ grid-template-columns:1fr; gap:30px; }
  .vm-row-flip .vm-visual{ order:1; }
  .vm-row-flip .vm-content{ order:2; }
  .vm-svg{ width:min(300px, 78%); }
}

/* ---------- Chapter 05 — vision ---------- */
.vision{ text-align:center; }
.vision .chapter-tag{ justify-content:center; }
.vision .chapter-tag::before{ display:none; }
.vision-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem, 5.2vw, 4.4rem); line-height:1.06;
  max-width:20ch; margin-inline:auto;
}
.vision-title em{ font-style:normal; color:var(--accent); }
.vision-sub{
  margin:26px auto 0; max-width:52ch; color:var(--text-dim); font-size:1.08rem;
}
.vision-cta{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .firm-grid, .founder-grid{ grid-template-columns:1fr; }
  .founder-visual{ position:static; }
  .chapter-num{ display:none; }
  .name-row{ font-size:clamp(1.7rem, 9vw, 3rem); }
  .name-final{ font-size:clamp(2.6rem, 15vw, 5rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sf-word{ opacity:1; }
  .journey-line-fill{ transform:scaleY(1); }
}