/* ============================================================
   Cogniron — Insights / From the field
   Extends homepage.css (same "Steel" system: Zinc + Indigo).
   Type-driven editorial register — no photography, the brand
   mark and the accent rule carry the visual weight.
   ============================================================ */

/* ── Breadcrumb (mirrors service-detail) ─────────────── */
.crumb { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-tertiary); }
.crumb a { color: var(--text-secondary); text-decoration: none; transition: color 140ms ease; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: 0.5; }
.crumb .here { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════
   Hero
   ════════════════════════════════════════════════════════ */
/* Dark editorial masthead with a live "signal field" backdrop */
.ins-hero { position: relative; overflow: hidden; padding: 0; isolation: isolate; margin-top: -74px; }
.ins-field {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  display: block; pointer-events: none;
}
/* readability veil: keep the field lively on the right, calm behind the text */
.ins-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, var(--bg-canvas) 26%, color-mix(in srgb, var(--bg-canvas) 55%, transparent) 56%, transparent 88%),
    linear-gradient(to bottom, var(--bg-canvas), transparent 22%, transparent 72%, var(--bg-canvas));
}
.ins-hero .wrap { position: relative; z-index: 2; }
.ins-hero-pad { padding: 120px 0 84px; }
.ins-hero-inner { padding-top: 42px; }
.ins-hero .crumb { margin-bottom: 0; }
.ins-hero h1 {
  margin-top: 22px; font-size: clamp(40px, 5.6vw, 70px); line-height: 1.03;
  letter-spacing: -0.028em; font-weight: 500; color: var(--text-primary);
  max-width: 15ch; text-wrap: balance;
}
.ins-hero h1 em { color: var(--accent); font-style: normal; font-weight: 600; }
.ins-hero .sub {
  margin-top: 26px; font-size: 19px; line-height: 1.6; color: var(--text-secondary);
  max-width: 54ch; text-wrap: pretty;
}

/* live telemetry ticker — ties "field notes" to a living eval feed */
.ins-ticker {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--bg-elevated) 64%, transparent);
  border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 8px 18px 8px 14px; max-width: 100%;
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
.tk-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--status-running); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 70%, transparent); animation: tkPulse 1.9s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes tkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-label { margin-left: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; white-space: nowrap; }
.tk-sep { width: 1px; height: 15px; background: var(--border-default); margin: 0 14px; flex: none; }
.tk-line { color: var(--text-primary); white-space: nowrap; overflow: hidden; }
.tk-line .cur { display: inline-block; width: 7px; margin-left: 1px; background: var(--accent); color: transparent; animation: tkCaret 1s steps(1) infinite; }
@keyframes tkCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.tk-line .ok { color: var(--success); }
.tk-line .flag { color: var(--warning); }

/* meta rule under hero */
.ins-meta {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border-default);
  display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-tertiary);
}
.ins-meta b { color: var(--text-primary); font-weight: 600; }
.ins-meta .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--border-default); }

/* ════════════════════════════════════════════════════════
   Featured — editorial: lead piece + numbered side list
   ════════════════════════════════════════════════════════ */
.ins-featured { padding: 64px 0 0; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); gap: 56px; align-items: stretch; }

/* Lead card */
.feat-lead {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 40px 80px -54px rgba(9,9,11,0.32);
  text-decoration: none; color: inherit;
  transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.feat-lead:hover { transform: translateY(-3px); border-color: var(--border-default); box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 48px 92px -50px rgba(9,9,11,0.4); }
/* tinted masthead panel — texture instead of a photo */
.feat-masthead {
  position: relative; padding: 30px 36px 26px; min-height: 232px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(ellipse 70% 90% at 86% 0%, var(--accent-glow), transparent 64%),
    var(--bg-inverted);
  overflow: hidden;
}
.feat-masthead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
/* looping scan sweep — echoes the Assure evidence ledger */
.feat-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 36%, transparent), transparent);
  opacity: 0; transform: translateY(-40px);
}
.feat-lead:not(.no-motion) .feat-scan { animation: featScan 5.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes featScan { 0%, 8% { opacity: 0; transform: translateY(-40px); } 16% { opacity: 1; } 84% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateY(232px); } }
@media (prefers-reduced-motion: reduce) { .feat-scan { display: none; } }
.feat-masthead .fm-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feat-masthead .fm-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: #FAFAFA; }
.feat-mark { display: inline-flex; gap: 4px; align-items: center; }
.feat-mark i { width: 9px; height: 22px; background: var(--accent); transform: skewX(-20deg); border-radius: 1px; display: block; opacity: 0.5; }
.feat-mark i:nth-child(2) { opacity: 0.75; }
.feat-mark i:nth-child(3) { opacity: 1; }
.feat-masthead .fm-issue {
  position: relative; z-index: 1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: rgba(250,250,250,0.62);
}
.feat-masthead .fm-issue b { color: #FAFAFA; font-weight: 600; }

.feat-body { padding: 30px 36px 34px; display: flex; flex-direction: column; flex: 1; }
.feat-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
  background: var(--accent-subtle); border-radius: 999px; padding: 5px 12px;
}
.feat-body h2 {
  margin-top: 18px; font-size: clamp(27px, 2.7vw, 36px); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 500; color: var(--text-primary); text-wrap: balance;
}
.feat-lead:hover .feat-body h2 { color: var(--accent-hover); }
.feat-dek { margin-top: 16px; font-size: 16.5px; line-height: 1.58; color: var(--text-secondary); max-width: 54ch; text-wrap: pretty; }
.feat-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.byline { display: flex; align-items: center; gap: 10px; }
.byline .av {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-subtle); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.byline .who { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.byline .role { font-size: 12px; color: var(--text-tertiary); }
.feat-foot .meta-mono { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--text-tertiary); }

/* Side list — numbered recent */
.latest-col { display: flex; flex-direction: column; }
.latest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.latest-head .lh-t { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-primary); }
.latest-head .lh-c { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.latest-list { display: flex; flex-direction: column; }
.latest-item {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit;
  transition: padding-left 200ms ease;
}
.latest-item:hover { padding-left: 6px; }
.latest-item .li-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding-top: 3px; transition: color 200ms ease; }
.latest-item:hover .li-num { color: var(--accent); }
.latest-item .li-title { font-size: 16px; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: pretty; transition: color 200ms ease; }
.latest-item:hover .li-title { color: var(--accent-hover); }
.latest-item .li-meta { margin-top: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-tertiary); }
.latest-item .li-meta .cat { color: var(--accent); }
.latest-more { margin-top: 22px; }

/* ════════════════════════════════════════════════════════
   Latest writing — filterable grid
   ════════════════════════════════════════════════════════ */
.ins-writing { padding-top: 16px; }
.writing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.writing-head .h2 { margin-top: 18px; }

/* Filter toolbar */
.ins-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 8px 15px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.fchip:hover { color: var(--text-primary); border-color: var(--border-default); }
.fchip .fc-ct { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }
.fchip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-subtle); }
.fchip.is-active .fc-ct { color: var(--accent); }

.ins-count { margin-top: 22px; min-height: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-tertiary); }
.ins-count b { color: var(--accent); font-weight: 600; }

/* Editorial index — research-journal table of contents */
.post-index { margin-top: 26px; border-top: 1px solid var(--border-default); }
.idx-row {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 200px;
  gap: 30px; align-items: center; padding: 28px 18px 28px 10px;
  border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit;
  transition: background 200ms ease, padding-left 260ms cubic-bezier(.4,0,.2,1);
}
.idx-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform 260ms cubic-bezier(.4,0,.2,1);
}
.idx-row:hover { background: var(--bg-subtle); padding-left: 22px; }
.idx-row:hover::before { transform: scaleY(1); }
.idx-row.is-hidden { display: none; }
.idx-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary); transition: color 200ms ease; }
.idx-row:hover .idx-num { color: var(--accent); }
.idx-main { min-width: 0; }
.idx-tagrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.idx-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.idx-type { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-tertiary); text-transform: uppercase; }
.idx-title { font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -0.018em; color: var(--text-primary); text-wrap: pretty; transition: color 200ms ease; }
.idx-row:hover .idx-title { color: var(--accent-hover); }
.idx-dek { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); max-width: 72ch; text-wrap: pretty; }
.idx-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; white-space: nowrap; }
.idx-author { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.idx-when { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-tertiary); }
.idx-arrow { margin-top: 5px; font-size: 15px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 200ms ease; }
.idx-row:hover .idx-arrow { opacity: 1; transform: none; }

.ins-empty { display: none; padding: 56px 0; text-align: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 13px; }
.ins-empty.show { display: block; }

/* ════════════════════════════════════════════════════════
   Case studies — metric-led band
   ════════════════════════════════════════════════════════ */
.ins-cases { background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cases-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.case-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
  display: flex; flex-direction: column; padding: 30px 30px 28px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 16px;
  text-decoration: none; color: inherit;
  transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
.case-card:hover { transform: translateY(-3px); border-color: var(--border-default); box-shadow: 0 30px 60px -42px rgba(9,9,11,0.3); }
.case-sector { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.case-metric { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.case-metric .num { font-size: clamp(40px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; color: var(--accent); font-variant-numeric: tabular-nums; }
.case-metric .unit { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.case-label { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.case-desc { margin-top: 12px; font-size: 14px; line-height: 1.56; color: var(--text-secondary); text-wrap: pretty; }
.case-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-foot .cf-client { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.case-foot .cf-arr { font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.case-foot .cf-arr .arr { transition: transform 180ms cubic-bezier(.4,0,.2,1); }
.case-card:hover .cf-arr .arr { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════
   Newsletter — dark band signup
   ════════════════════════════════════════════════════════ */
.ins-news { position: relative; overflow: hidden; }
.ins-news .news-glow { position: absolute; left: 12%; top: 30%; width: 620px; height: 380px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, var(--accent-glow), transparent 70%); pointer-events: none; z-index: 0; }
.news-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; }
.news-copy h2 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; color: var(--text-primary); text-wrap: balance; max-width: 16ch; }
.news-copy h2 em { color: var(--accent); font-style: normal; font-weight: 600; }
.news-copy p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); max-width: 48ch; text-wrap: pretty; }
.news-stats { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 30px; }
.news-stats .ns { display: flex; flex-direction: column; gap: 3px; }
.news-stats .ns .v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.news-stats .ns .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); }

.news-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 32px 32px 30px; box-shadow: 0 40px 90px -56px rgba(0,0,0,0.6); }
.news-card .nc-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.news-card .nc-form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.news-card label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); }
.news-card input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 11px;
  border: 1px solid var(--border-default); background: var(--bg-subtle); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 15px; line-height: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.news-card input[type="email"]::placeholder { color: var(--text-tertiary); }
.news-card input[type="email"]:focus { outline: none; border-color: var(--accent); background: var(--bg-surface); box-shadow: 0 0 0 3px var(--accent-subtle); }
.news-card .btn { justify-content: center; margin-top: 4px; }
.news-card .nc-fine { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }
.news-card .nc-fine a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.news-card .nc-ok { display: none; align-items: center; gap: 10px; margin-top: 6px; font-size: 14.5px; color: var(--text-primary); }
.news-card.sent .nc-form { display: none; }
.news-card.sent .nc-ok { display: flex; }
.news-card .nc-ok .tick { width: 22px; height: 22px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--success); color: #fff; font-size: 12px; }

/* ════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .feat-grid { grid-template-columns: 1fr; gap: 40px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; gap: 40px; }
  .idx-row { grid-template-columns: 54px minmax(0, 1fr); gap: 18px 22px; }
  .idx-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 4px; }
  .idx-arrow { display: none; }
}
@media (max-width: 680px) {
  .case-grid { grid-template-columns: 1fr; }
  .feat-body, .feat-masthead { padding-left: 24px; padding-right: 24px; }
  .news-card { padding: 26px 22px; }
  .ins-meta { gap: 8px 20px; }
  .idx-row { padding: 22px 0; }
  .idx-row:hover { padding-left: 12px; }
}