/* =====================================================================
   ATWOOD — DESIGN SYSTEM
   Single source of truth for tokens + components. Linked by every page.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* color — surfaces */
  --ink-900:#0c0e12;       /* page background */
  --ink-800:#12151b;       /* raised surface */
  --ink-700:#1a1e26;       /* card */
  --ink-600:#252b35;       /* border / hairline */
  --ink-500:#39414d;       /* muted border */

  /* color — text */
  --text-hi:#f4f1ea;       /* warm off-white */
  --text-mid:#b9bdc6;
  --text-lo:#7d8390;

  /* color — accent */
  --accent:#c8a86a;        /* warm gold — premium, institutional */
  --accent-soft:#e3cfa0;
  --accent-glow:rgba(200,168,106,.16);
  --cool:#7fb3c4;          /* secondary cool accent for diagrams */
  --danger:#d98b7a;        /* risk / negative */

  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* space scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* type */
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;

  --maxw:1160px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--ink-900);
  color:var(--text-mid);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
section{position:relative}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--text-hi);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.serif{font-family:var(--font-serif)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.muted{color:var(--text-lo)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;font-size:15px;border-radius:var(--r-pill);
  padding:12px 22px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#1a1408}
.btn-primary:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn-ghost{border-color:var(--ink-500);color:var(--text-hi)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(12,14,18,.72);
  border-bottom:1px solid var(--ink-600);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-serif);font-size:24px;color:var(--text-hi);font-weight:600;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:var(--s-5);font-size:14.5px;color:var(--text-mid)}
.nav-links a:hover{color:var(--text-hi)}
.nav-links a.active{color:var(--accent)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- HERO ---------- */
.hero{padding:var(--s-10) 0 var(--s-9);overflow:hidden;position:relative}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.12}
@media(max-width:700px){.hero-video{display:none}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 70% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(40% 40% at 10% 30%, rgba(127,179,196,.08), transparent 70%);
}
.hero h1{font-size:clamp(46px,7.6vw,100px);max-width:14ch;line-height:1.0;letter-spacing:-.035em}
.hero .lede{font-size:clamp(17px,2.2vw,21px);max-width:54ch;margin-top:var(--s-6);color:var(--text-mid)}
.hero-cta{display:flex;gap:var(--s-3);margin-top:var(--s-7);flex-wrap:wrap}
.hero-tag,.crumb{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink-600);
  border-radius:var(--r-pill);padding:6px 14px 6px 8px;font-size:13px;color:var(--text-mid);margin-bottom:var(--s-6)}
.crumb{padding:6px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

/* trust strip */
.trust{border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);padding:var(--s-6) 0;margin-top:var(--s-9)}
.trust p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo);text-align:center;margin-bottom:var(--s-5)}
.trust-logos{display:flex;justify-content:center;gap:clamp(24px,6vw,72px);flex-wrap:wrap;align-items:center}
.trust-logos span{font-family:var(--font-serif);font-size:22px;color:var(--text-mid);opacity:.7;font-weight:500}

/* ---------- SECTION SHELL ---------- */
.section{padding:var(--s-10) 0}
.section-head{max-width:62ch;margin-bottom:var(--s-8)}
.section-head h2{font-size:clamp(30px,4.3vw,52px);margin-top:var(--s-3);line-height:1.05;letter-spacing:-.03em}
.section-head p{margin-top:var(--s-4);font-size:17px}

/* ---------- CARDS / PILLARS / SERVICES ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:880px){.pillars,.services,.two{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--ink-600);border-radius:var(--r-lg);
  padding:var(--s-6);transition:all .3s var(--ease);
}
.card:hover{border-color:var(--ink-500);transform:translateY(-3px)}
.card .num{font-family:var(--font-serif);font-size:14px;color:var(--accent);letter-spacing:.1em}
.card .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:22px;margin:var(--s-4) 0 var(--s-2)}
.card .role{font-size:13px;color:var(--text-lo);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4)}
.card p{font-size:15px}
.card ul{list-style:none;margin-top:var(--s-4);display:grid;gap:10px}
.card li{font-size:14.5px;color:var(--text-mid);padding-left:22px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:.8}
.card .when{margin-top:var(--s-5);font-size:13px;color:var(--text-lo);border-top:1px solid var(--ink-600);padding-top:var(--s-4)}
.card .when b{color:var(--text-mid);font-weight:500}

/* ---------- FLOW DIAGRAM ---------- */
.flow{background:var(--ink-800);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600)}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:var(--s-4);margin-top:var(--s-7)}
@media(max-width:880px){.flow-grid{grid-template-columns:1fr;gap:var(--s-3)}.flow-arrow{transform:rotate(90deg)}}
.flow-node{
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);
  padding:var(--s-5);text-align:center;
}
.flow-node.center{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow),0 24px 60px -30px var(--accent-glow)}
.flow-node h4{color:var(--text-hi);font-size:17px;margin-bottom:6px}
.flow-node small{color:var(--text-lo);font-size:13px;display:block}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}
.flow-caption{text-align:center;margin-top:var(--s-6);color:var(--text-mid);font-size:15px}
.flow-caption b{color:var(--text-hi);font-weight:500}

/* ---------- QUAD (4-up small cards) ---------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media(max-width:880px){.quad{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.quad{grid-template-columns:1fr}}
.quad .card{padding:var(--s-5)}
.quad .icon,.qcard .icon{width:40px;height:40px;border-radius:10px;background:var(--accent-glow);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;margin-bottom:var(--s-4)}
.quad h4{color:var(--text-hi);font-size:17px;margin-bottom:6px}
.quad p{font-size:14px;color:var(--text-mid)}
.qcard{background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5)}
.qcard h4{color:var(--text-hi);font-size:16px;margin-bottom:5px}
.qcard p{font-size:13.5px}

/* ---------- GOVERNANCE / RISK ---------- */
.sec{background:var(--ink-800);border-top:1px solid var(--ink-600)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.sec-grid{grid-template-columns:1fr}}
.risklist{display:grid;gap:var(--s-3)}
.risk{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--ink-700);border:1px solid var(--ink-600);
  border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.risk .x{color:var(--danger);font-weight:600;flex-shrink:0;margin-top:1px}
.risk .check{color:var(--accent);font-weight:600;flex-shrink:0;margin-top:1px}
.risk b{color:var(--text-hi);font-weight:500}
.risk span{font-size:14.5px}

/* ---------- MOBILE APP SHOWCASE ---------- */
.app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.app-grid{grid-template-columns:1fr}}
.phone{
  width:280px;margin:0 auto;border-radius:36px;background:var(--ink-700);
  border:1px solid var(--ink-500);padding:14px;box-shadow:0 40px 80px -40px #000;
}
.phone-screen{background:linear-gradient(180deg,#15191f,#0e1116);border-radius:26px;padding:20px 16px;min-height:480px}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.phone-top .logo{font-size:18px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);opacity:.85}
.bubble{background:var(--ink-700);border:1px solid var(--ink-600);border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:10px;color:var(--text-mid)}
.bubble.me{background:var(--accent-glow);border-color:transparent;color:var(--accent-soft);margin-left:36px}
.bubble small{display:block;color:var(--text-lo);font-size:11px;margin-bottom:4px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:11px;border:1px solid var(--ink-500);border-radius:var(--r-pill);padding:5px 11px;color:var(--text-mid)}
.feat{display:grid;gap:var(--s-5)}
.feat-item h4{color:var(--text-hi);font-size:18px;margin-bottom:4px}
.feat-item p{font-size:14.5px}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);margin-top:var(--s-7)}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5);background:var(--ink-800)}
.step .n{font-family:var(--font-serif);font-size:32px;color:var(--accent);line-height:1}
.step h4{color:var(--text-hi);margin:var(--s-3) 0 6px;font-size:18px}
.step p{font-size:14px}

/* ---------- AGENT LOOP DIAGRAM ---------- */
.loop-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.loop-grid{grid-template-columns:1fr}}
.loop-svg{width:100%;max-width:460px;margin:0 auto;display:block}
.stage{display:grid;gap:var(--s-3)}
.stage-row{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) var(--s-5);background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md)}
.stage-row .k{font-family:var(--font-serif);color:var(--accent);font-size:15px;width:1.5em;flex-shrink:0}
.stage-row b{color:var(--text-hi);font-weight:500}
.stage-row span{font-size:14.5px}

/* Interactive Agent Loop (agents.html) */
.loop-node{transition:transform .3s ease,filter .3s ease;outline:none}
.loop-node circle{transition:stroke .3s ease,fill .3s ease,stroke-width .3s ease}
.loop-node:hover,.loop-node.active{transform:scale(1.03);filter:drop-shadow(0 0 6px var(--accent-glow))}
.loop-node:hover circle,.loop-node.active circle{stroke:var(--accent);fill:var(--ink-600);stroke-width:2px}
.loop-node.central-core:hover circle,.loop-node.central-core.active circle{stroke:var(--accent-soft);fill:var(--ink-700);filter:drop-shadow(0 0 10px var(--accent-glow))}
.stage-row{transition:all .3s var(--ease);cursor:pointer}
.stage-row:hover,.stage-row.active{border-color:var(--accent);background:var(--ink-600);transform:translateX(6px)}

/* ---------- TIMELINE ---------- */
.timeline{display:grid;gap:var(--s-3);margin-top:var(--s-7)}
.tl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5)}
.tl .b{width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:15px;flex-shrink:0}
.tl h4{color:var(--text-hi);font-size:16px;margin-bottom:3px}
.tl p{font-size:14px}
.tl .gtag{font-size:11px;color:var(--text-lo);margin-top:8px;display:inline-block;border:1px solid var(--ink-500);border-radius:var(--r-pill);padding:3px 10px}

/* ---------- CTA ---------- */
.cta{text-align:center;padding:var(--s-10) 0}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 70% at 50% 0%,var(--accent-glow),transparent 70%)}
.cta h2{font-size:clamp(32px,5vw,54px);max-width:18ch;margin:0 auto}
.cta p{max-width:48ch;margin:var(--s-5) auto 0;font-size:17px}
.cta .hero-cta,.cta-row{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-7);flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--ink-600);padding:var(--s-7) 0;margin-top:var(--s-8)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.foot-inner small{color:var(--text-lo);font-size:13px}
.tagline{color:var(--text-mid);font-family:var(--font-serif);font-style:italic}

/* =====================================================================
   MCP INTEGRATION DIAGRAM
   ===================================================================== */
.mcp-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6);
  align-items: center;
  margin-top: var(--s-7);
}

@media (max-width: 880px) {
  .mcp-container {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.mcp-visual-panel {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#mcp-svg {
  width: 100%;
  height: auto;
  max-width: 540px;
}

.mcp-node circle {
  transition: fill 0.3s var(--ease), stroke 0.3s var(--ease), stroke-width 0.3s var(--ease), filter 0.3s var(--ease);
}

.mcp-node.platform:hover circle,
.mcp-node.platform.active circle {
  stroke: var(--accent);
  fill: var(--ink-600);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.mcp-node.platform.active circle {
  stroke-width: 2.5px;
}

.mcp-node text {
  pointer-events: none;
  user-select: none;
}

/* Connection Paths styling */
.mcp-lines path {
  transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease), stroke-dasharray 0.3s var(--ease);
}

.mcp-lines path.active {
  stroke: var(--accent);
  stroke-width: 2.5px;
  stroke-dasharray: 6 4;
  animation: mcpFlowDash 3s linear infinite;
}

@keyframes mcpFlowDash {
  to {
    stroke-dashoffset: -20;
  }
}

/* Details Panel & Cards */
.mcp-details-panel {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mcp-detail-card {
  display: none;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
  animation: mcpFadeIn 0.35s var(--ease) forwards;
}

.mcp-detail-card.active {
  display: block;
}

.mcp-detail-card h4 {
  color: var(--text-hi);
  font-size: 20px;
  margin-bottom: var(--s-2);
}

/* Status Indicator styling */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.status-indicator.connected {
  color: var(--accent-soft);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-lo);
  position: relative;
}

.pulse-dot.green {
  background: #52b788;
  box-shadow: 0 0 8px rgba(82, 183, 136, 0.6);
}

.pulse-dot.green::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #52b788;
  opacity: 0;
  animation: mcpPulse 2s infinite;
}

@keyframes mcpPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Tool List Details */
.tool-list {
  list-style: none;
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-2);
}

.tool-list li {
  font-size: 13.5px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
}

.tool-list code {
  color: var(--text-hi);
  font-family: monospace;
  font-size: 12.5px;
}

.tool-list .tag {
  font-size: 10px;
  color: var(--cool);
  border: 1px solid rgba(127,179,196,0.3);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.tool-list .tag.audit {
  color: var(--accent);
  border-color: var(--accent-glow);
}

.tool-list .tag.approval {
  color: var(--danger);
  border-color: rgba(217,139,122,0.3);
}

.tool-list .tag.draft {
  color: #a8dadc;
  border-color: rgba(168,218,220,0.3);
}

/* Accessibility Focus States */
.mcp-node.platform:focus-visible {
  outline: none;
}
.mcp-node.platform:focus-visible circle {
  stroke: var(--accent-soft);
  stroke-width: 3px;
  filter: drop-shadow(0 0 10px var(--accent));
}

@keyframes mcpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   INTERACTIVE 6-STEP QUERY FLOW (R2)
   ===================================================================== */
.query-flow-container {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.query-flow-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: var(--s-4) 0;
  gap: var(--s-2);
}

@media (max-width: 880px) {
  .query-flow-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
  
  .query-flow-timeline .timeline-line-connector {
    width: 2px !important;
    height: var(--s-5) !important;
    left: 20px !important;
    top: auto !important;
    margin: -8px 0 !important;
  }
}

.timeline-line-connector {
  flex-grow: 1;
  height: 2px;
  background: var(--ink-600);
  position: relative;
  transition: background 0.3s var(--ease);
}

.timeline-line-connector.active {
  background: var(--accent);
}

.flow-step-node {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: 2;
  transition: transform 0.25s var(--ease);
  width: 100px;
}

@media (max-width: 880px) {
  .flow-step-node {
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: var(--s-4);
  }
}

.flow-step-node:hover {
  transform: translateY(-2px);
}

@media (max-width: 880px) {
  .flow-step-node:hover {
    transform: translateX(4px);
  }
}

.step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 1.5px solid var(--ink-600);
  color: var(--text-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s var(--ease);
}

.flow-step-node.active .step-circle {
  background: var(--ink-700);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.flow-step-node.completed .step-circle {
  background: var(--accent-glow);
  border-color: var(--accent-soft);
  color: var(--accent-soft);
}

.step-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-lo);
  text-align: center;
  transition: color 0.3s var(--ease);
}

.flow-step-node.active .step-title {
  color: var(--text-hi);
  font-weight: 600;
}

.flow-step-node.completed .step-title {
  color: var(--text-mid);
}

.query-flow-display {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6);
  min-height: 360px;
  align-items: stretch;
}

@media (max-width: 880px) {
  .query-flow-display {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.terminal-panel {
  background: #07080a;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  font-family: monospace;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.terminal-header {
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-600);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.terminal-title {
  color: var(--text-lo);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: var(--s-4);
  flex-grow: 1;
  color: #a2a8b5;
  line-height: 1.6;
  overflow-y: auto;
}

.terminal-line {
  margin-bottom: 6px;
  white-space: pre-wrap;
}

.terminal-line .t-timestamp {
  color: var(--text-lo);
  margin-right: 8px;
}

.terminal-line .t-tag {
  color: var(--accent);
  margin-right: 8px;
  font-weight: bold;
}

.terminal-line .t-tag.system {
  color: var(--cool);
}

.terminal-line .t-tag.success {
  color: #52b788;
}

.terminal-line .t-tag.warning {
  color: var(--danger);
}

.details-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flow-detail-card {
  display: none;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
  animation: flowFadeIn 0.35s var(--ease) forwards;
}

.flow-detail-card.active {
  display: block;
}

.flow-detail-card h3 {
  font-size: 22px;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--text-hi);
}

.detail-eyebrow {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.flow-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: var(--s-4);
  background: var(--ink-800);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-600);
}

.flow-status .pulse-dot.danger {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(217, 139, 122, 0.6);
}

.flow-status .pulse-dot.danger::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--danger);
  opacity: 0;
  animation: mcpPulse 2s infinite;
}

.flow-checklist {
  list-style: none;
  margin-top: var(--s-4);
  display: grid;
  gap: 10px;
}

.flow-checklist li {
  font-size: 14px;
  color: var(--text-mid);
  padding-left: 24px;
  position: relative;
}

.flow-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

@keyframes flowFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   CAPABILITIES CARDS ENHANCEMENTS
   ===================================================================== */
/* Flagship highlight for Managed Company AI */
#card-managed-ai {
  border-color: var(--accent-soft);
  position: relative;
  box-shadow: 0 10px 30px -15px var(--accent-glow);
}
#card-managed-ai::before {
  content: "FLAGSHIP";
  position: absolute;
  top: -12px;
  right: var(--s-5);
  background: var(--accent);
  color: var(--ink-900);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.08em;
}
#card-managed-ai:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 40px -12px var(--accent-glow);
}

/* Capabilities Cards Hover Glows */
#card-nunc-server:hover,
#card-managed-ai:hover,
#card-app-dev:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -10px var(--accent-glow);
}

/* ---------- AI MATURITY LADDER ----------
   Reuses the flow-stepper visual language (.query-flow-timeline, .step-circle,
   .step-title) but with namespaced JS hooks (.ladder-node / .ladder-connector /
   .ladder-card) so it can't collide with the 6-step flow's global handlers. */
.ladder-node {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: 2;
  transition: transform 0.25s var(--ease);
  width: 120px;
}
.ladder-node:hover { transform: translateY(-2px); }
.ladder-node.active .step-circle {
  background: var(--ink-700);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.ladder-node.completed .step-circle {
  background: var(--accent-glow);
  border-color: var(--accent-soft);
  color: var(--accent-soft);
}
.ladder-node.active .step-title { color: var(--text-hi); font-weight: 600; }
.ladder-node.completed .step-title { color: var(--text-mid); }

.ladder-connector {
  flex-grow: 1;
  height: 2px;
  background: var(--ink-600);
  position: relative;
  transition: background 0.3s var(--ease);
}
.ladder-connector.active { background: var(--accent); }

.ladder-display { margin-top: var(--s-5); }
.ladder-card {
  display: none;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
  animation: flowFadeIn 0.35s var(--ease) forwards;
  max-width: 760px;
}
.ladder-card.active { display: block; }
.ladder-card h3 {
  font-size: 22px;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--text-hi);
  font-family: var(--font-serif);
}
.ladder-card .who {
  display: block;
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--text-mid);
  font-style: italic;
}

@media (max-width: 880px) {
  .ladder-node {
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: var(--s-4);
  }
  .ladder-node:hover { transform: translateX(4px); }
  .query-flow-timeline .ladder-connector {
    width: 2px !important;
    height: var(--s-5) !important;
    left: 20px !important;
    top: auto !important;
    margin: -8px 0 !important;
  }
}



/* ---------- PROCESS (ordered 5-phase) ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4);margin-top:var(--s-2)}
@media(max-width:1000px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
.process .card{padding:var(--s-5)}
.process .num{font-family:var(--font-serif);font-size:28px;color:var(--accent);line-height:1;display:block;margin-bottom:var(--s-3)}
.process h4{color:var(--text-hi);font-size:16px;margin:0 0 6px}
.process p{font-size:13.5px;color:var(--text-mid)}
.process .iso-ref{display:block;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--ink-600);font-size:10.5px;letter-spacing:.05em;color:var(--text-lo);text-transform:uppercase}
.process .iso-ref b{color:var(--accent);font-weight:600}

/* ---------- PROCESS INTRO (walking figure + header) ---------- */
.process-intro{display:grid;grid-template-columns:210px 1fr;gap:var(--s-6);align-items:center;margin-bottom:var(--s-7)}
.process-figure{width:210px;max-width:100%}
.process-figure img{display:block;width:100%;height:auto}
.process-intro .section-head{margin-bottom:0;max-width:none}
@media(max-width:760px){.process-intro{grid-template-columns:1fr;gap:var(--s-5)}.process-figure{width:150px}}

/* ---------- LOOP NOTE + RESPONSIBLE AI ---------- */
.loop-note{margin-top:var(--s-4);font-size:14px;color:var(--text-lo)}
.loop-note b{color:var(--accent);font-weight:600}
.resp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6);margin-top:var(--s-6)}
@media(max-width:760px){.resp-grid{grid-template-columns:1fr}}
.resp-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-top:1px solid var(--ink-600)}
.resp-row .pillar{color:var(--text-hi);font-weight:500;font-size:15.5px}
.resp-row .pillar small{display:block;color:var(--text-lo);font-weight:400;font-size:13px;margin-top:4px}
.resp-row .ctrl{color:var(--accent-soft);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.resp-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lo)}

/* ---------- VERTICALS + PARTNERS ---------- */
.vert-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5) var(--s-6)}
@media(max-width:760px){.vert-row{grid-template-columns:1fr 1fr}}
.vert-row > a,.vert-row > div{display:block;border-top:2px solid var(--accent-glow);padding-top:var(--s-3);transition:border-color .2s var(--ease)}
.vert-row > a:hover{border-color:var(--accent)}
.vert-row > a:hover b{color:var(--accent-soft)}
.vert-row b{display:block;color:var(--text-hi);font-weight:500;font-size:15.5px}
.vert-row span{display:block;color:var(--text-lo);font-size:12.5px;letter-spacing:.04em;margin-top:4px}
.partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-6)}
@media(max-width:760px){.partners-grid{grid-template-columns:1fr}}
.partners-grid .plabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lo);margin-bottom:var(--s-3)}
.partners-note{margin-top:var(--s-5);font-size:13.5px;color:var(--text-lo)}
/* logo chips — real brand logos (DDG icon service), like the desktop integration lib */
.lchip-row{display:flex;flex-wrap:wrap;gap:8px}
.lchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;border:1px solid var(--ink-600);border-radius:var(--r-pill);font-size:13px;color:var(--text-mid);background:var(--ink-800);transition:border-color .2s var(--ease)}
.lchip:hover{border-color:var(--ink-500)}
.lchip img{width:18px;height:18px;border-radius:4px;object-fit:contain;background:#fff;flex-shrink:0}
.lchip.nologo{padding-left:13px}
.mcp-callout{border:1px solid var(--accent);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(200,168,106,.10),rgba(200,168,106,.02));padding:var(--s-6);margin-top:var(--s-6)}
.mcp-callout .plabel.accent{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-3)}
.mcp-callout h3{font-family:var(--font-serif);font-size:clamp(22px,2.6vw,30px);color:var(--text-hi);line-height:1.15;letter-spacing:-.01em}
.mcp-callout p{font-size:15px;color:var(--text-mid);margin:var(--s-3) 0 var(--s-5);max-width:64ch;line-height:1.6}
/* interactive maturity ladder (CSS-only, radio :checked) */
.ladder input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ladder-body{display:grid;grid-template-columns:330px 1fr;gap:var(--s-6);margin-top:var(--s-6);align-items:start}
@media(max-width:820px){.ladder-body{grid-template-columns:1fr}}
.ladder-steps{display:flex;flex-direction:column;gap:10px}
.rung{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--ink-600);border-radius:var(--r-md);background:var(--ink-800);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.rung:hover{border-color:var(--ink-500)}
.rung .rn{font-family:var(--font-serif);font-size:17px;color:var(--text-lo);width:1.5em;flex-shrink:0}
.rung .rt{flex:1;display:flex;flex-direction:column;gap:2px}
.rung .rt b{color:var(--text-hi);font-weight:600;font-size:15px}
.rung .rt i{font-style:normal;color:var(--text-lo);font-size:12px}
.rung .rmeter{display:flex;gap:3px;flex-shrink:0}
.rung .rmeter s{width:6px;height:6px;border-radius:50%;background:var(--ink-500)}
.rung .rmeter s.on{background:var(--accent)}
.step2{margin-left:14px}.step3{margin-left:28px}.step4{margin-left:42px}
@media(max-width:820px){.step2,.step3,.step4{margin-left:0}}
.ladder-detail{border:1px solid var(--ink-600);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--ink-800),var(--ink-900));padding:var(--s-6)}
.rung-panel{display:none}
.rung-panel h3{font-family:var(--font-serif);font-size:clamp(20px,2.3vw,26px);color:var(--text-hi);margin:8px 0 var(--s-5);line-height:1.15;letter-spacing:-.01em}
.rung-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media(max-width:620px){.rung-cols{grid-template-columns:1fr;gap:var(--s-4)}}
.rung-cols b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.rung-cols p{font-size:13.5px;color:var(--text-mid);line-height:1.55}
.rung-ex{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--ink-600);font-size:14px;color:var(--text-mid);line-height:1.55}
.rung-ex b{color:var(--accent-soft);font-weight:500}
#r1:checked~.ladder-body .step1,#r2:checked~.ladder-body .step2,#r3:checked~.ladder-body .step3,#r4:checked~.ladder-body .step4{border-color:var(--accent);background:rgba(200,168,106,.08)}
#r1:checked~.ladder-body .step1 .rn,#r2:checked~.ladder-body .step2 .rn,#r3:checked~.ladder-body .step3 .rn,#r4:checked~.ladder-body .step4 .rn{color:var(--accent-soft)}
#r1:checked~.ladder-body .panel1,#r2:checked~.ladder-body .panel2,#r3:checked~.ladder-body .panel3,#r4:checked~.ladder-body .panel4{display:block}

/* ---------- GEO NETWORK BANNER ---------- */
.geo-banner{margin:var(--s-2) 0 var(--s-6);border:1px solid var(--ink-600);border-radius:var(--r-md);overflow:hidden;background:var(--ink-900)}
.geo-banner img{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* ---------- AI FLYWHEEL ---------- */
.flywheel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);max-width:880px;margin:var(--s-7) auto 0;align-items:stretch}
.flywheel .fw{background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5) var(--s-4);text-align:center;color:var(--text-hi);font-size:15px;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;line-height:1.35}
.fw .fw-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent-glow);color:var(--accent);font-family:var(--font-serif);font-size:14px;border:1px solid var(--accent-soft)}
.fw-top{grid-area:1/2}.fw-left{grid-area:2/1}.fw-core{grid-area:2/2}.fw-right{grid-area:2/3}.fw-bottom{grid-area:3/2}
.fw-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fw-core small{color:var(--text-lo);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.fw-cap{text-align:center;margin-top:var(--s-5);color:var(--text-lo);font-size:14px}
.fw-cap b{color:var(--accent-soft);font-weight:500}
@media(max-width:680px){.flywheel{grid-template-columns:1fr;max-width:360px}.fw-top,.fw-left,.fw-core,.fw-right,.fw-bottom{grid-area:auto}}

/* ---------- ARCHITECTURE DIAGRAM ---------- */
.arch-wrap{max-width:760px;margin:var(--s-7) auto 0}
.arch-wrap svg{width:100%;height:auto;display:block}

/* ---------- MOBILE NAV (CSS-only hamburger) ---------- */
.nav-cb{display:none}
.burger{display:none}
@media(max-width:820px){
  .nav-inner > .btn-primary{display:none}
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto}
  .burger span{width:22px;height:2px;background:var(--text-hi);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
  #navt:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #navt:checked ~ .burger span:nth-child(2){opacity:0}
  #navt:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #navt:checked ~ .nav-links{
    display:flex;flex-direction:column;gap:var(--s-4);
    position:absolute;top:68px;left:0;right:0;
    background:var(--ink-900);
    border-bottom:1px solid var(--ink-600);
    padding:var(--s-5) var(--s-5) var(--s-6);font-size:17px;z-index:60;
  }
}

/* ---------- BLOG / ARTICLES ---------- */
.blog-list{display:grid;gap:var(--s-4);max-width:820px}
.post-card{display:block;background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);transition:all .3s var(--ease)}
.post-card:hover{border-color:var(--ink-500);transform:translateY(-3px)}
.post-card .ptag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.post-card h3{font-size:21px;margin:var(--s-2) 0 6px;color:var(--text-hi)}
.post-card p{font-size:15px;color:var(--text-mid)}
.post-card .pmeta{margin-top:var(--s-3);font-size:13px;color:var(--text-lo)}
.article{max-width:720px;margin:0 auto}
.article h1{font-size:clamp(30px,5vw,46px);margin-top:var(--s-3)}
.article .dek{font-size:19px;color:var(--text-mid);margin:var(--s-4) 0 var(--s-5);line-height:1.5}
.article .ameta{font-size:13px;color:var(--text-lo);border-bottom:1px solid var(--ink-600);padding-bottom:var(--s-5);margin-bottom:var(--s-6)}
.prose h2{font-family:var(--font-serif);font-size:26px;color:var(--text-hi);margin:var(--s-7) 0 var(--s-3);font-weight:500}
.prose h3{font-size:18px;color:var(--text-hi);margin:var(--s-5) 0 var(--s-2)}
.prose p{margin:var(--s-3) 0;font-size:16.5px;color:var(--text-mid);line-height:1.75}
.prose ul,.prose ol{margin:var(--s-3) 0 var(--s-3) var(--s-5);display:grid;gap:9px}
.prose li{font-size:16px;color:var(--text-mid);line-height:1.6}
.prose blockquote{border-left:2px solid var(--accent);padding-left:var(--s-4);margin:var(--s-5) 0;color:var(--text-hi);font-style:italic;font-size:18px}
.prose a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--text-hi);font-weight:600}
.prose hr{border:none;border-top:1px solid var(--ink-600);margin:var(--s-7) 0}
.article-foot{max-width:720px;margin:var(--s-9) auto 0;border-top:1px solid var(--ink-600);padding-top:var(--s-6);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;justify-content:space-between}

/* ---------- BLOG TOPIC FILTER (CSS-only) ---------- */
.bf{position:absolute;left:-9999px;opacity:0}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s-6);max-width:820px}
.filterbar label{font-size:13px;letter-spacing:.02em;color:var(--text-mid);border:1px solid var(--ink-600);border-radius:999px;padding:7px 15px;cursor:pointer;transition:all .2s var(--ease);user-select:none}
.filterbar label:hover{border-color:var(--ink-500);color:var(--text-hi)}
#bf-all:checked~.filterbar label[for="bf-all"],
#bf-gov:checked~.filterbar label[for="bf-gov"],
#bf-strategy:checked~.filterbar label[for="bf-strategy"],
#bf-work:checked~.filterbar label[for="bf-work"],
#bf-arch:checked~.filterbar label[for="bf-arch"],
#bf-design:checked~.filterbar label[for="bf-design"]{background:var(--accent);border-color:var(--accent);color:var(--ink-900);font-weight:600}
#bf-gov:checked~.blog-list .post-card,
#bf-strategy:checked~.blog-list .post-card,
#bf-work:checked~.blog-list .post-card,
#bf-arch:checked~.blog-list .post-card,
#bf-design:checked~.blog-list .post-card{display:none}
#bf-gov:checked~.blog-list .post-card[data-topic="gov"],
#bf-strategy:checked~.blog-list .post-card[data-topic="strategy"],
#bf-work:checked~.blog-list .post-card[data-topic="work"],
#bf-arch:checked~.blog-list .post-card[data-topic="arch"],
#bf-design:checked~.blog-list .post-card[data-topic="design"]{display:block}

/* ---------- GLOSSARY ---------- */
.glossary{max-width:820px;margin:0 auto}
.gcat-h{font-size:clamp(22px,3vw,28px);padding-bottom:var(--s-3);border-bottom:1px solid var(--ink-600);margin-bottom:var(--s-3)}
.gterm{padding:var(--s-4) 0;border-bottom:1px solid var(--ink-700)}
.gterm:last-child{border-bottom:none}
.gterm h3{font-size:18px;color:var(--text-hi);margin-bottom:7px}
.gterm .gdef{font-size:15.5px;color:var(--text-mid);line-height:1.65;margin-bottom:9px}
.gterm .gplain{font-size:15px;color:var(--text-mid);line-height:1.6;border-left:2px solid var(--accent);padding:2px 0 2px var(--s-4)}
.gterm .gplain b{display:inline;color:var(--accent);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-right:8px}

/* ---------- BYOA EQUATION (Claude + your tools) ---------- */
.equation{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-4);margin:var(--s-7) auto}
.eq-term{font-family:var(--font-serif);font-size:clamp(18px,2.6vw,28px);color:var(--text-hi);border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:14px 26px;background:linear-gradient(180deg,var(--ink-700),var(--ink-800));text-align:center}
.eq-op{font-size:26px;color:var(--accent);font-family:var(--font-serif)}
.eq-result{border-color:var(--accent);color:var(--accent-soft)}

/* ---------- SOLUTION RECIPES (vertical playbooks) ---------- */
.recipe-grid{display:grid;gap:var(--s-4)}
.recipe{background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6)}
.recipe h4{font-size:18px;color:var(--text-hi);margin-bottom:var(--s-3)}
.recipe-row{display:flex;gap:var(--s-4);align-items:baseline;padding:10px 0;border-top:1px solid var(--ink-700)}
.recipe-row:first-of-type{border-top:none;padding-top:0}
.rlabel{flex:0 0 64px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.recipe-row p{font-size:15px;color:var(--text-mid);margin:0;line-height:1.55}
.recipe-row .chip-row{margin:0}
.recipe .rout{color:var(--accent-soft)}

/* ---------- SKILL LIBRARY ---------- */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s-4)}
.skill-card{background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5);transition:border-color .25s var(--ease)}
.skill-card:hover{border-color:var(--ink-500)}
.skill-card .svert{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.skill-card h3{font-size:17px;color:var(--text-hi);margin:6px 0 7px}
.skill-card p{font-size:14px;color:var(--text-mid);margin-bottom:var(--s-3);line-height:1.5}
.skill-card .plug-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-lo);margin-bottom:6px}
.skill-card .chip-row{gap:6px}
.skill-card .chip{font-size:11px;padding:3px 9px}

/* skill-library filter (reuses .filterbar / .bf styling) */
#sf-all:checked~.filterbar label[for="sf-all"],
#sf-assoc:checked~.filterbar label[for="sf-assoc"],
#sf-finance:checked~.filterbar label[for="sf-finance"],
#sf-legal:checked~.filterbar label[for="sf-legal"],
#sf-civil:checked~.filterbar label[for="sf-civil"],
#sf-iot:checked~.filterbar label[for="sf-iot"],
#sf-ops:checked~.filterbar label[for="sf-ops"]{background:var(--accent);border-color:var(--accent);color:var(--ink-900);font-weight:600}
#sf-assoc:checked~.skill-grid .skill-card,
#sf-finance:checked~.skill-grid .skill-card,
#sf-legal:checked~.skill-grid .skill-card,
#sf-civil:checked~.skill-grid .skill-card,
#sf-iot:checked~.skill-grid .skill-card,
#sf-ops:checked~.skill-grid .skill-card{display:none}
#sf-assoc:checked~.skill-grid .skill-card[data-vert="assoc"],
#sf-finance:checked~.skill-grid .skill-card[data-vert="finance"],
#sf-legal:checked~.skill-grid .skill-card[data-vert="legal"],
#sf-civil:checked~.skill-grid .skill-card[data-vert="civil"],
#sf-iot:checked~.skill-grid .skill-card[data-vert="iot"],
#sf-ops:checked~.skill-grid .skill-card[data-vert="ops"]{display:block}

/* ---------- PLAYBOOK: prompt anatomy, artifacts, checklist ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-5)}
.cmp{border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5)}
.cmp.bad{border-color:rgba(201,122,109,.35)}
.cmp.good{border-color:rgba(200,168,106,.5)}
.cmp .clabel{font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:10px}
.cmp.bad .clabel{color:#c98979}
.cmp.good .clabel{color:var(--accent)}
.cmp .ptxt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--text-hi);background:#0a0c10;border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;line-height:1.5}
.cmp .cnote{font-size:13.5px;color:var(--text-lo);margin:0;line-height:1.5}
@media(max-width:680px){.compare{grid-template-columns:1fr}}

.prompt-grid{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;background:#0a0c10;border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);overflow-x:auto;max-width:820px}
.prompt-grid .pl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--ink-900);background:var(--accent);padding:3px 8px;border-radius:5px;height:max-content;white-space:nowrap}
.prompt-grid .pt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.6;color:var(--text-mid)}
.prompt-grid .pt b{color:var(--accent-soft);font-weight:400;background:rgba(200,168,106,.13);padding:0 4px;border-radius:3px}

.artifact{border-left:2px solid var(--accent);background:var(--ink-700);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-3)}
.artifact .alabel{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:7px}
.artifact p{font-size:14px;color:var(--text-mid);margin:0;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.checklist{display:grid;gap:11px;max-width:760px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text-mid);line-height:1.5}
.check .mk{flex:0 0 auto;font-weight:700;line-height:1.5}
.check.yes .mk{color:var(--accent)}
.check.no .mk{color:#c98979}
.check b{color:var(--text-hi);font-weight:600}

.rung-do{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4)}
.rung-do .card .num{margin-bottom:8px}
.rung-do .card ul{margin:var(--s-2) 0 0;padding-left:18px;display:grid;gap:7px}
.rung-do .card li{font-size:14px;color:var(--text-mid);line-height:1.5}

/* ---------- SITE FOOTER ---------- */
.site-footer{border-top:1px solid var(--ink-600);background:var(--ink-900);margin-top:var(--s-9);padding:var(--s-8) 0 var(--s-6)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:var(--s-6) var(--s-5)}
.foot-brand .logo{font-size:22px}
.foot-brand p{font-size:14px;color:var(--text-mid);margin:var(--s-3) 0 var(--s-4);max-width:34ch;line-height:1.6}
.foot-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo);margin-bottom:var(--s-3)}
.foot-col a{display:block;font-size:14px;color:var(--text-mid);padding:5px 0;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--accent-soft)}
.foot-terms{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--ink-700)}
.foot-terms .ft-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.foot-terms a{font-size:13px;color:var(--text-mid)}
.foot-terms a:hover{color:var(--accent-soft)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--ink-700);font-size:13px;color:var(--text-lo)}
.foot-bottom a{color:var(--text-lo)}
.foot-bottom a:hover{color:var(--accent-soft)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- CONTEXTUALIZATION LEVERS ---------- */
.levers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.lever{background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);display:flex;flex-direction:column}
.lever .lnum{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lever h3{font-size:19px;color:var(--text-hi);margin:6px 0 8px}
.lever p{font-size:14.5px;line-height:1.6;color:var(--text-mid)}
.lever p b{color:var(--text-hi)}
.lmeter{display:flex;gap:5px;margin-top:auto;padding-top:var(--s-4)}
.lmeter span{height:5px;flex:1;border-radius:3px;background:var(--ink-600)}
.lmeter span.on{background:var(--accent)}
.lever-result{margin-top:var(--s-5);text-align:center;font-size:16.5px;color:var(--text-mid);border-top:1px solid var(--ink-600);padding-top:var(--s-5);max-width:760px;margin-left:auto;margin-right:auto}
.lever-result b{color:var(--accent-soft)}
@media(max-width:760px){.levers{grid-template-columns:1fr}}

/* clickable chips (linked frameworks) */
a.chip{text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}
a.chip:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---------- PILOT CONFIGURATOR (start page) ---------- */
.cfg{max-width:920px;margin:0 auto}
.cfg-tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:var(--s-6)}
.cfg-tab{font-size:14px;border:1px solid var(--ink-600);border-radius:var(--r-pill);padding:9px 17px;cursor:pointer;color:var(--text-mid);background:none;font-family:inherit;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.cfg-tab:hover{border-color:var(--ink-500);color:var(--text-hi)}
.cfg-tab.active{background:var(--accent);border-color:var(--accent);color:var(--ink-900);font-weight:600}
.cfg-panel{background:linear-gradient(180deg,var(--ink-700),var(--ink-800));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:var(--s-6) var(--s-7)}
.cfg-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
@media(max-width:680px){.cfg-two{grid-template-columns:1fr;gap:var(--s-5)}}
.cfg-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-3)}
.cfg-summary{font-size:16.5px;line-height:1.6;color:var(--text-mid);border-top:1px solid var(--ink-600);padding-top:var(--s-5);margin:var(--s-6) 0 var(--s-5)}
.cfg-summary b{color:var(--accent-soft);font-weight:500}

/* ---------- STAT BAND (non-card credibility) ---------- */
.statband{background:linear-gradient(180deg,var(--ink-800),var(--ink-900));border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);padding:var(--s-8) 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-5)}}
.stat{text-align:center;padding:0 var(--s-3);position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;height:80%;width:1px;background:var(--ink-600)}
@media(max-width:760px){.stat::after{display:none}}
.snum{font-family:var(--font-serif);font-size:clamp(38px,6vw,58px);color:var(--accent);font-weight:500;line-height:1;letter-spacing:-.02em}
.snum span{font-size:.4em;color:var(--accent-soft);margin-left:3px;letter-spacing:0}
.slabel{margin-top:var(--s-3);font-size:13.5px;color:var(--text-mid);max-width:26ch;margin-left:auto;margin-right:auto;line-height:1.45}

/* ---------- BYOA BANNER (agents page, non-card) ---------- */
.byoa-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;background:linear-gradient(110deg,var(--ink-700),var(--ink-800));border:1px solid var(--accent);border-radius:var(--r-lg);padding:var(--s-6) var(--s-7)}
.byoa-banner > div{flex:1;min-width:300px}
.byoa-banner .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.byoa-banner h3{font-size:22px;color:var(--text-hi);margin:7px 0 9px}
.byoa-banner p{font-size:15px;color:var(--text-mid);max-width:62ch;line-height:1.6}

/* ---------- PROCESS TIMELINE (non-card sequence) ---------- */
.timeline{list-style:none;max-width:840px;margin:var(--s-7) 0 0;padding:0}
.timeline li{position:relative;padding:0 0 var(--s-6) var(--s-8);border-left:1px solid var(--ink-600);margin-left:18px}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.tl-step{position:absolute;left:-18px;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--ink-800);border:1px solid var(--accent);color:var(--accent);font-family:var(--font-serif);font-size:15px;display:flex;align-items:center;justify-content:center}
.tl-body h4{font-size:18px;color:var(--text-hi);margin-bottom:7px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-iso{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-lo);font-weight:400}
.tl-iso b{color:var(--accent)}
.tl-body p{font-size:15px;color:var(--text-mid);max-width:64ch;line-height:1.65}

/* ---------- NON-CARD LAYOUTS (reduce card monotony) ---------- */
/* feature row: top-ruled text columns, no box */
.featrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6) var(--s-7)}
@media(max-width:820px){.featrow{grid-template-columns:1fr}}
.featrow > div{border-top:2px solid var(--accent);padding-top:var(--s-4)}
.featrow h3{font-size:19px;color:var(--text-hi);margin-bottom:var(--s-3)}
.featrow p{font-size:15px;color:var(--text-mid);line-height:1.6}

/* definition list: numbered, hairline-separated rows, no box */
.deflist{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-8)}
@media(max-width:820px){.deflist{grid-template-columns:1fr}}
.deflist > div{display:flex;gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--ink-600)}
.deflist .dnum{font-family:var(--font-serif);font-size:16px;color:var(--accent);flex:0 0 auto;letter-spacing:.05em;padding-top:2px;min-width:24px}
.deflist .dbody h3{font-size:17px;color:var(--text-hi);margin-bottom:5px}
.deflist .dbody p{font-size:14.5px;color:var(--text-mid);line-height:1.55}

/* work credits list (non-card) */
.worklist{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-8)}
@media(max-width:760px){.worklist{grid-template-columns:1fr}}
.worklist > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--ink-600)}
.worklist b{color:var(--text-hi);font-weight:500;font-size:15.5px;white-space:nowrap}
.worklist span{color:var(--text-lo);font-size:13px;text-align:right}

/* 4-up feature row + small number */
.featrow.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.featrow.four{grid-template-columns:1fr 1fr}}
.featrow .fnum{font-family:var(--font-serif);font-size:13px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:6px}
.featrow h4{font-size:16px;color:var(--text-hi);margin-bottom:6px}

/* ---------- CASE CARDS (with real imagery) ---------- */
.casegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media(max-width:880px){.casegrid{grid-template-columns:1fr}}
.casecard{border:1px solid var(--ink-600);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);transition:border-color .3s var(--ease)}
.casecard:hover{border-color:var(--ink-500)}
.casecard .cimg{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink-600);background:var(--ink-700)}
.casecard .cimg img{width:100%;height:100%;object-fit:cover;display:block}
.casecard .cimg.svg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-700),var(--ink-900))}
.casecard .cimg.svg img{object-fit:contain;padding:var(--s-5);width:auto}
.casecard .cgallery{display:flex;gap:6px;padding:8px 8px 0}
.casecard .cgallery img{flex:1;min-width:0;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--ink-600);background:var(--ink-700);display:block;transition:border-color .3s var(--ease)}
.casecard .cgallery img:hover{border-color:var(--accent)}
.casecard .cbody{padding:var(--s-5)}
.casecard .clabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.casecard h3{font-size:19px;color:var(--text-hi);margin:6px 0 8px}
.casecard p{font-size:14px;color:var(--text-mid);line-height:1.55}
.nunc-graph{margin:var(--s-7) auto var(--s-5);max-width:920px;text-align:center}
.nunc-graph img{width:100%;height:auto;display:block}
.nunc-graph figcaption{margin-top:var(--s-3);font-size:14px;color:var(--text-lo);max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.5}

/* ROI calculator */
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
@media(max-width:880px){.roi-grid{grid-template-columns:1fr;gap:var(--s-7)}}
.roi-form .field{margin-bottom:var(--s-5)}
.roi-form label{display:block;font-size:15px;color:var(--text-hi);font-weight:500;margin-bottom:8px}
.roi-form label b{color:var(--accent-soft);font-weight:600;float:right}
.roi-form input[type=number]{width:100%;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-md);color:var(--text-hi);font:inherit;font-size:18px;padding:12px 14px;transition:border-color .2s var(--ease)}
.roi-form input[type=number]:focus{outline:none;border-color:var(--accent)}
.roi-form .hint{display:block;font-size:12.5px;color:var(--text-lo);margin-top:6px;line-height:1.4}
.roi-form input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--ink-600);margin:10px 0 2px;cursor:pointer}
.roi-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--ink-900);box-shadow:0 0 0 1px var(--accent)}
.roi-form input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--ink-900)}
.roi-out{position:sticky;top:96px;border:1px solid var(--ink-600);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--ink-800),var(--ink-900));padding:var(--s-6)}
.roi-hero-stat{text-align:center;padding-bottom:var(--s-5);border-bottom:1px solid var(--ink-600)}
.roi-hero-stat .roi-k{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.roi-hero-stat .roi-v{display:block;font-family:var(--font-serif);font-size:clamp(40px,6vw,64px);line-height:1.05;color:var(--text-hi);letter-spacing:-.02em;margin-top:8px}
.roi-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:var(--s-5) 0}
.roi-stat{text-align:center;padding:var(--s-3) 0}
.roi-stat .rn{display:block;font-family:var(--font-serif);font-size:30px;color:var(--accent-soft);line-height:1}
.roi-stat .rl{display:block;font-size:12.5px;color:var(--text-mid);margin-top:8px;line-height:1.35}
.roi-out .btn{width:100%;justify-content:center;margin-top:var(--s-2)}
.roi-note{font-size:12px;color:var(--text-lo);margin-top:var(--s-4);line-height:1.5}

/* AI opportunity matrix (Value x Feasibility) */
.m-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 var(--s-6)}
.m-tab{font:inherit;font-size:13px;cursor:pointer;padding:8px 15px;border-radius:999px;border:1px solid var(--ink-600);background:var(--ink-800);color:var(--text-mid);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.m-tab:hover{border-color:var(--ink-500);color:var(--text-hi)}
.m-tab.active{border-color:var(--accent);color:var(--accent-soft);background:rgba(200,168,106,.10)}
.matrix{display:grid;grid-template-columns:26px 1fr;grid-template-rows:1fr 26px;gap:8px;max-width:860px;margin:var(--s-6) auto 0}
.m-yaxis{grid-area:1/1;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;justify-self:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.m-xaxis{grid-area:2/2;align-self:center;text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.m-plot{grid-area:1/2;position:relative;aspect-ratio:16/10;border-left:1.5px solid var(--ink-500);border-bottom:1.5px solid var(--ink-500);
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(227,207,160,.16) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(227,207,160,.16) 50%, transparent calc(50% + .5px));}
.m-quad-fill{position:absolute;top:0;right:0;width:50%;height:50%;
  background:radial-gradient(120% 120% at 85% 15%, rgba(200,168,106,.26), rgba(200,168,106,.05) 70%, transparent);
  animation:quadPulse 4.5s ease-in-out infinite;pointer-events:none}
@keyframes quadPulse{0%,100%{opacity:.7}50%{opacity:1}}
.m-qlbl{position:absolute;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-lo);pointer-events:none;border:0;border-radius:0;background:none;padding:0}
.m-qlbl.tl{top:9px;left:11px}
.m-qlbl.tr{top:9px;right:11px;color:var(--accent-soft);font-weight:600}
.m-qlbl.bl{bottom:9px;left:11px}
.m-qlbl.br{bottom:9px;right:11px}
.m-dot{position:absolute;width:13px;height:13px;border-radius:50%;text-decoration:none;
  background:radial-gradient(circle at 35% 30%, #f3e6c8, #c8a86a);transform:translate(-50%,-50%);
  animation:dotIn .5s var(--ease) both}
.m-dot .m-lab{position:absolute;left:17px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;color:var(--text-mid);line-height:1;transition:color .2s var(--ease)}
.m-dot.lbl-l .m-lab{left:auto;right:17px}
.m-dot.star{width:17px;height:17px;background:radial-gradient(circle at 35% 30%, #fff, #e3cfa0 40%, #c8a86a);
  box-shadow:0 0 0 4px rgba(200,168,106,.16),0 0 14px rgba(200,168,106,.55);animation:dotIn .5s var(--ease) both, starPulse 2.8s ease-in-out infinite}
.m-dot.star .m-lab{color:var(--accent-soft);font-weight:600}
.m-dot:hover{z-index:6}
.m-dot:hover .m-lab{color:var(--text-hi)}
a.m-dot{cursor:pointer}
@keyframes dotIn{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes starPulse{0%,100%{box-shadow:0 0 0 4px rgba(200,168,106,.16),0 0 12px rgba(200,168,106,.45)}50%{box-shadow:0 0 0 7px rgba(200,168,106,.09),0 0 20px rgba(200,168,106,.7)}}
.m-hint{text-align:center;margin-top:var(--s-5);font-size:14px;color:var(--text-mid)}
.m-hint a{color:var(--accent-soft)}
.m-key{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:7px;
  background:radial-gradient(circle at 35% 30%,#fff,#e3cfa0,#c8a86a);box-shadow:0 0 8px rgba(200,168,106,.6)}
@media(max-width:700px){.m-dot .m-lab{font-size:10.5px}.m-qlbl{font-size:9px}}

/* hero results subhead (ROI-forward) */
.hero-sub{font-family:var(--font-serif);font-size:clamp(18px,2.3vw,24px);color:var(--accent-soft);font-weight:500;margin-top:var(--s-4);max-width:34ch;line-height:1.3}

/* ---------- SIMPLE 3-UP SERVICES (perrylabs-style: big, top-ruled, no box) ---------- */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7)}
@media(max-width:820px){.svc3{grid-template-columns:1fr;gap:var(--s-6)}}
.svc3 > div{border-top:1px solid var(--ink-500);padding-top:var(--s-5)}
.svc3 .sn{font-family:var(--font-serif);font-size:14px;color:var(--accent);letter-spacing:.12em;display:block;margin-bottom:var(--s-5)}
.svc3 h3{font-size:clamp(30px,3.6vw,42px);color:var(--text-hi);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin-bottom:var(--s-3)}
.svc3 p{font-size:15.5px;color:var(--text-mid);line-height:1.6;max-width:32ch}

/* key-word accent in display headings (perrylabs-style colored keyword, in brand gold) */
.accent-word{color:var(--accent-soft)}

/* ===== case pages ===== */
.case-cover{border:1px solid var(--ink-600);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-7);background:var(--ink-800)}
.case-cover img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
.case-cover.svg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-700),var(--ink-900))}
.case-cover.svg img{aspect-ratio:auto;width:auto;max-height:300px;object-fit:contain;padding:var(--s-7)}
.case-meta{display:flex;flex-wrap:wrap;gap:var(--s-7);margin-top:var(--s-6);padding:var(--s-5) 0;border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600)}
.case-meta div{display:flex;flex-direction:column;gap:4px}
.case-meta span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo)}
.case-meta b{font-size:14px;color:var(--text-hi);font-weight:500}
.case-lead{font-size:clamp(17px,2vw,20px);color:var(--text-mid);line-height:1.6;max-width:64ch;margin-bottom:var(--s-6)}
.case-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-6)}
@media(max-width:700px){.case-shots{grid-template-columns:1fr 1fr}}
.case-shots img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--ink-600);background:var(--ink-700)}
.case-shots img:only-child{max-width:520px}
/* Marriott solution architecture (recreated) */
.arch3{margin-top:var(--s-6)}
.arch-bus{border:1px solid var(--ink-600);border-radius:var(--r-md);background:var(--ink-700);padding:14px;text-align:center;font-size:13px;color:var(--text-mid);letter-spacing:.02em}
.arch-platform{border:1px solid var(--accent);border-radius:var(--r-md);background:rgba(200,168,106,.08);padding:13px;text-align:center;font-family:var(--font-serif);font-size:18px;color:var(--text-hi);margin-top:10px}
.arch-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-5);align-items:start}
@media(max-width:760px){.arch-cols{grid-template-columns:1fr}}
.arch-col{border:1px solid var(--ink-600);border-radius:var(--r-lg);background:var(--ink-800);padding:var(--s-5)}
.arch-h{font-size:14px;color:var(--text-hi);font-weight:600;margin-bottom:var(--s-4)}
.arch-h span{display:block;font-size:11px;color:var(--text-lo);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{font-size:12px;border:1px solid var(--ink-600);border-radius:var(--r-pill);padding:5px 11px;color:var(--text-mid);background:var(--ink-700)}
.fchip.crit{border-color:rgba(217,119,92,.5);color:#e8a98f;background:rgba(217,119,92,.10)}
.arch-legend{display:flex;gap:var(--s-6);justify-content:center;margin-top:var(--s-5);font-size:12px;color:var(--text-lo)}
.arch-legend .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.arch-legend .dot.crit{background:#d9775c}
.arch-legend .dot.sec{background:var(--text-lo)}
/* case testimonial / endorsement */
.case-quote{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-6);align-items:center;border:1px solid var(--ink-600);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--ink-800),var(--ink-900));padding:var(--s-6);margin-top:var(--s-6)}
@media(max-width:700px){.case-quote{grid-template-columns:1fr}}
.case-quote>img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--ink-600)}
.case-quote blockquote{font-family:var(--font-serif);font-size:clamp(20px,2.5vw,28px);color:var(--text-hi);line-height:1.28;letter-spacing:-.01em}
.case-quote figcaption{margin-top:var(--s-4);font-size:13px;line-height:1.5}
.case-quote figcaption b{display:block;color:var(--accent-soft);font-weight:600;font-size:14px}
.case-quote figcaption span{color:var(--text-lo)}
.case-endorse{margin-top:var(--s-6)}
.case-endorse img{width:100%;max-width:780px;height:auto;display:block;border:1px solid var(--ink-600);border-radius:var(--r-lg);background:var(--ink-800)}
.case-endorse figcaption{margin-top:var(--s-3);font-size:13px;color:var(--text-lo);max-width:62ch;line-height:1.5}
.case-diagram{margin-top:var(--s-6)}
.case-diagram img{width:100%;height:auto;display:block;border:1px solid var(--ink-600);border-radius:var(--r-lg);background:#fff}
.case-diagram figcaption{margin-top:var(--s-3);font-size:13px;color:var(--text-lo);max-width:64ch;line-height:1.5}
/* iSave architecture (Atwood-styled zone diagram) */
.iarch{margin-top:var(--s-6)}
.iarch-gov{border:1px solid var(--accent);border-radius:var(--r-md);background:rgba(200,168,106,.08);color:var(--accent-soft);text-align:center;padding:9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.iarch-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:var(--s-5);align-items:start}
@media(max-width:880px){.iarch-grid{grid-template-columns:1fr}}
.iarch-col{display:flex;flex-direction:column;gap:var(--s-4)}
.izone{border:1px solid var(--ink-600);border-radius:var(--r-lg);background:var(--ink-800);padding:var(--s-5)}
.izone h4{font-size:13px;color:var(--text-hi);font-weight:600;margin-bottom:var(--s-3);letter-spacing:.02em}
.izone-core{background:linear-gradient(160deg,var(--ink-700),var(--ink-800))}
.icore{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:520px){.icore{grid-template-columns:1fr}}
.icore .izone{background:var(--ink-900)}
.ispine{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(217,119,92,.4);border-radius:var(--r-lg);background:rgba(217,119,92,.07);padding:var(--s-5)}
.ispine .spine-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#e8a98f;text-align:center;border:0;background:none;padding:0 0 2px}
.ispine span{font-size:12.5px;color:var(--text-mid);text-align:center;padding:9px;border:1px solid var(--ink-600);border-radius:var(--r-md);background:var(--ink-800)}
.ispine .esb{color:var(--accent-soft);border-color:rgba(200,168,106,.45)}
/* (case-cover logo overlays removed — covers already show each brand) */
/* poster case card — background image > dark scrim > gray brandmark */
.casecard.poster .cposter{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink-600);background:var(--ink-900);display:flex;align-items:center;justify-content:center}
.cposter-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.85)}
.casecard.poster .cposter::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(12,14,18,.58),rgba(12,14,18,.84))}
.cposter-mark{position:relative;z-index:2;font-family:var(--font-serif);font-size:clamp(22px,2.6vw,31px);font-weight:500;color:var(--text-mid);letter-spacing:.01em;text-align:center;padding:0 var(--s-4);transition:color .3s var(--ease)}
.casecard.poster:hover .cposter-mark{color:var(--text-hi)}
.casecard.poster:hover .cposter-bg{filter:grayscale(.35) brightness(.95)}
.cposter-logo{position:relative;z-index:2;max-width:58%;max-height:42%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.85;transition:opacity .3s var(--ease)}
.casecard.poster:hover .cposter-logo{opacity:1}