/* ============================================================
   CUSTOM CROSSHAIR CURSOR (pointer: fine only)
   - 21×21 SVG, hotspot at (10, 10).
   - Default: 1px crosshair + 3×3 centre square in var(--accent).
   - Interactive (a, button, [role=button], .gallery-img): 5×5 filled centre.
   - Dark surfaces (nav, footer, .gallery-strip, .hero-right, .section.dark,
     [data-theme="dark"]) invert to #ffffff.
   - Touch devices fall through to native cursors.
   ============================================================ */
@media (pointer: fine) {
  /* DEFAULT — accent crosshair, 3×3 centre */
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cline x1='0' y1='10.5' x2='21' y2='10.5' stroke='%231a5276' stroke-width='1'/%3E%3Cline x1='10.5' y1='0' x2='10.5' y2='21' stroke='%231a5276' stroke-width='1'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%231a5276'/%3E%3C/svg%3E") 10 10, crosshair;
  }
  /* INTERACTIVE — accent crosshair, 5×5 filled centre */
  a, button, [role="button"], summary, label, input[type="submit"],
  .hamburger, .gallery-img, .gallery-track, .accent-band {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cline x1='0' y1='10.5' x2='21' y2='10.5' stroke='%231a5276' stroke-width='1'/%3E%3Cline x1='10.5' y1='0' x2='10.5' y2='21' stroke='%231a5276' stroke-width='1'/%3E%3Crect x='8' y='8' width='5' height='5' fill='%231a5276'/%3E%3C/svg%3E") 10 10, pointer;
  }
  /* DARK SURFACES — white crosshair, 3×3 centre */
  nav, .nav, header.nav, footer, .footer, .gallery-strip,
  .section.dark, .hero-right, [data-theme="dark"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cline x1='0' y1='10.5' x2='21' y2='10.5' stroke='white' stroke-width='1'/%3E%3Cline x1='10.5' y1='0' x2='10.5' y2='21' stroke='white' stroke-width='1'/%3E%3Crect x='9' y='9' width='3' height='3' fill='white'/%3E%3C/svg%3E") 10 10, crosshair;
  }
  /* INTERACTIVE on DARK — white crosshair, 5×5 filled centre */
  nav a, .nav a, .nav button, .nav .hamburger,
  footer a, .footer a,
  .gallery-strip a, .gallery-strip .gallery-img, .gallery-strip .gallery-track,
  .section.dark a, .section.dark button, .section.dark [role="button"],
  .hero-right a, .hero-right button,
  [data-theme="dark"] a, [data-theme="dark"] button {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cline x1='0' y1='10.5' x2='21' y2='10.5' stroke='white' stroke-width='1'/%3E%3Cline x1='10.5' y1='0' x2='10.5' y2='21' stroke='white' stroke-width='1'/%3E%3Crect x='8' y='8' width='5' height='5' fill='white'/%3E%3C/svg%3E") 10 10, pointer;
  }
}

/* ============================================================
   FOUNDER HEADSHOT (index.html, founder section)
   - Sits inside the existing .founder-portrait right-column slot
     (4:5 aspect, 320px wide on desktop). Replaces the legacy
     "LR" tile-pattern placeholder when an <img> is present.
   - Sharp corners. Default grayscale(100%) contrast(1.1).
   - Hover (0.4s) reveals full colour.
   ============================================================ */
/* When the portrait holds an actual headshot, drop the legacy 4:5 placeholder
   and render a 200×200 circular frame whose top edge aligns with the top of the
   bio (the left column's <h2>) via the parent grid's align-items: start. */
.founder-portrait:has(> .founder-headshot) {
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  background-image: none;
}
.founder-portrait:has(> .founder-headshot)::after { content: none; }
.founder-headshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;            /* anchor the photo's top edge to the circle's top */
  border-radius: 50%;
  /* Same blue-tinted monochrome as .gallery-img (sepia + hue-rotate to var(--accent) #1a5276 family) */
  filter: saturate(0) brightness(0.85) sepia(1) hue-rotate(170deg) saturate(0.6);
  transition: filter 0.4s ease;
}
.founder-headshot:hover {
  filter: saturate(1) brightness(1) sepia(0) hue-rotate(0deg);
}

/* ============================================================
   GALLERY STRIP (full-width horizontal)
   - Fixed height: 400 / 280 / 200 (desktop / <1200 / <768)
   - Native horizontal scroll with mandatory scroll-snap, hidden scrollbar
   - Auto-scrolls leftward 0.3px/frame on desktop only; pauses on hover.
     Mobile (<=768) has no auto-scroll; user swipes manually.
   - Each <img> fills section height; width auto (native aspect ratio)
   - 2px gap between images shows the dark section bg as a separator
   - 60px edge fade overlays signal off-screen content
   - Images replace .gallery-placeholder children; no CSS changes needed
   ============================================================ */
.gallery-strip {
  position: relative;
  width: 100%;
  height: 400px;
  background: var(--dark);
  overflow: hidden;          /* clips the strip's vertical bounds */
  margin: 0;
  padding: 0;
}
.gallery-strip::before,
.gallery-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 1;
  pointer-events: none;
}
.gallery-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--dark) 0%, rgba(27,40,56,0) 100%);
}
.gallery-strip::after {
  right: 0;
  background: linear-gradient(to left,  var(--dark) 0%, rgba(27,40,56,0) 100%);
}
.gallery-label {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  pointer-events: none;
}
.gallery-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2px;
  width: max-content;          /* sized to the duplicated children */
  height: 100%;
  overflow: hidden;
  animation: gallery-marquee 60s linear infinite;
  will-change: transform;
}
.gallery-track:hover { animation-play-state: paused; }
@keyframes gallery-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* JS duplicates children → -50% lands seamlessly */
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
}
.gallery-track > .gallery-img,
.gallery-track > img,
.gallery-track > .gallery-placeholder {
  display: block;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  /* Default: blue-tinted monochrome (NOT grayscale). The chained sepia + hue-rotate + saturate
     pulls the image into a cool teal-blue palette aligned with var(--accent) #1a5276. */
  filter: saturate(0) brightness(0.85) sepia(1) hue-rotate(170deg) saturate(0.6);
  transition: filter 0.6s ease;
}
.gallery-track > .gallery-img:hover,
.gallery-track > img:hover {
  filter: saturate(1) brightness(1) sepia(0) hue-rotate(0deg);
}
.gallery-placeholder {
  width: 600px;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-placeholder span {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.08);
}
@media (max-width: 1200px) {
  .gallery-strip { height: 280px; }
  .gallery-placeholder { width: 420px; }
}
@media (max-width: 768px) {
  .gallery-strip { height: 200px; }
  .gallery-placeholder { width: 300px; }
  .gallery-label { top: 16px; left: 16px; }
}

/* TECTO — Version A2: The Editorial + Technical Diagrams */

:root {
  --ink: #1a1a1a;
  --dark: #1B2838;
  --paper: #fafaf8;
  --paper-cool: #f8f9fb;
  --accent: #1a5276;
  --accent-light: #e8f0f6;
  --border: #dde1e6;
  --muted: #5a6570;
  --tag-bg: #edf0f3;
  --positive: #1a7a5c;
  --positive-bg: #e1f5ee;
  --caution: #a67c28;
  --negative: #8b3a3a;

  --max-content: 1200px;
  --side-pad: 80px;
  --section-pad: 120px;
  --body-max: 600px;
  --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.platform { background: var(--paper-cool); }

/* Typography */
h1, h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
}
h1 {
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 48px;
}
h2 {
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}
h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  color: var(--ink);
}
body.platform h1, body.platform h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}
p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: var(--body-max);
  color: var(--ink);
}
.label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: block;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--dark);
  z-index: 100;
  display: flex;
  align-items: center;
}
.nav-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.wordmark .mark { font-weight: 700; color: #fff; }
.wordmark .suffix { font-weight: 400; color: rgba(255,255,255,0.55); }
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  letter-spacing: 0.3px;
}
.nav-links a:hover { color: rgba(255,255,255,1); text-decoration: none; }

.btn {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-solid {
  background: var(--accent);
  color: #fff;
}
.btn-solid:hover { background: #1f6a94; text-decoration: none; }
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-light); text-decoration: none; }
.btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 8px 0;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.85);
}

/* Layout */
main { padding-top: var(--nav-h); }

.section {
  padding: var(--section-pad) var(--side-pad);
  border-bottom: 1px solid var(--ink);
}
.section-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

/* Hero — homepage */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink);
  padding: 0;
}
.hero-left {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 80px;
}
.hero-left .label { margin-bottom: 24px; }
.hero-left h1 { margin-bottom: 32px; }
.hero-left p { max-width: 480px; margin-bottom: 40px; }
.hero-right {
  position: relative;
  border-left: 1px solid var(--ink);
  background: var(--dark);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27,40,56,0.7);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-color: var(--dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0V40' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/></svg>");
  background-size: 40px 40px;
}
.hero-grid .draw-h, .hero-grid .draw-v {
  position: absolute;
  background: rgba(255,255,255,0.5);
}
.hero-grid .draw-h {
  height: 1px;
  width: 0;
  animation: drawHorizontal 1.2s ease-out forwards;
}
.hero-grid .draw-v {
  width: 1px;
  height: 0;
  animation: drawVertical 1.2s ease-out forwards;
}
.hero-grid .draw-h.h1 { top: 25%; left: 0; animation-delay: 0.1s; }
.hero-grid .draw-h.h2 { top: 60%; left: 0; animation-delay: 0.4s; }
.hero-grid .draw-v.v1 { left: 30%; top: 0; animation-delay: 0.2s; }
.hero-grid .draw-v.v2 { left: 75%; top: 0; animation-delay: 0.5s; }

@keyframes drawHorizontal { from { width: 0; } to { width: 100%; } }
@keyframes drawVertical { from { height: 0; } to { height: 100%; } }

/* Hero — platform */
.hero-platform {
  background: var(--paper-cool);
  padding: 224px var(--side-pad) 160px;
  border-bottom: 1px solid var(--ink);
}
.hero-platform-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.bridging-callout {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent-light);
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-left: 3px solid var(--accent);
  margin-bottom: 40px;
}

/* Summary grid */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  margin-top: 80px;
}
.summary-cell {
  border-top: 1px solid var(--ink);
  padding: 24px 0 0;
  transition: background 0.3s;
}
.summary-cell .label {
  color: var(--accent);
  margin-bottom: 16px;
  transition: color 0.3s;
}
.summary-cell p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0;
}
.summary-cell:hover {
  background: var(--accent-light);
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.summary-cell:hover .label { color: var(--ink); }

/* Callout */
.callout {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding: 32px 40px;
  margin: 48px 0 0;
  max-width: 800px;
}
.callout p { margin-bottom: 0; max-width: none; font-size: 17px; }

/* Founder */
.founder {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}
.founder .subtitle {
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin-top: -16px;
  margin-bottom: 32px;
  letter-spacing: 0.3px;
}
.founder-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0V40' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/></svg>");
  background-size: 40px 40px;
  position: relative;
}
.founder-portrait::after {
  content: 'LR';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 88px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 4px;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.contact-details {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.8;
}
.contact-details strong { font-weight: 700; }

/* Footer */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding: 80px var(--side-pad);
}
.footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.footer .wordmark { color: #fff; }
.footer .copy {
  text-align: right;
  font-size: 13px;
  line-height: 1.7;
}
.footer .copy .sub {
  display: block;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Scroll progress */
.scroll-progress {
  position: fixed;
  left: 0;
  top: var(--nav-h);
  width: 2px;
  height: 0;
  background: var(--accent);
  z-index: 90;
  pointer-events: none;
}

/* Cursor datum line — desktop only */
.cursor-line {
  position: fixed;
  left: 40px;
  width: 40px;
  height: 1px;
  background: var(--accent);
  z-index: 95;
  pointer-events: none;
  transition: top 0.08s ease-out;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  body:hover .cursor-line { opacity: 1; }
}

/* Image filters */
img, video { filter: grayscale(100%) contrast(1.1); transition: filter 0.6s ease; }
img:hover { filter: grayscale(0%) contrast(1.0); }

/* Responsive */
@media (max-width: 1200px) {
  :root { --side-pad: 48px; --max-content: 100%; }
  h1 { font-size: 56px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .founder { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 320px; }
  .hero-left { padding: 120px 48px; }
}
@media (max-width: 768px) {
  :root { --side-pad: 24px; --section-pad: 80px; }
  h1 { font-size: 40px; letter-spacing: -1px; margin-bottom: 32px; }
  h2 { font-size: 32px; margin-bottom: 24px; }
  p { font-size: 16px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    background: var(--dark);
    padding: 24px;
    gap: 24px;
    align-items: flex-start;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .hamburger { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 120px 24px 80px; }
  .hero-right { min-height: 320px; border-left: 0; border-top: 1px solid var(--ink); }
  .hero-platform { padding: 144px 24px 96px; }
  .summary-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { flex-direction: column; }
  .footer .copy { text-align: left; }
  .cursor-line { display: none; }
}

/* ============================================================
   v3 — Technical diagrams
   ============================================================ */

/* HERO SVG — site analysis composition */
.hero-right .hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-svg .bg { fill: var(--dark); }
.hero-svg .parcel-lines line { stroke: var(--accent); stroke-width: 0.5; opacity: 0.22; }
.hero-svg .streets line { stroke: var(--accent); stroke-width: 1; opacity: 0.55; }
.hero-svg .parcel { fill: rgba(26,82,118,0.30); stroke: var(--accent); stroke-width: 1; }
.hero-svg .conn { stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 3 3; fill: none; }
.hero-svg .label-box { fill: var(--dark); stroke: var(--accent); stroke-width: 0.5; }
.hero-svg .lbl { fill: rgba(255,255,255,0.92); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2px; }
.hero-svg .lbl-sub { fill: rgba(255,255,255,0.6); font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 9px; letter-spacing: 0.5px; }
.hero-svg .compass { fill: rgba(255,255,255,0.5); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2px; }
.hero-svg .scale-line { stroke: rgba(255,255,255,0.5); stroke-width: 1; }
.hero-svg .scale-text { fill: rgba(255,255,255,0.55); font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 1px; }

.hero-svg .parcel-group { opacity: 0; animation: heroParcelFade 0.6s ease-out forwards; }
.hero-svg .parcel-group.p1 { animation-delay: 0.4s; }
.hero-svg .parcel-group.p2 { animation-delay: 1.2s; }
.hero-svg .parcel-group.p3 { animation-delay: 2.0s; }
.hero-svg .parcel-group.p4 { animation-delay: 2.8s; }
@keyframes heroParcelFade { from { opacity: 0; } to { opacity: 1; } }

/* PROCESS DIAGRAM (What We Do) */
.process-diagram {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--ink);
}
.process-diagram .process-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.process-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.process-svg .node-rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.process-svg .node-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-anchor: middle;
  fill: var(--ink);
}
.process-svg .node-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  fill: var(--accent);
}
.process-svg .conn {
  stroke: var(--accent);
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s ease-out;
}
.process-svg .conn.thin { stroke-width: 1; }
.process-svg .conn.thick { stroke-width: 2; }
.process-svg.in-view .conn { stroke-dashoffset: 0; }
.process-svg.in-view .c1 { transition-delay: 0.1s; }
.process-svg.in-view .c2 { transition-delay: 0.5s; }
.process-svg.in-view .c3 { transition-delay: 0.9s; }
.process-svg .arrow-tip { fill: var(--accent); opacity: 0; transition: opacity 0.3s; }
.process-svg.in-view .arrow-tip { opacity: 1; transition-delay: 1.4s; }

/* CORRIDOR STRIP-MAP (Proof Case) */
.corridor-map {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.corridor-map .corridor-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.corridor-map .corridor-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}
.corridor-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.corridor-svg .rail-line { stroke: var(--border); stroke-width: 2; fill: none; }
.corridor-svg .tie { stroke: var(--border); stroke-width: 1; }
.corridor-svg .station-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.corridor-svg .station-dot.named { stroke: var(--accent); stroke-width: 2; }
.corridor-svg .bar {
  fill: var(--accent);
  transform-origin: bottom;
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 0.6s ease-out;
}
.corridor-svg.in-view .bar { transform: scaleY(1); }
.corridor-svg .station-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.corridor-svg .station-id {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1px;
  text-anchor: middle;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.corridor-svg .station-stat {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.8px;
  text-anchor: middle;
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.corridor-svg.in-view .station-name,
.corridor-svg.in-view .station-id,
.corridor-svg.in-view .station-stat { opacity: 1; }
.corridor-svg.in-view .station-name { transition-delay: 0.6s; }
.corridor-svg.in-view .station-id { transition-delay: 0.7s; }
.corridor-svg.in-view .station-stat { transition-delay: 0.8s; }
.corridor-svg.in-view .b1 { transition-delay: 0.0s; }
.corridor-svg.in-view .b2 { transition-delay: 0.08s; }
.corridor-svg.in-view .b3 { transition-delay: 0.16s; }
.corridor-svg.in-view .b4 { transition-delay: 0.24s; }
.corridor-svg.in-view .b5 { transition-delay: 0.32s; }
.corridor-svg .axis-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  fill: var(--muted);
}

/* LIFECYCLE FLOW (Platform page) */
.lifecycle-diagram {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.lifecycle-diagram .lifecycle-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.lifecycle-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  overflow: visible;
}
.lifecycle-svg .module-rect {
  fill: var(--paper-cool);
  stroke: var(--ink);
  stroke-width: 1;
}
.lifecycle-svg .module-rect.active { stroke: var(--accent); stroke-width: 2; }
.lifecycle-svg .module-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  fill: var(--muted);
}
.lifecycle-svg .module-rect.active + .module-content .module-num { fill: var(--accent); }
.lifecycle-svg .active-num { fill: var(--accent); }
.lifecycle-svg .module-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  fill: var(--ink);
}
.lifecycle-svg .module-name.active { fill: var(--accent); }
.lifecycle-svg .module-fn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.3px;
  fill: var(--muted);
}
.lifecycle-svg .module-active-tag {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  fill: var(--accent);
  text-anchor: end;
}
.lifecycle-svg .vconn {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.6s ease-out;
}
.lifecycle-svg.in-view .vconn { stroke-dashoffset: 0; }
.lifecycle-svg.in-view .v1 { transition-delay: 0.3s; }
.lifecycle-svg.in-view .v2 { transition-delay: 0.6s; }
.lifecycle-svg.in-view .v3 { transition-delay: 0.9s; }
.lifecycle-svg .feedback-loop {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 3;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.lifecycle-svg.in-view .feedback-loop { opacity: 1; transition-delay: 1.3s; }
.lifecycle-svg .module-group {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.lifecycle-svg.in-view .module-group { opacity: 1; transform: translateY(0); }
.lifecycle-svg.in-view .m1 { transition-delay: 0.0s; }
.lifecycle-svg.in-view .m2 { transition-delay: 0.2s; }
.lifecycle-svg.in-view .m3 { transition-delay: 0.4s; }
.lifecycle-svg.in-view .m4 { transition-delay: 0.6s; }

/* MOAT 3-LAYER (Platform page) */
.moat-stack {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.moat-stack .moat-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.moat-layers {
  display: flex;
  flex-direction: column;
}
.moat-layer {
  display: grid;
  grid-template-columns: 96px 1fr 220px;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.moat-layers.in-view .moat-layer { opacity: 1; transform: translateY(0); }
.moat-layers.in-view .layer-1 { transition-delay: 0.0s; }
.moat-layers.in-view .layer-2 { transition-delay: 0.2s; }
.moat-layers.in-view .layer-3 { transition-delay: 0.4s; }
.moat-layer.layer-1 { background: var(--tag-bg); padding-top: 22px; padding-bottom: 22px; }
.moat-layer.layer-2 { background: var(--accent-light); padding-top: 32px; padding-bottom: 32px; }
.moat-layer.layer-3 { background: var(--accent); color: #fff; padding-top: 48px; padding-bottom: 48px; border-bottom: 0; }
.moat-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.layer-3 .moat-num { color: rgba(255,255,255,0.55); }
.moat-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.45;
}
.layer-3 .moat-title { color: #fff; font-weight: 700; }
.moat-status {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  text-align: right;
}
.layer-3 .moat-status { color: #fff; }

/* Diagram responsive */
@media (max-width: 1024px) {
  .process-svg { min-width: 720px; }
  .corridor-svg { min-width: 720px; }
  .process-diagram { overflow-x: auto; }
  .corridor-map { overflow-x: auto; }
}
@media (max-width: 768px) {
  .moat-layer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 20px;
  }
  .moat-layer.layer-1 { padding-top: 18px; padding-bottom: 18px; }
  .moat-layer.layer-2 { padding-top: 24px; padding-bottom: 24px; }
  .moat-layer.layer-3 { padding-top: 32px; padding-bottom: 32px; }
  .moat-status { text-align: left; }
}

/* ============================================================
   v3.1 — Dark/light rhythm, accent band, pull quote, hero pulse
   ============================================================ */

/* Remove default ink rule; rhythm provides division */
.section { border-bottom: 0; }
.hero-platform { border-bottom: 0; }

/* Dark section base */
.section.dark {
  background: var(--dark);
  color: #fff;
}
.section.dark h1,
.section.dark h2,
.section.dark h3 { color: #fff; }
.section.dark p { color: #fff; }
.section.dark .label { color: #fff; }
.section.dark .subtitle,
.section.dark .corridor-label,
.section.dark .corridor-sub,
.section.dark .lifecycle-label,
.section.dark .moat-label,
.section.dark .process-label { color: rgba(255,255,255,0.55); }
.section.dark a:not(.btn) { color: rgba(255,255,255,0.92); }
.section.dark a:not(.btn):hover { color: #fff; text-decoration: underline; }

/* Dark→Light transition rule */
.section.dark.divider-out-light { border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Internal section dividers in dark mode (between summary grid → diagram, etc.) */
.section.dark .process-diagram,
.section.dark .corridor-map,
.section.dark .lifecycle-diagram,
.section.dark .moat-stack { border-top-color: rgba(255,255,255,0.15); }

/* Summary grid in dark sections */
.section.dark .summary-cell { border-top-color: rgba(255,255,255,0.2); }
.section.dark .summary-cell .label { color: var(--accent-light); }
.section.dark .summary-cell p { color: rgba(255,255,255,0.85); }
.section.dark .summary-cell:hover { background: rgba(255,255,255,0.06); }
.section.dark .summary-cell:hover .label { color: #fff; }

/* Corridor map in dark */
.section.dark .corridor-svg .rail-line,
.section.dark .corridor-svg .tie { stroke: rgba(255,255,255,0.25); }
.section.dark .corridor-svg .station-dot { fill: var(--dark); stroke: rgba(255,255,255,0.85); }
.section.dark .corridor-svg .station-dot.named { stroke: var(--accent-light); }
.section.dark .corridor-svg .bar { fill: var(--accent-light); }
.section.dark .corridor-svg .station-name { fill: #fff; }
.section.dark .corridor-svg .station-id { fill: rgba(255,255,255,0.55); }
.section.dark .corridor-svg .station-stat { fill: var(--accent-light); }
.section.dark .corridor-svg .axis-label { fill: rgba(255,255,255,0.55); }

/* Lifecycle in dark — modules stay light cards on dark page */
.section.dark .lifecycle-svg .vconn,
.section.dark .lifecycle-svg .feedback-loop { stroke: rgba(255,255,255,0.4); }
.lifecycle-svg .feedback-label {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
}
.section.dark .lifecycle-svg .feedback-label { fill: var(--accent-light); }

/* Contact section in dark */
.section.dark .contact-details { color: #fff; }
.section.dark .contact-details strong { color: #fff; }

/* Callout retains its light box treatment — high-contrast against dark bg */
/* (no dark-mode override for .callout) */

/* ACCENT BAND — between What We Do and Proof Case */
.accent-band {
  background: var(--accent);
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  color: #fff;
}
.accent-band-inner {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-align: center;
  color: #fff;
  margin: 0;
  max-width: 960px;
  line-height: 1.4;
}
.accent-band-inner [data-counter] {
  font-weight: 700;
  letter-spacing: 0.6px;
}
@media (max-width: 768px) {
  .accent-band { padding: 14px 20px; }
  .accent-band-inner { font-size: 13px; }
}

/* PULL QUOTE — founder section */
.pull-quote {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 0 0 40px;
  max-width: 600px;
  font-style: normal;
  quotes: none;
}
@media (max-width: 768px) {
  .pull-quote { font-size: 24px; padding-left: 18px; margin-bottom: 32px; }
}

/* HERO SVG — bumped opacities + parcel pulse */
.hero-svg .parcel-lines line { opacity: 0.35; }
.hero-svg .streets line { opacity: 0.75; }
.hero-svg .parcel {
  fill: var(--accent);
  fill-opacity: 0.35;
  stroke: var(--accent);
  stroke-width: 1;
  animation: parcelPulse 3s ease-in-out infinite;
}
@keyframes parcelPulse {
  0%, 100% { fill-opacity: 0.45; }
  50%      { fill-opacity: 0.25; }
}

/* ============================================================
   v3.2 — 5-cell summary grid + 5-node process flow + return loop
   ============================================================ */

/* Summary grid: desktop 5, tablet 3, mobile 1 */
.summary-grid { grid-template-columns: repeat(5, 1fr); gap: 48px 40px; }
@media (max-width: 1200px) {
  .summary-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
}
@media (max-width: 768px) {
  .summary-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Process diagram: extended to 5 nodes — bump min-width so 1200 viewBox stays readable */
@media (max-width: 1024px) {
  .process-svg { min-width: 980px; }
}
.process-svg.in-view .c4 { transition-delay: 1.3s; }

.process-svg .return-loop {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.process-svg.in-view .return-loop { opacity: 1; transition-delay: 1.7s; }
.process-svg .return-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.process-svg.in-view .return-label { opacity: 1; transition-delay: 1.9s; }

/* ============================================================
   v4 — Hero bg image · cell icons · capability tags · content
   images · dark callout fix
   ============================================================ */

/* Hero right column — image behind the SVG analysis */
.hero-right .hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  z-index: 1;
  filter: none;
}
.hero-right .hero-bg-image:hover { filter: none; }
.hero-right .hero-svg { z-index: 2; }
.hero-right .hero-overlay { z-index: 3; }

/* Cell icon (above each summary cell label) */
.cell-icon {
  display: block;
  width: 48px;
  height: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  overflow: visible;
}
.cell-icon line, .cell-icon rect, .cell-icon polyline {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* Capability tags (below each cell description) */
.cell-tags {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
  max-width: none;
}
.section.dark .cell-tags { color: rgba(255,255,255,0.55); }

/* Content images (placed photographs, duotone-treated) */
.content-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 48px auto;
  max-width: 1000px;
  filter: none;
  transition: none;
}
.content-image:hover { filter: none; }
.content-image.image-axo { margin: 64px auto; max-width: 1000px; }
.content-image.image-corridor { margin: 48px auto; max-width: 1000px; }
.content-image.image-lifecycle { margin: 0 auto 48px; max-width: 900px; }

/* Callout — dark accent block with white text */
.callout {
  background: var(--accent);
  border-left: 3px solid #fafaf8;
  padding: 24px 32px;
  margin: 48px 0 0;
  max-width: 800px;
  color: #fff;
}
.callout p {
  margin-bottom: 0;
  max-width: none;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
}
/* In dark sections, the callout still reads as accent against dark — slight tone shift + white border keeps it crisp */
.section.dark .callout { background: var(--accent); color: #fff; }
.section.dark .callout p { color: #fff; }

/* ============================================================
   v5 — Native SVG diagrams · faster hero · typewriter accent
   · 5-layer knowledge stack · 10-unit system arch
   ============================================================ */

/* ---- HERO SVG: faster staggers (0.3s), pulse, scan, callouts ---- */

/* IntersectionObserver-driven (v5 brief #9): hero animations only run after .hero-svg.in-view */
.hero-svg .parcel {
  fill: var(--accent);
  fill-opacity: 0.35;
  stroke: var(--accent);
  stroke-width: 1;
}
.hero-svg.in-view .parcel { animation: parcelPulseV5 3s ease-in-out infinite; }
@keyframes parcelPulseV5 {
  0%, 100% { fill-opacity: 0.45; stroke-width: 1; }
  50%      { fill-opacity: 0.25; stroke-width: 2; }
}

/* Eight parcels with 0.3s stagger (vs 0.8s previously) */
.hero-svg .parcel-group { opacity: 0; }
.hero-svg.in-view .parcel-group { animation: heroParcelFade 0.5s ease-out forwards; }
.hero-svg.in-view .parcel-group.p1 { animation-delay: 0.0s; }
.hero-svg.in-view .parcel-group.p2 { animation-delay: 0.3s; }
.hero-svg.in-view .parcel-group.p3 { animation-delay: 0.6s; }
.hero-svg.in-view .parcel-group.p4 { animation-delay: 0.9s; }
.hero-svg.in-view .parcel-group.p5 { animation-delay: 1.2s; }
.hero-svg.in-view .parcel-group.p6 { animation-delay: 1.5s; }
.hero-svg.in-view .parcel-group.p7 { animation-delay: 1.8s; }
.hero-svg.in-view .parcel-group.p8 { animation-delay: 2.1s; }

.hero-svg .parcel-name {
  fill: rgba(255,255,255,0.9);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}

/* Data callouts: tiny text staggered after parcels (0.2s offset) */
.hero-svg .data-callout {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.5px;
  opacity: 0;
}
.hero-svg.in-view .data-callout { animation: heroCalloutFade 0.4s ease-out forwards; }
.hero-svg.in-view .data-callout.d1 { animation-delay: 0.2s; }
.hero-svg.in-view .data-callout.d2 { animation-delay: 0.5s; }
.hero-svg.in-view .data-callout.d3 { animation-delay: 0.8s; }
.hero-svg.in-view .data-callout.d4 { animation-delay: 1.1s; }
.hero-svg.in-view .data-callout.d5 { animation-delay: 1.4s; }
.hero-svg.in-view .data-callout.d6 { animation-delay: 1.7s; }
.hero-svg.in-view .data-callout.d7 { animation-delay: 2.0s; }
.hero-svg.in-view .data-callout.d8 { animation-delay: 2.3s; }
@keyframes heroCalloutFade { from { opacity: 0; } to { opacity: 1; } }

/* Scanning line: sweeps top-to-bottom 6s loop */
.hero-svg.in-view .scan-line-group {
  animation: heroScan 6s linear infinite;
  transform: translateY(0);
}
.hero-svg .scan-line {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.15;
}
@keyframes heroScan {
  0%   { transform: translateY(-30px); opacity: 0; }
  10%  { opacity: 0.15; }
  90%  { opacity: 0.15; }
  100% { transform: translateY(900px); opacity: 0; }
}

/* ---- SYSTEM FLOW (replaces old process-svg) ---- */
.system-flow {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--ink);
}
.system-flow-svg { width: 100%; height: auto; display: block; overflow: visible; }

.system-flow-svg .input-box {
  fill: var(--tag-bg);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.system-flow-svg .input-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  fill: var(--muted);
}
.system-flow-svg .main-box {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}
/* Phase boxes are color-coded by which rail-half they ultimately feed:
   FM-side (Sourcing, Feasibility) carry the lighter projected hue; CD-side
   (Entitlement, Delivery) carry the accent. Design sits between and strokes
   with the #design-stroke linearGradient defined in each system-flow SVG. */
.system-flow-svg .main-box.fm-side    { stroke: #8ca8ba; }
.system-flow-svg .main-box.cd-side    { stroke: var(--accent); }
.system-flow-svg .main-box.design-side { stroke: url(#design-stroke); }
.system-flow-svg .main-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  fill: var(--accent);
}
.system-flow-svg .main-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  fill: var(--ink);
}
.system-flow-svg .main-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.4px;
  fill: var(--muted);
}
.system-flow-svg .bottom-box {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .bottom-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  fill: var(--accent);
}
.system-flow-svg .input-conn,
.system-flow-svg .main-conn {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill: none;
  transition: stroke-dashoffset 1.2s ease-out;
}
.system-flow-svg .input-conn { stroke: var(--muted); stroke-width: 1; }
.system-flow-svg .main-conn { stroke: var(--accent); stroke-width: 2; }
.system-flow-svg.in-view .input-conn,
.system-flow-svg.in-view .main-conn { stroke-dashoffset: 0; }
.system-flow-svg.in-view .ic1 { transition-delay: 0.4s; }
.system-flow-svg.in-view .ic2 { transition-delay: 0.5s; }
.system-flow-svg.in-view .ic3 { transition-delay: 0.6s; }
.system-flow-svg.in-view .mc1 { transition-delay: 1.4s; }
.system-flow-svg.in-view .mc2-fwd  { transition-delay: 1.6s; }
.system-flow-svg.in-view .mc2-back { transition-delay: 1.7s; }
.system-flow-svg.in-view .mc3 { transition-delay: 1.8s; }
.system-flow-svg.in-view .mc4 { transition-delay: 2.0s; }

.system-flow-svg .vert-bid {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.6s ease-out;
}
.system-flow-svg.in-view .vert-bid { stroke-dashoffset: 0; transition-delay: 2.6s; }

.system-flow-svg .feedback-up,
.system-flow-svg .learn-return {
  fill: none;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.system-flow-svg .feedback-up { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.system-flow-svg .learn-return { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 6 4; }
.system-flow-svg.in-view .feedback-up { opacity: 1; transition-delay: 3.0s; }
.system-flow-svg.in-view .learn-return { opacity: 1; transition-delay: 3.4s; }

.system-flow-svg .learn-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.system-flow-svg.in-view .learn-label { opacity: 1; transition-delay: 3.6s; }

/* Stagger inputs/nodes/bottom-row groups */
.system-flow-svg .flow-input,
.system-flow-svg .flow-node,
.system-flow-svg .flow-bottom {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.system-flow-svg.in-view .flow-input,
.system-flow-svg.in-view .flow-node,
.system-flow-svg.in-view .flow-bottom { opacity: 1; transform: translateY(0); }
.system-flow-svg.in-view .fi1 { transition-delay: 0.0s; }
.system-flow-svg.in-view .fi2 { transition-delay: 0.3s; }
.system-flow-svg.in-view .fi3 { transition-delay: 0.6s; }
.system-flow-svg.in-view .fn1 { transition-delay: 0.7s; }
.system-flow-svg.in-view .fn2 { transition-delay: 0.9s; }
.system-flow-svg.in-view .fn3 { transition-delay: 1.1s; }
.system-flow-svg.in-view .fn4 { transition-delay: 1.3s; }
.system-flow-svg.in-view .fn5 { transition-delay: 1.5s; }
.system-flow-svg.in-view .fb1 { transition-delay: 2.4s; }
.system-flow-svg.in-view .fb2 { transition-delay: 2.6s; }

@media (max-width: 1024px) {
  .system-flow { overflow-x: auto; }
  .system-flow-svg { min-width: 1020px; }
}

/* ---- AXO EXPLODED FIGURE ---- */
.axo-figure { margin: 64px auto; max-width: 700px; }
.axo-svg { width: 100%; height: auto; display: block; color: var(--ink); }
.axo-svg .slab {
  fill: rgba(248, 249, 251, 0.6);
  stroke: var(--ink);
  stroke-width: 1;
}
.axo-svg .leader, .axo-svg .grid-line, .axo-svg .unit-line, .axo-svg .corridor, .axo-svg .beam, .axo-svg .mep, .axo-svg .window {
  stroke: var(--ink);
  stroke-width: 1;
  fill: none;
}
.axo-svg .leader { stroke: var(--border); }
.axo-svg .grid-line { stroke: var(--accent); }
.axo-svg .corridor { stroke: var(--accent); stroke-width: 1.5; }
.axo-svg .column { fill: var(--accent); stroke: none; }
.axo-svg .layer-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  fill: var(--accent);
}
.axo-svg .layer-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  fill: var(--ink);
}
.axo-svg .layer-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.4px;
  fill: var(--muted);
}
.axo-svg .grid-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  fill: var(--accent);
  text-anchor: middle;
}
.axo-svg .axo-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--accent);
  text-anchor: end;
}
.axo-svg .axo-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1px;
  fill: var(--muted);
  text-anchor: end;
}

/* Axo collapse → expand on scroll-in */
.axo-svg .axo-layer { transition: transform 0.8s ease-out; }
.axo-svg .al5 { transform: translateY(220px); }
.axo-svg .al4 { transform: translateY(110px); transition-delay: 0.05s; }
.axo-svg .al3 { transform: translateY(0); transition-delay: 0.10s; }
.axo-svg .al2 { transform: translateY(-110px); transition-delay: 0.15s; }
.axo-svg .al1 { transform: translateY(-220px); transition-delay: 0.20s; }
.axo-svg.in-view .axo-layer { transform: translateY(0); }

/* ---- CORRIDOR NATIVE SVG ---- */
.corridor-figure { margin: 48px auto 0; max-width: 1100px; }
.corridor-native-svg { width: 100%; height: auto; display: block; color: #fff; overflow: visible; }
.corridor-native-svg .zone-box { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 1; }
.corridor-native-svg .zone-label,
.corridor-native-svg .cn-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  fill: rgba(255,255,255,0.55);
}
.corridor-native-svg .rail-line-cn { stroke: var(--accent-light); stroke-width: 2; fill: none; }
.corridor-native-svg .tie-cn { stroke: rgba(255,255,255,0.4); stroke-width: 1; }
.corridor-native-svg .station-box { fill: var(--dark); stroke: var(--accent-light); stroke-width: 2; }
.corridor-native-svg .station-name-cn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  fill: #fff;
  text-transform: uppercase;
}
.corridor-native-svg .site-bldg {
  fill: var(--accent-light);
  stroke: none;
  transform-origin: bottom;
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 0.8s ease-out;
}
.corridor-native-svg.in-view .site-bldg { transform: scaleY(1); }
.corridor-native-svg.in-view .s1 .site-bldg { transition-delay: 0.2s; }
.corridor-native-svg.in-view .s2 .site-bldg { transition-delay: 0.4s; }
.corridor-native-svg.in-view .s3 .site-bldg { transition-delay: 0.6s; }
.corridor-native-svg.in-view .s4 .site-bldg { transition-delay: 0.8s; }
.corridor-native-svg .site-data {
  fill: rgba(255,255,255,0.7);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.6px;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.corridor-native-svg.in-view .site-data { opacity: 1; }
.corridor-native-svg.in-view .s1 .site-data { transition-delay: 1.0s; }
.corridor-native-svg.in-view .s2 .site-data { transition-delay: 1.2s; }
.corridor-native-svg.in-view .s3 .site-data { transition-delay: 1.4s; }
.corridor-native-svg.in-view .s4 .site-data { transition-delay: 1.6s; }
.corridor-native-svg .train {
  fill: rgba(255,255,255,0.3);
  animation: trainSlide 40s linear infinite;
}
@keyframes trainSlide {
  from { transform: translateX(60px); }
  to   { transform: translateX(1060px); }
}
.corridor-native-svg .cn-north line,
.corridor-native-svg .cn-north polyline,
.corridor-native-svg .cn-scale line {
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1;
  fill: none;
}

/* ---- BUILDING VIEWS (4-stack, replaces platform-lifecycle.jpg) ---- */
.building-views { margin: 0 auto 48px; max-width: 600px; }
.building-views-svg { width: 100%; height: auto; display: block; color: var(--ink); }
.building-views-svg .bv-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--accent);
}
.building-views-svg .bv-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  fill: var(--ink);
}
.building-views-svg .bv-data {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.5px;
  fill: var(--muted);
}
.building-views-svg .bv-bldg,
.building-views-svg .bv-bldg-articulated {
  fill: var(--paper-cool);
  stroke: var(--ink);
  stroke-width: 1;
}
.building-views-svg .bv-bldg-pending {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
.building-views-svg .bv-courtyard {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}
.building-views-svg .bv-sep {
  stroke: var(--ink);
  stroke-width: 0.5;
  fill: none;
}
.building-views-svg .bv-zlbl {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  fill: var(--accent);
}
.building-views-svg .bv-rule {
  stroke: var(--border);
  stroke-width: 1;
}
.building-views-svg .bv-setback,
.building-views-svg .bv-limit {
  stroke: var(--accent);
  stroke-width: 1;
  fill: none;
}
.building-views-svg .bv-hatch {
  color: var(--accent);
  stroke-width: 1;
}
.building-views-svg .bv-progress-edge {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.building-views-svg .bv-bar-track {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}
.building-views-svg .bv-bar-fill { fill: var(--accent); }

/* In dark sections, building views invert tones (slabs become light cards on dark page) */
.section.dark .building-views-svg { color: rgba(255,255,255,0.92); }
.section.dark .building-views-svg .bv-num { fill: var(--accent-light); }
.section.dark .building-views-svg .bv-title { fill: #fff; }
.section.dark .building-views-svg .bv-data { fill: rgba(255,255,255,0.55); }
.section.dark .building-views-svg .bv-bldg,
.section.dark .building-views-svg .bv-bldg-articulated {
  fill: rgba(255,255,255,0.96);
  stroke: rgba(255,255,255,0.85);
}
.section.dark .building-views-svg .bv-sep { stroke: rgba(0,0,0,0.5); }
.section.dark .building-views-svg .bv-zlbl { fill: var(--accent-light); }
.section.dark .building-views-svg .bv-rule { stroke: rgba(255,255,255,0.15); }

/* Building-views reveal sequentially */
.building-views-svg .bv-view {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.building-views-svg.in-view .bv-view { opacity: 1; }
.building-views-svg.in-view .bv1 { transition-delay: 0.0s; }
.building-views-svg.in-view .bv2 { transition-delay: 0.3s; }
.building-views-svg.in-view .bv3 { transition-delay: 0.6s; }
.building-views-svg.in-view .bv4 { transition-delay: 0.9s; }

/* ---- SYSTEM ARCHITECTURE 10-UNIT MAP ---- */
.system-arch-diagram {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.section.dark .system-arch-diagram { border-top-color: rgba(255,255,255,0.15); }
.system-arch-svg { width: 100%; height: auto; display: block; overflow: visible; }
.system-arch-svg .arch-input-box {
  fill: var(--tag-bg);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.section.dark .system-arch-svg .arch-input-box {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.25);
}
.system-arch-svg .arch-input-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  fill: var(--muted);
}
.section.dark .system-arch-svg .arch-input-text { fill: rgba(255,255,255,0.7); }

.system-arch-svg .arch-box.active {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.system-arch-svg .arch-box.future {
  fill: var(--paper-cool);
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .system-arch-svg .arch-box.active {
  fill: rgba(255,255,255,0.96);
  stroke: var(--accent-light);
  stroke-width: 1.5;
}
.section.dark .system-arch-svg .arch-box.future {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.4);
}
.system-arch-svg .arch-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  fill: var(--accent);
}
.system-arch-svg .arch-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  fill: var(--ink);
}
.system-arch-svg .arch-desc {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.4px;
  fill: var(--muted);
}
.system-arch-svg .arch-input-conn,
.system-arch-svg .arch-conn,
.system-arch-svg .arch-feedback {
  fill: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-arch-svg .arch-input-conn { stroke: var(--muted); stroke-width: 1; }
.system-arch-svg .arch-conn { stroke: var(--accent); stroke-width: 1.5; }
.system-arch-svg .arch-feedback { stroke: var(--muted); stroke-width: 1; }
.system-arch-svg.in-view .arch-input-conn,
.system-arch-svg.in-view .arch-conn,
.system-arch-svg.in-view .arch-feedback { opacity: 1; }
.system-arch-svg.in-view .arch-input-conn { transition-delay: 0.4s; }
.system-arch-svg.in-view .arch-conn { transition-delay: 1.4s; }
.section.dark .system-arch-svg .arch-conn { stroke: var(--accent-light); }
.section.dark .system-arch-svg .arch-feedback { stroke: rgba(255,255,255,0.4); }
.section.dark .system-arch-svg .arch-input-conn { stroke: rgba(255,255,255,0.4); }
.system-arch-svg.in-view .arch-feedback { transition-delay: 2.4s; }

.system-arch-svg .arch-guard {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-arch-svg.in-view .arch-guard { opacity: 1; transition-delay: 1.8s; }
.system-arch-svg .arch-guard-box {
  fill: rgba(26,82,118,0.08);
  stroke: var(--accent);
  stroke-width: 1;
}
.section.dark .system-arch-svg .arch-guard-box {
  fill: rgba(255,255,255,0.04);
  stroke: var(--accent-light);
}
.system-arch-svg .arch-guard-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  fill: var(--accent);
}
.section.dark .system-arch-svg .arch-guard-text { fill: var(--accent-light); }

.system-arch-svg .arch-feedback-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.section.dark .system-arch-svg .arch-feedback-label { fill: rgba(255,255,255,0.55); }
.system-arch-svg.in-view .arch-feedback-label { opacity: 1; transition-delay: 2.8s; }

.system-arch-svg .arch-input,
.system-arch-svg .arch-node {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.system-arch-svg.in-view .arch-input,
.system-arch-svg.in-view .arch-node { opacity: 1; transform: translateY(0); }
.system-arch-svg.in-view .ai1 { transition-delay: 0.0s; }
.system-arch-svg.in-view .ai2 { transition-delay: 0.2s; }
.system-arch-svg.in-view .ai3 { transition-delay: 0.4s; }
.system-arch-svg.in-view .an-scan     { transition-delay: 0.7s; }
.system-arch-svg.in-view .an-classify { transition-delay: 0.9s; }
.system-arch-svg.in-view .an-enrich   { transition-delay: 1.1s; }
.system-arch-svg.in-view .an-match    { transition-delay: 1.5s; }
.system-arch-svg.in-view .an-model    { transition-delay: 1.7s; }
.system-arch-svg.in-view .an-reach    { transition-delay: 2.1s; }
.system-arch-svg.in-view .an-package  { transition-delay: 2.3s; }
.system-arch-svg.in-view .an-learn    { transition-delay: 2.6s; }

@media (max-width: 1024px) {
  .system-arch-diagram { overflow-x: auto; }
  .system-arch-svg { min-width: 1100px; }
}

/* ---- 5-LAYER KNOWLEDGE STACK ---- */
.knowledge-stack-wrap { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--ink); }
.section.dark .knowledge-stack-wrap { border-top-color: rgba(255,255,255,0.15); }
.knowledge-stack { display: flex; flex-direction: column; }
.knowledge-layer {
  display: grid;
  grid-template-columns: 64px 1fr 240px;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  border-left: 3px solid var(--accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.knowledge-stack.in-view .knowledge-layer { opacity: 1; transform: translateY(0); }
/* bottom-to-top reveal */
.knowledge-stack.in-view .kl5 { transition-delay: 0.0s; }
.knowledge-stack.in-view .kl4 { transition-delay: 0.2s; }
.knowledge-stack.in-view .kl3 { transition-delay: 0.4s; }
.knowledge-stack.in-view .kl2 { transition-delay: 0.6s; }
.knowledge-stack.in-view .kl1 { transition-delay: 0.8s; }

.knowledge-layer.layer-1 { background: var(--tag-bg); height: 60px; }
.knowledge-layer.layer-2 { background: var(--accent-light); height: 70px; }
.knowledge-layer.layer-3 { background: var(--accent); color: #fff; height: 80px; border-left-color: #fafaf8; }
.knowledge-layer.layer-4 { background: var(--dark); color: #fff; height: 90px; border-left-color: var(--accent); }
.knowledge-layer.layer-5 { background: var(--dark); color: rgba(255,255,255,0.5); height: 80px; border: 1px dashed var(--accent); border-left: 1px dashed var(--accent); }

.kl-icon {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--accent);
}
.layer-3 .kl-icon { color: #fff; }
.layer-4 .kl-icon { color: #fff; }
.layer-5 .kl-icon { color: var(--accent-light); }

.kl-content { line-height: 1.4; }
.kl-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.layer-3 .kl-num,
.layer-4 .kl-num { color: #fff; }
.layer-5 .kl-num { color: rgba(255,255,255,0.5); }
.kl-desc {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--muted);
}
.layer-3 .kl-desc { color: rgba(255,255,255,0.85); }
.layer-4 .kl-desc { color: rgba(255,255,255,0.7); }
.layer-5 .kl-desc { color: rgba(255,255,255,0.45); }
.kl-status {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.layer-3 .kl-status,
.layer-4 .kl-status { color: #fff; }
.layer-5 .kl-status { color: rgba(255,255,255,0.5); }

@media (max-width: 768px) {
  .knowledge-layer {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    height: auto !important;
    padding: 16px 20px;
    gap: 12px;
  }
  .kl-status { grid-column: 1 / -1; text-align: left; }
}

/* ---- TYPEWRITER (accent band v5) ---- */
.accent-band-inner .tw-line {
  font-weight: 500;
  white-space: pre;
}
.accent-band-inner [data-counter] { display: none; }

/* ---- CALLOUT LEGIBILITY (verify v3 fix, bump weight) ---- */
.callout {
  background: var(--accent);
  border-left: 3px solid rgba(255,255,255,0.3);
  padding: 24px 32px;
  margin: 48px 0 0;
  max-width: 800px;
  color: #fff;
}
.callout p {
  margin-bottom: 0;
  max-width: none;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

/* ============================================================
   v6 — Realistic LA hero · financial rail · 3D corridor
   · 10-unit system arch · 5-layer knowledge stack · market map
   ============================================================ */

/* ---- HERO: realistic LA street network + callout boxes ---- */
.hero-svg .street-ns,
.hero-svg .street-ew {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.55;
}
.hero-svg .street-ew.major { stroke-width: 1.5; opacity: 0.75; }
.hero-svg .street-ns.curve { stroke: var(--accent); stroke-width: 1; opacity: 0.55; fill: none; }
.hero-svg .street-diag { stroke: var(--accent); stroke-width: 1; opacity: 0.45; }

.hero-svg .street-label {
  fill: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.hero-svg .street-label.major { fill: rgba(255,255,255,0.65); font-size: 9px; }
.hero-svg .street-label.diag { fill: rgba(255,255,255,0.5); }

/* Callout box (replaces v5 plain text) */
.hero-svg .callout-bg {
  fill: var(--dark);
  stroke: var(--accent);
  stroke-width: 1;
}
.hero-svg .callout-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.hero-svg .callout-leader {
  stroke: var(--accent-light);
  stroke-width: 0.8;
  opacity: 0.7;
  fill: none;
}

/* Faster parcel staggers (0.2s) — override v5's 0.3s */
.hero-svg.in-view .parcel-group.p1 { animation-delay: 0.0s; }
.hero-svg.in-view .parcel-group.p2 { animation-delay: 0.2s; }
.hero-svg.in-view .parcel-group.p3 { animation-delay: 0.4s; }
.hero-svg.in-view .parcel-group.p4 { animation-delay: 0.6s; }
.hero-svg.in-view .parcel-group.p5 { animation-delay: 0.8s; }
.hero-svg.in-view .parcel-group.p6 { animation-delay: 1.0s; }
.hero-svg.in-view .parcel-group.p7 { animation-delay: 1.2s; }
.hero-svg.in-view .parcel-group.p8 { animation-delay: 1.4s; }

/* Faster scan: 4s instead of 6s */
.hero-svg.in-view .scan-line-group { animation: heroScan 4s linear infinite; }

/* Pulse stroke oscillation 1px ↔ 1.5px on 2s loop (replaces v5's 3s combined pulse) */
.hero-svg.in-view .parcel { animation: parcelPulseV6 2s ease-in-out infinite; }
@keyframes parcelPulseV6 {
  0%, 100% { fill-opacity: 0.45; stroke-width: 1; }
  50%      { fill-opacity: 0.30; stroke-width: 1.5; }
}

/* Override v3.1 .hero-svg .parcel rule (remove animation declaration) */
.hero-svg .parcel { animation: none; }

/* ---- SYSTEM FLOW v6: financial rail + ACTUALS box ---- */

/* Vertical rail-links from main row down to financial rail */
.system-flow-svg .rail-link {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.system-flow-svg .rail-link.primary { stroke: var(--accent); stroke-width: 2; }
.system-flow-svg.in-view .rail-link { opacity: 1; transition-delay: 2.2s; }

/* Financial rail (PROJECTED/ACTUAL two-state) */
.system-flow-svg .financial-rail {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-flow-svg.in-view .financial-rail { opacity: 1; transition-delay: 2.5s; }
.system-flow-svg .rail-projected {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-actual {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-divider {
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.system-flow-svg .rail-title {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
}
.system-flow-svg .rail-zone-l {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.system-flow-svg .rail-zone-r {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}

/* DELIVERY → ACTUALS arrow */
.system-flow-svg .delivery-down {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-flow-svg.in-view .delivery-down { opacity: 1; transition-delay: 2.8s; }

/* CONSTRUCTION ACTUALS box */
.system-flow-svg .actuals-box {
  fill: var(--accent);
  stroke: var(--accent);
}
.system-flow-svg .actuals-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.system-flow-svg .fb-actuals {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-flow-svg.in-view .fb-actuals { opacity: 1; transition-delay: 3.0s; }

/* ACTUALS → RAIL feedback arrow */
.system-flow-svg .actuals-feedback {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-flow-svg.in-view .actuals-feedback { opacity: 1; transition-delay: 3.3s; }

.system-flow-svg .feedback-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.system-flow-svg.in-view .feedback-label { opacity: 1; transition-delay: 3.5s; }

.system-flow-svg .flow-legend {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1px;
}

/* BIM input branched connectors */
.system-flow-svg .bim-link, .system-flow-svg .bim-link-back { fill: none; }

/* ---- CORRIDOR ISOMETRIC ---- */
.corridor-iso-svg {
  width: 100%;
  height: auto;
  display: block;
  color: #fff;
  overflow: visible;
}
.corridor-iso-svg .ctx-top {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.15);
  stroke-width: 1;
}
.corridor-iso-svg .ctx-side {
  fill: rgba(255,255,255,0.02);
  stroke: rgba(255,255,255,0.15);
  stroke-width: 1;
}
.corridor-iso-svg .zone-box {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 1;
}
.corridor-iso-svg .zone-label {
  fill: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.2px;
}
.corridor-iso-svg .wilshire {
  stroke: var(--accent-light);
  stroke-width: 2;
  fill: none;
}
.corridor-iso-svg .wilshire-label {
  fill: rgba(255,255,255,0.7);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.corridor-iso-svg .d-line {
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1;
  fill: none;
}
.corridor-iso-svg .d-line-label {
  fill: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.2px;
}
.corridor-iso-svg .station .st-top {
  fill: var(--accent-light);
  stroke: #fff;
  stroke-width: 1.5;
}
.corridor-iso-svg .station .st-side {
  fill: var(--dark);
  stroke: #fff;
  stroke-width: 1.5;
}
.corridor-iso-svg .station .st-label {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.corridor-iso-svg .dev-site .dv-top {
  fill: rgba(26,82,118,0.5);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.corridor-iso-svg .dev-site .dv-south {
  fill: rgba(26,82,118,0.30);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.corridor-iso-svg .dev-site .dv-east {
  fill: rgba(26,82,118,0.20);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.corridor-iso-svg .dev-site {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.corridor-iso-svg.in-view .dev-site { opacity: 1; transform: translateY(0); }
.corridor-iso-svg.in-view .ds1 { transition-delay: 0.4s; }
.corridor-iso-svg.in-view .ds2 { transition-delay: 0.6s; }
.corridor-iso-svg.in-view .ds3 { transition-delay: 0.8s; }
.corridor-iso-svg.in-view .ds4 { transition-delay: 1.0s; }
.corridor-iso-svg .ds-leader {
  stroke: var(--accent-light);
  stroke-width: 0.8;
  opacity: 0.6;
  fill: none;
}
.corridor-iso-svg .ds-callout-bg {
  fill: var(--dark);
  stroke: var(--accent-light);
  stroke-width: 1;
}
.corridor-iso-svg .ds-callout-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.corridor-iso-svg .cn-axis {
  fill: rgba(255,255,255,0.55);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
}
.corridor-iso-svg .cn-north line,
.corridor-iso-svg .cn-north polyline,
.corridor-iso-svg .cn-scale line {
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1;
  fill: none;
}
.corridor-iso-svg .cn-label {
  fill: rgba(255,255,255,0.55);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1px;
}

/* ---- AXO v6: refined isometric (override v4 layer transforms) ---- */
.axo-svg .slab {
  fill: rgba(248, 249, 251, 0.5);
  stroke: var(--ink);
  stroke-width: 1;
}
.axo-svg .mep-run { stroke: var(--accent); stroke-width: 1; fill: none; }
.axo-svg .corridor { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.axo-svg .unit-line { stroke: var(--ink); stroke-width: 1; fill: none; }
.axo-svg .unit-label {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.8px;
}
.axo-svg .window { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.axo-svg .wall-layer { stroke: var(--accent); stroke-width: 0.8; fill: none; }
.axo-svg .grid-col { fill: var(--accent); stroke: none; }

/* Axo v6 collapse → expand on scroll-in (override v4 pixel offsets) */
.axo-svg .al5 { transform: translateY(240px); }
.axo-svg .al4 { transform: translateY(120px); }
.axo-svg .al3 { transform: translateY(0); }
.axo-svg .al2 { transform: translateY(-120px); }
.axo-svg .al1 { transform: translateY(-240px); }
.axo-svg.in-view .al5,
.axo-svg.in-view .al4,
.axo-svg.in-view .al3,
.axo-svg.in-view .al2,
.axo-svg.in-view .al1 { transform: translateY(0); }

/* ---- LA MARKER (Metro D Line indicator) ---- */
.la-marker {
  display: inline-block;
  width: 60px;
  height: 12px;
  vertical-align: middle;
  margin-left: 8px;
  color: var(--accent);
  opacity: 0.6;
}
.section.dark .la-marker { color: var(--accent-light); opacity: 0.7; }

/* ---- US MARKET EXPANSION MAP ---- */
.market-map {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.market-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.market-map-svg {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
  background: var(--paper);
  padding: 32px;
  box-sizing: border-box;
  overflow: visible;
}
.market-map-svg .us-outline {
  fill: var(--paper-cool);
  stroke: var(--ink);
  stroke-width: 1;
}
.market-map-svg .market-dot {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.market-map-svg .market-dot.filled { fill: var(--accent); }
.market-map-svg .market-dot.small { stroke: var(--border); stroke-width: 1; }
.market-map-svg .market-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
}
.market-map-svg .market-text.active-label { fill: var(--accent); }
.market-map-svg .market {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.market-map-svg.in-view .market { opacity: 1; }
.market-map-svg.in-view .m-or { transition-delay: 0.0s; }
.market-map-svg.in-view .m-wa { transition-delay: 0.1s; }
.market-map-svg.in-view .m-la { transition-delay: 0.2s; }
.market-map-svg.in-view .m-ut { transition-delay: 0.4s; }
.market-map-svg.in-view .m-in { transition-delay: 0.6s; }
.market-map-svg.in-view .m-fl { transition-delay: 0.8s; }
.market-map-svg.in-view .m-ma { transition-delay: 1.0s; }

.market-narrative {
  max-width: 600px;
  margin: 32px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  text-align: left;
}
.market-legend {
  max-width: 800px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.legend-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.legend-icon.active { background: var(--accent); }
.legend-icon.validated { border: 1.5px solid var(--accent); }
.legend-icon.identified { border: 1px solid rgba(255,255,255,0.45); width: 6px; height: 6px; }
.legend-excluded {
  margin-top: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

/* ---- SYSTEM ARCHITECTURE v6: BIM input + FORM + LEARN at bottom ---- */
.system-arch-svg .arch-input.ai4 { /* BIM column */ }
.system-arch-svg .arch-guard-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.8px;
  fill: var(--accent);
}
.section.dark .system-arch-svg .arch-guard-sub { fill: var(--accent-light); }

.system-arch-svg.in-view .ai1 { transition-delay: 0.0s; }
.system-arch-svg.in-view .ai2 { transition-delay: 0.15s; }
.system-arch-svg.in-view .ai3 { transition-delay: 0.30s; }
.system-arch-svg.in-view .ai4 { transition-delay: 0.45s; }
.system-arch-svg.in-view .an-form { transition-delay: 1.9s; }
.system-arch-svg.in-view .an-guard { transition-delay: 1.7s; }

/* ---- KNOWLEDGE STACK v6: 5 layers, new heights, Layer 5 dashed top ---- */
.knowledge-layer.layer-1 { min-height: 64px; height: auto; }
.knowledge-layer.layer-2 { min-height: 72px; height: auto; }
.knowledge-layer.layer-3 { min-height: 80px; height: auto; }
.knowledge-layer.layer-4 {
  background: var(--dark);
  color: #fff;
  min-height: 88px;
  height: auto;
  border-left: 3px solid var(--accent);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}
.knowledge-layer.layer-5 {
  background: var(--dark);
  color: #fff;
  min-height: 88px;
  height: auto;
  border: 0;
  border-top: 1px dashed var(--accent);
  border-left: 3px solid var(--accent);
}
.layer-4 .kl-icon { color: #fff; }
.layer-5 .kl-icon { color: var(--accent-light); }
.layer-4 .kl-num,
.layer-5 .kl-num { color: #fff; }
.layer-4 .kl-desc,
.layer-5 .kl-desc { color: rgba(255,255,255,0.7); }
.layer-4 .kl-status,
.layer-5 .kl-status { color: #fff; }

/* ---- BUILDING VIEWS v6: BIM MODEL feed-in arrow on View 03 ---- */
.building-views-svg .bv-bim-label {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.building-views-svg .bv-bim-arrow,
.building-views-svg .bv-bim-arrow-tip {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
.section.dark .building-views-svg .bv-bim-label { fill: var(--accent-light); }
.section.dark .building-views-svg .bv-bim-arrow,
.section.dark .building-views-svg .bv-bim-arrow-tip { stroke: var(--accent-light); }

/* H2 with inline LA marker — keep marker baseline aligned */
h2 .la-marker { vertical-align: middle; opacity: 0.5; }

/* ============================================================
   v7 — Cleanup pass · realistic LA · GeoJSON US map
   · system-flow rail labels inside · clustered system arch
   · distinct platform lifecycle views · refined icons
   ============================================================ */

/* ---- HERO: re-add Olympic + 4 evenly-spaced E-W streets, drop Wilshire-major weight ---- */
.hero-svg .street-label.major { fill: rgba(255,255,255,0.65); font-size: 9px; }

/* ---- SYSTEM FLOW v7: rail labels inside, white text on darker zone ---- */
.system-flow-svg .rail-projected {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-actual {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-divider {
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
/* Title: dark text on the lighter half (it sits closer to PROJECTED side anchor) */
.system-flow-svg .rail-title {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
}
/* PROJECTED label inside the light-fill zone reads as muted */
.system-flow-svg .rail-zone-l {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
}
/* ACTUAL label sits inside the dark accent zone — white */
.system-flow-svg .rail-zone-r {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
}

/* ---- TRANSIT CORRIDOR v7: 1/2 mi radius — projected ground-plane circles, filled
   with a faint diagonal hatch (#zone-hatch) and outlined with a thin stroke. ---- */
.corridor-iso-svg .zone-circle {
  fill: url(#zone-hatch);
  stroke: var(--accent);
  stroke-opacity: 0.30;
  stroke-width: 1;
}

/* ---- USA MAP v7: real GeoJSON state outlines on dark background ---- */
.market-map {
  background: var(--dark);
  padding: 40px;
  overflow: visible;
}
.market-map-svg {
  background: var(--dark);
  padding: 0;
  max-width: 900px;
  overflow: visible;
}
.market-map-svg .us-states .state-path {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.30);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.market-map-svg .market-dot {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.market-map-svg .market-dot.filled { fill: var(--accent); stroke: var(--accent); }
.market-map-svg .market-dot.small { stroke: rgba(255,255,255,0.4); stroke-width: 1; }
.market-map-svg .market-text {
  fill: rgba(255,255,255,0.7);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
}
.market-map-svg .market-text.active-label { fill: #fff; }

/* ---- PLATFORM LIFECYCLE v7: distinct views (table, building, plan, gantt) ---- */
.building-views-svg .bv-tbl {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1;
}
.section.dark .building-views-svg .bv-tbl {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.7);
}
.building-views-svg .bv-tbl-row,
.building-views-svg .bv-tbl-col {
  stroke: rgba(255,255,255,0.3);
  stroke-width: 0.8;
}
.section.dark .building-views-svg .bv-tbl-row,
.section.dark .building-views-svg .bv-tbl-col {
  stroke: rgba(255,255,255,0.25);
}
.building-views-svg .bv-tbl-l {
  fill: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.building-views-svg .bv-tbl-r {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.building-views-svg .bv-tbl-l.total,
.building-views-svg .bv-tbl-r.total {
  fill: var(--accent-light);
  font-weight: 700;
}
.building-views-svg .bv-tbl-foot {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
/* Right-side label set (replaces bv-zlbl on its right edge for views 2-3) */
.building-views-svg .bv-zlbl-r {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.building-views-svg .bv-corridor {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.45);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.building-views-svg .bv-partition {
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1;
  fill: none;
}
.building-views-svg .bv-courtyard-label {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.8px;
}
.building-views-svg .bv-gantt-track {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1;
}
.building-views-svg .bv-gantt-fill {
  color: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.building-views-svg .bv-gantt-div {
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.building-views-svg .bv-gantt-lbl {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
}
.building-views-svg .bv-gantt-lbl.future { fill: rgba(255,255,255,0.45); }
.building-views-svg .bv-gantt-status {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
}
.building-views-svg .bv-gantt-status.pending { fill: rgba(255,255,255,0.4); }

/* ---- SYSTEM ARCHITECTURE v7: clusters + larger GUARD + BIM bridge ---- */
.system-arch-svg .cluster-box {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 1;
}
.section.dark .system-arch-svg .cluster-box { stroke: rgba(255,255,255,0.25); }
.system-arch-svg .cluster-label {
  fill: rgba(255,255,255,0.55);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.section.dark .system-arch-svg .cluster-label { fill: rgba(255,255,255,0.55); }

.system-arch-svg .unit-box.active {
  fill: rgba(255,255,255,0.96);
  stroke: var(--accent-light);
  stroke-width: 1.5;
}
.system-arch-svg .unit-box.future {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.45);
  stroke-width: 1;
}
.section.dark .system-arch-svg .unit-box.active {
  fill: rgba(255,255,255,0.96);
  stroke: var(--accent-light);
}
.section.dark .system-arch-svg .unit-box.future {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.45);
}
.system-arch-svg .unit-name {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
}
.system-arch-svg .unit-box.future + .unit-name,
.system-arch-svg .arch-unit:has(.unit-box.future) .unit-name {
  fill: rgba(255,255,255,0.7);
}
/* Fallback for browsers without :has — apply via class */
.section.dark .system-arch-svg .arch-cluster.bridge .unit-name,
.section.dark .system-arch-svg .arch-cluster.feedback .unit-name { fill: rgba(255,255,255,0.7); }
.section.dark .system-arch-svg .arch-cluster.intel .arch-unit:nth-child(2) .unit-name,
.section.dark .system-arch-svg .arch-cluster.intel .arch-unit:nth-child(4) .unit-name { fill: rgba(255,255,255,0.7); }
.system-arch-svg .unit-desc {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.section.dark .system-arch-svg .arch-cluster.bridge .unit-desc,
.section.dark .system-arch-svg .arch-cluster.feedback .unit-desc { fill: rgba(255,255,255,0.55); }

.system-arch-svg .unit-flow {
  stroke: var(--accent-light);
  stroke-width: 1.5;
  fill: none;
}
.system-arch-svg .arch-conn {
  stroke: var(--accent-light);
  stroke-width: 1.5;
  fill: none;
}
.system-arch-svg .arch-input-conn {
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1;
  fill: none;
}
/* BIM bridge — thicker, more prominent */
.system-arch-svg .arch-bim-link {
  stroke: var(--accent-light);
  stroke-width: 2;
  fill: none;
}
.system-arch-svg .arch-bim-label {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
}

/* GUARD compliance band — larger title text, better contrast */
.system-arch-svg .arch-guard-box {
  fill: rgba(255,255,255,0.04);
  stroke: var(--accent-light);
  stroke-width: 1;
}
.system-arch-svg .arch-guard-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
}
.system-arch-svg .arch-guard-sub {
  fill: rgba(255,255,255,0.7);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
}

/* Feedback loop on right margin */
.system-arch-svg .arch-feedback-loop {
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1;
  fill: none;
}
.system-arch-svg .arch-feedback-label {
  fill: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
}

/* In light section (Moat lives in light section), invert backgrounds for cluster-box defaults */
.system-arch-svg .arch-cluster .unit-box.active { fill: var(--paper-cool); stroke: var(--accent); stroke-width: 1.5; }
.system-arch-svg .arch-cluster .unit-box.future { fill: var(--paper); stroke: var(--border); stroke-width: 1; }
.system-arch-svg .cluster-box { stroke: var(--border); }
.system-arch-svg .cluster-label { fill: var(--muted); }
.system-arch-svg .unit-name { fill: var(--ink); }
.system-arch-svg .unit-desc { fill: var(--muted); }
.system-arch-svg .arch-conn,
.system-arch-svg .unit-flow { stroke: var(--accent); }
.system-arch-svg .arch-input-conn { stroke: var(--muted); }
.system-arch-svg .arch-bim-link { stroke: var(--accent); }
.system-arch-svg .arch-bim-label { fill: var(--accent); }
.system-arch-svg .arch-guard-box { fill: rgba(26,82,118,0.08); stroke: var(--accent); }
.system-arch-svg .arch-guard-text { fill: var(--accent); }
.system-arch-svg .arch-guard-sub { fill: var(--muted); }
.system-arch-svg .arch-feedback-loop { stroke: var(--muted); }
.system-arch-svg .arch-feedback-label { fill: var(--accent); }

/* In dark sections, override the above overrides for legibility */
.section.dark .system-arch-svg .cluster-box { stroke: rgba(255,255,255,0.25); }
.section.dark .system-arch-svg .cluster-label { fill: rgba(255,255,255,0.55); }
.section.dark .system-arch-svg .unit-name { fill: var(--ink); }
.section.dark .system-arch-svg .unit-desc { fill: var(--muted); }
.section.dark .system-arch-svg .arch-conn,
.section.dark .system-arch-svg .unit-flow { stroke: var(--accent-light); }
.section.dark .system-arch-svg .arch-input-conn { stroke: rgba(255,255,255,0.5); }
.section.dark .system-arch-svg .arch-bim-link { stroke: var(--accent-light); }
.section.dark .system-arch-svg .arch-bim-label { fill: var(--accent-light); }
.section.dark .system-arch-svg .arch-guard-box { fill: rgba(255,255,255,0.04); stroke: var(--accent-light); }
.section.dark .system-arch-svg .arch-guard-text { fill: #fff; }
.section.dark .system-arch-svg .arch-guard-sub { fill: rgba(255,255,255,0.7); }
.section.dark .system-arch-svg .arch-feedback-loop { stroke: rgba(255,255,255,0.55); }
.section.dark .system-arch-svg .arch-feedback-label { fill: var(--accent-light); }

/* OWNER RECORDS / MARKET FEEDS / BIM input boxes — same look in light or dark */
.system-arch-svg .arch-input-box {
  fill: var(--tag-bg);
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .system-arch-svg .arch-input-box {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.25);
}
.system-arch-svg .arch-input-box.bim {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .system-arch-svg .arch-input-box.bim { stroke: var(--accent-light); }
.system-arch-svg .arch-input-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.section.dark .system-arch-svg .arch-input-text { fill: rgba(255,255,255,0.7); }

/* Prevent overflow when the wider 1280-viewbox SVG runs past container */
@media (max-width: 1024px) {
  .system-arch-diagram { overflow-x: auto; }
  .system-arch-svg { min-width: 1100px; }
}

/* ============================================================
   v8 — Hero callout column · system flow rework · isometric
   radius ellipses · proportional US dots · platform lifecycle
   hybrid · clustered system arch · knowledge stack accordion
   ============================================================ */

/* ---- HERO: stacked callout column on right ---- */
/* Existing .callout-bg / .callout-text / .callout-leader from earlier versions are reused.
   No new styles needed since boxes use the same look (var(--dark) bg, var(--accent) border, white text). */

/* ---- SYSTEM FLOW v8 ---- */

/* BIM input-box accent treatment */
.system-flow-svg .input-box.bim {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.system-flow-svg .input-conn.bim-feed {
  stroke: var(--accent);
  stroke-width: 2;
}

/* Market data fan branches */
.system-flow-svg .ic2-trunk,
.system-flow-svg .ic2-fan-l,
.system-flow-svg .ic2-fan-c,
.system-flow-svg .ic2-fan-r {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}

/* BIM/DESIGN DATA hub node — slightly emphasized */
.system-flow-svg .main-box.hub {
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* Financial rail v8: WHITE text inside both halves, both labels centered with consistent padding */
.system-flow-svg .rail-projected {
  fill: rgba(26,82,118,0.55);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-actual {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.system-flow-svg .rail-divider {
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1;
}
.system-flow-svg .rail-half-title {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
}
.system-flow-svg .rail-half-sub {
  fill: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* The fork — actuals refine projections */
.system-flow-svg .fork-trunk,
.system-flow-svg .fork-left,
.system-flow-svg .fork-right {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
.system-flow-svg .fork-label {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
}

.system-flow-svg .actuals-return {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.system-flow-svg .actuals-return-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.8px;
}

/* ---- US MARKET MAP v8: proportional translucent circles ---- */
.market-map-svg .market-circle {
  fill: rgba(26,82,118,0.25);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.market-map-svg .market-circle.outline {
  fill: none;
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1;
}
.market-map-svg .market-circle.filled {
  fill: rgba(26,82,118,0.25);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.market-map-svg .market-circle.filled.active {
  fill: rgba(26,82,118,0.35);
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* ---- PLATFORM LIFECYCLE HYBRID v8 ---- */
.lifecycle-hybrid {
  margin: 0 auto 48px;
  max-width: 1200px;
}
.lifecycle-hybrid-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.lifecycle-hybrid-svg .lh-input-box {
  fill: var(--tag-bg);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.section.dark .lifecycle-hybrid-svg .lh-input-box {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.30);
}
.lifecycle-hybrid-svg .lh-input-box.bim {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .lifecycle-hybrid-svg .lh-input-box.bim {
  stroke: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-input-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.section.dark .lifecycle-hybrid-svg .lh-input-text { fill: rgba(255,255,255,0.7); }

.lifecycle-hybrid-svg .lh-input-conn {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.section.dark .lifecycle-hybrid-svg .lh-input-conn {
  stroke: rgba(255,255,255,0.4);
}

.lifecycle-hybrid-svg .lh-main-box {
  fill: var(--paper-cool);
  stroke: var(--ink);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-main-box {
  fill: rgba(255,255,255,0.96);
  stroke: rgba(255,255,255,0.85);
}
.lifecycle-hybrid-svg .lh-main-box.hub {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .lifecycle-hybrid-svg .lh-main-box.hub {
  stroke: var(--accent-light);
  stroke-width: 1.5;
}
.lifecycle-hybrid-svg .lh-num {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.lifecycle-hybrid-svg .lh-name {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
}
.lifecycle-hybrid-svg .lh-sub {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.4px;
}

.lifecycle-hybrid-svg .lh-conn {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.section.dark .lifecycle-hybrid-svg .lh-conn {
  stroke: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-conn.thin { stroke-width: 1; }

.lifecycle-hybrid-svg .lh-rail-link {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.lifecycle-hybrid-svg .lh-rail-link.primary {
  stroke: var(--accent);
  stroke-width: 2;
}
.section.dark .lifecycle-hybrid-svg .lh-rail-link {
  stroke: rgba(255,255,255,0.4);
}
.section.dark .lifecycle-hybrid-svg .lh-rail-link.primary {
  stroke: var(--accent-light);
}

.lifecycle-hybrid-svg .lh-rail-fm {
  fill: rgba(26,82,118,0.55);
  stroke: var(--accent);
  stroke-width: 1;
}
.lifecycle-hybrid-svg .lh-rail-cd {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.lifecycle-hybrid-svg .lh-rail-divider {
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1;
}
.lifecycle-hybrid-svg .lh-rail-title {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
}
.lifecycle-hybrid-svg .lh-rail-sub {
  fill: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.lifecycle-hybrid-svg .lh-delivery-down {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.section.dark .lifecycle-hybrid-svg .lh-delivery-down {
  stroke: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-actuals-box {
  fill: var(--accent);
  stroke: var(--accent);
}
.lifecycle-hybrid-svg .lh-actuals-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.lifecycle-hybrid-svg .lh-actuals-return {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.section.dark .lifecycle-hybrid-svg .lh-actuals-return {
  stroke: rgba(255,255,255,0.55);
}
.lifecycle-hybrid-svg .lh-return-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.section.dark .lifecycle-hybrid-svg .lh-return-label {
  fill: rgba(255,255,255,0.7);
}

.lifecycle-hybrid-svg .lh-separator {
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-separator {
  stroke: rgba(255,255,255,0.2);
}
.lifecycle-hybrid-svg .lh-section-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
}
.section.dark .lifecycle-hybrid-svg .lh-section-label {
  fill: rgba(255,255,255,0.55);
}

/* Mini phase outputs */
.lifecycle-hybrid-svg .lh-mini-num {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-num {
  fill: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-mini-title {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-title {
  fill: #fff;
}
.lifecycle-hybrid-svg .lh-mini-foot {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-foot {
  fill: rgba(255,255,255,0.55);
}

/* Mini #1 financial table */
.lifecycle-hybrid-svg .lh-mini-tbl {
  fill: rgba(255,255,255,0.04);
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-tbl {
  stroke: rgba(255,255,255,0.4);
}
.lifecycle-hybrid-svg .lh-mini-row,
.lifecycle-hybrid-svg .lh-mini-col {
  stroke: var(--border);
  stroke-width: 0.8;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-row,
.section.dark .lifecycle-hybrid-svg .lh-mini-col {
  stroke: rgba(255,255,255,0.25);
}
.lifecycle-hybrid-svg .lh-mini-tbl-l {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
}
.lifecycle-hybrid-svg .lh-mini-tbl-r {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-tbl-l,
.section.dark .lifecycle-hybrid-svg .lh-mini-tbl-r { fill: #fff; }
.lifecycle-hybrid-svg .lh-mini-tbl-l.total,
.lifecycle-hybrid-svg .lh-mini-tbl-r.total {
  fill: var(--accent);
  font-weight: 700;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-tbl-l.total,
.section.dark .lifecycle-hybrid-svg .lh-mini-tbl-r.total {
  fill: var(--accent-light);
}

/* Mini #2 regulatory */
.lifecycle-hybrid-svg .lh-mini-bldg {
  fill: rgba(255,255,255,0.04);
  stroke: var(--ink);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-bldg {
  fill: rgba(255,255,255,0.96);
  stroke: rgba(255,255,255,0.85);
}
.lifecycle-hybrid-svg .lh-mini-floor {
  stroke: var(--ink);
  stroke-width: 0.8;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-floor {
  stroke: rgba(0,0,0,0.5);
}
.lifecycle-hybrid-svg .lh-mini-limit,
.lifecycle-hybrid-svg .lh-mini-setback {
  stroke: var(--accent);
  stroke-width: 1;
  fill: none;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-limit,
.section.dark .lifecycle-hybrid-svg .lh-mini-setback {
  stroke: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-mini-zlbl {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-zlbl {
  fill: var(--accent-light);
}

/* Mini #3 design floor plan */
.lifecycle-hybrid-svg .lh-mini-corr {
  fill: rgba(255,255,255,0.05);
  stroke: var(--accent);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-corr {
  fill: rgba(255,255,255,0.06);
  stroke: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-mini-part {
  stroke: var(--ink);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-part {
  stroke: rgba(0,0,0,0.6);
}
.lifecycle-hybrid-svg .lh-mini-court {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-court {
  stroke: var(--accent-light);
}

/* Mini #4 construction progress bar */
.lifecycle-hybrid-svg .lh-mini-bar-track {
  fill: rgba(255,255,255,0.05);
  stroke: var(--ink);
  stroke-width: 1;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-bar-track {
  stroke: rgba(255,255,255,0.7);
}
.lifecycle-hybrid-svg .lh-mini-bar-fill {
  color: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.lifecycle-hybrid-svg .lh-mini-bar-edge {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.lifecycle-hybrid-svg .lh-mini-bar-pct {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-bar-pct {
  fill: var(--accent-light);
}
.lifecycle-hybrid-svg .lh-mini-bar-rem {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.8px;
}
.section.dark .lifecycle-hybrid-svg .lh-mini-bar-rem {
  fill: rgba(255,255,255,0.55);
}

@media (max-width: 1024px) {
  .lifecycle-hybrid { overflow-x: auto; }
  .lifecycle-hybrid-svg { min-width: 1100px; }
}

/* ---- SYSTEM ARCH v8: cluster colors (teal/blue/amber/purple) ---- */
.system-arch-svg .arch-input-box.bim {
  stroke: var(--accent);
  stroke-width: 2;
}
.section.dark .system-arch-svg .arch-input-box.bim {
  stroke: var(--accent-light);
  stroke-width: 2;
}
.system-arch-svg .arch-input-text.bim {
  fill: var(--accent);
}
.section.dark .system-arch-svg .arch-input-text.bim {
  fill: var(--accent-light);
}

.system-arch-svg .arch-bim-link {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
}
.section.dark .system-arch-svg .arch-bim-link {
  stroke: var(--accent-light);
}

/* INTELLIGENCE cluster — teal */
.system-arch-svg .intel-box {
  stroke: #1a7a5c;
  stroke-width: 1.5;
}
.system-arch-svg .intel-label {
  fill: #1a7a5c;
}

/* ANALYSIS cluster — blue */
.system-arch-svg .analysis-box {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.system-arch-svg .analysis-label {
  fill: var(--accent);
}
.section.dark .system-arch-svg .analysis-label {
  fill: var(--accent-light);
}

/* OUTPUT cluster — amber */
.system-arch-svg .output-box {
  stroke: #a67c28;
  stroke-width: 1.5;
}
.system-arch-svg .output-label {
  fill: #a67c28;
}

/* FEEDBACK cluster — muted gray */
.system-arch-svg .feedback-box {
  stroke: var(--muted);
  stroke-width: 1;
}
.system-arch-svg .feedback-label {
  fill: var(--muted);
}
.section.dark .system-arch-svg .feedback-label {
  fill: rgba(255,255,255,0.55);
}

/* GUARD bar — purple */
.system-arch-svg .arch-guard-box {
  fill: rgba(107,62,140,0.12);
  stroke: #6b3e8c;
  stroke-width: 1.5;
}
.section.dark .system-arch-svg .arch-guard-box {
  fill: rgba(107,62,140,0.30);
  stroke: #b491cd;
  stroke-width: 1.5;
}
.system-arch-svg .arch-guard-text {
  fill: #6b3e8c;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
}
.section.dark .system-arch-svg .arch-guard-text {
  fill: #d6c2e5;
}
.system-arch-svg .arch-guard-sub {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
}
.section.dark .system-arch-svg .arch-guard-sub {
  fill: rgba(255,255,255,0.7);
}

/* Feedback loop label adjustments */
.system-arch-svg .arch-feedback-loop-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.section.dark .system-arch-svg .arch-feedback-loop-label {
  fill: rgba(255,255,255,0.55);
}

/* Legend */
.system-arch-svg .lg-active {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .system-arch-svg .lg-active {
  fill: rgba(255,255,255,0.96);
  stroke: var(--accent-light);
}
.system-arch-svg .lg-future {
  fill: rgba(255,255,255,0.04);
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .system-arch-svg .lg-future {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.4);
}
.system-arch-svg .lg-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.section.dark .system-arch-svg .lg-text {
  fill: rgba(255,255,255,0.7);
}

/* ---- KNOWLEDGE STACK ACCORDION v8 ---- */
.knowledge-stack { display: flex; flex-direction: column; }
.kl-item {
  display: flex;
  flex-direction: column;
}
.kl-item .knowledge-layer {
  /* Override v6's grid layout to make this a button */
  display: grid;
  grid-template-columns: 64px 1fr 240px 32px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-left: 3px solid var(--accent);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: inherit;
}
.kl-item .knowledge-layer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.kl-item .knowledge-layer .kl-toggle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: inherit;
  text-align: right;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}
.kl-item.open .knowledge-layer .kl-toggle {
  opacity: 1;
}
.kl-item .knowledge-layer:hover .kl-toggle {
  opacity: 1;
}

.kl-detail {
  padding: 20px 32px 28px 99px; /* aligned to content column */
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  border-left: 3px solid var(--accent);
}
.kl-detail p {
  margin: 0;
  max-width: var(--body-max);
  font-size: 14px;
  color: inherit;
}

/* Per-layer detail panel backgrounds — slightly darker than parent */
.kl-item.layer-1 .kl-detail { background: #dde1e6; color: var(--ink); }
.kl-item.layer-2 .kl-detail { background: #d4e0ec; color: var(--ink); }
.kl-item.layer-3 .kl-detail {
  background: #134358;  /* darker accent */
  color: rgba(255,255,255,0.9);
  border-left-color: #fafaf8;
}
.kl-item.layer-4 .kl-detail {
  background: #0f1924;  /* darker than --dark */
  color: rgba(255,255,255,0.85);
}
.kl-item.layer-5 .kl-detail {
  background: #0f1924;
  color: rgba(255,255,255,0.85);
  border-left-color: var(--accent);
}

/* ============================================================
   v9 — Strict callout column · BIM rail · simplified actuals
   · grouped system arch · accordion color fix · platform CTA
   ============================================================ */

/* ---- HERO v9: callouts as <g class="parcel-group c1..c6">, parcels as <rect class="parcel pX"> ---- */
.hero-svg .callout-leader {
  stroke: var(--accent-light);
  stroke-width: 0.8;
  stroke-dasharray: 3 2;
  fill: none;
  opacity: 0.7;
}
.hero-svg.in-view .parcel-group.c1 { animation: heroCalloutFade 0.4s ease-out 0.0s forwards; }
.hero-svg.in-view .parcel-group.c2 { animation: heroCalloutFade 0.4s ease-out 0.2s forwards; }
.hero-svg.in-view .parcel-group.c3 { animation: heroCalloutFade 0.4s ease-out 0.4s forwards; }
.hero-svg.in-view .parcel-group.c4 { animation: heroCalloutFade 0.4s ease-out 0.6s forwards; }
.hero-svg.in-view .parcel-group.c5 { animation: heroCalloutFade 0.4s ease-out 0.8s forwards; }
.hero-svg.in-view .parcel-group.c6 { animation: heroCalloutFade 0.4s ease-out 1.0s forwards; }

/* ---- SYSTEM FLOW v9: BIM as a horizontal RAIL through phases, no separate hub node ---- */
.system-flow-svg .bim-rail {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  opacity: 0.4;
}
.system-flow-svg .bim-rail-label {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.55;
}

/* ---- USA MAP v9: more cities + side-aware label positioning ---- */
.market-map-svg .market-circle.tiny {
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 1;
}
.market-map-svg .market-text.excluded {
  fill: rgba(139,58,58,0.85);
  font-style: italic;
}

/* ---- KNOWLEDGE STACK v9: detail panels match the layer's header colour exactly,
   and carry generous internal padding so body copy isn't crammed. ---- */
.knowledge-stack-wrap .moat-label { padding-bottom: 24px; }
.knowledge-stack { gap: 0; }

.kl-detail {
  padding: 36px 48px 40px 99px;    /* more breathing room around the text */
}

/* Background for each expanded panel = same as its collapsed layer header. */
.kl-item.layer-1 .kl-detail {
  background: var(--tag-bg);
  color: var(--ink);
  border-left-color: var(--accent);
}
.kl-item.layer-2 .kl-detail {
  background: var(--accent-light);
  color: var(--ink);
  border-left-color: var(--accent);
}
.kl-item.layer-3 .kl-detail {
  background: var(--accent);
  color: rgba(255,255,255,0.95);
  border-left-color: #fafaf8;
}
.kl-item.layer-3 .kl-detail p { color: rgba(255,255,255,0.95); }
.kl-item.layer-4 .kl-detail {
  background: var(--dark);
  color: rgba(255,255,255,0.92);
  border-left-color: var(--accent);
}
.kl-item.layer-4 .kl-detail p { color: rgba(255,255,255,0.92); }
.kl-item.layer-5 .kl-detail {
  background: var(--dark);
  color: rgba(255,255,255,0.92);
  border-left-color: var(--accent);
}
.kl-item.layer-5 .kl-detail p { color: rgba(255,255,255,0.92); }

/* ---- PLATFORM CTA BRIDGE LINK ---- */
.cta-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 40px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  margin-top: 56px;
  transition: background 0.2s;
}
.cta-bridge:hover { background: var(--dark); text-decoration: none; }
.cta-bridge .cta-bridge-l {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  color: #fff;
}
.cta-bridge .cta-bridge-r {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 768px) {
  .cta-bridge { flex-direction: column; align-items: flex-start; padding: 24px 28px; gap: 12px; }
}

/* ---- v9 actuals-along arrow on financial rail ---- */
.system-flow-svg .actuals-along {
  stroke: var(--muted);
  stroke-width: 1.5;
  fill: none;
}
.system-flow-svg .actuals-along-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.section.dark .system-flow-svg .actuals-along-label {
  fill: rgba(255,255,255,0.7);
}

/* Lifecycle on platform reuses the system-flow class — just override container margin */
.lifecycle-platform { margin: 0 auto 32px; }

/* ---- SYSTEM ARCH v9: simpler clustered diagram ---- */
.system-arch-svg.v9 .cluster-box {
  fill: rgba(255,255,255,0.04);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .system-arch-svg.v9 .cluster-box {
  fill: rgba(255,255,255,0.06);
  stroke: var(--accent-light);
}
.system-arch-svg.v9 .intel-box {
  stroke: #1a7a5c;
  stroke-width: 2;
}
.system-arch-svg.v9 .analysis-box {
  stroke: var(--accent);
  stroke-width: 2;
}
.system-arch-svg.v9 .output-box {
  stroke: #a67c28;
  stroke-width: 2;
}
.system-arch-svg.v9 .form-box {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.system-arch-svg.v9 .feedback-box {
  stroke: rgba(0,0,0,0.4);
  stroke-width: 1;
}
.section.dark .system-arch-svg.v9 .feedback-box { stroke: rgba(255,255,255,0.4); }

.system-arch-svg.v9 .cluster-title-num {
  fill: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
}
.section.dark .system-arch-svg.v9 .cluster-title-num { fill: var(--accent-light); }

.system-arch-svg.v9 .cluster-title-name {
  fill: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 4px;
}
.section.dark .system-arch-svg.v9 .cluster-title-name { fill: #fff; }

.system-arch-svg.v9 .cluster-title-sub {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
}
.section.dark .system-arch-svg.v9 .cluster-title-sub { fill: rgba(255,255,255,0.7); }

.system-arch-svg.v9 .arch-conn {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.section.dark .system-arch-svg.v9 .arch-conn { stroke: var(--accent-light); }

.system-arch-svg.v9 .arch-input-conn {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.section.dark .system-arch-svg.v9 .arch-input-conn { stroke: rgba(255,255,255,0.5); }

.system-arch-svg.v9 .arch-bim-link {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
}
.section.dark .system-arch-svg.v9 .arch-bim-link { stroke: var(--accent-light); }

/* GUARD bar — large white text on accent (palette consistency) */
.system-arch-svg.v9 .arch-guard-box {
  fill: var(--accent);
  stroke: var(--accent);
}
.system-arch-svg.v9 .arch-guard-text {
  fill: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
}
.system-arch-svg.v9 .arch-guard-sub {
  fill: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.2px;
}

.system-arch-svg.v9 .arch-feedback-loop {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
}
.section.dark .system-arch-svg.v9 .arch-feedback-loop { stroke: rgba(255,255,255,0.55); }

.system-arch-svg.v9 .arch-feedback-loop-label {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
}
.section.dark .system-arch-svg.v9 .arch-feedback-loop-label { fill: rgba(255,255,255,0.55); }

.system-arch-svg.v9 .arch-input-box {
  fill: var(--tag-bg);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.section.dark .system-arch-svg.v9 .arch-input-box {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.30);
}
.system-arch-svg.v9 .arch-input-box.bim {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 0;
}
.section.dark .system-arch-svg.v9 .arch-input-box.bim {
  stroke: var(--accent-light);
  stroke-width: 2;
}
.system-arch-svg.v9 .arch-input-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.section.dark .system-arch-svg.v9 .arch-input-text { fill: rgba(255,255,255,0.7); }
.system-arch-svg.v9 .arch-input-text.bim {
  fill: var(--accent);
}
.section.dark .system-arch-svg.v9 .arch-input-text.bim { fill: var(--accent-light); }

/* Legend */
.system-arch-svg.v9 .lg-active {
  fill: var(--paper-cool);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.section.dark .system-arch-svg.v9 .lg-active {
  fill: rgba(255,255,255,0.96);
  stroke: var(--accent-light);
}
.system-arch-svg.v9 .lg-future {
  fill: rgba(255,255,255,0.04);
  stroke: var(--border);
  stroke-width: 1;
}
.section.dark .system-arch-svg.v9 .lg-future {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.4);
}
.system-arch-svg.v9 .lg-text {
  fill: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.section.dark .system-arch-svg.v9 .lg-text { fill: rgba(255,255,255,0.7); }

/* ---- v9 USA map: small "tiny" outlined circles for secondary cities ---- */
.market-map-svg .market-circle.tiny {
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 1;
}
.market-map-svg .market-text.tiny {
  fill: rgba(255,255,255,0.5);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 1px;
}
.market-map-svg .market-text.tiny.excluded {
  fill: rgba(214,140,140,0.85);
  font-style: italic;
}

/* ============================================================
   v10 — knowledge stack background fix · system arch refinements
   ============================================================ */

/* ---- KNOWLEDGE STACK v10: layer always shows its color (parent .kl-item drives bg) ---- */
.knowledge-stack-wrap .moat-label {
  padding-bottom: 0;
  margin-bottom: 24px;
}

/* Apply backgrounds at the .kl-item level (the wrapper) */
.kl-item.layer-1 { background: var(--tag-bg); }
.kl-item.layer-2 { background: var(--accent-light); }
.kl-item.layer-3 { background: var(--accent); color: #fff; }
.kl-item.layer-4 { background: var(--dark); color: #fff; }
.kl-item.layer-5 { background: var(--dark); color: #fff; }

/* The button itself is transparent — inherits parent's color */
.kl-item .knowledge-layer {
  background: transparent !important;
  color: inherit !important;
  border-left: 3px solid var(--accent);
}
.kl-item.layer-3 .knowledge-layer { border-left-color: #fafaf8; }
.kl-item.layer-4 .knowledge-layer { border-left-color: var(--accent); }
.kl-item.layer-5 .knowledge-layer { border-left-color: var(--accent); border-top: 1px dashed var(--accent); }

/* Layer text colors */
.kl-item.layer-1 .kl-num,
.kl-item.layer-2 .kl-num { color: var(--ink); }
.kl-item.layer-1 .kl-desc,
.kl-item.layer-2 .kl-desc { color: var(--muted); }
.kl-item.layer-1 .kl-status,
.kl-item.layer-2 .kl-status { color: var(--accent); }

.kl-item.layer-3 .kl-num,
.kl-item.layer-3 .kl-desc,
.kl-item.layer-3 .kl-status,
.kl-item.layer-3 .kl-toggle { color: #fff; }
.kl-item.layer-3 .kl-icon { color: #fff; }

.kl-item.layer-4 .kl-num,
.kl-item.layer-4 .kl-desc,
.kl-item.layer-4 .kl-status,
.kl-item.layer-4 .kl-toggle { color: #fff; }
.kl-item.layer-4 .kl-icon { color: #fff; }

.kl-item.layer-5 .kl-num,
.kl-item.layer-5 .kl-desc,
.kl-item.layer-5 .kl-status,
.kl-item.layer-5 .kl-toggle { color: #fff; }
.kl-item.layer-5 .kl-icon { color: #fff; }

/* Detail panels: same hue as the collapsed layer (no shade shift) + modest padding. */
.kl-detail {
  padding: 24px 32px;
}
.kl-item.layer-1 .kl-detail {
  background: var(--tag-bg);
  color: var(--ink);
  border-left: 3px solid var(--accent);
}
.kl-item.layer-1 .kl-detail p { color: var(--ink); }

.kl-item.layer-2 .kl-detail {
  background: var(--accent-light);
  color: var(--ink);
  border-left: 3px solid var(--accent);
}
.kl-item.layer-2 .kl-detail p { color: var(--ink); }

.kl-item.layer-3 .kl-detail {
  background: var(--accent);
  color: #fff;
  border-left: 3px solid #fafaf8;
}
.kl-item.layer-3 .kl-detail p { color: #fff; }

.kl-item.layer-4 .kl-detail {
  background: var(--dark);
  color: #fff;
  border-left: 3px solid var(--accent);
}
.kl-item.layer-4 .kl-detail p { color: #fff; }

.kl-item.layer-5 .kl-detail {
  background: var(--dark);
  color: #fff;
  border-left: 3px solid var(--accent);
}
.kl-item.layer-5 .kl-detail p { color: #fff; }

/* ============================================================
   v10 hero — clean street labels and parcels
   ============================================================ */

/* Brighter top-anchored street labels (above the grid) */
.hero-svg .street-label.top {
  fill: rgba(255,255,255,0.78);
  font-size: 10px;
  letter-spacing: 2px;
}
/* Left-margin labels for E-W streets */
.hero-svg .street-label.left {
  fill: rgba(255,255,255,0.55);
  font-size: 9px;
  letter-spacing: 1.8px;
}
.hero-svg .street-label.left.major {
  fill: rgba(255,255,255,0.78);
  font-size: 10px;
}

/* ============================================================
   v11 — port v-a2 hero animation logic (run when .in-view fires,
   matching the IntersectionObserver hook used by every later version).
   These rules are deliberately placed last so they win the cascade
   over the v3..v9 hero rules earlier in this file.
   ============================================================ */

/* Parcel fill + always-on pulse (v-a2 keyframe) */
.hero-svg .parcel {
  fill: var(--accent);
  fill-opacity: 0.45;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.hero-svg.in-view .parcel { animation: parcelPulseV11 3s ease-in-out infinite; }
@keyframes parcelPulseV11 {
  0%, 100% { fill-opacity: 0.45; }
  50%      { fill-opacity: 0.25; }
}

/* Whole-parcel-group fade-in stagger (v-a2 pattern, 0.8s spacing for 5 parcels) */
.hero-svg .parcel-group { opacity: 0; }
.hero-svg.in-view .parcel-group { animation: heroParcelFadeV11 0.6s ease-out forwards; }
.hero-svg.in-view .parcel-group.p1 { animation-delay: 0.4s; }
.hero-svg.in-view .parcel-group.p2 { animation-delay: 1.2s; }
.hero-svg.in-view .parcel-group.p3 { animation-delay: 2.0s; }
.hero-svg.in-view .parcel-group.p4 { animation-delay: 2.8s; }
.hero-svg.in-view .parcel-group.p5 { animation-delay: 3.6s; }
@keyframes heroParcelFadeV11 { from { opacity: 0; } to { opacity: 1; } }

/* Lighter sub-block grid representing local cross-streets */
.hero-svg .street-mn {
  stroke: rgba(255,255,255,0.10);
  stroke-width: 0.5;
  fill: none;
}

/* 45° callout leader */
.hero-svg .callout-leader {
  stroke: var(--accent-light);
  stroke-width: 1;
  stroke-dasharray: 0;
  opacity: 0.85;
  fill: none;
}

/* D Line transit stops (Wilshire @ La Cienega / Fairfax / La Brea) */
.hero-svg .walk-radius {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
  opacity: 0.5;
}
.hero-svg .station-mark {
  fill: var(--dark);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.hero-svg .station-mark-inner {
  fill: var(--accent);
  stroke: none;
}
.hero-svg .station-name {
  fill: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* D Line stops fade in sequentially left → right from the start of the animation. */
.hero-svg .d-stop { opacity: 0; }
.hero-svg.in-view .d-stop { animation: dStopFadeV11 0.6s ease-out forwards; }
.hero-svg.in-view .d-stop.d1 { animation-delay: 0.0s; }
.hero-svg.in-view .d-stop.d2 { animation-delay: 0.4s; }
.hero-svg.in-view .d-stop.d3 { animation-delay: 0.8s; }
@keyframes dStopFadeV11 { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   KNOWLEDGE STACK · per-layer left-border colour ramp
   01 (replicable)        → muted gray
   02 (metro intelligence)→ 40% accent
   03 (regulatory moat)   → full accent (definitive)
   04 (design intelligence)→ white on dark
   05 (deal intelligence) → accent on dark
   Weight stays 3px / solid for all five.
   ============================================================ */
.kl-item.layer-1 .knowledge-layer { border-left: 3px solid #dde1e6; }
.kl-item.layer-2 .knowledge-layer { border-left: 3px solid rgba(26, 82, 118, 0.4); }
.kl-item.layer-3 .knowledge-layer { border-left: 3px solid #1a5276; }
.kl-item.layer-4 .knowledge-layer { border-left: 3px solid #ffffff; }
.kl-item.layer-5 .knowledge-layer { border-left: 3px solid #1a5276; }

/* ============================================================
   v15 — gallery marquee, corridor sequence, market pulse, legend
   ============================================================ */

/* --- Gallery: continuous right-to-left marquee.
       Children are duplicated by JS on load, so translating to -50%
       returns the track to a visually identical state. --- */
.gallery-track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  animation: galleryMarquee 90s linear infinite;
  will-change: transform;
}
.gallery-track:hover { animation-play-state: paused; }
.gallery-track > .gallery-img,
.gallery-track > img,
.gallery-track > .gallery-placeholder { scroll-snap-align: none; }
@keyframes galleryMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
}

/* --- Corridor SVG: chained reveal sequence.
       Phase 1 (0.0–0.7s): zone ellipses scale from origin.
       Phase 2 (0.7s):     zone labels fade in.
       Phase 3 (1.0–1.7s): dev-site volumes extrude up from base.
       Phase 4 (1.7–2.3s): leader lines + callouts fade in. --- */
.corridor-iso-svg .zone-circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(11deg) scale(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.corridor-iso-svg.in-view .zone-circle { transform: rotate(11deg) scale(1); }
.corridor-iso-svg.in-view .z1 { transition-delay: 0s; }
.corridor-iso-svg.in-view .z2 { transition-delay: 0.15s; }
.corridor-iso-svg.in-view .z3 { transition-delay: 0.30s; }

.corridor-iso-svg .zone-label {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.7s;
}
.corridor-iso-svg.in-view .zone-label { opacity: 1; }

/* Override prior dev-site fade-up: now extrude vertically from base. */
.corridor-iso-svg .dev-site {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.corridor-iso-svg.in-view .dev-site { transform: scaleY(1); }
.corridor-iso-svg.in-view .ds1 { transition-delay: 1.0s; }
.corridor-iso-svg.in-view .ds2 { transition-delay: 1.15s; }
.corridor-iso-svg.in-view .ds3 { transition-delay: 1.30s; }
.corridor-iso-svg.in-view .ds4 { transition-delay: 1.45s; }

.corridor-iso-svg .ds-leader,
.corridor-iso-svg .ds-callout-bg,
.corridor-iso-svg .ds-callout-text {
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
.corridor-iso-svg.in-view .ds1 .ds-leader        { opacity: 0.6; transition-delay: 1.7s; }
.corridor-iso-svg.in-view .ds1 .ds-callout-bg,
.corridor-iso-svg.in-view .ds1 .ds-callout-text  { opacity: 1;   transition-delay: 1.85s; }
.corridor-iso-svg.in-view .ds2 .ds-leader        { opacity: 0.6; transition-delay: 1.85s; }
.corridor-iso-svg.in-view .ds2 .ds-callout-bg,
.corridor-iso-svg.in-view .ds2 .ds-callout-text  { opacity: 1;   transition-delay: 2.0s; }
.corridor-iso-svg.in-view .ds3 .ds-leader        { opacity: 0.6; transition-delay: 2.0s; }
.corridor-iso-svg.in-view .ds3 .ds-callout-bg,
.corridor-iso-svg.in-view .ds3 .ds-callout-text  { opacity: 1;   transition-delay: 2.15s; }
.corridor-iso-svg.in-view .ds4 .ds-leader        { opacity: 0.6; transition-delay: 2.15s; }
.corridor-iso-svg.in-view .ds4 .ds-callout-bg,
.corridor-iso-svg.in-view .ds4 .ds-callout-text  { opacity: 1;   transition-delay: 2.3s; }

@media (prefers-reduced-motion: reduce) {
  .corridor-iso-svg .zone-circle,
  .corridor-iso-svg .zone-label,
  .corridor-iso-svg .dev-site,
  .corridor-iso-svg .ds-leader,
  .corridor-iso-svg .ds-callout-bg,
  .corridor-iso-svg .ds-callout-text { transition: none; }
  .corridor-iso-svg .zone-circle { transform: rotate(11deg) scale(1); }
  .corridor-iso-svg .dev-site    { transform: scaleY(1); }
  .corridor-iso-svg .zone-label,
  .corridor-iso-svg .ds-callout-bg,
  .corridor-iso-svg .ds-callout-text { opacity: 1; }
  .corridor-iso-svg .ds-leader { opacity: 0.6; }
}

/* --- Market map: radar pulse on LA + Miami (the two emphasized markets). --- */
.market-map-svg .pulse-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: marketPulse 2.6s cubic-bezier(0.25, 0.5, 0.25, 1) infinite;
  pointer-events: none;
}
.market-map-svg .pulse-ring.delay-1 { animation-delay: 1.3s; }
@keyframes marketPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .market-map-svg .pulse-ring { animation: none; opacity: 0.35; }
}

/* --- Legend: <rect-icon> custom element didn't size; switch to <span>
       and round the icons so they read as map dots. --- */
.legend-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-icon.active     { background: var(--accent); border: 1.5px solid var(--accent); }
.legend-icon.validated  { background: rgba(26,82,118,0.25); border: 1.5px solid var(--accent); }
.legend-icon.identified { background: transparent; border: 1px solid rgba(255,255,255,0.55); width: 8px; height: 8px; }