/* =========================================================
   (i)Sage — WordPress additions  ·  v1.0
   Components the WordPress build adds on top of isage.css.
   Uses only tokens from tokens.css.
   ========================================================= */

/* ---------- Navigation: six items need tighter spacing on mid-size screens ---------- */
@media (min-width: 1121px) and (max-width: 1280px) { .nav-list { gap: var(--space-5); } .nav-list a:not(.btn) { font-size: 0.875rem; } }

/* ---------- Track record: four figures ---------- */
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--4 .stat { padding: var(--space-6) var(--space-5) var(--space-6) 0; border-bottom: 1px solid var(--line); }
  .stats--4 .stat:nth-child(2n) { border-right: 0; padding-left: var(--space-6); }
  .stats--4 .stat:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 760px) {
  .stats--4 { grid-template-columns: 1fr; }
  .stats--4 .stat, .stats--4 .stat:nth-child(n) { padding: var(--space-5) 0; border-right: 0; }
}

/* ---------- Fact panels ---------- */
.facts { margin: 0; display: grid; gap: var(--space-4); }
.facts dd { margin: 4px 0 0; color: var(--text); }
.facts .fact-lead { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; }

.figures { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.figures dd { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-figure); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.figures div:first-child dd { color: var(--accent); }
.surface-bone .figures div:first-child dd { color: var(--isage-teal-ink); }

/* ---------- Engagement steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.step { padding: var(--space-6) var(--space-5) 0 0; }
.step + .step { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.step .label { color: var(--accent); margin-bottom: var(--space-3); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: var(--space-5) 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Row variants ---------- */
.row--2 { grid-template-columns: 72px minmax(0, 1fr); }
.row--career { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 760px) { .row--2, .row--career { grid-template-columns: 1fr; } }

/* ---------- Books ---------- */
.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.book { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.book-cover { aspect-ratio: 2 / 3; background: var(--isage-abyss-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); }
.book-cover-title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; color: var(--isage-bone); }
.book-mark { width: 56px; height: 56px; }
@media (max-width: 900px) { .books { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .book { grid-template-columns: 1fr; } .book-cover { max-width: 200px; } }

/* ---------- Board list ---------- */
.board-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.board-item { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-1); }
.board-item:nth-child(2n) { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.board-item .small { color: var(--text-body); }
@media (max-width: 700px) { .board-list { grid-template-columns: 1fr; } .board-item:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* ---------- Credentials ---------- */
.credentials { margin: 0; border-top: 1px solid var(--line); }
.credentials > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.credentials dd { margin: 0; color: var(--text-body); }
@media (max-width: 700px) { .credentials > div { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---------- Calls to action ---------- */
.cta-action { display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .cta-action { justify-content: flex-start; } }
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link:hover { text-decoration: underline; }

/* ---------- Long-form content (insights, simple pages) ---------- */
.article-title { max-width: 24ch; }
.prose { max-width: var(--measure); color: var(--text-body); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: var(--space-7); }
.prose h2 { font-size: var(--fs-h3); font-weight: 600; }
.prose h3, .prose h4 { font-size: 1.125rem; font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { color: var(--text); }
.prose img { height: auto; border-radius: var(--radius-md); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.prose blockquote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 2px solid var(--isage-tide); font-family: var(--font-display); font-weight: 300; font-size: 1.25rem; color: var(--text); }
.prose a { color: var(--link); }
.prose .alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.prose .alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.prose .aligncenter { margin-left: auto; margin-right: auto; }
.prose-back { margin-top: var(--space-8); }

/* ---------- Pagination ---------- */
.pager { margin-top: var(--space-7); }
.pager .nav-links { display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); }
.pager .page-numbers { color: var(--text-muted); text-decoration: none; }
.pager .page-numbers.current { color: var(--accent); }
.pager .screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Gravity Forms: briefing form in the kit's form style ---------- */
.briefing-form .gform_heading, .briefing-form .gform_required_legend { display: none; }
.briefing-form .gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.briefing-form .gfield { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.briefing-form .gfield--width-full, .briefing-form .gfield--type-textarea, .briefing-form .gfield--type-html, .briefing-form .gfield--type-turnstile { grid-column: 1 / -1; }
.briefing-form .gfield_label, .briefing-form legend.gfield_label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); padding: 0; }
.briefing-form .gfield_required { color: var(--accent); margin-left: 4px; }
.briefing-form input[type="text"], .briefing-form input[type="email"], .briefing-form input[type="tel"], .briefing-form select, .briefing-form textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; min-height: 52px;
}
.briefing-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--isage-fog) 50%), linear-gradient(135deg, var(--isage-fog) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.briefing-form textarea { min-height: 160px; resize: vertical; }
.briefing-form input:focus, .briefing-form select:focus, .briefing-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.briefing-form .gform_footer { margin-top: var(--space-6); padding: 0; }
.briefing-form .gfield_description { font-size: var(--fs-small); color: var(--text-muted); }
.briefing-form .validation_message, .briefing-form .gfield_validation_message { font-size: var(--fs-small); color: var(--accent); }
.briefing-form .gform_validation_errors { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.briefing-form .gform_validation_errors h2 { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.briefing-form .gform_confirmation_message { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); line-height: 1.4; color: var(--text); }
.briefing-form .gform_hidden, .briefing-form .gform_validation_container, .briefing-form .gfield--type-honeypot { display: none !important; }
.briefing-form .gform_ajax_spinner { margin-left: var(--space-3); }
@media (max-width: 700px) { .briefing-form .gform_fields { grid-template-columns: 1fr; } }

/* ---------- Track record: case studies ---------- */
.section--tight { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.jump-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.jump-list a { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.jump-list a:hover { color: var(--accent); }
.case { scroll-margin-top: 80px; }
.case-meta { position: sticky; top: 108px; align-self: start; }
.case-meta strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .case-meta { position: static; } }
.case-actions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.case-actions li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); color: var(--text-body); }
.case-actions li::before { content: ""; position: absolute; left: 4px; top: calc(var(--space-4) + 0.6em); width: 8px; height: 8px; border-radius: 50%; background: var(--isage-tide); }
.surface-bone .case-actions li::before { background: var(--isage-teal); }
.metrics { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.metrics caption { text-align: left; padding-bottom: var(--space-3); }
.metrics th, .metrics td { text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.metrics thead th { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--line); }
.metrics tbody th { font-weight: 500; color: var(--text); }
.metrics td { color: var(--text-body); }
.metrics .metrics-to { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--accent); }
.surface-bone .metrics .metrics-to { color: var(--isage-teal-ink); }
.case-outcome { color: var(--text); font-family: var(--font-display); font-weight: 300; font-size: var(--fs-lead); line-height: 1.5; padding-top: var(--space-5); border-top: 2px solid var(--accent); }
.surface-bone .case-outcome { border-top-color: var(--isage-teal); }
.case-outcome .label { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-weight: 400; }

/* ---------- Board service ---------- */
.board-table { border-top: 1px solid var(--line); }
.board-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1.1fr); gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.board-row strong { color: var(--text); font-weight: 600; }
.board-outcome { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); line-height: 1.6; }
@media (max-width: 1000px) { .board-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .board-row { grid-template-columns: 1fr; gap: var(--space-3); } }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-6); }
@media (max-width: 1000px) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .themes { grid-template-columns: 1fr; } }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chips li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-body); }
.board-list .label { color: var(--accent); }
.surface-bone .board-list .label { color: var(--isage-teal-ink); }

/* ---------- Agentic AI page ---------- */
.figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .figures--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.accuracy { display: grid; gap: var(--space-4); }
.accuracy-bars { display: grid; gap: var(--space-3); }
.accuracy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: baseline; }
.accuracy-name { font-size: var(--fs-small); color: var(--text); }
.accuracy-bar { grid-column: 1 / -1; display: block; width: 100%; height: 10px; background: var(--isage-rule-dark); border-radius: 2px; overflow: hidden; }
.accuracy-bar span { display: block; height: 100%; background: var(--isage-orange); }
.accuracy-row--muted .accuracy-bar span { background: var(--isage-tide); }
.accuracy-value { grid-row: 1; grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--accent); text-align: right; }
.accuracy-row--muted .accuracy-value { color: var(--text-muted); }
.panel .case-actions li strong { color: var(--text); font-weight: 600; }

/* ---------- Agentic AI section: sub-navigation, wide tables, examples ---------- */
.subnav { background: var(--isage-abyss-deep); border-bottom: 1px solid var(--isage-rule-dark); position: sticky; top: 77px; z-index: 40; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 16px 0; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--isage-fog); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--isage-bone); }
.subnav a[aria-current="page"] { color: var(--isage-bone); border-bottom-color: var(--isage-orange); }
.table-scroll { overflow-x: auto; }
.metrics--wide { min-width: 640px; }
.metrics--wide td, .metrics--wide th { font-size: var(--fs-small); }
.status { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--radius-sm); color: var(--isage-tide); }
.example { display: grid; gap: var(--space-4); }
.example-prompt { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-lead); color: var(--text); padding-left: var(--space-5); border-left: 2px solid var(--isage-tide); }
.example-answer { padding: var(--space-5); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--text-body); }
.example-answer .label { display: block; margin-bottom: var(--space-2); }
.callout { padding: var(--space-5) var(--space-6); border-left: 2px solid var(--accent); background: var(--bg-raised); color: var(--text); font-family: var(--font-display); font-weight: 300; font-size: var(--fs-lead); line-height: 1.5; }
.surface-bone .callout { border-left-color: var(--isage-teal); }
.callout .label { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-weight: 400; }
.lifecycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.lifecycle--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lifecycle > div { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); align-content: start; }
.lifecycle > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.lifecycle .h3 { font-size: 1.0625rem; }
.lifecycle .apps { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--accent); overflow-wrap: anywhere; }
.lifecycle > div { min-width: 0; }
.surface-bone .lifecycle .apps { color: var(--isage-teal-ink); }
@media (max-width: 1000px) { .lifecycle, .lifecycle--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lifecycle > div:nth-child(2n+1) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .lifecycle, .lifecycle--6 { grid-template-columns: 1fr; } .lifecycle > div, .lifecycle > div + div { padding-left: 0; border-left: 0; } }
.stack-layers { border-top: 1px solid var(--line); }
.stack-layer { display: grid; grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 2fr); gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.stack-layer--ours .h3 { color: var(--accent); }
.surface-bone .stack-layer--ours .h3 { color: var(--isage-teal-ink); }
@media (max-width: 700px) { .stack-layer { grid-template-columns: 40px 1fr; } .stack-layer p.body { grid-column: 2; } }
.split-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .split-list { grid-template-columns: 1fr; } }
.app-list { columns: 3; column-gap: var(--space-6); list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-body); }
.app-list li { padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
@media (max-width: 700px) { .app-list { columns: 2; } }
.quote-out { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 2rem); line-height: 1.35; color: var(--text); max-width: 40ch; }
.quadrant { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; gap: var(--space-3); }
.quadrant-grid { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(150px, auto) minmax(150px, auto); border: 1px solid var(--line); }
.q { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.q--tl, .q--bl { border-right: 1px dashed var(--line); }
.q--tl, .q--tr { border-bottom: 1px dashed var(--line); }
.q--tr { background: rgba(30, 107, 140, 0.25); }
.q-item { margin: 0; display: grid; gap: 4px; padding-left: 18px; position: relative; }
.q-item::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--isage-fog); }
.q-item strong { color: var(--text); font-weight: 600; }
.q-item span { font-size: var(--fs-small); color: var(--text-muted); }
.q-item--ours::before { background: var(--isage-orange); width: 14px; height: 14px; left: -2px; top: 0.3em; }
.q-item--ours strong { color: var(--accent); font-family: var(--font-display); font-size: 1.125rem; }
.quadrant-axis { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); display: flex; justify-content: space-between; }
.quadrant-axis--y { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: space-between; padding: var(--space-2) 0; min-width: 72px; }
.quadrant-axis--x { grid-column: 2; grid-row: 2; }
.quadrant figcaption { grid-column: 2; grid-row: 3; }
@media (max-width: 640px) { .quadrant-grid { grid-template-columns: 1fr; } .q--tl, .q--bl { border-right: 0; } .q { border-bottom: 1px dashed var(--line); } }
.link-card { text-decoration: none; color: var(--text); }
.link-card:hover .h3 { color: var(--accent); }
.board-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-list--3 .board-item:nth-child(2n) { padding-left: 0; border-left: 0; }
.board-list--3 .board-item:not(:nth-child(3n+1)) { padding-left: var(--space-5); border-left: 1px solid var(--line); }
@media (max-width: 800px) { .board-list--3 { grid-template-columns: 1fr; } .board-list--3 .board-item:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } }