/* ═══════════════════════════════════════════════════════════
   Company Narrative Pages — /about/ + /why-techsutra/
   Requires: design-system.css, components.css
   Shared stylesheet for the matched pair of company pages
   (about/index.html, why-techsutra/index.html). Both are the
   same visual register — one shared file avoids duplicating the
   same rules twice, matching vakio.css/resona.css's one-file-
   per-surface pattern. Reuses .tag/.sec-h/.sec-lead/.reveal/.d1-5
   from components.css — do not redefine here.
   ═══════════════════════════════════════════════════════════ */

[id] { scroll-margin-top: calc(var(--nav-h) + var(--abar-h) + 14px); }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-xs); color: var(--text-3); letter-spacing: .02em;
  padding: calc(var(--nav-h) + var(--abar-h) + 2rem) 0 0;
}
.breadcrumb a { color: var(--text-3); transition: color var(--ease-base); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--gold); }
.breadcrumb-sep { color: var(--text-3); }
.breadcrumb-current { color: var(--text-2); }

/* ── MINI PAGE HERO ──────────────────────────────────────── */
.cp-hero { padding: 1.5rem 0 4.5rem; }
.cp-hero-h {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--text-1); line-height: 1.12; margin: 1rem 0 1.25rem; max-width: 820px;
}
.cp-hero-sub { font-size: var(--text-lg); color: var(--text-2); line-height: 1.65; max-width: 640px; margin: 0; }

/* ── GENERIC SECTION WRAPPER ──────────────────────────────── */
.cp-sec { padding: 5rem 0; background: var(--bg); }
.cp-sec--alt { background: var(--bg-s); }

/* ── BELIEF DETAIL BLOCKS (about page §4.3) ───────────────── */
.belief-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.25rem; }
.belief-item { border-left: 2px solid var(--gold-g); padding-left: 1.5rem; }
.belief-t { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--gold-l); margin-bottom: .6rem; }
.belief-d { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 720px; margin: 0; }

/* ── ORG HIERARCHY DIAGRAM (about page §4.4) ──────────────── */
.org-diagram {
  margin-top: 2.25rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 2rem 2.25rem;
}
.org-root {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
  color: var(--text-1); font-size: 1.05rem; text-transform: uppercase; margin-bottom: 1rem;
}
.org-tree { list-style: none; margin: 0; padding: 0; }
.org-branch {
  font-weight: 700; color: var(--gold); font-size: var(--text-sm); letter-spacing: .06em;
  text-transform: uppercase; margin-top: 1.1rem; padding-left: 1.4rem; position: relative;
}
.org-branch::before { content: '├─'; position: absolute; left: 0; color: var(--text-3); font-weight: 400; }
.org-tree > li:last-child .org-branch::before { content: '└─'; }
.org-leaf-list { list-style: none; margin: .6rem 0 0; padding-left: 2.6rem; }
.org-leaf { font-size: var(--text-sm); color: var(--text-2); padding: .3rem 0; position: relative; }
.org-leaf::before { content: '—'; position: absolute; left: -1.25rem; color: var(--text-3); }
.org-leaf--primary { color: var(--vk-l); }
.org-leaf--secondary { color: var(--rn-l); }
.org-caption { font-size: var(--text-sm); color: var(--text-3); line-height: 1.65; margin: 1.5rem 0 0; max-width: 640px; }
.org-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ── CROSS-LINK PANEL (about page §4.5 "From Problem to Product") ─ */
.cp-crosslink-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 700px; margin: 1.25rem 0 1.75rem; }

/* ── LEADERSHIP BLOCK (about page §4.6, interim treatment) ── */
.cp-leadership {
  margin-top: 2.25rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 2rem 2.25rem;
}
.cp-leadership-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.7; max-width: 600px; margin: 0 0 1.5rem; }

/* ── DIRECTION BLOCK (about page §4.7) ────────────────────── */
.cp-direction-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 700px; margin-top: 1.25rem; }

/* ── DIFFERENTIATOR DETAIL CARDS (why-techsutra page §5.2) ── */
.diff-detail-list { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem; }
.diff-detail-card { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 2rem 2.25rem; }
.diff-detail-t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-1); margin-bottom: .4rem; }
.diff-detail-lead { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold-l); margin-bottom: 1rem; }
.diff-detail-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 760px; margin: 0; }
.diff-detail-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── COMPARISON VISUAL (why-techsutra page §5.3) ──────────── */
.compare { display: flex; align-items: center; justify-content: center; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.compare-col { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 1.5rem 2rem; text-align: center; min-width: 180px; }
.compare-col--gold { border-color: var(--gold-g); background: linear-gradient(135deg, var(--bg-c), var(--bg-ch)); }
.compare-step { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); padding: .4rem 0; }
.compare-col--gold .compare-step { color: var(--gold-l); }
.compare-arrow { color: var(--text-3); font-size: .9rem; }
.compare-versus { font-family: var(--font-display); font-style: italic; color: var(--text-3); font-size: var(--text-sm); }

/* ── ILLUSTRATIVE SCENARIO CARDS (why-techsutra page §5.3) ── */
.scenario-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.scenario-card { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 1.75rem; }
.scenario-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.scenario-line { font-size: var(--text-sm); color: var(--text-2); line-height: 1.7; margin: 0 0 .85rem; }
.scenario-line strong { color: var(--text-1); font-weight: 600; }
.scenario-fine { font-size: var(--text-xs); color: var(--text-3); font-style: italic; margin: 1rem 0 0; border-top: 1px dashed var(--b2); padding-top: .85rem; }

/* ── CREDIBILITY CLOSE PANEL (why-techsutra page §5.4) ────── */
.credibility-panel { margin-top: 2rem; max-width: 800px; }
.credibility-body { font-size: var(--text-md); color: var(--text-2); line-height: 1.8; margin-top: 1rem; }

/* ── CLOSING CTA (shared by both pages) ───────────────────── */
.cp-final-cta { padding: 6rem 0; background: linear-gradient(180deg, var(--bg), var(--bg-s)); }
.cp-final-cta-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 1.75rem; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .scenario-grid { grid-template-columns: 1fr; }
  .compare { gap: 1.25rem; }
}
@media (max-width: 768px) {
  .cp-sec { padding: 3.5rem 0; }
  .cp-hero { padding: 1rem 0 3rem; }
  .org-diagram, .cp-leadership, .diff-detail-card { padding: 1.5rem 1.5rem; }
  .cp-final-cta { padding: 4rem 0; }
}
@media (max-width: 480px) {
  .breadcrumb { flex-wrap: wrap; }
  .org-leaf-list { padding-left: 1.5rem; }
  .org-diagram, .cp-leadership, .diff-detail-card { padding: 1.25rem 1.1rem; }
}