.agents-page {
  --agent-canvas: oklch(0.975 0.008 120);
  --agent-paper: oklch(0.992 0.004 120);
  --agent-sheet: oklch(0.95 0.018 105);
  --agent-ink: oklch(0.255 0.035 190);
  --agent-sage: oklch(0.625 0.035 145);
  --agent-lime: oklch(0.86 0.16 125);
  --agent-coral: oklch(0.70 0.16 35);
  --agent-line: oklch(0.73 0.025 145 / 0.42);
  background: var(--agent-canvas);
  color: var(--agent-ink);
}

.agents-page .page {
  min-height: 0;
  overflow: clip;
  background: var(--agent-canvas);
}

.agents-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(40px, 6vw, 108px);
  min-height: min(100svh, 820px);
  padding: clamp(142px, 15vh, 180px) clamp(32px, 5vw, 88px) clamp(72px, 9vh, 108px);
}

.agent-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .92;
}

.agents-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.agents-hero .eyebrow {
  margin: 0 0 22px;
  color: var(--agent-sage);
}

.agents-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--agent-ink);
  font-size: clamp(54px, 5.4vw, 76px);
  font-weight: 760;
  line-height: var(--display-leading);
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.agents-hero .hero-subtitle {
  max-width: 580px;
  margin: 34px 0 0;
  color: oklch(0.39 0.025 180);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.35;
}

.agents-hero .hero-purpose {
  max-width: 62ch;
  margin: 22px 0 0;
  color: oklch(0.46 0.02 170);
  font-size: 16px;
  line-height: 1.65;
}

.agents-hero .hero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 36px;
  padding: 14px 20px;
  border: 1px solid var(--agent-ink);
  color: var(--agent-ink);
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease-out, background-color 180ms ease-out;
}

.agents-hero .hero-cta:hover {
  background: var(--agent-ink);
  color: var(--agent-paper);
}

.agents-hero .constellation {
  width: min(720px, 100%);
  --orbit-radius: min(290px, 20vw);
  filter: drop-shadow(0 28px 35px oklch(0.3 0.02 160 / 0.11));
}

.agents-hero .constellation::before,
.agents-hero .constellation::after {
  border-color: oklch(0.57 0.045 145 / 0.28);
}

.agents-hero .connections line { stroke: oklch(0.57 0.045 145 / 0.35); }
.agents-hero .core {
  background: var(--agent-ink);
  border-color: var(--agent-sage);
  box-shadow: 0 0 0 18px oklch(0.74 0.04 145 / 0.12);
}
.agents-hero .core strong { color: var(--agent-paper); }
.agents-hero .core span { color: oklch(0.86 0.16 125); }
.agents-hero .node img {
  background: var(--agent-ink);
  box-shadow: 0 0 0 1px var(--agent-line), 0 10px 22px oklch(0.3 0.02 160 / 0.1);
}
.agents-hero .node span { color: var(--agent-ink); }
.agents-hero .node { color: var(--agent-ink); text-decoration: none; }

.agents-context {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(48px, 8vw, 140px);
  padding: clamp(84px, 10vw, 150px) clamp(32px, 7vw, 120px);
  border-top: 1px solid var(--agent-line);
  background: var(--agent-sheet);
}

.agents-context .rationale {
  display: block;
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  padding: 0;
}
.agents-context .rationale-label { color: oklch(0.48 0.055 145); }
.agents-context .rationale h2 {
  display: block;
  width: 100%;
  max-width: none;
  color: var(--agent-ink);
  font-size: clamp(40px, 3.6vw, 52px);
}
.agents-context .rationale p { max-width: 66ch; color: oklch(0.39 0.02 180); font-size: 18px; }
.agents-context .rationale strong { color: var(--agent-ink); }
.agents-context .system-note {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  max-width: 620px;
  border-color: var(--agent-line);
  background: var(--agent-line);
}
.agents-context .system-note span { background: var(--agent-paper); color: var(--agent-ink); }
.agents-context .system-note span:last-child { color: oklch(0.43 0.075 145); }

.agents-context .architecture {
  grid-column: auto;
  align-self: start;
  grid-template-columns: 1fr;
  margin: 0;
  border: 1px solid var(--agent-line);
  background: var(--agent-paper);
}
.agents-context .architecture-item { padding: 28px; border-right: 0; border-bottom: 1px solid var(--agent-line); }
.agents-context .architecture-item:last-child { border-bottom: 0; }
.agents-context .architecture-index { color: oklch(0.48 0.055 145); }
.agents-context .architecture-item p { color: var(--agent-ink); }
.agents-context .architecture-item em { color: oklch(0.43 0.075 145); }

@media (max-width: 1180px) {
  .agents-hero { grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr); gap: 24px; }
  .agents-hero .constellation { --orbit-radius: min(220px, 19vw); }
}

@media (max-width: 840px) {
  .agents-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 34px;
    padding: 150px 20px 64px;
  }
  .agents-hero h1 { font-size: clamp(40px, 11vw, 44px); }
  .agents-hero .hero-subtitle { margin-top: 20px; font-size: 18px; }
  .agents-hero .hero-purpose { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .agents-hero .hero-cta { min-height: 48px; margin-top: 22px; }
  .agents-hero .constellation { width: min(560px, 100%); --orbit-radius: min(220px, 39vw); }
  .agents-context { grid-template-columns: 1fr; padding-inline: 20px; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .agent-field text { transform: none !important; }
}

html[dir="rtl"] .agents-hero-copy { text-align: right; }
html[dir="rtl"] .agents-hero { direction: ltr; }
html[dir="rtl"] .agents-hero-copy { direction: rtl; }
html[dir="rtl"] .agents-hero .hero-cta { direction: rtl; }

@media (max-width: 1180px) {
  .agents-page .page .mobile-nav-enhanced summary {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    color: oklch(0.975 0.008 120);
    border: 1px solid currentColor;
  }
  .agents-page .page .mobile-nav-enhanced summary::after {
    content: none !important;
    display: none;
  }
  .agents-page .page .mobile-nav-enhanced summary span,
  .agents-page .page .mobile-nav-enhanced summary span::before,
  .agents-page .page .mobile-nav-enhanced summary span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
  }
  .agents-page .page .mobile-nav-enhanced summary span { position: relative; }
  .agents-page .page .mobile-nav-enhanced summary span::before,
  .agents-page .page .mobile-nav-enhanced summary span::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .agents-page .page .mobile-nav-enhanced summary span::before { top: -6px; }
  .agents-page .page .mobile-nav-enhanced summary span::after { top: 6px; }
  .agents-page .page .mobile-nav-enhanced nav {
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: stretch;
  }
  .agents-page .page .mobile-nav-enhanced nav a {
    width: 100%;
    justify-content: flex-start;
    text-align: start;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  html:not([dir="rtl"]) .agents-page .page .mobile-nav-enhanced nav {
    right: 0;
    left: auto;
    width: min(300px, calc(100vw - 32px));
  }
  html[dir="rtl"] .agents-page .page .mobile-nav-enhanced nav {
    right: auto;
    left: 0;
    width: min(300px, calc(100vw - 32px));
  }
}

@media (max-width: 767px) {
  .agents-page .page .mobile-nav-enhanced nav { top: 0 !important; }
}

/* Business-first AI page */
.agents-page .agents-context,
.agents-page .complete-system,
.agents-page .public-philosophy,
.agents-page .architecture-final { display: none; }

.agents-hero {
  grid-template-columns: minmax(360px, .78fr) minmax(600px, 1.22fr);
  gap: clamp(36px, 5vw, 84px);
  min-height: 820px;
  padding-top: 126px;
  padding-bottom: 58px;
}
.agents-hero-copy { max-width: 670px; }
.agents-hero h1 { max-width: 650px; font-size: clamp(58px, 5.2vw, 84px); line-height: 1.04; }
.agents-hero .hero-subtitle { max-width: 620px; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.agents-hero .hero-actions .hero-cta { margin-top: 0; }
.hero-cta-primary { background: var(--agent-ink); color: var(--agent-paper) !important; }
.hero-text-link { color: var(--agent-ink); font-weight: 650; text-underline-offset: 5px; }
.hero-proof { max-width: 260px; margin: 52px 0 0; padding-top: 18px; border-top: 1px solid var(--agent-ink); color: oklch(.43 .03 170); font-family: Consolas, monospace; font-size: 10px; line-height: 1.8; letter-spacing: .13em; text-transform: uppercase; }

.scenario-visual { position: relative; align-self: center; min-height: 620px; perspective: 1300px; z-index: 1; }
.scenario-sheet { position: absolute; border: 1px solid oklch(.5 .035 150 / .32); border-radius: 5px; box-shadow: 0 26px 55px oklch(.25 .03 170 / .13); }
.scenario-source { top: 22px; right: 0; width: 76%; min-height: 315px; padding: 28px; background: oklch(.88 .035 145 / .92); transform: rotateY(-5deg) rotateX(2deg); }
.scenario-source p { margin: 0 0 24px; font-size: 23px; font-weight: 700; }
.scenario-source div { display: flex; gap: 28px; color: oklch(.38 .025 170); font-size: 12px; }
.scenario-source ul { width: 58%; margin: 34px 0 0 auto; padding: 0; list-style: none; }
.scenario-source li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid oklch(.45 .03 150 / .24); font-size: 11px; }
.scenario-source small { color: oklch(.4 .05 60); }
.scenario-main { top: 130px; left: 0; z-index: 2; width: 76%; min-height: 410px; padding: 28px; background: oklch(.985 .006 115 / .96); transform: rotateY(4deg) rotateX(1deg); }
.scenario-label, .scenario-review > span { font-family: Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.timeline-head { display: flex; justify-content: space-between; margin: 28px 0 18px; }
.timeline-head strong { font-size: 21px; }
.timeline-head span { padding: 6px 9px; border: 1px solid var(--agent-line); font-size: 11px; }
.timeline-grid { position: relative; height: 190px; margin-top: 14px; padding-top: 28px; border: 1px solid var(--agent-line); background: repeating-linear-gradient(90deg, transparent 0 19.8%, var(--agent-line) 20%); }
.timeline-grid em { position: absolute; inset: 7px 12px auto; color: oklch(.47 .02 170); font: normal 9px Consolas, monospace; }
.timeline-grid i { display: block; height: 50px; padding: 8px 10px; border-bottom: 1px solid var(--agent-line); color: oklch(.38 .025 170); font: normal 9px Consolas, monospace; }
.timeline-bar { position: absolute; height: 22px; background: oklch(.64 .035 145); }
.bar-one { top: 43px; left: 30%; width: 28%; }.bar-two { top: 93px; left: 42%; width: 37%; }.bar-three { top: 143px; left: 55%; width: 36%; }
.timeline-grid b { position: absolute; top: 88px; left: 57%; padding: 7px 10px; background: oklch(.78 .12 35); font-size: 10px; }
.scenario-options { display: flex; gap: 6px; margin-top: 14px; }
.scenario-options button { flex: 1; min-height: 38px; border: 1px solid var(--agent-line); background: transparent; color: var(--agent-ink); font: inherit; font-size: 11px; cursor: pointer; }
.scenario-options button[aria-selected="true"] { background: var(--agent-ink); color: var(--agent-paper); }
.scenario-review { right: 0; bottom: 0; z-index: 3; width: 52%; min-height: 220px; padding: 26px; background: oklch(.86 .16 125 / .96); transform: rotateY(-3deg); }
.scenario-review h2 { margin: 24px 0 12px; font-size: clamp(25px, 2.2vw, 38px); line-height: 1.12; }
.scenario-review p { margin: 0 0 25px; color: oklch(.31 .03 170); line-height: 1.5; }
.scenario-review strong { font-size: 12px; }

.business-problems, .evidence-section { background: var(--agent-paper); color: var(--agent-ink); }
.business-problems { border-top: 1px solid var(--agent-line); }
.business-problems .business-shell { padding-top: 48px; }
.evidence-section { background: var(--agent-sheet); }
.business-shell { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: clamp(88px, 9vw, 140px) 0; }
.section-kicker { margin: 0 0 20px; color: oklch(.48 .055 145); font-family: Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.business-shell > h2, .family-intro h2 { max-width: 900px; margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: var(--heading-leading); }
.application-list, .evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 68px; border-top: 1px solid var(--agent-line); }
.application-list article, .evidence-grid article { min-width: 0; padding: 28px 28px 32px; border-right: 1px solid var(--agent-line); border-bottom: 1px solid var(--agent-line); }
.application-list article { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.application-list article:nth-child(3n), .evidence-grid article:last-child { border-right: 0; }
.application-list span, .evidence-grid span { color: oklch(.48 .055 145); font-family: Consolas, monospace; font-size: 11px; text-transform: uppercase; }
.application-list h3, .evidence-grid h3 { margin: 18px 0 12px; font-size: 25px; line-height: 1.18; }
.application-list p, .evidence-grid p { color: oklch(.42 .025 175); line-height: 1.6; }
.application-note { max-width: 72ch; margin: 34px 0 0; color: oklch(.42 .025 175); line-height: 1.6; }

.connected-operations { display: grid; grid-template-columns: minmax(320px, .84fr) minmax(0, 1.16fr); background: var(--agent-sheet); color: var(--agent-ink); }
.connected-image { position: relative; min-height: 720px; overflow: hidden; background: var(--agent-sheet); }
.connected-image img,
.connected-image video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--agent-sheet); }
.connected-image span { position: absolute; inset: auto auto 18px 50%; z-index: 3; max-width: calc(100% - 32px); padding: 8px 11px; transform: translateX(-50%); background: var(--agent-paper); font: 700 11px/1.2 Consolas, monospace; text-align: center; text-transform: uppercase; white-space: nowrap; }
.connected-copy { align-self: center; padding: clamp(64px, 8vw, 128px); }
.connected-copy h2 { max-width: 760px; margin: 10px 0 24px; font-size: clamp(44px, 5.4vw, 76px); line-height: var(--heading-leading); }
.connected-copy > p { max-width: 68ch; color: oklch(.4 .025 175); font-size: 18px; line-height: 1.65; }
.connected-copy dl { margin: 44px 0 34px; border-top: 1px solid var(--agent-line); }
.connected-copy dl div { display: grid; grid-template-columns: minmax(120px, .42fr) 1fr; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--agent-line); }
.connected-copy dt { font-weight: 750; }
.connected-copy dd { margin: 0; color: oklch(.42 .025 175); }
.connected-copy aside { width: 100%; max-width: none; box-sizing: border-box; padding: 24px; background: var(--agent-ink); color: var(--agent-paper); }
.connected-copy aside p { width: auto; max-width: none; margin: 6px 0 0; color: inherit; line-height: 1.5; }
.signal-path { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 10px; margin: 36px 0 12px; }
.signal-path span { padding: 10px 12px; border: 1px solid var(--agent-line); background: var(--agent-paper); font-size: 12px; font-weight: 750; text-align: center; }
.signal-path i { height: 2px; background: color-mix(in oklch, var(--agent-line), var(--agent-lime) calc(var(--signal-progress, 0) * 100%)); transform: scaleX(clamp(.12, calc(var(--signal-progress, 0) * 3), 1)); transform-origin: left; opacity: clamp(.55, calc(.55 + var(--signal-progress, 0) * .45), 1); }
[dir="rtl"] .signal-path i { transform-origin: right; }
.signal-path i:nth-of-type(2) { transform: scaleX(clamp(.12, calc((var(--signal-progress, 0) - .333) * 3), 1)); }
.signal-path i:nth-of-type(3) { transform: scaleX(clamp(.12, calc((var(--signal-progress, 0) - .666) * 3), 1)); }

.motion-toggle { margin-top: 16px; min-height: 44px; padding: 9px 14px; border: 1px solid oklch(.32 .035 175 / .35); background: transparent; color: var(--agent-ink); font: 700 12px/1 Onest, sans-serif; cursor: pointer; }
.motion-toggle:hover, .motion-toggle:focus-visible { background: var(--agent-ink); color: var(--agent-paper); }
.scenario-sheet { transition: opacity 520ms ease-out, transform 520ms cubic-bezier(.16,1,.3,1), box-shadow 520ms ease-out; }
.scenario-visual[data-motion-stage="0"] .scenario-source,
.scenario-visual[data-motion-stage="1"] .scenario-main,
.scenario-visual[data-motion-stage="2"] .scenario-review { opacity: 1; transform: translateY(-5px); box-shadow: 0 18px 34px oklch(.25 .035 190 / .16); }
.scenario-visual[data-motion-stage="1"] [data-scenario-alert] { background: var(--agent-coral); color: var(--agent-paper); }
.scenario-visual[data-motion-stage="2"] .scenario-review { outline: 3px solid oklch(.86 .16 125 / .72); }
.evidence-grid a, .evidence-more { color: var(--agent-ink); font-weight: 720; text-underline-offset: 5px; }
.evidence-more { display: inline-block; margin-top: 42px; }

.output-story { display: flex; flex-direction: column; }
.output-story .engagement { order: 1; }
.output-story .commercial { order: 2; }

.agents-final-cta {
  padding: clamp(64px, 8vw, 112px) max(24px, calc((100vw - 1180px) / 2));
  background: var(--agent-sheet);
  color: var(--agent-ink);
  text-align: center;
}
.agents-final-cta h2 {
  max-width: 760px;
  margin: 12px auto 28px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: var(--display-leading);
  letter-spacing: -0.045em;
}
.agents-final-cta .hero-cta { display: inline-flex; }
.family-intro { position: relative; z-index: 2; padding: clamp(92px, 10vw, 150px) max(32px, 7vw); background: var(--agent-paper); color: var(--agent-ink); }
.family-intro p:last-child { max-width: 62ch; margin: 24px 0 0; color: oklch(.42 .025 175); font-size: 19px; line-height: 1.6; }
.family-explorer { height: calc(1000vh + 390px); }

@media (max-width: 1180px) {
  .agents-hero { grid-template-columns: 1fr 1fr; }
  .scenario-visual { min-height: 540px; }
  .application-list, .evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .application-list article:nth-child(2n), .evidence-grid article:nth-child(2) { border-right: 0; }
  .application-list article:nth-child(3n) { border-right: 1px solid var(--agent-line); }
  .connected-operations { grid-template-columns: .9fr 1.1fr; }
  .connected-copy { padding: 56px; }
  .family-explorer { height: auto; }
}
@media (max-width: 760px) {
  .agents-hero { grid-template-columns: 1fr; padding-top: 142px; }
  .agents-hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .scenario-visual { display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: 12px; perspective: none; }
  .scenario-visual .scenario-sheet { position: relative; inset: auto; width: 100%; transform: none; }
  .scenario-source { min-height: 0; padding: 18px; }
  .scenario-source ul { width: 100%; margin-top: 22px; }
  .scenario-main { min-height: 0; padding: 18px; }
  .scenario-review { min-height: 0; padding: 18px; }
  .scenario-review h2 { margin-top: 16px; font-size: 24px; }
  .scenario-options { flex-wrap: wrap; overflow: visible; }
  .scenario-options button { flex: 1 1 30%; min-width: 0; }
  .business-shell { width: min(100% - 32px, 1320px); padding-block: 72px; }
  .application-list, .evidence-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .application-list article, .application-list article:nth-child(3n), .evidence-grid article { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--agent-line); }
  .application-list article { display: block; grid-row: auto; }
  .connected-operations { grid-template-columns: 1fr; }
  .connected-image { min-height: 520px; aspect-ratio: 4 / 5; }
  .connected-image img,
  .connected-image video { object-fit: contain; background: var(--agent-sheet); }
  .connected-copy { padding: 64px 16px; }
  .connected-copy dl div { grid-template-columns: 1fr; gap: 5px; }
  .signal-path { grid-template-columns: 1fr; gap: 6px; }
  .signal-path i,
  .signal-path i:nth-of-type(2),
  .signal-path i:nth-of-type(3) { width: 2px; height: 12px; justify-self: center; transform: scaleY(1); }
  .family-intro { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .signal-path i,
  .signal-path i:nth-of-type(2),
  .signal-path i:nth-of-type(3) { transform: none; opacity: 1; }
  .scenario-sheet { transition: none; }
}


/* Approved montage hero and semantic action sequence */
.agents-hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-inline: clamp(32px, 6.5vw, 128px);
  background: oklch(.19 .055 155);
  color: var(--agent-paper);
  overflow: hidden;
}
.hero-montage { position: absolute; inset: 0; z-index: -1; background-color: oklch(.19 .055 155); background-image: url("./assets/imagery/web/agentic-ai-business-montage.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.agent-field { z-index: 0; mix-blend-mode: screen; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent 0 34%, rgb(0 0 0 / .16) 42%, #000 52% 100%); mask-image: linear-gradient(90deg, transparent 0 34%, rgb(0 0 0 / .16) 42%, #000 52% 100%); }
.agent-field text { fill: oklch(.82 .13 145 / .46); font-family: Consolas, "Courier New", monospace; letter-spacing: .015em; animation: code-stream var(--stream-duration) linear infinite; animation-play-state: paused; transition: fill 260ms ease-out, opacity 260ms ease-out; }
.agent-field.is-field-visible text { animation-play-state: running; }
.agent-field.code-streams text:nth-child(3n) { fill: oklch(.9 .14 128 / .58); }
.agent-field.code-streams text:nth-child(3n+2) { fill: oklch(.73 .1 155 / .42); }
.agent-field.code-layers text { fill: oklch(.97 .015 120 / .48); }
.agent-field.code-layers text:nth-child(even) { fill: oklch(.84 .15 135 / .64); }
.agent-field text.is-near-pointer { fill: oklch(.92 .18 128 / .94); opacity: 1; }
@keyframes code-stream { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--stream-shift),0,0); } }
.agents-page.motion-paused .agent-field text,
.agents-page.motion-hidden .agent-field text { animation-play-state: paused; }
.agents-hero-copy { z-index: 2; max-width: 690px; }
.agents-hero .eyebrow { color: var(--agent-lime); }
.agents-hero h1 { max-width: 690px; color: var(--agent-paper); font-size: clamp(64px, 7.2vw, 116px); line-height: 1.02; }
.agents-hero .hero-subtitle { max-width: 520px; color: oklch(.91 .012 125); }
.agents-hero .hero-actions .hero-cta { border-color: oklch(.94 .01 120 / .75); color: var(--agent-paper); }
.agents-hero .hero-actions .hero-cta:hover { background: var(--agent-paper); color: var(--agent-ink); }
.agents-hero .hero-text-link { color: var(--agent-paper); }
.agents-hero .hero-proof { color: oklch(.88 .02 130); border-color: oklch(.9 .01 120 / .38); }
.agents-hero .motion-toggle { border-color: oklch(.9 .01 120 / .48); color: var(--agent-paper); }
.agents-hero .motion-toggle:hover, .agents-hero .motion-toggle:focus-visible { background: var(--agent-paper); color: var(--agent-ink); }

.operations-demo { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(600px, 1.28fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding: clamp(80px, 9vw, 140px) clamp(32px, 6vw, 96px); background: var(--agent-canvas); color: var(--agent-ink); }
.operations-demo-copy h2 { max-width: 580px; margin: 10px 0 22px; font-size: clamp(40px, 4.7vw, 68px); line-height: var(--heading-leading); }
.operations-demo-copy > p:last-child { max-width: 48ch; color: oklch(.42 .025 175); font-size: 18px; line-height: 1.6; }
.operations-demo .scenario-visual { width: 100%; }

.observable-events { background: var(--agent-ink); color: var(--agent-paper); }
.observable-events .section-kicker { color: var(--agent-lime); }
.observable-events .business-shell > h2 { color: var(--agent-paper); }
.event-visuals { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; margin-top: 52px; }
.event-visuals figure { position: relative; min-height: 320px; margin: 0; overflow: hidden; }
.event-visuals img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-visuals figcaption { position: absolute; inset: auto 14px 14px; width: fit-content; max-width: calc(100% - 28px); padding: 9px 12px; background: var(--agent-ink); color: var(--agent-paper); font: 700 11px/1.35 Consolas, monospace; }
.events-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid oklch(.85 .02 135 / .25); }
.events-list article { min-width: 0; padding: 26px 22px 34px; border-right: 1px solid oklch(.85 .02 135 / .25); }
.events-list article:nth-child(3n) { border-right: 0; }
.events-list span { color: var(--agent-lime); font: 700 11px/1.2 Consolas, monospace; text-transform: uppercase; }
.events-list h3 { margin: 20px 0 12px; color: var(--agent-paper); font-size: 22px; line-height: 1.2; }
.events-list p { margin: 0; color: oklch(.82 .015 135); line-height: 1.55; }
.events-boundary { max-width: 780px; margin: 42px 0 0; color: oklch(.84 .015 135); line-height: 1.6; }

@media (max-width: 1600px) {
  .hero-montage { background-size: auto min(88%, calc(100vw / 2.4)); }
}

@media (max-width: 1180px) {
  .agents-hero { min-height: 820px; padding-top: 150px; padding-bottom: 72px; }
  .hero-montage { background-size: auto min(72%, calc(100vw / 2.4)); }
  .agents-hero h1 { font-size: clamp(58px, 9vw, 88px); }
  .operations-demo { grid-template-columns: 1fr; }
  .operations-demo-copy { max-width: 720px; }
  .events-list { grid-template-columns: repeat(2, 1fr); }
  .events-list article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 767px) {
  .agents-hero { align-items: flex-end; min-height: 650px; padding: 190px 20px 42px; }
  .hero-montage { height: calc(100vw / 2.4); background-position: center top; background-size: 100% auto; }
  .agents-hero h1 { font-size: clamp(52px, 15vw, 66px); }
  .agents-hero .hero-subtitle { font-size: 18px; }
  .operations-demo { padding: 64px 16px; }
  .events-list { grid-template-columns: 1fr; margin-top: 42px; }
  .event-visuals { grid-template-columns: 1fr; }
  .event-visuals figure { min-height: 230px; }
  .events-list article, .events-list article:nth-child(2n) { padding-inline: 0; border-right: 0; border-bottom: 1px solid oklch(.85 .02 135 / .25); }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .scenario-sheet { transform: none; }
  .agent-field text { animation: none; transform: none !important; }
}

/* Semantic operational monitor */
.scenario-visual { min-height: 500px; perspective: none; }
.monitor-frame { position: relative; width: min(100%, 940px); margin-inline: auto; padding: 14px; border: 1px solid oklch(.35 .025 170); border-radius: 22px; background: oklch(.16 .025 175); box-shadow: 0 30px 70px oklch(.2 .03 175 / .22); }
.monitor-screen { min-height: 500px; padding: 24px; overflow: hidden; border: 1px solid oklch(.82 .02 145 / .18); border-radius: 12px; background: oklch(.965 .012 125); }
.monitor-topbar { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--agent-line); }
.monitor-topbar strong { font-size: 14px; }
.monitor-topbar span, .monitor-grid section > span { color: oklch(.46 .045 145); font: 700 10px/1.3 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.monitor-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 10px; margin-top: 12px; }
.monitor-grid section { min-width: 0; padding: 16px; border: 1px solid var(--agent-line); background: var(--agent-paper); transition: border-color 360ms ease-out, background-color 360ms ease-out, transform 360ms cubic-bezier(.16,1,.3,1); }
.monitor-production { grid-row: auto; }
.monitor-production h3 { margin: 10px 0 16px; font-size: 21px; }
.monitor-chart { display: grid; gap: 12px; }
.monitor-chart i { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; font-style: normal; }
.monitor-chart b { color: oklch(.42 .025 175); font: 600 10px/1 Consolas, monospace; }
.monitor-chart em { height: 16px; transform: scaleX(.72); transform-origin: left; background: linear-gradient(90deg, var(--agent-sage), oklch(.72 .13 125)); transition: transform 700ms cubic-bezier(.16,1,.3,1); }
[dir="rtl"] .monitor-chart em { transform-origin: right; }
.monitor-chart i:nth-child(2) em { transform: scaleX(.48); }.monitor-chart i:nth-child(3) em { transform: scaleX(.31); }
.monitor-exception { display: flex; flex-direction: column; gap: 13px; }
.monitor-exception strong { width: fit-content; padding: 8px 10px; background: oklch(.9 .065 55); font-size: 13px; }
.monitor-exception small { color: oklch(.44 .025 175); }
.monitor-recommendation { grid-column: 1 / -1; background: oklch(.87 .15 125) !important; }
.monitor-recommendation h2 { margin: 10px 0 6px; font-size: clamp(21px, 1.8vw, 30px); line-height: 1.12; }
.monitor-recommendation p { margin: 0 0 18px; color: oklch(.31 .03 170); font-size: 13px; line-height: 1.45; }
.monitor-recommendation > strong { font-size: 12px; }
.monitor-stand { position: absolute; top: 100%; left: 50%; width: 32%; height: 74px; transform: translateX(-50%); border-bottom: 11px solid oklch(.2 .02 175); }
.monitor-stand::before { content: ""; position: absolute; left: 50%; width: 42%; height: 64px; transform: translateX(-50%); background: linear-gradient(90deg, oklch(.29 .02 175), oklch(.18 .02 175), oklch(.3 .02 175)); clip-path: polygon(28% 0,72% 0,90% 100%,10% 100%); }
.scenario-visual[data-motion-stage="0"] .monitor-production,
.scenario-visual[data-motion-stage="1"] .monitor-exception,
.scenario-visual[data-motion-stage="2"] .monitor-recommendation { border-color: oklch(.57 .12 130); transform: translateY(-3px); }
.scenario-visual[data-motion-stage="0"] .monitor-chart i:nth-child(1) em { transform: scaleX(.94); }
.scenario-visual[data-motion-stage="0"] .monitor-chart i:nth-child(2) em { transform: scaleX(.68); }
.scenario-visual[data-motion-stage="0"] .monitor-chart i:nth-child(3) em { transform: scaleX(.42); }
.scenario-visual[data-motion-stage="1"] .monitor-exception strong { background: var(--agent-coral); color: var(--agent-paper); }

/* Bounded editorial reveals and illustrative detection overlays */
.event-visuals figure, .connected-image { transition: opacity 600ms ease-out, transform 700ms cubic-bezier(.16,1,.3,1); }
.agents-page.motion-ready .event-visuals figure:not(.is-revealed),
.agents-page.motion-ready .connected-image:not(.is-revealed) { opacity: .28; transform: translateY(26px) scale(.985); }
.event-visuals figure:first-child::before { content: "Defined event"; position: absolute; z-index: 2; top: 18%; left: 38%; width: 25%; height: 54%; padding: 7px; border: 2px solid var(--agent-lime); color: var(--agent-lime); font: 700 9px/1 Consolas, monospace; text-transform: uppercase; box-shadow: 0 0 0 1px oklch(.18 .03 170 / .45); pointer-events: none; }
html[lang="ar"] .event-visuals figure:first-child::before { content: "حدث محدد"; }
.event-visuals figure:nth-child(2)::before { content: ""; position: absolute; z-index: 2; top: 14%; bottom: 14%; left: 58%; width: 2px; background: linear-gradient(transparent, var(--agent-lime), transparent); opacity: .78; pointer-events: none; }
.event-visuals figure.is-motion-visible:first-child::before { animation: detection-pulse 2.8s ease-in-out infinite; }
.event-visuals figure.is-motion-visible:nth-child(2)::before { animation: access-scan 3.4s ease-in-out infinite; }
@keyframes detection-pulse { 50% { border-color: var(--agent-paper); } }
@keyframes access-scan { 50% { transform: translateX(34px); opacity: .4; } }

/* Tighter, aligned family identity viewport; canonical marks remain whole. */
.family-stage { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) minmax(260px, .84fr); align-items: stretch; padding: 20px 24px; }
.family-block { justify-content: flex-start; padding: 20px 24px; }
.family-gif-frame { min-height: 0; aspect-ratio: 1 / .86; padding: 0; overflow: hidden; }
.family-lockup,
.family-stage[data-family-number="04"] .family-lockup { width: 100%; height: 100%; max-height: 100%; object-fit: contain; transform: none; }

@media (max-width: 1180px) {
  .family-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

@media (max-width: 760px) {
  .scenario-visual { min-height: 0; }
  .monitor-frame { padding: 8px; border-radius: 14px; }
  .monitor-screen { min-height: 0; padding: 14px; }
  .monitor-topbar, .monitor-grid { display: grid; grid-template-columns: 1fr; }
  .monitor-grid section { padding: 16px; }
  .monitor-production { grid-row: auto; }
  .monitor-stand { display: none; }
  .event-visuals figure:first-child::before { width: 28%; left: 36%; }
  .family-stage { grid-template-columns: minmax(0, 1fr); padding: 18px 14px; }
  .family-gif-frame { aspect-ratio: 1 / .9; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .event-visuals figure, .connected-image, .monitor-grid section, .monitor-chart em { transition: none; }
  .agents-page.motion-ready .event-visuals figure:not(.is-revealed), .agents-page.motion-ready .connected-image:not(.is-revealed) { opacity: 1; transform: none; }
  .event-visuals figure::before { animation: none !important; }
}
.agents-page.motion-paused .event-visuals figure::before,
.agents-page.motion-hidden .event-visuals figure::before { animation-play-state: paused !important; }
.monitor-screen { min-height: 0; }

/* Approved photographic control-room workflow; video is progressive enhancement. */
.scenario-visual { min-height: 0; }
.control-room-experience { width: min(100%, 960px); margin-inline: auto; }
.control-room-media { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: oklch(.18 .025 170); box-shadow: 0 26px 60px oklch(.2 .03 175 / .2); }
.control-room-media img,
.control-room-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.agent-scroll-film { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: oklch(.16 .025 170); }
.has-scroll-video > .agent-scroll-film,
.has-manual-video > .agent-scroll-film { display: block; }
.has-scroll-video > img,
.has-manual-video > img { visibility: hidden; }
.event-visuals figcaption,
.connected-image > span,
.control-room-media figcaption { z-index: 3; }
.control-room-media figcaption { position: absolute; inset: auto 16px 16px; width: fit-content; max-width: calc(100% - 32px); padding: 8px 11px; background: oklch(.16 .025 170 / .9); color: var(--agent-paper); font: 700 10px/1.35 Consolas, monospace; text-transform: uppercase; }
.control-room-panel { position: relative; z-index: 2; width: calc(100% - 40px); margin: -28px auto 0; padding: 16px; border: 1px solid var(--agent-line); background: oklch(.975 .008 120); box-shadow: 0 16px 34px oklch(.2 .03 175 / .12); }
.control-room-panel .scenario-options { margin-top: 0; }
.control-room-status { display: grid; grid-template-columns: .8fr .8fr 1.4fr; margin-top: 12px; border-top: 1px solid var(--agent-line); }
.control-room-status > div { min-width: 0; padding: 15px; border-inline-end: 1px solid var(--agent-line); }
.control-room-status > div:last-child { border-inline-end: 0; }
.control-room-status span { display: block; margin-bottom: 8px; color: oklch(.46 .045 145); font: 700 9px/1.3 Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.control-room-status strong { display: block; font-size: 15px; line-height: 1.3; }
.control-room-status p { margin: 7px 0 0; color: oklch(.4 .025 175); font-size: 12px; line-height: 1.4; }

@media (max-width: 760px) {
  .control-room-panel { width: calc(100% - 16px); margin-top: -10px; padding: 10px; }
  .control-room-status { grid-template-columns: 1fr; }
  .control-room-status > div { padding-inline: 6px; border-inline-end: 0; border-bottom: 1px solid var(--agent-line); }
  .control-room-status > div:last-child { border-bottom: 0; }
  .control-room-media figcaption { inset: auto 8px 8px; }
  .has-manual-video > .agent-scroll-film { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-scroll-film { display: none !important; }
  .has-scroll-video > img, .has-manual-video > img { visibility: visible; }
}

/* Bounded desktop scroll scenes; mobile and reduced motion retain normal flow. */
.pinned-scene-heading { display: none; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .operations-demo.is-film-track { display: block; min-height: 240vh; padding-top: 0; padding-bottom: 0; }
  .operations-film-sticky { position: sticky; top: 76px; display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 72px); align-items: center; min-height: calc(100vh - 92px); max-height: calc(100vh - 92px); }
  .operations-film-sticky .operations-demo-copy h2 { font-size: clamp(36px, 4.2vw, 58px); }
  .operations-film-sticky .control-room-media { max-height: calc(100vh - 300px); }
  .event-visuals.is-film-track { display: block; min-height: 240vh; }
  .event-media-sticky { position: sticky; top: 76px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto minmax(0,1fr); gap: 10px; height: calc(100vh - 92px); }
  .event-media-sticky .pinned-scene-heading { display: grid; grid-column: 1 / -1; gap: 5px; max-width: 850px; }
  .pinned-scene-heading span { color: var(--agent-lime); font: 700 10px/1.2 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
  .pinned-scene-heading strong { color: var(--agent-paper); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; }
  .event-media-sticky figure { min-height: 0; height: 100%; max-height: calc(100vh - 220px); }
  .event-media-sticky figure img,
  .event-media-sticky figure video { object-fit: contain; background: var(--agent-ink); }
  .connected-operations.is-film-track { display: block; min-height: 240vh; padding: 0; }
  .connected-film-sticky { position: sticky; top: 98px; display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; width: min(calc(100% - 64px), 1320px); margin-inline: auto; padding-block: 12px; }
  .connected-film-sticky > .connected-image { position: relative; width: 100%; min-height: 0; aspect-ratio: auto; background: var(--agent-sheet); opacity: 1; transform: none; }
  .agents-page.motion-ready .connected-film-sticky > .connected-image { opacity: 1; transform: none; }
  .connected-film-sticky > .connected-image img,
  .connected-film-sticky > .connected-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--agent-sheet); }
  .connected-film-sticky > .connected-copy { align-self: stretch; max-height: calc(100vh - 114px); padding: 0; }
  .connected-operations.is-film-track .connected-copy h2 { margin-block: 7px 14px; font-size: clamp(34px, 3.5vw, 50px); }
  .connected-operations.is-film-track .connected-copy > p { font-size: 16px; line-height: 1.5; }
  .connected-operations.is-film-track .signal-path { margin-block: 20px; }
  .connected-operations.is-film-track .connected-copy dl { margin: 20px 0; }
  .connected-operations.is-film-track .connected-copy dl div { padding-block: 9px; }
  .connected-operations.is-film-track .connected-copy aside { padding: 16px 18px; }
}
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .agent-field { display: none; }
}
/* Sticky-heading correction: fixed header clearance and stable figure identity. */
.event-visuals figure:nth-of-type(1)::before { content: "Defined event"; position: absolute; z-index: 2; top: 18%; left: 38%; width: 25%; height: 54%; padding: 7px; border: 2px solid var(--agent-lime); color: var(--agent-lime); font: 700 9px/1 Consolas, monospace; text-transform: uppercase; box-shadow: 0 0 0 1px oklch(.18 .03 170 / .45); pointer-events: none; }
html[lang="ar"] .event-visuals figure:nth-of-type(1)::before { content: "حدث محدد"; }
.event-visuals figure:nth-of-type(2)::before { content: ""; position: absolute; z-index: 2; top: 14%; bottom: 14%; left: 58%; width: 2px; height: auto; padding: 0; border: 0; background: linear-gradient(transparent, var(--agent-lime), transparent); opacity: .78; pointer-events: none; }
.event-visuals figure.is-motion-visible:nth-of-type(1)::before { animation: detection-pulse 2.8s ease-in-out infinite; }
.event-visuals figure.is-motion-visible:nth-of-type(2)::before { animation: access-scan 3.4s ease-in-out infinite; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .operations-film-sticky,
  .event-media-sticky,
  .event-media-sticky { grid-template-columns: repeat(2, minmax(0, 1fr)); height: calc(100vh - 114px); }
  .event-media-sticky figure { height: 100%; max-height: calc(100vh - 230px); }
}