/* ============================================================
   OPSMARSHAL — Design System v2 (Gold/Black)
   "We Build the Machine. You Run the Company."
   ============================================================ */

/* Webfonts are self-hosted and loaded via /fonts.css, linked from each page's
   <head>. The @import that used to sit here was a serialized round trip: the
   browser could not discover it until style.css had downloaded and parsed,
   and it re-requested all 7 Inter weights. Removed 2026-08-30. */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Gold ramp */
  --gold-50:  #FDF8EE;
  --gold-100: #F7E8C2;
  --gold-200: #EDD08A;
  --gold-400: #C8962A;
  --gold-500: #B07C1A;
  --gold-600: #8F6210;
  --gold-800: #5A3C06;
  --gold-bright: #E8B84B;

  /* Surfaces */
  --black:     #07080C;
  --surface:   #0F1116;
  --surface-2: #171A22;
  --surface-3: #1E2230;
  --border:    #2A2D3A;
  --border-2:  #383C4E;

  /* Text */
  --text-primary:   #F5F0E8;
  --text-secondary: #A0A4B2;
  --text-muted:     #5C6070;

  /* Semantic */
  --success: #22C55E;
  --info:    #38BDF8;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', monospace;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --glow-gold: 0 0 24px rgba(200,150,42,0.12);
  --shadow:    0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5);

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --transition: all 0.25s var(--ease-out);
  --max-w: 1140px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
::selection { background: rgba(200,150,42,.35); color: var(--text-primary); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Typography ────────────────────────────────────────── */
.display {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.headline {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.subhead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.gold-text {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold-400) 55%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-400));
  color: #1A1206;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s var(--ease-out);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(200,150,42,.35); transform: translateY(-1px); }
.btn-primary:hover::after { left: 130%; }
.btn-outline {
  border: 1px solid var(--border-2);
  color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--gold-400); background: rgba(200,150,42,.07); box-shadow: var(--glow-gold); }
.btn-ghost { color: var(--gold-400); padding-left: 0; }
.btn-ghost:hover { gap: 12px; color: var(--gold-bright); }
.btn-ghost svg { transition: var(--transition); }
.btn-white {
  background: var(--black);
  color: var(--gold-bright);
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.4);
}
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.btn-white-outline {
  border: 1.5px solid rgba(7,8,12,.55);
  color: #1A1206;
}
.btn-white-outline:hover { border-color: var(--black); background: rgba(7,8,12,.08); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: var(--transition);
  padding: 20px 0;
}
.nav.scrolled {
  background: rgba(7,8,12,.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  font-size: 0.7rem; font-weight: 800;
}
.logo-text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.logo-text .lt-accent { color: var(--gold-400); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
}
.nav-links a:hover { color: var(--text-primary); background: rgba(200,150,42,.06); }
.nav-links a.active { color: var(--gold-400); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; color: var(--text-primary); padding: 6px; }

.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  padding: 90px 32px 32px;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--text-secondary);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.mobile-menu a:hover { color: var(--gold-400); padding-left: 8px; }
.mobile-menu .btn { margin-top: 24px; width: 100%; justify-content: center; border-bottom: none; }
.mobile-close {
  position: absolute;
  top: 20px; right: 24px;
  color: var(--text-primary);
  font-size: 1.8rem;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(200,150,42,.07), transparent 60%),
    var(--black);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 130px 0 90px;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,150,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,42,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,42,.13) 0%, transparent 70%);
  top: -140px; right: -120px;
  pointer-events: none;
  animation: glow-drift 14s ease-in-out infinite alternate;
}
.hero-glow-2 {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,98,16,.10) 0%, transparent 70%);
  bottom: -60px; left: -80px;
  pointer-events: none;
  animation: glow-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes glow-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-40px, 30px) scale(1.12); }
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,150,42,.08);
  border: 1px solid rgba(200,150,42,.3);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 28px;
}
.hero-badge span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.hero h1 { color: var(--text-primary); margin-bottom: 24px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--gold-400) 0%, var(--gold-bright) 40%, var(--gold-400) 80%, var(--gold-600) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s ease-in-out infinite 1s;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  50%  { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.hero-sub {
  font-size: 1.08rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 480px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-diagram {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  animation: hero-float 8s ease-in-out infinite;
  filter: drop-shadow(0 0 36px rgba(200,150,42,.10));
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Marquee / Trust Belt ───────────────────────────────── */
.trust-belt {
  background: var(--surface);
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.trust-belt-inner { display: flex; align-items: center; }
.trust-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 28px;
  border-right: 1px solid var(--border);
  margin-right: 28px;
}
.marquee-clip {
  overflow: hidden;
  flex: 1;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee 30s linear infinite;
  align-items: center;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tool-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.2s;
}
.tool-chip:hover { color: var(--gold-200); }
.tool-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200,150,42,.6);
}

/* ── Section basics ────────────────────────────────────── */
section { padding: 96px 0; position: relative; }
.section-header { max-width: 640px; margin-bottom: 64px; }
.section-header .label { display: inline-block; margin-bottom: 14px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--text-secondary); }

/* ── Problems ──────────────────────────────────────────── */
.problems { background: var(--black); }
.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.problem-card {
  background: var(--surface);
  padding: 48px 36px;
  position: relative;
  transition: background 0.3s var(--ease-out);
}
.problem-card:hover { background: var(--surface-2); }
.problem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.problem-card:hover::before { transform: scaleX(1); }
.problem-num {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-2);
  line-height: 1;
  margin-bottom: 22px;
}
.problem-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.problem-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; }
.problem-icon {
  width: 40px; height: 40px;
  background: rgba(200,150,42,.08);
  border: 1px solid rgba(200,150,42,.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--gold-400);
}

/* ── Services ──────────────────────────────────────────── */
.services-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-bright));
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-out);
  transform-origin: left;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200,150,42,.45);
  box-shadow: var(--shadow-lg), var(--glow-gold);
}
.service-card:hover::after { transform: scaleX(1); }
.service-card.featured {
  background: linear-gradient(150deg, rgba(200,150,42,.10), var(--surface-2) 55%);
  border-color: rgba(200,150,42,.35);
}
.service-icon {
  width: 48px; height: 48px;
  background: rgba(200,150,42,.10);
  border: 1px solid rgba(200,150,42,.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
  color: var(--gold-400);
  transition: var(--transition);
}
.service-card:hover .service-icon {
  color: var(--gold-bright);
  box-shadow: var(--glow-gold);
  transform: scale(1.06) rotate(-3deg);
}
.service-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.service-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; color: var(--text-primary); }
.service-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 24px; }
.service-points { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.service-points li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.service-points li strong { color: var(--text-primary); font-weight: 600; }
.service-points li::before {
  content: '';
  width: 5px; height: 5px;
  margin-top: 8px;
  background: var(--gold-400);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(200,150,42,.5);
}

/* ── AI Agent Showcase ─────────────────────────────────── */
.agent-section {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200,150,42,.06), transparent 70%),
    var(--black);
  overflow: hidden;
}
.agent-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.agent-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.agent-stage {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  position: relative;
  opacity: 0.45;
  transition: opacity 0.5s var(--ease-out);
}
.agent-stage.active { opacity: 1; }
.agent-stage-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
}
.agent-node {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  transition: all 0.5s var(--ease-out);
  z-index: 1;
}
.agent-stage.active .agent-node {
  border-color: var(--gold-400);
  color: var(--gold-bright);
  background: rgba(200,150,42,.12);
  box-shadow: 0 0 18px rgba(200,150,42,.35);
}
.agent-stage.active .agent-node::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  animation: node-pulse 1.8s ease-out infinite;
}
@keyframes node-pulse {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(1.9); opacity: 0; }
}
.agent-wire {
  width: 1px;
  flex: 1;
  background: var(--border);
  position: relative;
  overflow: hidden;
  margin: 4px 0;
}
.agent-wire::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  top: -40%;
  background: linear-gradient(180deg, transparent, var(--gold-bright));
  opacity: 0;
}
.agent-stage.active .agent-wire::after {
  opacity: 1;
  animation: wire-flow 1.4s linear infinite;
}
@keyframes wire-flow {
  from { top: -40%; }
  to   { top: 100%; }
}
.agent-stage:last-child .agent-wire { display: none; }
.agent-stage-body { padding-top: 6px; }
.agent-stage-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: 6px;
  transition: color 0.4s;
}
.agent-stage.active .agent-stage-tag { color: var(--gold-400); }
.agent-stage-body h3 { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.agent-stage-body p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; max-width: 380px; }

/* Console */
.agent-console {
  background: #0A0C12;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg), inset 0 0 60px rgba(200,150,42,.03);
  min-height: 420px;
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.console-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); }
.console-dot:first-child { background: rgba(200,150,42,.55); }
.console-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-left: 8px;
  text-transform: uppercase;
}
.console-body {
  flex: 1;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.console-line { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.console-line .c-time  { color: var(--text-muted); }
.console-line .c-ok    { color: var(--success); }
.console-line .c-gold  { color: var(--gold-bright); }
.console-line .c-info  { color: var(--info); }
.console-line .c-dim   { color: var(--text-secondary); }
.console-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--gold-400);
  vertical-align: middle;
  animation: cursor-blink 0.9s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
.agent-footnote {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.agent-footnote p { color: var(--text-secondary); font-size: 0.95rem; max-width: 560px; }
.agent-footnote .c-gold { color: var(--gold-400); font-weight: 600; }

/* ── Process ───────────────────────────────────────────── */
.process-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.process-step {
  background: var(--surface-2);
  padding: 44px 30px;
  position: relative;
  transition: background 0.3s;
}
.process-step:hover { background: var(--surface-3); }
.step-num {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,150,42,.35);
  line-height: 1;
  margin-bottom: 22px;
}
.step-icon {
  width: 44px; height: 44px;
  background: rgba(200,150,42,.08);
  border: 1px solid rgba(200,150,42,.22);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--gold-400);
}
.process-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
.process-step p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; }
.step-tag {
  display: inline-block;
  font-family: var(--font-mono);
  background: rgba(200,150,42,.10);
  border: 1px solid rgba(200,150,42,.25);
  color: var(--gold-200);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ── Results / Use Cases ───────────────────────────────── */
.results-section { background: var(--black); }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.result-card:hover {
  border-color: rgba(200,150,42,.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--glow-gold);
}
.result-context {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.result-context::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold-400);
  border-radius: 1px;
  transform: rotate(45deg);
}
.result-metric {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.result-before {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(200,150,42,.5);
  text-decoration-thickness: 2px;
}
.result-arrow { color: var(--gold-400); flex-shrink: 0; transform: translateY(-2px); }
.result-after {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.result-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.result-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.results-disclaimer {
  margin-top: 28px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── About Teaser ──────────────────────────────────────── */
.about-teaser { background: var(--surface); border-top: 1px solid var(--border); }
.about-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-content h2 { margin-bottom: 20px; }
.about-content > p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 16px; }
.about-content .label { display: inline-block; margin-bottom: 14px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  transition: var(--transition);
}
.tag:hover { border-color: var(--gold-400); color: var(--gold-200); }
.about-visual {
  background: linear-gradient(155deg, rgba(200,150,42,.08), var(--surface-2) 50%);
  border: 1px solid rgba(200,150,42,.25);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: var(--shadow-lg);
}
.about-quote {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 32px;
  color: var(--text-primary);
}
.about-quote::before {
  content: '"';
  color: var(--gold-400);
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 4px;
}
.founder-row { display: flex; align-items: center; gap: 16px; }
.founder-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-600));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #1A1206;
  flex-shrink: 0;
}
.founder-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.founder-title { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.about-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.about-metric-num {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-metric-label { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq-section { background: var(--black); }
.faq-grid {
  max-width: 760px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition);
}
.faq-item:hover { border-color: var(--border-2); }
.faq-item[open] { border-color: rgba(200,150,42,.4); box-shadow: var(--glow-gold); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-primary);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-200); }
.faq-toggle {
  font-family: var(--font-mono);
  color: var(--gold-400);
  font-size: 1.2rem;
  font-weight: 400;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-answer {
  padding: 0 26px 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

/* ── CTA Banner ────────────────────────────────────────── */
.cta-banner {
  background:
    radial-gradient(ellipse 70% 120% at 50% -20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-400) 55%, var(--gold-600) 100%);
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(7,8,12,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,8,12,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.cta-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.cta-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #14100A;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.cta-text p { color: rgba(20,16,10,.75); font-weight: 500; }
.cta-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 72px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-logo { margin-bottom: 16px; }
.footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 260px;
}
.footer-social { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
  font-size: 0.78rem;
  font-weight: 700;
}
.social-link:hover { background: rgba(200,150,42,.12); border-color: var(--gold-400); color: var(--gold-bright); }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.88rem; color: var(--text-secondary); transition: var(--transition); }
.footer-links a:hover { color: var(--gold-200); padding-left: 4px; }
.footer-email {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  transition: var(--transition);
}
.footer-email:hover { color: var(--gold-200); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: 0.78rem; color: var(--text-muted); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.78rem; color: var(--text-muted); transition: var(--transition); }
.footer-legal a:hover { color: var(--text-secondary); }

/* ── Page Hero (inner pages) ───────────────────────────── */
.page-hero {
  background:
    radial-gradient(ellipse 70% 70% at 60% 0%, rgba(200,150,42,.08), transparent 65%),
    var(--black);
  padding: 160px 0 90px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,150,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 20%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 20%, #000 30%, transparent 80%);
}
.page-hero .container { position: relative; z-index: 1; max-width: 800px; }
.page-hero h1 { color: var(--text-primary); margin-bottom: 20px; }
.page-hero p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.75; }
.page-hero .label { display: inline-block; margin-bottom: 16px; }

/* ── Services Page ─────────────────────────────────────── */
.services-detail-grid { display: grid; grid-template-columns: 1fr; gap: 64px; }
.service-detail-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border);
}
.service-detail-block:last-child { border-bottom: none; }
.service-detail-block.reverse .service-content { order: 2; }
.service-detail-block.reverse .service-detail-visual { order: 1; }
.service-detail-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-content .label { margin-bottom: 12px; display: inline-block; }
.service-content h2 { font-size: 1.9rem; margin-bottom: 16px; color: var(--text-primary); }
.service-content > p { color: var(--text-secondary); margin-bottom: 28px; line-height: 1.75; }
.deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deliverable {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.deliverable-check {
  width: 20px; height: 20px;
  background: rgba(200,150,42,.12);
  border: 1px solid rgba(200,150,42,.3);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold-400);
}

/* ── About Page ───────────────────────────────────────── */
.about-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 80px 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: var(--transition);
}
.value-card:hover { border-color: rgba(200,150,42,.4); box-shadow: var(--glow-gold); transform: translateY(-2px); }
.value-icon { font-size: 1.8rem; margin-bottom: 16px; }
.value-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.value-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; }

/* ── Contact Page ─────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 80px 0;
}
.contact-info h2 { margin-bottom: 20px; color: var(--text-primary); }
.contact-info > p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 32px; }
.contact-items { display: flex; flex-direction: column; gap: 20px; }
.contact-item { display: flex; align-items: center; gap: 16px; }
.contact-item-icon {
  width: 44px; height: 44px;
  background: rgba(200,150,42,.08);
  border: 1px solid rgba(200,150,42,.22);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  flex-shrink: 0;
}
.contact-item-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-item-value { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-top: 2px; }
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--surface-2);
  transition: var(--transition);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(200,150,42,.15);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Generic details/FAQ on inner pages */
details { color: var(--text-primary); }
details summary { cursor: pointer; }

/* ── Reveal animations ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Word-by-word headline reveal (set up by motion.js) */
.word-reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(2deg);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.word-reveal.played .w { opacity: 1; transform: translateY(0) rotate(0); }

/* ── Utilities ─────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.divider { height: 1px; background: var(--border); margin: 64px 0; }

/* ════════════════════════════════════════════════════════
   POSITIONING LAYER — triggers, operating system, tracks,
   committee proof, competitive frame
   ════════════════════════════════════════════════════════ */

/* ── Triggers ("Why teams call us") ────────────────────── */
.triggers-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.trigger-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(200,150,42,0.35);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}
.trigger-card:hover {
  border-left-color: var(--gold-400);
  border-color: rgba(200,150,42,.3);
  background: var(--surface-3);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(200,150,42,0.08);
}
.trigger-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  background: rgba(200,150,42,0.1);
  border: 1px solid rgba(200,150,42,0.22);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 18px;
}
.trigger-quote {
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  font-style: italic;
}
.trigger-start {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.trigger-start strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-400);
  opacity: 0.7;
  margin-bottom: 6px;
}
.triggers-foot {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── Revenue Operating System stack ────────────────────── */
.ros-section {
  background: linear-gradient(180deg, var(--black) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
}
.ros-stack {
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.ros-layer {
  display: grid;
  grid-template-columns: 72px 190px 1fr 1fr;
  align-items: start;
  gap: 24px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: var(--transition);
}
.ros-layer:last-child { border-bottom: none; }
.ros-layer:hover {
  background: var(--surface-2);
  border-left-color: var(--gold-400);
}
.ros-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(200,150,42,.45);
  line-height: 1.3;
}
.ros-layer:hover .ros-num { color: var(--gold-400); }
.ros-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.ros-what,
.ros-breaks {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.ros-breaks { color: var(--text-muted); }
.ros-head {
  display: grid;
  grid-template-columns: 72px 190px 1fr 1fr;
  gap: 24px;
  padding: 14px 28px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ros-head span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ros-note {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 2px solid var(--gold-400);
  background: rgba(200,150,42,.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ros-note strong { color: var(--text-primary); font-weight: 600; }

/* ── AI tracks (Service 04) ────────────────────────────── */
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.track-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: var(--transition);
}
.track-card:hover { border-color: rgba(200,150,42,.42); transform: translateY(-3px); }
/* Inside the narrow services-detail column the tracks stack A → B → C */
.service-content .track-grid { grid-template-columns: 1fr; gap: 14px; }
.service-content .track-card { padding: 24px 24px; }
.track-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 12px;
}
.track-card h3 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.track-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Committee proof / comparison tables ───────────────── */
.matrix {
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.matrix-row {
  display: grid;
  align-items: start;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.matrix-row:last-child { border-bottom: none; }
.matrix-row:hover { background: var(--surface-2); }
.matrix-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
}
.matrix-head span,
.matrix-row .m-h {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.matrix-3 .matrix-row,
.matrix-3.matrix-head { grid-template-columns: 170px 1fr 1.25fr; }
.matrix-4 .matrix-row,
.matrix-4.matrix-head { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.m-role {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gold-400);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.m-q {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-primary);
}
.m-a {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.m-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
.m-cell {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.m-cell.yes { color: var(--gold-400); font-weight: 600; }
.m-cell.no  { color: var(--text-muted); }
.matrix-4 .matrix-row .m-cell:last-child { color: var(--text-primary); font-weight: 600; }

/* ── Where we fit ──────────────────────────────────────── */
.fit-section { background: var(--black); border-top: 1px solid var(--border); }
.fit-lede {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.fit-lede + .fit-lede { margin-top: 18px; }

/* ── Artefact note above engagement ladder ─────────────── */
.ladder-note {
  max-width: 640px;
  margin: -32px auto 44px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Responsive card grids ─────────────────────────────
   Replaces inline grid-template-columns, which media queries
   cannot override and which forced a ~600px page on mobile. */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ── Trigger detail page ───────────────────────────────── */
.trigger-detail {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.trigger-detail:last-of-type { border-bottom: none; }
.trigger-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.trigger-detail-aside .trigger-tag { margin-bottom: 12px; }
.trigger-detail-aside h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.trigger-detail-quote {
  border-left: 2px solid var(--gold-400);
  padding: 4px 0 4px 18px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 500;
}
.trigger-detail-body p {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.trigger-detail-body p:last-child { margin-bottom: 0; }
.trigger-detail-body h3 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 26px 0 10px;
}
.trigger-detail-body h3:first-child { margin-top: 0; }
.trigger-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.trigger-toc a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: var(--transition);
}
.trigger-toc a:hover {
  color: var(--gold-400);
  border-color: rgba(200,150,42,.45);
  background: rgba(200,150,42,.06);
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .word-reveal .w { opacity: 1 !important; transform: none !important; }
  .agent-stage { opacity: 1; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { display: none; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-detail-block { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-block.reverse .service-content,
  .service-detail-block.reverse .service-detail-visual { order: unset; }
  .agent-layout { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .trigger-grid { grid-template-columns: repeat(2, 1fr); }
  .track-grid { grid-template-columns: 1fr; }
  .ros-layer, .ros-head { grid-template-columns: 56px 150px 1fr 1fr; gap: 18px; padding-left: 20px; padding-right: 20px; }
  .trigger-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  section { padding: 72px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .problems-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .about-teaser-grid { grid-template-columns: 1fr; gap: 48px; }
  .cta-banner .container { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-hero-content { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .console-body { font-size: 0.7rem; }
  .trigger-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .ros-stack { margin-top: 40px; }
  .ros-head { display: none; }
  .ros-layer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 20px;
    border-left-width: 0;
    border-top: 2px solid transparent;
  }
  .ros-layer:hover { border-left-color: transparent; border-top-color: var(--gold-400); }
  .ros-num { font-size: 0.8rem; color: var(--gold-400); }
  .ros-what::before,
  .ros-breaks::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .ros-what::before   { content: 'What it is'; }
  .ros-breaks::before { content: 'What breaks without it'; }
  .matrix { margin-top: 36px; }
  .matrix-head { display: none; }
  .matrix-3 .matrix-row,
  .matrix-4 .matrix-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  .m-cell[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 130px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 10px;
  }
  .ladder-note { margin: -16px auto 36px; }
  .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Terminal teaser (homepage) ───────────────────────────────────────── */
.terminal-teaser { padding: 96px 0; border-top: 1px solid var(--border); }
.tt-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin: 44px 0 34px;
}
.tt-stats > div {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-lg); padding: 22px 20px; text-align: center;
  transition: var(--transition);
}
.tt-stats > div:hover { border-color: var(--gold-600); background: var(--surface-2); }
.tt-stats strong {
  display: block; font-family: var(--font-mono); font-size: 30px;
  color: var(--gold-bright); font-weight: 700; letter-spacing: -.01em;
}
.tt-stats span {
  display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.tt-actions { text-align: center; }
.tt-actions .btn { margin: 0 6px; }
@media (max-width: 860px) { .tt-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .terminal-teaser { padding: 64px 0; } .tt-stats { grid-template-columns: 1fr; } }

/* The primary nav went from seven items to eight on 2026-08-31, when the GTM
   Agent Stack series was added. Two separate problems, fixed together.

   1. The <li>s never wrapped -- flex-wrap is nowrap -- but the labels inside
      them did, so "Case Studies" and "Agent Stack" broke over two lines and
      the nav grew from 87px to 91px, pushing every hero down with it. Below
      ~1000px no amount of padding reduction recovers the row: the eight links
      need ~953px next to the logo and the CTA. Hand that whole band to the
      hamburger, which already lists every link including the new one. Seven
      items already wrapped this way below ~900px, so this fixes a pre-existing
      bug as well as the one the eighth item introduced.

   2. From 1000px up the row fits, but only with tighter per-link padding, and
      only if each label is kept on one line. Natural width is ~953px against a
      1140px max container, so nowrap cannot overflow once the nav is shown. */
@media (min-width: 769px) and (max-width: 999px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}
.nav-links a { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1180px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 9px; font-size: 0.84rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SITE THEME LAYER v1 (appended to style.css by site-stage-tools/build_stage.py)
   Carries the homepage design language (modern bohemian craft over the working
   GTM stack) to every page that loads this stylesheet. Content pages stay ink
   and gold for long-form reading; the new language arrives as headings, a gold
   thread, arch hand-offs, a woven rule, paper callouts and clay for emphasis.
   Rules:
     - purely additive: nothing above this line is edited
     - no markup is needed; every motif is a pseudo-element or a token
     - decorative art is background-image only (aria-hidden by construction)
   ════════════════════════════════════════════════════════════════════════════ */

/* Bricolage Grotesque, self-hosted; same file and URL as the homepage so the
   browser cache is shared between the two. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/BricolageGrotesque-latin.85f55a58a3.woff2) format('woff2');}

:root{
  --paper:#F3EADB; --paper-2:#E9DDC6; --paper-3:#EFE4D0;
  --paper-ink:#1B1714; --paper-ink-2:#5B4F43; --paper-rule:#CDBE9F;
  --clay:#C65D3B; --clay-d:#9E4326; --clay-l:#E0714D;
  --disp:'Bricolage Grotesque','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:10px; --radius-lg:16px;           /* homepage radius lock: 10 / 16 */
}
html{scroll-padding-top:92px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ── Type: display face for every heading, Inter stays for reading ───────── */
h1,h2,h3,
.display,.headline,.section-title,
.service-title,.problem-card h3,.process-step h3,.result-card h3,.value-card h3,.track-card h3,
.ros-name,.trigger-detail-aside h2,.cta-text h2,.about-quote,
.mt-hero h1,.mt-list h2,.mt-card h3,.mt-pillar-head h2,.mt-cta h2,.mt-answer h2,
.faq-item summary,.stat-num,.about-metric-num,.result-after{
  font-family:var(--disp);
  text-wrap:balance;
}
h1,.display,.headline{letter-spacing:-.026em}
h2,h3{letter-spacing:-.018em}
/* labels, mono notes and the wordmark keep their own faces */
.label,.footer-col-title,.logo-text,.mt-notes h2,.mt-siblings h2,.trigger-detail-body h3{font-family:var(--font-mono)}
.logo-text{font-family:var(--font-sans)}
.mt-notes h2,.mt-siblings h2{text-wrap:wrap}
/* .page-hero p out-ranked .label, which left every hero eyebrow grey */
.page-hero .label{color:var(--gold-400)}

/* ── Navigation: same compact bar as the homepage, and the menu fixes ────── */
.nav{padding-block:12px}
.nav .nav-cta .btn,.nav .nav-cta a{padding-block:10px}
.nav-links a.active{color:var(--gold-bright);text-decoration:underline;text-decoration-color:var(--gold-400);
  text-decoration-thickness:2px;text-underline-offset:7px}
.mobile-menu{z-index:1100}                                  /* above .nav (1000): the toggle no longer sits on top of the menu */
body:has(.mobile-menu.open) .nav-toggle{visibility:hidden}
.mobile-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
.mobile-menu{padding-top:76px}
.mobile-menu a{font-size:1.2rem;min-height:48px;padding:12px 0;display:flex;align-items:center}
.mobile-menu a.btn-primary{color:var(--black);padding:14px 24px;min-height:52px}
.nav-toggle{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center}
@media (max-width:999px){.nav-toggle{display:flex}}
@media (min-width:1000px){.nav-toggle{display:none}}

/* ── Focus, links, buttons ───────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
.btn{min-height:44px;justify-content:center}
.btn-ghost{justify-content:flex-start}
/* two buttons in one row (primary + 'in detail') sat flush: give them a gap that also holds when they wrap */
.service-content .btn{margin:6px 10px 0 0}
/* body links were colourless: base `a{color:inherit}`. In running text they now read as links. */
section:not(.cta-banner) p a:not(.btn):not(.mt-out):not(.social-link),
section:not(.cta-banner) li a:not(.btn):not(.mt-out):not(.social-link),
.mt-answer a,.mt-notes a{
  color:var(--gold-bright);text-decoration:underline;text-decoration-color:rgba(200,150,42,.55);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
section:not(.cta-banner) p a:not(.btn):not(.mt-out):not(.social-link):hover,
section:not(.cta-banner) li a:not(.btn):not(.mt-out):not(.social-link):hover{color:var(--gold-200);text-decoration-color:currentColor}
.mt-grid li a,.mt-chips a,.trigger-toc a{text-decoration:none}

/* ── Page header band: gold thread and sun marker under every page title ─── */
.page-hero{padding-bottom:clamp(92px,9vw,128px) !important}
.page-hero::after,
section.mt-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,7.5vw,104px);
  background:url(/art/thread-band.7bc330e1e8.svg) right bottom / auto 100% no-repeat;opacity:.9;pointer-events:none;z-index:0}
section.mt-hero{padding-bottom:clamp(84px,8vw,118px)}
.page-hero .label::before,
.mt-hero .eyebrow::before{
  content:"";display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-4px;
  background:url(/art/sun-mark.a9774048f7.svg) center / contain no-repeat}
.mt-hero .eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.mt-hero .container{position:relative;z-index:1}

/* ── Long-form rhythm. The base reset zeroes paragraph margins, so articles
      were a single block of text. Scoped to the 760px article column. ──────── */
[style*="max-width:760px"] > p{margin-bottom:1.2em;line-height:1.8}
[style*="max-width:760px"] > h2.headline{margin-bottom:.55em}
[style*="max-width:760px"] > ul,[style*="max-width:760px"] > ol{margin:0 0 1.2em;padding-left:1.3em;list-style:disc;line-height:1.8}
[style*="max-width:760px"] > ol{list-style:decimal}
[style*="max-width:760px"] > ul li,[style*="max-width:760px"] > ol li{margin-bottom:.45em}
.page-hero [style*="max-width:760px"] > p:last-child{margin-bottom:0}

/* ── Cards: one radius, one lift, gold hover everywhere ──────────────────── */
.card-grid-2 > a,.card-grid-3 > a{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.card-grid-2 > a:hover,.card-grid-3 > a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(200,150,42,.55),var(--glow-gold)}
.mt-card,.mt-pillar,.matrix,.ros-stack,.faq-item,.contact-form,.about-visual,.service-card,.result-card,.value-card,.trigger-card,.track-card{border-radius:var(--radius-lg)}
.faq-item summary{font-size:1.02rem;min-height:56px}
/* every FAQ toggle: the plus turns to a cross when open (contact page spans had been text-swapped by main.js) */
details > summary .faq-toggle{display:inline-block;transition:transform .3s var(--ease-out)}
details[open] > summary .faq-toggle{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline-offset:-3px}

/* ── Paper callouts: the quotable block on a page is a sheet of paper ────── */
.callout,.ros-note{
  background:var(--paper);color:var(--paper-ink-2);border:0;border-left:5px solid var(--clay);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:0 18px 40px -26px rgba(0,0,0,.75)}
.callout strong,.ros-note strong,.callout h2,.callout h3{color:var(--paper-ink)}
.callout a,.ros-note a{color:var(--clay-d);text-decoration-color:rgba(158,67,38,.5)}
.callout{padding:22px 26px;line-height:1.7}
section.mt-answer{padding:8px 0 30px}
section.mt-answer .container{
  background:var(--paper);border-left:5px solid var(--clay);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  width:calc(100% - 56px);max-width:calc(var(--max-w) - 56px);padding:26px 32px 30px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.75)}
section.mt-answer .container h2{color:var(--paper-ink)}
section.mt-answer .container p{color:var(--paper-ink-2);max-width:80ch}
section.mt-answer .container a{color:var(--clay-d);text-decoration-color:rgba(158,67,38,.5)}
@media (max-width:480px){section.mt-answer .container{width:calc(100% - 36px);padding:20px 18px 22px}}

/* ── Clay: breaks, strike-throughs and "what goes wrong" ─────────────────── */
.result-before{text-decoration-color:var(--clay-l)}
.ros-head span:last-child,.ros-breaks::before{color:var(--clay-l)}
.ros-breaks{border-left:2px solid rgba(198,93,59,.55);padding-left:14px}
@media (max-width:768px){.ros-breaks{border-left:0;padding-left:0}}
.m-cell.no{color:var(--clay-l)}
.problem-num{-webkit-text-stroke-color:rgba(224,113,77,.55)}
.mt-score.mt-none{color:var(--clay-l)}

/* ── Footer: arches rise into the page, woven rule along the top edge ────── */
.footer{
  position:relative;z-index:2;border-top:0;margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(72px,7.5vw,96px);
  background:var(--black) url(/art/woven-rule.bb510fddec.svg) repeat-x center top / auto 22px;
  --text-muted:#8A8FA3}
.cta-banner + .footer{margin-top:0}
.cta-banner{padding-bottom:clamp(104px,calc(9.1667vw + 14px),150px)}   /* room for the arches that rise into it */
.footer::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(52px,9.1667vw,150px);
  background:url(/art/arches-footer.221dea8ca9.svg) center bottom / cover no-repeat;pointer-events:none}
.footer-bottom{border-top-color:var(--border)}
@media (hover:none),(max-width:640px){
  .nav .nav-logo,.footer .nav-logo{display:inline-flex;align-items:center;min-height:44px}
  .footer-links a{display:flex;align-items:center;min-height:44px}
  .footer-email{display:inline-flex;align-items:center;min-height:44px}
  .footer-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px}
  .footer-legal{gap:8px}
  .social-link{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  details summary{min-height:44px}
}

/* grid children may shrink: the about hero's metric grid forced a 389px column inside a 339px container at 375px */
@media (max-width:768px){
  .about-hero-content{grid-template-columns:minmax(0,1fr)}
  .about-hero-content > *{min-width:0}
}

/* ── The thread in the left gutter on wide screens (homepage parity) ─────── */
@media (min-width:1280px){
  body{position:relative}
  body::before{
    content:"";position:absolute;top:0;bottom:0;left:6px;width:76px;z-index:1;pointer-events:none;
    background:url(/art/thread-rail.92c6009202.svg) repeat-y top center / 76px auto;opacity:.85}
}
@media print{body::before,.page-hero::after,section.mt-hero::after,.footer::before{display:none}}