/* ════════════════════════════════════════════════════════════
   RUPADI INTERNATIONAL — VISION LAYER
   The thesis page: one question, six reframes, four levels.

   Builds on the light editorial scaffolding in home.css
   (.hx-band / .hx-wrap / .hx-h2 / .hx-eyebrow / .hx-lede) and
   adds only what the argument needs. Scoped to .vz-*.
════════════════════════════════════════════════════════════ */

/* ── 1 · The question ────────────────────────────────────── */
.vz-question{
  max-width:24ch;margin:0 auto;text-align:center;
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  font-weight:800;letter-spacing:-.045em;line-height:1.1;
  color:var(--hx-ink);
}
.vz-question em{
  font-style:italic;font-family:'Fraunces',var(--font-display);
  font-weight:600;font-optical-sizing:auto;color:var(--hx-ember);
}
.vz-question__mark{
  display:block;width:44px;height:3px;border-radius:3px;margin:0 auto 30px;
  background:linear-gradient(90deg,var(--hx-ember),var(--hx-gold));
}
.vz-question__after{
  max-width:60ch;margin:32px auto 0;text-align:center;
  font-size:clamp(15.5px,1.35vw,17px);line-height:1.75;color:var(--hx-ink-2);
}
.vz-question__after b{color:var(--hx-ink);font-weight:650}

/* ── 2 · The reframe — "not about X, about Y" ────────────── */
.vz-reframe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vz-card{
  position:relative;overflow:hidden;
  background:var(--hx-card);
  border:1px solid var(--hx-line);
  border-radius:var(--hx-r-lg);
  padding:28px 26px;
  display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.vz-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--p),transparent);
}
.vz-card:hover{transform:translateY(-5px);box-shadow:var(--hx-shadow-xl);border-color:var(--p-soft-2)}
.vz-card__product{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--p);margin-bottom:20px;
}
.vz-card__product i{font-size:11px}
.vz-card__not{
  font-size:14.5px;line-height:1.55;color:var(--hx-ink-3);
  margin-bottom:12px;padding-left:18px;position:relative;
}
.vz-card__not::before{
  content:'';position:absolute;left:0;top:.62em;
  width:10px;height:1px;background:var(--hx-line-2);
}
.vz-card__is{
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.4;
  color:var(--hx-ink);padding-left:18px;position:relative;flex-grow:1;
}
.vz-card__is::before{
  content:'';position:absolute;left:0;top:.66em;
  width:10px;height:2px;border-radius:2px;background:var(--p);
}

/* ── 3 · Levels — the systems ladder ─────────────────────── */
.vz-levels{display:grid;gap:0;border-top:1px solid var(--hx-line)}
.vz-level{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,4vw,52px);align-items:baseline;
  padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--hx-line);
  transition:background .3s ease;
}
.vz-level:hover{background:rgba(194,65,12,.022)}
.vz-level__n{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;color:var(--hx-ink-3);min-width:3.4ch;
}
.vz-level__name{
  font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.16;color:var(--hx-ink);
}
.vz-level__name em{
  font-style:italic;font-family:'Fraunces',var(--font-display);
  font-weight:600;color:var(--hx-ember);
}
.vz-level__body p{font-size:15px;line-height:1.7;color:var(--hx-ink-2);margin-bottom:12px}
.vz-level__body p:last-child{margin-bottom:0}
.vz-level__tags{display:flex;flex-wrap:wrap;gap:8px}
.vz-level__tags span{
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hx-ink-2);
  padding:6px 12px;border-radius:999px;
  background:rgba(27,24,17,.035);border:1px solid var(--hx-line);
}

/* ── 4 · Agency principles ───────────────────────────────── */
.vz-agency{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.vz-principle{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;
  background:var(--hx-card);border:1px solid var(--hx-line);
  border-radius:var(--hx-r);padding:24px 26px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.vz-principle:hover{transform:translateY(-3px);box-shadow:var(--hx-shadow-lg);border-color:var(--hx-line-2)}
.vz-principle__ico{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:rgba(194,65,12,.08);color:var(--hx-ember);
}
.vz-principle h4{
  font-size:15px;font-weight:750;letter-spacing:-.02em;
  color:var(--hx-ink);margin-bottom:6px;
}
.vz-principle p{font-size:13.5px;line-height:1.65;color:var(--hx-ink-2)}

/* ── 5 · Pull quote ──────────────────────────────────────── */
.vz-pull{
  max-width:52rem;margin-inline:auto;
  padding:clamp(30px,4vw,44px) clamp(26px,4vw,48px);
  border-left:3px solid var(--hx-ember);
  background:linear-gradient(90deg,rgba(194,65,12,.05),transparent 88%);
  border-radius:0 var(--hx-r) var(--hx-r) 0;
}
.vz-pull p{
  font-size:clamp(1.1rem,2.1vw,1.45rem);font-weight:650;
  line-height:1.5;letter-spacing:-.025em;color:var(--hx-ink);
}
.vz-pull p em{
  font-style:italic;font-family:'Fraunces',var(--font-display);
  font-weight:600;color:var(--hx-ember);
}
.vz-pull cite{
  display:block;margin-top:16px;font-style:normal;
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--hx-ink-3);
}

/* ── 6 · Responsive ──────────────────────────────────────── */
@media(max-width:1024px){
  .vz-reframe{grid-template-columns:repeat(2,1fr)}
  .vz-level{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .vz-level__body{grid-column:2}
}
@media(max-width:700px){
  .vz-reframe{grid-template-columns:1fr}
  .vz-agency{grid-template-columns:1fr}
  .vz-level{grid-template-columns:1fr;row-gap:10px}
  .vz-level__body{grid-column:1}
}