/* ============================================================
   Niya Consulting — parent-site components. Extends the Noema
   system (tokens.css + site.css). Same hairlines, same near-mono
   restraint, brand-accent on ~2 elements per view. The "show the
   work" device here is the ENGAGEMENT ARTEFACT: outcome-first
   records and value ledgers, never decorative imagery.
   ============================================================ */

/* ---------- hero spine line ---------- */
.spine { color:var(--brand-accent); font-weight:600; }

/* ---------- proof strip (outcome-led, three) ---------- */
.proofstrip { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-surface); }
.proof-cell { padding:24px 26px; border-left:1px solid var(--border-subtle); }
.proof-cell:first-child { border-left:none; }
.proof-num { font-size:clamp(28px,3.4vw,40px); line-height:1; letter-spacing:-.022em; font-weight:600;
  color:var(--text-primary); }
.proof-num .u { color:var(--brand-accent); }
.proof-cap { font-size:var(--text-sm); line-height:1.5; color:var(--text-secondary); margin-top:12px; text-wrap:pretty; }
@media (max-width:760px){ .proofstrip{ grid-template-columns:1fr; }
  .proof-cell{ border-left:none; border-top:1px solid var(--border-subtle); }
  .proof-cell:first-child{ border-top:none; } }

/* ---------- value ledger artefact (hero / case 2) ---------- */
.ledger { background:var(--bg-surface); }
.ledger-head { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--border-subtle);
  background:var(--bg-subtle); }
.ledger-head .lh-t { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); letter-spacing:0; }
.ledger-body { padding:6px 16px 8px; }
.ledger-row { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:10px 16px;
  padding:13px 0; border-top:1px solid var(--border-subtle); }
.ledger-row:first-child { border-top:none; }
.lr-label { font-size:var(--text-base); color:var(--text-primary); line-height:1.35; }
.lr-sub { display:block; font-size:var(--text-xs); color:var(--text-tertiary); margin-top:3px; }
.lr-amt { font-family:var(--font-mono); font-size:var(--text-lg); font-weight:500; color:var(--text-primary);
  white-space:nowrap; letter-spacing:-.01em; }
.lr-bar { grid-column:1 / -1; height:4px; border-radius:99px; background:var(--bg-subtle); overflow:hidden; margin-top:2px; }
.lr-bar i { display:block; height:100%; background:color-mix(in oklab,var(--brand-accent) 55%,transparent); border-radius:99px; }
.ledger-total { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px;
  padding:15px 16px; border-top:1.5px solid var(--border-default); background:var(--brand-accent-tint); }
.ledger-total .tt { font-size:var(--text-md); font-weight:600; color:var(--text-primary); }
.ledger-total .tt small { display:block; font-weight:400; font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px; }
.ledger-total .ta { font-family:var(--font-mono); font-size:clamp(20px,2.2vw,26px); font-weight:600;
  color:var(--brand-accent); letter-spacing:-.01em; }

/* ---------- the model: Discover / Transform / Build ---------- */
.model-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.mstep { padding:26px 24px 28px; border-left:1px solid var(--border-subtle); background:var(--bg-surface); }
.mstep:first-child { border-left:none; }
.mstep-n { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-tertiary); }
.mstep-t { font-size:var(--text-2xl); font-weight:600; letter-spacing:-.012em; color:var(--text-primary); margin-top:14px; }
.mstep-d { font-size:var(--text-base); line-height:1.55; color:var(--text-secondary); margin-top:12px; text-wrap:pretty; }
.mstep-tag { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:var(--text-xs);
  font-weight:500; color:var(--brand-accent); }
@media (max-width:820px){ .model-steps{ grid-template-columns:1fr; }
  .mstep{ border-left:none; border-top:1px solid var(--border-subtle); } .mstep:first-child{ border-top:none; } }

/* ---------- engagement artefact (case study record) ---------- */
.case { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  overflow:hidden; }
.case-head { display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid var(--border-subtle);
  background:var(--bg-subtle); flex-wrap:wrap; }
.case-id { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:1px 6px; }
.case-client { font-size:var(--text-sm); font-weight:500; color:var(--text-secondary); }
.case-region { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); margin-left:auto; letter-spacing:.02em; }
.case-body { padding:26px 28px 28px; }
.case-outcome { font-size:clamp(20px,2.2vw,27px); line-height:1.18; letter-spacing:-.015em; font-weight:600;
  color:var(--text-primary); text-wrap:balance; max-width:30ch; }
.case-narr { font-size:var(--text-md); line-height:1.6; color:var(--text-secondary); margin-top:16px; text-wrap:pretty; max-width:64ch; }

.case-cols { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:26px; padding-top:24px;
  border-top:1px solid var(--border-subtle); }
.col-label { font-family:var(--font-sans); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--text-tertiary); margin-bottom:14px; }
.driver-list { display:flex; flex-direction:column; gap:0; }
.driver-list li { display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--border-subtle);
  font-size:var(--text-base); line-height:1.4; color:var(--text-primary); }
.driver-list li:first-child { border-top:none; }
.driver-list li::before { content:""; flex:0 0 auto; width:6px; height:6px; margin-top:7px; border-radius:1px;
  background:var(--brand-accent); }
.ship-list { display:flex; flex-direction:column; gap:0; }
.ship-list li { display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--border-subtle);
  font-size:var(--text-base); line-height:1.4; color:var(--text-primary); }
.ship-list li:first-child { border-top:none; }
.ship-list li .ck { flex:0 0 auto; color:var(--confidence-high-fg); margin-top:1px; }
@media (max-width:680px){ .case-cols{ grid-template-columns:1fr; gap:24px; } }

/* proof-metric chips (small — metrics are proof, not the point) */
.metricbar { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.metric { display:inline-flex; align-items:baseline; gap:7px; padding:7px 12px; border:1px solid var(--border-subtle);
  border-radius:99px; background:var(--bg-subtle); }
.metric b { font-family:var(--font-mono); font-size:var(--text-base); font-weight:600; color:var(--text-primary); letter-spacing:-.01em; }
.metric span { font-size:var(--text-xs); color:var(--text-secondary); }

/* case stack footer */
.case-stack { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:24px; padding-top:18px;
  border-top:1px solid var(--border-subtle); }
.case-stack .sl { font-family:var(--font-sans); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--text-tertiary); margin-right:4px; }

/* ---------- Noema sibling-property panel ---------- */
.sibling { display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--border-default);
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-surface); }
.sibling-l { padding:40px 40px 42px; }
.sibling-r { border-left:1px solid var(--border-subtle); background:var(--bg-subtle); padding:40px;
  display:flex; flex-direction:column; justify-content:center; gap:14px; }
.sib-mark { color:var(--brand-accent); }
@media (max-width:820px){ .sibling{ grid-template-columns:1fr; }
  .sibling-r{ border-left:none; border-top:1px solid var(--border-subtle); } }

/* ---------- about: credibility line ---------- */
.cred { border-left:2px solid var(--brand-accent); padding:6px 0 6px 22px; }
.cred .body { color:var(--text-primary); }

/* ---------- contact panel ---------- */
.contact-card { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:40px; }
.contact-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }

/* ---------- page hero (interior pages) ---------- */
.page-hero { padding:72px 0 8px; }
.page-hero .display { max-width:18ch; }

/* ---------- cross-page CTA band ---------- */
.cta-band { text-align:center; }
.cta-band .h2 { max-width:22ch; margin:0 auto; }

/* ---------- footer columns (parent site has real nav) ---------- */
.foot-cols { display:flex; gap:48px; flex-wrap:wrap; }
.foot-col { display:flex; flex-direction:column; gap:9px; }
.foot-col .fh { font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--text-tertiary); margin-bottom:3px; }
.foot-col a { color:var(--text-secondary); text-decoration:none; font-size:var(--text-base); transition:color .15s; }
.foot-col a:hover { color:var(--text-primary); }

/* ---------- brand logo: cropped N mark + inline "Niya Consulting" wordmark ---------- */
.brand-lockup { gap:9px; }
/* mark sized to match the wordmark cap height (the "N" of "Niya Consulting") */
.brand-lockup .mark { width:23px; height:23px;
  background:url("niya-logo.png") center top / auto 30px no-repeat; }
.brand-lockup .mark svg { display:none; }      /* drop the old inline glyph; show the real logo mark */
/* wordmark on one line: "Niya Consulting" */
.brand-lockup > span:last-child { display:flex; align-items:baseline; gap:6px; }
.brand-name { font-size:21px; font-weight:600; letter-spacing:.01em; line-height:1.1; }
.brand-sub  { display:inline; font-size:20px; font-weight:400; text-transform:none;
  letter-spacing:.01em; color:var(--text-secondary); }
.footer .brand-lockup .mark { width:25px; height:25px; background-size:auto 32px; }

/* ---------- Noema = green (separate product), even though Niya's accent is blue ---------- */
.btn-noema { background:#15803D; color:#fff; border-color:transparent; }
.btn-noema:hover { background:#11652e; }
[data-theme="dark"] .btn-noema { background:#16A34A; color:#06210F; }
[data-theme="dark"] .btn-noema:hover { background:#1eb054; }

/* ---------- mobile nav: keep the CTA inside the right margin ---------- */
@media (max-width:560px) {
  .nav-actions { margin-left:auto; gap:8px; }
  .nav .btn-primary { padding:8px 11px; font-size:13px; }
  .brand-lockup .brand-name { font-size:18px; }
  .brand-lockup .brand-sub  { font-size:17px; }
}