/* ==========================================================================
   RoboAtlas division page (v0.12.0, 24 Oct 2026)
   Loads after premium.css. Hero layout + the exploded-robot figure card.
   One palette: Brand Navy #0D1123 + Brand Blue #4490E2, neutral greys.
   ========================================================================== */

:root {
  --ra-ink: var(--lp-brand-navy, #0D1123);
  --ra-accent: var(--lp-brand-blue, #4490E2);
  --ra-card: #FBFCFD;
  --ra-card-rule: #E2E8F0;
  --ra-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* figure inks */
  --ra-line-hi: #1B2236;
  --ra-line-mid: #7C8496;
  --ra-line-lo: #B2B8C4;
  --ra-line-faint: #D3D8E0;
  --ra-line-on-dark: #56607A;
  --ra-dot: #3A4256;
  --ra-dot-on-dark: #8C95AB;

  --ra-shell-tp: #FFFFFF;
  --ra-shell-3: #F3F5F8;
  --ra-shell-2: #E8EBF0;
  --ra-shell-1: #DCE0E7;
  --ra-shell-0: #CDD2DB;

  --ra-metal-tp: #EEF0F4;
  --ra-metal-3: #DDE1E8;
  --ra-metal-2: #CDD2DB;
  --ra-metal-1: #BCC2CD;
  --ra-metal-0: #A9B0BD;

  --ra-tyre-tp: #3A4258;
  --ra-tyre-3: #30374C;
  --ra-tyre-2: #272D40;
  --ra-tyre-1: #1F2434;
  --ra-tyre-0: #181C29;

  --ra-accent-tp: #B9D6F6;
  --ra-accent-3: #8DBBEE;
  --ra-accent-2: #6AA6E8;
  --ra-accent-1: #4490E2;
  --ra-accent-0: #3479C4;
}

/* ---------- Header on a light hero ----------
   Shared header is transparent until scrolled and carries the light-on-dark
   logo. Solid navy bar from the start on this page only (same treatment as
   work.css, security.css and local.css). */
.site-header,
.site-header.scrolled {
  background: var(--lp-brand-navy, #0D1123);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- Hero ---------- */
.ra-hero { padding-top: calc(var(--space-24) + 40px); }

.ra-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10, 2.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .ra-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); }
}

.ra-hero h1 { max-width: 13ch; }

.ra-hero .ra-entity {
  margin: var(--space-6) 0 0;
  font-size: var(--text-small);
  color: var(--ed-muted);
  max-width: 42rem;
}

.ra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
}

.ra-actions .btn:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 3px; }

/* ---------- Figure card ---------- */
.ra-figure {
  position: relative;
  margin: 0;
  padding: 44px 18px 48px;
  background: var(--ra-card);
  border: 1px solid var(--ra-card-rule);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(13, 17, 35, 0.04), 0 24px 48px -28px rgba(13, 17, 35, 0.18);
}

.ra-corner {
  position: absolute;
  font-family: var(--ra-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ed-muted);
  white-space: nowrap;
}

.ra-corner--fig { top: 18px; left: 20px; color: var(--ra-ink); letter-spacing: 0.04em; }
.ra-corner--title { top: 18px; right: 20px; text-transform: uppercase; }
.ra-corner--hint { bottom: 16px; left: 20px; text-transform: uppercase; }
.ra-corner--readout { bottom: 18px; right: 20px; color: var(--ra-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.ra-toggle {
  font: inherit;
  font-family: var(--ra-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-accent, #2C72C2);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 2px;
  cursor: pointer;
}

.ra-toggle:hover { color: var(--ra-ink); }
.ra-toggle:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 3px; }
.ra-toggle[hidden] { display: none; }

.ra-stage { width: 100%; }

.ra-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  overflow: visible;
}

.ra-svg path, .ra-svg circle { vector-effect: non-scaling-stroke; }

.ra-caption {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--ed-muted);
  line-height: 1.55;
}

/* solids */
.ra-solid path { stroke-linejoin: round; }
.ra-solid .tp, .ra-solid .s0, .ra-solid .s1, .ra-solid .s2, .ra-solid .s3 { stroke-width: 0.35; }
.m-shell .tp { fill: var(--ra-shell-tp); stroke: var(--ra-shell-tp); }
.m-shell .s3 { fill: var(--ra-shell-3); stroke: var(--ra-shell-3); }
.m-shell .s2 { fill: var(--ra-shell-2); stroke: var(--ra-shell-2); }
.m-shell .s1 { fill: var(--ra-shell-1); stroke: var(--ra-shell-1); }
.m-shell .s0 { fill: var(--ra-shell-0); stroke: var(--ra-shell-0); }
.m-metal .tp { fill: var(--ra-metal-tp); stroke: var(--ra-metal-tp); }
.m-metal .s3 { fill: var(--ra-metal-3); stroke: var(--ra-metal-3); }
.m-metal .s2 { fill: var(--ra-metal-2); stroke: var(--ra-metal-2); }
.m-metal .s1 { fill: var(--ra-metal-1); stroke: var(--ra-metal-1); }
.m-metal .s0 { fill: var(--ra-metal-0); stroke: var(--ra-metal-0); }
.m-tyre .tp { fill: var(--ra-tyre-tp); stroke: var(--ra-tyre-tp); }
.m-tyre .s3 { fill: var(--ra-tyre-3); stroke: var(--ra-tyre-3); }
.m-tyre .s2 { fill: var(--ra-tyre-2); stroke: var(--ra-tyre-2); }
.m-tyre .s1 { fill: var(--ra-tyre-1); stroke: var(--ra-tyre-1); }
.m-tyre .s0 { fill: var(--ra-tyre-0); stroke: var(--ra-tyre-0); }
.m-accent .tp { fill: var(--ra-accent-tp); stroke: var(--ra-accent-tp); }
.m-accent .s3 { fill: var(--ra-accent-3); stroke: var(--ra-accent-3); }
.m-accent .s2 { fill: var(--ra-accent-2); stroke: var(--ra-accent-2); }
.m-accent .s1 { fill: var(--ra-accent-1); stroke: var(--ra-accent-1); }
.m-accent .s0 { fill: var(--ra-accent-0); stroke: var(--ra-accent-0); }

.ra-svg .ol, .ra-svg .cr, .ra-svg .rib, .ra-svg .ln, .ra-svg .gr, .ra-svg .vent,
.ra-svg .rule, .ra-svg .tk, .ra-svg .tkm, .ra-svg .lead {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.7px;
}

.ra-svg .ol { stroke: var(--ra-line-hi); }
.ra-svg .cr { stroke: var(--ra-line-lo); }
.ra-svg .m-tyre .cr { stroke: var(--ra-line-on-dark); }
.ra-svg .m-tyre .ol { stroke: #0D1123; }
.ra-svg .rib { stroke: var(--ra-line-on-dark); stroke-width: 0.5px; }
.ra-svg .m-accent .rib { stroke: var(--ra-accent-0); }
.ra-svg .m-accent .ol { stroke: #1F4F86; }
.ra-svg .ln { stroke: var(--ra-line-mid); stroke-width: 0.55px; }
.ra-svg .gr { stroke: var(--ra-line-lo); stroke-width: 0.55px; }
.ra-svg .vent { stroke: var(--ra-line-mid); stroke-width: 0.6px; fill: var(--ra-shell-1); }
.ra-svg .rule { stroke: var(--ra-line-lo); stroke-width: 0.9px; }
.ra-svg .tk { stroke: var(--ra-line-lo); stroke-width: 0.55px; }
.ra-svg .tkm { stroke: var(--ra-line-mid); stroke-width: 0.6px; }
.ra-svg .dt { fill: var(--ra-dot); }
.ra-svg .dtl { fill: var(--ra-dot-on-dark); }
.ra-svg .eng { fill: var(--ra-line-mid); font-family: var(--ra-mono); letter-spacing: 0.08em; }
.ra-svg .ra-shadow { fill: url(#ra-shadow-g); }

/* labels */
.ra-label .lead { stroke: var(--ra-line-mid); stroke-width: 0.7px; }
.ra-label .pin { fill: var(--ra-card); stroke: var(--ra-line-hi); stroke-width: 0.8px; }
.ra-label text { font-family: var(--ra-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--ra-ink); paint-order: stroke; stroke: var(--ra-card); stroke-width: 3px; stroke-linejoin: round; }
.ra-label.is-accent .pin { stroke: var(--ra-accent); }
.ra-label.is-accent text { fill: #2C72C2; }

@media (max-width: 560px) {
  .ra-figure { padding: 40px 8px 64px; }
  .ra-corner--title { display: none; }
  .ra-corner--hint { bottom: 40px; }
  .ra-label text { font-size: 11px; }
}

/* ---------- Focus areas: R&D chip ---------- */
.ra-caps .ed-chip { margin-bottom: var(--space-3); }
.ra-cap-head { display: grid; align-content: start; gap: var(--space-3); }
.ra-cap-head .ed-chip { justify-self: start; margin: 0; }

/* ---------- Partner band ---------- */
.ra-band-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: end; }
@media (min-width: 900px) { .ra-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }
.ra-band-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(226, 232, 240, 0.18); }
.ra-band-list li { padding: var(--space-4) 0; border-bottom: 1px solid rgba(226, 232, 240, 0.18); color: #CBD5E1; line-height: 1.55; }
.ed-band .btn-primary:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ra-toggle { transition: none; }
}

/* v0.12.2 partner rewrite: who-we-work-with list */
.ra-who { list-style: none; margin: 0 0 var(--space-6); padding: 0; border-top: 1px solid var(--ed-rule, #E2E8F0); }
.ra-who li { padding: var(--space-4) 0; border-bottom: 1px solid var(--ed-rule, #E2E8F0); color: var(--ed-body, #475569); line-height: 1.65; }
.ra-who strong { color: var(--ed-ink, #0D1123); font-weight: 600; }
.ed-cap p + p { margin-top: calc(-1 * var(--space-2)); }