/* ⚠️ styles.css 是构建产物 —— DO NOT EDIT styles.css DIRECTLY.
   任何直接写进 styles.css 的改动，都会在下一次 `npm run build:css`
   （precommit / npm run pack 都会触发）被静默覆盖而丢失。
   历史教训：commit a8ea54e 的 topbar 性能修复就因此丢失，导致滚动卡顿回归。
   所有样式改动请写在 styles.source.css，再 `npm run build:css`。

   Source entry for the PostCSS build (npm run build:css).
   styles.source.css is the canonical stable stylesheet; build output writes to styles.css. *//* Self-hosted Inter (woff2, from @fontsource/inter) — replaces the
   fonts.googleapis.com @import, which is unreachable in mainland China and
   blocked page rendering. Subsets: latin, latin-ext, cyrillic (ru locale);
   weights 300/400/600/700. unicode-range values match Google Fonts css2. */

/* ---- 300 ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-300-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-300-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-300-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- 400 ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- 600 ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- 700 ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
 * styles.source.css — single editable stylesheet (npm run build:css → styles.css)
 * Block index (search "@block" in this file):
 *   layout           — tokens, reset, topbar, footer, site chrome
 *   home             — hero, business, shared section shells
 *   architecture     — carousel, Three.js viewport, Ontology embed, popups
 *   agentrix-scrolly — Agentrix mobile scrolly storytelling
 *   practices        — practices page cards and embeds
 * Do not add orphan .css files under assets/interactive-components/.
 * ============================================================================= */
/*
 * DESIGN TOKENS (AGI Enterprise Minimal — aligned with AGENTS.md §视觉风格)
 * Canonical for NEW markup: Tailwind utilities on HTML. Legacy home/business uses
 * classes below in @block home. Do not use pure #fff body copy or white page bg.
 *
 * ┌─────────────────┬──────────────────────────────────────────────────────────────┐
 * │ Role            │ Use this (pick one layer)                                    │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Page background │ body: gradient #06080c→#0a0e14 + radial accents (see :root)  │
 * │                 │ Section shells: var(--bg-soft) #0c1016 on .hero/.business-*  │
 * │                 │ Panels: var(--panel) #0f141c / var(--panel-2) #121a24        │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Eyebrow         │ TW: text-xs font-semibold tracking-widest uppercase            │
 * │                 │     text-blue-400/80                                         │
 * │                 │ CSS: .eyebrow (0.72rem, 0.22em tracking; color --text-faint)  │
 * │                 │ Hero video: .home-page .hero .eyebrow → --hero-muted          │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Hero H1         │ TW: text-5xl md:text-7xl font-bold tracking-tighter            │
 * │                 │     text-white leading-tight                                 │
 * │                 │ Home typing line: .hero-text (not <h1>) + .hero h1 patterns  │
 * │                 │ CSS: .hero h1 clamp(3.2rem,7vw,8rem) weight 900 --hero-fg    │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Body / lede     │ TW: text-lg md:text-xl font-normal leading-relaxed           │
 * │                 │     text-gray-400 max-w-2xl                                  │
 * │                 │ CSS: --text-muted / .hero-text / .section-heading p          │
 * │                 │ Avoid #fff for paragraphs; prefer gray-300/400 or --text     │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Primary CTA     │ TW (subpages): inline-flex … px-6 py-3 bg-white text-black   │
 * │                 │     font-semibold rounded-full hover:bg-gray-200             │
 * │                 │     transition-colors duration-200                           │
 * │                 │ Home hero CTA: .button-primary text link + arrow (not pill)  │
 * │                 │ Secondary: .button-secondary / .button-download              │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Section width   │ TW: w-full max-w-7xl mx-auto px-6 md:px-12                 │
 * │                 │ CSS: .section-frame + padding var(--gutter) max --container  │
 * │                 │ Vertical rhythm in copy stacks: space-y-6 (Tailwind)         │
 * ├─────────────────┼──────────────────────────────────────────────────────────────┤
 * │ Accent / lines  │ --accent #8fb8ff  --accent-2 #bfd4ff  --line / --line-strong │
 * │                 │ Eyebrow tint ≈ blue-400/80; hero accent --hero-accent        │
 * └─────────────────┴──────────────────────────────────────────────────────────────┘
 *
 * :root custom properties (edit here, then npm run build:css):
 *   --bg #05070a  --bg-soft #0c1016  --text #f4f7fb  --text-muted / --text-faint
 *   --gutter clamp(16px,4vw,80px)  --container 1600px  --radius-* / --shadow
 *
 * .hero local (video overlay copy): --hero-fg --hero-muted --hero-accent --hero-shadow
 */

/* @block layout — tokens, reset, topbar, footer, site chrome */
:root {
  --font-primary:
    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #05070a;
  --bg-soft: #0c1016;
  --panel: #0f141c;
  --panel-2: #121a24;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f4f7fb;
  --text-muted: rgba(244, 247, 251, 0.66);
  --text-faint: rgba(244, 247, 251, 0.42);
  --accent: #8fb8ff;
  --accent-2: #bfd4ff;
  --accent-3: rgba(143, 184, 255, 0.18);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  --gutter: clamp(16px, 4vw, 80px);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --container: 1600px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
/* Keep desktop links on one line without imposing a page-wide minimum width. */
@media (min-width: 821px) and (pointer: fine) {
  .topnav {
    flex-wrap: nowrap;
  }

  .topnav [data-nav-id] {
    flex-shrink: 0;
  }
}
body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--text);
  background:
    radial-gradient(
      circle at top left,
      rgba(143, 184, 255, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 255, 255, 0.05),
      transparent 20%
    ),
    linear-gradient(180deg, #06080c 0%, #0a0e14 100%);
}
img,
video,
iframe {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  border: 1px solid rgba(191, 212, 255, 0.72);
  border-radius: 999px;
  color: #07101c;
  background: #f4f7fb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  font-weight: 600;
  transform: translateY(calc(-100% - 24px));
  transition: transform 160ms ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #8fb8ff;
  outline-offset: 3px;
}
button,
input,
textarea,
select {
  font: inherit;
}
.site-shell {
  width: 100%;
  margin: 0;
  padding: 18px 0 72px;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  /* will-change 只在 .is-routing 期间加（见下），不要常驻：常驻会预先创建 GPU
     合成层，导致 .topbar 的 backdrop-filter 在其下方内容变化时反复重采样，
     表现为滚动卡顿 / 毛玻璃闪烁。 */
}
.home-page .site-shell {
  padding-top: 0;
}
/* Keep topbar baseline identical to home page across subpages. */
body:not(.home-page) .site-shell {
  padding-top: 0;
}
.home-page main {
  margin-top: clamp(-86px, -7.2vw, -64px);
}
body.is-routing .site-shell {
  will-change: opacity, transform;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  pointer-events: none;
}
.topbar {
  position: sticky;
  top: 30px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  margin: 0 var(--gutter);
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(235, 235, 235, 0.3);
  border: 1px solid rgba(128, 146, 170, 0.42);
  backdrop-filter: blur(10px);
  /* 独立合成层：让 backdrop-filter 不受祖先图层状态变化影响 */
  transform: translateZ(0);
}
.home-page .topbar {
  position: sticky;
  top: 30px;
  left: auto;
  right: auto;
  margin: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 0;
}
.brand-logo {
  display: block;
  width: clamp(62px, 5vw, 70px);
  aspect-ratio: 1455 / 460;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("../images/brand/aihuashen-ahs-white.png") center / contain
    no-repeat;
  mask: url("../images/brand/aihuashen-ahs-white.png") center / contain
    no-repeat;
  color: rgba(28, 40, 57, 0.96);
}
.eyebrow,
.pipeline-index {
  color: var(--text-faint);
}
.topnav {
  --topnav-indicator: #9b6ee3;
  --topnav-dropdown-indicator: #c3a0ff;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(4px, 1.25vw, 16px);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.topnav [data-nav-id] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  color: rgba(48, 62, 82, 0.82);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}
/* Prevent browser-default aria-current emphasis from changing nav width. */
.topnav [data-nav-id][aria-current] {
  font-weight: inherit;
  text-decoration: none;
}
.topnav [data-nav-id]:hover,
.topnav [data-nav-id]:focus-visible,
.topnav [data-nav-id][aria-current] {
  color: rgba(22, 34, 50, 0.98);
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--topnav-indicator);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 8px;
}
.lang-switcher-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(48, 62, 82, 0.76);
}
.lang-switcher-select {
  min-width: 108px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(128, 146, 170, 0.42);
  background: rgba(245, 249, 255, 0.66);
  color: rgba(28, 40, 57, 0.96);
  font-size: 0.76rem;
  font-weight: 600;
}
.lang-switcher-select:focus-visible {
  outline: 2px solid rgba(116, 155, 214, 0.7);
  outline-offset: 2px;
}
/* —— Pro matrix language switcher (glass panel, 2×4 grid) —— */
.lang-switcher--matrix {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
}
.lang-switcher-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  height: auto;
  min-height: 40px;
  padding: 6px 12px;
  margin: 0;
  border-radius: 10px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(28, 40, 57, 0.94);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}
.lang-switcher-trigger:hover,
.lang-switcher-trigger:focus-visible,
.lang-switcher-trigger:active,
.lang-switcher--matrix.is-open .lang-switcher-trigger {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.lang-switcher-trigger:focus-visible {
  outline: 2px solid rgba(116, 155, 214, 0.65);
  outline-offset: 2px;
}
.lang-switcher-globe {
  display: inline-block;
  width: 1.34rem;
  height: 1.34rem;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.86;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3.2 2.8 14.8 0 18M12 3c-2.8 3.2-2.8 14.8 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3.2 2.8 14.8 0 18M12 3c-2.8 3.2-2.8 14.8 0 18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.lang-switcher-current {
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-switcher-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 80;
  min-width: 232px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(182, 201, 230, 0.28);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.05)
    ),
    rgba(14, 18, 28, 0.2);
  backdrop-filter: blur(14px) saturate(122%);
  -webkit-backdrop-filter: blur(14px) saturate(122%);
  box-shadow:
    0 12px 30px rgba(10, 16, 28, 0.26),
    0 2px 0 rgba(255, 255, 255, 0.08) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
  transform: translateY(-4px) scale(0.985);
}
.lang-switcher-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      110% 85% at 8% 0%,
      rgba(255, 255, 255, 0.26),
      transparent 56%
    ),
    radial-gradient(
      75% 70% at 100% 100%,
      rgba(143, 184, 255, 0.16),
      transparent 68%
    );
  opacity: 0.78;
}
html[dir="rtl"] .lang-switcher--matrix .lang-switcher-panel {
  right: auto;
  left: 0;
}
.lang-switcher--matrix.is-open .lang-switcher-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.lang-switcher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.lang-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(241, 246, 255, 0.94);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}
.lang-switcher-option:hover,
.lang-switcher-option:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}
.lang-switcher-option:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}
.lang-switcher-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-switcher-option[data-lang="ar"] .lang-switcher-option-label {
  direction: rtl;
  unicode-bidi: isolate;
}
/* Matrix ordering: keep Simplified/Traditional Chinese on same row */
.lang-switcher-option[data-lang="zh"] {
  order: 1;
}
.lang-switcher-option[data-lang="zht"] {
  order: 2;
}
.lang-switcher-option[data-lang="en"] {
  order: 3;
}
.lang-switcher-option[data-lang="ja"] {
  order: 4;
}
.lang-switcher-option[data-lang="ko"] {
  order: 5;
}
.lang-switcher-option[data-lang="fr"] {
  order: 6;
}
.lang-switcher-option[data-lang="de"] {
  order: 7;
}
.lang-switcher-option[data-lang="ar"] {
  order: 8;
}
.lang-switcher-option[data-lang="sp"] {
  order: 9;
}
.lang-switcher-option[data-lang="ra"] {
  order: 10;
}
.lang-switcher-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  opacity: 0;
  transition:
    opacity 140ms ease,
    box-shadow 140ms ease;
  display: none;
}
.lang-switcher-option.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(16, 22, 32, 0.95);
}
.lang-switcher-option.is-active .lang-switcher-active-dot {
  opacity: 1;
  background: rgba(160, 205, 255, 0.95);
  box-shadow: 0 0 10px rgba(130, 175, 255, 0.65);
}
body .topbar,
body .brand-logo,
body .brand-mark,
body .brand-copy strong,
body .brand-copy small,
body .topnav [data-nav-id],
body .lang-switcher-label,
body .lang-switcher-select,
body .lang-switcher-trigger,
body .lang-switcher-current,
body .lang-switcher-panel,
body .lang-switcher-option,
body .topnav-dropdown {
  /* 不要过渡 backdrop-filter：明暗主题切换时它会在 220ms 内逐帧插值模糊半径，
     每帧重做一次全屏毛玻璃采样，滚过 data-topbar-tone 边界时表现为明显卡顿。 */
  transition:
    background-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}
/* The runtime resolves the first tone before enabling transitions. This avoids
   a dark-to-light flash on pages whose opening region requests light chrome. */
body:not(.topbar-theme-ready) .topbar,
body:not(.topbar-theme-ready) .brand-logo,
body:not(.topbar-theme-ready) .brand-mark,
body:not(.topbar-theme-ready) .brand-copy strong,
body:not(.topbar-theme-ready) .brand-copy small,
body:not(.topbar-theme-ready) .topnav [data-nav-id],
body:not(.topbar-theme-ready) .lang-switcher-label,
body:not(.topbar-theme-ready) .lang-switcher-select,
body:not(.topbar-theme-ready) .lang-switcher-trigger,
body:not(.topbar-theme-ready) .lang-switcher-current,
body:not(.topbar-theme-ready) .lang-switcher-panel,
body:not(.topbar-theme-ready) .lang-switcher-option,
body:not(.topbar-theme-ready) .topnav-dropdown {
  transition: none !important;
}
body.nav-on-dark {
  --topbar-surface: rgba(244, 248, 255, 0.44);
  --topbar-dropdown-surface: rgba(244, 248, 255, 0.88);
  --topnav-dropdown-surface: rgb(244, 248, 255);
  --topbar-border: rgba(79, 101, 134, 0.28);
  --topbar-backdrop: blur(14px) saturate(136%);
  --topbar-shadow: 0 10px 24px rgba(24, 35, 54, 0.14);
  --topbar-dropdown-text: rgba(28, 41, 60, 0.96);
  --topbar-dropdown-text-active: rgba(12, 24, 41, 0.98);
  --topbar-dropdown-hover: rgba(255, 255, 255, 0.3);
  --topbar-dropdown-focus: rgba(49, 78, 120, 0.9);
}
body.nav-on-light {
  --topbar-surface: rgba(14, 18, 28, 0.2);
  --topbar-dropdown-surface: rgba(14, 18, 28, 0.78);
  --topnav-dropdown-surface: rgb(14, 18, 28);
  --topbar-border: rgba(120, 140, 168, 0.24);
  --topbar-backdrop: blur(8px) saturate(110%);
  --topbar-shadow: none;
  --topbar-dropdown-text: #cbd5e1;
  --topbar-dropdown-text-active: #e2e8f0;
  --topbar-dropdown-hover: rgba(143, 184, 255, 0.12);
  --topbar-dropdown-focus: #8fb8ff;
}
body.nav-on-dark .topbar {
  background: var(--topbar-surface);
  border-color: var(--topbar-border);
  backdrop-filter: var(--topbar-backdrop);
  box-shadow: var(--topbar-shadow);
}
body.nav-on-dark .brand-logo,
body.nav-on-dark .brand-mark,
body.nav-on-dark .brand-copy strong,
body.nav-on-dark .topnav [data-nav-id] {
  color: rgba(28, 41, 60, 0.96);
}
body.nav-on-dark .topnav {
  --topnav-indicator: #0b0d10;
}
body.nav-on-dark .brand-copy small {
  color: rgba(49, 67, 93, 0.8);
}
body.nav-on-dark .topnav [data-nav-id]:hover,
body.nav-on-dark .topnav [data-nav-id]:focus-visible,
body.nav-on-dark .topnav [data-nav-id][aria-current] {
  color: rgba(12, 24, 41, 0.98);
}
body.nav-on-dark .lang-switcher-label {
  color: rgba(39, 60, 89, 0.8);
}
body.nav-on-dark .lang-switcher-select {
  border-color: rgba(95, 120, 156, 0.38);
  background: rgba(246, 251, 255, 0.72);
  color: rgba(31, 48, 72, 0.92);
}
body.nav-on-light .topbar {
  background: var(--topbar-surface);
  border-color: var(--topbar-border);
  backdrop-filter: var(--topbar-backdrop);
  box-shadow: var(--topbar-shadow);
}
body.nav-on-light .brand-logo,
body.nav-on-light .brand-mark,
body.nav-on-light .brand-copy strong,
body.nav-on-light .topnav [data-nav-id] {
  color: rgba(239, 246, 255, 0.96);
}
body.nav-on-light .topnav {
  --topnav-indicator: #c3a0ff;
}
body.nav-on-light .brand-copy small {
  color: rgba(210, 226, 250, 0.78);
}
body.nav-on-light .topnav [data-nav-id]:hover,
body.nav-on-light .topnav [data-nav-id]:focus-visible,
body.nav-on-light .topnav [data-nav-id][aria-current] {
  color: rgba(250, 253, 255, 0.98);
}
@media (max-width: 1280px) {
  .topbar {
    gap: 6px;
    padding-inline: 10px;
  }

  .brand-logo {
    width: 62px;
  }

  .topnav {
    gap: 2px;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
  }

  .topnav [data-nav-id],
  .lang-switcher-trigger {
    padding-inline: 6px;
  }
}
body.nav-on-light .lang-switcher-label {
  color: rgba(217, 230, 248, 0.82);
}
body.nav-on-light .lang-switcher-select {
  border-color: rgba(191, 212, 255, 0.3);
  background: rgba(16, 25, 39, 0.48);
  color: rgba(241, 248, 255, 0.95);
}
body.nav-on-dark .lang-switcher-trigger {
  border-color: transparent;
  background: transparent;
  color: rgba(31, 48, 72, 0.92);
}
body.nav-on-dark .lang-switcher-trigger:hover,
body.nav-on-dark .lang-switcher-trigger:focus-visible,
body.nav-on-dark .lang-switcher-trigger:active,
body.nav-on-dark .lang-switcher--matrix.is-open .lang-switcher-trigger {
  background: rgba(255, 255, 255, 0.22);
}
body.nav-on-dark .lang-switcher-panel {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9),
      rgba(243, 245, 248, 0.78)
    ),
    rgba(247, 248, 250, 0.44);
  border-color: rgba(90, 102, 118, 0.22);
  backdrop-filter: blur(14px) saturate(136%);
  -webkit-backdrop-filter: blur(14px) saturate(136%);
  box-shadow: 0 12px 28px rgba(24, 30, 38, 0.14);
}
body.nav-on-dark .lang-switcher-panel::before {
  background:
    radial-gradient(
      110% 85% at 8% 0%,
      rgba(255, 255, 255, 0.3),
      transparent 56%
    ),
    radial-gradient(
      75% 70% at 100% 100%,
      rgba(200, 206, 216, 0.16),
      transparent 68%
    );
}
body.nav-on-dark .lang-switcher-option {
  color: rgba(30, 46, 71, 0.95);
  background: rgba(255, 255, 255, 0.72);
}
body.nav-on-dark .lang-switcher-option.is-active {
  background: rgba(20, 26, 36, 0.9);
  color: rgba(245, 249, 255, 0.95);
}
body.nav-on-light .lang-switcher-trigger {
  border-color: transparent;
  background: transparent;
  color: rgba(241, 248, 255, 0.95);
}
body.nav-on-light .lang-switcher-trigger:hover,
body.nav-on-light .lang-switcher-trigger:focus-visible,
body.nav-on-light .lang-switcher-trigger:active,
body.nav-on-light .lang-switcher--matrix.is-open .lang-switcher-trigger {
  background: rgba(255, 255, 255, 0.22);
}
body.nav-on-light .lang-switcher-panel {
  background:
    linear-gradient(180deg, rgba(22, 30, 44, 0.88), rgba(10, 16, 26, 0.78)),
    rgba(8, 12, 20, 0.58);
  border-color: rgba(191, 212, 255, 0.24);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
body.nav-on-light .lang-switcher-option {
  color: rgba(241, 248, 255, 0.94);
  background: rgba(255, 255, 255, 0.1);
}
body.nav-on-light .lang-switcher-option.is-active {
  background: rgba(247, 251, 255, 0.95);
  color: rgba(14, 20, 30, 0.96);
}
/* @block home — shared section shells (hero / business / cases) */
.hero,
.business-section,
.cases-section {
  margin-bottom: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    var(--bg-soft);
  border-top: 1px solid var(--line);
}

/* @block architecture — carousel, Three viewport, Ontology, popups */
.architecture-section {
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--bg-soft);
  background-image: none;
}
.architecture-section .architecture-stack {
  background: var(--bg-soft);
}
.business-section {
  border-top: 0;
}
.business-section .section-frame {
  padding-top: clamp(20px, 3.2vw, 44px);
}
.architecture-stack {
  display: grid;
  gap: 0;
}
.architecture-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 32px);
  width: 100%;
  margin: clamp(16px, 2vw, 28px) auto 0;
  padding: clamp(6px, 0.8vw, 12px) 0;
}
.architecture-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28px, 3vw, 40px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  max-width: min(42vw, 32rem);
  font-size: clamp(0.75rem, 1vw, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.025em;
  text-transform: none;
  text-wrap: balance;
  color: rgba(244, 247, 251, 0.5);
  transition: color 180ms ease;
}
.architecture-nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(191, 212, 255, 0.5);
  opacity: 0;
  transition: opacity 180ms ease;
}
.architecture-nav-item:hover,
.architecture-nav-item:focus-visible,
.architecture-nav-item.is-active {
  color: rgba(244, 247, 251, 0.96);
}
.architecture-nav-item:hover::after,
.architecture-nav-item:focus-visible::after,
.architecture-nav-item.is-active::after {
  opacity: 1;
}
.architecture-world-section {
  width: 100%;
  max-width: min(92vw, 80rem);
  margin: clamp(16px, 2.2vw, 32px) auto clamp(24px, 3vw, 48px);
  padding-inline: clamp(0px, 1vw, 12px);
  box-sizing: border-box;
}

.architecture-view-copy[hidden] {
  display: none;
}

.architecture-view-copy.is-active {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1.58fr);
  grid-template-areas:
    "label title"
    ". definition"
    ". description";
  -moz-column-gap: clamp(24px, 5vw, 88px);
       column-gap: clamp(24px, 5vw, 88px);
  row-gap: clamp(14px, 1.5vw, 22px);
  align-items: start;
  padding-top: clamp(22px, 2.6vw, 38px);
  border-top: 1px solid rgba(191, 212, 255, 0.18);
  animation: architecture-copy-enter 320ms ease-out both;
}

@media (min-width: 821px) {
  .architecture-view-copy.is-active {
    position: relative;
    border-top-color: transparent;
  }

  /* Extend only the divider; keep the copy's existing measure and alignment. */
  .architecture-view-copy.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: max(100%, calc(100vw - var(--gutter) * 2));
    border-top: 1px solid rgba(191, 212, 255, 0.18);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.architecture-view-copy-meta,
.architecture-view-copy-body {
  display: contents;
}

.architecture-view-label,
.architecture-view-title,
.architecture-view-definition,
.architecture-view-description {
  margin: 0;
  font-family: var(--font-primary);
}

.architecture-view-label {
  grid-area: label;
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(140, 181, 255, 0.82);
}

@media (min-width: 1440px) {
  .architecture-view-label {
    font-size: clamp(0.78rem, 0.625vw, 1rem);
    letter-spacing: clamp(0.08em, 0.06vw, 0.14em);
  }
}

@media (min-width: 1920px) {
  .architecture-view-copy.is-active {
    grid-template-columns: minmax(280px, 0.48fr) minmax(0, 1.52fr);
  }
}

.architecture-view-title {
  grid-area: title;
  max-width: none;
  font-size: clamp(1.75rem, 2.7vw, 3.5rem);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(244, 247, 251, 0.96);
}

.architecture-view-definition {
  grid-area: definition;
  max-width: 54rem;
  font-size: clamp(1rem, 1.25vw, 1.24rem);
  font-weight: 500;
  line-height: 1.72;
  color: rgba(232, 240, 252, 0.86);
}

.architecture-view-description {
  grid-area: description;
  max-width: 50rem;
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(184, 197, 217, 0.64);
}

@keyframes architecture-copy-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .architecture-nav {
    align-items: stretch;
  }

  .architecture-nav-item {
    max-width: calc(50% - 8px);
    align-items: flex-start;
    font-size: clamp(0.68rem, 2.9vw, 0.84rem);
  }

  .architecture-nav-item::after {
    display: none;
  }

  .architecture-world-section {
    max-width: none;
    margin-top: 14px;
    margin-bottom: 24px;
    padding-inline: var(--gutter);
  }

  .architecture-view-copy.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "title"
      "definition"
      "description";
    row-gap: 18px;
    padding-top: 20px;
  }

  .architecture-view-label {
    align-self: center;
  }

  .architecture-view-title {
    font-size: clamp(1.25rem, 5.6vw, 2.15rem);
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .architecture-view-definition {
    font-size: 0.94rem;
    line-height: 1.68;
  }

  .architecture-view-description {
    font-size: 0.82rem;
    line-height: 1.68;
  }
}

.architecture-layers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 0;
  padding-top: 0;
}
.architecture-carousel {
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.architecture-carousel-track {
  display: block;
  width: 100%;
}
.architecture-carousel-slide {
  width: 100%;
}
.architecture-carousel-slide[data-arch-slide="ontology"] {
  display: none;
}
.architecture-three-viewport {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 52vw, 860px);
  margin: 0;
  border: 1px solid rgba(79, 111, 154, 0.46);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(8, 12, 18, 0.12) 58%,
    var(--bg-soft) 100%
  );
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}
.architecture-three-viewport.arch-slide-left {
  animation: architectureViewportSlideLeft 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.architecture-three-viewport.arch-slide-right {
  animation: architectureViewportSlideRight 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes architectureViewportSlideLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  46% {
    transform: translate3d(-106%, 0, 0);
  }
  54% {
    transform: translate3d(106%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes architectureViewportSlideRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  46% {
    transform: translate3d(106%, 0, 0);
  }
  54% {
    transform: translate3d(-106%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.architecture-section .architecture-three-viewport {
  border: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.architecture-three-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 48px;
  background: transparent;
  pointer-events: auto;
}
.architecture-three-viewport.has-page-scroll-rail::after {
  content: none;
}
.architecture-page-scroll-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 48px;
  border-left: 1px solid transparent;
  background: transparent;
  pointer-events: auto;
}
.architecture-page-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.architecture-page-scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1px;
  width: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.architecture-page-scrollbar:hover::before,
.architecture-page-scrollbar.is-dragging::before {
  background: rgba(255, 255, 255, 0.2);
}
.architecture-page-scrollbar[hidden] {
  display: none;
}
.architecture-page-scroll-rail[hidden] {
  display: none;
}
.architecture-page-scroll-drag-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.architecture-page-scroll-drag-layer .architecture-page-scrollbar {
  pointer-events: auto;
}
.architecture-page-scrollbar:focus-visible {
  outline: none;
}
.architecture-page-scrollbar:focus-visible::before {
  outline: 2px solid #bfd4ff;
  outline-offset: -2px;
}
.architecture-page-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 44px;
  cursor: grab;
}
.architecture-page-scroll-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  width: 8px;
  border-radius: 999px;
  background: #fff;
  pointer-events: none;
}
.architecture-page-scrollbar:hover .architecture-page-scroll-thumb::before,
.architecture-page-scrollbar:focus-visible
  .architecture-page-scroll-thumb::before,
.architecture-page-scrollbar.is-dragging
  .architecture-page-scroll-thumb::before {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
.architecture-page-scrollbar.is-dragging,
.architecture-page-scrollbar.is-dragging .architecture-page-scroll-thumb {
  cursor: grabbing;
}
@media (max-width: 980px) {
  .architecture-page-scroll-rail {
    width: 40px;
  }
}
@media (max-width: 720px) {
  .architecture-page-scroll-rail,
  .architecture-page-scroll-drag-layer {
    display: none;
  }
}
.architecture-mobile-shot-caption {
  display: none;
}
.architecture-three-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.architecture-agentrix-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.architecture-agentrix-fallback img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: saturate(0.92) contrast(1.03);
}
.architecture-three-viewport.has-agentrix-fallback
  .architecture-agentrix-fallback {
  opacity: 1;
}
.ontology-cy {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #f7f9fc;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}
.architecture-three-viewport:not(.is-ontology-empty) .ontology-cy,
.architecture-carousel[data-arch-view="agentrix"] .ontology-cy {
  visibility: hidden;
  pointer-events: none;
}
.architecture-three-viewport:not(.is-ontology-empty) .architecture-three-canvas,
.architecture-three-viewport:not(.is-ontology-empty)
  .architecture-three-canvas
  canvas {
  pointer-events: auto;
}
.ontology-three-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ontology-three-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes ontology-canvas-hint-blink {
  0%,
  100% {
    color: rgba(108, 124, 148, 0.5);
  }
  50% {
    color: rgba(82, 100, 124, 0.78);
  }
}
.ontology-three-canvas-stage {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
}
.ontology-canvas-hint-layer {
  display: none;
  pointer-events: none;
}
.ontology-canvas-hint-layer.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}
.ontology-canvas-interact-hint {
  display: none;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(98, 116, 140, 0.68);
  text-shadow:
    0 0 10px rgba(247, 249, 252, 0.95),
    0 1px 2px rgba(247, 249, 252, 0.88);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@keyframes agentrix-canvas-hint-blink {
  0%,
  100% {
    color: rgba(255, 255, 255, 0.42);
  }
  50% {
    color: rgba(255, 255, 255, 0.94);
  }
}
.agentrix-canvas-hint-layer {
  display: none;
  pointer-events: none;
}
.agentrix-canvas-hint-layer.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}
.agentrix-canvas-interact-hint {
  display: none;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (min-width: 981px) and (pointer: fine) {
  .architecture-three-viewport:not(.is-ontology-empty)
    .architecture-three-canvas-stage {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
  }

  .architecture-three-viewport:not(.is-ontology-empty)
    .architecture-three-canvas-stage
    canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .architecture-three-viewport:not(.is-ontology-empty)
    .agentrix-canvas-hint-layer,
  .ontology-cy .ontology-canvas-hint-layer {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.65rem, 3.5%, 1.25rem) 16px 0;
    box-sizing: border-box;
  }

  .architecture-three-viewport:not(.is-ontology-empty)
    .agentrix-canvas-interact-hint,
  .ontology-cy .ontology-canvas-interact-hint {
    display: block;
    position: static;
    max-width: 18rem;
    animation: agentrix-canvas-hint-blink 2.2s ease-in-out infinite;
  }

  .ontology-cy .ontology-canvas-interact-hint {
    animation-name: ontology-canvas-hint-blink;
  }
}
.ontology-cy-fallback {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(49, 68, 96, 0.72);
}
.architecture-three-viewport.is-ontology-empty {
  background: #f7f9fc !important;
  background-image: none !important;
  border-color: rgba(156, 174, 196, 0.42);
  contain: none;
}
.architecture-three-viewport.is-ontology-empty::before {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}
.architecture-three-viewport.is-ontology-empty .ontology-cy {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 260ms ease,
    visibility 0s;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #f7f9fc;
}
.architecture-three-viewport.is-ontology-empty .ontology-three-canvas,
.architecture-three-viewport.is-ontology-empty .ontology-three-canvas canvas {
  background: #f7f9fc;
}
.architecture-three-viewport.is-ontology-empty .architecture-agentrix-fallback {
  opacity: 0;
}
.architecture-three-viewport.is-ontology-empty::after {
  display: none;
  pointer-events: none;
}
.architecture-three-viewport.is-ontology-empty .architecture-three-overlay {
  display: none !important;
}
.architecture-three-viewport.is-switching-instant .ontology-cy,
.architecture-three-viewport.is-switching-instant .architecture-three-canvas {
  transition: none !important;
}
.architecture-sticky-header {
  background: var(--bg-soft);
  background-image: none;
}

.architecture-section.is-arch-view-ontology .architecture-sticky-header,
#architecture:has(.architecture-carousel[data-arch-view="ontology"])
  .architecture-sticky-header {
  background: var(--bg-soft);
  background-image: none;
}
.architecture-three-canvas,
.architecture-agentrix-fallback,
.ontology-cy,
.architecture-db-popup,
.architecture-task-popup,
.architecture-layer-popup,
.architecture-worker-popup,
.architecture-three-overlay {
  transition: opacity 240ms ease;
}

.architecture-three-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.architecture-three-overlay {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 3;
  padding: 4px 8px;
  border: 1px solid rgba(94, 130, 178, 0.36);
  border-radius: 6px;
  background: rgba(8, 14, 24, 0.74);
  color: rgba(193, 214, 246, 0.9);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.architecture-camera-panel {
  display: none;
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 18;
  width: min(420px, calc(100% - 28px));
  padding: 10px 10px 8px;
  border: 1px solid rgba(86, 109, 143, 0.34);
  border-radius: 12px;
  background: rgba(7, 13, 22, 0.78);
  color: rgba(221, 234, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.architecture-camera-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.architecture-camera-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.architecture-camera-status {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(165, 195, 238, 0.9);
}
.architecture-camera-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.architecture-camera-fields label {
  display: grid;
  gap: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(181, 206, 241, 0.86);
}
.architecture-camera-fields input {
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(84, 116, 162, 0.52);
  border-radius: 6px;
  background: rgba(9, 16, 27, 0.86);
  color: rgba(230, 240, 255, 0.96);
  font-size: 0.68rem;
}
.architecture-camera-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.architecture-camera-actions button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(95, 126, 172, 0.56);
  border-radius: 999px;
  background: rgba(12, 20, 33, 0.9);
  color: rgba(228, 239, 255, 0.94);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.architecture-camera-json {
  width: 100%;
  height: 96px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(84, 116, 162, 0.45);
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.92);
  color: rgba(214, 231, 255, 0.94);
  font-size: 0.62rem;
  line-height: 1.45;
  resize: vertical;
}
@media (max-width: 980px) {
  .architecture-camera-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-three-viewport::after {
    width: 40px;
  }
}
.ontology-camera-panel {
  display: none;
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 18;
  width: min(420px, calc(100% - 28px));
  padding: 10px 10px 8px;
  border: 1px solid rgba(86, 109, 143, 0.34);
  border-radius: 12px;
  background: rgba(7, 13, 22, 0.78);
  color: rgba(221, 234, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ontology-camera-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ontology-camera-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ontology-camera-status {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(165, 195, 238, 0.9);
}
.ontology-camera-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ontology-camera-fields label {
  display: grid;
  gap: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(181, 206, 241, 0.86);
}
.ontology-camera-fields input {
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(84, 116, 162, 0.52);
  border-radius: 6px;
  background: rgba(9, 16, 27, 0.86);
  color: rgba(230, 240, 255, 0.96);
  font-size: 0.68rem;
}
.ontology-camera-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ontology-camera-actions button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(95, 126, 172, 0.56);
  border-radius: 999px;
  background: rgba(12, 20, 33, 0.9);
  color: rgba(228, 239, 255, 0.94);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ontology-camera-json {
  width: 100%;
  height: 96px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(84, 116, 162, 0.45);
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.92);
  color: rgba(214, 231, 255, 0.94);
  font-size: 0.62rem;
  line-height: 1.45;
  resize: vertical;
}
@media (max-width: 980px) {
  .ontology-camera-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ontology-node-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 19;
  width: min(280px, 23%);
  max-height: none;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 18px 22px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: #000;
  color: rgba(244, 247, 251, 0.94);
}
@media (min-width: 981px) {
  .ontology-cy.is-rtl .ontology-node-panel {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl;
    text-align: right;
  }

  .ontology-cy.is-rtl .ontology-node-panel-list li {
    padding: 0 12px 0 0;
  }

  .ontology-cy.is-rtl .ontology-node-panel-list li::before {
    right: 0;
    left: auto;
  }
}
.ontology-node-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "kicker"
    "title"
    "summary"
    "meta"
    "points";
  align-items: start;
  gap: 16px;
}
.ontology-node-panel-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(143, 184, 255, 0.72);
}
.ontology-node-panel-title {
  margin: 0;
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: rgba(248, 252, 255, 0.98);
}
.ontology-node-panel-kicker {
  grid-area: kicker;
}
.ontology-node-panel-title {
  grid-area: title;
  align-self: start;
}
.ontology-node-panel-section {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.ontology-node-panel-section:nth-of-type(1) {
  grid-area: summary;
}
.ontology-node-panel-section-meta {
  grid-area: meta;
}
.ontology-node-panel-section:nth-of-type(3) {
  grid-area: points;
}
.ontology-node-panel-section-title {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(191, 212, 255, 0.58);
}
.ontology-node-panel-summary {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(232, 240, 252, 0.82);
  background: transparent;
}
.ontology-node-panel-meta {
  display: grid;
  gap: 8px;
}
.ontology-node-panel-meta-item {
  display: grid;
  gap: 2px;
}
.ontology-node-panel-meta-key {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(191, 212, 255, 0.5);
}
.ontology-node-panel-chip {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.78rem;
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: rgba(244, 247, 251, 0.88);
  background: transparent;
}
.ontology-node-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.ontology-node-panel-list li {
  position: relative;
  padding: 0 0 0 12px;
  border: 0;
  border-radius: 0;
  font-size: 0.78rem;
  line-height: 1.48;
  color: rgba(232, 240, 252, 0.78);
  background: transparent;
}
.ontology-node-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(143, 184, 255, 0.74);
}
@media (max-width: 980px) {
  .ontology-cy {
    display: flex;
    flex-direction: column;
  }

  .ontology-three-canvas {
    position: relative;
    inset: auto;
    order: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #f7f9fc;
  }

  .ontology-three-canvas-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ontology-three-canvas-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .ontology-canvas-hint-layer {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.65rem, 3.5%, 1.25rem) 16px 0;
    box-sizing: border-box;
  }

  .ontology-canvas-interact-hint {
    display: block;
    position: static;
    max-width: 18rem;
    animation: ontology-canvas-hint-blink 2.2s ease-in-out infinite;
  }

  .ontology-three-canvas canvas {
    flex: none;
    min-height: 0;
  }

  .ontology-node-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    order: 1;
    width: 100%;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    padding: 14px 16px 12px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .ontology-node-panel-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "summary";
    gap: 10px;
  }

  .ontology-node-panel-kicker,
  .ontology-node-panel-section-title {
    display: none;
  }

  .ontology-node-panel-section-meta,
  .ontology-node-panel-section:nth-of-type(3) {
    display: none;
  }

  .ontology-node-panel-title,
  .ontology-node-panel-section .ontology-node-panel-summary {
    letter-spacing: 0;
    word-spacing: 0;
  }
}
.architecture-reset-btn,
.architecture-rotate-lock-btn {
  position: absolute;
  right: 14px;
  z-index: 20;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  color: #dbeafe;
  background: rgba(2, 6, 23, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}
.architecture-reset-btn {
  bottom: 14px;
}
.architecture-rotate-lock-btn {
  bottom: 56px;
}
.architecture-rotate-lock-btn.is-active {
  color: #fef3c7;
  border-color: rgba(251, 191, 36, 0.62);
  background: rgba(69, 45, 8, 0.72);
}
.architecture-reset-btn:hover,
.architecture-rotate-lock-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(191, 219, 254, 0.58);
  background: rgba(15, 23, 42, 0.78);
}
.architecture-rotate-lock-btn.is-active:hover {
  border-color: rgba(253, 224, 71, 0.72);
  background: rgba(92, 60, 10, 0.82);
}
.architecture-reset-btn:active,
.architecture-rotate-lock-btn:active {
  transform: translateY(0);
}
.architecture-reset-btn:focus-visible,
.architecture-rotate-lock-btn:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 2px;
}
.architecture-reset-btn svg,
.architecture-rotate-lock-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.architecture-layer-popup {
  position: absolute;
  top: var(--layer-popup-safe-top, 14px);
  right: clamp(16px, 2.1vw, 30px);
  left: auto;
  z-index: 17;
  width: min(252px, calc(100% - 68px));
  padding: 8px 14px 12px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  -moz-column-gap: 10px;
  column-gap: 10px;
  row-gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(206, 226, 255, 0.42);
  background:
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.38),
      rgba(221, 236, 255, 0.2)
    ),
    linear-gradient(
      180deg,
      rgba(235, 246, 255, 0.22),
      rgba(216, 232, 255, 0.14)
    ),
    rgba(208, 226, 248, 0.2);
  box-shadow:
    0 22px 46px rgba(19, 38, 66, 0.18),
    0 2px 12px rgba(19, 38, 66, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(196, 220, 251, 0.28);
  color: rgba(16, 31, 52, 0.94);
  text-align: left;
  letter-spacing: 0.015em;
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  overflow: hidden;
}
.architecture-layer-popup[hidden] {
  display: none !important;
}
.architecture-layer-popup > :first-child {
  margin-top: 0;
}
.architecture-layer-popup-head,
.architecture-layer-popup-title,
.architecture-layer-popup-summary {
  grid-column: 1 / -1;
}
.architecture-layer-popup-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.architecture-layer-popup-kicker {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(20, 36, 58, 0.98);
}
.architecture-layer-popup-title {
  margin: 2px 0 0;
  line-height: 1.2;
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(36, 56, 84, 0.88);
}
.architecture-layer-popup-summary {
  margin: 2px 0 0;
  font-size: 0.66rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.architecture-layer-popup-stats {
  grid-column: 1;
  align-self: center;
  display: grid;
  gap: 4px;
  padding-right: 8px;
}
.architecture-layer-popup-stat {
  display: grid;
  grid-template-columns: auto;
  gap: 1px;
}
.architecture-layer-popup-stat-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(70, 96, 130, 0.72);
}
.architecture-layer-popup-stat-value {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(18, 35, 58, 0.9);
}
.architecture-layer-popup h3,
.architecture-layer-popup p,
.architecture-layer-popup li,
.architecture-layer-popup span,
.architecture-layer-popup strong {
  letter-spacing: 0.015em;
}
.architecture-layer-popup-features {
  grid-column: 2;
  align-self: center;
  margin: 0;
  padding: 0 0 0 0.8ch;
  list-style: none;
  border-left: 1px solid rgba(92, 118, 156, 0.34);
}
.architecture-layer-popup-features li {
  margin: 0;
  padding-left: 0.8ch;
  font-size: 0.6rem;
  line-height: 1.45;
  list-style: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.architecture-layer-popup-features li + li {
  margin-top: 4px;
}
.architecture-layer-popup-features li::marker {
  content: "";
}
.architecture-db-popup {
  position: absolute;
  top: var(--layer-popup-safe-top, 14px);
  right: 14px;
  z-index: 16;
  width: min(384px, calc(100% - 28px));
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(62, 82, 110, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9),
      rgba(247, 251, 255, 0.86)
    ),
    rgba(248, 252, 255, 0.84);
  box-shadow:
    0 16px 34px rgba(25, 39, 57, 0.14),
    0 2px 10px rgba(25, 39, 57, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  color: rgba(22, 34, 50, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.architecture-db-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.architecture-db-popup-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(66, 88, 118, 0.18);
  background: rgba(240, 247, 255, 0.66);
  color: rgba(34, 52, 78, 0.76);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.architecture-db-popup-title {
  margin: 8px 0 0;
  padding-right: 34px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(18, 30, 46, 0.94);
  text-wrap: balance;
}
.architecture-db-popup-summary {
  margin: 7px 0 0;
  font-size: 0.76rem;
  line-height: 1.58;
  color: rgba(38, 53, 76, 0.74);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.architecture-db-popup-metrics {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid rgba(74, 95, 123, 0.14);
  background: rgba(245, 250, 255, 0.64);
  overflow: hidden;
}
.architecture-db-popup-metric {
  padding: 6px 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid rgba(74, 95, 123, 0.1);
}
.architecture-db-popup-metric:last-child {
  border-bottom: 0;
}
.architecture-db-popup-metric-label {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(64, 85, 112, 0.62);
  min-width: 36px;
}
.architecture-db-popup-metric-value {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.36;
  color: rgba(27, 43, 64, 0.9);
  overflow-wrap: anywhere;
  word-break: break-all;
  min-width: 0;
}
.architecture-db-popup-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(74, 95, 123, 0.14);
}
.architecture-db-popup-list li {
  margin: 0;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(74, 95, 123, 0.1);
}
.architecture-db-popup-list li:last-child {
  border-bottom: 0;
}
.architecture-db-popup-list-key {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(72, 92, 118, 0.66);
}
.architecture-db-popup-list-value {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(29, 45, 66, 0.86);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.architecture-db-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(72, 96, 126, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  color: rgba(42, 60, 84, 0.66);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}
.architecture-db-popup-close:hover {
  background: rgba(255, 255, 255, 0.84);
  color: rgba(30, 47, 70, 0.86);
  border-color: rgba(72, 96, 126, 0.24);
}
.architecture-db-popup-close:active {
  transform: scale(0.94);
}
/* ── Worker popup ─────────────────────────────────────────────────────────── */
.architecture-worker-popup {
  --worker-accent-rgb: 112, 62, 178;
  position: absolute;
  top: var(--layer-popup-safe-top, 14px);
  right: 14px;
  left: auto;
  z-index: 17;
  width: min(240px, calc(100% - 28px));
  padding: 12px 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--worker-accent-rgb), 0.28);
  background: #f7f8fb;
  box-shadow:
    0 16px 34px rgba(60, 30, 90, 0.12),
    0 2px 10px rgba(60, 30, 90, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: rgba(30, 18, 48, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.architecture-worker-popup[hidden] {
  display: none !important;
}
.architecture-worker-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--worker-accent-rgb), 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(var(--worker-accent-rgb), 0.6);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.architecture-worker-popup-close:hover {
  background: rgba(var(--worker-accent-rgb), 0.16);
  color: rgba(var(--worker-accent-rgb), 0.9);
}
.architecture-worker-popup-close:active {
  transform: scale(0.94);
}
.architecture-worker-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  margin-bottom: 10px;
}
.architecture-worker-popup-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(var(--worker-accent-rgb), 0.16),
    rgba(var(--worker-accent-rgb), 0.34)
  );
  border: 1.5px solid rgba(var(--worker-accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.architecture-worker-popup-avatar::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(var(--worker-accent-rgb), 0.56);
  display: block;
  box-shadow: 0 0 0 1px rgba(var(--worker-accent-rgb), 0.12);
}
.architecture-worker-popup-avatar::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 16px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 10px 10px 6px 6px;
  background: rgba(var(--worker-accent-rgb), 0.38);
}
.architecture-worker-popup-id {
  margin: 0;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--worker-accent-rgb), 0.72);
}
.architecture-worker-popup-role {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(28, 14, 50, 0.92);
}
.architecture-worker-popup-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.architecture-worker-popup-metric {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(var(--worker-accent-rgb), 0.14);
  background: rgba(var(--worker-accent-rgb), 0.08);
}
.architecture-worker-popup-metric-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--worker-accent-rgb), 0.64);
}
.architecture-worker-popup-metric-dept,
.architecture-worker-popup-metric-load,
.architecture-worker-popup-metric-level,
.architecture-worker-popup-metric-since {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(28, 14, 50, 0.88);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.architecture-worker-popup-task {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--worker-accent-rgb), 0.12);
  border: 1px solid rgba(var(--worker-accent-rgb), 0.16);
  margin-bottom: 10px;
}
.architecture-worker-popup-task-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--worker-accent-rgb), 0.64);
  margin-bottom: 4px;
}
.architecture-worker-popup-task-value {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(28, 14, 50, 0.88);
}
.architecture-worker-popup-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.architecture-worker-popup-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(130, 130, 140, 0.5);
}
.architecture-worker-popup-status-dot[data-status="运行中"] {
  background: #34c97a;
  box-shadow: 0 0 6px rgba(52, 201, 122, 0.5);
}
.architecture-worker-popup-status-dot[data-status="待命"] {
  background: #8ab0e8;
}
.architecture-worker-popup-status-dot[data-status="审核中"] {
  background: #f0a040;
}
.architecture-worker-popup-status-text {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(50, 30, 80, 0.7);
}

.architecture-task-popup {
  position: absolute;
  top: var(--layer-popup-safe-top, 14px);
  right: 14px;
  z-index: 17;
  width: min(192px, calc(100% - 28px));
  padding: 14px 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(58, 80, 112, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(247, 252, 255, 0.9),
      rgba(239, 247, 255, 0.88)
    ),
    rgba(247, 251, 255, 0.86);
  box-shadow:
    0 16px 36px rgba(24, 40, 66, 0.16),
    0 2px 10px rgba(24, 40, 66, 0.08);
  color: rgba(20, 33, 52, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.architecture-task-popup-title {
  margin: 0;
  padding-right: 34px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 33, 52, 0.96);
}
.architecture-task-popup-kicker {
  margin: 0 0 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(64, 85, 112, 0.68);
}
.architecture-task-popup-summary {
  margin: 7px 0 0;
  font-size: 0.76rem;
  line-height: 1.58;
  color: rgba(34, 52, 78, 0.76);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.architecture-task-popup-meta {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.architecture-task-popup-meta-item {
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(76, 102, 138, 0.16);
  background: rgba(245, 250, 255, 0.72);
}
.architecture-task-popup-meta-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(67, 89, 118, 0.64);
}
.architecture-task-popup-meta-value {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.32;
  color: rgba(24, 40, 61, 0.92);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.architecture-task-popup-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(76, 102, 138, 0.14);
  margin-bottom: 2px;
}
.architecture-task-popup-list li {
  margin: 0;
  padding: 6px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.44;
  color: rgba(30, 48, 71, 0.84);
  border-bottom: 1px solid rgba(76, 102, 138, 0.1);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.architecture-task-popup-list li:last-child {
  border-bottom: 0;
}
.architecture-task-popup-progressbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(
      90deg,
      rgba(172, 194, 223, 0.12),
      rgba(172, 194, 223, 0.04)
    ),
    rgba(229, 239, 251, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(107, 132, 168, 0.08);
  overflow: hidden;
}
.architecture-task-popup-progressbar-fill {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 10px 10px 12px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(90, 48, 176, 0.9), rgba(118, 72, 204, 0.86)),
    rgba(102, 60, 190, 0.88);
  box-shadow:
    0 0 10px rgba(103, 66, 183, 0.26),
    inset 0 -1px 0 rgba(73, 41, 140, 0.28);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.architecture-task-popup-progressbar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(15, 22, 36, 0.38);
  pointer-events: none;
}
.architecture-task-popup-progressbar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 5px,
    rgba(255, 255, 255, 0.02) 5px,
    rgba(255, 255, 255, 0.02) 10px
  );
  animation: taskProgressStripe 1800ms linear infinite;
}
.architecture-task-popup-progressbar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 18%,
    rgba(255, 255, 255, 0.34) 46%,
    transparent 74%
  );
  transform: translateX(-120%);
  animation: taskProgressSheen 2600ms ease-in-out infinite;
}
@keyframes taskProgressStripe {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(20px);
  }
}
@keyframes taskProgressSheen {
  0% {
    transform: translateX(-120%);
  }
  55% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(140%);
  }
}
.architecture-task-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(72, 96, 126, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  color: rgba(42, 60, 84, 0.66);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}
.architecture-task-popup-close:hover {
  background: rgba(255, 255, 255, 0.84);
  color: rgba(30, 47, 70, 0.86);
  border-color: rgba(72, 96, 126, 0.24);
}
.architecture-task-popup-close:active {
  transform: scale(0.94);
}
.architecture-db-popup-close,
.architecture-task-popup-close,
.architecture-worker-popup-close {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  .architecture-reset-btn,
  .architecture-rotate-lock-btn,
  .architecture-db-popup-close,
  .architecture-task-popup-close,
  .architecture-worker-popup-close {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}
@media (max-width: 720px) {
  .architecture-layer-popup {
    top: var(--layer-popup-safe-top, 10px);
    right: 10px;
    width: min(300px, calc(100% - 20px));
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: 8px;
  }

  .architecture-layer-popup-stats,
  .architecture-layer-popup-features {
    align-self: center;
  }

  .architecture-layer-popup-stats {
    grid-column: 1;
  }

  .architecture-layer-popup-features {
    grid-column: 2;
    margin-top: 0;
  }

  .architecture-three-overlay {
    display: none;
  }

  .architecture-db-popup {
    top: var(--layer-popup-safe-top, 10px);
    right: 10px;
    width: calc(100% - 20px);
    padding: 14px 14px 12px;
    border-radius: 12px;
  }

  .architecture-db-popup-title {
    font-size: 0.98rem;
  }

  .architecture-db-popup-summary {
    font-size: 0.76rem;
  }

  .architecture-db-popup-metrics {
    grid-template-columns: 1fr;
  }

  .architecture-db-popup-metric {
    border-right: 0;
    border-bottom: 1px solid rgba(74, 95, 123, 0.12);
  }

  .architecture-db-popup-metric:last-child {
    border-bottom: 0;
  }

  .architecture-three-viewport .architecture-db-popup {
    top: max(
      calc(var(--layer-popup-safe-top, 10px) + 42px),
      calc(env(safe-area-inset-top) + 58px)
    );
    right: auto;
    left: 50%;
    width: min(268px, calc(100% - 56px));
    padding: 10px;
    transform: translateX(-50%);
  }

  .architecture-three-viewport .architecture-db-popup-list {
    display: none;
  }

  .architecture-three-viewport .architecture-db-popup-chip {
    display: none;
  }

  .architecture-three-viewport .architecture-db-popup-title {
    font-size: 1rem;
  }

  .architecture-three-viewport .architecture-db-popup-summary {
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .architecture-three-viewport .architecture-db-popup-metrics {
    margin-top: 0;
  }

  .architecture-task-popup {
    top: var(--layer-popup-safe-top, 10px);
    right: 10px;
    width: calc(100% - 20px);
    padding: 12px 12px 16px;
  }

  .architecture-three-viewport .architecture-task-popup {
    top: max(
      calc(var(--layer-popup-safe-top, 10px) + 42px),
      calc(env(safe-area-inset-top) + 58px)
    );
    right: auto;
    left: 50%;
    width: min(300px, calc(100% - 56px));
    padding-bottom: 32px;
    transform: translateX(-50%);
  }

  .architecture-task-popup-meta,
  .architecture-three-viewport .architecture-task-popup-meta {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .architecture-three-viewport .architecture-task-popup-summary {
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .architecture-three-viewport .architecture-task-popup-meta-item:first-child {
    display: none;
  }

  .architecture-three-viewport .architecture-task-popup-meta-item:nth-child(3) {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
  }

  .architecture-three-viewport
    .architecture-task-popup-meta-item:nth-child(3)
    .architecture-task-popup-meta-label,
  .architecture-three-viewport
    .architecture-task-popup-meta-item:nth-child(3)
    .architecture-task-popup-meta-value {
    margin-top: 0;
    color: rgba(24, 40, 61, 0.76);
  }

  .architecture-worker-popup {
    top: var(--layer-popup-safe-top, 10px);
    right: 10px;
    left: auto;
    width: calc(100% - 20px);
  }

  .architecture-three-viewport .architecture-worker-popup {
    top: max(
      calc(var(--layer-popup-safe-top, 10px) + 42px),
      calc(env(safe-area-inset-top) + 58px)
    );
    right: auto;
    left: 50%;
    width: min(280px, calc(100% - 56px));
    transform: translateX(-50%);
  }
}

/* @block agentrix-scrolly — mobile coarse-pointer scrolly; pairs with agentrix_mobile/main.js */
.agentrix-scrolly {
  position: relative;
  display: none;
  width: 100%;
  z-index: 1;
}
.agentrix-scrolly.is-active {
  display: block;
}
/* --arch-sticky-header-height is measured on #architecture by scene-engine.js (mobile coarse). */
.agentrix-scrolly-sticky {
  position: sticky;
  top: var(--arch-sticky-header-height, 96px);
  width: 100%;
  height: calc(100svh - var(--arch-sticky-header-height, 96px));
  display: grid;
  place-items: center;
  z-index: 1;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(191, 212, 255, 0.08),
      transparent 34%
    ),
    linear-gradient(180deg, rgba(5, 7, 10, 0.12), rgba(5, 7, 10, 0.5)),
    var(--bg-soft);
}
/* is-ended is not toggled on mobile; desktop coarse uses mobile-scrolly rules only. */
.agentrix-scrolly-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.agentrix-scrolly-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.8);
  background: rgba(5, 8, 14, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.agentrix-scrolly-panel {
  position: absolute;
  top: clamp(16px, 4vw, 28px);
  right: clamp(14px, 4vw, 24px);
  width: min(260px, calc(100% - 40px));
  z-index: 25;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  transition: none;
  will-change: opacity, transform;
}
.agentrix-scrolly-panel.is-visible {
  pointer-events: auto;
}
.agentrix-scrolly-panel .architecture-layer-popup-badge {
  display: none;
}
.agentrix-scrolly-beat[hidden] {
  display: none !important;
}
.agentrix-scrolly-panel--database {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.agentrix-scrolly-panel--database
  .agentrix-scrolly-beat--database.architecture-db-popup {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
}
.agentrix-scrolly-panel--task,
.agentrix-scrolly-panel--task.architecture-layer-popup {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  row-gap: 0;
  overflow: visible;
}
.agentrix-scrolly-panel--task
  .agentrix-scrolly-beat--task.architecture-task-popup {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
}
.agentrix-scrolly-panel--worker,
.agentrix-scrolly-panel--worker.architecture-layer-popup {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  row-gap: 0;
  overflow: visible;
}
.agentrix-scrolly-panel--worker
  .agentrix-scrolly-beat--worker.architecture-worker-popup {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
}
.agentrix-scrolly.is-ready .agentrix-scrolly-loader {
  opacity: 0;
  pointer-events: none;
}
.agentrix-scrolly-axis {
  display: none;
}
.agentrix-scrolly-entry-cue {
  display: none;
}
/* --- Agentrix mobile scrolly: coarse pointer --- */
@media (max-width: 720px) and (pointer: coarse) {
  .agentrix-scrolly-beat {
    --am-beat-text-scale: 1;
    max-height: var(--am-beat-max-height, none);
    overflow: hidden;
  }

  .architecture-carousel[data-arch-view="agentrix"]
    .architecture-carousel-slide.is-agentrix-scrolly {
    min-height: 500vh;
  }

  .architecture-three-viewport.is-agentrix-scrolly {
    min-height: 0;
    height: auto;
    overflow: visible;
    background: transparent;
  }

  .architecture-three-viewport.is-agentrix-scrolly .architecture-three-canvas,
  .architecture-three-viewport.is-agentrix-scrolly
    .architecture-agentrix-fallback,
  .architecture-three-viewport.is-agentrix-scrolly .architecture-three-overlay,
  .architecture-three-viewport.is-agentrix-scrolly .ontology-cy {
    display: none;
  }

  .architecture-carousel[data-arch-view="agentrix"] {
    overflow: visible;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly {
    height: 500vh;
  }
  .architecture-carousel-slide.is-agentrix-scrolly {
    --scrolly-stage-height: 100svh;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-sticky {
    top: 0;
    height: var(--scrolly-stage-height);
    place-items: stretch;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-axis {
    --axis-progress: 0%;
    position: absolute;
    top: 50%;
    right: max(4px, env(safe-area-inset-right));
    z-index: 34;
    display: block;
    width: 28px;
    height: clamp(156px, 32svh, 210px);
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    transform: translate3d(6px, -50%, 0);
    transition:
      opacity 220ms ease,
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly.is-ready
    .agentrix-scrolly-axis {
    opacity: 0.92;
    pointer-events: auto;
    transform: translate3d(0, -50%, 0);
    visibility: visible;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis::before,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis::before {
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(148, 163, 184, 0.12),
      rgba(148, 163, 184, 0.5) 18%,
      rgba(148, 163, 184, 0.5) 82%,
      rgba(148, 163, 184, 0.12)
    );
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis::after {
    height: var(--axis-progress);
    background: linear-gradient(
      180deg,
      rgba(125, 178, 255, 0.28),
      rgba(191, 212, 255, 0.95)
    );
    box-shadow: 0 0 9px rgba(96, 165, 250, 0.36);
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-entry-cue {
    position: absolute;
    top: clamp(16px, 4svh, 32px);
    left: 50%;
    z-index: 36;
    display: flex;
    width: -moz-max-content;
    width: max-content;
    max-width: min(80vw, 18rem);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-entry-cue-label {
    font-size: clamp(0.68rem, 2.8vw, 0.76rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: rgba(238, 246, 255, 0.82);
    text-shadow: 0 2px 12px rgba(14, 24, 38, 0.42);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-entry-cue::after {
    width: 16px;
    height: 16px;
    border-right: 2px solid rgba(238, 246, 255, 0.9);
    border-bottom: 2px solid rgba(238, 246, 255, 0.9);
    content: "";
    filter: drop-shadow(0 2px 10px rgba(14, 24, 38, 0.28));
    transform: rotate(45deg);
    animation: agentrix-entry-cue-bob 2.2s ease-in-out infinite;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis-button {
    position: absolute;
    top: var(--axis-position);
    left: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    cursor: pointer;
    place-items: center;
    touch-action: manipulation;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-axis-node {
    position: relative;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.74);
    transition:
      width 180ms cubic-bezier(0.22, 1, 0.36, 1),
      height 180ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis-button.is-past
    .agentrix-scrolly-axis-node {
    background: rgba(125, 178, 255, 0.88);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis-button.is-active
    .agentrix-scrolly-axis-node {
    width: 6px;
    height: 18px;
    background: #dbeafe;
    box-shadow: 0 0 12px rgba(125, 178, 255, 0.76);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis-button:active
    .agentrix-scrolly-axis-node {
    transform: scale(0.82);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-axis-button:focus-visible {
    outline: 1px solid rgba(219, 234, 254, 0.92);
    outline-offset: -5px;
    border-radius: 999px;
  }

  /* Let product map paint above the sticky scrolly stage when sections overlap. */
  .architecture-section .architecture-layers {
    position: relative;
    z-index: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-sticky {
    z-index: 1;
  }

  #business.business-section {
    position: relative;
    z-index: 2;
    isolation: isolate;
  }

  .architecture-carousel-slide.is-agentrix-scrolly .agentrix-scrolly-panel {
    top: clamp(88px, 26vh, 148px);
    right: var(--gutter);
    left: var(--gutter);
    bottom: auto;
    width: auto;
    max-width: none;
    padding: 12px 14px 14px;
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-head,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-summary,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-stats,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-features {
    grid-column: 1;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-right: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-features {
    border-left: 0;
    padding-left: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-kicker {
    font-size: calc(1.05rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-summary {
    font-size: calc(0.78rem * var(--am-beat-text-scale, 1));
    line-height: 1.5;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-stat-label {
    font-size: calc(0.62rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-stat-value {
    font-size: calc(0.92rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel
    .architecture-layer-popup-features
    li {
    font-size: calc(0.72rem * var(--am-beat-text-scale, 1));
    line-height: 1.45;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database {
    padding: 0;
    grid-template-columns: none;
    row-gap: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .agentrix-scrolly-beat--database.architecture-db-popup {
    width: 100%;
    max-width: none;
    padding: 12px 14px;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-title {
    font-size: calc(1rem * var(--am-beat-text-scale, 1));
    padding-right: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-summary {
    font-size: calc(0.78rem * var(--am-beat-text-scale, 1));
    line-height: 1.5;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-metric-label {
    font-size: calc(0.62rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-metric-value {
    font-size: calc(0.74rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-list-key {
    font-size: calc(0.5rem * var(--am-beat-text-scale, 1));
    letter-spacing: 0.1em;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-list-value {
    font-size: calc(0.6rem * var(--am-beat-text-scale, 1));
    line-height: 1.38;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -moz-column-gap: 6px;
         column-gap: 6px;
    row-gap: 4px;
    padding-top: 4px;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-list
    li {
    padding: 3px 2px;
    border-bottom: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--database
    .architecture-db-popup-list
    li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task.architecture-layer-popup {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    row-gap: 0;
    overflow: visible;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .agentrix-scrolly-beat--task.architecture-task-popup {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(340px, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 14px 14px;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-kicker {
    font-size: calc(0.58rem * var(--am-beat-text-scale, 1));
    letter-spacing: 0.14em;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-title {
    font-size: calc(1rem * var(--am-beat-text-scale, 1));
    padding-right: 0;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-summary {
    font-size: calc(0.78rem * var(--am-beat-text-scale, 1));
    line-height: 1.5;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-list
    li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(76, 102, 138, 0.1);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-list-key {
    font-size: calc(0.5rem * var(--am-beat-text-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(67, 89, 118, 0.64);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--task
    .architecture-task-popup-list-value {
    font-size: calc(0.68rem * var(--am-beat-text-scale, 1));
    font-weight: 600;
    line-height: 1.38;
    color: rgba(30, 48, 71, 0.86);
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker.architecture-layer-popup {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    row-gap: 0;
    overflow: visible;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .agentrix-scrolly-beat--worker.architecture-worker-popup {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(340px, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 14px 14px;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-id {
    font-size: calc(0.5rem * var(--am-beat-text-scale, 1));
    letter-spacing: 0.12em;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-role {
    font-size: calc(0.92rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-metric-label {
    font-size: calc(0.48rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-metric-dept,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-metric-load,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-metric-level,
  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-metric-since {
    font-size: calc(0.62rem * var(--am-beat-text-scale, 1));
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-task-value {
    font-size: calc(0.66rem * var(--am-beat-text-scale, 1));
    line-height: 1.38;
  }

  .architecture-carousel-slide.is-agentrix-scrolly
    .agentrix-scrolly-panel--worker
    .architecture-worker-popup-status-text {
    font-size: calc(0.58rem * var(--am-beat-text-scale, 1));
  }
}

@keyframes agentrix-entry-cue-bob {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.42;
  }

  50% {
    transform: rotate(45deg) translate(7px, 7px);
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agentrix-scrolly-axis,
  .agentrix-scrolly-axis-node,
  .agentrix-scrolly-entry-cue::after {
    animation: none !important;
    transition: none !important;
  }
}

/* @block home — hero video, business panels, typing */
.hero {
  --hero-fg: #f4f7fb;
  --hero-muted: rgba(244, 247, 251, 0.84);
  --hero-accent: #bfd4ff;
  --hero-line: rgba(191, 212, 255, 0.72);
  --hero-line-fade: rgba(191, 212, 255, 0.14);
  --hero-shadow: 0 2px 18px rgba(0, 0, 0, 0.46);
  --hero-secondary-bg: rgba(7, 12, 20, 0.14);
  --hero-secondary-border: rgba(214, 228, 255, 0.32);
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  border-top: none;
  isolation: isolate;
  background: transparent;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 44%;
  object-position: center 44%;
  filter: saturate(1.08) contrast(1.16) brightness(1.02);
}
.hero-video-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      60% 80% at 12% 46%,
      rgba(10, 16, 26, 0.03),
      transparent 66%
    ),
    radial-gradient(
      52% 72% at 78% 22%,
      rgba(10, 16, 26, 0.04),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(8, 12, 20, 0.05),
      rgba(8, 12, 18, 0.1) 38%,
      rgba(8, 11, 17, 0.16) 100%
    );
}
.hero-grid,
.section-frame {
  width: 100%;
  margin: 0;
  padding: clamp(20px, 3vw, 48px) var(--gutter);
}
.architecture-section .section-frame {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.home-page .hero {
  margin-bottom: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.85fr);
  gap: clamp(24px, 3vw, 72px);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  z-index: 2;
}
.home-page .hero-grid {
  grid-template-columns: 1fr;
  padding-top: clamp(96px, 9vw, 132px);
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4.8vh, 44px);
  transform: translateX(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.hero-scroll-arrow {
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(238, 246, 255, 0.9);
  border-bottom: 2px solid rgba(238, 246, 255, 0.9);
  transform: rotate(45deg);
  filter: drop-shadow(0 2px 10px rgba(14, 24, 38, 0.28));
  animation: hero-scroll-arrow-bob 2.2s ease-in-out infinite;
}
@keyframes hero-scroll-arrow-bob {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.42;
  }
  50% {
    transform: rotate(45deg) translate(7px, 7px);
    opacity: 0.96;
  }
}
.home-page .hero-copy {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  max-width: min(86vw, 1200px);
}
.home-page .hero .eyebrow {
  color: var(--hero-muted);
  text-shadow: var(--hero-shadow);
  font-size: clamp(0.72rem, 0.95vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 8px 0;
  max-width: min(86vw, 1200px);
}
.eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero h1,
.section-heading h2 {
  margin: 0;
  font-family: var(--font-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero h1 {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(3.2rem, 7vw, 8rem);
  font-weight: 900;
  min-height: 1.1em;
  padding-right: 0.12em;
  position: relative;
  text-wrap: balance;
}
#company-intro {
  display: grid;
  justify-items: center;
  width: min(100%, 58rem);
  gap: clamp(12px, 1.8vh, 22px);
  padding-right: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.75;
}
.hero-intro-line {
  display: block;
  text-wrap: balance;
}
.hero-intro-line:first-child {
  max-width: 28ch;
  color: var(--hero-fg);
  font-size: clamp(1.6rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.hero-intro-line:last-child {
  max-width: 48ch;
  color: var(--hero-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}
.home-page .hero h1 {
  color: var(--hero-fg);
  text-shadow: var(--hero-shadow);
}
.hero h1 .typing-content,
.business-panel-name .typing-content,
.practice-card > .practice-card-title .typing-content {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-height: inherit;
}
.hero h1.typing .typed-char {
  display: inline-block;
  opacity: 0;
  animation: char-flash 220ms ease-out forwards;
}
.hero h1.typing .typing-content::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  top: 50%;
  width: 0.045em;
  height: 0.88em;
  margin-inline-start: 0.06em;
  background: var(--hero-accent);
  transform: translateY(-52%);
  animation: caret-blink 900ms steps(1) infinite;
}
.hero h1.typing.done .typing-content::after {
  animation:
    caret-blink 900ms steps(1) 2,
    caret-fade 420ms ease forwards;
  animation-delay: 0s, 500ms;
}
.hero-text,
.section-heading p,
.business-summary,
.pipeline-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 1rem;
}
.practice-description {
  margin: 0;
  color: var(--text-muted);
}
.hero-text {
  max-width: 64ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.9;
}
.home-page .hero .hero-text.typing .typing-content {
  display: inline;
  min-height: 0;
}
.home-page .hero .hero-text .typing-content {
  display: inline;
  min-height: 0;
  white-space: inherit;
}
.home-page .hero .hero-text.typing .typed-char {
  display: inline-block;
  opacity: 0;
  animation: char-flash 220ms ease-out forwards;
}
.home-page .hero .hero-text {
  color: var(--hero-muted);
  text-shadow: var(--hero-shadow);
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  line-height: 1.75;
  white-space: pre-wrap;
}
.home-page .hero .hero-actions .button {
  border: 0;
  background: transparent;
  border-radius: 0;
  min-height: auto;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home-page .hero-actions {
  justify-content: center;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}
.button-primary {
  color: var(--text);
  background: transparent;
  justify-content: flex-start;
  min-height: auto;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-page .hero .button-primary {
  color: var(--hero-fg);
  text-shadow: var(--hero-shadow);
  padding: 0;
}
.button-primary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, var(--hero-line), var(--hero-line-fade));
}
.button-primary::after {
  content: "\2192";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--hero-accent);
}
.home-page .hero .button-primary::before,
.home-page .hero .button-primary::after {
  content: none;
}
.button-secondary,
.button-download {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}
.home-page .hero .button-secondary {
  color: var(--hero-fg);
  border-color: transparent;
  background: transparent;
  text-shadow: var(--hero-shadow);
  padding: 0;
  min-height: auto;
  border-radius: 0;
}
.practice-card,
.pipeline-card {
  background: none;
  border: 0;
}
.pipeline-index {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}
.pipeline-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.12rem;
  font-weight: 600;
}
.logo-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.logo-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(220px, 20vw, 300px);
  min-height: 112px;
  padding: 24px 38px;
  overflow: visible;
  color: var(--text-faint);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid var(--line);
}
.logo-item img {
  width: 130px;
  max-width: none;
  max-height: none;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(1.06) contrast(1.04);
  transition:
    filter 180ms ease,
    opacity 180ms ease;
}
.logo-item:hover img {
  opacity: 1;
  filter: brightness(1.02) contrast(1.02);
}
.logo-item.placeholder::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 14px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(143, 184, 255, 0.05);
}
.section-frame {
  display: grid;
  gap: 28px;
}
.section-heading {
  display: grid;
  gap: 10px;
  max-width: min(72ch, 62vw);
}
.business-heading {
  margin-bottom: 6px;
}
.section-heading-wide {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: end;
  max-width: none;
}
.section-heading h2 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 800;
}
.business-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 2vw, 32px);
}
.business-panel {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
  position: relative;
}
.business-panel:hover,
.business-panel:focus-visible {
  transform: none;
}
.business-panel:active {
  transform: none;
}
.business-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(191, 212, 255, 0.28),
    rgba(191, 212, 255, 0)
  );
  opacity: 0;
  transition: opacity 180ms ease;
}
.business-panel:hover::after,
.business-panel:focus-visible::after {
  opacity: 0;
}
.business-panel:hover .business-panel-name,
.business-panel:focus-visible .business-panel-name {
  color: var(--accent-2);
}
.business-panel:hover .business-panel-body,
.business-panel:focus-visible .business-panel-body {
  border-top-color: var(--line);
}
.business-panel-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
  min-width: 0;
}
.business-panel-index {
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.business-panel-name {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--accent-2);
  white-space: normal;
  word-break: break-word;
  width: 100%;
}
.business-panel-subtitle {
  display: block;
  width: 100%;
  margin-top: -4px;
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.015em;
  color: rgba(220, 229, 242, 0.74);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.business-panel-name.typing {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
}
.business-panel-name.typing .typed-char {
  display: inline-block;
  opacity: 0;
  animation: char-flash 220ms ease-out forwards;
}
.practice-card > .practice-card-title.typing .typed-char {
  display: inline-block;
  opacity: 0;
  animation: char-flash 220ms ease-out forwards;
}
.business-panel-name.typing .typing-content::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  top: 50%;
  width: 0.045em;
  height: 0.88em;
  margin-inline-start: 0.06em;
  background: var(--accent-2);
  transform: translateY(-52%);
  animation: caret-blink 900ms steps(1) infinite;
}
.practice-card > .practice-card-title.typing .typing-content::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  top: 50%;
  width: 0.045em;
  height: 0.88em;
  margin-inline-start: 0.06em;
  background: var(--accent-2);
  transform: translateY(-52%);
  animation: caret-blink 900ms steps(1) infinite;
}
.business-panel-name.typing.done .typing-content::after {
  animation:
    caret-blink 900ms steps(1) 2,
    caret-fade 420ms ease forwards;
  animation-delay: 0s, 500ms;
}
.practice-card > .practice-card-title.typing.done .typing-content::after {
  animation:
    caret-blink 900ms steps(1) 2,
    caret-fade 420ms ease forwards;
  animation-delay: 0s, 500ms;
}
.business-panel-tagline {
  display: block;
  margin-top: 4px;
  padding-inline-start: 4px;
  white-space: normal;
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: none;
  color: var(--text-faint);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.business-panel-links {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
  margin-left: 0;
  flex-wrap: wrap;
  white-space: nowrap;
}
.business-panel-industries {
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  font-size: 0.99rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(191, 212, 255, 0.58);
  white-space: normal;
}
.business-summary.business-summary-inline {
  max-width: 100%;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  line-height: 1.65;
}
.business-summary-nowrap {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}
.business-panel-body {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.business-panel-agentrix .business-panel-body {
  background-position: center 48%;
}
.business-panel-voice-agent .business-panel-body {
  background-position: center 65%;
}
.business-panel-digital-human .business-panel-body {
  background-position: center 40%;
}
.business-summary {
  color: var(--text);
  font-size: 0.61rem;
  font-weight: 400;
  line-height: 1.6;
}

/* @block practices — practice cards, embeds, practices-hero */
.practice-stream {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  position: relative;
}
.practice-card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  grid-template-areas:
    "title title"
    "media side";
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
  margin: 0;
  padding-bottom: 28px;
  position: relative;
  transition: transform 180ms ease;
}
.practice-card > .practice-card-title {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.practice-card:hover {
  transform: translateY(-2px);
}
.practice-media {
  grid-area: media;
  background:
    radial-gradient(
      circle at top left,
      rgba(143, 184, 255, 0.12),
      transparent 30%
    ),
    linear-gradient(180deg, #101722 0%, #0a0f16 100%);
}
.practice-card-bridge .practice-media {
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 520px;
}
.practices-page .practice-card-bridge .practice-media {
  min-height: 0;
}
.practice-card-supply .practice-media {
  background: transparent;
}
.practice-card-bridge .workflow-board {
  background: transparent;
}
.practice-card-supply .workflow-board {
  background: transparent;
}
.practice-card-bridge .workflow-board::before {
  display: none;
}
.practice-card-supply .workflow-board::before {
  display: none;
}
.practice-card-voiceagent-1 .practice-media {
  background: #161616;
}
.practice-card-bridge .practice-actions {
  transform: translateY(-20px);
}
.practice-media iframe,
.practice-media video,
.practice-media img,
.practice-media .media-placeholder,
.practice-media .audio-player,
.practice-media .workflow-board {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.practice-card-bridge
  .practice-media
  .talent-cycle-board.is-embedded-in-practice {
  width: calc(100% / 0.8);
  max-width: none;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  transform: scale(0.8);
  transform-origin: top left;
  margin: 0;
}
/* @block practices — Metro v18 locale reflow (iframe document only) */
html.metro-i18n,
html.metro-i18n body {
  min-height: 100%;
  height: auto;
  overflow: visible;
}
html.metro-i18n .app {
  min-width: 0;
  overflow: clip;
}
html.metro-i18n .network-visual,
html.metro-i18n .network-map,
html.metro-i18n .line-key,
html.metro-i18n .stage-count,
html.metro-i18n .step-index,
html.metro-i18n .result-item strong {
  direction: ltr;
}
html.metro-i18n .decision-body {
  overflow: visible;
}
html.metro-i18n .stage-description,
html.metro-i18n .evidence-chip b,
html.metro-i18n .evidence-chip span,
html.metro-i18n .step-label,
html.metro-i18n .result-item span,
html.metro-i18n .system-note b,
html.metro-i18n .system-note span,
html.metro-i18n .incident-name,
html.metro-i18n .incident-meta {
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}
html.metro-i18n .workflow-step {
  text-align: start;
}
html.metro-i18n .scenario-button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.metro-i18n .scenario-icon,
html.metro-i18n .action-icon {
  flex-shrink: 0;
}
html.metro-i18n .scenario-list {
  min-width: 0;
}
html.metro-i18n .incident-strip > div,
html.metro-i18n .decision-body > div,
html.metro-i18n .result-item {
  min-width: 0;
}
html.metro-i18n .incident-level {
  white-space: normal;
  max-width: 34%;
  overflow-wrap: anywhere;
}
html.metro-i18n .action-button {
  min-width: 0;
  max-width: 58%;
  padding-block: 8px;
  overflow-wrap: anywhere;
}
html.metro-i18n .system-note {
  flex: 1;
}
html.metro-i18n .step-state {
  max-width: 65px;
  overflow-wrap: anywhere;
}
html.metro-i18n[dir="rtl"] .decision-card,
html.metro-i18n[dir="rtl"] .incident-strip,
html.metro-i18n[dir="rtl"] .scenario-bar {
  direction: rtl;
  text-align: start;
}
html.metro-i18n[dir="rtl"] .hub-label {
  direction: ltr;
  unicode-bidi: isolate;
}
html.metro-i18n .metro-locale-feedback {
  position: fixed;
  z-index: 30;
  inset-inline: 20px;
  bottom: 20px;
  padding: 12px;
  color: #a9bbc2;
  background: #0b171d;
}
html.metro-i18n .metro-locale-feedback[hidden] {
  display: none;
}
@media (min-width: 521px) {
  html.metro-i18n .scenario-bar {
    max-width: calc(100% - min(350px, 29vw) - 76px);
  }
}
@media (min-width: 521px) and (max-width: 900px) {
  html.metro-i18n .scenario-bar {
    max-width: calc(100% - var(--decision-width) - 42px);
  }
  html.metro-i18n .scenario-label {
    display: none;
  }
}
@media (max-width: 520px) {
  html.metro-i18n .app {
    height: auto;
    min-height: 100svh;
    grid-template-rows: auto auto;
  }
  html.metro-i18n .workspace {
    grid-template-rows: auto auto;
  }
  html.metro-i18n .map-card {
    min-height: 270px;
  }
  html.metro-i18n .network-visual {
    display: grid;
    grid-template-rows: 190px auto;
    min-height: 225px;
    overflow: visible;
  }
  html.metro-i18n .network-map {
    min-height: 190px;
    height: 190px;
  }
  html.metro-i18n .incident-strip {
    position: relative;
    inset: auto;
    margin: 0 8px 8px;
    width: calc(100% - 16px);
  }
  html.metro-i18n .decision-body {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  html.metro-i18n .stage-title {
    font-size: 17px;
  }
  html.metro-i18n .stage-description,
  html.metro-i18n .step-label {
    font-size: 12px;
    line-height: 1.6;
  }
  html.metro-i18n .evidence-chip:nth-child(3) {
    display: flex;
  }
  html.metro-i18n .evidence-chip b,
  html.metro-i18n .evidence-chip span,
  html.metro-i18n .incident-meta {
    font-size: 10px;
  }
  html.metro-i18n .workflow-step {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 38px;
  }
  html.metro-i18n .step-state {
    display: block;
    font-size: 9px;
  }
  html.metro-i18n .app[data-stage="4"] .result-grid {
    display: grid !important;
  }
  html.metro-i18n .result-item span,
  html.metro-i18n .system-note b,
  html.metro-i18n .system-note span {
    font-size: 9px;
    max-width: none;
  }
  html.metro-i18n .action-button {
    font-size: 11px;
    min-height: 38px;
  }
}
.practice-card-metro .practice-media iframe.practice-embed-frame {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  transform: none;
}
@media (max-width: 767px) {
  .practice-card-metro .practice-media iframe.practice-embed-frame {
    aspect-ratio: 3 / 4;
  }

  .practice-card-renewal .practice-media iframe.practice-embed-frame {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
}
iframe.practice-embed-frame[data-embed-state="pending"],
iframe.practice-embed-frame[data-embed-state="loading"] {
  display: block;
  width: 100%;
  min-height: clamp(280px, 42vw, 520px);
  border: 0;
  background: var(--bg-soft);
}
.media-placeholder {
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(244, 247, 251, 0.72);
  text-align: center;
  line-height: 1.7;
}
.audio-player {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 28px;
  background:
    radial-gradient(
      circle at top left,
      rgba(143, 184, 255, 0.16),
      transparent 28%
    ),
    linear-gradient(180deg, #101722 0%, #0a0f16 100%);
}
.audio-player-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.audio-player audio {
  width: 100%;
}
.workflow-board {
  display: grid;
  grid-template-columns:
    minmax(120px, 0.9fr) minmax(180px, 1fr) minmax(170px, 1.05fr)
    minmax(180px, 1fr);
  gap: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  background:
    radial-gradient(
      circle at 8% 14%,
      rgba(143, 184, 255, 0.18),
      transparent 22%
    ),
    radial-gradient(
      circle at 76% 18%,
      rgba(143, 184, 255, 0.1),
      transparent 18%
    ),
    linear-gradient(180deg, #0f1621 0%, #091018 100%);
}
.workflow-board::before {
  content: "";
  position: absolute;
  inset: 24px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.34;
  pointer-events: none;
}
.workflow-column {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 72px minmax(264px, 1fr);
  gap: 14px;
  min-height: 100%;
}
.workflow-column-header {
  display: grid;
  gap: 6px;
  height: 72px;
  align-content: start;
}
.workflow-column-header strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.workflow-column-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.65;
}
.workflow-kicker {
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.workflow-source,
.workflow-task,
.workflow-team,
.workflow-manager-core {
  border: 1px solid rgba(191, 212, 255, 0.14);
  background: rgba(9, 15, 24, 0.8);
  backdrop-filter: blur(10px);
  animation: workflow-fade-in 780ms ease forwards;
  animation-delay: var(--workflow-delay, 0ms);
  opacity: 0;
}
.workflow-source {
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text);
  position: relative;
}
.workflow-source strong {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.workflow-source-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.workflow-source-inline-meta {
  color: var(--text-muted);
  font-size: 0.6rem;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.workflow-source-head,
.workflow-source-meta,
.workflow-task-meta,
.workflow-manager-status,
.workflow-manager-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.workflow-source-meta {
  flex-wrap: nowrap;
  min-width: 0;
}
.workflow-source-code,
.workflow-source-state,
.workflow-task-meta span,
.workflow-manager-status,
.workflow-manager-metrics span {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.workflow-source-code,
.workflow-source-state,
.workflow-task-meta span {
  color: var(--text-faint);
}
.workflow-source-meta span {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}
.workflow-manager {
  align-content: stretch;
}
.workflow-manager-core {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 0;
  background: rgba(156, 163, 174, 0.9);
  --manager-corner-cut: 18px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--manager-corner-cut)) 0,
    100% var(--manager-corner-cut),
    100% 100%,
    0 100%
  );
  box-shadow: none;
}
.workflow-manager-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  width: min(74%, 220px);
}
.workflow-manager-core .workflow-manager-status,
.workflow-manager-core .workflow-manager-metrics span {
  color: rgba(49, 61, 79, 0.8);
}
.workflow-manager-core strong {
  color: rgba(28, 39, 56, 0.92);
}
.workflow-sources,
.workflow-tasks,
.workflow-teams {
  align-content: stretch;
}
.workflow-stack {
  display: grid;
  gap: 14px;
  min-height: 0;
  height: 100%;
}
.workflow-sources .workflow-source,
.workflow-tasks .workflow-task,
.workflow-teams .workflow-team {
  min-height: 0;
  height: 100%;
}
.workflow-manager-core strong {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  letter-spacing: -0.05em;
}
.workflow-manager-status {
  justify-content: center;
  color: var(--accent-2);
}
.workflow-manager-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(191, 212, 255, 0.92);
  box-shadow: 0 0 12px rgba(191, 212, 255, 0.42);
}
.workflow-manager-metrics {
  justify-content: center;
  flex-wrap: wrap;
}
.workflow-manager-code-stream {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  top: 12px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.84) 18%,
    rgba(0, 0, 0, 0.96) 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.84) 18%,
    rgba(0, 0, 0, 0.96) 100%
  );
}
.workflow-code-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
}
.workflow-code-history-line,
.workflow-code-current {
  display: block;
  color: rgba(191, 212, 255, 0.54);
  font-family: var(--font-primary);
  font-size: 0.56rem;
  line-height: 1.28;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: left;
}
.workflow-code-current {
  position: relative;
  overflow: hidden;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  border-right: 1px solid rgba(191, 212, 255, 0.7);
}
.workflow-code-current.is-static {
  border-right: 0;
}
.workflow-code-current.is-typing {
  animation: workflow-code-caret 700ms steps(1) infinite;
}
.workflow-code-history-line {
  position: relative;
  transition: opacity 180ms ease;
}
.workflow-manager-metrics span {
  padding: 0;
  border: 0;
  background: transparent;
}
.workflow-core-pulse,
.workflow-core-ring {
  position: absolute;
  border-radius: 999px;
}
.workflow-core-pulse {
  width: 92px;
  height: 92px;
  background: radial-gradient(
    circle,
    rgba(191, 212, 255, 0.26),
    rgba(143, 184, 255, 0.06)
  );
  animation: workflow-pulse 2.4s ease-in-out infinite;
}
.workflow-core-ring {
  width: 156px;
  height: 156px;
  border: 1px solid rgba(191, 212, 255, 0.24);
  animation: workflow-ring 3.6s linear infinite;
}
.workflow-core-ring-secondary {
  width: 214px;
  height: 214px;
  animation-duration: 5.2s;
  opacity: 0.42;
}
.workflow-task {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  position: relative;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(0) scaleX(1);
  transform-origin: left center;
}
.workflow-tasks .workflow-task {
  background: linear-gradient(
    180deg,
    rgba(247, 250, 254, 0.98) 0%,
    rgba(237, 243, 250, 0.96) 68%,
    rgba(20, 26, 36, 0.9) 69%,
    rgba(10, 14, 22, 0.94) 100%
  );
  border-color: rgba(204, 214, 230, 0.44);
  align-items: start;
  padding-bottom: 40px;
}
.workflow-tasks .workflow-task-body {
  padding-top: 2px;
}
.workflow-tasks .workflow-task-label {
  color: rgba(25, 37, 53, 0.95);
}
.workflow-tasks .workflow-task-meta span {
  color: rgba(55, 71, 93, 0.8);
}
.workflow-tasks .workflow-task-index {
  color: rgba(76, 91, 112, 0.75);
}
.workflow-tasks .workflow-task-foot {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.workflow-tasks .workflow-task-chip {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(214, 222, 234, 0.92);
  background: rgba(255, 255, 255, 0.96);
  color: rgba(36, 49, 68, 0.9);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.workflow-tasks .workflow-task-pulse {
  margin-left: auto;
  width: 3.5px;
  height: 3.5px;
  border-radius: 999px;
  background: rgba(187, 160, 255, 0.95);
  box-shadow: 0 0 6px rgba(166, 128, 255, 0.58);
  animation: workflow-node-pulse 2.8s ease-in-out infinite;
}
.workflow-tasks .workflow-task-pulse[data-priority="p0"] {
  background: rgba(255, 112, 141, 0.96);
  box-shadow: 0 0 6px rgba(255, 98, 132, 0.62);
}
.workflow-tasks .workflow-task-pulse[data-priority="p1"] {
  background: rgba(255, 182, 86, 0.96);
  box-shadow: 0 0 6px rgba(240, 163, 66, 0.58);
}
.workflow-tasks .workflow-task-pulse[data-priority="p2"] {
  background: rgba(167, 139, 250, 0.96);
  box-shadow: 0 0 6px rgba(146, 111, 241, 0.6);
}
.workflow-task.no-reveal,
.workflow-team.no-reveal {
  animation: none;
  opacity: 1;
}
.workflow-task-index {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.workflow-task-label {
  font-size: 0.84rem;
  line-height: 1.5;
}
.workflow-task-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  transition:
    opacity 260ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.workflow-task-index {
  transition:
    opacity 260ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.workflow-input-link {
  position: absolute;
  top: 50%;
  left: -24px;
  width: 24px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(191, 212, 255, 0.06),
      rgba(191, 212, 255, 0.68),
      rgba(191, 212, 255, 0.14)
    ),
    linear-gradient(
      90deg,
      rgba(191, 212, 255, 0.75) 0 20%,
      rgba(191, 212, 255, 0) 20% 100%
    );
  background-repeat: no-repeat, repeat-x;
  background-size:
    100% 1px,
    14px 1px;
  animation: workflow-line-flow 2.1s linear infinite;
  transform: translateY(-50%) scaleX(1);
  transform-origin: right center;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}
.workflow-team {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: left center;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(0);
}
.workflow-task.is-archived,
.workflow-team.is-archived {
  opacity: 0;
  transform: translateX(118%);
  border-color: rgba(191, 212, 255, 0.02);
  pointer-events: none;
}
.workflow-task.is-archiving,
.workflow-team.is-archiving {
  transition: none;
  animation: workflow-row-exit-paired 940ms cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  border-color: rgba(191, 212, 255, 0.04);
}
.workflow-task.is-entering,
.workflow-team.is-entering {
  opacity: 0;
  transform: translateX(-32px);
}
.workflow-team.is-entering.is-entering-from-link {
  opacity: 1;
  transform: translateX(0) scaleX(0.02);
  border-color: rgba(191, 212, 255, 0.08);
}
.workflow-task.is-awaiting-link .workflow-task-body {
  opacity: 0;
  transform: translateX(-10px);
}
.workflow-task.is-awaiting-link .workflow-task-index {
  opacity: 0;
  transform: translateX(-10px);
}
.workflow-task.is-awaiting-link .workflow-input-link {
  opacity: 1;
  transform: translateY(-50%) scaleX(0);
}
.workflow-task.is-awaiting-link {
  border-color: rgba(191, 212, 255, 0.02);
  background: transparent;
  transform: translateX(0) scaleX(0.62);
}
.workflow-task.is-linking-in .workflow-input-link {
  transform: translateY(-50%) scaleX(1);
}
.workflow-task.is-spawning {
  border-color: rgba(191, 212, 255, 0.24);
  background: rgba(9, 15, 24, 0.76);
  transform: translateX(0) scaleX(0.82);
}
.workflow-task.is-spawning .workflow-task-index,
.workflow-task.is-spawning .workflow-task-body {
  opacity: 0;
  transform: translateX(-8px);
}
.workflow-task::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}
.workflow-task::before {
  transition: opacity 240ms ease;
}
.workflow-task.is-awaiting-link::before,
.workflow-task.is-awaiting-link::after,
.workflow-task.is-output-linking::before,
.workflow-task.is-output-linking::after,
.workflow-team.is-entering::before,
.workflow-team.is-entering::after {
  opacity: 0;
}
.workflow-task.is-output-linking::before,
.workflow-task.is-output-linking::after,
.workflow-task.has-output-link::before,
.workflow-task.has-output-link::after {
  opacity: 1;
}
.workflow-task.is-output-linking::after {
  transform: scaleX(1);
}
.workflow-task:not(.has-output-link):not(.is-output-linking)::after {
  transform: scaleX(0);
}
.workflow-task:not(.has-output-link):not(.is-output-linking)::before {
  opacity: 0;
}
.workflow-team.is-entering .workflow-team-meta,
.workflow-team.is-entering .workflow-team-progress,
.workflow-team.is-entering .workflow-team-value {
  opacity: 0;
}
.workflow-team-title {
  display: grid;
  gap: 4px;
}
.workflow-team-title span {
  color: var(--text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workflow-source::after,
.workflow-task::after,
.workflow-team::after,
.workflow-manager-core::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  width: 24px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(191, 212, 255, 0.14),
      rgba(191, 212, 255, 0.68),
      rgba(191, 212, 255, 0.06)
    ),
    linear-gradient(
      90deg,
      rgba(191, 212, 255, 0.75) 0 20%,
      rgba(191, 212, 255, 0) 20% 100%
    );
  background-repeat: no-repeat, repeat-x;
  background-size:
    100% 1px,
    14px 1px;
  animation: workflow-line-flow 2.1s linear infinite;
}
.workflow-source::before,
.workflow-task::before,
.workflow-team::before,
.workflow-manager-core::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: rgba(191, 212, 255, 0.92);
  box-shadow: 0 0 12px rgba(191, 212, 255, 0.42);
  animation: workflow-node-pulse 2.8s ease-in-out infinite;
}
.workflow-team::before,
.workflow-team::after {
  display: none;
}
.workflow-team-meta,
.workflow-team-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.workflow-team-meta strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.workflow-team-meta span,
.workflow-team-value {
  color: var(--text-faint);
  font-size: 0.74rem;
}
.workflow-team-progress {
  order: 3;
  margin-top: auto;
  margin-left: -14px;
  margin-right: -14px;
  margin-bottom: -12px;
  width: calc(100% + 28px);
  height: 5px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(38, 26, 66, 0.36);
}
.workflow-team-bar {
  display: block;
  position: relative;
  height: 100%;
  width: var(--workflow-progress, 0%);
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(60, 30, 132, 0.98),
    rgba(110, 62, 184, 0.98)
  );
  animation: workflow-progress 1.4s ease-out forwards;
  transform-origin: left center;
  transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.workflow-team-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    120deg,
    rgba(190, 163, 255, 0.26) 0 8px,
    rgba(190, 163, 255, 0.05) 8px 16px
  );
  background-size: 36px 100%;
  will-change: background-position;
  animation: workflow-zebra-slide 1.2s linear infinite;
}
.practice-side {
  grid-area: side;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
.practice-body {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 0;
}
.practice-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.practice-title-row h3 {
  flex: 1;
  min-width: 0;
}
.practice-actions {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 10px;
}
.practice-actions .button-download {
  min-height: auto;
  padding: 0;
  justify-content: flex-start;
}
.practice-mailbox {
  position: relative;
  flex-shrink: 0;
  isolation: isolate;
}
.mailbox-trigger {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(191, 212, 255, 0.28);
  background: rgba(8, 13, 22, 0.82);
  color: var(--accent-2);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}
.mailbox-trigger:hover,
.mailbox-trigger:focus-visible {
  border-color: rgba(191, 212, 255, 0.52);
  background: rgba(16, 25, 40, 0.88);
  transform: translateY(-1px);
}
.mailbox-trigger svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.mailbox-trigger-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #0a0f16;
  background: var(--accent-2);
}
.mailbox-panel {
  position: absolute;
  left: auto;
  right: 0;
  top: calc(100% + 8px);
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: 340px;
  overflow: auto;
  border: 1px solid rgba(191, 212, 255, 0.28);
  background:
    radial-gradient(
      circle at top right,
      rgba(143, 184, 255, 0.12),
      transparent 32%
    ),
    linear-gradient(180deg, rgba(11, 17, 27, 0.96), rgba(8, 13, 21, 0.98));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45);
  padding: 14px;
  z-index: 9990;
  transform-origin: top right;
}
.mailbox-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mailbox-panel-head strong {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mailbox-panel-count {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 600;
}
.mailbox-empty {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}
.mailbox-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.mailbox-item-link {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  cursor: pointer;
  border: 1px solid rgba(191, 212, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color 180ms ease,
    background 180ms ease;
}
.mailbox-item-link:hover,
.mailbox-item-link:focus-visible {
  border-color: rgba(191, 212, 255, 0.46);
  background: rgba(143, 184, 255, 0.08);
}
.mailbox-item-subject {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}
.mailbox-item-meta {
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
body.mailbox-viewer-open {
  overflow: hidden;
}
.mailbox-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 8, 14, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
}
.mailbox-viewer[hidden],
.mailbox-panel[hidden] {
  display: none !important;
}
.mailbox-viewer-shell {
  width: min(1040px, calc(100vw - 40px));
  height: min(80vh, 760px);
  border: 1px solid rgba(191, 212, 255, 0.28);
  background: rgba(7, 12, 20, 0.98);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.52);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.mailbox-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(191, 212, 255, 0.2);
}
.mailbox-viewer-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mailbox-viewer-close {
  border: 1px solid rgba(191, 212, 255, 0.24);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}
.mailbox-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #06090f;
}
.practice-description {
  font-size: clamp(0.95rem, 1.3vw, 1.4rem);
  line-height: 1.85;
}
.practice-description p {
  margin: 0;
}
.practice-description p + p {
  margin-top: 14px;
}
.practice-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(191, 212, 255, 0.86);
}
.practices-page .practice-card.has-divider::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(14px, 2vw, 24px));
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.52);
  transform: scaleX(0);
  transform-origin: left center;
}
.practices-page .practice-stream.has-divider::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(14px, 2vw, 24px));
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.52);
  transform: scaleX(0);
  transform-origin: left center;
}
.practices-page .practice-card.has-divider.divider-revealed::before,
.practices-page .practice-stream.has-divider.divider-revealed::before {
  animation: practices-divider-reveal 820ms ease-out 1 forwards;
}
.practices-page .practice-card::after {
  content: none;
}
@keyframes practices-divider-reveal {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.button-download[aria-disabled="true"] {
  opacity: 0.56;
  pointer-events: none;
}
.practices-shell {
  padding-top: 18px;
}
body[data-site-page="practices"] {
  background: linear-gradient(180deg, #080b10 0%, #090d13 100%);
}
.practices-hero {
  position: relative;
}
.practices-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 5vw, 32px);
  padding-top: clamp(136px, 16vw, 210px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
.practices-hero-copy {
  display: grid;
  gap: 18px;
}
.practices-hero-title {
  margin: 0;
  max-width: none;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: clamp(1.85rem, 5vw, 4.2rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #f8fbff;
}
.practices-hero .practices-intro {
  margin: 0;
  width: 100%;
  max-width: clamp(34ch, 72vw, 76rem);
  font-size: clamp(1.03rem, 2vw, 1.34rem);
  line-height: 1.52;
  color: var(--text-muted);
}
.practices-hero .practices-intro:empty {
  display: none;
}
@media (max-width: 720px) {
  body[data-site-page="practices"] .practices-hero-grid {
    padding-top: clamp(88px, 22vw, 120px);
    padding-bottom: clamp(16px, 4vw, 28px);
    gap: 14px;
  }
}
.practices-page {
  min-height: 0;
  padding-top: clamp(20px, 3vw, 40px);
}
.practices-page .practice-card > .practice-card-title {
  color: var(--text);
}
.practices-page .practice-card > .practice-card-title.typing {
  color: var(--text);
}
.practices-page .practice-card > .practice-card-title.typing .typed-char {
  color: var(--text);
}
.practices-page
  .practice-card
  > .practice-card-title.typing
  .typed-char-current {
  color: var(--accent-2);
}
.practices-page .practice-card > .practice-card-title .typing-content {
  display: inline;
  white-space: normal;
}
.practices-page .practice-card > .practice-card-title.typing .typed-char {
  display: inline;
}
.practices-intro {
  max-width: min(44ch, 100%);
  margin: 0;
  color: var(--text-muted);
  line-height: 1.52;
  font-size: clamp(1.03rem, 2vw, 1.34rem);
}
.practice-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.practice-filter-link {
  display: grid;
  gap: 8px;
  padding: 18px 0 20px 20px;
  border-right: 1px solid var(--line);
  position: relative;
  transition:
    color 180ms ease,
    background 180ms ease;
}
.practice-filter-link:last-child {
  border-right: 0;
}
.practice-filter-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(191, 212, 255, 0.88),
    rgba(191, 212, 255, 0)
  );
  opacity: 0;
  transition: opacity 180ms ease;
}
.practice-filter-link:hover,
.practice-filter-link:focus-visible,
.practice-filter-link.is-active {
  color: var(--accent-2);
}
.practice-filter-link.is-active {
  background: linear-gradient(
    180deg,
    rgba(143, 184, 255, 0.06),
    rgba(143, 184, 255, 0)
  );
}
.practice-filter-link:hover::after,
.practice-filter-link:focus-visible::after,
.practice-filter-link.is-active::after {
  opacity: 1;
}
.practice-filter-index {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.practice-filter-name {
  font-family: var(--font-primary);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.05em;
}
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.pipeline-card {
  padding: 22px 0;
  border-right: 1px solid var(--line);
}
.pipeline-card:last-child {
  border-right: 0;
}
.button:focus-visible,
.business-panel:focus-visible,
.practice-filter-link:focus-visible,
.topnav [data-nav-id]:focus-visible {
  outline: 2px solid rgba(143, 184, 255, 0.42);
  outline-offset: 2px;
}
.talent-cycle-section {
  margin-top: 0;
}
.talent-cycle-board {
  grid-template-columns:
    minmax(210px, 0.78fr) minmax(240px, 0.9fr) minmax(280px, 1.04fr)
    minmax(280px, 1.08fr);
}
.talent-cycle-column-origin {
  order: 0;
}
.talent-cycle-column-left {
  order: 4;
}
.talent-cycle-column-center {
  order: 3;
}
.talent-cycle-column-right {
  order: 2;
}
.talent-cycle-column .workflow-stack {
  gap: 12px;
}
.talent-cycle-column-right .workflow-stack {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.talent-cycle-column-left .workflow-stack {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.talent-cycle-origin-stack {
  position: relative;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  padding-right: 16px;
}
.talent-cycle-origin-stack::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: rgba(191, 212, 255, 0.78);
  z-index: 0;
}
.talent-cycle-origin-card {
  position: relative;
  width: 9em;
  max-width: 100%;
  justify-self: start;
  padding: 10px 12px;
  z-index: 1;
}
.talent-cycle-origin-card strong {
  white-space: nowrap;
}
.talent-cycle-origin-card::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 12px;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(191, 212, 255, 0.78);
}
.talent-cycle-column-right .talent-cycle-node[data-step="1"] {
  position: relative;
}
.talent-cycle-column-right .talent-cycle-node[data-step="1"]::before {
  content: "";
  position: absolute;
  left: -54px;
  top: 50%;
  width: 54px;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(191, 212, 255, 0.78);
}
.talent-cycle-column-right .talent-cycle-node[data-step="1"]::after {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(50% - 3px);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(245, 249, 255, 0.94);
  box-shadow: 0 0 10px rgba(191, 212, 255, 0.56);
}
.talent-cycle-node {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-color: rgba(191, 212, 255, 0.2);
  transition:
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}
.talent-cycle-node strong {
  color: rgba(225, 235, 251, 0.95);
  font-size: 0.92rem;
}
.talent-cycle-node .workflow-source-meta span {
  color: rgba(197, 210, 233, 0.72);
}
.talent-cycle-node:hover,
.talent-cycle-node:focus-visible,
.talent-cycle-node.is-active {
  border-color: rgba(147, 207, 246, 0.72);
  box-shadow: 0 12px 24px rgba(54, 112, 168, 0.24);
  transform: translateY(-1px);
}
.talent-cycle-node.is-active strong {
  color: rgba(244, 250, 255, 0.98);
}
.talent-cycle-core {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.14),
      rgba(20, 30, 46, 0.96) 52%
    ),
    linear-gradient(180deg, rgba(16, 23, 35, 0.96), rgba(10, 15, 24, 0.96));
}
.talent-cycle-ring {
  position: relative;
  width: min(88%, 250px);
  height: min(88%, 250px);
}
.talent-cycle-track {
  fill: none;
  stroke: rgba(230, 237, 250, 0.36);
  stroke-width: 30;
}
.talent-cycle-progress {
  fill: none;
  stroke: rgba(245, 249, 255, 0.96);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-dasharray: 666;
  stroke-dashoffset: 570;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 420ms ease;
}
.talent-cycle-arrow {
  fill: rgba(245, 249, 255, 0.92);
}
.talent-cycle-core-title {
  margin: 0;
  color: rgba(245, 249, 255, 0.96);
  font-size: clamp(1.22rem, 1.6vw, 1.64rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}
.talent-cycle-core-current {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(224, 234, 248, 0.36);
  background: rgba(10, 17, 27, 0.62);
  color: rgba(236, 244, 255, 0.94);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.talent-cycle-column-center .workflow-column-header {
  text-align: center;
  justify-items: center;
}
.talent-cycle-column-center .workflow-column-header strong {
  color: rgba(240, 248, 255, 0.96);
}
.talent-motion-board {
  border: 1px solid rgba(191, 212, 255, 0.22);
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(143, 184, 255, 0.16),
      transparent 24%
    ),
    linear-gradient(180deg, rgba(15, 22, 33, 0.98), rgba(9, 14, 22, 0.98));
  padding: 18px;
}
.talent-motion-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.talent-motion-chip {
  border: 1px solid rgba(191, 212, 255, 0.26);
  background: rgba(15, 23, 36, 0.82);
  color: rgba(214, 231, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}
.talent-motion-chip.is-active,
.talent-motion-chip:hover,
.talent-motion-chip:focus-visible {
  border-color: rgba(191, 212, 255, 0.72);
  color: rgba(243, 249, 255, 0.98);
  transform: translateY(-1px);
}
.talent-motion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 14px;
}
.talent-motion-stream {
  border: 1px solid rgba(191, 212, 255, 0.16);
  background: rgba(11, 17, 27, 0.72);
  padding: 14px;
  display: grid;
  gap: 10px;
  min-height: 280px;
}
.talent-motion-lane {
  border: 1px solid rgba(191, 212, 255, 0.14);
  background: rgba(18, 26, 40, 0.68);
  padding: 9px 10px;
  display: grid;
  gap: 8px;
}
.talent-motion-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  color: rgba(200, 219, 245, 0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.talent-motion-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(191, 212, 255, 0.14);
  overflow: hidden;
}
.talent-motion-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(205, 224, 255, 0.82),
    rgba(255, 255, 255, 0.96)
  );
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.talent-motion-panel {
  border: 1px solid rgba(191, 212, 255, 0.16);
  background: rgba(11, 17, 27, 0.76);
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.talent-motion-label {
  margin: 0;
  color: rgba(195, 214, 241, 0.72);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.talent-motion-panel h3 {
  margin: 0;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
}
.talent-motion-panel p {
  margin: 0;
  color: rgba(211, 226, 248, 0.84);
  line-height: 1.65;
}
.talent-motion-metrics {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}
.talent-motion-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(191, 212, 255, 0.16);
  padding-top: 8px;
}
.talent-motion-metric span {
  color: rgba(193, 213, 240, 0.8);
  font-size: 0.78rem;
}
.talent-motion-metric strong {
  font-family: var(--font-primary);
  font-size: 1.02rem;
  color: rgba(244, 250, 255, 0.98);
}
.talent-retention-section {
  margin-top: 0;
}
.talent-retention-loop-shell {
  border: 1px solid rgba(191, 212, 255, 0.2);
  background:
    radial-gradient(
      circle at 18% 84%,
      rgba(191, 212, 255, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 84% 12%,
      rgba(191, 212, 255, 0.14),
      transparent 26%
    ),
    linear-gradient(180deg, rgba(12, 18, 29, 0.98), rgba(8, 12, 20, 0.99));
  padding: clamp(18px, 3vw, 28px);
}
.talent-retention-loop {
  --pool-x: 16%;
  --pool-y: 52%;
  --pool-size: clamp(220px, 29vw, 320px);
  width: min(700px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
}
.talent-retention-orbit {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid rgba(191, 212, 255, 0.34);
  box-shadow: inset 0 0 0 1px rgba(191, 212, 255, 0.08);
  z-index: 1;
}
.talent-retention-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.talent-retention-flow-tracks path {
  fill: none;
  stroke: rgba(191, 212, 255, 0.16);
  stroke-width: 0.26;
  stroke-linecap: round;
}
.talent-retention-flow-comets path {
  fill: none;
  stroke: rgba(228, 241, 255, 0.92);
  stroke-width: 0.58;
  stroke-linecap: round;
  stroke-dasharray: 0.001 120;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(202, 225, 255, 0.48));
  animation: talent-retention-flow-run var(--flow-duration, 6s) linear infinite;
  animation-delay: var(--flow-delay, 0s);
}
.talent-retention-node {
  position: absolute;
  width: var(--node-size);
  height: var(--node-size);
  left: var(--node-x);
  top: var(--node-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  color: rgba(244, 250, 255, 0.98);
  font-size: var(--node-font-size, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border: 1px solid rgba(191, 212, 255, 0.46);
  background: radial-gradient(
    circle at 28% 24%,
    rgba(200, 223, 255, 0.38),
    rgba(106, 136, 176, 0.18)
  );
  box-shadow: 0 10px 28px rgba(6, 10, 16, 0.4);
  animation: talent-retention-float var(--float-duration, 6.8s) ease-in-out
    infinite;
  animation-delay: var(--float-delay, 0s);
}
.talent-retention-node.is-pool {
  --node-size: var(--pool-size);
  --node-font-size: 1.08rem;
  --node-x: var(--pool-x);
  --node-y: var(--pool-y);
  --float-duration: 7.6s;
  --float-delay: -0.6s;
  z-index: 3;
  overflow: hidden;
}
.talent-retention-node-tag.is-pool-tag {
  position: absolute;
  left: var(--pool-x);
  top: var(--pool-y);
  transform: translate(-50%, calc(-50% - (var(--pool-size) / 2) - 10px));
  z-index: 6;
  white-space: nowrap;
  font-size: clamp(0.68rem, 0.92vw, 0.88rem);
  font-weight: 500;
  color: rgba(226, 239, 255, 0.96);
  text-shadow: 0 2px 10px rgba(4, 8, 14, 0.55);
}
.talent-retention-pool-cluster {
  position: absolute;
  left: 10%;
  bottom: 8%;
  width: 80%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 2;
}
.talent-retention-pool-bubble {
  position: absolute;
  width: var(--pool-bubble-size);
  height: var(--pool-bubble-size);
  border-radius: 50%;
  border: 1px solid rgba(191, 212, 255, 0.42);
  background: radial-gradient(
    circle at 30% 26%,
    rgba(215, 233, 255, 0.45),
    rgba(86, 114, 154, 0.2)
  );
  color: rgba(239, 247, 255, 0.98);
  box-shadow: 0 8px 24px rgba(6, 10, 16, 0.36);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 10px;
  line-height: 1.12;
  overflow: hidden;
  animation: talent-retention-pool-float var(--pool-float-duration, 6.4s)
    ease-in-out infinite;
  animation-delay: var(--pool-float-delay, 0s);
}
.talent-retention-pool-name {
  font-size: clamp(0.52rem, 0.76vw, 0.7rem);
  font-weight: 400;
}
.talent-retention-pool-meta {
  margin-top: 2px;
  font-size: clamp(0.45rem, 0.62vw, 0.58rem);
  color: rgba(212, 228, 248, 0.92);
}
.talent-retention-pool-bubble.is-warm {
  --pool-bubble-size: 58%;
  --pool-float-duration: 7.2s;
  --pool-float-delay: -0.8s;
  left: 32%;
  bottom: 8%;
  z-index: 1;
}
.talent-retention-pool-bubble.is-passive {
  --pool-bubble-size: 42%;
  --pool-float-duration: 6.5s;
  --pool-float-delay: -1.7s;
  left: 6%;
  bottom: 24%;
  z-index: 2;
}
.talent-retention-pool-bubble.is-offer {
  --pool-bubble-size: 30%;
  --pool-float-duration: 5.9s;
  --pool-float-delay: -1.2s;
  left: 58%;
  top: 2%;
  z-index: 4;
}
.talent-retention-pool-bubble.is-boomerang {
  --pool-bubble-size: 22%;
  --pool-float-duration: 5.2s;
  --pool-float-delay: -2.1s;
  left: 16%;
  top: 0;
  z-index: 5;
}
.talent-retention-pool-bubble.is-boomerang .talent-retention-pool-name {
  font-size: clamp(0.4rem, 0.54vw, 0.5rem);
}
.talent-retention-pool-bubble.is-boomerang .talent-retention-pool-meta {
  font-size: clamp(0.34rem, 0.46vw, 0.44rem);
}
.talent-retention-node.is-demand {
  --node-size: clamp(132px, 17.6vw, 190px);
  --node-font-size: 0.96rem;
  --node-x: 50%;
  --node-y: 15%;
  --float-duration: 6.9s;
  --float-delay: -1.8s;
}
.talent-retention-node.is-interview {
  --node-size: clamp(86px, 10.8vw, 118px);
  --node-font-size: 0.82rem;
  --node-x: 75%;
  --node-y: 30%;
  --float-duration: 6.2s;
  --float-delay: -1.2s;
}
.talent-retention-node.is-onboard {
  --node-size: clamp(62px, 7.8vw, 84px);
  --node-font-size: 0.72rem;
  --node-x: 78%;
  --node-y: 58%;
  --float-duration: 5.8s;
  --float-delay: -2.1s;
}
.talent-retention-node.is-active {
  --node-size: clamp(44px, 5.6vw, 62px);
  --node-font-size: 0.64rem;
  --node-x: 50%;
  --node-y: 82%;
  --float-duration: 5.4s;
  --float-delay: -0.9s;
}
.talent-retention-node.is-exit {
  --node-size: clamp(26px, 3.4vw, 38px);
  --node-font-size: 0.52rem;
  --node-x: 33%;
  --node-y: 74%;
  --float-duration: 5s;
  --float-delay: -1.5s;
}
.talent-retention-node:not(.is-pool)::after {
  content: attr(data-node-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(0.62rem, 0.86vw, 0.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(226, 239, 255, 0.96);
  text-shadow: 0 2px 10px rgba(4, 8, 14, 0.55);
  pointer-events: none;
}
.talent-retention-node.is-active::after,
.talent-retention-node.is-exit::after {
  top: auto;
  bottom: calc(100% + 8px);
}
@keyframes talent-retention-pool-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(1px, -2px, 0);
  }
  50% {
    transform: translate3d(-2px, -3px, 0);
  }
  75% {
    transform: translate3d(-1px, -1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes talent-retention-float {
  0% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  25% {
    transform: translate(-50%, -50%) translate3d(2px, -3px, 0);
  }
  50% {
    transform: translate(-50%, -50%) translate3d(-2px, -5px, 0);
  }
  75% {
    transform: translate(-50%, -50%) translate3d(-3px, -2px, 0);
  }
  100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
}
@keyframes talent-retention-flow-run {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -140;
  }
}
@media (prefers-reduced-motion: reduce) {
  .talent-retention-node {
    animation: none;
  }

  .talent-retention-pool-bubble {
    animation: none;
  }

  .talent-retention-flow-comets path {
    animation: none;
  }
}
.talent-retention-board {
  border: 1px solid rgba(191, 212, 255, 0.22);
  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(191, 212, 255, 0.14),
      transparent 28%
    ),
    linear-gradient(180deg, rgba(14, 21, 33, 0.98), rgba(8, 13, 21, 0.99));
  padding: 18px;
}
.talent-retention-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.talent-retention-tab {
  border: 1px solid rgba(191, 212, 255, 0.24);
  background: rgba(12, 19, 30, 0.82);
  color: rgba(204, 222, 247, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}
.talent-retention-tab.is-active,
.talent-retention-tab:hover,
.talent-retention-tab:focus-visible {
  border-color: rgba(191, 212, 255, 0.72);
  color: rgba(244, 250, 255, 0.98);
  transform: translateY(-1px);
}
.talent-retention-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 14px;
}
.talent-retention-funnel {
  border: 1px solid rgba(191, 212, 255, 0.16);
  background: rgba(11, 17, 27, 0.72);
  padding: 14px;
  display: grid;
  gap: 10px;
  min-height: 280px;
}
.talent-retention-lane {
  border: 1px solid rgba(191, 212, 255, 0.14);
  background: rgba(18, 26, 40, 0.68);
  padding: 9px 10px;
  display: grid;
  gap: 8px;
}
.talent-retention-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  color: rgba(200, 219, 245, 0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.talent-retention-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(191, 212, 255, 0.14);
  overflow: hidden;
}
.talent-retention-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(198, 222, 255, 0.82),
    rgba(255, 255, 255, 0.95)
  );
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.talent-retention-panel {
  border: 1px solid rgba(191, 212, 255, 0.16);
  background: rgba(11, 17, 27, 0.76);
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.talent-retention-label {
  margin: 0;
  color: rgba(195, 214, 241, 0.72);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.talent-retention-panel h3 {
  margin: 0;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
}
.talent-retention-panel p {
  margin: 0;
  color: rgba(211, 226, 248, 0.84);
  line-height: 1.65;
}
.talent-retention-metrics {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}
.talent-retention-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(191, 212, 255, 0.16);
  padding-top: 8px;
}
.talent-retention-metric span {
  color: rgba(193, 213, 240, 0.8);
  font-size: 0.78rem;
}
.talent-retention-metric strong {
  font-family: var(--font-primary);
  font-size: 1.02rem;
  color: rgba(244, 250, 255, 0.98);
}
@media (max-width: 640px) {
  .talent-retention-loop {
    width: min(520px, 96vw);
  }

  .talent-retention-node {
    font-size: 0.72rem;
    padding: 8px;
  }

  .talent-retention-pool-cluster {
    transform: scale(0.9);
    transform-origin: center bottom;
    left: 8%;
    bottom: 7%;
  }
}
@media (max-width: 1080px) {
  .hero-grid,
  .section-heading-wide,
  .pipeline-grid,
  .practice-filter {
    grid-template-columns: 1fr;
  }

  .architecture-layers {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .architecture-nav {
    gap: 18px;
    margin-top: 16px;
    padding: 6px 0;
  }

  .architecture-nav-item {
    font-size: 0.82rem;
    min-height: 30px;
  }

  .home-page .hero .eyebrow {
    font-size: 0.72rem;
  }

  .architecture-three-viewport {
    min-height: clamp(420px, 72vw, 640px);
    margin: 0;
  }

  .talent-cycle-board {
    grid-template-columns: 1fr;
  }

  .talent-cycle-core {
    min-height: 300px;
  }

  .talent-motion-grid {
    grid-template-columns: 1fr;
  }

  .talent-retention-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .hero h1 {
    font-size: clamp(2.2rem, 10vw, 4rem);
  }
}
@media (max-width: 720px) {
  .site-shell {
    width: 100%;
  }

  .home-page main {
    margin-top: 0;
  }

  .topbar,
  .hero-grid,
  .section-frame {
    width: 100%;
    padding: 18px var(--gutter);
  }

  .topbar {
    position: sticky;
    top: 30px;
    margin-inline: var(--gutter);
  }

  .home-page .topbar {
    position: sticky;
    top: 30px;
    left: auto;
    right: auto;
    margin: 0 var(--gutter) 0;
  }

  .home-page .hero-grid {
    padding-top: 18px;
  }

  .architecture-nav {
    gap: 12px;
    margin-top: 12px;
    padding: 4px 0;
  }

  .architecture-nav-item {
    font-size: 0.78rem;
    min-height: 26px;
    letter-spacing: 0.05em;
  }

  .home-page .hero .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .topnav {
    gap: 14px;
    font-size: 0.82rem;
  }

  .careers-hero-overlay h1 {
    max-width: 100%;
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  .business-summary {
    font-size: 0.82rem;
  }

  .business-panel-index,
  .business-panel-tagline {
    font-size: 0.65rem;
  }

  .business-panel-nav {
    padding: 14px 16px 16px;
    gap: 6px;
  }

  .business-panel-body {
    aspect-ratio: 3 / 1;
  }

  .business-panel-name {
    font-size: clamp(2.8rem, 12vw, 5rem);
    white-space: normal;
  }

  .architecture-three-viewport {
    min-height: clamp(360px, 96vw, 520px);
  }

  .practice-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "side";
  }

  .workflow-board {
    grid-template-columns: 1fr;
  }

  .workflow-source::after,
  .workflow-task::after,
  .workflow-team::after,
  .workflow-manager-core::after,
  .workflow-source::before,
  .workflow-task::before,
  .workflow-team::before,
  .workflow-manager-core::before {
    display: none;
  }

  .hero-video {
    -o-object-position: center 50%;
    object-position: center 50%;
  }

  .pipeline-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pipeline-card:last-child {
    border-bottom: 0;
  }

  .talent-cycle-board {
    padding: 16px;
  }

  .talent-cycle-core {
    min-height: 260px;
  }

  .talent-cycle-node strong {
    font-size: 0.86rem;
  }

  .talent-cycle-core-title {
    font-size: 1.08rem;
  }

  .business-panels {
    grid-template-columns: 1fr;
  }

  .business-panel {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) and (pointer: coarse) {
  .architecture-stack {
    display: block;
  }

  .architecture-sticky-header {
    position: static;
    top: auto;
    z-index: 30;
    padding-top: 8px;
    padding-bottom: 10px;
    background: var(--bg-soft);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .architecture-section.arch-sticky-enabled .architecture-sticky-header {
    position: sticky;
    top: 0;
  }

  .architecture-section.is-agentrix-mobile-scrolly.arch-sticky-enabled
    .architecture-sticky-header {
    position: relative;
    top: auto;
  }

  .architecture-sticky-header.is-scrolly-ended {
    position: relative;
    top: auto;
  }

  .architecture-world-section {
    margin-bottom: 10px;
  }

  .architecture-three-viewport {
    min-height: clamp(360px, 96vw, 520px);
  }

  .architecture-carousel[data-arch-view="agentrix"] {
    overflow: visible;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-carousel-slide[data-arch-slide="agentrix"] {
    min-height: 0;
  }

  .architecture-carousel[data-arch-view="ontology"] {
    position: relative;
    z-index: 12;
    background: transparent;
  }

  #architecture.architecture-section,
  .architecture-section {
    margin-top: 0;
    border-top: 0;
    background: var(--bg-soft);
    background-image: none;
  }

  .architecture-section .architecture-stack {
    background: var(--bg-soft);
  }

  .architecture-section.is-arch-view-ontology {
    min-height: 0;
  }

  .architecture-section.is-arch-view-ontology .architecture-layers {
    background: #f7f9fc;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport,
  .architecture-three-viewport.is-ontology-empty {
    min-height: clamp(460px, 125vw, 600px);
    height: clamp(460px, 125vw, 600px);
    overflow: hidden;
    background: #f7f9fc !important;
    background-image: none !important;
    border-color: rgba(156, 174, 196, 0.42);
    contain: none;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport::before,
  .architecture-three-viewport.is-ontology-empty::before {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-cy,
  .architecture-three-viewport.is-ontology-empty .ontology-cy {
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    opacity: 1;
    pointer-events: auto;
    background: #f7f9fc;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel,
  .architecture-three-viewport.is-ontology-empty .ontology-node-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    padding: 14px 16px 12px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 20;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel[hidden],
  .architecture-three-viewport.is-ontology-empty .ontology-node-panel[hidden] {
    display: none !important;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-inner,
  .architecture-three-viewport.is-ontology-empty .ontology-node-panel-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "summary";
    gap: 10px;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-kicker,
  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-section-title,
  .architecture-three-viewport.is-ontology-empty .ontology-node-panel-kicker,
  .architecture-three-viewport.is-ontology-empty
    .ontology-node-panel-section-title {
    display: none;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-section-meta,
  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-section:nth-of-type(3),
  .architecture-three-viewport.is-ontology-empty
    .ontology-node-panel-section-meta,
  .architecture-three-viewport.is-ontology-empty
    .ontology-node-panel-section:nth-of-type(3) {
    display: none;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-title,
  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-node-panel-section
    .ontology-node-panel-summary,
  .architecture-three-viewport.is-ontology-empty .ontology-node-panel-title,
  .architecture-three-viewport.is-ontology-empty
    .ontology-node-panel-section
    .ontology-node-panel-summary {
    letter-spacing: 0;
    word-spacing: 0;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-three-canvas,
  .architecture-three-viewport.is-ontology-empty .ontology-three-canvas {
    position: relative;
    inset: auto;
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    background: #f7f9fc;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-canvas-hint-layer,
  .architecture-three-viewport.is-ontology-empty .ontology-canvas-hint-layer {
    display: flex;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .ontology-canvas-interact-hint,
  .architecture-three-viewport.is-ontology-empty
    .ontology-canvas-interact-hint {
    display: block;
  }

  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .architecture-three-canvas,
  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .architecture-agentrix-fallback,
  .architecture-carousel[data-arch-view="ontology"]
    .architecture-three-viewport
    .architecture-three-overlay {
    display: none;
  }

  .architecture-carousel[data-arch-view="agentrix"]
    .architecture-carousel-slide.is-mobile-shot-scroll {
    min-height: 1120svh;
  }

  .architecture-carousel[data-arch-view="agentrix"]
    .architecture-three-viewport.is-mobile-shot-narrative {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    margin: 0;
    border-radius: 0;
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(191, 212, 255, 0.08),
        transparent 34%
      ),
      linear-gradient(180deg, rgba(5, 7, 10, 0.12), rgba(5, 7, 10, 0.5)),
      var(--bg-soft);
  }

  .architecture-three-viewport.is-mobile-shot-narrative::after {
    display: none;
  }

  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-three-canvas,
  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-three-canvas
    canvas {
    pointer-events: none;
    touch-action: pan-y;
  }

  .architecture-three-viewport.is-mobile-shot-narrative .architecture-reset-btn,
  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-rotate-lock-btn,
  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-camera-panel,
  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-three-overlay {
    display: none;
  }

  .architecture-three-viewport.is-mobile-shot-final .architecture-layer-popup,
  .architecture-three-viewport.is-mobile-shot-final .architecture-db-popup,
  .architecture-three-viewport.is-mobile-shot-final .architecture-task-popup,
  .architecture-three-viewport.is-mobile-shot-final .architecture-worker-popup {
    display: none !important;
  }

  .architecture-three-viewport.is-mobile-shot-narrative
    .architecture-mobile-shot-caption {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 18;
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid rgba(191, 212, 255, 0.18);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(12, 17, 27, 0.66), rgba(8, 12, 20, 0.48)),
      rgba(8, 12, 20, 0.42);
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    pointer-events: none;
  }

  .architecture-mobile-shot-label {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(191, 212, 255, 0.72);
  }

  .architecture-mobile-shot-title {
    font-size: clamp(1.08rem, 5vw, 1.48rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
    color: rgba(248, 252, 255, 0.96);
  }

  .architecture-mobile-shot-hint {
    max-width: 28em;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(232, 240, 252, 0.68);
  }

  .architecture-mobile-shot-dots {
    display: flex;
    gap: 5px;
    margin-top: 5px;
  }

  .architecture-mobile-shot-dots span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(232, 240, 252, 0.26);
    transition:
      width 180ms ease,
      background-color 180ms ease;
  }

  .architecture-mobile-shot-dots span.is-active {
    width: 30px;
    background: rgba(248, 252, 255, 0.86);
  }
}
@media (max-width: 720px) and (pointer: fine) {
  .topbar,
  .hero-grid,
  .section-frame {
    width: auto;
  }

  .topbar {
    padding: 8px 12px;
    flex-wrap: nowrap;
  }

  .home-page .topbar {
    margin: 0 var(--gutter);
  }

  .topnav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .topnav [data-nav-id] {
    flex-shrink: 0;
    padding-inline: 7px;
  }

  .business-panel-body {
    aspect-ratio: 16 / 9;
  }

  .business-panel-name {
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .topnav [data-nav-id] {
    transition: none;
  }

  .hero h1.typing::after {
    animation: none;
  }

  .workflow-team-bar::before {
    animation: none;
  }

  .architecture-three-overlay {
    transition: none;
  }

  .talent-cycle-progress,
  .talent-cycle-node {
    transition: none;
  }
}
@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}
@keyframes workflow-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes workflow-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}
@keyframes workflow-ring {
  from {
    transform: scale(0.96);
    opacity: 0.18;
  }

  50% {
    opacity: 0.44;
  }

  to {
    transform: scale(1.03);
    opacity: 0.18;
  }
}
@keyframes workflow-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
@keyframes workflow-node-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes workflow-line-flow {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      0 0,
      18px 0;
  }
}
@keyframes workflow-row-exit-paired {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  70% {
    opacity: 1;
    transform: translateX(84%);
  }

  100% {
    opacity: 0;
    transform: translateX(118%);
  }
}
@keyframes workflow-zebra-slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 36px 0;
  }
}
@keyframes workflow-code-caret {
  0%,
  49% {
    border-right-color: rgba(191, 212, 255, 0.75);
  }

  50%,
  100% {
    border-right-color: transparent;
  }
}
@keyframes caret-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes char-flash {
  0% {
    opacity: 0;
    filter: brightness(1.6);
  }

  45% {
    opacity: 1;
    filter: brightness(1.25);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}
/* @block institutional — demo booking and future intelligence institute */
.demo-page,
.institute-page {
  --institutional-bg: #090e16;
  --institutional-surface: #101722;
  --institutional-line: rgba(174, 193, 226, 0.18);
  --institutional-ink: #edf3ff;
  --institutional-muted: rgba(217, 228, 247, 0.68);
  --institutional-accent: #8c96ff;
  background: var(--institutional-bg);
  color: var(--institutional-ink);
}
.institute-page {
  --institutional-bg: #05070d;
  --institutional-surface: #090c14;
  --institutional-line: rgba(188, 205, 238, 0.15);
  --institutional-ink: #eef3fc;
  --institutional-muted: rgba(207, 218, 237, 0.66);
  --institutional-accent: #d7b674;
}
.institutional-shell {
  padding: 0;
}
.institutional-hero {
  position: relative;
  min-height: min(820px, 100svh);
  margin-top: clamp(-86px, -7.2vw, -64px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(89, 103, 216, 0.2),
      transparent 28%
    ),
    linear-gradient(145deg, #0b111b 0%, #080c13 72%);
}
.institutional-grid {
  position: absolute;
  inset: 0;
}
.demo-hero {
  --demo-pointer-x: 78%;
  --demo-pointer-y: 28%;
}
.demo-page .institutional-grid {
  overflow: hidden;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 13%,
    #000 86%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 13%,
    #000 86%,
    transparent 100%
  );
}
.demo-flow-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  filter: drop-shadow(0 0 18px rgba(105, 94, 228, 0.18));
}
.demo-hero::before {
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle at var(--demo-pointer-x) var(--demo-pointer-y),
    rgba(131, 124, 255, 0.28),
    transparent 17%
  );
  content: "";
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: background-position 400ms ease;
}
.institutional-copy {
  position: relative;
  z-index: 1;
}
.institutional-copy .eyebrow {
  margin: 0 0 18px;
  color: rgba(169, 181, 255, 0.86);
}
.institutional-copy h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  line-height: 0.99;
  letter-spacing: -0.048em;
  text-wrap: balance;
}
.institutional-lede {
  max-width: 48ch;
  margin: 28px 0 0;
  color: var(--institutional-muted);
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.75;
}
.demo-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.72fr);
  align-items: center;
  gap: clamp(54px, 8vw, 130px);
  min-height: min(820px, 100svh);
  padding-top: clamp(150px, 16vw, 210px);
  padding-bottom: clamp(80px, 9vw, 120px);
}
.demo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 38px;
}
.demo-facts span {
  padding: 7px 10px;
  border: 1px solid var(--institutional-line);
  color: rgba(220, 230, 249, 0.68);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.demo-form {
  --demo-progress: 0;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--institutional-line);
  background: rgba(16, 23, 34, 0.78);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}
.demo-form::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 2px;
  background: linear-gradient(90deg, #716be8, #b7b4ff);
  box-shadow: 0 0 20px rgba(140, 150, 255, 0.58);
  content: "";
  transform: scaleX(var(--demo-progress));
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.demo-form-index {
  color: rgba(205, 217, 239, 0.56);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.demo-form-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--institutional-accent);
  box-shadow: 0 0 18px rgba(140, 150, 255, 0.8);
  animation: demo-status-pulse 2.4s ease-in-out infinite;
}
.demo-form label {
  display: grid;
  gap: 8px;
  color: rgba(223, 233, 250, 0.74);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  transition:
    color 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-form label:focus-within {
  color: #dfe4ff;
  transform: translateX(4px);
}
.demo-form input,
.demo-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(180, 199, 231, 0.28);
  border-radius: 0;
  padding: 9px 0 11px;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--institutional-ink);
  font: inherit;
  letter-spacing: normal;
  transition: border-color 180ms ease;
}
.demo-form input:focus,
.demo-form textarea:focus {
  border-color: var(--institutional-accent);
}
.demo-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin-top: 4px;
  padding: 0 18px;
  border: 1px solid rgba(159, 170, 255, 0.55);
  background: rgba(89, 103, 216, 0.18);
  color: var(--institutional-ink);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}
.demo-submit:hover,
.demo-submit:focus-visible {
  border-color: var(--institutional-accent);
  background: rgba(89, 103, 216, 0.35);
}
.demo-form-note {
  margin: -4px 0 0;
  color: rgba(202, 214, 236, 0.5);
  font-size: 0.72rem;
  line-height: 1.6;
}
.demo-form-note a,
.demo-consent a {
  color: rgba(216, 225, 255, 0.88);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.demo-form .demo-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.74rem;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
}
.demo-form .demo-consent:focus-within {
  transform: none;
}
.demo-form .demo-consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: #9ca8ff;
}
.institute-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: min(720px, 88svh);
  padding-top: clamp(132px, 13vw, 176px);
  padding-bottom: clamp(76px, 8vw, 112px);
}
.institute-hero {
  min-height: min(720px, 88svh);
  background:
    radial-gradient(
      circle at 18% 76%,
      rgba(29, 52, 112, 0.14),
      transparent 19%
    ),
    radial-gradient(
      circle at 83% 24%,
      rgba(55, 46, 118, 0.13),
      transparent 21%
    ),
    linear-gradient(145deg, #02040a 0%, #000106 58%, #03060e 100%);
}
.institute-hero::before {
  position: absolute;
  inset: 18% 20% 16%;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 42% 36% at 39% 45%,
      rgba(54, 91, 218, 0.5) 0%,
      rgba(48, 75, 183, 0.24) 42%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 38% 32% at 63% 43%,
      rgba(124, 65, 180, 0.42) 0%,
      rgba(87, 52, 144, 0.2) 44%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 44% 25% at 54% 68%,
      rgba(20, 125, 158, 0.32) 0%,
      rgba(16, 91, 124, 0.15) 48%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 24% 18% at 48% 30%,
      rgba(190, 128, 70, 0.16) 0%,
      transparent 76%
    );
  content: "";
  pointer-events: none;
  filter: blur(26px) saturate(1.28);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    #000 52%,
    transparent 88%
  );
          mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    #000 52%,
    transparent 88%
  );
  mix-blend-mode: screen;
  opacity: 0.82;
  transform: translate3d(-1%, 1%, 0) rotate(-4deg) scale(1.02);
  animation: institute-nebula-drift 38s ease-in-out infinite alternate;
}
.institute-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 50% 51%,
      rgba(0, 2, 8, 0.3) 0%,
      rgba(0, 2, 8, 0.16) 20%,
      rgba(0, 2, 8, 0.03) 43%,
      transparent 60%
    ),
    linear-gradient(
      112deg,
      transparent 27%,
      rgba(0, 1, 6, 0.1) 36%,
      rgba(0, 1, 6, 0.38) 47%,
      rgba(0, 1, 6, 0.12) 56%,
      transparent 67%
    ),
    radial-gradient(
      ellipse at center,
      transparent 36%,
      rgba(0, 1, 6, 0.22) 72%,
      rgba(0, 1, 5, 0.82) 100%
    );
  content: "";
  pointer-events: none;
}
@keyframes institute-nebula-drift {
  0% {
    opacity: 0.56;
    transform: translate3d(-2%, 1%, 0) rotate(-5deg) scale(1.01);
  }

  52% {
    opacity: 0.72;
    transform: translate3d(1%, -1%, 0) rotate(-3deg) scale(1.04);
  }

  100% {
    opacity: 0.62;
    transform: translate3d(2%, 1%, 0) rotate(-1deg) scale(1.02);
  }
}
.institute-page .institutional-grid {
  inset: -5% -3%;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 9%,
    #000 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 9%,
    #000 94%,
    transparent 100%
  );
}
.institute-evolution-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: brightness(1.25) drop-shadow(0 0 16px rgba(147, 174, 255, 0.1));
}
.institute-page .institutional-copy h1 {
  max-width: none;
  margin-inline: auto;
  color: #f0f4fb;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.34);
}
.institute-page .institutional-copy {
  width: min(100%, 900px);
  text-align: center;
}
.institute-title span {
  display: block;
}
.institute-title span:first-child {
  color: rgba(237, 242, 251, 0.82);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.055em;
}
.institute-title span + span {
  margin-top: 0.28em;
  font-weight: 500;
  letter-spacing: 0.055em;
}
.institute-page .institutional-copy .eyebrow {
  margin-bottom: 26px;
  color: rgba(218, 186, 122, 0.92);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
}
.institute-page .institutional-lede {
  max-width: 50ch;
  margin-top: 34px;
  margin-inline: auto;
  color: var(--institutional-muted);
  font-size: 0.875rem;
  line-height: 1.82;
  letter-spacing: 0.01em;
  text-wrap: balance;
  word-break: auto-phrase;
}
.institute-english-name {
  margin: 18px 0 0;
  color: rgba(210, 188, 145, 0.78);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  letter-spacing: 0.15em;
}
.institute-insights {
  background:
    radial-gradient(
      circle at 82% 46%,
      rgba(61, 75, 133, 0.06),
      transparent 40%
    ),
    #010207;
  color: #e9eef8;
}
.institute-insights:not(:has(.institute-insight-card)) {
  display: none;
}
.institute-insights .section-frame {
  padding-top: 0;
  padding-bottom: clamp(92px, 10vw, 148px);
}
.institute-insight-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
  min-height: 430px;
  border-top: 1px solid rgba(195, 209, 235, 0.15);
  border-bottom: 1px solid rgba(195, 209, 235, 0.15);
}
.institute-insight-card.is-locale-hidden {
  display: none !important;
}
.institute-insight-media {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: #0b111a;
}
.institute-insight-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.institute-insight-card:hover .institute-insight-media img {
  transform: scale(1.025);
}
/* Equal square display frames; center-crop 002 without changing its source.
   Fill the existing image column instead of limiting the artwork by viewport height. */
[data-site-page="insights"] .institute-insight-card {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  min-height: 0;
  align-items: center;
}
[data-site-page="insights"] .institute-insight-media {
  display: flex;
  align-items: center;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: transparent;
}
[data-site-page="insights"] .institute-insight-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: none;
}
[data-site-page="insights"]
  .institute-insight-card:hover
  .institute-insight-media
  img {
  transform: none;
}
@media (min-width: 901px) {
  [data-site-page="insights"] .institute-insight-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  [data-site-page="insights"]
    .institute-insight-card:first-child
    .newsroom-card-title {
    text-wrap: balance;
  }
}
.institute-insight-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 82px);
}
.institute-insight-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(209, 184, 134, 0.64);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.institute-insight-copy h3 {
  max-width: 16ch;
  margin: 30px 0 20px;
  color: #edf2fb;
  font-size: clamp(1.8rem, 3.7vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.institute-insight-copy > p {
  max-width: 48ch;
  margin: 0;
  color: rgba(203, 214, 233, 0.66);
  line-height: 1.72;
}
.institute-insight-link {
  align-self: flex-start;
  margin-top: 34px;
  color: #d3b474;
}
/* Insights lives on dark ground; do not inherit the white Newsroom link palette. */
[data-site-page="insights"] .institute-insight-link {
  color: #d3b474;
}
[data-site-page="insights"] .institute-insight-link:hover,
[data-site-page="insights"] .institute-insight-link:focus-visible {
  color: #c4b5fd;
}
[data-site-page="insights"] .institute-insight-link:focus-visible::after {
  outline-color: #c4b5fd;
}
@keyframes demo-status-pulse {
  50% {
    opacity: 0.55;
    box-shadow: 0 0 28px rgba(140, 150, 255, 1);
    transform: scale(0.72);
  }
}
@supports (animation-timeline: view()) {
  .institute-insight-card {
    animation: institute-view-reveal linear both;
    animation-range: entry 8% cover 32%;
    animation-timeline: view();
  }

  @keyframes institute-view-reveal {
    from {
      opacity: 0;
      transform: translateY(34px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (max-width: 900px) {
  .demo-hero-grid,
  .institute-hero-grid,
  .institute-insight-card {
    grid-template-columns: 1fr;
  }

  .institutional-hero,
  .demo-hero-grid,
  .institute-hero-grid {
    min-height: auto;
  }

  .institute-insight-copy {
    padding-inline: 0;
  }

  .institute-insight-copy h3 {
    width: 100%;
    max-width: none;
    margin: 18px 0 12px;
    text-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .institutional-copy h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.3rem);
  }

  .demo-hero-grid,
  .institute-hero-grid {
    padding-top: 142px;
  }

  .demo-form {
    padding: 22px 18px;
  }

  .demo-flow-canvas {
    opacity: 0.56;
  }

  .institute-page .institutional-grid {
    inset-inline-start: -3%;
    opacity: 0.82;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 94%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 94%,
      transparent 100%
    );
  }
}
@media (max-width: 767px) {
  .institute-hero {
    background:
      radial-gradient(
        ellipse at 50% 42%,
        rgba(42, 62, 130, 0.17),
        transparent 38%
      ),
      linear-gradient(155deg, #03050b 0%, #000106 62%, #040710 100%);
  }

  .institute-hero::before {
    inset: 24% 4% 18%;
    filter: blur(24px) saturate(1.18);
    opacity: 0.52;
    animation: none;
  }

  .institute-hero::after {
    background: radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(0, 1, 6, 0.16) 72%,
      rgba(0, 1, 5, 0.72) 100%
    );
  }

  .institute-page .institutional-grid {
    inset: 0;
    overflow: hidden;
    background: none;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 94%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 94%,
      transparent 100%
    );
    opacity: 0.88;
  }

  .institute-page .institutional-grid::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 116px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(246, 250, 255, 0.96) 0%,
      rgba(174, 205, 255, 0.5) 18%,
      transparent 100%
    );
    box-shadow: -2px 0 7px rgba(194, 218, 255, 0.48);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate3d(108vw, -8vh, 0) rotate(-24deg);
    transform-origin: left center;
    will-change: transform, opacity;
    animation: institute-mobile-meteor 8.5s ease-out 0.25s infinite;
  }

  .institute-evolution-canvas {
    display: none;
  }

  .institute-mobile-starfield {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.96;
    pointer-events: none;
  }

  .institute-hero-grid {
    min-height: clamp(500px, 68svh, 580px);
    padding: 102px 22px 36px;
  }

  .institute-page .institutional-copy h1 {
    font-size: clamp(1.85rem, 8.8vw, 2.25rem);
  }

  .institute-title span + span {
    margin-top: 0.34em;
  }

  .institute-english-name {
    margin-top: 16px;
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.11em;
  }

  .institute-page .institutional-lede {
    max-width: 30em;
    margin-top: 28px;
    font-size: 0.8rem;
    line-height: 1.78;
  }
}
@keyframes institute-mobile-meteor {
  0% {
    opacity: 0;
    transform: translate3d(108vw, -8vh, 0) rotate(-24deg);
  }

  2% {
    opacity: 0.92;
  }

  15% {
    opacity: 0;
    transform: translate3d(-42vw, 42vh, 0) rotate(-24deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(-42vw, 42vh, 0) rotate(-24deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-form-status,
  .institute-hero::before,
  .institute-page .institutional-grid::before,
  .institute-insight-card {
    animation: none !important;
  }
}
.about-page {
  --about-ink: #e7eef9;
  --about-surface: #0b111a;
  --about-line: rgba(191, 212, 255, 0.2);
  --about-accent: #ff6f2c;
  --about-muted: rgba(226, 236, 250, 0.74);
  --about-type-eyebrow: 0.75rem;
  --about-type-section-title: clamp(1.45rem, 2.8vw, 2.5rem);
  --about-type-subheading: 1.125rem;
  --about-type-body: 1.0625rem;
  --about-type-card-body: 0.95rem;
  --about-type-stat: clamp(2rem, 3.5vw, 3.25rem);
  background: var(--about-surface);
  color: var(--about-ink);
}
.about-shell {
  padding-top: 0;
  padding-bottom: 0;
}
.about-page main {
  margin-top: clamp(-86px, -7.2vw, -64px);
}
.about-page main > section + section .section-frame {
  position: relative;
}
.about-page main > section + section .section-frame::before {
  content: none;
}
.about-page main > section + section .section-frame.has-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - clamp(28px, 6vw, 96px));
  height: 1px;
  background: rgba(255, 255, 255, 0.52);
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
}
.about-page
  main
  > section
  + section
  .section-frame.has-divider.divider-revealed::before {
  animation: about-divider-reveal 820ms ease-out 1 forwards;
}
@keyframes about-divider-reveal {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}
.about-page .eyebrow {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--about-type-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 236, 250, 0.62);
}
.about-page h2 {
  margin: 10px 0 18px;
  font-family: var(--font-primary);
  font-size: var(--about-type-section-title);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--about-ink);
}
.about-hero {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  background: #060d18;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 10, 18, 0.84) 0%,
      rgba(5, 10, 18, 0.5) 38%,
      rgba(5, 10, 18, 0.12) 78%,
      rgba(5, 10, 18, 0.04) 100%
    ),
    radial-gradient(
      ellipse at 82% 47%,
      rgba(194, 215, 234, 0.1) 0,
      rgba(126, 105, 255, 0.035) 18%,
      transparent 46%
    ),
    linear-gradient(
      104deg,
      transparent 30%,
      rgba(187, 221, 255, 0.035) 48%,
      transparent 64%
    );
  background-position:
    0 0,
    0 0,
    -34vw 0;
  background-size:
    100% 100%,
    120% 120%,
    160% 100%;
  z-index: 1;
  animation: aboutHeroRefraction 18s ease-in-out infinite alternate;
}
.about-hero-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@keyframes aboutHeroRefraction {
  0% {
    background-position:
      0 0,
      -5% -3%,
      -34vw 0;
  }
  100% {
    background-position:
      0 0,
      7% 4%,
      42vw 0;
  }
}
.about-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 5vw, 72px);
  padding-top: clamp(136px, 16vw, 210px);
  padding-bottom: clamp(80px, 10vw, 132px);
}
.about-hero-copy {
  display: grid;
  gap: 18px;
}
.about-hero .eyebrow {
  color: rgba(246, 249, 252, 0.72);
}
.about-hero-title {
  margin: 0;
  max-width: none;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: clamp(1.85rem, 5vw, 4.2rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #f8fbff;
}
.about-hero-title .line {
  display: block;
  white-space: nowrap;
}
.about-hero-summary {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.03rem, 2vw, 1.34rem);
  line-height: 1.52;
  color: rgba(241, 247, 253, 0.86);
}
/* Keep the desktop copy proportional to the hero while capping its reading line. */
@media (min-width: 1041px) {
  .about-hero-summary {
    max-width: min(100%, clamp(34ch, 42vw, 56rem));
    text-wrap: pretty;
  }

  /* English About hero: restrained editorial hierarchy on wide screens. */
  html:lang(en) .about-hero-copy {
    gap: 0;
  }

  html:lang(en) .about-hero .eyebrow {
    margin-bottom: clamp(22px, 1.7vw, 34px);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.17em;
  }

  html:lang(en) .about-hero-title {
    margin-bottom: clamp(28px, 2.2vw, 42px);
    font-size: clamp(3rem, 4.1vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: rgba(248, 251, 255, 0.97);
    text-wrap: balance;
  }

  html:lang(en) #about-hero-typed {
    max-width: min(58rem, 62vw);
    margin-bottom: clamp(22px, 1.8vw, 34px);
    font-size: clamp(1rem, 1.05vw, 1.18rem);
    line-height: 1.62;
    letter-spacing: -0.012em;
    color: rgba(226, 236, 250, 0.72);
  }

  html:lang(en) .about-hero-summary[data-i18n="about.hero.tagline"] {
    max-width: min(58rem, 62vw);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: rgba(226, 236, 250, 0.58);
  }
}
.about-manifest {
  background: var(--about-surface);
}
.about-manifest .section-frame {
  padding-top: clamp(56px, 8vw, 92px);
  padding-bottom: clamp(58px, 8vw, 98px);
  text-align: left;
}
.about-manifest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.4vw, 14px);
  position: relative;
  background: linear-gradient(
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.34)
  );
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.about-manifest-grid p {
  margin: 0;
  padding-inline-start: 18px;
  border-inline-start: 0;
  color: var(--about-muted);
  font-size: 1rem;
  line-height: 1.8;
}
/* @block about-journey — Dates left of the rail, narrative on the right. */
html body.about-page main #about-journey .about-journey-axis {
  --journey-date-width: clamp(72px, 9vw, 136px);
  --journey-half-gap: clamp(16px, 2vw, 32px);
  padding: 0;
  direction: ltr;
}
html body.about-page main #about-journey .about-journey-axis::before {
  left: calc(var(--journey-date-width) + var(--journey-half-gap));
  top: 0.65rem;
}
html body.about-page main #about-journey .about-journey-item {
  display: grid;
  grid-template-columns: var(--journey-date-width) minmax(0, 1fr);
  -moz-column-gap: calc(2 * var(--journey-half-gap));
       column-gap: calc(2 * var(--journey-half-gap));
  align-items: baseline;
}
html body.about-page main #about-journey .about-journey-item::before {
  left: calc(var(--journey-date-width) + var(--journey-half-gap) - 4px);
  top: 0.65rem;
}
.about-journey-date {
  min-width: 0;
  color: var(--about-ink);
  font-size: var(--about-type-subheading);
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.about-journey-content {
  min-width: 0;
}
html[dir="rtl"] .about-journey-content {
  direction: rtl;
}

/* @block about-ip — Research directions between the team and enterprise impact. */
.about-ip {
  background: var(--about-surface);
  scroll-margin-top: 120px;
}
.about-ip > .section-frame {
  padding-block: clamp(56px, 8vw, 96px);
  row-gap: 0;
}
html body.about-page main #about-ip-title {
  margin: 10px 0 18px;
  max-width: 28ch;
  font-size: var(--about-type-section-title);
  font-weight: 450;
  line-height: var(--editorial-section-leading, 1.24);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.about-ip-intro {
  margin: 0;
  max-width: 68ch;
  color: var(--about-muted);
  font-size: var(--about-type-body);
  line-height: var(--editorial-body-leading, 1.76);
  text-wrap: pretty;
}
.about-ip-list {
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-line);
  list-style: none;
}
.about-ip-item {
  display: grid;
  grid-template-columns: 48px minmax(100px, 0.32fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding-block: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--about-line);
}
.about-ip-index {
  color: #93b4d8;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
.about-ip-label {
  color: var(--about-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.about-ip-item h3 {
  margin: 0;
  min-width: 0;
  color: var(--about-ink);
  font-size: var(--about-type-subheading);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.about-ip-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 28px;
}
body.about-page .about-ip-link {
  max-width: 100%;
  gap: 24px;
  margin: 0;
  font-size: var(--editorial-action-size, 0.94rem);
}
body.about-page .about-ip-link:focus-visible {
  outline: 2px solid #93b4d8;
  outline-offset: 6px;
}
.about-ip-link svg {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .about-ip-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px 16px;
  }
  .about-ip-item h3 {
    grid-column: 2;
  }
}

/* @block about-credentials — Continuous name-only marquee. */
html body.about-page .about-credentials-intro {
  margin: -28px 0 0;
  color: var(--about-muted);
  font-size: var(--about-type-body);
  line-height: 1.76;
}
.about-credentials-marquee {
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(28px, 4vw, 44px);
}
.about-credentials-marquee-toggle {
  display: block;
  width: 100%;
  overflow-x: auto;
  padding: clamp(28px, 3vw, 44px) 0;
  border-block: 1px solid var(--about-line);
  border-inline: 0;
  border-radius: 0;
  background: transparent;
  color: var(--about-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  scrollbar-width: thin;
}
.about-credentials-marquee-toggle.is-scrolling {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
          mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
}
.about-credentials-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  direction: ltr;
}
.about-credentials-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
html body.about-page .about-credentials-group .about-credentials-name {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 450;
  line-height: 1.5;
  padding-inline-end: calc(clamp(56px, 8vw, 128px) + 4px);
}
.is-scrolling .about-credentials-track {
  animation: about-credentials-drift var(--credentials-duration, 50s) linear
    infinite;
}
.about-credentials-marquee-toggle[aria-pressed="true"] .about-credentials-track,
.about-credentials-marquee-toggle:focus-visible .about-credentials-track {
  animation-play-state: paused;
}
.about-credentials-marquee-toggle:focus-visible {
  outline: 2px solid #93b4d8;
  outline-offset: 4px;
}
@media (hover: hover) {
  .about-credentials-marquee-toggle:hover .about-credentials-track {
    animation-play-state: paused;
  }
}
html[dir="rtl"] .about-credentials-group {
  direction: rtl;
}
@keyframes about-credentials-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--credentials-distance)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-scrolling .about-credentials-track {
    animation: none;
  }
}
.about-metrics {
  background: var(--about-surface);
}
.about-metrics .section-frame {
  padding-top: clamp(50px, 7.6vw, 88px);
  padding-bottom: clamp(50px, 8vw, 92px);
}
.about-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--about-line);
  border-left: 1px solid var(--about-line);
}
.about-metrics-grid article {
  padding: clamp(20px, 3vw, 34px);
  border-right: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}
.about-metrics-grid strong {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--about-ink);
}
.about-metrics-grid span {
  display: block;
  margin-top: 8px;
  max-width: 18ch;
  color: rgba(220, 232, 249, 0.78);
  font-size: 0.9rem;
  line-height: 1.5;
}
/* @block about-enterprise-logos — Enterprise practice marks on the dark surface. */
.about-enterprise-logos-title {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--about-line);
  color: var(--about-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
.about-enterprise-logos {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px) clamp(16px, 3vw, 48px);
  width: 100%;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}
.about-enterprise-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: clamp(48px, 5.2cqi, 68px);
  padding: clamp(4px, 0.6cqi, 8px);
}
.about-enterprise-logos img {
  display: block;
  width: clamp(104px, 16cqi, 168px);
  height: 100%;
  max-width: 100%;
  max-height: clamp(36px, 4.2cqi, 52px);
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.72;
}
@media (max-width: 540px) {
  .about-enterprise-logos {
    gap: 8px clamp(8px, 2.5vw, 14px);
    margin-top: 12px;
  }
  .about-enterprise-logos li {
    height: clamp(36px, 10cqi, 48px);
    padding: 2px;
  }
  .about-enterprise-logos img {
    width: clamp(56px, 20cqi, 92px);
    max-height: clamp(24px, 7cqi, 32px);
  }
}
.about-careers-entry {
  --about-careers-accent: #a78bfa;
  position: relative;
  overflow: hidden;
  border-top: 1px solid transparent;
  background:
    radial-gradient(
      circle at 82% 42%,
      rgba(167, 139, 250, 0.13),
      transparent 30%
    ),
    var(--about-surface);
}
.about-careers-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(30px, 7vw, 110px);
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(72px, 9vw, 116px);
}
.about-careers-entry-copy {
  max-width: 760px;
}
.about-careers-entry-copy h2 {
  max-width: 16ch;
  margin-bottom: 20px;
}
.about-careers-entry-copy > p:last-child {
  max-width: 50ch;
  margin: 0;
  color: var(--about-muted);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.8;
}
.about-careers-entry-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: min(100%, 220px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(167, 139, 250, 0.72);
  color: var(--about-ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition:
    color 180ms ease,
    border-color 180ms ease;
}
.about-careers-entry-link svg {
  flex: 0 0 auto;
  color: var(--about-careers-accent);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.about-careers-entry-link:hover,
.about-careers-entry-link:focus-visible {
  color: var(--about-careers-accent);
  border-color: var(--about-careers-accent);
}
.about-careers-entry-link:hover svg,
.about-careers-entry-link:focus-visible svg {
  transform: translateX(5px);
}
@media (max-width: 760px) {
  .about-careers-entry-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-careers-entry-link {
    width: 100%;
  }
}
.about-principles {
  background: var(--about-surface);
}
.about-principles .section-frame {
  padding-top: clamp(54px, 8vw, 95px);
  padding-bottom: clamp(56px, 8vw, 98px);
}
.about-principles-paragraph {
  margin: 0;
  max-width: 100%;
  color: var(--about-muted);
  line-height: 1.85;
  font-size: clamp(1rem, 1.35vw, 1.08rem);
}
/* Team motto: a right-hand callout beside the introduction. */
html body.about-page main #about-team [data-i18n="about.team.principle"] {
  justify-self: end;
  align-self: start;
  width: 100%;
  max-width: 21rem;
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid #6ee7a0;
  color: var(--about-ink);
  text-align: start;
  text-wrap: pretty;
}
html:lang(zh)
  body.about-page
  main
  #about-team
  [data-i18n="about.team.principle"] {
  max-width: calc(13.25em + 22px);
}
@media (min-width: 800px) {
  body.about-page #about-team > .section-frame {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.42fr);
    -moz-column-gap: clamp(32px, 6vw, 80px);
         column-gap: clamp(32px, 6vw, 80px);
  }

  body.about-page #about-team > .section-frame > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.about-page #about-team [data-i18n="about.team.intro"] {
    grid-column: 1;
    grid-row: 3;
  }

  html body.about-page main #about-team [data-i18n="about.team.principle"] {
    grid-column: 2;
    grid-row: 3;
    margin-top: -28px;
  }
}
.about-team-row {
  margin-top: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  grid-auto-rows: 1fr;
  align-items: stretch;
  min-height: 430px;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.about-team-row::-webkit-scrollbar {
  height: 8px;
}
.about-team-row::-webkit-scrollbar-thumb {
  background: rgba(191, 212, 255, 0.3);
  border-radius: 999px;
}

/* Keep section actions on the same reading edge as their supporting copy. */
html body.about-page .about-journey-layout > .about-careers-entry-link,
html body.about-page .about-team-entry-link,
html body.about-page .about-footer-actions {
  margin-inline: 0;
  justify-self: start;
}

html body.about-page .about-careers-entry-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 4vw, 46px);
}

html body.about-page .about-team-entry-link {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

html body.about-page .about-journey .section-frame > h2,
html body.about-page .about-careers-entry-copy h2 {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

html body.about-page .about-footer-actions {
  width: min(100%, 380px);
  flex-wrap: wrap;
  gap: 0.35em;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  html body.about-page .about-footer-actions {
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100vw - 32px);
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: clamp(0.67rem, calc(6vw - 0.53rem), 0.9rem);
    text-align: start;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  html body.about-page .about-footer-action-link {
    text-decoration: none;
  }
}

html body.about-page .about-team-entry-link > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.about-team-card {
  scroll-snap-align: start;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--about-line);
  background: rgba(14, 24, 38, 0.92);
  box-sizing: border-box;
}
.about-team-card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--about-ink);
}
.about-team-card h3 span {
  display: block;
  margin-top: 2px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(214, 228, 248, 0.78);
}
.about-team-card p {
  margin: 0;
  color: var(--about-muted);
  font-size: 0.92rem;
  line-height: 1.72;
}
.about-team-card p + p {
  margin-top: 10px;
}
@media (min-width: 1280px) {
  .about-manifest-grid {
    --manifest-gap: clamp(28px, 5vw, 88px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: var(--manifest-gap);
         column-gap: var(--manifest-gap);
    row-gap: 16px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34)),
      linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34));
    background-size:
      1px 100%,
      1px 100%;
    background-repeat: no-repeat, no-repeat;
    background-position:
      0 0,
      calc(50% + (var(--manifest-gap) / 2)) 0;
  }

  .about-team-row {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .about-team-card {
    height: auto;
    scroll-snap-align: none;
  }
}

@media (min-width: 1041px) {
  html:lang(en) body.about-page #about-journey > .section-frame > h2,
  html:lang(en) body.about-page #about-team > .section-frame > h2 {
    max-width: none;
    text-wrap: balance;
  }

  html:lang(en)
    body.about-page
    #about-metrics
    > .section-frame
    > #about-metrics-title {
    max-width: none;
    white-space: nowrap;
  }

  html:lang(en)
    body.about-page
    #about-credentials
    > .section-frame
    > #credentials-title {
    max-width: min(100%, 42ch);
    text-wrap: balance;
  }

  html:lang(en) body.about-page .about-journey-intro,
  html:lang(en)
    body.about-page
    #about-team
    > .section-frame
    > .about-principles-paragraph,
  html:lang(en)
    body.about-page
    #about-metrics
    > .section-frame
    > .about-principles-paragraph {
    max-width: none;
    text-wrap: pretty;
  }

  html:lang(en) body.about-page .about-metrics-grid span {
    max-width: 28ch;
  }

  html:lang(en)
    body.about-page
    #about-team
    > .section-frame
    > .about-team-entry-link {
    width: min(100%, 34rem);
    white-space: nowrap;
    overflow-wrap: normal;
    hyphens: none;
  }

  html:lang(en)
    body.about-page
    #about-team
    > .section-frame
    > .about-team-entry-link
    > span {
    white-space: nowrap;
    overflow-wrap: normal;
    hyphens: none;
  }
}

.about-values-quote .typing-content {
  display: inline;
}
.about-values-quote .typing-caret {
  display: inline-block;
  width: 0.05em;
  height: 0.92em;
  margin-inline-start: 0.05em;
  opacity: 0;
  background: rgba(235, 244, 255, 0.85);
  transform: translateY(0.08em);
}
.about-values-quote.typing .typing-caret {
  opacity: 1;
  animation: caret-blink 900ms steps(1) infinite;
}
.about-values-quote.typing.done .typing-caret {
  animation:
    caret-blink 900ms steps(1) 2,
    caret-fade 420ms ease forwards;
  animation-delay: 0s, 500ms;
}
.about-timeline {
  background: var(--about-surface);
}
.about-timeline .section-frame {
  padding-top: clamp(56px, 8vw, 94px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.about-timeline-list {
  display: grid;
  gap: 10px;
  font-size: clamp(0.98rem, 1.25vw, 1.06rem);
  line-height: 1.8;
}
.about-timeline-list p {
  margin: 0;
  color: var(--about-muted);
}
.about-timeline-list ul {
  margin: 10px 0 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 7px;
}
.about-timeline-list li {
  color: var(--about-muted);
}
.about-timeline-list li strong {
  font-family: var(--font-primary);
  font-size: inherit;
  letter-spacing: normal;
  color: var(--about-ink);
}
.about-values {
  background: var(--about-surface);
}
.about-values .section-frame {
  padding-top: clamp(54px, 8vw, 92px);
  padding-bottom: clamp(58px, 8vw, 96px);
}
.about-values-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  align-items: center;
  gap: clamp(18px, 4vw, 52px);
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.about-values-intro {
  margin: 0 0 16px;
  max-width: 52ch;
  color: var(--about-muted);
  line-height: 1.7;
}
.about-values-grid article {
  padding: clamp(18px, 2.8vw, 26px);
  border: 1px solid var(--about-line);
  background: rgba(14, 24, 38, 0.92);
}
.about-values-grid h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  color: var(--about-ink);
}
.about-values-grid p {
  margin: 0;
  color: var(--about-muted);
  line-height: 1.7;
}
.about-values-quote-wrap {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: clamp(20px, 4vw, 36px);
  border-inline-start: 2px solid rgba(191, 212, 255, 0.66);
  background: linear-gradient(
    180deg,
    rgba(18, 30, 45, 0.95),
    rgba(13, 21, 33, 0.9)
  );
}
.about-values-side-title {
  margin: 2px 0 10px;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.about-values-quote {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgba(236, 244, 255, 0.95);
}

/* About typography system: one deliberate scale across every content section. */
html body.about-page main .about-values-side-title,
html body.about-page main #about-journey > .section-frame > h2,
html body.about-page main #about-team > .section-frame > h2,
html body.about-page main #about-metrics > .section-frame > h2,
html body.about-page main #about-credentials > .section-frame > h2,
html body.about-page main .about-careers-entry-copy > h2 {
  font-size: var(--about-type-section-title);
  line-height: 1.14;
}

html body.about-page main .about-values-intro,
html body.about-page main .about-values-quote,
html body.about-page main .about-journey-intro,
html body.about-page main #about-team .about-principles-paragraph,
html body.about-page main #about-metrics .about-principles-paragraph,
html body.about-page main .about-careers-entry-copy > p:last-child {
  font-size: var(--about-type-body);
  line-height: 1.72;
}

html body.about-page main .about-journey-item h3,
html body.about-page main .about-team-card h3,
html body.about-page main .about-credentials-name {
  font-size: var(--about-type-subheading);
  line-height: 1.4;
}

html body.about-page main .about-journey-item p,
html body.about-page main .about-team-card p,
html body.about-page main .about-metrics-grid span {
  font-size: var(--about-type-card-body);
  line-height: 1.68;
}

html body.about-page main .about-metrics-grid strong {
  font-size: var(--about-type-stat);
}

@media (max-width: 480px) {
  html body.about-page main .about-journey-item h3,
  html body.about-page main .about-team-card h3,
  html body.about-page main .about-credentials-name {
    font-size: var(--about-type-subheading) !important;
    line-height: 1.4 !important;
  }
}

/* Preserve the approved English About hero hierarchy after the shared
   editorial typography layer, whose selectors intentionally carry more
   specificity than the page-local rules above. */
@media (min-width: 1041px) {
  html:lang(en) body[data-site-page="about"] main .about-hero-title {
    font-size: clamp(3rem, 4.1vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
  }

  html:lang(en) body[data-site-page="about"] main #about-hero-typed {
    font-size: clamp(1rem, 1.05vw, 1.18rem);
    line-height: 1.62;
    letter-spacing: -0.012em;
  }

  html:lang(en)
    body[data-site-page="about"]
    main
    .about-hero-summary[data-i18n="about.hero.tagline"] {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.115em;
    text-transform: uppercase;
  }
}

/* @block legal — privacy, terms and error documents */
.legal-page,
.error-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(143, 184, 255, 0.12),
      transparent 34%
    ),
    linear-gradient(180deg, #06080c 0%, #0a0e14 100%);
}
.legal-main,
.error-main {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(132px, 15vw, 190px) var(--gutter) clamp(72px, 10vw, 120px);
}
.legal-hero,
.error-copy {
  display: grid;
  gap: 18px;
}
.legal-hero {
  padding-bottom: clamp(44px, 7vw, 72px);
  border-bottom: 1px solid var(--line);
}
.legal-kicker,
.error-code {
  margin: 0;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.legal-hero h1,
.error-copy h1 {
  max-width: 16ch;
  margin: 0;
  color: #f4f7fb;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.legal-lede,
.error-copy > p:not(.error-code) {
  max-width: 720px;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
}
.legal-sections {
  display: grid;
  gap: 44px;
  padding-top: clamp(44px, 7vw, 72px);
}
.legal-section {
  display: grid;
  gap: 14px;
}
.legal-section h2 {
  margin: 0;
  color: #e9eef6;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 550;
  line-height: 1.3;
}
.legal-section p,
.legal-section li {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.8;
}
.legal-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 1.2em;
}
.legal-section a,
.error-actions a {
  color: #bfd4ff;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.legal-version {
  color: var(--text-faint);
  font-size: 0.78rem;
}
.error-main {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 12px;
}

@media (max-width: 720px) {
  body.home-page
    .architecture-view-copy
    :is(
      .architecture-view-label,
      .architecture-view-title,
      .architecture-view-definition,
      .architecture-view-description
    ) {
    justify-self: center;
    text-align: center;
  }
}

/* @block home — readable mobile hero, shared by all locales. */
@media (max-width: 720px) {
  html:has(> body.home-page) {
    font-size: 100%;
  }

  body.home-page .hero-grid {
    min-height: 100svh;
    padding: max(112px, env(safe-area-inset-top, 0px)) 24px
      max(100px, env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  body.home-page .hero-copy {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    align-items: flex-start;
    text-align: start;
    gap: 24px;
    padding: 0;
  }

  body.home-page .hero .eyebrow {
    max-width: 100%;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.1em;
  }

  body.home-page #company-intro {
    width: 100%;
    max-width: none;
    justify-items: start;
    gap: 24px;
    white-space: normal;
  }

  body.home-page .hero-intro-line:first-child {
    max-width: 100%;
    font-size: clamp(2.125rem, 9vw, 2.625rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  body.home-page .hero-intro-line:last-child {
    max-width: 100%;
    color: #e2e8f0;
    font-size: 1.125rem;
    line-height: 1.75;
    letter-spacing: 0;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }

  body.home-page .hero-video-tint {
    background: linear-gradient(
      180deg,
      rgba(6, 10, 18, 0.32),
      rgba(6, 10, 18, 0.64) 30%,
      rgba(6, 10, 18, 0.64) 75%,
      rgba(6, 10, 18, 0.46)
    );
  }

  html:lang(en) body.home-page .architecture-nav {
    gap: 14px;
  }

  html:lang(en) body.home-page .architecture-nav-item {
    max-width: calc(50% - 7px);
    font-size: clamp(0.62rem, 2.65vw, 0.72rem);
    line-height: 1.32;
    letter-spacing: 0.01em;
  }

  html:is(:lang(en), :lang(de), :lang(fr), :lang(es), :lang(ru), :lang(ar))
    body.home-page
    #architecture-tab-agentrix {
    white-space: pre-line;
    text-wrap: wrap;
  }

  html:lang(en) body.home-page .architecture-world-section {
    margin-top: 18px;
    margin-bottom: 18px;
    padding-inline: clamp(18px, 6vw, 26px);
  }

  html:lang(en) body.home-page .architecture-view-copy.is-active {
    row-gap: 15px;
    padding-top: 18px;
  }

  html:lang(en) body.home-page .architecture-view-title {
    max-width: 19ch;
    font-size: clamp(1.32rem, 6vw, 1.62rem);
    line-height: 1.15;
    overflow-wrap: normal;
    hyphens: none;
  }

  html:lang(en) body.home-page .architecture-view-definition {
    max-width: 42ch;
    font-size: 0.86rem;
    line-height: 1.58;
  }

  html:lang(en) body.home-page .architecture-view-description {
    max-width: 44ch;
    font-size: 0.76rem;
    line-height: 1.58;
  }
}

@media (max-width: 1040px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
  }

  .about-values-layout {
    grid-template-columns: 1fr;
  }

  .about-hero-title {
    width: 100%;
    max-width: 100%;
  }

  .about-hero-title .line {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  html body.about-page .about-journey .section-frame,
  html body.about-page .about-journey-layout,
  html body.about-page .about-journey-axis {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  html body.about-page .about-journey .section-frame > h2 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .about-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .about-hero {
    background-color: #060d18;
    background-image: var(
      --about-mobile-hero-image,
      url("../media/pic/20260618-160500.webp")
    );
    background-position: 58% center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }

  .about-hero::before {
    animation: none;
    background:
      linear-gradient(
        180deg,
        rgba(4, 9, 17, 0.03) 0%,
        rgba(4, 9, 17, 0.1) 54%,
        rgba(4, 9, 17, 0.32) 100%
      ),
      linear-gradient(
        90deg,
        rgba(3, 8, 15, 0.78) 0%,
        rgba(3, 8, 15, 0.74) 52%,
        rgba(3, 8, 15, 0.7) 100%
      );
  }

  .about-hero-flow {
    display: none;
  }

  .about-manifest-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-summary {
    max-width: 100%;
  }

  .about-hero .about-hero-summary {
    color: #e2e8f0;
  }

  .about-hero .eyebrow,
  .about-hero-summary[data-i18n="about.hero.tagline"] {
    color: #cbd5e1;
  }

  html body.about-page .about-journey-axis {
    padding-inline-start: var(--about-journey-rail);
  }

  html body.about-page .about-journey-layout > .about-careers-entry-link,
  html body.about-page .about-team-entry-link {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  html body.about-page .about-team-entry-link > span {
    min-width: 0;
  }
}
@media (max-width: 560px) {
  html body.about-page .about-metrics-grid {
    grid-template-columns: 1fr;
  }

  html body.about-page .about-metrics-grid span {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .about-timeline-list article {
    padding: 14px 12px 14px 14px;
  }
}
@media (max-width: 480px) {
  .about-page main {
    margin-top: 0;
  }

  .about-hero {
    min-height: clamp(440px, 58svh, 510px);
  }

  .about-hero-grid {
    min-height: inherit;
    align-content: start;
    padding-top: 120px;
    padding-bottom: clamp(92px, 24vw, 124px);
    gap: 14px;
  }

  .about-hero-copy {
    gap: 12px;
  }

  .about-hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.35rem, 7.2vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: 0.05em;
  }

  .about-hero-title .line {
    white-space: normal;
  }

  .about-hero-summary {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.62;
  }

  .practices-hero-grid {
    padding-top: clamp(88px, 22vw, 120px);
    padding-bottom: clamp(16px, 4vw, 28px);
    gap: 14px;
  }

  .practices-hero-copy {
    gap: 12px;
  }

  .practices-hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.35rem, 7.2vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: 0.05em;
  }

  .practices-hero .practices-intro {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.62;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero::before {
    animation: none;
  }
}
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  .mobile-nav-trigger {
    display: flex;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    width: 40px;
    height: 40px;
  }
  .mobile-nav-overlay {
    display: block;
    overflow-y: hidden;
  }
  .mobile-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    width: 100%;
    gap: 4px 10px;
    padding: 48px 14px 10px;
  }
  .mobile-nav-item {
    padding: 4px 0;
    border-bottom: 0;
    font-size: clamp(0.34rem, 0.7vw, 0.46rem);
    line-height: 1;
    text-align: left;
  }
  .business-panel-name {
    font-size: clamp(1.36rem, 3.3vw, 1.68rem);
    line-height: 1.2;
  }
}
@media (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  .mobile-nav-trigger {
    display: flex;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    width: 40px;
    height: 40px;
  }
  .mobile-nav-overlay {
    display: block;
    overflow-y: hidden;
  }
  .business-panel-name {
    font-size: clamp(1.32rem, 3.5vw, 1.6rem);
    line-height: 1.2;
  }
  .mobile-nav-item {
    font-size: clamp(0.32rem, 0.72vw, 0.42rem);
    line-height: 0.98;
  }
  .mobile-nav-list {
    padding-top: 44px;
  }
  .hero {
    min-height: 100vw;
  }
  .hero h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
  }
  .home-page .hero .hero-text {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
  }
  .careers-hero img,
  .careers-hero video {
    height: 52vw;
    min-height: 0;
  }
  .about-hero-title {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }
  .architecture-three-viewport {
    min-height: 52vw;
  }
}
.careers-page {
  --careers-ink: #141a22;
  --careers-muted: rgba(20, 26, 34, 0.66);
  --careers-line: rgba(20, 26, 34, 0.11);
  --careers-core-title-size: clamp(2rem, 4.6vw, 2.35rem);
  --careers-surface: #ffffff;
  --careers-placeholder: #e4e8ec;
  --careers-placeholder-border: rgba(20, 26, 34, 0.13);
  background: var(--careers-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
}
.careers-shell {
  padding-top: 0;
  padding-bottom: 0;
}
.careers-page main {
  margin-top: clamp(-86px, -7.2vw, -64px);
}
/* Hero - container height follows video (no extra band below media) */
.careers-hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #08101a;
}
.careers-hero img,
.careers-hero video {
  display: block;
  width: 100%;
  /* Cover 以避免出现左右留黑边；通过更高的高度比例，尽量让裁切落在左右而不是上下。 */
  height: clamp(440px, 60vw, 100vh);
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  filter: saturate(0.72) contrast(1.08);
}
.careers-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 22px);
  padding: clamp(24px, 4vw, 56px);
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 16, 0.03),
    rgba(8, 10, 16, 0.64)
  );
}
/* Adaptive overlay tuning across viewport sizes/aspect ratios. */
@media (min-width: 1600px) and (min-aspect-ratio: 16 / 9) {
  .careers-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 10, 16, 0.06) 0%,
      rgba(8, 10, 16, 0.24) 44%,
      rgba(8, 10, 16, 0.56) 100%
    );
  }
}
@media (max-width: 1024px) {
  .careers-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 10, 16, 0.1) 0%,
      rgba(8, 10, 16, 0.34) 46%,
      rgba(8, 10, 16, 0.66) 100%
    );
  }
}
@media (max-width: 640px) {
  .careers-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 10, 16, 0.16) 0%,
      rgba(8, 10, 16, 0.42) 44%,
      rgba(8, 10, 16, 0.72) 100%
    );
  }
}
.careers-hero-overlay .eyebrow {
  margin: 0;
  position: static;
  transform: none;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.2em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.careers-band .eyebrow {
  letter-spacing: 0.07em;
  color: rgba(20, 26, 34, 0.56);
}
.careers-hero-overlay h1 {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0;
  max-width: min(1400px, 92vw);
  white-space: normal;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.42rem, 3.2vw, 3.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
  color: #f4f7fb;
}
.careers-hero-overlay h1 span {
  display: block;
}
html:lang(en) .careers-hero-overlay h1 [data-i18n="careers.hero.line1"] {
  white-space: pre-line;
}
/* Content bands - OpenAI-like vertical rhythm */
.careers-band {
  border-top: 0;
  background: var(--careers-surface);
}
.careers-page main > section + section .section-frame {
  position: relative;
}
.careers-page main > section + section .section-frame::before {
  content: none;
}
.careers-page main > section + section .section-frame.has-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - clamp(28px, 6vw, 96px));
  height: 1px;
  background: var(--careers-line);
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
}
.careers-page
  main
  > section
  + section
  .section-frame.has-divider.divider-revealed::before {
  animation: careers-divider-reveal 820ms ease-out 1 forwards;
}
@keyframes careers-divider-reveal {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}
.careers-band .section-frame {
  padding-top: clamp(56px, 8vw, 128px);
  padding-bottom: clamp(56px, 8vw, 128px);
}
.careers-mission-inner {
  max-width: 920px;
}
/*
 * The mission frame is border-box and inherits the global inline gutter. Once
 * the large-screen gutter grows, a fixed 920px frame makes its actual reading
 * measure shrink. Keep the accepted 1440px measure, then grow the content
 * column smoothly and cap it before the copy turns into an overlong line.
 * 50.3rem is the 1440px baseline: 920px - (2 × 57.6px gutters) = 804.8px.
 */
@media (min-width: 1440px) {
  .careers-mission-inner {
    max-width: min(
      100%,
      calc(
        clamp(50.3rem, calc(25vw + 27.8rem), 61.5rem) + var(--gutter) +
          var(--gutter)
      )
    );
  }
}
.careers-mission-lede {
  margin: 0;
  font-size: clamp(1.1rem, 1.55vw, 1.72rem);
  font-weight: 400;
  line-height: 1.74;
  color: var(--careers-muted);
}
.careers-mission-lede + .careers-mission-lede {
  margin-top: 1.05rem;
}
.careers-mission-lede strong {
  color: var(--careers-ink);
  font-weight: 600;
}
.careers-statement-heading,
.careers-split-title,
.careers-section-title {
  margin: 0 0 16px;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--careers-ink);
}
/* 防止 Tailwind text-gray-100 在浅色背景的 careers 页面覆盖标题颜色 */
.careers-page .careers-statement-heading,
.careers-page .careers-split-title,
.careers-page .careers-section-title {
  color: var(--careers-ink);
}
.careers-statement-heading--spacer {
  visibility: hidden;
  pointer-events: none;
}
/* Let desktop section titles use the available header row without widening body copy. */
@media (min-width: 981px) {
  .careers-mission-inner > [data-i18n="careers.mission.title"] {
    width: -moz-max-content;
    width: max-content;
    max-width: calc(100vw - var(--gutter) - var(--gutter));
  }

  .careers-principles-col:first-child > [data-i18n="careers.values.label"] {
    width: calc(200% + clamp(32px, 6vw, 72px));
  }
}
.careers-statement-body {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  font-weight: 400;
  line-height: 1.78;
  color: var(--careers-muted);
}
.careers-statement-body strong {
  color: var(--careers-ink);
  font-weight: 600;
}
.careers-principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 72px);
}
.careers-principles-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.careers-principles-list li {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--careers-line);
  font-size: clamp(0.98rem, 1.28vw, 1.42rem);
  font-weight: 400;
  line-height: 1.76;
  color: var(--careers-muted);
}
.careers-principles-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.careers-principles-list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--careers-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Split image + text */
.careers-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.careers-split--reverse .careers-split-row {
  direction: inherit;
}
.careers-split--reverse .careers-split-media,
.careers-split--reverse .careers-split-copy {
  direction: inherit;
  grid-row: 1;
}
.careers-split--reverse .careers-split-media {
  grid-column: 2;
}
.careers-split--reverse .careers-split-copy {
  grid-column: 1;
}
.careers-split-media {
  min-height: clamp(220px, 36vw, 380px);
  border-radius: 12px;
  border: 1px dashed var(--careers-placeholder-border);
  background: linear-gradient(145deg, var(--careers-placeholder), #f0f2f5);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.careers-split-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}
.careers-split-copy .eyebrow {
  margin: 0;
  color: rgba(20, 26, 34, 0.58);
}
.careers-split-copy {
  display: block;
}
.careers-split-copy .careers-split-title {
  margin: 0 0 10px;
}
.careers-split-copy > p.eyebrow {
  margin: 0 0 1em;
}
.careers-split-copy > p:not(.eyebrow) {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  font-weight: 400;
  line-height: 1.76;
  color: var(--careers-muted);
}
.careers-split-copy > p:not(.eyebrow) strong {
  color: var(--careers-ink);
  font-weight: 600;
}
.careers-split-copy > p:not(.eyebrow) + p {
  margin-top: 0;
}
/* Benefits */
.careers-section-title {
  margin: 10px 0 14px;
}
.careers-benefits-lede {
  margin: 0 0 28px;
  max-width: 100%;
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  font-weight: 400;
  line-height: 1.76;
  color: var(--careers-muted);
}
/* Featured cards */
/* Quote */
@media (max-width: 980px) {
  .careers-principles-grid,
  .careers-split-row {
    grid-template-columns: 1fr;
  }

  .careers-principles-grid {
    gap: 0;
  }

  .careers-principles-col
    + .careers-principles-col
    .careers-statement-heading--spacer {
    display: none;
    margin: 0;
  }

  .careers-principles-col:first-child .careers-principles-list li:last-child {
    border-bottom: 1px solid var(--careers-line);
    padding-bottom: 16px;
  }

  .careers-split--reverse .careers-split-row {
    direction: inherit;
  }

  .careers-split--reverse .careers-split-media,
  .careers-split--reverse .careers-split-copy {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 702px) {
  .careers-principles-col + .careers-principles-col {
    margin-top: 0;
  }

  .careers-principles-col + .careers-principles-col .careers-principles-list {
    margin-top: 0;
  }
}
@media (max-width: 720px) {
  .careers-page .topbar {
    top: 30px;
  }

  .careers-hero-overlay h1 {
    font-size: clamp(1.08rem, 4.2vw, 1.72rem);
    letter-spacing: 0;
  }

  .careers-statement-heading,
  .careers-split-title,
  .careers-section-title {
    letter-spacing: 0;
  }
}
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
input:where([type="text"]),
input:where(:not([type])),
input:where([type="email"]),
input:where([type="url"]),
input:where([type="password"]),
input:where([type="number"]),
input:where([type="date"]),
input:where([type="datetime-local"]),
input:where([type="month"]),
input:where([type="search"]),
input:where([type="tel"]),
input:where([type="time"]),
input:where([type="week"]),
select:where([multiple]),
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
input:where([type="text"]):focus,
input:where(:not([type])):focus,
input:where([type="email"]):focus,
input:where([type="url"]):focus,
input:where([type="password"]):focus,
input:where([type="number"]):focus,
input:where([type="date"]):focus,
input:where([type="datetime-local"]):focus,
input:where([type="month"]):focus,
input:where([type="search"]):focus,
input:where([type="tel"]):focus,
input:where([type="time"]):focus,
input:where([type="week"]):focus,
select:where([multiple]):focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}
input::placeholder,
textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}
::-webkit-datetime-edit {
  display: inline-flex;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
select:where([multiple]),
select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
  print-color-adjust: unset;
}
input:where([type="checkbox"]),
input:where([type="radio"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
input:where([type="checkbox"]) {
  border-radius: 0px;
}
input:where([type="radio"]) {
  border-radius: 100%;
}
input:where([type="checkbox"]):focus,
input:where([type="radio"]):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
input:where([type="checkbox"]):checked,
input:where([type="radio"]):checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
input:where([type="checkbox"]):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  input:where([type="checkbox"]):checked {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
  }
}
input:where([type="radio"]):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  input:where([type="radio"]):checked {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
  }
}
input:where([type="checkbox"]):checked:hover,
input:where([type="checkbox"]):checked:focus,
input:where([type="radio"]):checked:hover,
input:where([type="radio"]):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}
input:where([type="checkbox"]):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  input:where([type="checkbox"]):indeterminate {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
  }
}
input:where([type="checkbox"]):indeterminate:hover,
input:where([type="checkbox"]):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}
input:where([type="file"]) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}
input:where([type="file"]):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 480px) {
  .\!container {
    max-width: 480px !important;
  }
  .container {
    max-width: 480px;
  }
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.\!relative {
  position: relative !important;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-4 {
  left: 1rem;
}
.left-5 {
  left: 1.25rem;
}
.left-6 {
  left: 1.5rem;
}
.left-\[34\%\] {
  left: 34%;
}
.left-\[45\%\] {
  left: 45%;
}
.left-\[49\%\] {
  left: 49%;
}
.left-\[55\%\] {
  left: 55%;
}
.left-\[56\%\] {
  left: 56%;
}
.left-\[66\%\] {
  left: 66%;
}
.left-\[68\%\] {
  left: 68%;
}
.top-4 {
  top: 1rem;
}
.top-\[28\%\] {
  top: 28%;
}
.top-\[36\%\] {
  top: 36%;
}
.top-\[38\%\] {
  top: 38%;
}
.top-\[48\%\] {
  top: 48%;
}
.top-\[52\%\] {
  top: 52%;
}
.top-\[56\%\] {
  top: 56%;
}
.top-\[58\%\] {
  top: 58%;
}
.top-\[63\%\] {
  top: 63%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[6\] {
  z-index: 6;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[500px\] {
  height: 500px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-\[68svh\] {
  min-height: 68svh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-12 {
  width: 3rem;
}
.w-2 {
  width: 0.5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-\[15\%\] {
  width: 15%;
}
.w-\[46\%\] {
  width: 46%;
}
.w-\[64\%\] {
  width: 64%;
}
.w-\[72\.4\%\] {
  width: 72.4%;
}
.w-\[81\.2\%\] {
  width: 81.2%;
}
.w-\[91\%\] {
  width: 91%;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.translate-x-2 {
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-help {
  cursor: help;
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-outline-variant\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(69 70 77 / 0.05);
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-none {
  border-style: none;
}
.border-\[\#171f33\] {
  --tw-border-opacity: 1;
  border-color: rgb(23 31 51 / var(--tw-border-opacity, 1));
}
.border-\[\#45464d\]\/20 {
  border-color: rgb(69 70 77 / 0.2);
}
.border-\[\#47d6ff\] {
  --tw-border-opacity: 1;
  border-color: rgb(71 214 255 / var(--tw-border-opacity, 1));
}
.border-outline-variant\/10 {
  border-color: rgb(69 70 77 / 0.1);
}
.border-outline-variant\/20 {
  border-color: rgb(69 70 77 / 0.2);
}
.border-outline-variant\/30 {
  border-color: rgb(69 70 77 / 0.3);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(71 214 255 / var(--tw-border-opacity, 1));
}
.border-primary\/20 {
  border-color: rgb(71 214 255 / 0.2);
}
.border-primary\/40 {
  border-color: rgb(71 214 255 / 0.4);
}
.border-primary\/50 {
  border-color: rgb(71 214 255 / 0.5);
}
.border-secondary\/20 {
  border-color: rgb(78 222 163 / 0.2);
}
.border-secondary\/40 {
  border-color: rgb(78 222 163 / 0.4);
}
.border-secondary\/50 {
  border-color: rgb(78 222 163 / 0.5);
}
.border-tertiary {
  --tw-border-opacity: 1;
  border-color: rgb(255 185 95 / var(--tw-border-opacity, 1));
}
.border-tertiary\/20 {
  border-color: rgb(255 185 95 / 0.2);
}
.border-tertiary\/40 {
  border-color: rgb(255 185 95 / 0.4);
}
.border-tertiary\/50 {
  border-color: rgb(255 185 95 / 0.5);
}
.bg-\[\#060e20\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 14 32 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0b1326\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 19 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#131b2e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(19 27 46 / var(--tw-bg-opacity, 1));
}
.bg-\[\#171f33\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 31 51 / var(--tw-bg-opacity, 1));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(71 214 255 / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: rgb(71 214 255 / 0.1);
}
.bg-primary\/20 {
  background-color: rgb(71 214 255 / 0.2);
}
.bg-primary\/40 {
  background-color: rgb(71 214 255 / 0.4);
}
.bg-primary\/60 {
  background-color: rgb(71 214 255 / 0.6);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(78 222 163 / var(--tw-bg-opacity, 1));
}
.bg-secondary\/10 {
  background-color: rgb(78 222 163 / 0.1);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(11 19 38 / var(--tw-bg-opacity, 1));
}
.bg-surface-container {
  --tw-bg-opacity: 1;
  background-color: rgb(23 31 51 / var(--tw-bg-opacity, 1));
}
.bg-surface-container-highest\/90 {
  background-color: rgb(45 52 73 / 0.9);
}
.bg-surface-container-low {
  --tw-bg-opacity: 1;
  background-color: rgb(19 27 46 / var(--tw-bg-opacity, 1));
}
.bg-surface-container-lowest {
  --tw-bg-opacity: 1;
  background-color: rgb(6 14 32 / var(--tw-bg-opacity, 1));
}
.bg-surface-container-lowest\/80 {
  background-color: rgb(6 14 32 / 0.8);
}
.bg-surface-container\/80 {
  background-color: rgb(23 31 51 / 0.8);
}
.bg-surface-variant {
  --tw-bg-opacity: 1;
  background-color: rgb(45 52 73 / var(--tw-bg-opacity, 1));
}
.bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 185 95 / var(--tw-bg-opacity, 1));
}
.bg-tertiary\/10 {
  background-color: rgb(255 185 95 / 0.1);
}
.bg-tertiary\/20 {
  background-color: rgb(255 185 95 / 0.2);
}
.bg-tertiary\/40 {
  background-color: rgb(255 185 95 / 0.4);
}
.bg-tertiary\/60 {
  background-color: rgb(255 185 95 / 0.6);
}
.bg-transparent {
  background-color: transparent;
}
.bg-\[radial-gradient\(circle_at_center\2c
  transparent_0\%\2c
  rgba\(6\2c
  14\2c
  32\2c
  0\.22\)_100\%\)\] {
  background-image: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(6, 14, 32, 0.22) 100%
  );
}
.bg-\[radial-gradient\(circle_at_center\2c
  transparent_0\%\2c
  rgba\(6\2c
  14\2c
  32\2c
  0\.4\)_100\%\)\] {
  background-image: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(6, 14, 32, 0.4) 100%
  );
}
.stroke-current {
  stroke: currentColor;
}
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-right {
  text-align: right;
}
.font-\[\'Inter\'\] {
  font-family: "Inter";
}
.font-\[\'Roboto_Mono\'\] {
  font-family: "Roboto Mono";
}
.font-body {
  font-family: var(--font-primary);
}
.font-mono {
  font-family: var(--font-mono);
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.05em\] {
  letter-spacing: 0.05em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#47d6ff\] {
  --tw-text-opacity: 1;
  color: rgb(71 214 255 / var(--tw-text-opacity, 1));
}
.text-\[\#4edea3\] {
  --tw-text-opacity: 1;
  color: rgb(78 222 163 / var(--tw-text-opacity, 1));
}
.text-\[\#c6c6cd\] {
  --tw-text-opacity: 1;
  color: rgb(198 198 205 / var(--tw-text-opacity, 1));
}
.text-\[\#dae2fd\] {
  --tw-text-opacity: 1;
  color: rgb(218 226 253 / var(--tw-text-opacity, 1));
}
.text-blue-400\/80 {
  color: rgb(96 165 250 / 0.8);
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-on-surface {
  --tw-text-opacity: 1;
  color: rgb(218 226 253 / var(--tw-text-opacity, 1));
}
.text-on-surface-variant {
  --tw-text-opacity: 1;
  color: rgb(198 198 205 / var(--tw-text-opacity, 1));
}
.text-outline-variant {
  --tw-text-opacity: 1;
  color: rgb(69 70 77 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(71 214 255 / var(--tw-text-opacity, 1));
}
.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(78 222 163 / var(--tw-text-opacity, 1));
}
.text-tertiary {
  --tw-text-opacity: 1;
  color: rgb(255 185 95 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.placeholder-\[\#c6c6cd\]\/30::-moz-placeholder {
  color: rgb(198 198 205 / 0.3);
}
.placeholder-\[\#c6c6cd\]\/30::placeholder {
  color: rgb(198 198 205 / 0.3);
}
.opacity-0 {
  opacity: 0;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow-\[20px_0_40px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
  --tw-shadow: 20px 0 40px rgba(0, 0, 0, 0.4);
  --tw-shadow-colored: 20px 0 40px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
    drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:bg-\[\#131b2e\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(19 27 46 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#171f33\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(23 31 51 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-container:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(23 31 51 / var(--tw-bg-opacity, 1));
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}
.group\/hotspot:hover .group-hover\/hotspot\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/hotspot:hover .group-hover\/hotspot\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 480px) {
  .xs\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media (min-width: 640px) {
  .sm\:min-h-\[300px\] {
    min-height: 300px;
  }
  .sm\:min-h-\[78svh\] {
    min-height: 78svh;
  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:gap-12 {
    gap: 3rem;
  }
  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .home-page .hero-copy {
    max-width: min(90vw, 1000px);
  }
}
@media (min-width: 1920px) {
  :root {
    --gutter: clamp(60px, 6vw, 120px);
  }
  .architecture-three-viewport {
    min-height: clamp(800px, 48vw, 1100px);
  }
  .architecture-world-line {
    font-size: clamp(1.5rem, 2.1vw, 2.5rem);
  }
  .topbar {
    padding: 10px 20px;
  }
  .topnav {
    gap: clamp(8px, 1.2vw, 20px);
    font-size: 1rem;
  }
  .hero h1 {
    font-size: clamp(6rem, 7vw, 9.5rem);
  }
  .home-page .hero .hero-text {
    font-size: clamp(1.3rem, 1.3vw, 1.75rem);
    line-height: 1.8;
  }
  .section-heading h2 {
    font-size: clamp(3rem, 4vw, 5rem);
  }
  .about-hero-grid {
    padding-top: clamp(272px, 32vw, 420px);
    padding-bottom: clamp(160px, 20vw, 264px);
  }
}
.site-footer {
  width: 100%;
  padding: clamp(24px, 4vw, 48px) var(--gutter);
  padding-bottom: calc(
    clamp(24px, 4vw, 48px) + env(safe-area-inset-bottom, 0px)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
}
.careers-page .site-footer-slogan,
.careers-page .site-footer-copy {
  color: var(--careers-muted);
}
.careers-page .site-footer-copy {
  color: rgba(20, 26, 34, 0.42);
}
.site-footer-slogan {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.site-footer-copy {
  margin: 0;
  width: 100%;
  font-size: clamp(0.68rem, 1.3vw, 0.78rem);
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.site-footer-copy,
.site-footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.site-footer-icp,
.site-footer-legal a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}
.site-footer-icp:hover,
.site-footer-icp:focus-visible,
.site-footer-legal a:hover,
.site-footer-legal a:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}
.site-footer-legal {
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.careers-page .site-footer-legal,
.newsroom-page .site-footer-legal {
  color: rgba(20, 26, 34, 0.52);
}

@media (max-width: 720px) {
  .site-footer-slogan {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
  }

  .site-footer-copy {
    width: calc(100vw - 16px);
    letter-spacing: clamp(0, 0.12vw, 0.025em);
  }
}
.mobile-nav-trigger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  border: 1px solid transparent;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}
.mobile-lang-switcher {
  display: none;
}
.mobile-nav-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
  transition:
    transform 260ms ease,
    opacity 260ms ease;
}
.mobile-nav-trigger.is-open .mobile-nav-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.mobile-nav-trigger.is-open .mobile-nav-bar:nth-child(2) {
  opacity: 0;
}
.mobile-nav-trigger.is-open .mobile-nav-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  backdrop-filter: blur(12px) saturate(108%);
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  background: rgba(6, 8, 14, 0.44);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
body.nav-on-dark .mobile-nav-trigger {
  background: rgba(244, 248, 255, 0.2);
  border-color: rgba(79, 101, 134, 0.14);
  backdrop-filter: blur(8px) saturate(116%);
  -webkit-backdrop-filter: blur(8px) saturate(116%);
  box-shadow: 0 6px 14px rgba(24, 35, 54, 0.08);
  color: rgba(31, 48, 72, 0.92);
}
body.nav-on-dark .mobile-lang-switcher .lang-switcher-trigger {
  background: rgba(244, 248, 255, 0.2);
  border-color: rgba(79, 101, 134, 0.14);
  backdrop-filter: blur(8px) saturate(116%);
  -webkit-backdrop-filter: blur(8px) saturate(116%);
  box-shadow: 0 6px 14px rgba(24, 35, 54, 0.08);
  color: rgba(31, 48, 72, 0.92);
}
body.nav-on-light .mobile-nav-trigger {
  background: rgba(14, 18, 28, 0.1);
  border-color: rgba(182, 201, 230, 0.12);
  backdrop-filter: blur(5px) saturate(102%);
  -webkit-backdrop-filter: blur(5px) saturate(102%);
  box-shadow: none;
  color: rgba(244, 247, 251, 0.92);
}
body.nav-on-light .mobile-lang-switcher .lang-switcher-trigger {
  background: rgba(14, 18, 28, 0.1);
  border-color: rgba(182, 201, 230, 0.12);
  backdrop-filter: blur(5px) saturate(102%);
  -webkit-backdrop-filter: blur(5px) saturate(102%);
  box-shadow: none;
  color: rgba(244, 247, 251, 0.92);
}
body.nav-on-dark .mobile-nav-overlay {
  background: rgba(242, 247, 253, 0.86);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
}
body.nav-on-light .mobile-nav-overlay {
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(18px) saturate(105%);
  -webkit-backdrop-filter: blur(18px) saturate(105%);
}
body.nav-on-dark:not(.careers-page) .mobile-nav-item {
  color: rgba(31, 48, 72, 0.92);
  border-bottom-color: rgba(31, 48, 72, 0.12);
}
body.nav-on-dark:not(.careers-page) .mobile-nav-item:hover {
  color: rgba(20, 32, 50, 0.98);
}
body.nav-on-dark:not(.careers-page) .mobile-nav-item[aria-current="page"] {
  color: rgba(18, 88, 168, 0.95);
}
body.nav-on-light:not(.careers-page) .mobile-nav-item {
  color: rgba(244, 247, 251, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.nav-on-light:not(.careers-page) .mobile-nav-item:hover {
  color: rgba(255, 255, 255, 0.98);
}
body.nav-on-light:not(.careers-page) .mobile-nav-item[aria-current="page"] {
  color: var(--accent-2);
}
.mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(80px, 14vw, 120px) clamp(24px, 6vw, 48px) 40px;
}
.mobile-nav-item {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(244, 247, 251, 0.92);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: color 160ms ease;
}
.mobile-nav-item:last-child {
  border-bottom: 0;
}
.mobile-nav-item[aria-current="page"] {
  color: var(--accent-2);
}
.mobile-nav-item:hover {
  color: rgba(255, 255, 255, 0.98);
}
.careers-page .mobile-nav-item {
  color: rgba(20, 26, 34, 0.92);
}
.careers-page .mobile-nav-item:hover {
  color: rgba(20, 26, 34, 0.98);
}

/* @block navigation-disclosure: a single secondary-navigation surface. */
.topnav-group {
  display: contents;
}

.topnav button[data-nav-id] {
  gap: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.topnav button[data-nav-id]::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-top: -3px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 160ms ease;
}

.topnav button[aria-expanded="true"]::after {
  transform: translateY(3px) rotate(225deg);
  opacity: 1;
}

.topnav button[data-nav-id]:is(:hover, [aria-expanded="true"], [aria-current]) {
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--topnav-indicator);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.topnav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 2;
  display: grid;
  gap: 4px;
  width: -moz-max-content;
  width: max-content;
  min-width: 0;
  max-width: min(280px, 100%);
  padding: 6px;
  border: 1px solid var(--topbar-border, rgba(143, 166, 201, 0.2));
  border-radius: 6px;
  background: var(--topnav-dropdown-surface, #111824);
  box-shadow: var(--topbar-shadow, 0 18px 44px rgba(0, 0, 0, 0.24));
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

.topnav-dropdown[hidden] {
  display: none;
}

/* Bridge the small visual gap so the pointer can reach the child links. */
.topnav-dropdown::before {
  content: "";
  position: absolute;
  inset: -20px 0 100%;
}

.topnav-dropdown a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px;
  border-radius: 3px;
  color: var(--topbar-dropdown-text, #cbd5e1);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.topnav-dropdown a:hover,
.topnav-dropdown a:focus-visible {
  color: var(--topbar-dropdown-text-active, #e2e8f0);
  background: var(--topbar-dropdown-hover, rgba(143, 184, 255, 0.12));
}

.topnav-dropdown a:focus-visible {
  outline: 2px solid var(--topbar-dropdown-focus, #8fb8ff);
  outline-offset: -2px;
}

.topnav-dropdown a[aria-current="page"] {
  color: var(--topbar-dropdown-text-active, #e2e8f0);
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--topnav-dropdown-indicator);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.site-subnav {
  position: sticky;
  top: 96px;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - var(--gutter) * 2);
  min-width: 0;
  margin: 8px var(--gutter) 0 auto;
  padding: 4px 16px;
  border: 1px solid var(--topbar-border);
  border-radius: 6px;
  background: var(--topbar-dropdown-surface);
  backdrop-filter: var(--topbar-backdrop);
  -webkit-backdrop-filter: var(--topbar-backdrop);
  color: var(--topbar-dropdown-text);
  overflow-x: auto;
  scrollbar-width: thin;
  letter-spacing: 0;
}

.site-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}

.site-subnav a:is(:hover, [aria-current]) {
  color: var(--topbar-dropdown-text-active);
  text-decoration: underline;
  text-decoration-color: var(--topnav-dropdown-indicator);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.site-subnav a:focus-visible {
  outline: 2px solid var(--topbar-dropdown-focus);
  outline-offset: -2px;
}

@media (min-width: 821px) and (max-width: 1100px) {
  .has-section-nav .about-hero-grid,
  .has-section-nav .careers-v2-hero__inner {
    padding-top: 180px;
  }
}

@media (max-width: 820px) {
  .site-subnav {
    display: none;
  }
}

/* Keep the hero anchored while navigation floats above it. */
@media (min-width: 821px) {
  .has-section-nav main section[id] {
    scroll-margin-top: var(--section-nav-offset, 160px);
  }

  .about-page main,
  .careers-page main,
  .newsroom-page main,
  .institute-page .institutional-hero {
    margin-top: -58px;
  }

  .has-section-nav main {
    margin-top: calc(-66px - var(--section-nav-height, 54px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .topnav button[data-nav-id]::after,
  .topnav-dropdown a {
    transition: none;
  }
}

.mobile-nav-parent-toggle:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
  border-radius: 4px;
}

.mobile-nav-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-parent-row {
  display: flex;
  align-items: center;
}

.mobile-nav-parent-row .mobile-nav-item {
  border-bottom: 0;
}

.mobile-nav-parent-link {
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-nav-parent-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mobile-nav-parent-toggle span {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 160ms ease;
}

.mobile-nav-parent-toggle[aria-expanded="true"] span {
  transform: rotate(45deg);
}

.mobile-nav-children {
  display: flex;
  flex-direction: column;
  padding-block: 0 12px;
  padding-inline-start: 20px;
}

.mobile-nav-children[hidden] {
  display: none;
}

.mobile-nav-child-item {
  display: block;
  padding-block: 8px;
  border-bottom: 0;
  font-size: clamp(1rem, 4.8vw, 1.3rem);
  font-weight: 500;
}

.mobile-nav-child-item[aria-current="page"] {
  text-decoration: none;
}

body.nav-on-dark:not(.careers-page) .mobile-nav-group,
.careers-page .mobile-nav-group {
  border-bottom-color: rgba(31, 48, 72, 0.12);
}

body.nav-on-dark:not(.careers-page) .mobile-nav-parent-row,
.careers-page .mobile-nav-parent-row {
  color: rgba(31, 48, 72, 0.92);
}

body.nav-on-light:not(.careers-page) .mobile-nav-parent-row {
  color: rgba(244, 247, 251, 0.92);
}

@media (max-width: 480px) {
  html {
    font-size: 92%;
  }
  .home-page .hero .eyebrow {
    font-size: clamp(0.68rem, 3vw, 0.76rem) !important;
  }
  h1,
  .text-5xl,
  .md\:text-7xl {
    font-size: clamp(1.45rem, 7vw, 2.1rem) !important;
    line-height: 1.18 !important;
  }
  h2,
  .text-3xl {
    font-size: clamp(1.18rem, 5.4vw, 1.55rem) !important;
    line-height: 1.24 !important;
  }
  h3 {
    font-size: clamp(1.02rem, 4.8vw, 1.28rem) !important;
    line-height: 1.3 !important;
  }
  .hero h1,
  .hero-text {
    font-size: clamp(0.96rem, 5vw, 1.36rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
  }
  .business-panel-name {
    font-size: clamp(1.1rem, 5.2vw, 1.42rem) !important;
    line-height: 1.22;
  }
  .business-summary-inline {
    font-size: 0.8rem;
    line-height: 1.56;
  }
  .careers-page main {
    margin-top: 0;
  }
  .site-footer-slogan {
    font-size: 0.74rem;
    text-align: center;
  }
  .careers-hero {
    min-height: 0;
  }
  .careers-hero img,
  .careers-hero video {
    height: auto;
    min-height: 0;
    -o-object-position: center top;
    object-position: center top;
  }
}

/* Narrow viewports use the same accessible menu on touch and mouse devices. */
@media (max-width: 820px) {
  .topbar {
    display: none;
  }
  .mobile-nav-trigger {
    display: flex;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    width: 40px;
    height: 40px;
  }
  .mobile-lang-switcher {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }
  .mobile-lang-switcher .lang-switcher-trigger {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .mobile-lang-switcher .lang-switcher-globe {
    width: 1.45rem;
    height: 1.45rem;
  }
  .architecture-three-viewport.is-ontology-empty > .architecture-reset-btn,
  .architecture-three-viewport.is-ontology-empty
    > .architecture-rotate-lock-btn,
  .architecture-three-viewport.is-ontology-empty .architecture-three-overlay {
    display: none;
  }
  .mobile-lang-switcher .lang-switcher-panel {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: min(232px, calc(100vw - 40px));
  }
  html[dir="rtl"] .mobile-nav-trigger {
    left: auto;
    right: 20px;
  }
  html[dir="rtl"] .mobile-lang-switcher {
    right: auto;
    left: 20px;
  }
  .mobile-nav-overlay {
    display: block;
  }
}

/* @block newsroom — 媒体报道页 */

.newsroom-page {
  background: #ffffff;
}

.newsroom-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 18px;
}

.newsroom-page main {
  flex: 1;
}

.newsroom-page .site-footer-slogan,
.newsroom-page .site-footer-copy {
  color: rgba(20, 26, 34, 0.66);
}

.newsroom-page .site-footer-copy {
  color: rgba(20, 26, 34, 0.42);
}

/* ── Hero（边距与 practices-hero / about-hero 共用 section-frame + --gutter）── */
.newsroom-hero {
  position: relative;
  border-bottom: 1px solid rgba(20, 26, 34, 0.11);
}

.newsroom-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 5vw, 32px);
  padding-top: clamp(136px, 16vw, 210px);
  padding-bottom: clamp(20px, 3vw, 36px);
  overflow: visible;
}

.newsroom-hero-spiral {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.newsroom-hero-spiral-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sine-wave canvas — decorative, behind hero content */
.newsroom-wave-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Thin scrim over waves so hero copy stays readable */
.newsroom-hero:has(.newsroom-wave-canvas)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.62) 42%,
    rgba(255, 255, 255, 0.28) 68%,
    rgba(255, 255, 255, 0.06) 100%
  );
}

.newsroom-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
}

.newsroom-hero-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.85rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #141a22;
}

.newsroom-hero-sub {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.03rem, 2vw, 1.34rem);
  line-height: 1.52;
  color: #5f5e5a;
}

/* All newsroom language editions gain reading width on large screens.
   Grow from the existing measure without changing article-detail layouts. */
@media (min-width: 1200px) {
  body[data-site-page="newsroom"] .newsroom-hero-sub {
    max-width: clamp(34ch, calc(34ch + 60vw - 720px), 72ch);
  }
}

.newsroom-page .newsroom-hero-title.text-white,
.newsroom-page .newsroom-card-title.text-white {
  color: #141a22;
}

.newsroom-page .newsroom-hero-sub.text-gray-400,
.newsroom-page .newsroom-card-excerpt.text-gray-400 {
  color: #5f5e5a;
}

/* ── Filter bar ── */
.newsroom-filters-section {
  border-bottom: 1px solid rgba(20, 26, 34, 0.11);
}

.newsroom-filters {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  height: 56px;
  align-items: stretch;
}

.newsroom-filters::-webkit-scrollbar {
  display: none;
}

.newsroom-filter-btn {
  flex-shrink: 0;
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 22px;
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #888780;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}

.newsroom-filter-btn:hover {
  color: #444441;
}

.newsroom-filter-btn.is-active {
  color: #141a22;
  border-bottom-color: transparent;
}

.newsroom-filter-btn.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  width: 2px;
  height: 14px;
  background: #141a22;
  transform: translateY(-50%);
  border-radius: 999px;
}

/* ── News grid layout ── */
.newsroom-grid-section .section-frame {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

.newsroom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: clamp(20px, 2.5vw, 32px);
}

.newsroom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(20, 26, 34, 0.09);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

/* 语言可见性：卡片带 data-news-locales 白名单时，非白名单语言下隐藏。
   必须 !important —— 分类筛选（newsroom.js applyFilter）会直接写
   card.style.display = "flex"，否则会把隐藏覆盖掉。 */
.newsroom-card.is-locale-hidden {
  display: none !important;
}

.newsroom-card:has(.newsroom-card-link[href]) {
  cursor: pointer;
}

.newsroom-card:hover {
  border-color: rgba(20, 26, 34, 0.16);
  box-shadow: 0 4px 24px rgba(20, 26, 34, 0.07);
  transform: translateY(-2px);
}

/* 头条卡：仅在「全部」Tab 下全宽横版；其它 Tab 与普通卡一致 */
.newsroom-grid[data-filter="all"] .newsroom-card[data-newsroom-lead] {
  grid-column: 1 / -1;
  flex-direction: row;
}

.newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-img {
  width: 44%;
  flex-shrink: 0;
  aspect-ratio: auto;
}

.newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-img-inner {
  height: 100%;
  min-height: 260px;
}

.newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-body {
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-title {
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  line-height: 1.2;
}

.newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-excerpt {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
}

.newsroom-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.newsroom-card-img-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.newsroom-card-img-photo {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.4s ease;
}

/* Logo thumbnails (e.g. partner marks) — contain, smaller, white field */
.newsroom-card-img--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.newsroom-card-img--logo .newsroom-card-img-photo {
  width: 52%;
  height: auto;
  max-height: 68%;
  -o-object-fit: contain;
     object-fit: contain;
}

.newsroom-card:hover .newsroom-card-img-inner,
.newsroom-card:hover .newsroom-card-img-photo {
  transform: scale(1.04);
}

.newsroom-card-img--1 {
  background-image:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(59, 130, 246, 0.45) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 75% 65%,
      rgba(99, 102, 241, 0.35) 0%,
      transparent 55%
    ),
    linear-gradient(135deg, #0d1829 0%, #111827 100%);
}

.newsroom-card-img--2 {
  background-image:
    radial-gradient(
      ellipse at 60% 30%,
      rgba(56, 189, 248, 0.4) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 25% 70%,
      rgba(14, 165, 233, 0.25) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #0c1e2e 0%, #0f172a 100%);
}

.newsroom-card-img--3 {
  background-image:
    radial-gradient(
      ellipse at 40% 50%,
      rgba(139, 92, 246, 0.4) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 25%,
      rgba(167, 139, 250, 0.25) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #130d26 0%, #0f172a 100%);
}

.newsroom-card-img--4 {
  background-image:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(52, 211, 153, 0.38) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 20% 75%,
      rgba(16, 185, 129, 0.2) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #0b1f18 0%, #0f172a 100%);
}

.newsroom-card-img--5 {
  background-image:
    radial-gradient(
      ellipse at 65% 45%,
      rgba(251, 146, 60, 0.38) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 30% 65%,
      rgba(245, 101, 25, 0.22) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #1e1208 0%, #150f0a 100%);
}

.newsroom-card-img--6 {
  background-image:
    radial-gradient(
      ellipse at 45% 35%,
      rgba(244, 63, 94, 0.35) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(239, 68, 68, 0.22) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #1e0d10 0%, #150d12 100%);
}

.newsroom-card-body {
  padding: clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.newsroom-card-title {
  margin: clamp(8px, 1.2vw, 14px) 0 clamp(4px, 0.8vw, 10px);
}

.newsroom-card-excerpt {
  margin: 0;
  flex: 1;
}

.newsroom-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.newsroom-card-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #444441;
}

.newsroom-card-tag--company {
  color: #444441;
}

.newsroom-card-tag--insight {
  color: #444441;
}

.newsroom-card-date {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #888780;
}

.newsroom-card-link {
  position: static;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #444441;
  text-decoration: none;
  transition: color 0.15s;
}

.newsroom-card-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 整卡可点：链接触层铺满卡片，保留底部「阅读全文」文案 */
.newsroom-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.newsroom-card-link:hover {
  color: #141a22;
}

.newsroom-card-link:focus-visible {
  outline: none;
}

.newsroom-card-link:focus-visible::after {
  outline: 2px solid rgba(47, 77, 134, 0.55);
  outline-offset: -2px;
}

/* ── List section ── */
.newsroom-list-section {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

.newsroom-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Each row ── */
.newsroom-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.newsroom-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.newsroom-item-inner {
  display: grid;
  grid-template-columns: 200px 1fr 32px;
  align-items: center;
  gap: 0 clamp(24px, 4vw, 56px);
  padding: clamp(20px, 2.5vw, 28px) 0;
  text-decoration: none;
  transition: opacity 0.15s;
}

.newsroom-item-inner:hover {
  opacity: 0.75;
}

.newsroom-item-inner:hover .newsroom-item-arrow {
  transform: translateX(4px);
}

.newsroom-item-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

.newsroom-item-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(143, 184, 255, 0.75);
}

.newsroom-item-tag--company {
  color: rgba(167, 139, 250, 0.75);
}

.newsroom-item-tag--insight {
  color: rgba(52, 211, 153, 0.75);
}

.newsroom-item-date {
  font-size: 0.75rem;
  color: rgba(244, 247, 251, 0.28);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.newsroom-item-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(244, 247, 251, 0.88);
}

.newsroom-item-arrow {
  color: rgba(244, 247, 251, 0.22);
  flex-shrink: 0;
  transition:
    transform 0.18s ease,
    color 0.15s;
}

.newsroom-item-inner:hover .newsroom-item-arrow {
  color: rgba(244, 247, 251, 0.55);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .newsroom-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsroom-grid[data-filter="all"] .newsroom-card[data-newsroom-lead] {
    grid-column: 1 / -1;
    flex-direction: column;
  }

  .newsroom-grid[data-filter="all"]
    .newsroom-card[data-newsroom-lead]
    .newsroom-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .newsroom-grid[data-filter="all"]
    .newsroom-card[data-newsroom-lead]
    .newsroom-card-img-inner {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .newsroom-hero-content {
    max-width: 100%;
  }

  .newsroom-hero-spiral-tabs {
    grid-template-columns: repeat(3, minmax(44px, 56px));
    gap: 8px;
    padding: 5px;
  }

  .newsroom-hero-spiral-tab {
    font-size: 0.85rem;
    padding: 9px 0;
  }

  .newsroom-filter-btn {
    font-size: 0.98rem;
  }

  .newsroom-grid {
    grid-template-columns: 1fr;
  }

  .newsroom-card-title {
    margin: 10px 0 6px;
  }

  .newsroom-card-link {
    margin-top: 10px;
  }

  .newsroom-item-inner {
    grid-template-columns: 1fr 24px;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 20px 0;
  }

  .newsroom-item-meta {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .newsroom-item-title {
    grid-column: 1;
    grid-row: 2;
  }

  .newsroom-item-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* @block news-article — 媒体报道正文页（呼应 careers 视觉语言） */

.news-article-page {
  --na-body-text: clamp(1.04rem, 1.35vw, 1.32rem);
  --na-ink: #141a22;
  --na-muted: rgba(20, 26, 34, 0.66);
  --na-line: rgba(20, 26, 34, 0.11);
  --na-surface: #ffffff;
  --na-hero-surface: #f6f7f9;
  --na-gutter: clamp(24px, 4vw, 56px);
  --na-column-hero: min(40rem, 100%);
  --na-column-body: min(36rem, 100%);
  --na-body-tracking: 0.02em;
  --na-heading-tracking: 0;
  background: var(--na-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
}

.news-article-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 18px;
}

.news-article-page main {
  flex: 1;
}

/* Hero：正文页独立边距（分层阅读栏，与 newsroom 列表页分离） */
.news-article-page .newsroom-hero {
  padding-top: clamp(88px, 10.5vw, 132px);
  padding-bottom: clamp(20px, 2.8vw, 32px);
  background: var(--na-hero-surface);
  border-bottom: 1px solid var(--na-line);
}

.news-article-page .newsroom-hero-inner {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--na-gutter);
  padding-right: var(--na-gutter);
  border-radius: 0;
  justify-content: flex-start;
}

.news-article-page .news-article-hero-content {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  width: 100%;
  max-width: var(--na-column-hero);
  margin-inline: auto;
  padding-inline: clamp(4px, 1vw, 12px);
}

.news-article-page .newsroom-hero-title {
  width: 100%;
  max-width: none;
  white-space: normal;
  text-wrap: balance;
  font-size: clamp(1.35rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--na-heading-tracking);
  color: #141a22;
}

.news-article-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.news-article-hero-content .news-article-back {
  margin-bottom: 0;
}

/* ── 正文 band ── */
.news-article-band {
  background: var(--na-surface);
}

.news-article-page .news-article-band .section-frame,
.news-article-page .news-article-cta .section-frame {
  padding-left: var(--na-gutter);
  padding-right: var(--na-gutter);
}

.news-article-band .section-frame {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 8vw, 120px);
}

.news-article-body {
  max-width: var(--na-column-body);
  margin-inline: auto;
  padding-inline: clamp(4px, 1vw, 12px);
}

.news-article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: var(--na-body-text);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--na-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.news-article-back svg {
  transition: transform 0.18s ease;
}

.news-article-back:hover {
  color: var(--na-ink);
}

.news-article-back:hover svg {
  transform: translateX(-3px);
}

.news-article-body p {
  margin: 0 0 1.4em;
  font-size: var(--na-body-text);
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: var(--na-body-tracking);
  color: var(--na-muted);
  text-wrap: pretty;
}

.news-article-body p:last-child {
  margin-bottom: 0;
}

.news-article-figure {
  margin: clamp(1.6em, 3vw, 2.4em) 0;
}

.news-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(20, 26, 34, 0.1);
  background: #f7f7f5;
}

.news-article-figure figcaption {
  margin-top: 0.75em;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #888780;
  text-align: center;
}

.news-article-body p.news-article-source {
  margin-top: clamp(2em, 4vw, 3em);
  margin-bottom: 0;
  padding-top: clamp(1.25em, 2.5vw, 1.75em);
  border-top: 1px solid var(--na-line);
  font-size: var(--na-body-text);
  line-height: 1.6;
  color: #888780;
}

.news-article-source a {
  color: #444441;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.news-article-source a:hover {
  color: #141a22;
}

.news-article-body p strong {
  color: var(--na-ink);
  font-weight: 600;
}

/* 观点稿落款：如「爱化身科技未来智能研究院 / 日期」 */
.news-article-body p.news-article-signoff {
  margin-top: clamp(2em, 4vw, 3em);
  padding-top: clamp(1.25em, 2.5vw, 1.75em);
  border-top: 1px solid var(--na-line);
  font-size: var(--na-body-text);
  line-height: 1.7;
  color: #888780;
}

.news-article-body p.news-article-signoff strong {
  color: #444441;
  font-weight: 600;
}

.news-article-body .news-article-heading {
  margin: clamp(2em, 4vw, 2.8em) 0 clamp(0.65em, 1.4vw, 0.9em);
  font-family: var(--font-primary);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--na-heading-tracking);
  color: var(--na-ink);
}

.news-article-body a {
  color: #2f4d86;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(143, 184, 255, 0.5);
  transition:
    color 0.15s,
    text-decoration-color 0.15s;
}

.news-article-body a:hover {
  color: var(--na-ink);
  text-decoration-color: var(--na-ink);
}

/* 金句：careers statement 式的加重短句，左侧蓝线 */
.news-article-body .statement {
  margin: clamp(1.8em, 3.6vw, 2.6em) 0;
  padding-block: clamp(4px, 1vw, 8px);
  padding-inline-start: clamp(18px, 2.4vw, 30px);
  border-inline-start: 3px solid rgba(143, 184, 255, 0.8);
}

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .topnav,
html[dir="rtl"] .mobile-nav-item,
html[dir="rtl"] .newsroom-filter-btn,
html[dir="rtl"] .newsroom-card-date {
  letter-spacing: 0;
}

html[dir="rtl"] .newsroom-card-link > [aria-hidden="true"],
html[dir="rtl"] .news-article-back svg,
html[dir="rtl"] .about-careers-entry-link svg {
  transform: scaleX(-1);
}

.news-article-body .statement p {
  margin: 0;
  font-size: var(--na-body-text);
  font-weight: 400;
  line-height: 1.82;
  color: var(--na-ink);
  text-wrap: pretty;
}

/* ── 结尾 CTA band（参考 careers-benefits / 申请方式） ── */
.news-article-cta {
  background: var(--na-surface);
  border-top: 1px solid var(--na-line);
}

.news-article-cta .section-frame {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.news-article-cta-inner {
  max-width: var(--na-column-body);
  margin-inline: auto;
  padding-inline: clamp(4px, 1vw, 12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-article-cta-eyebrow {
  font-size: var(--na-body-text);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--na-muted);
}

.news-article-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-primary);
  font-size: var(--na-body-text);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--na-ink);
  text-decoration: none;
  transition:
    gap 0.18s ease,
    color 0.15s;
}

.news-article-cta-link svg {
  transition: transform 0.18s ease;
}

.news-article-cta-link:hover {
  color: #2f4d86;
}

.news-article-cta-link:hover svg {
  transform: translateX(5px);
}

/* section-frame 内标签、相关阅读摘要等与正文 p 同字号（标题保持原样） */
.news-article-page
  .section-frame
  :is(
    .newsroom-card-tag,
    .newsroom-card-date,
    .newsroom-card-excerpt,
    .newsroom-card-link
  ) {
  font-size: var(--na-body-text);
}

/* Keep the accepted <=1440px measure; expand by 1px per 4 viewport pixels,
   then cap the reading line. Hero retains its existing 4rem wider hierarchy. */
@media (min-width: 1440px) {
  .news-article-page {
    --na-column-hero: min(clamp(40rem, calc(25vw + 17.5rem), 60rem), 100%);
    --na-column-body: min(clamp(36rem, calc(25vw + 13.5rem), 56rem), 100%);
  }
}

@media (max-width: 720px) {
  .news-article-page {
    --na-body-text: 1.04rem;
  }

  .news-article-page .newsroom-hero-title {
    font-size: clamp(1.2rem, 5vw, 1.75rem);
    line-height: 1.3;
  }

  .news-article-body p {
    line-height: 1.78;
  }
}

/* @block careers-v2 — Join AIHUASHEN editorial system */
.careers-page {
  --careers-v2-dark: #080d14;
  --careers-v2-dark-raised: #0d141e;
  --careers-v2-light: #f3f4f1;
  --careers-v2-ink: #111820;
  --careers-v2-muted: rgba(17, 24, 32, 0.64);
  --careers-v2-line-dark: rgba(197, 211, 230, 0.16);
  --careers-v2-line-light: rgba(17, 24, 32, 0.14);
  --careers-v2-purple: #9b8cff;
  background: var(--careers-v2-light);
  color: var(--careers-v2-ink);
}

.careers-v2-main {
  background: var(--careers-v2-light);
}

.careers-v2-container {
  box-sizing: border-box;
  width: min(100%, 92rem);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 80px);
}

.careers-v2-hero {
  position: relative;
  display: flex;
  min-height: clamp(680px, 94svh, 1040px);
  align-items: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--careers-v2-line-dark);
  background: var(--careers-v2-dark);
  color: #eef2f7;
  isolation: isolate;
}

.careers-v2-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 13, 20, 0.24),
    rgba(8, 13, 20, 0.6) 50%,
    rgba(8, 13, 20, 0.88)
  );
}

.careers-v2-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
}

.careers-v2-hero__inner {
  /* Match the About hero's title anchor so switching pages feels stable. */
  padding-top: clamp(136px, 16vw, 210px);
  padding-bottom: clamp(76px, 10vh, 128px);
}

.careers-v2-eyebrow {
  margin: 0 0 18px;
  color: rgba(188, 202, 222, 0.76);
  font-size: clamp(0.72rem, 0.78vw, 0.84rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.careers-v2-hero h1,
.careers-v2-section h2,
.careers-v2-cta h2 {
  margin: 0;
  font-family: var(--font-primary);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.careers-v2-hero h1 {
  max-width: 58rem;
  color: #f2f4f7;
  font-size: clamp(2.75rem, 3.9vw, 4.5rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.careers-v2-hero__body {
  max-width: 47rem;
  margin: clamp(24px, 2.6vw, 32px) 0 0;
  color: rgba(220, 228, 238, 0.82);
  font-size: clamp(max(16px, 1rem), 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.76;
  text-wrap: pretty;
}

.careers-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 32px);
}

.careers-v2-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid rgba(216, 225, 237, 0.28);
  border-radius: 999px;
  color: #e8edf4;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.careers-v2-button--primary {
  border-color: #e8edf4;
  background: #e8edf4;
  color: #0b1119;
}

.careers-v2-button:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #0b1119;
  transform: translateY(-1px);
}

.careers-v2-button:focus-visible {
  outline: 2px solid rgba(164, 178, 255, 0.86);
  outline-offset: 4px;
}

.careers-v2-section {
  padding-block: clamp(72px, 7vw, 120px);
}

.careers-v2-build,
.careers-v2-team {
  background: var(--careers-v2-light);
  color: var(--careers-v2-ink);
}

.careers-v2-build__layout,
.careers-v2-team__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.careers-v2-build__story,
.careers-v2-team__copy,
.careers-v2-team blockquote,
.careers-v2-roles__head > * {
  min-width: 0;
}

.careers-v2-build__story {
  position: sticky;
  top: 176px;
}

.careers-v2-build h2,
.careers-v2-team h2 {
  max-width: none;
  color: var(--careers-v2-ink);
  font-size: clamp(max(28px, 1.75rem), 2.5vw, 2.75rem);
  font-weight: 450;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.careers-v2-build__story > p,
.careers-v2-team__copy > p {
  max-width: 40rem;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: var(--careers-v2-muted);
  font-size: clamp(max(16px, 1rem), 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.78;
  text-wrap: pretty;
}

.careers-v2-directions,
.careers-v2-principles__grid,
.careers-v2-role-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.careers-v2-directions li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding-block: clamp(24px, 2.4vw, 32px);
  border-top: 1px solid var(--careers-v2-line-light);
}

.careers-v2-directions li:last-child {
  border-bottom: 1px solid var(--careers-v2-line-light);
}

.careers-v2-directions span,
.careers-v2-principles__grid li > span {
  padding-top: 0.38em;
  color: rgba(17, 24, 32, 0.44);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.careers-v2-directions p {
  margin: 0;
  color: var(--careers-v2-ink);
  font-size: clamp(max(16px, 1rem), 1.1vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.75;
  text-wrap: pretty;
}

.careers-v2-principles,
.careers-v2-roles,
.careers-v2-cta {
  background: var(--careers-v2-light);
  color: var(--careers-v2-ink);
}

.careers-v2-principles h2,
.careers-v2-roles h2,
.careers-v2-cta h2 {
  max-width: 32ch;
  color: var(--careers-v2-ink);
  font-size: clamp(max(28px, 1.75rem), 2.5vw, 2.75rem);
  font-weight: 450;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.careers-v2-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--careers-v2-line-light);
  border-left: 1px solid var(--careers-v2-line-light);
}

.careers-v2-principles__grid li {
  display: flex;
  min-height: clamp(112px, 9vw, 144px);
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 32px);
  border-right: 1px solid var(--careers-v2-line-light);
  border-bottom: 1px solid var(--careers-v2-line-light);
}

.careers-v2-principles__grid li > span {
  color: rgba(17, 24, 32, 0.55);
}

.careers-v2-principles__grid strong {
  color: var(--careers-v2-ink);
  font-size: clamp(1.125rem, 1.3vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.careers-v2-team__layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}

.careers-v2-team h2 {
  max-width: none;
}

.careers-v2-team blockquote {
  margin: 0;
  padding: clamp(6px, 1vw, 12px) 0 clamp(6px, 1vw, 12px)
    clamp(28px, 3.4vw, 52px);
  border-left: 3px solid var(--careers-v2-purple);
  color: rgba(17, 24, 32, 0.82);
  font-size: clamp(1.125rem, 1.45vw, 1.5rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.careers-v2-roles__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}

.careers-v2-roles h2 {
  max-width: none;
}

.careers-v2-roles__head p {
  margin: 0;
  color: var(--careers-v2-muted);
  font-size: clamp(max(16px, 1rem), 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.75;
  text-wrap: pretty;
}

.careers-v2-role-list {
  margin-top: clamp(36px, 4vw, 64px);
  border-top: 1px solid var(--careers-v2-line-light);
}

.careers-v2-role-list li {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--careers-v2-line-light);
}

.careers-v2-role-list span {
  color: var(--careers-v2-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.careers-v2-role-list strong {
  color: var(--careers-v2-ink);
  font-size: clamp(1.125rem, 1.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.careers-v2-cta {
  padding-block: clamp(88px, 9vw, 144px);
  border-top: 1px solid var(--careers-v2-line-light);
}

.careers-v2-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.careers-v2-cta h2 {
  max-width: none;
}

.careers-v2-cta__inner > p {
  max-width: 48rem;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: var(--careers-v2-muted);
  font-size: clamp(max(16px, 1rem), 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.75;
}

.careers-v2-cta .careers-v2-button {
  border-color: rgba(17, 24, 32, 0.3);
  color: var(--careers-v2-ink);
}

.careers-v2-cta .careers-v2-button--primary {
  border-color: var(--careers-v2-ink);
  background: var(--careers-v2-ink);
  color: var(--careers-v2-light);
}

.careers-v2-cta .careers-v2-button:hover {
  border-color: #283540;
  background: #283540;
  color: var(--careers-v2-light);
}

.careers-v2-cta .careers-v2-button:focus-visible {
  outline-color: #675a9d;
}

.careers-v2-actions--center {
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
}

.careers-page .site-footer {
  border-top: 1px solid var(--careers-v2-line-light);
  background: var(--careers-v2-light);
}

.careers-page .site-footer-slogan,
.careers-page .site-footer-copy {
  color: var(--careers-v2-muted);
}

@media (max-width: 1080px) {
  .careers-v2-build__layout,
  .careers-v2-team__layout,
  .careers-v2-roles__head {
    grid-template-columns: 1fr;
    gap: clamp(48px, 7vw, 76px);
  }

  .careers-v2-build__story {
    position: static;
  }

  .careers-v2-build h2,
  .careers-v2-team h2,
  .careers-v2-roles h2 {
    max-width: 32ch;
  }

  .careers-v2-team blockquote {
    max-width: 42rem;
  }

  .careers-v2-roles__head p {
    max-width: 42rem;
  }
}

@media (max-width: 720px) {
  .careers-v2-container {
    padding-inline: 20px;
  }

  .careers-v2-main {
    margin-top: 0;
  }

  .careers-v2-hero {
    min-height: max(700px, 100svh);
    align-items: flex-start;
  }

  .careers-v2-hero__inner {
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .careers-v2-eyebrow {
    margin-bottom: 12px;
  }

  .careers-v2-hero h1 {
    max-width: none;
    font-size: clamp(max(32px, 2rem), 8.7vw, 2.5rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
  }

  .careers-v2-hero__body {
    font-size: max(16px, 1rem);
    line-height: 1.7;
  }

  .careers-v2-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .careers-v2-button {
    width: 100%;
  }

  /* Keep the mobile hero's actions with its centered copy, without changing
     the closing CTA. Long translations can fall onto a second button row. */
  .careers-v2-hero .careers-v2-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .careers-v2-hero .careers-v2-button {
    flex: 1 1 max-content;
    width: auto;
    max-width: 100%;
  }

  .careers-v2-actions--center {
    width: 100%;
    max-width: 28rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .careers-v2-actions--center .careers-v2-button {
    min-width: 0;
    padding-inline: 12px;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }

  .careers-v2-section {
    padding-block: 64px;
  }

  .careers-v2-build h2,
  .careers-v2-team h2,
  .careers-v2-principles h2,
  .careers-v2-roles h2,
  .careers-v2-cta h2 {
    font-size: clamp(max(28px, 1.75rem), 7.2vw, 2.125rem) !important;
    line-height: 1.26 !important;
    letter-spacing: -0.015em;
  }

  .careers-v2-directions li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .careers-v2-principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .careers-v2-principles__grid li {
    min-height: 112px;
    padding: 18px;
  }

  .careers-v2-team blockquote {
    padding-inline-start: 24px;
    font-size: 1.125rem;
  }

  .careers-v2-role-list {
    margin-top: 36px;
  }

  .careers-v2-role-list li {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .careers-v2-role-list strong {
    font-size: 1.125rem;
  }

  .careers-v2-cta {
    padding-block: 80px;
  }
}

html[dir="rtl"] .careers-v2-team blockquote {
  padding-right: clamp(28px, 3.4vw, 52px);
  padding-left: 0;
  border-right: 3px solid var(--careers-v2-purple);
  border-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .careers-v2-button {
    transition: none;
  }
}

/* @block insights-next-research — retained closing module */
.insights-cta {
  --insights-ink: #eef2f8;
  --insights-muted: rgba(199, 208, 223, 0.68);
  --insights-line: rgba(194, 206, 228, 0.16);
  --insights-gold: #d3b474;
  --insights-violet: #c4b5fd;
}

.insights-cta .insights-section-label {
  margin: 0;
  color: #79643d;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.insights-cta-primary,
.insights-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 18px;
  text-decoration: none;
}

.insights-cta .insights-section-label {
  color: rgba(211, 180, 116, 0.86);
}

.insights-cta {
  border-top: 1px solid var(--insights-line);
  background:
    radial-gradient(
      circle at 50% 115%,
      rgba(107, 91, 181, 0.14),
      transparent 45%
    ),
    #070a10;
}

.insights-cta-inner {
  padding-top: clamp(112px, 13vw, 196px);
  padding-bottom: clamp(112px, 13vw, 196px);
  text-align: center;
}

.insights-cta h2 {
  margin: clamp(24px, 3vw, 36px) 0 0;
  color: var(--insights-ink);
  font-size: clamp(2.7rem, 5.8vw, 6.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.insights-cta-inner > p:not(.insights-section-label) {
  max-width: 48ch;
  margin: clamp(26px, 3vw, 38px) auto 0;
  color: var(--insights-muted);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.72;
}

.insights-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(38px, 5vw, 58px);
}

.insights-cta-primary,
.insights-cta-secondary {
  min-width: 190px;
  padding: 12px 24px;
  border: 1px solid rgba(231, 236, 245, 0.28);
  color: #eef2f8;
  font-size: 0.9rem;
  font-weight: 650;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.insights-cta-primary {
  border-color: #eef2f8;
  background: #eef2f8;
  color: #0a0e15;
}

.insights-cta-primary:hover,
.insights-cta-primary:focus-visible {
  border-color: #d9d1ff;
  background: #d9d1ff;
}

.insights-cta-secondary:hover,
.insights-cta-secondary:focus-visible {
  border-color: var(--insights-violet);
  color: var(--insights-violet);
}

@media (max-width: 560px) {
  .insights-cta-actions {
    flex-direction: column;
  }

  .insights-cta-primary,
  .insights-cta-secondary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insights-cta-primary,
  .insights-cta-secondary {
    transition: none;
  }
}

/* @block editorial-typography — Careers-aligned text only
   Deliberately excludes home, product pages, news articles, site chrome and
   embedded scenes. Keep every existing alignment, measure and layout rule. */
body:is(
  [data-site-page="about"],
  [data-site-page="practices"],
  [data-site-page="newsroom"],
  [data-site-page="insights"]
) {
  --editorial-hero-size: clamp(2.75rem, 3.9vw, 4.5rem);
  --editorial-hero-leading: 1.16;
  --editorial-section-size: clamp(max(28px, 1.75rem), 2.5vw, 2.75rem);
  --editorial-section-leading: 1.24;
  --editorial-card-size: clamp(1.125rem, 1.3vw, 1.375rem);
  --editorial-body-size: clamp(max(16px, 1rem), 1.05vw, 1.125rem);
  --editorial-body-leading: 1.76;
  --editorial-quote-size: clamp(1.125rem, 1.45vw, 1.5rem);
  --editorial-eyebrow-size: clamp(0.72rem, 0.78vw, 0.84rem);
  --editorial-action-size: 0.94rem;
}

html body[data-site-page="about"] main .about-hero-title,
html body[data-site-page="practices"] main .practices-hero-title,
html body[data-site-page="newsroom"] main .newsroom-hero-title,
html body[data-site-page="insights"] main .institute-title {
  font-size: var(--editorial-hero-size);
  font-weight: 500;
  line-height: var(--editorial-hero-leading);
  letter-spacing: -0.025em;
}

html body[data-site-page="insights"] main .institute-title span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

html body[data-site-page="about"] {
  --about-type-eyebrow: var(--editorial-eyebrow-size);
  --about-type-section-title: var(--editorial-section-size);
  --about-type-subheading: var(--editorial-card-size);
  --about-type-body: var(--editorial-body-size);
  --about-type-card-body: var(--editorial-body-size);
}

html body[data-site-page="about"] main .about-values-side-title,
html body[data-site-page="about"] main #about-journey > .section-frame > h2,
html body[data-site-page="about"] main #about-team > .section-frame > h2,
html body[data-site-page="about"] main #about-metrics > .section-frame > h2,
html body[data-site-page="about"] main #about-credentials > .section-frame > h2,
html body[data-site-page="about"] main .about-careers-entry-copy > h2,
html body[data-site-page="insights"] main .insights-cta h2 {
  font-size: var(--editorial-section-size);
  font-weight: 450;
  line-height: var(--editorial-section-leading);
  letter-spacing: -0.02em;
}

html
  body[data-site-page="about"]
  main
  :is(.about-journey-item h3, .about-team-card h3, .about-credentials-name),
html
  body[data-site-page="practices"]
  main
  .practice-card
  > .practice-card-title,
html body[data-site-page="newsroom"] main .newsroom-card-title,
html body[data-site-page="insights"] main .newsroom-card-title {
  font-size: var(--editorial-card-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

html
  body[data-site-page="practices"]
  main
  .practice-card
  > .practice-card-title,
html
  body[data-site-page="newsroom"]
  main
  .newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-title {
  font-size: clamp(1.25rem, 1.8vw, 1.875rem);
}

html
  body[data-site-page="about"]
  main
  :is(
    .about-hero-summary,
    .about-values-intro,
    .about-journey-intro,
    .about-journey-item p,
    .about-team-card p,
    .about-metrics-grid span
  ),
html body[data-site-page="about"] main #about-hero-typed,
html body[data-site-page="about"] main #about-team .about-principles-paragraph,
html
  body[data-site-page="about"]
  main
  #about-metrics
  .about-principles-paragraph,
html body[data-site-page="about"] main .about-careers-entry-copy > p:last-child,
html
  body[data-site-page="practices"]
  main
  :is(.practices-intro, .practice-description),
html
  body[data-site-page="newsroom"]
  main
  :is(.newsroom-hero-sub, .newsroom-card-excerpt),
html
  body[data-site-page="newsroom"]
  main
  .newsroom-grid[data-filter="all"]
  .newsroom-card[data-newsroom-lead]
  .newsroom-card-excerpt,
html
  body[data-site-page="insights"]
  main
  :is(.institutional-lede, .newsroom-card-excerpt),
html
  body[data-site-page="insights"]
  main
  .insights-cta-inner
  > p:not(.insights-section-label) {
  font-size: var(--editorial-body-size);
  font-weight: 400;
  line-height: var(--editorial-body-leading);
  letter-spacing: normal;
}

html body[data-site-page="about"] main .about-values-quote {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.01em;
}

html body[data-site-page="about"] main .eyebrow,
html body[data-site-page="about"] main .about-hero .eyebrow,
html body[data-site-page="insights"] main .institutional-copy .eyebrow,
html
  body[data-site-page="insights"]
  main
  :is(.eyebrow, .insights-section-label) {
  font-size: var(--editorial-eyebrow-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
}

html
  body[data-site-page="about"]
  main
  .about-hero-summary[data-i18n="about.hero.tagline"],
html body[data-site-page="insights"] main .institute-english-name {
  font-size: clamp(0.8rem, 0.9vw, 0.94rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

html
  body[data-site-page="about"]
  main
  :is(.about-careers-entry-link, .about-footer-action-link),
html body[data-site-page="practices"] main .practice-actions .button-download,
html
  body[data-site-page="newsroom"]
  main
  :is(.newsroom-filter-btn, .newsroom-card-link),
html
  body[data-site-page="insights"]
  main
  :is(.institute-insight-link, .insights-cta-primary, .insights-cta-secondary) {
  font-size: var(--editorial-action-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
}

html
  body[data-site-page="newsroom"]
  main
  :is(.newsroom-card-tag, .newsroom-card-date, .newsroom-card-publisher),
html
  body[data-site-page="insights"]
  main
  :is(.institute-insight-meta, .newsroom-card-date) {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  body:is(
    [data-site-page="about"],
    [data-site-page="practices"],
    [data-site-page="newsroom"],
    [data-site-page="insights"]
  ) {
    --editorial-hero-size: clamp(max(32px, 2rem), 8.7vw, 2.5rem);
    --editorial-hero-leading: 1.2;
    --editorial-section-size: clamp(max(28px, 1.75rem), 7.2vw, 2.125rem);
    --editorial-section-leading: 1.26;
    --editorial-body-leading: 1.7;
  }
}

/* Match Careers' mobile scale without changing the site's legacy heading reset. */
@media (max-width: 480px) {
  html
    body:is(
      [data-site-page="about"],
      [data-site-page="practices"],
      [data-site-page="newsroom"],
      [data-site-page="insights"]
    )
    main
    h1 {
    font-size: var(--editorial-hero-size) !important;
    line-height: var(--editorial-hero-leading) !important;
  }

  html body[data-site-page="about"] main h2,
  html body[data-site-page="insights"] main .insights-cta h2 {
    font-size: var(--editorial-section-size) !important;
    line-height: var(--editorial-section-leading) !important;
  }

  html
    body[data-site-page="about"]
    main
    :is(.about-journey-item h3, .about-team-card h3, .about-credentials-name),
  html
    body[data-site-page="practices"]
    main
    .practice-card
    > .practice-card-title,
  html body[data-site-page="newsroom"] main .newsroom-card-title,
  html body[data-site-page="insights"] main .newsroom-card-title {
    font-size: var(--editorial-card-size) !important;
    line-height: 1.4 !important;
  }
}

/* @block practices — imported impact story layouts (scoped) */
body[data-impact-story="urban-operations"] .impact-story {
  --ink: #0b1018;
  --muted: #626c79;
  --line: #dce1e6;
  --paper: #fdfdfc;
  --soft: #f1f3f4;
  --accent: #17685f;
  --dark: #0b121b;
  --max: min(1420px, calc(100vw - 96px));
  --sans: Arial, "Helvetica Neue", sans-serif;
}
body[data-impact-story="urban-operations"] .impact-story * {
  box-sizing: border-box;
}
body[data-impact-story="urban-operations"] .impact-story {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-impact-story="urban-operations"] .impact-story a {
  color: inherit;
  text-decoration: none;
}
body[data-impact-story="urban-operations"] .impact-story img {
  display: block;
  width: 100%;
}
body[data-impact-story="urban-operations"] .impact-story p,
body[data-impact-story="urban-operations"] .impact-story h1,
body[data-impact-story="urban-operations"] .impact-story h2,
body[data-impact-story="urban-operations"] .impact-story h3,
body[data-impact-story="urban-operations"] .impact-story figure,
body[data-impact-story="urban-operations"] .impact-story blockquote {
  margin: 0;
}
body[data-impact-story="urban-operations"] .impact-story button {
  font: inherit;
  color: inherit;
}
body[data-impact-story="urban-operations"] .impact-story .skip {
  position: fixed;
  z-index: 100;
  top: -60px;
  left: 16px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
}
body[data-impact-story="urban-operations"] .impact-story .skip:focus {
  top: 16px;
}
body[data-impact-story="urban-operations"] .impact-story .topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100%;
  height: 78px;
  padding: 0 max(48px, calc((100vw - 1420px) / 2));
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  background: rgba(253, 253, 252, 0.93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
body[data-impact-story="urban-operations"] .impact-story .logo {
  font-weight: 800;
  letter-spacing: 0.25em;
  font-size: 19px;
}
body[data-impact-story="urban-operations"] .impact-story .topbar > p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6d7681;
}
body[data-impact-story="urban-operations"] .impact-story .topbar > p span {
  margin-left: 18px;
  color: var(--ink);
  font-weight: 700;
}
body[data-impact-story="urban-operations"] .impact-story .topbar nav {
  display: flex;
  gap: 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="urban-operations"] .impact-story .topbar nav a,
body[data-impact-story="urban-operations"] .impact-story .arrow-link,
body[data-impact-story="urban-operations"] .impact-story .footer a {
  transition: opacity 0.2s;
}
body[data-impact-story="urban-operations"] .impact-story .topbar nav a:hover,
body[data-impact-story="urban-operations"] .impact-story .arrow-link:hover,
body[data-impact-story="urban-operations"] .impact-story .footer a:hover {
  opacity: 0.55;
}
body[data-impact-story="urban-operations"] .impact-story .menu,
body[data-impact-story="urban-operations"] .impact-story .mobile-nav {
  display: none;
}
body[data-impact-story="urban-operations"] .impact-story .hero {
  width: var(--max);
  margin: auto;
  min-height: calc(100dvh - 78px);
  padding: 78px 0 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
  grid-template-rows: auto 132px;
  gap: 40px 52px;
  align-items: end;
}
body[data-impact-story="urban-operations"] .impact-story .hero-index {
  align-self: start;
  padding-top: 12px;
  color: #9ba2aa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
}
body[data-impact-story="urban-operations"] .impact-story .hero-copy {
  align-self: center;
}
body[data-impact-story="urban-operations"] .impact-story .overline,
body[data-impact-story="urban-operations"] .impact-story .section-label {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
body[data-impact-story="urban-operations"] .impact-story .hero h1 {
  max-width: 900px;
  font-size: clamp(62px, 6.8vw, 110px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.068em;
}
body[data-impact-story="urban-operations"] .impact-story .hero h1 em {
  display: block;
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
body[data-impact-story="urban-operations"] .impact-story .hero-statement {
  max-width: 690px;
  margin-top: 34px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="urban-operations"] .impact-story .hero-lead {
  font-size: 19px;
  line-height: 1.5;
}
body[data-impact-story="urban-operations"] .impact-story .hero-support {
  padding-left: 26px;
  color: #66707b;
  font-size: 14px;
  line-height: 1.65;
  border-left: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .arrow-link {
  margin-top: 30px;
  display: inline-flex;
  gap: 50px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
}
body[data-impact-story="urban-operations"] .impact-story .hero-visual {
  align-self: stretch;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #dce1e1;
}
body[data-impact-story="urban-operations"] .impact-story .hero-visual img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 63% center;
     object-position: 63% center;
}
body[data-impact-story="urban-operations"] .impact-story .hero-facts {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .hero-facts div {
  padding: 20px 24px 18px 0;
  border-right: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .hero-facts div + div {
  padding-left: 24px;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .hero-facts
  div:last-child {
  border: 0;
}
body[data-impact-story="urban-operations"] .impact-story .hero-facts strong {
  display: block;
  font-size: 31px;
  letter-spacing: -0.04em;
}
body[data-impact-story="urban-operations"] .impact-story .hero-facts span {
  color: #7a838e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="urban-operations"] .impact-story .section {
  padding: 150px max(48px, calc((100vw - 1420px) / 2));
}
body[data-impact-story="urban-operations"] .impact-story .section-intro {
  display: grid;
  grid-template-columns: 260px minmax(0, 930px);
  gap: 60px;
  align-items: start;
}
body[data-impact-story="urban-operations"] .impact-story .section-intro h2,
body[data-impact-story="urban-operations"] .impact-story .system-title h2,
body[data-impact-story="urban-operations"] .impact-story .district-copy h2 {
  font-size: clamp(52px, 5vw, 82px);
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -0.052em;
}
body[data-impact-story="urban-operations"] .impact-story .context-copy {
  margin: 90px 0 70px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12vw;
  padding-top: 36px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="urban-operations"] .impact-story .lead-copy {
  max-width: 560px;
  font-size: clamp(27px, 2.35vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.035em;
}
body[data-impact-story="urban-operations"] .impact-story .context-copy > div {
  max-width: 620px;
  color: #d0d5de;
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .context-copy
  > div
  p
  + p {
  margin-top: 22px;
}
body[data-impact-story="urban-operations"] .impact-story .challenge-photo {
  position: relative;
  height: min(43vw, 570px);
  overflow: hidden;
}
body[data-impact-story="urban-operations"] .impact-story .challenge-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .challenge-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(480px, 78%);
  padding: 26px 30px;
  background: var(--paper);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .challenge-photo
  strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="urban-operations"] .impact-story .challenge-photo span {
  font-size: 19px;
  line-height: 1.4;
}
body[data-impact-story="urban-operations"] .impact-story .system {
  color: #f8fafc;
  background: var(--dark);
}
body[data-impact-story="urban-operations"] .impact-story .system-title {
  display: grid;
  grid-template-columns: 220px 1fr 0.7fr;
  gap: 50px;
  align-items: end;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .system-title
  .section-label {
  color: #6ea99f;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .system-title
  > p:last-child {
  max-width: 510px;
  color: #a5afbc;
  font-size: 17px;
}
body[data-impact-story="urban-operations"] .impact-story .system-summary {
  margin: 80px 0 0 270px;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #a5afbc;
  font-size: 16px;
}
body[data-impact-story="urban-operations"] .impact-story .product-story {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 70px;
  align-items: start;
}
body[data-impact-story="urban-operations"] .impact-story .product-copy {
  position: sticky;
  top: 120px;
}
body[data-impact-story="urban-operations"] .impact-story .product-copy h3 {
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
body[data-impact-story="urban-operations"] .impact-story .product-frame {
  overflow: hidden;
  color: var(--ink);
  background: #111720;
  border-radius: 14px;
}
body[data-impact-story="urban-operations"] .impact-story .frame-head {
  height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: #111720;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
body[data-impact-story="urban-operations"] .impact-story .product-frame figure {
  aspect-ratio: 16/7.4;
  overflow: hidden;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .product-frame
  figure
  img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
}
body[data-impact-story="urban-operations"] .impact-story .view-switch {
  display: flex;
  border-top: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .view-switch button {
  flex: 1;
  padding: 15px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #111720;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .view-switch
  button:last-child {
  border: 0;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .view-switch
  button[aria-selected="true"] {
  color: #fff;
  background: var(--accent);
}
body[data-impact-story="urban-operations"] .impact-story .workflow-layout {
  margin-top: 90px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 70px;
  align-items: stretch;
}
body[data-impact-story="urban-operations"] .impact-story .workflow-photo {
  position: relative;
  min-height: 0;
  align-self: start;
  overflow: hidden;
}
body[data-impact-story="urban-operations"] .impact-story .workflow-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .workflow-photo
  figcaption {
  position: static;
  width: 100%;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--paper);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .workflow-photo
  strong {
  max-width: 100%;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .workflow-layout
  .workflow-photo
  figcaption
  > span {
  flex: none;
  color: var(--muted);
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="urban-operations"] .impact-story .workflow-copy {
  padding: 45px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: #d0d5de;
  font-size: 16px;
  line-height: 1.75;
}
body[data-impact-story="urban-operations"] .impact-story .workflow-copy p + p {
  margin-top: 28px;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .workflow-copy
  .workflow-lead {
  color: var(--ink);
  font-size: clamp(27px, 2.5vw, 39px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
body[data-impact-story="urban-operations"] .impact-story .impact {
  background: var(--soft);
}
body[data-impact-story="urban-operations"] .impact-story .impact-heading {
  padding-bottom: 70px;
  border-bottom: 1px solid var(--ink);
}
body[data-impact-story="urban-operations"] .impact-story .impact-intro {
  padding: 65px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}
body[data-impact-story="urban-operations"] .impact-story .impact-intro article {
  padding-top: 22px;
  border-top: 1px solid #afb6bd;
}
body[data-impact-story="urban-operations"] .impact-story .impact-intro h3 {
  font-size: 25px;
}
body[data-impact-story="urban-operations"] .impact-story .impact-intro p {
  max-width: 570px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
body[data-impact-story="urban-operations"] .impact-story .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .metric {
  min-height: 245px;
  padding: 31px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111720;
}
body[data-impact-story="urban-operations"] .impact-story .metric p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
body[data-impact-story="urban-operations"] .impact-story .metric p span {
  color: #8b949e;
  font-size: 22px;
}
body[data-impact-story="urban-operations"] .impact-story .metric p b {
  color: var(--accent);
  font-size: 23px;
}
body[data-impact-story="urban-operations"] .impact-story .metric p strong {
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.055em;
}
body[data-impact-story="urban-operations"] .impact-story .metric h3 {
  font-size: 13px;
}
body[data-impact-story="urban-operations"] .impact-story .districts {
  margin-top: 130px;
  padding-top: 70px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 100px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="urban-operations"] .impact-story .district-copy {
  position: sticky;
  top: 120px;
  align-self: start;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .district-copy
  > p:last-child {
  margin-top: 26px;
  color: var(--muted);
  font-size: 15px;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .district-list
  article {
  padding: 35px 0;
  display: grid;
  grid-template-columns: 150px 210px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .district-list
  article:first-child {
  border-top: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .district-list span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="urban-operations"] .impact-story .district-list strong {
  font-size: 29px;
  letter-spacing: -0.04em;
}
body[data-impact-story="urban-operations"] .impact-story .district-list p {
  color: var(--muted);
  font-size: 14px;
}
body[data-impact-story="urban-operations"] .impact-story .closing-impact {
  margin-top: 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="urban-operations"] .impact-story .closing-impact p {
  min-height: 150px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #111720;
  border-right: 1px solid var(--line);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .closing-impact
  p:last-child {
  border: 0;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .closing-impact
  strong {
  font-size: 36px;
  letter-spacing: -0.04em;
}
body[data-impact-story="urban-operations"] .impact-story .closing-impact span {
  color: var(--muted);
  font-size: 13px;
}
body[data-impact-story="urban-operations"] .impact-story .perspective {
  color: #fff;
  background: #14201f;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .perspective
  .section-label {
  color: #8fb9b2;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .perspective
  blockquote {
  max-width: 1220px;
  font-size: clamp(45px, 5.6vw, 86px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
body[data-impact-story="urban-operations"] .impact-story .perspective footer {
  margin-top: 70px;
  padding-top: 25px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .perspective
  footer
  strong {
  font-size: 22px;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .perspective
  footer
  span {
  color: #b7c2c0;
  font-size: 17px;
}
body[data-impact-story="urban-operations"] .impact-story .footer {
  padding: 34px max(48px, calc((100vw - 1420px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9ba4af;
  background: var(--dark);
  font-size: 12px;
}
body[data-impact-story="urban-operations"] .impact-story .footer .logo {
  color: #fff;
}
body[data-impact-story="urban-operations"] .impact-story .enter {
  transform: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
body[data-impact-story="urban-operations"] .impact-story .enter.shown {
  opacity: 1;
  transform: none;
}
body[data-impact-story="urban-operations"] .impact-story :focus-visible {
  outline: 3px solid #62a69b;
  outline-offset: 4px;
}
body[data-impact-story="urban-operations"] .impact-story button:active,
body[data-impact-story="urban-operations"] .impact-story .arrow-link:active {
  transform: translateY(1px);
}
@media (max-width: 1050px) {
  body[data-impact-story="urban-operations"] .impact-story {
    --max: min(1420px, calc(100vw - 64px));
  }
  body[data-impact-story="urban-operations"] .impact-story .topbar {
    padding-inline: 32px;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero {
    grid-template-columns: 55px 1.2fr 0.8fr;
    gap: 30px;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero h1 {
    font-size: clamp(55px, 7vw, 78px);
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-visual {
    min-height: 430px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section {
    padding-inline: 32px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section-intro {
    grid-template-columns: 200px 1fr;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-title {
    grid-template-columns: 180px 1fr;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: 2;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-summary {
    margin-left: 230px;
  }
  body[data-impact-story="urban-operations"] .impact-story .product-story {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
  body[data-impact-story="urban-operations"] .impact-story .districts {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="urban-operations"] .impact-story .district-copy {
    position: static;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .district-list
    article {
    grid-template-columns: 130px 190px 1fr;
  }
}
@media (max-width: 760px) {
  body[data-impact-story="urban-operations"] .impact-story {
    --max: calc(100vw - 32px);
    scroll-padding-top: 68px;
  }
  body[data-impact-story="urban-operations"] .impact-story .topbar {
    height: 64px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .topbar > p,
  body[data-impact-story="urban-operations"] .impact-story .topbar nav {
    display: none;
  }
  body[data-impact-story="urban-operations"] .impact-story .menu {
    display: block;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  body[data-impact-story="urban-operations"] .impact-story .mobile-nav {
    position: absolute;
    top: 64px;
    left: 8px;
    right: 8px;
    padding: 12px;
    display: none;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body[data-impact-story="urban-operations"] .impact-story .mobile-nav.open {
    display: flex;
  }
  body[data-impact-story="urban-operations"] .impact-story .mobile-nav a {
    padding: 12px;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero {
    min-height: auto;
    padding: 62px 0 70px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-index {
    display: none;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero h1 {
    font-size: clamp(52px, 15vw, 70px);
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-statement {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-support {
    padding: 0;
    border: 0;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-visual {
    min-height: 420px;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-facts {
    grid-column: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .hero-facts strong {
    font-size: 24px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section {
    padding: 95px 16px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section-intro,
  body[data-impact-story="urban-operations"] .impact-story .context-copy,
  body[data-impact-story="urban-operations"] .impact-story .system-title,
  body[data-impact-story="urban-operations"] .impact-story .product-story,
  body[data-impact-story="urban-operations"] .impact-story .workflow-layout,
  body[data-impact-story="urban-operations"] .impact-story .districts {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section-intro h2,
  body[data-impact-story="urban-operations"] .impact-story .system-title h2,
  body[data-impact-story="urban-operations"] .impact-story .district-copy h2 {
    font-size: 48px;
  }
  body[data-impact-story="urban-operations"] .impact-story .context-copy {
    margin: 65px 0 50px;
  }
  body[data-impact-story="urban-operations"] .impact-story .lead-copy {
    font-size: 27px;
  }
  body[data-impact-story="urban-operations"] .impact-story .challenge-photo {
    height: 480px;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-summary {
    margin: 55px 0 0;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  body[data-impact-story="urban-operations"] .impact-story .product-story {
    margin-top: 80px;
  }
  body[data-impact-story="urban-operations"] .impact-story .product-copy {
    position: static;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .product-frame
    figure {
    min-width: 760px;
  }
  body[data-impact-story="urban-operations"] .impact-story .product-frame {
    overflow-x: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .workflow-layout {
    margin-top: 60px;
  }
  body[data-impact-story="urban-operations"] .impact-story .workflow-photo {
    min-height: 0;
  }
  body[data-impact-story="urban-operations"] .impact-story .metrics {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="urban-operations"] .impact-story .metric {
    min-height: 190px;
  }
  body[data-impact-story="urban-operations"] .impact-story .impact-intro,
  body[data-impact-story="urban-operations"] .impact-story .closing-impact {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .district-list
    article {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .perspective
    blockquote {
    font-size: 43px;
    line-height: 1.1;
  }
  body[data-impact-story="urban-operations"] .impact-story .perspective footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  body[data-impact-story="urban-operations"] .impact-story .footer {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="urban-operations"] .impact-story {
    scroll-behavior: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .enter,
  body[data-impact-story="urban-operations"] .impact-story .enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
body[data-impact-story="urban-operations"] .impact-story .topbar nav a {
  white-space: nowrap;
}

/* Refined page margins and connected-intelligence composition */
body[data-impact-story="urban-operations"] .impact-story .system-title {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
}
body[data-impact-story="urban-operations"] .impact-story .system-title h2 {
  max-width: 980px;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .system-title
  > p:last-child {
  max-width: 430px;
  padding-bottom: 8px;
  color: #a5afbc;
  font-size: 17px;
}
body[data-impact-story="urban-operations"] .impact-story .system-summary {
  margin: 78px 0 0;
  padding: 0;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="urban-operations"]
  .impact-story
  .system-summary
  article {
  min-height: 230px;
  padding: 32px 42px 34px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body[data-impact-story="urban-operations"]
  .impact-story
  .system-summary
  article
  + article {
  padding-left: 42px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="urban-operations"] .impact-story .system-summary span {
  color: #71b6a9;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="urban-operations"] .impact-story .system-summary p {
  max-width: 520px;
  color: #d5dce4;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

@media (min-width: 1051px) {
  body[data-impact-story="urban-operations"] .impact-story {
    --max: min(1420px, calc(100vw - 144px));
  }
  body[data-impact-story="urban-operations"] .impact-story .topbar {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
  body[data-impact-story="urban-operations"] .impact-story .section {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
  body[data-impact-story="urban-operations"] .impact-story .footer {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="urban-operations"] .impact-story {
    --max: min(1420px, calc(100vw - 96px));
  }
  body[data-impact-story="urban-operations"] .impact-story .topbar {
    padding-inline: 48px;
  }
  body[data-impact-story="urban-operations"] .impact-story .section {
    padding-inline: 48px;
  }
  body[data-impact-story="urban-operations"] .impact-story .footer {
    padding-inline: 48px;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-title {
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
    gap: 44px;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-summary {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  body[data-impact-story="urban-operations"] .impact-story .system-title {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="urban-operations"] .impact-story .system-summary {
    margin-top: 55px;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-summary
    article {
    min-height: 0;
    padding: 28px 0;
  }
  body[data-impact-story="urban-operations"]
    .impact-story
    .system-summary
    article
    + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  body[data-impact-story="urban-operations"] .impact-story .system-summary p {
    margin-top: 28px;
    font-size: 18px;
  }
}

body[data-impact-story="urban-operations"] .impact-story {
  --ink: #e7e9ef;
  --muted: #a3acb9;
  --line: #303744;
  --paper: #0b1017;
  --surface: #121923;
  --soft: #111821;
  --soft-purple: #171c25;
  --accent: #f3f4f6;
  --dark: #080c12;
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.6;
}
body[data-impact-story="provincial-intelligence"] .impact-story {
  --ink: #0a1722;
  --paper: #f5f4ef;
  --white: #fff;
  --muted: #61707b;
  --line: #cfd6d8;
  --navy: #071421;
  --navy-2: #0b2031;
  --blue: #2f75ff;
  --teal: #23a6a2;
  --ice: #dcecf0;
  --pad: clamp(20px, 5vw, 72px);
  --max: 1420px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-impact-story="provincial-intelligence"] .impact-story * {
  box-sizing: border-box;
}
body[data-impact-story="provincial-intelligence"] .impact-story {
  scroll-behavior: smooth;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family:
    "Geist", "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
body[data-impact-story="provincial-intelligence"] .impact-story button,
body[data-impact-story="provincial-intelligence"] .impact-story a {
  font: inherit;
}
body[data-impact-story="provincial-intelligence"] .impact-story a {
  color: inherit;
}
body[data-impact-story="provincial-intelligence"] .impact-story .skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  background: #111720;
  color: #000;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .skip-link:focus {
  top: 12px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .topbar {
  height: 72px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(10, 23, 34, 0.16);
  background: rgba(245, 244, 239, 0.92);
  backdrop-filter: blur(16px);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: transform 0.4s var(--ease);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .topbar.is-hidden {
  transform: translateY(-105%);
}
body[data-impact-story="provincial-intelligence"] .impact-story .brand {
  text-decoration: none;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.05em;
}
body[data-impact-story="provincial-intelligence"] .impact-story .story-name {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .story-name
  span {
  color: var(--ink);
  margin-left: 16px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav {
  justify-self: end;
  display: flex;
  gap: 34px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav a,
body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav a {
  font-size: 13px;
  text-decoration: none;
  position: relative;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transition: right 0.35s var(--ease);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:hover:after,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:focus-visible:after {
  right: 0;
}
body[data-impact-story="provincial-intelligence"] .impact-story .menu-toggle,
body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav {
  display: none;
}
body[data-impact-story="provincial-intelligence"] .impact-story .chapter {
  padding: clamp(120px, 14vw, 220px) var(--pad);
}
body[data-impact-story="provincial-intelligence"] .impact-story .light-chapter {
  background: var(--paper);
}
body[data-impact-story="provincial-intelligence"] .impact-story .dark-chapter {
  background: var(--navy);
  color: #eef5f6;
}
body[data-impact-story="provincial-intelligence"] .impact-story .eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 760;
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero {
  min-height: 100svh;
  padding-top: clamp(150px, 17vw, 230px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: end;
  position: relative;
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero-copy {
  align-self: center;
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero h1 {
  max-width: min(1180px, 92vw);
  margin: 0;
  font-size: clamp(3.6rem, 7vw, 7.6rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
  font-weight: 570;
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero h1 em {
  color: var(--blue);
  font-style: normal;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-statement {
  max-width: 850px;
  margin: clamp(42px, 6vw, 82px) 0 32px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-statement
  p {
  margin: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-statement
  p:first-child {
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.5;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-statement
  p:last-child {
  font-size: 14px;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"] .impact-story .text-link {
  display: inline-flex;
  gap: 16px;
  text-decoration: none;
  border-bottom: 1px solid;
  padding-bottom: 5px;
  font-size: 14px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .text-link
  span {
  transition: transform 0.3s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .text-link:hover
  span {
  transform: translateY(5px);
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero-image {
  margin: 0;
  height: min(70vh, 760px);
  min-height: 520px;
  overflow: hidden;
  align-self: center;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 12%);
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero-image img,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero-facts {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-facts
  div {
  padding: 20px clamp(10px, 2vw, 30px);
  border-right: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-facts
  div:last-child {
  border-right: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-facts
  strong {
  display: block;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1;
  font-weight: 520;
  letter-spacing: -0.04em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-facts
  span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"] .impact-story .wide-heading {
  max-width: var(--max);
  margin: 0 auto clamp(70px, 9vw, 140px);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .wide-heading
  h2,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading
  h2,
body[data-impact-story="provincial-intelligence"] .impact-story .closing h2,
body[data-impact-story="provincial-intelligence"] .impact-story .friction h2 {
  margin: 0;
  max-width: 1180px;
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
  font-weight: 520;
}
body[data-impact-story="provincial-intelligence"] .impact-story .context-grid {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  border-top: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"] .impact-story .context-lead {
  grid-column: span 7;
  padding: 48px 8vw 80px 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .context-lead
  .lead {
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .context-lead
  > p:last-child {
  max-width: 720px;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .evidence-index {
  grid-column: span 5;
  padding: 48px 0 80px 5vw;
  border-left: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .evidence-index
  > p {
  margin: 0 0 30px;
  font-size: 14px;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .evidence-index
  ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .evidence-index
  li {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .evidence-index
  li
  span {
  font-size: 11px;
  color: var(--teal);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image {
  grid-column: 1/-1;
  height: min(66vw, 760px);
  min-height: 420px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  figcaption {
  position: absolute;
  inset: auto 0 0 auto;
  max-width: 500px;
  background: var(--paper);
  padding: 28px 34px;
  border-top: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  figcaption
  strong,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  figcaption
  span {
  display: block;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  figcaption
  span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
  gap: 8vw;
  align-items: start;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction-pin {
  position: sticky;
  top: 140px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction-list {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 50px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-item
  > span {
  font-size: 12px;
  color: var(--teal);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-item
  h3 {
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 18px;
  font-weight: 520;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-item
  p {
  grid-column: 2;
  margin: 0;
  max-width: 650px;
  color: #aebec7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .system {
  padding-top: 80px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading {
  max-width: var(--max);
  margin: 0 auto clamp(80px, 11vw, 170px);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading
  > p:last-child {
  max-width: 720px;
  margin: 40px 0 0 auto;
  color: #aebec7;
  font-size: 18px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-accordion {
  max-width: var(--max);
  margin: auto;
  min-height: 460px;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.24);
  overflow: hidden;
}
body[data-impact-story="provincial-intelligence"] .impact-story .layer-panel {
  flex: 1;
  min-width: 110px;
  padding: 34px 28px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    flex 0.8s var(--ease),
    background 0.5s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel:last-child {
  border-right: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel:focus-visible,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel.is-open {
  background: #0d2a3d;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel.is-open {
  flex: 2.4;
}
body[data-impact-story="provincial-intelligence"] .impact-story .layer-no {
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.18em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel
  strong {
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.15;
  font-weight: 520;
  max-width: 300px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel
  em {
  max-width: 340px;
  font-style: normal;
  font-size: 14px;
  color: #aebec7;
  opacity: 0;
  transform: translateY(12px);
  transition: 0.4s var(--ease);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel.is-open
  em {
  opacity: 1;
  transform: none;
}
body[data-impact-story="provincial-intelligence"] .impact-story .ontology-lab {
  max-width: var(--max);
  margin: clamp(110px, 14vw, 220px) auto 0;
}
body[data-impact-story="provincial-intelligence"] .impact-story .lab-copy {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 6vw;
  align-items: end;
  margin-bottom: 55px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .lab-copy
  .eyebrow {
  align-self: start;
}
body[data-impact-story="provincial-intelligence"] .impact-story .lab-copy h3 {
  margin: 0;
  font-size: clamp(32px, 4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 520;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .lab-copy
  > p:last-of-type {
  grid-column: 2;
  max-width: 720px;
  color: #aebec7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .query-switch {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .query-switch
  button {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #dfeaec;
  padding: 10px 15px;
  cursor: pointer;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .query-switch
  button:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .query-switch
  button:focus-visible,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .query-switch
  button.is-active {
  background: #111720;
  color: var(--navy);
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-stage {
  height: min(72vw, 850px);
  min-height: 650px;
  position: relative;
  background: radial-gradient(
    circle at 50% 43%,
    #123d54 0,
    #0a2233 38%,
    #071421 72%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 78%);
          mask-image: radial-gradient(circle, #000, transparent 78%);
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
body[data-impact-story="provincial-intelligence"] .impact-story .edges path {
  fill: none;
  stroke: #476273;
  stroke-width: 2;
  opacity: 0.38;
  marker-end: url(#arrow);
  transition:
    stroke 0.5s,
    opacity 0.5s,
    filter 0.5s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="gdp"]
  [data-edge="province-city"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="gdp"]
  [data-edge="city-district"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="gdp"]
  [data-edge="district-indicator"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="gdp"]
  [data-edge="indicator-year"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="gdp"]
  [data-edge="definition-indicator"] {
  stroke: var(--blue);
  opacity: 1;
  filter: url(#glow);
  stroke-dasharray: 10 8;
  animation: pathFlow 1.5s linear infinite;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="province-city"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="city-district"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="district-indicator"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="indicator-industry"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="policy-industry"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="tourism"]
  [data-edge="policy-indicator"] {
  stroke: var(--teal);
  opacity: 1;
  filter: url(#glow);
  stroke-dasharray: 10 8;
  animation: pathFlow 1.5s linear infinite;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="source"]
  [data-edge="policy-indicator"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="source"]
  [data-edge="definition-indicator"],
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-stage[data-query="source"]
  [data-edge="indicator-year"] {
  stroke: #f0ca67;
  opacity: 1;
  filter: url(#glow);
  stroke-dasharray: 10 8;
  animation: pathFlow 1.5s linear infinite;
}
@keyframes pathFlow {
  to {
    stroke-dashoffset: -36;
  }
}
body[data-impact-story="provincial-intelligence"] .impact-story .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(78px, 9vw, 126px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: #12344b;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.5s var(--ease),
    background 0.4s,
    box-shadow 0.4s;
  z-index: 3;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node:focus-visible,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node.is-active {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--blue);
  box-shadow:
    0 0 0 8px rgba(47, 117, 255, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.4);
}
body[data-impact-story="provincial-intelligence"] .impact-story .node span {
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 650;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node small {
  font-size: 10px;
  color: #bcd0dc;
  margin-top: 3px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-province {
  background: #173d65;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-indicator {
  background: #137c86;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-policy,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-definition {
  border-radius: 4px;
  aspect-ratio: 1.5;
  background: #2a3640;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-detail {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: min(330px, 40%);
  padding: 20px 22px;
  background: rgba(4, 14, 23, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  z-index: 4;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  span,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  strong {
  display: block;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  span {
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  strong {
  font-size: 20px;
  margin-top: 6px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-detail p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #aebec7;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-legend {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  padding-top: 18px;
  color: #aebec7;
  font-size: 11px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-legend
  i {
  display: inline-block;
  width: 30px;
  border-top: 2px solid var(--blue);
  vertical-align: middle;
  margin-right: 7px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-legend
  .line-teal {
  border-color: var(--teal);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-legend
  .line-dash {
  border-top-style: dashed;
  border-color: #f0ca67;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-stack {
  max-width: var(--max);
  margin: auto;
}
body[data-impact-story="provincial-intelligence"] .impact-story .workflow-card {
  position: sticky;
  top: 100px;
  min-height: 520px;
  display: grid;
  grid-template-columns: 100px 1fr minmax(260px, 0.55fr);
  gap: 5vw;
  padding: clamp(34px, 5vw, 72px);
  margin-bottom: 80px;
  background: #111720;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(10, 23, 34, 0.08);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-card:nth-child(2) {
  top: 130px;
  background: #111720;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-number {
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.8;
  color: var(--blue);
  font-weight: 280;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  h3 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 30px;
  font-weight: 520;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  > p {
  max-width: 720px;
  font-size: 18px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  ol {
  list-style: none;
  padding: 20px 0 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--line);
  counter-reset: steps;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  li {
  counter-increment: steps;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  li:before {
  content: "0" counter(steps);
  font-size: 10px;
  color: var(--teal);
  margin-right: 18px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result {
  align-self: end;
  border-top: 4px solid var(--blue);
  padding-top: 18px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result
  span,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result
  strong {
  display: block;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result
  span {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result
  strong {
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.05;
  margin: 10px 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-result
  p {
  font-size: 13px;
  color: var(--muted);
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric-grid {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric {
  grid-column: span 5;
  min-height: 340px;
  padding: 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric-wide {
  grid-column: span 7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric-proof {
  grid-column: span 7;
  background: var(--navy);
  color: #fff;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric strong {
  font-size: clamp(50px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 480;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric h3 {
  font-size: 20px;
  margin: auto 0 8px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric p {
  margin: 0;
  color: var(--muted);
  max-width: 470px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .metric-proof
  p {
  color: #aebec7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .proof-strip {
  max-width: var(--max);
  margin: 80px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .proof-strip
  span {
  color: var(--blue);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .question-marquee {
  overflow: hidden;
  background: var(--teal);
  color: #d0d5de;
  padding: 24px 0;
}
body[data-impact-story="provincial-intelligence"] .impact-story .marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: marquee 38s linear infinite;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .marquee-track
  span {
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 570;
  white-space: nowrap;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .marquee-track
  span:after {
  content: "·";
  margin: 0 34px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
body[data-impact-story="provincial-intelligence"] .impact-story .closing {
  min-height: 90svh;
  display: flex;
  align-items: center;
}
body[data-impact-story="provincial-intelligence"] .impact-story .closing-copy {
  max-width: var(--max);
  width: 100%;
  margin: auto;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .closing-copy
  > p:not(.eyebrow) {
  max-width: 720px;
  margin: 48px 0;
  color: #aebec7;
  font-size: 18px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 260px;
  padding: 17px 20px;
  background: #111720;
  color: var(--navy);
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.3s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .primary-button:hover {
  background: var(--teal);
  transform: translateY(-3px);
}
body[data-impact-story="provincial-intelligence"] .impact-story .site-footer {
  padding: 26px var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--navy);
  color: #d9e6e9;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="provincial-intelligence"] .impact-story .site-footer p {
  font-size: 12px;
  color: #91a7b2;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .site-footer
  > a:last-child {
  justify-self: end;
  font-size: 12px;
  text-decoration: none;
}
body[data-impact-story="provincial-intelligence"] .impact-story .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .reveal.is-visible {
  opacity: 1;
  transform: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .media-reveal
  img {
  transform: scale(1.08);
  transition: transform 1.7s var(--ease);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .media-reveal.is-visible
  img {
  transform: scale(1);
}
@media (max-width: 980px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .topbar {
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .story-name,
  body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav {
    display: none;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .menu-toggle {
    display: block;
    border: 0;
    background: transparent;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 24px var(--pad);
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .mobile-nav.is-open {
    display: grid;
    gap: 18px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero-image {
    height: 62vw;
    min-height: 420px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero-facts {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .context-lead,
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .evidence-index {
    grid-column: 1/-1;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .evidence-index {
    border-left: 0;
    padding-left: 0;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .friction {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .friction-pin {
    position: relative;
    top: 0;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .lab-copy {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .lab-copy
    > p:last-of-type,
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .query-switch {
    grid-column: 1;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-card {
    grid-template-columns: 70px 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-result {
    grid-column: 2;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-stage {
    min-height: 650px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .metric,
  body[data-impact-story="provincial-intelligence"] .impact-story .metric-wide,
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .metric-proof {
    grid-column: span 6;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .site-footer {
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .site-footer
    p {
    display: none;
  }
}
@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .chapter {
    padding-left: 18px;
    padding-right: 18px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero {
    padding-top: 124px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero h1 {
    font-size: clamp(3rem, 15vw, 5rem);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .hero-statement {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero-image {
    height: 74vw;
    min-height: 330px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .hero-facts
    div {
    padding: 18px 10px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .hero-facts
    strong {
    font-size: 32px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .context-lead {
    padding-right: 0;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .challenge-image {
    min-height: 460px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .challenge-image
    figcaption {
    left: 0;
    padding: 20px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .friction-item {
    grid-template-columns: 36px 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .layer-accordion {
    min-height: 680px;
    flex-direction: column;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .layer-panel {
    min-height: 95px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .layer-panel.is-open {
    flex: 2.6;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab {
    margin-top: 120px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-stage {
    min-height: 720px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node {
    width: 76px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node small {
    display: none;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node-detail {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-card {
    position: relative;
    top: auto !important;
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-number {
    font-size: 72px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-result {
    grid-column: 1;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .metric,
  body[data-impact-story="provincial-intelligence"] .impact-story .metric-wide,
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .metric-proof {
    grid-column: 1/-1;
    min-height: 280px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .proof-strip {
    overflow-x: auto;
    justify-content: flex-start;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .proof-strip
    div {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .site-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="provincial-intelligence"] .impact-story {
    scroll-behavior: auto;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story *,
  body[data-impact-story="provincial-intelligence"] .impact-story *:before,
  body[data-impact-story="provincial-intelligence"] .impact-story *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .reveal {
    opacity: 1;
    transform: none;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .marquee-track {
    transform: none;
    flex-wrap: wrap;
    width: auto;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .marquee-track
    span[aria-hidden="true"] {
    display: none;
  }
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero h1 {
  font-size: clamp(3.3rem, 5.8vw, 6.4rem);
}
body[data-impact-story="provincial-intelligence"] .impact-story .hero {
  padding-bottom: 80px;
}
@media (max-width: 980px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .hero h1 {
    font-size: clamp(2.8rem, 12.5vw, 4rem);
  }
}

/* the enterprise-aligned navigation and footer */
body[data-impact-story="provincial-intelligence"] .impact-story {
  scroll-padding-top: 90px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .topbar {
  position: sticky;
  inset: 0 0 auto;
  transform: none !important;
  height: 78px;
  padding: 0 max(72px, calc((100vw - 1420px) / 2));
  grid-template-columns: 130px 1fr auto;
  background: rgba(253, 253, 252, 0.93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
body[data-impact-story="provincial-intelligence"] .impact-story .logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.25em;
}
body[data-impact-story="provincial-intelligence"] .impact-story .story-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6d7681;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .story-name
  span {
  margin-left: 18px;
  color: var(--ink);
  font-weight: 700;
}
body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav {
  gap: 30px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav a,
body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.2s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:after {
  display: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .desktop-nav
  a:focus-visible,
body[data-impact-story="provincial-intelligence"] .impact-story .footer a:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .footer
  a:focus-visible {
  opacity: 0.55;
}
body[data-impact-story="provincial-intelligence"] .impact-story .footer {
  padding: 34px max(72px, calc((100vw - 1420px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9ba4af;
  background: var(--navy);
  font-size: 12px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .footer .logo {
  color: #fff;
}

/* Review refinements */
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .context.chapter {
  padding-top: 60px;
  padding-bottom: 130px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .context
  .wide-heading {
  margin-bottom: 60px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .context-lead {
  padding-top: 38px;
  padding-bottom: 58px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .context-lead
  .lead {
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image {
  height: min(43vw, 570px);
  min-height: 360px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .challenge-image
  figcaption {
  max-width: 460px;
  padding: 24px 30px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .wide-heading
  h2,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading
  h2,
body[data-impact-story="provincial-intelligence"] .impact-story .closing h2,
body[data-impact-story="provincial-intelligence"] .impact-story .friction h2 {
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction {
  padding-top: 135px;
  padding-bottom: 145px;
  background: #0a1b28;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction-pin {
  top: 118px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-visual {
  height: clamp(210px, 25vw, 350px);
  margin: 52px 0 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-visual
  img,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-image
  img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0.7) contrast(1.06);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-item
  p {
  font-size: 16px;
  line-height: 1.78;
  color: #bdc9cf;
}
body[data-impact-story="provincial-intelligence"] .impact-story .system {
  padding-top: 135px;
  padding-bottom: 150px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading {
  margin-bottom: 70px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-heading
  h2 {
  font-size: clamp(3rem, 5.25vw, 6rem);
}
body[data-impact-story="provincial-intelligence"] .impact-story .system-image {
  max-width: var(--max);
  height: min(42vw, 560px);
  margin: 0 auto 90px;
  position: relative;
  overflow: hidden;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .system-image
  figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(520px, 72%);
  padding: 25px 30px;
  background: rgba(7, 20, 33, 0.92);
  color: #d7e2e6;
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .layer-panel
  em {
  font-size: 16px;
  line-height: 1.65;
  color: #c1cdd3;
}
body[data-impact-story="provincial-intelligence"] .impact-story .ontology-lab {
  margin-top: 150px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-stage {
  height: min(78vw, 960px);
  min-height: 760px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-lines {
  height: 78%;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-detail {
  left: 28px;
  right: 28px;
  bottom: 24px;
  width: auto;
  max-width: 720px;
  padding: 22px 26px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  span {
  font-size: 11px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-detail
  strong {
  font-size: 24px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-detail p {
  font-size: 15px;
  line-height: 1.65;
}
body[data-impact-story="provincial-intelligence"] .impact-story .workflow {
  padding-bottom: 45px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow
  .wide-heading {
  margin-bottom: 80px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .workflow-card {
  min-height: 470px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  margin-bottom: 54px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-card:last-child {
  margin-bottom: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .workflow-copy
  h3 {
  letter-spacing: -0.025em;
}
body[data-impact-story="provincial-intelligence"] .impact-story .impact {
  padding-top: 60px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .closing {
  min-height: auto;
  padding-top: 145px;
  padding-bottom: 160px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .closing h2 {
  letter-spacing: -0.02em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .marquee-track
  span:after {
  content: "\00B7";
}

@media (max-width: 1050px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .topbar {
    padding-inline: 48px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .footer {
    padding-inline: 48px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-card {
    grid-template-columns: 1fr minmax(230px, 0.55fr);
  }
}
@media (max-width: 760px) {
  body[data-impact-story="provincial-intelligence"] .impact-story {
    scroll-padding-top: 68px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .topbar {
    height: 64px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .story-name,
  body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav {
    display: none;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .menu-toggle {
    display: block;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav {
    top: 64px;
    left: 8px;
    right: 8px;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .mobile-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .mobile-nav
    a {
    padding: 12px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .context.chapter {
    padding-top: 78px;
    padding-bottom: 95px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .hero {
    padding-bottom: 70px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .challenge-image {
    height: 380px;
    min-height: 380px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .friction,
  body[data-impact-story="provincial-intelligence"] .impact-story .system {
    padding-top: 95px;
    padding-bottom: 105px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .friction-visual {
    height: 280px;
    margin-top: 38px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .system-image {
    height: 420px;
    margin-bottom: 65px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .system-image
    figcaption {
    left: 0;
    right: 0;
    width: auto;
    font-size: 14px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .layer-panel
    em {
    font-size: 15px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-stage {
    min-height: 800px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node-detail {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 18px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .workflow {
    padding-bottom: 45px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-card {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 30px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .workflow-result {
    grid-column: 1;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .impact {
    padding-top: 80px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .closing {
    padding-top: 100px;
    padding-bottom: 110px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .footer {
    padding: 34px 20px;
  }
}

/* Annotated review — composition and legibility */
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .hero-statement
  p:last-child {
  font-size: 16px;
  line-height: 1.7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
  gap: 5vw;
}
body[data-impact-story="provincial-intelligence"] .impact-story .friction h2 {
  max-width: 820px;
  font-size: clamp(3rem, 4.4vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-visual {
  height: clamp(270px, 30vw, 420px);
  margin-top: 82px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .friction-visual
  img {
  -o-object-position: center 48%;
     object-position: center 48%;
}
body[data-impact-story="provincial-intelligence"] .impact-story .lab-copy {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 58px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .lab-copy
  .eyebrow {
  grid-column: 1;
  margin-bottom: 18px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .lab-copy h3 {
  grid-column: 1;
  max-width: 1040px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .lab-copy
  > p:last-of-type {
  grid-column: 1;
  max-width: 780px;
  margin: 30px 0 0;
}
body[data-impact-story="provincial-intelligence"] .impact-story .query-switch {
  grid-column: 1;
  margin-top: 38px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric {
  min-height: 390px;
  padding: 46px 42px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric strong {
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric h3 {
  font-size: 19px;
  line-height: 1.35;
  margin: auto 0 14px;
}
body[data-impact-story="provincial-intelligence"] .impact-story .metric p {
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 980px) {
  body[data-impact-story="provincial-intelligence"] .impact-story .friction {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .friction h2 {
    max-width: 760px;
    font-size: clamp(3.2rem, 7.5vw, 4.8rem);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .friction-visual {
    margin-top: 76px;
  }
}

@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .hero-statement
    p:last-child {
    font-size: 16px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .friction h2 {
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: 1.08;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .friction-visual {
    height: 300px;
    margin-top: 52px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .metric,
  body[data-impact-story="provincial-intelligence"] .impact-story .metric-wide,
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .metric-proof {
    min-height: 330px;
    padding: 36px 28px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .metric
    strong {
    font-size: clamp(42px, 13vw, 60px);
    white-space: normal;
  }
}

/* Interactive 3D ontology viewport */
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage {
  height: min(68vw, 850px);
  min-height: 700px;
  isolation: isolate;
  cursor: grab;
  touch-action: none;
  background: #06131f;
  border: 1px solid rgba(164, 208, 225, 0.24);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage.is-dragging {
  cursor: grabbing;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:before {
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(28, 94, 121, 0.28),
      transparent 42%
    ),
    linear-gradient(rgba(169, 217, 234, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 217, 234, 0.035) 1px, transparent 1px);
  background-size:
    auto,
    48px 48px,
    48px 48px;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.6));
          mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.6));
  z-index: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 42%,
    transparent 32%,
    rgba(4, 13, 22, 0.24) 66%,
    rgba(4, 13, 22, 0.78) 100%
  );
  z-index: 5;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-canvas,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-node-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-canvas {
  z-index: 1;
  pointer-events: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-node-layer {
  z-index: 3;
  pointer-events: none;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-hud {
  position: absolute;
  top: 24px;
  left: 26px;
  z-index: 6;
  display: grid;
  gap: 2px;
  color: #8ca7b5;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-hud
  span {
  font-size: 9px;
  color: var(--teal);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-hud
  strong {
  font-size: 11px;
  font-weight: 560;
  color: #d9e8ed;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-hud i {
  width: 72px;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--teal), transparent);
  animation: hudPulse 2.4s ease-in-out infinite;
}
@keyframes hudPulse {
  50% {
    width: 118px;
    opacity: 0.45;
  }
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-reset {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 7;
  padding: 9px 12px;
  color: #bcd0d8;
  background: rgba(6, 19, 31, 0.54);
  border: 1px solid rgba(188, 208, 216, 0.25);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition:
    color 0.25s,
    border-color 0.25s,
    background 0.25s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-reset:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-reset:focus-visible {
  color: #fff;
  border-color: var(--teal);
  background: rgba(18, 55, 72, 0.78);
  outline: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node {
  --depth-opacity: 1;
  --node-scale: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--node-size, 92px);
  aspect-ratio: 1;
  pointer-events: auto;
  transform: translate3d(var(--screen-x, 50vw), var(--screen-y, 40vh), 0)
    translate(-50%, -50%) scale(var(--node-scale));
  border-radius: 50%;
  border: 1px solid rgba(191, 225, 237, 0.45);
  background: radial-gradient(
    circle at 34% 28%,
    rgba(103, 190, 215, 0.72),
    rgba(19, 63, 86, 0.78) 32%,
    rgba(7, 25, 39, 0.9) 72%
  );
  color: #fff;
  opacity: var(--depth-opacity);
  box-shadow:
    inset 0 0 22px rgba(125, 215, 238, 0.2),
    0 0 0 8px rgba(74, 156, 185, 0.045),
    0 18px 34px rgba(0, 0, 0, 0.32);
  will-change: transform, opacity;
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    filter 0.3s;
  z-index: var(--depth-index, 3);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(118, 197, 218, 0.16);
  border-radius: inherit;
  transform: scale(0.86);
  opacity: 0.2;
  transition:
    transform 0.45s,
    opacity 0.45s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  span {
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 650;
  line-height: 1.05;
  text-shadow: 0 1px 7px #00111e;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  small {
  max-width: 76%;
  font-size: 8px;
  line-height: 1.25;
  color: #b8ccd5;
  margin-top: 6px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible {
  --node-scale: 1.08;
  background: radial-gradient(
    circle at 34% 28%,
    #87d6e8,
    #226f8e 34%,
    #0a2234 74%
  );
  border-color: #9eddeb;
  box-shadow:
    inset 0 0 24px rgba(160, 230, 245, 0.3),
    0 0 0 10px rgba(66, 184, 207, 0.09),
    0 24px 46px rgba(0, 0, 0, 0.4);
  outline: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active:before {
  transform: scale(1.16);
  opacity: 0.75;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active {
  --node-scale: 1.025;
  background: radial-gradient(
    circle at 33% 25%,
    #b8ecf3,
    var(--teal) 28%,
    #126177 65%,
    #082333 100%
  );
  border-color: #d7f7fa;
  box-shadow:
    inset 0 0 30px rgba(212, 250, 255, 0.34),
    0 0 0 8px rgba(47, 191, 203, 0.09),
    0 0 34px rgba(47, 191, 203, 0.24);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-policy,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-definition {
  aspect-ratio: 1;
  border-radius: 24%;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail {
  left: auto;
  right: 24px;
  bottom: 24px;
  width: min(430px, calc(100% - 48px));
  max-width: none;
  padding: 22px 25px;
  background: rgba(4, 15, 25, 0.76);
  border: 1px solid rgba(186, 220, 232, 0.22);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  z-index: 7;
  pointer-events: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 2px;
  background: var(--teal);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  span {
  font-size: 9px;
  letter-spacing: 0.19em;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  strong {
  font-size: 21px;
  line-height: 1.25;
  margin-top: 8px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 9px;
  color: #b9c8cf;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend {
  padding-top: 16px;
}

@media (max-width: 760px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 760px;
    min-height: 760px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .network-hud {
    top: 18px;
    left: 18px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-reset {
    top: 16px;
    right: 16px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node {
    width: var(--node-size, 76px);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node
    small {
    display: none;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .network-hud
    i {
    animation: none;
  }
}
body[data-impact-story="provincial-intelligence"] .impact-story .desktop-nav a,
body[data-impact-story="provincial-intelligence"] .impact-story .mobile-nav a {
  white-space: nowrap;
}

/* Refined ontology — compact, data-led and aligned with the original palette */
body[data-impact-story="provincial-intelligence"] .impact-story .ontology-lab {
  margin-top: 115px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .lab-copy {
  margin-bottom: 28px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .lab-copy
  > p:last-of-type {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .query-switch {
  margin-top: 24px;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  scroll-margin-top: 74px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .query-switch
  button {
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  transition:
    background 0.25s,
    color 0.25s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .query-switch
  button:last-child {
  border-right: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .query-switch
  button.is-active {
  background: #111720;
  color: #d0d5de;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage {
  height: 480px;
  min-height: 480px;
  background: radial-gradient(
    circle at 30% 42%,
    rgba(21, 68, 94, 0.82),
    rgba(7, 26, 41, 0.94) 47%,
    #071421 78%
  );
  border-color: rgba(190, 215, 226, 0.25);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.22);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:before {
  background:
    linear-gradient(rgba(154, 191, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 191, 207, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 68%, transparent 74%);
          mask-image: linear-gradient(90deg, #000 0 68%, transparent 74%);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:after {
  background: linear-gradient(
    90deg,
    transparent 0 65%,
    rgba(3, 13, 22, 0.18) 69%,
    rgba(3, 13, 22, 0.54) 100%
  );
  z-index: 2;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-hud {
  top: 18px;
  left: 20px;
  display: block;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-hud
  span,
body[data-impact-story="provincial-intelligence"] .impact-story .network-hud i {
  display: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .network-hud
  strong {
  font-size: 9px;
  font-weight: 650;
  color: #9bb1bc;
  letter-spacing: 0.18em;
}
body[data-impact-story="provincial-intelligence"] .impact-story .network-reset {
  top: 14px;
  right: 16px;
  padding: 7px 9px;
  background: transparent;
  font-size: 9px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node {
  border-color: rgba(184, 215, 232, 0.52);
  background: radial-gradient(
    circle at 33% 26%,
    #91b9ed 0,
    #3977d4 26%,
    #1751a2 60%,
    #0b2b5e 100%
  );
  box-shadow:
    inset -9px -12px 22px rgba(2, 20, 53, 0.38),
    inset 6px 6px 13px rgba(220, 238, 255, 0.15),
    0 8px 22px rgba(0, 0, 0, 0.3);
  text-shadow: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:before {
  inset: -5px;
  border-color: rgba(80, 143, 223, 0.28);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  span {
  font-size: clamp(10px, 0.9vw, 13px);
  text-shadow: 0 1px 5px rgba(0, 15, 46, 0.8);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  small {
  font-size: 7px;
  color: #c6d6e9;
  margin-top: 4px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-indicator {
  background: radial-gradient(
    circle at 33% 26%,
    #a6e4e7 0,
    #2a9ea6 28%,
    #126a75 62%,
    #073943 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-industry {
  background: radial-gradient(
    circle at 33% 26%,
    #70a9bc 0,
    #245a70 34%,
    #12374c 72%,
    #0a2637 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-policy,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-definition {
  border-radius: 18%;
  background: radial-gradient(
    circle at 30% 22%,
    #8c9ba8 0,
    #455462 34%,
    #293845 72%,
    #182733 100%
  );
  border-color: rgba(207, 220, 229, 0.48);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-year {
  background: radial-gradient(
    circle at 33% 26%,
    #b7c9de 0,
    #58799e 31%,
    #315475 68%,
    #1c344c 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible {
  --node-scale: 1.055;
  border-color: #fff;
  filter: brightness(1.08);
  box-shadow:
    inset -9px -12px 22px rgba(2, 20, 53, 0.28),
    0 0 0 5px rgba(47, 117, 255, 0.14),
    0 13px 28px rgba(0, 0, 0, 0.34);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active {
  --node-scale: 1.025;
  border-color: #dceaff;
  box-shadow:
    inset -9px -12px 22px rgba(2, 20, 53, 0.3),
    0 0 0 4px rgba(47, 117, 255, 0.18),
    0 0 20px rgba(47, 117, 255, 0.3);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active:before {
  transform: scale(1.1);
  opacity: 0.62;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail {
  top: 52px;
  right: 18px;
  bottom: 18px;
  width: 29%;
  padding: 24px 20px 19px;
  background: rgba(5, 19, 31, 0.9);
  border: 1px solid rgba(185, 211, 223, 0.2);
  box-shadow: none;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail:before {
  width: 38px;
  background: #2f75ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  > span {
  font-size: 9px;
  color: #d0d5de;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  > strong {
  font-size: 21px;
  line-height: 1.16;
  margin-top: 10px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  > p {
  font-size: 12px;
  line-height: 1.58;
  margin: 12px 0 0;
  color: #aebec7;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-data {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-data div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .node-data
  small {
  font-size: 9px;
  line-height: 1.35;
  color: #849ba7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="provincial-intelligence"] .impact-story .node-data b {
  font-size: 18px;
  line-height: 1;
  font-weight: 520;
  color: #eef5f7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #d8e3e7;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  article {
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  i {
  display: block;
  width: 34px;
  border-top: 2px solid #4a89ff;
  margin: 0;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-teal {
  border-color: #28b4be;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-dash {
  border-top-style: dashed;
  border-color: #f0ca67;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  strong,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  span {
  display: block;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  strong {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 620;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  span {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.35;
  color: #8298a4;
}

@media (max-width: 900px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 470px;
    min-height: 470px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail {
    width: 31%;
    padding: 22px 16px 16px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail
    > strong {
    font-size: 18px;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node-data b {
    font-size: 15px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-legend
    article {
    padding: 10px 11px;
    grid-template-columns: 30px 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-legend
    i {
    width: 26px;
  }
}

@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab {
    margin-top: 90px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .lab-copy {
    margin-bottom: 12px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .query-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .query-switch
    button {
    min-height: 38px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .query-switch
    button:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 440px;
    min-height: 440px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage:before {
    -webkit-mask-image: none;
            mask-image: none;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage:after {
    background: linear-gradient(
      180deg,
      transparent 0 64%,
      rgba(3, 13, 22, 0.62) 72%,
      rgba(3, 13, 22, 0.88) 100%
    );
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: 174px;
    padding: 17px 16px 14px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail
    > strong {
    font-size: 17px;
    margin-top: 5px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node-detail
    > p {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 7px;
    max-width: 100%;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node-data {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .node-data
    div {
    display: block;
    padding: 8px 0 0;
    border-bottom: 0;
  }
  body[data-impact-story="provincial-intelligence"] .impact-story .node-data b {
    display: block;
    margin-top: 4px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-legend {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-legend
    article {
    min-height: 50px;
  }
}

/* Layered 3D architecture — legible modules instead of spheres */
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage {
  height: 390px;
  min-height: 390px;
  background: radial-gradient(
    circle at 31% 42%,
    #0b2250 0,
    #07162f 44%,
    #030b19 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:before {
  background:
    linear-gradient(rgba(63, 111, 190, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 111, 190, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node {
  width: var(--node-width, 84px);
  height: var(--node-height, 46px);
  aspect-ratio: auto;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid rgba(77, 141, 255, 0.92);
  background: linear-gradient(145deg, #1768e8 0, #0e4fbf 58%, #09388c 100%);
  box-shadow:
    inset 0 1px rgba(232, 241, 255, 0.25),
    inset -8px -8px 16px rgba(2, 18, 58, 0.2),
    5px 7px 0 rgba(1, 9, 27, 0.4),
    0 0 18px rgba(30, 100, 231, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 30px;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: #9bc0ff;
  transform: none;
  opacity: 0.95;
  transition:
    width 0.3s,
    background 0.3s;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:after {
  content: "";
  position: absolute;
  left: 7px;
  right: -5px;
  bottom: -6px;
  height: 5px;
  background: rgba(2, 17, 52, 0.8);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  z-index: -1;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  span {
  display: block;
  width: 100%;
  font-size: 13px;
  line-height: 1;
  font-weight: 680;
  letter-spacing: -0.01em;
  color: #f7faff;
  text-shadow: 0 1px 6px rgba(0, 13, 46, 0.75);
  white-space: nowrap;
  text-align: center;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-indicator {
  background: linear-gradient(145deg, #2477e8 0, #1459bd 62%, #0a3a89 100%);
  border-color: rgba(100, 161, 255, 0.9);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-indicator:before {
  background: #b3d0ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-industry {
  background: linear-gradient(145deg, #1b5fc8 0, #124a9f 62%, #0a3478 100%);
  border-color: rgba(82, 142, 233, 0.82);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-industry:before {
  background: #86b5ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-year {
  background: linear-gradient(145deg, #2c63aa 0, #204d87 62%, #153864 100%);
  border-color: rgba(111, 157, 216, 0.82);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-year:before {
  background: #a9c9f5;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-policy,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-definition {
  aspect-ratio: auto;
  border-radius: 4px;
  background: linear-gradient(145deg, #3d506e 0, #2b3d59 62%, #1c2d47 100%);
  border-color: rgba(121, 153, 201, 0.78);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible {
  background: linear-gradient(145deg, #2f82ff 0, #1768e8 50%, #0a43a4 100%);
  border-color: #8eb9ff;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.34),
    inset -8px -8px 16px rgba(2, 18, 58, 0.22),
    5px 7px 0 rgba(1, 9, 27, 0.4),
    0 0 24px rgba(47, 117, 255, 0.4);
  outline: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-policy:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-definition:before {
  background: #9bbcff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible {
  --node-scale: 1.035;
  border-color: #e5efff;
  filter: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    5px 7px 0 rgba(2, 14, 30, 0.3),
    0 0 0 3px rgba(75, 134, 221, 0.18),
    0 13px 26px rgba(0, 0, 0, 0.28);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible:before {
  width: 100%;
  transform: none;
  opacity: 1;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active {
  --node-scale: 1.018;
  border-color: #cfdef2;
  filter: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.23),
    5px 7px 0 rgba(2, 14, 30, 0.28),
    0 0 0 2px rgba(75, 134, 221, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.24);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active:before {
  width: 52%;
  transform: none;
  opacity: 1;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-related {
  opacity: 1 !important;
  border-color: #b8cee6;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-related:before {
  width: 68%;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-muted {
  opacity: 0.23 !important;
  filter: saturate(0.35);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  i {
  border-top-width: 2px;
  opacity: 1;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-detail
  > span {
  color: #78a8ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-blue {
  border-color: #2f75ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-teal {
  border-color: #60a5fa;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-dash {
  border-color: #9bbcff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend {
  grid-template-columns: 1fr;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .lab-copy
  .eyebrow {
  color: #78a8ff;
}

@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 430px;
    min-height: 430px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node {
    padding: 6px 7px;
    box-shadow:
      inset 0 1px rgba(222, 237, 255, 0.16),
      3px 4px 0 rgba(2, 14, 30, 0.3),
      0 7px 15px rgba(0, 0, 0, 0.2);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node
    span {
    font-size: 10.5px;
  }
}

/* POC slide 5 inspired ontology: business objects as a connected network */
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage {
  height: 410px;
  min-height: 410px;
  background: radial-gradient(
    circle at 33% 45%,
    #102c61 0,
    #071a38 43%,
    #030b19 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-stage:before {
  background:
    radial-gradient(
      circle at 34% 46%,
      rgba(41, 105, 214, 0.13),
      transparent 42%
    ),
    linear-gradient(rgba(71, 121, 203, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 121, 203, 0.045) 1px, transparent 1px);
  background-size:
    auto,
    46px 46px,
    46px 46px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node {
  --node-core: radial-gradient(
    circle at 32% 26%,
    #8eb9ff 0,
    #3179e2 34%,
    #1450a8 70%,
    #09295e 100%
  );
  width: var(--node-width, 38px);
  height: var(--node-height, 38px);
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(151, 192, 255, 0.9);
  background: var(--node-core);
  box-shadow:
    inset -7px -8px 13px rgba(2, 17, 51, 0.42),
    inset 4px 4px 8px rgba(235, 244, 255, 0.2),
    0 0 0 5px rgba(47, 117, 255, 0.045),
    0 9px 18px rgba(0, 0, 0, 0.3);
  overflow: visible;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:before {
  content: "";
  position: absolute;
  left: 23%;
  top: 18%;
  width: 22%;
  height: 22%;
  border: 0;
  border-radius: 50%;
  background: rgba(239, 246, 255, 0.66);
  filter: blur(0.3px);
  opacity: 0.82;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -8px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 8, 24, 0.48);
  filter: blur(4px);
  clip-path: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node
  span {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  width: -moz-max-content;
  width: max-content;
  max-width: 82px;
  transform: translateX(-50%);
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: 670;
  letter-spacing: 0;
  color: #e9f1ff;
  text-align: center;
  white-space: normal;
  text-shadow:
    0 1px 4px #020914,
    0 0 8px #020914;
  pointer-events: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-province {
  --node-core: radial-gradient(
    circle at 32% 25%,
    #6c9ce8 0,
    #214f98 34%,
    #102f65 72%,
    #071a39 100%
  );
  border-color: #87b2f2;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-city-a,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-city-b {
  --node-core: radial-gradient(
    circle at 32% 25%,
    #9bc2ff 0,
    #347fef 34%,
    #1257bd 72%,
    #0a3378 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-district-a,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-district-b,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-district-c {
  --node-core: radial-gradient(
    circle at 32% 25%,
    #b4d2ff 0,
    #4a91ee 34%,
    #2469c4 72%,
    #123d80 100%
  );
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-gdp,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-growth,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-economic {
  --node-core: radial-gradient(
    circle at 32% 25%,
    #d0e1ff 0,
    #6a9eea 34%,
    #376fc3 70%,
    #183f7d 100%
  );
  border-color: #a9c9ff;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-industry,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-year,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-policy,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-definition {
  --node-core: radial-gradient(
    circle at 32% 25%,
    #aebfda 0,
    #59759e 36%,
    #314f78 72%,
    #192f4e 100%
  );
  border-color: #829fc9;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node-benchmark {
  --node-core: radial-gradient(circle at 50% 50%, #0d244b 0, #07162f 72%);
  border: 2px solid #76a9ff;
  box-shadow:
    inset 0 0 0 4px rgba(77, 139, 238, 0.13),
    0 0 0 4px rgba(47, 117, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.28);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible {
  background: var(--node-core);
  border-color: #d5e5ff;
  filter: none;
  box-shadow:
    inset -7px -8px 13px rgba(2, 17, 51, 0.34),
    inset 4px 4px 8px rgba(242, 247, 255, 0.22),
    0 0 0 3px rgba(74, 137, 235, 0.2),
    0 0 20px rgba(47, 117, 255, 0.24),
    0 10px 20px rgba(0, 0, 0, 0.3);
  outline: none;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node.is-active:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:hover:before,
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .node:focus-visible:before {
  width: 22%;
  transform: none;
  opacity: 1;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend {
  grid-template-columns: repeat(4, 1fr);
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  article {
  grid-template-columns: 30px 1fr;
  padding: 10px 11px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  i {
  width: 26px;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-measure {
  border-color: #60a5fa;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-benchmark {
  border-color: #8faeeb;
  border-top-style: dashed;
}
body[data-impact-story="provincial-intelligence"]
  .impact-story
  .ontology-lab
  .network-legend
  .line-evidence {
  border-color: #b8ccf0;
  border-top-style: dotted;
}

@media (max-width: 680px) {
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 460px;
    min-height: 460px;
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node {
    padding: 0;
    box-shadow:
      inset -5px -6px 10px rgba(2, 17, 51, 0.4),
      inset 3px 3px 6px rgba(235, 244, 255, 0.18),
      0 6px 14px rgba(0, 0, 0, 0.28);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .node
    span {
    max-width: 64px;
    font-size: 8.5px;
    top: calc(100% + 3px);
  }
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

body[data-impact-story="provincial-intelligence"] .impact-story {
  --ink: #e7e9ef;
  --muted: #a3acb9;
  --line: #303744;
  --paper: #0b1017;
  --surface: #121923;
  --soft: #111821;
  --soft-purple: #171c25;
  --accent: #f3f4f6;
  --dark: #080c12;
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.6;
}
body[data-impact-story="water-conservation"] .impact-story {
  --ink: #0b1118;
  --muted: #5f6d78;
  --line: #d8dfe1;
  --paper: #fbfcfa;
  --soft: #eef3f1;
  --accent: #087a72;
  --accent-light: #68b8ac;
  --dark: #08171b;
  --dark-2: #0d2427;
  --max: min(1420px, calc(100vw - 144px));
  --sans: Arial, "Helvetica Neue", sans-serif;
}
body[data-impact-story="water-conservation"] .impact-story .topbar nav a {
  white-space: nowrap;
}

body[data-impact-story="water-conservation"] .impact-story * {
  box-sizing: border-box;
}
body[data-impact-story="water-conservation"] .impact-story {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-impact-story="water-conservation"] .impact-story a {
  color: inherit;
  text-decoration: none;
}
body[data-impact-story="water-conservation"] .impact-story img {
  display: block;
  width: 100%;
}
body[data-impact-story="water-conservation"] .impact-story p,
body[data-impact-story="water-conservation"] .impact-story h1,
body[data-impact-story="water-conservation"] .impact-story h2,
body[data-impact-story="water-conservation"] .impact-story h3,
body[data-impact-story="water-conservation"] .impact-story figure {
  margin: 0;
}
body[data-impact-story="water-conservation"] .impact-story button {
  font: inherit;
  color: inherit;
}
body[data-impact-story="water-conservation"] .impact-story .skip {
  position: fixed;
  z-index: 100;
  top: -60px;
  left: 16px;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
}
body[data-impact-story="water-conservation"] .impact-story .skip:focus {
  top: 16px;
}

body[data-impact-story="water-conservation"] .impact-story .topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100%;
  height: 78px;
  padding: 0 max(72px, calc((100vw - 1420px) / 2));
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  background: rgba(251, 252, 250, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
body[data-impact-story="water-conservation"] .impact-story .logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.25em;
}
body[data-impact-story="water-conservation"] .impact-story .topbar > p {
  color: #6d7681;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-conservation"] .impact-story .topbar > p span {
  margin-left: 18px;
  color: var(--ink);
  font-weight: 700;
}
body[data-impact-story="water-conservation"] .impact-story .topbar nav {
  display: flex;
  gap: 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="water-conservation"] .impact-story .topbar .mobile-nav {
  display: none;
}
body[data-impact-story="water-conservation"] .impact-story .topbar nav a,
body[data-impact-story="water-conservation"] .impact-story .footer a {
  transition: opacity 0.2s;
}
body[data-impact-story="water-conservation"] .impact-story .topbar nav a:hover,
body[data-impact-story="water-conservation"] .impact-story .footer a:hover {
  opacity: 0.55;
}
body[data-impact-story="water-conservation"] .impact-story .menu,
body[data-impact-story="water-conservation"] .impact-story .mobile-nav {
  display: none;
}

body[data-impact-story="water-conservation"] .impact-story .hero {
  width: var(--max);
  min-height: calc(100dvh - 78px);
  margin: auto;
  padding: 72px 0 86px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.65fr);
  grid-template-rows: auto 132px;
  gap: 40px 54px;
  align-items: end;
}
body[data-impact-story="water-conservation"] .impact-story .hero-copy {
  align-self: center;
}
body[data-impact-story="water-conservation"] .impact-story .overline,
body[data-impact-story="water-conservation"] .impact-story .section-label {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
body[data-impact-story="water-conservation"] .impact-story .hero h1 {
  max-width: 900px;
  font-size: clamp(54px, 4.7vw, 74px);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.064em;
}
body[data-impact-story="water-conservation"] .impact-story .hero h1 em {
  display: block;
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
body[data-impact-story="water-conservation"] .impact-story .hero-statement {
  max-width: 720px;
  margin-top: 34px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="water-conservation"] .impact-story .hero-lead {
  font-size: 19px;
  line-height: 1.5;
}
body[data-impact-story="water-conservation"] .impact-story .hero-support {
  padding-left: 26px;
  color: #66727b;
  font-size: 15px;
  line-height: 1.65;
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-conservation"] .impact-story .hero-visual {
  align-self: stretch;
  min-height: 500px;
  overflow: hidden;
  background: #dbe3e1;
}
body[data-impact-story="water-conservation"] .impact-story .hero-visual img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% center;
     object-position: 50% center;
}
body[data-impact-story="water-conservation"] .impact-story .hero-facts {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-conservation"] .impact-story .hero-facts div {
  padding: 20px 24px 18px 0;
  border-right: 1px solid var(--line);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .hero-facts
  div
  + div {
  padding-left: 24px;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .hero-facts
  div:last-child {
  border: 0;
}
body[data-impact-story="water-conservation"] .impact-story .hero-facts strong {
  display: block;
  font-size: 31px;
  letter-spacing: -0.04em;
}
body[data-impact-story="water-conservation"] .impact-story .hero-facts span {
  color: #7a858d;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

body[data-impact-story="water-conservation"] .impact-story .section {
  padding: 145px max(72px, calc((100vw - 1420px) / 2));
}
body[data-impact-story="water-conservation"] .impact-story .section-intro {
  display: grid;
  grid-template-columns: 260px minmax(0, 980px);
  gap: 60px;
  align-items: start;
}
body[data-impact-story="water-conservation"] .impact-story .section-intro h2,
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-heading
  h2,
body[data-impact-story="water-conservation"] .impact-story .system-title h2,
body[data-impact-story="water-conservation"] .impact-story .closing h2 {
  font-size: clamp(52px, 5vw, 82px);
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -0.052em;
}

body[data-impact-story="water-conservation"] .impact-story .context-grid {
  margin: 88px 0 58px;
  padding-top: 36px;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 12vw;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="water-conservation"] .impact-story .lead-copy {
  max-width: 540px;
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.038em;
}
body[data-impact-story="water-conservation"] .impact-story .context-body {
  max-width: 660px;
  color: #d0d5de;
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="water-conservation"] .impact-story .context-body p + p {
  margin-top: 22px;
}
body[data-impact-story="water-conservation"] .impact-story .context-signals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .context-signals
  span {
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .context-signals
  span:first-child {
  padding-left: 0;
  text-align: left;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .context-signals
  span:last-child {
  border: 0;
}

body[data-impact-story="water-conservation"] .impact-story .challenge {
  padding-top: 65px;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-heading {
  max-width: 1040px;
  padding-bottom: 64px;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
  gap: 72px;
  align-items: stretch;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-photo {
  position: relative;
  min-height: 590px;
  overflow: hidden;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-photo
  img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(520px, 78%);
  padding: 26px 30px;
  background: var(--paper);
  font-size: 18px;
  line-height: 1.42;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-copy {
  padding: 40px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-copy
  p
  + p {
  margin-top: 26px;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-copy
  .challenge-lead {
  color: var(--ink);
  font-size: clamp(28px, 2.45vw, 39px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-band {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-band
  article {
  min-height: 175px;
  padding: 30px 42px 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .challenge-band
  article
  + article {
  padding-left: 42px;
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-conservation"] .impact-story .challenge-band h3 {
  font-size: 24px;
}
body[data-impact-story="water-conservation"] .impact-story .challenge-band p {
  max-width: 500px;
  color: var(--muted);
  font-size: 15px;
}

body[data-impact-story="water-conservation"] .impact-story .system {
  color: #f6faf9;
  background: var(--dark);
}
body[data-impact-story="water-conservation"] .impact-story .system-title {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
}
body[data-impact-story="water-conservation"] .impact-story .system-title h2 {
  max-width: 980px;
}
body[data-impact-story="water-conservation"] .impact-story .system-title > p {
  max-width: 440px;
  padding-bottom: 8px;
  color: #a9b7ba;
  font-size: 17px;
}
body[data-impact-story="water-conservation"] .impact-story .system-narrative {
  margin-top: 76px;
  padding: 34px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #d4dcdc;
  font-size: 18px;
  line-height: 1.7;
}
body[data-impact-story="water-conservation"] .impact-story .closed-loop {
  margin-top: 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="water-conservation"] .impact-story .loop-context {
  padding: 30px 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 760px);
  gap: 48px;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .loop-context
  strong {
  color: var(--accent-light);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="water-conservation"] .impact-story .loop-context p {
  color: #b7c4c5;
  font-size: 16px;
}
body[data-impact-story="water-conservation"] .impact-story .loop-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  counter-reset: loop-step;
}
body[data-impact-story="water-conservation"] .impact-story .loop-steps li {
  position: relative;
  min-height: 270px;
  padding: 38px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  counter-increment: loop-step;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .loop-steps
  li:last-child {
  border-right: 0;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .loop-steps
  li::before {
  content: "0" counter(loop-step);
  color: #688083;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .loop-steps
  li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 31px;
  right: -10px;
  width: 20px;
  color: var(--accent-light);
  background: var(--dark);
  font-size: 16px;
  text-align: center;
}
body[data-impact-story="water-conservation"] .impact-story .loop-steps span {
  color: #f5f8f7;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
body[data-impact-story="water-conservation"] .impact-story .loop-steps p {
  color: #a8b5b7;
  font-size: 13px;
  line-height: 1.6;
}
body[data-impact-story="water-conservation"] .impact-story .loop-return {
  padding: 30px 34px;
  display: grid;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
  gap: 52px;
  align-items: center;
  background: rgba(55, 151, 140, 0.14);
  border-top: 1px solid rgba(104, 184, 172, 0.3);
}
body[data-impact-story="water-conservation"] .impact-story .loop-return strong {
  color: #e9f7f4;
  font-size: 19px;
}
body[data-impact-story="water-conservation"] .impact-story .loop-return p {
  color: #b9ccca;
  font-size: 14px;
}

body[data-impact-story="water-conservation"] .impact-story .capability-viewer {
  margin-top: 112px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
body[data-impact-story="water-conservation"] .impact-story .viewer-heading {
  margin-bottom: 46px;
  display: grid;
  grid-template-columns: 280px minmax(0, 720px);
  gap: 52px;
  align-items: start;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-kicker {
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-heading h3 {
  margin-bottom: 16px;
  color: #f5f8f7;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-heading
  div
  > p {
  max-width: 620px;
  color: #a8b5b7;
  font-size: 16px;
  line-height: 1.7;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-layout {
  display: grid;
  grid-template-columns: minmax(450px, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: start;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab {
  position: relative;
  width: 100%;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px 16px;
  color: #829496;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.22s ease,
    padding-left 0.22s ease,
    background 0.22s ease;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent-light);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.22s ease;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab > span {
  grid-row: 1 / 3;
  padding-top: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab strong {
  color: #dce6e4;
  font-size: 18px;
  letter-spacing: -0.02em;
  transition: color 0.22s ease;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab small {
  max-width: 360px;
  font-size: 15px;
  line-height: 1.6;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-tab:hover {
  color: #b8c7c5;
  padding-left: 12px;
  background: rgba(255, 255, 255, 0.025);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-tab.is-active {
  padding-left: 16px;
  color: #b9ccca;
  background: rgba(55, 151, 140, 0.1);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-tab.is-active::before {
  transform: scaleY(1);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-tab.is-active
  strong {
  color: var(--accent-light);
}
body[data-impact-story="water-conservation"] .impact-story .viewer-stage {
  min-width: 0;
  max-width: 600px;
  justify-self: end;
}
body[data-impact-story="water-conservation"] .impact-story .viewer-frame {
  aspect-ratio: 1000 / 729;
  overflow: hidden;
  background: #dfe6e4;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-impact-story="water-conservation"] .impact-story .viewer-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.18s ease;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-frame
  img.is-loading {
  opacity: 0.28;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-stage
  figcaption {
  padding-top: 22px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-stage
  figcaption
  strong {
  color: #f5f8f7;
  font-size: 15px;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .viewer-stage
  figcaption
  p {
  max-width: 620px;
  color: #91a3a4;
  font-size: 13px;
  line-height: 1.6;
}

body[data-impact-story="water-conservation"] .impact-story .workflow-layout {
  margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 72px;
  align-items: stretch;
}
body[data-impact-story="water-conservation"] .impact-story .workflow-photo {
  position: relative;
  min-height: 610px;
  overflow: hidden;
}
body[data-impact-story="water-conservation"] .impact-story .workflow-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .workflow-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(460px, 84%);
  padding: 25px 30px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  background: var(--paper);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .workflow-photo
  strong {
  font-size: 28px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .workflow-photo
  span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="water-conservation"] .impact-story .workflow-copy {
  padding: 42px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .workflow-copy
  p
  + p {
  margin-top: 27px;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .workflow-copy
  .workflow-lead {
  color: var(--ink);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

body[data-impact-story="water-conservation"] .impact-story .impact {
  background: var(--soft);
}
body[data-impact-story="water-conservation"] .impact-story .impact-heading {
  padding-bottom: 68px;
  border-bottom: 1px solid var(--ink);
}
body[data-impact-story="water-conservation"] .impact-story .impact-intro {
  max-width: 800px;
  padding: 56px 0;
  color: var(--muted);
  font-size: 20px;
}
body[data-impact-story="water-conservation"] .impact-story .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-conservation"] .impact-story .metric {
  min-height: 285px;
  padding: 31px 28px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111720;
}
body[data-impact-story="water-conservation"] .impact-story .metric p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
body[data-impact-story="water-conservation"] .impact-story .metric p span {
  color: #8b969c;
  font-size: 19px;
}
body[data-impact-story="water-conservation"] .impact-story .metric p b {
  color: var(--accent);
  font-size: 23px;
}
body[data-impact-story="water-conservation"] .impact-story .metric p strong {
  font-size: clamp(42px, 4vw, 62px);
  letter-spacing: -0.055em;
}
body[data-impact-story="water-conservation"] .impact-story .metric h3 {
  max-width: 310px;
  font-size: 15px;
}
body[data-impact-story="water-conservation"] .impact-story .metric > span {
  align-self: end;
  max-width: 340px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
body[data-impact-story="water-conservation"] .impact-story .metric-wide {
  grid-column: 1 / 4;
  min-height: 250px;
  grid-template-columns: 0.8fr 0.5fr 1fr;
  grid-template-rows: auto;
  align-items: end;
}
body[data-impact-story="water-conservation"] .impact-story .impact-closing {
  margin-top: 66px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-conservation"] .impact-story .impact-closing p {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #111720;
  border-right: 1px solid var(--line);
}
body[data-impact-story="water-conservation"]
  .impact-story
  .impact-closing
  p:last-child {
  border: 0;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .impact-closing
  strong {
  font-size: 29px;
  letter-spacing: -0.035em;
}
body[data-impact-story="water-conservation"]
  .impact-story
  .impact-closing
  span {
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
}
body[data-impact-story="water-conservation"] .impact-story .closing h2 {
  max-width: 1180px;
}

body[data-impact-story="water-conservation"] .impact-story .footer {
  padding: 34px max(72px, calc((100vw - 1420px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9aa7a8;
  background: var(--dark);
  font-size: 12px;
}
body[data-impact-story="water-conservation"] .impact-story .footer .logo {
  color: #fff;
}
body[data-impact-story="water-conservation"] .impact-story .enter {
  transform: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
body[data-impact-story="water-conservation"] .impact-story .enter.shown {
  opacity: 1;
  transform: none;
}
body[data-impact-story="water-conservation"] .impact-story :focus-visible {
  outline: 3px solid #3b928a;
  outline-offset: 4px;
}
body[data-impact-story="water-conservation"] .impact-story button:active {
  transform: translateY(1px);
}

@media (max-width: 1120px) {
  body[data-impact-story="water-conservation"] .impact-story {
    --max: min(1420px, calc(100vw - 96px));
  }
  body[data-impact-story="water-conservation"] .impact-story .topbar,
  body[data-impact-story="water-conservation"] .impact-story .section,
  body[data-impact-story="water-conservation"] .impact-story .footer {
    padding-left: 48px;
    padding-right: 48px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero h1 {
    font-size: clamp(48px, 5.4vw, 64px);
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-visual {
    min-height: 440px;
  }
  body[data-impact-story="water-conservation"] .impact-story .section-intro {
    grid-template-columns: 200px 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .challenge-layout {
    gap: 44px;
  }
  body[data-impact-story="water-conservation"] .impact-story .system-title {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 44px;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-context {
    grid-template-columns: 220px 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-steps {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-steps li {
    min-height: auto;
    padding: 24px 24px 24px 58px;
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 28px;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .loop-steps
    li::before {
    position: absolute;
    left: 12px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .loop-steps
    li:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: auto;
    bottom: -11px;
    left: 15px;
    background: var(--dark);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .loop-steps
    li:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-heading {
    grid-template-columns: 220px 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tab {
    min-height: 148px;
    padding: 22px 18px;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab
    > span {
    grid-row: auto;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab
    + .viewer-tab {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tab:hover,
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab.is-active {
    padding-left: 18px;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-stage {
    width: 100%;
    max-width: 900px;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  body[data-impact-story="water-conservation"] .impact-story {
    --max: calc(100vw - 32px);
    scroll-padding-top: 68px;
  }
  body[data-impact-story="water-conservation"] .impact-story .topbar {
    height: 64px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="water-conservation"] .impact-story .topbar > p,
  body[data-impact-story="water-conservation"]
    .impact-story
    .topbar
    > nav:not(.mobile-nav) {
    display: none;
  }
  body[data-impact-story="water-conservation"] .impact-story .menu {
    display: block;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .topbar
    .mobile-nav {
    position: absolute;
    top: 64px;
    left: 8px;
    right: 8px;
    padding: 12px;
    display: none;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .topbar
    .mobile-nav.open {
    display: flex;
  }
  body[data-impact-story="water-conservation"] .impact-story .mobile-nav a {
    padding: 12px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero {
    min-height: auto;
    padding: 60px 0 70px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero h1 {
    font-size: clamp(48px, 14vw, 66px);
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-statement {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-support {
    padding: 0;
    border: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-visual {
    min-height: 450px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-facts {
    grid-column: auto;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .hero-facts
    strong {
    font-size: 22px;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-facts div {
    padding-right: 9px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .hero-facts
    div
    + div {
    padding-left: 9px;
  }
  body[data-impact-story="water-conservation"] .impact-story .section {
    padding: 92px 16px;
  }
  body[data-impact-story="water-conservation"] .impact-story .section-intro,
  body[data-impact-story="water-conservation"] .impact-story .context-grid,
  body[data-impact-story="water-conservation"] .impact-story .challenge-layout,
  body[data-impact-story="water-conservation"] .impact-story .system-title,
  body[data-impact-story="water-conservation"] .impact-story .system-narrative,
  body[data-impact-story="water-conservation"] .impact-story .workflow-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  body[data-impact-story="water-conservation"] .impact-story .section-intro h2,
  body[data-impact-story="water-conservation"]
    .impact-story
    .challenge-heading
    h2,
  body[data-impact-story="water-conservation"] .impact-story .system-title h2,
  body[data-impact-story="water-conservation"] .impact-story .closing h2 {
    font-size: 45px;
  }
  body[data-impact-story="water-conservation"] .impact-story .context-grid {
    margin: 62px 0 48px;
  }
  body[data-impact-story="water-conservation"] .impact-story .lead-copy {
    font-size: 28px;
  }
  body[data-impact-story="water-conservation"] .impact-story .context-signals {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .context-signals
    span,
  body[data-impact-story="water-conservation"]
    .impact-story
    .context-signals
    span:first-child {
    padding: 17px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .context-signals
    span:nth-child(even) {
    border-right: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .challenge {
    padding-top: 36px;
  }
  body[data-impact-story="water-conservation"] .impact-story .challenge-photo {
    min-height: 460px;
  }
  body[data-impact-story="water-conservation"] .impact-story .challenge-band {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .challenge-band
    article {
    min-height: 145px;
    padding: 26px 0;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .challenge-band
    article
    + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  body[data-impact-story="water-conservation"] .impact-story .system-narrative {
    margin-top: 54px;
  }
  body[data-impact-story="water-conservation"] .impact-story .closed-loop {
    margin-top: 72px;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-context,
  body[data-impact-story="water-conservation"] .impact-story .loop-return {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-context {
    padding: 26px 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-steps li {
    padding: 25px 10px 25px 44px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .loop-steps
    li::before {
    left: 8px;
    top: 30px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .loop-steps
    li:not(:last-child)::after {
    left: 6px;
  }
  body[data-impact-story="water-conservation"] .impact-story .loop-return {
    padding: 25px 22px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .capability-viewer {
    margin-top: 72px;
    padding-top: 28px;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-heading {
    margin-bottom: 34px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-heading
    h3 {
    font-size: 38px;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tabs {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tab {
    min-height: auto;
    padding: 20px 12px;
    grid-template-columns: 36px 1fr;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab
    > span {
    grid-row: 1 / 3;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab
    + .viewer-tab {
    border-left: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .viewer-tab:hover,
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-tab.is-active {
    padding-left: 16px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .viewer-stage
    figcaption {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-impact-story="water-conservation"] .impact-story .workflow-layout {
    margin-top: 58px;
  }
  body[data-impact-story="water-conservation"] .impact-story .workflow-photo {
    min-height: 490px;
  }
  body[data-impact-story="water-conservation"] .impact-story .metrics {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .metric,
  body[data-impact-story="water-conservation"] .impact-story .metric-wide {
    grid-column: auto;
    min-height: 230px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: initial;
  }
  body[data-impact-story="water-conservation"] .impact-story .impact-closing {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .impact-closing p {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .impact-closing
    p:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 430px) {
  body[data-impact-story="water-conservation"] .impact-story .hero-facts {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero-facts div,
  body[data-impact-story="water-conservation"]
    .impact-story
    .hero-facts
    div
    + div {
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .hero-facts
    div:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="water-conservation"] .impact-story .hero h1 {
    font-size: 47px;
  }
  body[data-impact-story="water-conservation"] .impact-story .section-intro h2,
  body[data-impact-story="water-conservation"]
    .impact-story
    .challenge-heading
    h2,
  body[data-impact-story="water-conservation"] .impact-story .system-title h2,
  body[data-impact-story="water-conservation"] .impact-story .closing h2 {
    font-size: 40px;
  }
  body[data-impact-story="water-conservation"] .impact-story .workflow-photo {
    min-height: 430px;
  }
  body[data-impact-story="water-conservation"]
    .impact-story
    .workflow-photo
    figcaption {
    width: 92%;
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="water-conservation"] .impact-story {
    scroll-behavior: auto;
  }
  body[data-impact-story="water-conservation"] .impact-story .enter,
  body[data-impact-story="water-conservation"] .impact-story .enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body[data-impact-story="water-conservation"] .impact-story {
  --ink: #e7e9ef;
  --muted: #a3acb9;
  --line: #303744;
  --paper: #0b1017;
  --surface: #121923;
  --soft: #111821;
  --soft-purple: #171c25;
  --accent: #f3f4f6;
  --dark: #080c12;
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.6;
}
body[data-impact-story="water-services"] .impact-story {
  --ink: #0b1018;
  --muted: #626c79;
  --line: #dce1e6;
  --paper: #fdfdfc;
  --soft: #f1f3f4;
  --accent: #0b7890;
  --dark: #0a151c;
  --max: min(1420px, calc(100vw - 144px));
  --sans: Arial, "Helvetica Neue", sans-serif;
}
body[data-impact-story="water-services"] .impact-story * {
  box-sizing: border-box;
}
body[data-impact-story="water-services"] .impact-story {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-impact-story="water-services"] .impact-story a {
  color: inherit;
  text-decoration: none;
}
body[data-impact-story="water-services"] .impact-story img {
  display: block;
  width: 100%;
}
body[data-impact-story="water-services"] .impact-story p,
body[data-impact-story="water-services"] .impact-story h1,
body[data-impact-story="water-services"] .impact-story h2,
body[data-impact-story="water-services"] .impact-story h3,
body[data-impact-story="water-services"] .impact-story figure,
body[data-impact-story="water-services"] .impact-story blockquote {
  margin: 0;
}
body[data-impact-story="water-services"] .impact-story button {
  font: inherit;
  color: inherit;
}
body[data-impact-story="water-services"] .impact-story .skip {
  position: fixed;
  z-index: 100;
  top: -60px;
  left: 16px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
}
body[data-impact-story="water-services"] .impact-story .skip:focus {
  top: 16px;
}
body[data-impact-story="water-services"] .impact-story .topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100%;
  height: 78px;
  padding: 0 max(72px, calc((100vw - 1420px) / 2));
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  background: rgba(253, 253, 252, 0.93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
body[data-impact-story="water-services"] .impact-story .logo {
  font-weight: 800;
  letter-spacing: 0.25em;
  font-size: 19px;
}
body[data-impact-story="water-services"] .impact-story .topbar > p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6d7681;
}
body[data-impact-story="water-services"] .impact-story .topbar > p span {
  margin-left: 18px;
  color: var(--ink);
  font-weight: 700;
}
body[data-impact-story="water-services"] .impact-story .topbar nav {
  display: flex;
  gap: 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="water-services"] .impact-story .topbar nav a,
body[data-impact-story="water-services"] .impact-story .footer a {
  transition: opacity 0.2s;
}
body[data-impact-story="water-services"] .impact-story .topbar nav a:hover,
body[data-impact-story="water-services"] .impact-story .footer a:hover {
  opacity: 0.55;
}
body[data-impact-story="water-services"] .impact-story .menu,
body[data-impact-story="water-services"] .impact-story .mobile-nav {
  display: none;
}
body[data-impact-story="water-services"] .impact-story .hero {
  width: var(--max);
  margin: auto;
  min-height: calc(100dvh - 78px);
  padding: 72px 0 86px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
  grid-template-rows: auto 132px;
  gap: 40px 52px;
  align-items: end;
}
body[data-impact-story="water-services"] .impact-story .hero-index {
  align-self: start;
  padding-top: 12px;
  color: #9ba2aa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-services"] .impact-story .hero-copy {
  align-self: center;
}
body[data-impact-story="water-services"] .impact-story .overline,
body[data-impact-story="water-services"] .impact-story .section-label {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
body[data-impact-story="water-services"] .impact-story .hero h1 {
  max-width: 920px;
  font-size: clamp(58px, 6.2vw, 100px);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.064em;
}
body[data-impact-story="water-services"] .impact-story .hero h1 em {
  display: block;
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
body[data-impact-story="water-services"] .impact-story .hero-statement {
  max-width: 700px;
  margin-top: 34px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="water-services"] .impact-story .hero-lead {
  font-size: 19px;
  line-height: 1.5;
}
body[data-impact-story="water-services"] .impact-story .hero-support {
  padding-left: 26px;
  color: #66707b;
  font-size: 16px;
  line-height: 1.65;
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .hero-visual {
  align-self: stretch;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #dce4e6;
}
body[data-impact-story="water-services"] .impact-story .hero-visual img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 54% center;
     object-position: 54% center;
}
body[data-impact-story="water-services"] .impact-story .hero-facts {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .hero-facts div {
  padding: 20px 24px 18px 0;
  border-right: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .hero-facts div + div {
  padding-left: 24px;
}
body[data-impact-story="water-services"]
  .impact-story
  .hero-facts
  div:last-child {
  border: 0;
}
body[data-impact-story="water-services"] .impact-story .hero-facts strong {
  display: block;
  font-size: 31px;
  letter-spacing: -0.04em;
}
body[data-impact-story="water-services"] .impact-story .hero-facts span {
  color: #7a838e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-services"] .impact-story .section {
  padding: 150px max(72px, calc((100vw - 1420px) / 2));
}
body[data-impact-story="water-services"] .impact-story .section-intro {
  display: grid;
  grid-template-columns: 260px minmax(0, 930px);
  gap: 60px;
  align-items: start;
}
body[data-impact-story="water-services"] .impact-story .section-intro h2,
body[data-impact-story="water-services"] .impact-story .system-title h2,
body[data-impact-story="water-services"] .impact-story .closing h2 {
  font-size: clamp(52px, 5vw, 82px);
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -0.052em;
}
body[data-impact-story="water-services"] .impact-story .context-copy {
  margin: 90px 0 70px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12vw;
  padding-top: 36px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="water-services"] .impact-story .lead-copy {
  max-width: 560px;
  font-size: clamp(27px, 2.35vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.035em;
}
body[data-impact-story="water-services"] .impact-story .context-copy > div {
  max-width: 620px;
  color: #d0d5de;
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="water-services"]
  .impact-story
  .context-copy
  > div
  p
  + p {
  margin-top: 22px;
}
body[data-impact-story="water-services"] .impact-story .challenge-photo {
  position: relative;
  height: min(43vw, 570px);
  overflow: hidden;
}
body[data-impact-story="water-services"] .impact-story .challenge-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 42%;
     object-position: center 42%;
}
body[data-impact-story="water-services"]
  .impact-story
  .challenge-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(520px, 82%);
  padding: 26px 30px;
  background: var(--paper);
}
body[data-impact-story="water-services"] .impact-story .challenge-photo strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="water-services"] .impact-story .challenge-photo span {
  font-size: 18px;
  line-height: 1.4;
}
body[data-impact-story="water-services"] .impact-story .challenge-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 72px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .challenge-band article {
  min-height: 220px;
  padding: 30px 42px 34px 0;
}
body[data-impact-story="water-services"]
  .impact-story
  .challenge-band
  article
  + article {
  padding-left: 42px;
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .challenge-band span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
body[data-impact-story="water-services"] .impact-story .challenge-band h3 {
  margin-top: 45px;
  font-size: 24px;
}
body[data-impact-story="water-services"] .impact-story .challenge-band p {
  max-width: 510px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}
body[data-impact-story="water-services"] .impact-story .system {
  color: #f8fafc;
  background: var(--dark);
}
body[data-impact-story="water-services"] .impact-story .system-title {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
}
body[data-impact-story="water-services"] .impact-story .system-title h2 {
  max-width: 980px;
}
body[data-impact-story="water-services"] .impact-story .system-title > p {
  max-width: 430px;
  padding-bottom: 8px;
  color: #a5afbc;
  font-size: 17px;
}
body[data-impact-story="water-services"] .impact-story .system-summary {
  margin-top: 78px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="water-services"] .impact-story .system-summary article {
  min-height: 230px;
  padding: 32px 42px 34px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body[data-impact-story="water-services"]
  .impact-story
  .system-summary
  article
  + article {
  padding-left: 42px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="water-services"] .impact-story .system-summary span {
  color: #69b9c8;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="water-services"] .impact-story .system-summary p {
  max-width: 560px;
  color: #d5dce4;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}
body[data-impact-story="water-services"] .impact-story .knowledge-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="water-services"] .impact-story .knowledge-strip div {
  padding: 30px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="water-services"]
  .impact-story
  .knowledge-strip
  div
  + div {
  padding-left: 42px;
}
body[data-impact-story="water-services"]
  .impact-story
  .knowledge-strip
  div:last-child {
  border: 0;
}
body[data-impact-story="water-services"] .impact-story .knowledge-strip strong {
  display: block;
  font-size: 32px;
  letter-spacing: -0.04em;
}
body[data-impact-story="water-services"] .impact-story .knowledge-strip span {
  color: #95a5ae;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="water-services"] .impact-story .product-story {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 70px;
  align-items: start;
}
body[data-impact-story="water-services"] .impact-story .product-copy {
  position: sticky;
  top: 120px;
}
body[data-impact-story="water-services"] .impact-story .product-copy h3 {
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
body[data-impact-story="water-services"]
  .impact-story
  .product-copy
  > p:last-child {
  margin-top: 28px;
  color: #a5afbc;
  font-size: 14px;
  line-height: 1.7;
}
body[data-impact-story="water-services"] .impact-story .product-frame {
  overflow: hidden;
  color: var(--ink);
  background: #111720;
}
body[data-impact-story="water-services"] .impact-story .frame-head {
  height: 50px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111720;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
body[data-impact-story="water-services"] .impact-story .product-frame figure {
  aspect-ratio: 16/8.4;
  overflow: hidden;
}
body[data-impact-story="water-services"]
  .impact-story
  .product-frame
  figure
  img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
}
body[data-impact-story="water-services"] .impact-story .workflow-layout {
  margin-top: 90px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 70px;
  align-items: stretch;
}
body[data-impact-story="water-services"] .impact-story .workflow-photo {
  position: relative;
  min-height: 560px;
  overflow: visible;
}
body[data-impact-story="water-services"] .impact-story .workflow-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="water-services"]
  .impact-story
  .workflow-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: -200px;
  width: min(450px, 86%);
  padding: 26px 30px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  background: var(--paper);
}
body[data-impact-story="water-services"] .impact-story .workflow-photo strong {
  font-size: 34px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
body[data-impact-story="water-services"] .impact-story .workflow-photo span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="water-services"] .impact-story .workflow-copy {
  padding: 45px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: #d0d5de;
  font-size: 16px;
  line-height: 1.75;
}
body[data-impact-story="water-services"] .impact-story .workflow-copy p + p {
  margin-top: 28px;
}
body[data-impact-story="water-services"]
  .impact-story
  .workflow-copy
  .workflow-lead {
  color: var(--ink);
  font-size: clamp(27px, 2.5vw, 39px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
body[data-impact-story="water-services"] .impact-story .governance {
  margin-top: 120px;
  padding-top: 65px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 100px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="water-services"] .impact-story .governance-title h3 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
body[data-impact-story="water-services"] .impact-story .governance-title p {
  max-width: 480px;
  margin-top: 24px;
  color: var(--muted);
}
body[data-impact-story="water-services"] .impact-story .governance ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}
body[data-impact-story="water-services"] .impact-story .governance li {
  padding: 30px 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-services"]
  .impact-story
  .governance
  li:first-child {
  border-top: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .governance li strong {
  font-size: 19px;
}
body[data-impact-story="water-services"] .impact-story .governance li span {
  color: var(--muted);
  font-size: 14px;
}
body[data-impact-story="water-services"] .impact-story .impact {
  background: var(--soft);
}
body[data-impact-story="water-services"] .impact-story .impact-heading {
  padding-bottom: 70px;
  border-bottom: 1px solid var(--ink);
}
body[data-impact-story="water-services"] .impact-story .impact-intro {
  padding: 65px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}
body[data-impact-story="water-services"] .impact-story .impact-intro article {
  padding-top: 22px;
  border-top: 1px solid #afb6bd;
}
body[data-impact-story="water-services"] .impact-story .impact-intro h3 {
  font-size: 25px;
}
body[data-impact-story="water-services"] .impact-story .impact-intro p {
  max-width: 570px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
body[data-impact-story="water-services"] .impact-story .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .metric {
  min-height: 245px;
  padding: 31px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111720;
}
body[data-impact-story="water-services"] .impact-story .metric p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
body[data-impact-story="water-services"] .impact-story .metric p span {
  color: #8b949e;
  font-size: 19px;
}
body[data-impact-story="water-services"] .impact-story .metric p b {
  color: var(--accent);
  font-size: 23px;
}
body[data-impact-story="water-services"] .impact-story .metric p strong {
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.055em;
}
body[data-impact-story="water-services"] .impact-story .metric h3 {
  max-width: 330px;
  font-size: 13px;
}
body[data-impact-story="water-services"] .impact-story .metric-wide {
  grid-column: 2/4;
}
body[data-impact-story="water-services"] .impact-story .closing-impact {
  margin-top: 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="water-services"] .impact-story .closing-impact p {
  min-height: 150px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #111720;
  border-right: 1px solid var(--line);
}
body[data-impact-story="water-services"]
  .impact-story
  .closing-impact
  p:last-child {
  border: 0;
}
body[data-impact-story="water-services"] .impact-story .closing-impact strong {
  font-size: 36px;
  letter-spacing: -0.04em;
}
body[data-impact-story="water-services"] .impact-story .closing-impact span {
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
}
body[data-impact-story="water-services"] .impact-story .closing {
  background: var(--paper);
}
body[data-impact-story="water-services"] .impact-story .closing h2 {
  max-width: 1200px;
}
body[data-impact-story="water-services"] .impact-story .footer {
  padding: 34px max(72px, calc((100vw - 1420px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9ba4af;
  background: var(--dark);
  font-size: 12px;
}
body[data-impact-story="water-services"] .impact-story .footer .logo {
  color: #fff;
}
body[data-impact-story="water-services"] .impact-story .enter {
  transform: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
body[data-impact-story="water-services"] .impact-story .enter.shown {
  opacity: 1;
  transform: none;
}
body[data-impact-story="water-services"] .impact-story :focus-visible {
  outline: 3px solid #2f91a4;
  outline-offset: 4px;
}
body[data-impact-story="water-services"] .impact-story button:active {
  transform: translateY(1px);
}
@media (max-width: 1050px) {
  body[data-impact-story="water-services"] .impact-story {
    --max: min(1420px, calc(100vw - 96px));
  }
  body[data-impact-story="water-services"] .impact-story .topbar {
    padding-inline: 48px;
  }
  body[data-impact-story="water-services"] .impact-story .hero {
    grid-template-columns: 55px 1.2fr 0.8fr;
    gap: 30px;
  }
  body[data-impact-story="water-services"] .impact-story .hero h1 {
    font-size: clamp(53px, 7vw, 76px);
  }
  body[data-impact-story="water-services"] .impact-story .hero-visual {
    min-height: 430px;
  }
  body[data-impact-story="water-services"] .impact-story .section {
    padding-inline: 48px;
  }
  body[data-impact-story="water-services"] .impact-story .section-intro {
    grid-template-columns: 200px 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .system-title {
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
    gap: 44px;
  }
  body[data-impact-story="water-services"] .impact-story .product-story {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
  body[data-impact-story="water-services"] .impact-story .governance {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}
@media (max-width: 760px) {
  body[data-impact-story="water-services"] .impact-story {
    --max: calc(100vw - 32px);
    scroll-padding-top: 68px;
  }
  body[data-impact-story="water-services"] .impact-story .topbar {
    height: 64px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="water-services"] .impact-story .topbar > p,
  body[data-impact-story="water-services"] .impact-story .topbar nav {
    display: none;
  }
  body[data-impact-story="water-services"] .impact-story .menu {
    display: block;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  body[data-impact-story="water-services"] .impact-story .mobile-nav {
    position: absolute;
    top: 64px;
    left: 8px;
    right: 8px;
    padding: 12px;
    display: none;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body[data-impact-story="water-services"] .impact-story .mobile-nav.open {
    display: flex;
  }
  body[data-impact-story="water-services"] .impact-story .mobile-nav a {
    padding: 12px;
  }
  body[data-impact-story="water-services"] .impact-story .hero {
    min-height: auto;
    padding: 62px 0 70px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  body[data-impact-story="water-services"] .impact-story .hero-index {
    display: none;
  }
  body[data-impact-story="water-services"] .impact-story .hero h1 {
    font-size: clamp(50px, 14.5vw, 67px);
  }
  body[data-impact-story="water-services"] .impact-story .hero-statement {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .hero-support {
    padding: 0;
    border: 0;
  }
  body[data-impact-story="water-services"] .impact-story .hero-visual {
    min-height: 420px;
  }
  body[data-impact-story="water-services"] .impact-story .hero-facts {
    grid-column: auto;
  }
  body[data-impact-story="water-services"] .impact-story .hero-facts strong {
    font-size: 22px;
  }
  body[data-impact-story="water-services"] .impact-story .hero-facts div {
    padding-right: 10px;
  }
  body[data-impact-story="water-services"] .impact-story .hero-facts div + div {
    padding-left: 10px;
  }
  body[data-impact-story="water-services"] .impact-story .section {
    padding: 95px 16px;
  }
  body[data-impact-story="water-services"] .impact-story .section-intro,
  body[data-impact-story="water-services"] .impact-story .context-copy,
  body[data-impact-story="water-services"] .impact-story .system-title,
  body[data-impact-story="water-services"] .impact-story .product-story,
  body[data-impact-story="water-services"] .impact-story .workflow-layout,
  body[data-impact-story="water-services"] .impact-story .governance {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  body[data-impact-story="water-services"] .impact-story .section-intro h2,
  body[data-impact-story="water-services"] .impact-story .system-title h2,
  body[data-impact-story="water-services"] .impact-story .closing h2 {
    font-size: 46px;
  }
  body[data-impact-story="water-services"] .impact-story .context-copy {
    margin: 65px 0 50px;
  }
  body[data-impact-story="water-services"] .impact-story .lead-copy {
    font-size: 27px;
  }
  body[data-impact-story="water-services"] .impact-story .challenge-photo {
    height: 480px;
  }
  body[data-impact-story="water-services"] .impact-story .challenge-band {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .challenge-band
    article {
    min-height: 0;
    padding: 28px 0;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .challenge-band
    article
    + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  body[data-impact-story="water-services"] .impact-story .system-summary {
    margin-top: 55px;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .system-summary
    article {
    min-height: 0;
    padding: 28px 0;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .system-summary
    article
    + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  body[data-impact-story="water-services"] .impact-story .system-summary p {
    margin-top: 28px;
    font-size: 18px;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .knowledge-strip
    strong {
    font-size: 22px;
  }
  body[data-impact-story="water-services"]
    .impact-story
    .knowledge-strip
    div
    + div {
    padding-left: 12px;
  }
  body[data-impact-story="water-services"] .impact-story .product-story {
    margin-top: 80px;
  }
  body[data-impact-story="water-services"] .impact-story .product-copy {
    position: static;
  }
  body[data-impact-story="water-services"] .impact-story .product-frame {
    overflow-x: auto;
  }
  body[data-impact-story="water-services"] .impact-story .product-frame figure {
    min-width: 760px;
  }
  body[data-impact-story="water-services"] .impact-story .workflow-layout {
    margin-top: 60px;
  }
  body[data-impact-story="water-services"] .impact-story .workflow-photo {
    min-height: 480px;
  }
  body[data-impact-story="water-services"] .impact-story .governance {
    margin-top: 90px;
  }
  body[data-impact-story="water-services"] .impact-story .governance li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-impact-story="water-services"] .impact-story .metrics {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .metric,
  body[data-impact-story="water-services"] .impact-story .metric-wide {
    grid-column: auto;
    min-height: 190px;
  }
  body[data-impact-story="water-services"] .impact-story .impact-intro,
  body[data-impact-story="water-services"] .impact-story .closing-impact {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .closing-impact p {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="water-services"]
    .impact-story
    .closing-impact
    p:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="water-services"] .impact-story .footer {
    padding-inline: 20px;
  }
}
@media (max-width: 430px) {
  body[data-impact-story="water-services"] .impact-story .hero-facts {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .hero-facts div,
  body[data-impact-story="water-services"] .impact-story .hero-facts div + div {
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-impact-story="water-services"]
    .impact-story
    .hero-facts
    div:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="water-services"] .impact-story .hero h1 {
    font-size: 49px;
  }
  body[data-impact-story="water-services"] .impact-story .section-intro h2,
  body[data-impact-story="water-services"] .impact-story .system-title h2,
  body[data-impact-story="water-services"] .impact-story .closing h2 {
    font-size: 41px;
  }
  body[data-impact-story="water-services"] .impact-story .knowledge-strip {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .knowledge-strip div,
  body[data-impact-story="water-services"]
    .impact-story
    .knowledge-strip
    div
    + div {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  body[data-impact-story="water-services"]
    .impact-story
    .knowledge-strip
    div:last-child {
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="water-services"] .impact-story {
    scroll-behavior: auto;
  }
  body[data-impact-story="water-services"] .impact-story .enter,
  body[data-impact-story="water-services"] .impact-story .enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
body[data-impact-story="water-services"] .impact-story .topbar nav a {
  white-space: nowrap;
}

/* Readability and animated process-twin refinement */
body[data-impact-story="water-services"]
  .impact-story
  .product-copy
  > p:last-child {
  font-size: 16px;
}
body[data-impact-story="water-services"] .impact-story .product-frame figure {
  aspect-ratio: 16/8.4;
}
body[data-impact-story="water-services"] .impact-story .workflow-demo {
  min-height: 0;
  aspect-ratio: 1000/570;
  background: #111720;
}
body[data-impact-story="water-services"] .impact-story .workflow-layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}
body[data-impact-story="water-services"]
  .impact-story
  .workflow-layout:has(.workflow-demo) {
  align-items: start;
}
body[data-impact-story="water-services"] .impact-story .workflow-demo {
  width: 85%;
  max-width: 85%;
}
body[data-impact-story="water-services"] .impact-story .workflow-demo picture {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}
body[data-impact-story="water-services"] .impact-story .workflow-demo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="water-services"] .impact-story .workflow-copy {
  font-size: 18px;
  line-height: 1.72;
}
body[data-impact-story="water-services"] .impact-story .governance-title p {
  font-size: 18px;
  line-height: 1.65;
}
body[data-impact-story="water-services"] .impact-story .governance li span {
  font-size: 17px;
  line-height: 1.55;
}
body[data-impact-story="water-services"] .impact-story .impact-intro p {
  font-size: 18px;
  line-height: 1.65;
}
body[data-impact-story="water-services"] .impact-story .metric h3 {
  font-size: 15px;
  line-height: 1.5;
}
body[data-impact-story="water-services"] .impact-story .closing-impact span {
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  body[data-impact-story="water-services"] .impact-story .product-frame figure {
    aspect-ratio: auto;
  }
  body[data-impact-story="water-services"] .impact-story .workflow-demo {
    min-height: 0;
    aspect-ratio: 1000/570;
  }
  body[data-impact-story="water-services"] .impact-story .workflow-copy,
  body[data-impact-story="water-services"] .impact-story .governance-title p,
  body[data-impact-story="water-services"] .impact-story .impact-intro p {
    font-size: 17px;
  }
  body[data-impact-story="water-services"] .impact-story .governance li span {
    font-size: 16px;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="water-services"] .impact-story .topbar {
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="water-services"] .impact-story .topbar > p {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-impact-story="water-services"] .impact-story .workflow-layout {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="water-services"] .impact-story .workflow-demo {
    width: 100%;
    aspect-ratio: 1000/570;
  }
}

body[data-impact-story="water-services"] .impact-story {
  --ink: #e7e9ef;
  --muted: #a3acb9;
  --line: #303744;
  --paper: #0b1017;
  --surface: #121923;
  --soft: #111821;
  --soft-purple: #171c25;
  --accent: #f3f4f6;
  --dark: #080c12;
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.6;
}
body[data-impact-story="compensation"] .impact-story {
  --ink: #0b1018;
  --muted: #626c79;
  --line: #dce1e6;
  --paper: #fdfdfc;
  --soft: #f1f3f4;
  --accent: #17685f;
  --dark: #0b121b;
  --max: min(1420px, calc(100vw - 96px));
  --sans: Arial, "Helvetica Neue", sans-serif;
}
body[data-impact-story="compensation"] .impact-story * {
  box-sizing: border-box;
}
body[data-impact-story="compensation"] .impact-story {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-impact-story="compensation"] .impact-story a {
  color: inherit;
  text-decoration: none;
}
body[data-impact-story="compensation"] .impact-story img {
  display: block;
  width: 100%;
}
body[data-impact-story="compensation"] .impact-story p,
body[data-impact-story="compensation"] .impact-story h1,
body[data-impact-story="compensation"] .impact-story h2,
body[data-impact-story="compensation"] .impact-story h3,
body[data-impact-story="compensation"] .impact-story figure,
body[data-impact-story="compensation"] .impact-story blockquote {
  margin: 0;
}
body[data-impact-story="compensation"] .impact-story button {
  font: inherit;
  color: inherit;
}
body[data-impact-story="compensation"] .impact-story .skip {
  position: fixed;
  z-index: 100;
  top: -60px;
  left: 16px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
}
body[data-impact-story="compensation"] .impact-story .skip:focus {
  top: 16px;
}
body[data-impact-story="compensation"] .impact-story .topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100%;
  height: 78px;
  padding: 0 max(48px, calc((100vw - 1420px) / 2));
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  background: rgba(253, 253, 252, 0.93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
body[data-impact-story="compensation"] .impact-story .logo {
  font-weight: 800;
  letter-spacing: 0.25em;
  font-size: 19px;
}
body[data-impact-story="compensation"] .impact-story .topbar > p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6d7681;
}
body[data-impact-story="compensation"] .impact-story .topbar > p span {
  margin-left: 18px;
  color: var(--ink);
  font-weight: 700;
}
body[data-impact-story="compensation"] .impact-story .topbar nav {
  display: flex;
  gap: 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="compensation"] .impact-story .topbar nav a,
body[data-impact-story="compensation"] .impact-story .arrow-link,
body[data-impact-story="compensation"] .impact-story .footer a {
  transition: opacity 0.2s;
}
body[data-impact-story="compensation"] .impact-story .topbar nav a:hover,
body[data-impact-story="compensation"] .impact-story .arrow-link:hover,
body[data-impact-story="compensation"] .impact-story .footer a:hover {
  opacity: 0.55;
}
body[data-impact-story="compensation"] .impact-story .menu,
body[data-impact-story="compensation"] .impact-story .mobile-nav {
  display: none;
}
body[data-impact-story="compensation"] .impact-story .hero {
  width: var(--max);
  margin: auto;
  min-height: calc(100dvh - 78px);
  padding: 78px 0 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
  grid-template-rows: auto 132px;
  gap: 40px 52px;
  align-items: end;
}
body[data-impact-story="compensation"] .impact-story .hero-index {
  align-self: start;
  padding-top: 12px;
  color: #9ba2aa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
}
body[data-impact-story="compensation"] .impact-story .hero-copy {
  align-self: center;
}
body[data-impact-story="compensation"] .impact-story .overline,
body[data-impact-story="compensation"] .impact-story .section-label {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
body[data-impact-story="compensation"] .impact-story .hero h1 {
  max-width: 900px;
  font-size: clamp(62px, 6.8vw, 110px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.068em;
}
body[data-impact-story="compensation"] .impact-story .hero h1 em {
  display: block;
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
body[data-impact-story="compensation"] .impact-story .hero-statement {
  max-width: 690px;
  margin-top: 34px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="compensation"] .impact-story .hero-lead {
  font-size: 19px;
  line-height: 1.5;
}
body[data-impact-story="compensation"] .impact-story .hero-support {
  padding-left: 26px;
  color: #66707b;
  font-size: 14px;
  line-height: 1.65;
  border-left: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .arrow-link {
  margin-top: 30px;
  display: inline-flex;
  gap: 50px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
}
body[data-impact-story="compensation"] .impact-story .hero-visual {
  align-self: stretch;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #dce1e1;
}
body[data-impact-story="compensation"] .impact-story .hero-visual img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 63% center;
     object-position: 63% center;
}
body[data-impact-story="compensation"] .impact-story .hero-facts {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .hero-facts div {
  padding: 20px 24px 18px 0;
  border-right: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .hero-facts div + div {
  padding-left: 24px;
}
body[data-impact-story="compensation"]
  .impact-story
  .hero-facts
  div:last-child {
  border: 0;
}
body[data-impact-story="compensation"] .impact-story .hero-facts strong {
  display: block;
  font-size: 31px;
  letter-spacing: -0.04em;
}
body[data-impact-story="compensation"] .impact-story .hero-facts span {
  color: #7a838e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="compensation"] .impact-story .section {
  padding: 150px max(48px, calc((100vw - 1420px) / 2));
}
body[data-impact-story="compensation"] .impact-story .section-intro {
  display: grid;
  grid-template-columns: 260px minmax(0, 930px);
  gap: 60px;
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .section-intro h2,
body[data-impact-story="compensation"] .impact-story .system-title h2,
body[data-impact-story="compensation"] .impact-story .district-copy h2 {
  font-size: clamp(52px, 5vw, 82px);
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -0.052em;
}
body[data-impact-story="compensation"] .impact-story .context-copy {
  margin: 90px 0 70px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12vw;
  padding-top: 36px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="compensation"] .impact-story .lead-copy {
  max-width: 560px;
  font-size: clamp(27px, 2.35vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.035em;
}
body[data-impact-story="compensation"] .impact-story .context-copy > div {
  max-width: 620px;
  color: #d0d5de;
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="compensation"] .impact-story .context-copy > div p + p {
  margin-top: 22px;
}
body[data-impact-story="compensation"] .impact-story .challenge-photo {
  position: relative;
  height: min(43vw, 570px);
  overflow: hidden;
}
body[data-impact-story="compensation"] .impact-story .challenge-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(480px, 78%);
  padding: 26px 30px;
  background: var(--paper);
}
body[data-impact-story="compensation"] .impact-story .challenge-photo strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="compensation"] .impact-story .challenge-photo span {
  font-size: 19px;
  line-height: 1.4;
}
body[data-impact-story="compensation"] .impact-story .system {
  color: #f8fafc;
  background: var(--dark);
}
body[data-impact-story="compensation"] .impact-story .system-title {
  display: grid;
  grid-template-columns: 220px 1fr 0.7fr;
  gap: 50px;
  align-items: end;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-title
  .section-label {
  color: #6ea99f;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-title
  > p:last-child {
  max-width: 510px;
  color: #a5afbc;
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .system-summary {
  margin: 80px 0 0 270px;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #a5afbc;
  font-size: 16px;
}
body[data-impact-story="compensation"] .impact-story .product-story {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 70px;
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .product-copy {
  position: sticky;
  top: 120px;
}
body[data-impact-story="compensation"] .impact-story .product-copy h3 {
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
body[data-impact-story="compensation"] .impact-story .product-frame {
  overflow: hidden;
  color: var(--ink);
  background: #111720;
  border-radius: 14px;
}
body[data-impact-story="compensation"] .impact-story .frame-head {
  height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: #111720;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
body[data-impact-story="compensation"] .impact-story .product-frame figure {
  aspect-ratio: 16/7.4;
  overflow: hidden;
}
body[data-impact-story="compensation"] .impact-story .product-frame figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
}
body[data-impact-story="compensation"] .impact-story .view-switch {
  display: flex;
  border-top: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .view-switch button {
  flex: 1;
  padding: 15px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #111720;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
body[data-impact-story="compensation"]
  .impact-story
  .view-switch
  button:last-child {
  border: 0;
}
body[data-impact-story="compensation"]
  .impact-story
  .view-switch
  button[aria-selected="true"] {
  color: #fff;
  background: var(--accent);
}
body[data-impact-story="compensation"] .impact-story .workflow-layout {
  margin-top: 90px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 70px;
  align-items: stretch;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-photo
  figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(420px, 82%);
  padding: 26px 30px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  background: var(--paper);
}
body[data-impact-story="compensation"] .impact-story .workflow-photo strong {
  font-size: 34px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="compensation"] .impact-story .workflow-copy {
  padding: 45px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  color: #d0d5de;
  font-size: 16px;
  line-height: 1.75;
}
body[data-impact-story="compensation"] .impact-story .workflow-copy p + p {
  margin-top: 28px;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-copy
  .workflow-lead {
  color: var(--ink);
  font-size: clamp(27px, 2.5vw, 39px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
body[data-impact-story="compensation"] .impact-story .impact {
  background: var(--soft);
}
body[data-impact-story="compensation"] .impact-story .impact-heading {
  padding-bottom: 70px;
  border-bottom: 1px solid var(--ink);
}
body[data-impact-story="compensation"] .impact-story .impact-intro {
  padding: 65px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}
body[data-impact-story="compensation"] .impact-story .impact-intro article {
  padding-top: 22px;
  border-top: 1px solid #afb6bd;
}
body[data-impact-story="compensation"] .impact-story .impact-intro h3 {
  font-size: 25px;
}
body[data-impact-story="compensation"] .impact-story .impact-intro p {
  max-width: 570px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
body[data-impact-story="compensation"] .impact-story .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .metric {
  min-height: 245px;
  padding: 31px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111720;
}
body[data-impact-story="compensation"] .impact-story .metric p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
body[data-impact-story="compensation"] .impact-story .metric p span {
  color: #8b949e;
  font-size: 22px;
}
body[data-impact-story="compensation"] .impact-story .metric p b {
  color: var(--accent);
  font-size: 23px;
}
body[data-impact-story="compensation"] .impact-story .metric p strong {
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.055em;
}
body[data-impact-story="compensation"] .impact-story .metric h3 {
  font-size: 13px;
}
body[data-impact-story="compensation"] .impact-story .districts {
  margin-top: 130px;
  padding-top: 70px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 100px;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="compensation"] .impact-story .district-copy {
  position: sticky;
  top: 120px;
  align-self: start;
}
body[data-impact-story="compensation"]
  .impact-story
  .district-copy
  > p:last-child {
  margin-top: 26px;
  color: var(--muted);
  font-size: 15px;
}
body[data-impact-story="compensation"] .impact-story .district-list article {
  padding: 35px 0;
  display: grid;
  grid-template-columns: 150px 210px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="compensation"]
  .impact-story
  .district-list
  article:first-child {
  border-top: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .district-list span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body[data-impact-story="compensation"] .impact-story .district-list strong {
  font-size: 29px;
  letter-spacing: -0.04em;
}
body[data-impact-story="compensation"] .impact-story .district-list p {
  color: var(--muted);
  font-size: 14px;
}
body[data-impact-story="compensation"] .impact-story .closing-impact {
  margin-top: 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .closing-impact p {
  min-height: 150px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #111720;
  border-right: 1px solid var(--line);
}
body[data-impact-story="compensation"]
  .impact-story
  .closing-impact
  p:last-child {
  border: 0;
}
body[data-impact-story="compensation"] .impact-story .closing-impact strong {
  font-size: 36px;
  letter-spacing: -0.04em;
}
body[data-impact-story="compensation"] .impact-story .closing-impact span {
  color: var(--muted);
  font-size: 13px;
}
body[data-impact-story="compensation"] .impact-story .perspective {
  color: #fff;
  background: #14201f;
}
body[data-impact-story="compensation"]
  .impact-story
  .perspective
  .section-label {
  color: #8fb9b2;
}
body[data-impact-story="compensation"] .impact-story .perspective blockquote {
  max-width: 1220px;
  font-size: clamp(45px, 5.6vw, 86px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
body[data-impact-story="compensation"] .impact-story .perspective footer {
  margin-top: 70px;
  padding-top: 25px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-impact-story="compensation"]
  .impact-story
  .perspective
  footer
  strong {
  font-size: 22px;
}
body[data-impact-story="compensation"] .impact-story .perspective footer span {
  color: #b7c2c0;
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .footer {
  padding: 34px max(48px, calc((100vw - 1420px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9ba4af;
  background: var(--dark);
  font-size: 12px;
}
body[data-impact-story="compensation"] .impact-story .footer .logo {
  color: #fff;
}
body[data-impact-story="compensation"] .impact-story .enter {
  transform: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
body[data-impact-story="compensation"] .impact-story .enter.shown {
  opacity: 1;
  transform: none;
}
body[data-impact-story="compensation"] .impact-story :focus-visible {
  outline: 3px solid #62a69b;
  outline-offset: 4px;
}
body[data-impact-story="compensation"] .impact-story button:active,
body[data-impact-story="compensation"] .impact-story .arrow-link:active {
  transform: translateY(1px);
}
@media (max-width: 1050px) {
  body[data-impact-story="compensation"] .impact-story {
    --max: min(1420px, calc(100vw - 64px));
  }
  body[data-impact-story="compensation"] .impact-story .topbar {
    padding-inline: 32px;
  }
  body[data-impact-story="compensation"] .impact-story .hero {
    grid-template-columns: 55px 1.2fr 0.8fr;
    gap: 30px;
  }
  body[data-impact-story="compensation"] .impact-story .hero h1 {
    font-size: clamp(55px, 7vw, 78px);
  }
  body[data-impact-story="compensation"] .impact-story .hero-visual {
    min-height: 430px;
  }
  body[data-impact-story="compensation"] .impact-story .section {
    padding-inline: 32px;
  }
  body[data-impact-story="compensation"] .impact-story .section-intro {
    grid-template-columns: 200px 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .system-title {
    grid-template-columns: 180px 1fr;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: 2;
  }
  body[data-impact-story="compensation"] .impact-story .system-summary {
    margin-left: 230px;
  }
  body[data-impact-story="compensation"] .impact-story .product-story {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
  body[data-impact-story="compensation"] .impact-story .districts {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .district-copy {
    position: static;
  }
  body[data-impact-story="compensation"] .impact-story .district-list article {
    grid-template-columns: 130px 190px 1fr;
  }
}
@media (max-width: 760px) {
  body[data-impact-story="compensation"] .impact-story {
    --max: calc(100vw - 32px);
    scroll-padding-top: 68px;
  }
  body[data-impact-story="compensation"] .impact-story .topbar {
    height: 64px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }
  body[data-impact-story="compensation"] .impact-story .topbar > p,
  body[data-impact-story="compensation"] .impact-story .topbar nav {
    display: none;
  }
  body[data-impact-story="compensation"] .impact-story .menu {
    display: block;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  body[data-impact-story="compensation"] .impact-story .mobile-nav {
    position: absolute;
    top: 64px;
    left: 8px;
    right: 8px;
    padding: 12px;
    display: none;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body[data-impact-story="compensation"] .impact-story .mobile-nav.open {
    display: flex;
  }
  body[data-impact-story="compensation"] .impact-story .mobile-nav a {
    padding: 12px;
  }
  body[data-impact-story="compensation"] .impact-story .hero {
    min-height: auto;
    padding: 62px 0 70px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  body[data-impact-story="compensation"] .impact-story .hero-index {
    display: none;
  }
  body[data-impact-story="compensation"] .impact-story .hero h1 {
    font-size: clamp(52px, 15vw, 70px);
  }
  body[data-impact-story="compensation"] .impact-story .hero-statement {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .hero-support {
    padding: 0;
    border: 0;
  }
  body[data-impact-story="compensation"] .impact-story .hero-visual {
    min-height: 420px;
  }
  body[data-impact-story="compensation"] .impact-story .hero-facts {
    grid-column: auto;
  }
  body[data-impact-story="compensation"] .impact-story .hero-facts strong {
    font-size: 24px;
  }
  body[data-impact-story="compensation"] .impact-story .section {
    padding: 95px 16px;
  }
  body[data-impact-story="compensation"] .impact-story .section-intro,
  body[data-impact-story="compensation"] .impact-story .context-copy,
  body[data-impact-story="compensation"] .impact-story .system-title,
  body[data-impact-story="compensation"] .impact-story .product-story,
  body[data-impact-story="compensation"] .impact-story .workflow-layout,
  body[data-impact-story="compensation"] .impact-story .districts {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  body[data-impact-story="compensation"] .impact-story .section-intro h2,
  body[data-impact-story="compensation"] .impact-story .system-title h2,
  body[data-impact-story="compensation"] .impact-story .district-copy h2 {
    font-size: 48px;
  }
  body[data-impact-story="compensation"] .impact-story .context-copy {
    margin: 65px 0 50px;
  }
  body[data-impact-story="compensation"] .impact-story .lead-copy {
    font-size: 27px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-photo {
    height: 480px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="compensation"] .impact-story .system-summary {
    margin: 55px 0 0;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  body[data-impact-story="compensation"] .impact-story .product-story {
    margin-top: 80px;
  }
  body[data-impact-story="compensation"] .impact-story .product-copy {
    position: static;
  }
  body[data-impact-story="compensation"] .impact-story .product-frame figure {
    min-width: 760px;
  }
  body[data-impact-story="compensation"] .impact-story .product-frame {
    overflow-x: auto;
  }
  body[data-impact-story="compensation"] .impact-story .workflow-layout {
    margin-top: 60px;
  }
  body[data-impact-story="compensation"] .impact-story .workflow-photo {
    min-height: 480px;
  }
  body[data-impact-story="compensation"] .impact-story .metrics {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .metric {
    min-height: 190px;
  }
  body[data-impact-story="compensation"] .impact-story .impact-intro,
  body[data-impact-story="compensation"] .impact-story .closing-impact {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .district-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-impact-story="compensation"] .impact-story .perspective blockquote {
    font-size: 43px;
    line-height: 1.1;
  }
  body[data-impact-story="compensation"] .impact-story .perspective footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  body[data-impact-story="compensation"] .impact-story .footer {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-impact-story="compensation"] .impact-story {
    scroll-behavior: auto;
  }
  body[data-impact-story="compensation"] .impact-story .enter,
  body[data-impact-story="compensation"] .impact-story .enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Compensation story additions. The confirmed AHS case template remains the visual baseline. */
body[data-impact-story="compensation"] .impact-story {
  --accent: #087f76;
  --accent-soft: #d8efec;
  --dark: #07182d;
}
body[data-impact-story="compensation"] .impact-story .compensation-hero {
  padding-top: 54px;
  padding-bottom: 58px;
  grid-template-rows: auto 104px;
}
body[data-impact-story="compensation"] .impact-story .compensation-hero h1 {
  font-size: clamp(48px, 4.7vw, 70px);
  max-width: 860px;
  line-height: 0.98;
}
body[data-impact-story="compensation"] .impact-story .compensation-hero h1 em {
  color: var(--accent);
}
body[data-impact-story="compensation"] .impact-story .hero-statement-single {
  max-width: 760px;
  grid-template-columns: 1fr;
}
body[data-impact-story="compensation"]
  .impact-story
  .compensation-hero
  .hero-visual {
  align-self: center;
  min-height: 0;
  aspect-ratio: 4/3;
}
body[data-impact-story="compensation"]
  .impact-story
  .compensation-hero
  .hero-visual
  img {
  -o-object-position: center 50%;
     object-position: center 50%;
}
body[data-impact-story="compensation"] .impact-story .context-lead-exact {
  font-size: clamp(22px, 1.9vw, 31px);
  line-height: 1.42;
}
body[data-impact-story="compensation"] .impact-story .context-band {
  margin-top: 72px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 2.3fr;
  gap: 48px;
  align-items: center;
}
body[data-impact-story="compensation"] .impact-story .context-band > p {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
body[data-impact-story="compensation"] .impact-story .context-band > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body[data-impact-story="compensation"] .impact-story .context-band span {
  padding: 9px 13px;
  border: 1px solid #ccd5d9;
  background: #111720;
  font-size: 13px;
  font-weight: 700;
}
body[data-impact-story="compensation"] .impact-story .challenge {
  background: #111720;
}
body[data-impact-story="compensation"] .impact-story .challenge-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(56px, 8vw, 130px);
}
body[data-impact-story="compensation"] .impact-story .challenge-lead {
  max-width: 780px;
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: -0.035em;
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1.36;
}
body[data-impact-story="compensation"] .impact-story .challenge-points {
  display: grid;
  gap: 28px;
  color: #d0d5de;
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .challenge-consequences {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #ccd6d8;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-consequences
  span {
  padding: 24px 18px 0 0;
  font-size: 14px;
  font-weight: 800;
}
body[data-impact-story="compensation"] .impact-story .relationship-model {
  margin-top: 82px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
body[data-impact-story="compensation"] .impact-story .model-object {
  min-height: 176px;
  padding: 28px;
  text-align: left;
  border: 0;
  background: #0c223c;
  color: #d9e3ee;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.25s;
}
body[data-impact-story="compensation"] .impact-story .model-object:hover,
body[data-impact-story="compensation"]
  .impact-story
  .model-object:focus-visible {
  background: #102d4c;
  outline: 2px solid #76bdb5;
  outline-offset: -2px;
}
body[data-impact-story="compensation"] .impact-story .model-object:active {
  transform: translateY(1px);
}
body[data-impact-story="compensation"] .impact-story .model-object strong,
body[data-impact-story="compensation"] .impact-story .model-object span {
  display: block;
}
body[data-impact-story="compensation"] .impact-story .model-object strong {
  font-size: 20px;
  color: #fff;
}
body[data-impact-story="compensation"] .impact-story .model-object span {
  margin-top: 34px;
  color: #9fb0c2;
  font-size: 13px;
}
body[data-impact-story="compensation"] .impact-story .model-object.is-active {
  background: #0a746d;
}
body[data-impact-story="compensation"]
  .impact-story
  .model-object.is-active
  span {
  color: #d8efec;
}
body[data-impact-story="compensation"] .impact-story .model-detail {
  grid-column: 1/-1;
  min-height: 210px;
  padding: 38px 42px;
  background: #081525;
  display: grid;
  grid-template-columns: 170px 1fr 1.4fr;
  gap: 38px;
  align-items: start;
}
body[data-impact-story="compensation"]
  .impact-story
  .model-detail
  > p:first-child {
  color: #76bdb5;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
body[data-impact-story="compensation"] .impact-story .model-detail h3 {
  font-size: 34px;
  line-height: 1.1;
}
body[data-impact-story="compensation"]
  .impact-story
  .model-detail
  > p:last-child {
  max-width: 620px;
  color: #b8c5d2;
  font-size: 17px;
}
body[data-impact-story="compensation"]
  .impact-story
  .product-copy
  > p:last-child {
  margin-top: 28px;
  color: #aab5c1;
  font-size: 16px;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure {
  background: #111720;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure img {
  height: auto;
  min-width: 0;
  -o-object-fit: contain;
     object-fit: contain;
  transform: none !important;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo img {
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-copy
  .workflow-lead.workflow-lead-exact {
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.42;
}
body[data-impact-story="compensation"] .impact-story .lineage {
  margin-top: 70px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #d0d5de;
  font-size: 13px;
  font-weight: 800;
}
body[data-impact-story="compensation"] .impact-story .lineage b {
  color: var(--accent);
  font-size: 18px;
}
body[data-impact-story="compensation"] .impact-story .impact-capabilities {
  margin: 72px 0 36px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0 70px;
  border-top: 1px solid var(--line);
}
body[data-impact-story="compensation"]
  .impact-story
  .impact-capabilities
  article {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) 1.2fr;
  gap: 28px;
}
body[data-impact-story="compensation"] .impact-story .impact-capabilities h3 {
  font-size: 19px;
  line-height: 1.25;
}
body[data-impact-story="compensation"] .impact-story .impact-capabilities p {
  color: var(--muted);
  font-size: 15px;
}
body[data-impact-story="compensation"] .impact-story .compensation-metrics {
  grid-template-columns: repeat(3, 1fr);
}
body[data-impact-story="compensation"]
  .impact-story
  .compensation-metrics
  .metric {
  min-height: 280px;
}
body[data-impact-story="compensation"]
  .impact-story
  .compensation-metrics
  .metric
  p
  strong {
  font-size: clamp(42px, 5vw, 72px);
  color: var(--accent);
}
body[data-impact-story="compensation"]
  .impact-story
  .compensation-metrics
  .metric
  span {
  display: block;
  margin-top: 18px;
  max-width: 260px;
  color: var(--muted);
  font-size: 14px;
}
body[data-impact-story="compensation"] .impact-story .single-impact-metric {
  grid-template-columns: 1fr;
}
body[data-impact-story="compensation"]
  .impact-story
  .single-impact-metric
  .metric {
  min-height: 260px;
}
body[data-impact-story="compensation"]
  .impact-story
  .single-impact-metric
  .metric
  h3 {
  font-size: clamp(24px, 2.5vw, 38px);
  letter-spacing: -0.025em;
}
body[data-impact-story="compensation"]
  .impact-story
  .single-impact-metric
  .metric
  > span {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.65;
}
body[data-impact-story="compensation"] .impact-story .decision-note {
  margin-top: 80px;
  padding: 52px 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
}
body[data-impact-story="compensation"] .impact-story .decision-note p {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
body[data-impact-story="compensation"] .impact-story .decision-note span {
  align-self: end;
  color: var(--muted);
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .footer p {
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 1050px) {
  body[data-impact-story="compensation"] .impact-story .relationship-model {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-impact-story="compensation"] .impact-story .model-detail {
    grid-template-columns: 140px 1fr;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .model-detail
    > p:last-child {
    grid-column: 2;
  }
  body[data-impact-story="compensation"] .impact-story .impact-capabilities {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .compensation-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  body[data-impact-story="compensation"]
    .impact-story
    .compensation-metrics.single-impact-metric {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-consequences {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  body[data-impact-story="compensation"] .impact-story .compensation-hero {
    grid-template-rows: auto;
  }
  body[data-impact-story="compensation"] .impact-story .compensation-hero h1 {
    font-size: clamp(48px, 14vw, 68px);
  }
  body[data-impact-story="compensation"]
    .impact-story
    .compensation-hero
    .hero-visual {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4/3;
  }
  body[data-impact-story="compensation"] .impact-story .context-band,
  body[data-impact-story="compensation"] .impact-story .challenge-grid,
  body[data-impact-story="compensation"] .impact-story .model-detail,
  body[data-impact-story="compensation"]
    .impact-story
    .impact-capabilities
    article,
  body[data-impact-story="compensation"] .impact-story .decision-note {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .context-band {
    gap: 20px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-grid {
    margin-top: 52px;
    gap: 40px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-consequences {
    grid-template-columns: 1fr 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .relationship-model {
    margin-top: 56px;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .model-object {
    min-height: 140px;
  }
  body[data-impact-story="compensation"] .impact-story .model-object span {
    margin-top: 24px;
  }
  body[data-impact-story="compensation"] .impact-story .model-detail {
    padding: 28px;
    gap: 18px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .model-detail
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="compensation"] .impact-story .lineage {
    overflow-x: auto;
    justify-content: flex-start;
    white-space: nowrap;
  }
  body[data-impact-story="compensation"] .impact-story .compensation-metrics {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .impact-capabilities {
    margin-top: 52px;
  }
  body[data-impact-story="compensation"] .impact-story .footer p {
    display: none;
  }
}

/* Refined page margins and connected-intelligence composition */
body[data-impact-story="compensation"] .impact-story .system-title {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
}
body[data-impact-story="compensation"] .impact-story .system-title h2 {
  max-width: 980px;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-title
  > p:last-child {
  max-width: 430px;
  padding-bottom: 8px;
  color: #a5afbc;
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .system-summary {
  margin: 78px 0 0;
  padding: 0;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body[data-impact-story="compensation"] .impact-story .system-summary article {
  min-height: 230px;
  padding: 32px 42px 34px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-summary
  article
  + article {
  padding-left: 42px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
body[data-impact-story="compensation"] .impact-story .system-summary span {
  color: #71b6a9;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="compensation"] .impact-story .system-summary p {
  max-width: 520px;
  color: #d5dce4;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

@media (min-width: 1051px) {
  body[data-impact-story="compensation"] .impact-story {
    --max: min(1420px, calc(100vw - 144px));
  }
  body[data-impact-story="compensation"] .impact-story .topbar {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
  body[data-impact-story="compensation"] .impact-story .section {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
  body[data-impact-story="compensation"] .impact-story .footer {
    padding-inline: max(72px, calc((100vw - 1420px) / 2));
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="compensation"] .impact-story {
    --max: min(1420px, calc(100vw - 96px));
  }
  body[data-impact-story="compensation"] .impact-story .topbar {
    padding-inline: 48px;
  }
  body[data-impact-story="compensation"] .impact-story .section {
    padding-inline: 48px;
  }
  body[data-impact-story="compensation"] .impact-story .footer {
    padding-inline: 48px;
  }
  body[data-impact-story="compensation"] .impact-story .system-title {
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
    gap: 44px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="compensation"] .impact-story .system-summary {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  body[data-impact-story="compensation"] .impact-story .system-title {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-title
    > p:last-child {
    grid-column: auto;
  }
  body[data-impact-story="compensation"] .impact-story .system-summary {
    margin-top: 55px;
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .system-summary article {
    min-height: 0;
    padding: 28px 0;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-summary
    article
    + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  body[data-impact-story="compensation"] .impact-story .system-summary p {
    margin-top: 28px;
    font-size: 18px;
  }
}

/* Editorial image-led layouts for the two densest narrative sections. */
body[data-impact-story="compensation"] .impact-story .context-feature {
  margin-top: 78px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  grid-template-areas: "primary visual" "structure visual";
  gap: 28px clamp(44px, 7vw, 104px);
  border-top: 1px solid var(--ink);
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .context-primary {
  grid-area: primary;
  padding-top: 4px;
}
body[data-impact-story="compensation"] .impact-story .context-primary > span {
  display: block;
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
body[data-impact-story="compensation"]
  .impact-story
  .context-primary
  p:first-of-type {
  max-width: 460px;
  font-size: clamp(27px, 2.45vw, 38px);
  line-height: 1.24;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
body[data-impact-story="compensation"] .impact-story .context-structure {
  grid-area: structure;
  max-width: 480px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}
body[data-impact-story="compensation"] .impact-story .context-visual {
  grid-area: visual;
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #dfe5e7;
}
body[data-impact-story="compensation"] .impact-story .context-visual img {
  height: 100%;
  min-height: 390px;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="compensation"]
  .impact-story
  .context-visual
  figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(430px, 78%);
  padding: 22px 25px;
  color: #fff;
  background: rgba(7, 24, 45, 0.9);
  backdrop-filter: blur(8px);
}
body[data-impact-story="compensation"]
  .impact-story
  .context-visual
  figcaption
  strong,
body[data-impact-story="compensation"]
  .impact-story
  .context-visual
  figcaption
  span {
  display: block;
}
body[data-impact-story="compensation"]
  .impact-story
  .context-visual
  figcaption
  strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}
body[data-impact-story="compensation"]
  .impact-story
  .context-visual
  figcaption
  span {
  margin-top: 7px;
  color: #cbd7df;
  font-size: 12px;
  line-height: 1.55;
}
body[data-impact-story="compensation"] .impact-story .context-detail {
  margin-top: 44px;
  padding: 34px 0 42px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(44px, 7vw, 104px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .context-detail p {
  max-width: 610px;
  color: #d0d5de;
  font-size: 17px;
  line-height: 1.72;
}
body[data-impact-story="compensation"] .impact-story .context-band {
  margin-top: 42px;
}
body[data-impact-story="compensation"] .impact-story .challenge-editorial {
  margin-top: 74px;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(340px, 1.08fr);
  gap: clamp(48px, 7vw, 105px);
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .challenge-visual {
  position: relative;
  overflow: hidden;
  background: #dce3e4;
}
body[data-impact-story="compensation"] .impact-story .challenge-visual img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-visual
  figcaption {
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  border-top: 1px solid #aeb9bd;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-visual
  figcaption
  strong {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-visual
  figcaption
  span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
body[data-impact-story="compensation"] .impact-story .challenge-copy {
  border-top: 1px solid var(--ink);
}
body[data-impact-story="compensation"] .impact-story .challenge-copy p {
  padding: 24px 0;
  color: #d0d5de;
  font-size: 16px;
  line-height: 1.72;
  border-bottom: 1px solid #d1dadd;
}
body[data-impact-story="compensation"]
  .impact-story
  .challenge-copy
  .challenge-lead {
  max-width: 640px;
  color: var(--ink);
  font-size: clamp(23px, 2.2vw, 33px);
  line-height: 1.32;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
body[data-impact-story="compensation"] .impact-story .challenge-consequences {
  margin-top: 58px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="compensation"] .impact-story .compensation-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    grid-template-rows: auto 104px;
    gap: 38px;
  }
  body[data-impact-story="compensation"] .impact-story .compensation-hero h1 {
    font-size: clamp(48px, 6vw, 58px);
    max-width: 470px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .compensation-hero
    .hero-statement {
    max-width: 470px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .compensation-hero
    .hero-visual {
    width: 100%;
    aspect-ratio: 4/3;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .compensation-hero
    .hero-facts {
    grid-column: 1/-1;
  }
  body[data-impact-story="compensation"] .impact-story .context-feature {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    gap: 42px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .context-primary
    p:first-of-type {
    font-size: 28px;
  }
  body[data-impact-story="compensation"] .impact-story .context-visual,
  body[data-impact-story="compensation"] .impact-story .context-visual img {
    min-height: 330px;
  }
  body[data-impact-story="compensation"] .impact-story .context-detail {
    grid-template-columns: 0.78fr 1.22fr;
    gap: 42px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-editorial {
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
    gap: 44px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .challenge-copy
    .challenge-lead {
    font-size: 24px;
  }
}

@media (max-width: 760px) {
  body[data-impact-story="compensation"] .impact-story .context-feature,
  body[data-impact-story="compensation"] .impact-story .context-detail,
  body[data-impact-story="compensation"] .impact-story .challenge-editorial {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"] .impact-story .context-feature {
    grid-template-areas: "primary" "visual" "structure";
    margin-top: 58px;
    gap: 38px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .context-primary
    p:first-of-type {
    font-size: 28px;
  }
  body[data-impact-story="compensation"] .impact-story .context-structure {
    font-size: 15px;
  }
  body[data-impact-story="compensation"] .impact-story .context-visual,
  body[data-impact-story="compensation"] .impact-story .context-visual img {
    min-height: 0;
    aspect-ratio: 4/3;
  }
  body[data-impact-story="compensation"] .impact-story .context-detail {
    margin-top: 34px;
    padding: 28px 0;
    gap: 22px;
  }
  body[data-impact-story="compensation"] .impact-story .context-detail p {
    font-size: 15px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-editorial {
    margin-top: 52px;
    gap: 38px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .challenge-visual
    figcaption {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .challenge-copy
    .challenge-lead {
    font-size: 23px;
  }
  body[data-impact-story="compensation"] .impact-story .challenge-copy p {
    font-size: 15px;
  }
}

/* Diagram-led system summary and compact approval workflow. */
body[data-impact-story="compensation"] .impact-story .system-summary {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}
body[data-impact-story="compensation"] .impact-story .system-summary article {
  justify-content: flex-start;
  gap: 30px;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-summary
  .system-map-card {
  padding-right: 42px;
}
body[data-impact-story="compensation"] .impact-story .system-map-card > p {
  max-width: 650px;
  font-size: 19px;
}
body[data-impact-story="compensation"] .impact-story .system-map-card figure {
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #061528;
  border: 1px solid rgba(113, 182, 169, 0.25);
}
body[data-impact-story="compensation"]
  .impact-story
  .system-map-card
  figure
  img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body[data-impact-story="compensation"] .impact-story .system-map-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
body[data-impact-story="compensation"] .impact-story .system-map-stats b {
  padding: 18px 16px 16px 0;
  color: #fff;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
body[data-impact-story="compensation"] .impact-story .system-map-stats b + b {
  padding-left: 16px;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-map-stats
  b:last-child {
  border-right: 0;
}
body[data-impact-story="compensation"] .impact-story .system-map-stats small {
  display: block;
  margin-top: 5px;
  color: #8fa3b6;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure {
  aspect-ratio: 16/9;
  background: #07182d;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
body[data-impact-story="compensation"] .impact-story .workflow-layout {
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body[data-impact-story="compensation"] .impact-story .workflow-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-photo
  figcaption {
  position: static;
  width: 100%;
  padding: 25px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-photo
  figcaption
  strong {
  font-size: 28px;
  line-height: 1.1;
  white-space: normal;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-photo
  figcaption
  span {
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}
body[data-impact-story="compensation"] .impact-story .workflow-steps {
  padding: 0;
  border-top: 1px solid var(--ink);
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-steps
  .workflow-intro {
  padding: 26px 0;
  color: var(--ink);
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
body[data-impact-story="compensation"] .impact-story .workflow-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-impact-story="compensation"] .impact-story .workflow-steps li {
  padding: 22px 0;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  border-top: 1px solid var(--line);
}
body[data-impact-story="compensation"] .impact-story .workflow-steps li > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
body[data-impact-story="compensation"] .impact-story .workflow-steps li strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
}
body[data-impact-story="compensation"] .impact-story .workflow-steps li p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
body[data-impact-story="compensation"]
  .impact-story
  .workflow-steps
  .workflow-note {
  margin: 0;
  padding: 22px 0;
  color: #d0d5de;
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="compensation"] .impact-story .system-summary {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  }
  body[data-impact-story="compensation"] .impact-story .system-map-card > p {
    font-size: 17px;
  }
  body[data-impact-story="compensation"] .impact-story .system-map-stats b {
    font-size: 22px;
  }
  body[data-impact-story="compensation"] .impact-story .workflow-layout {
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
    gap: 44px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .workflow-photo
    figcaption
    strong {
    font-size: 24px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .workflow-steps
    .workflow-intro {
    font-size: 22px;
  }
}

@media (max-width: 760px) {
  body[data-impact-story="compensation"] .impact-story .system-summary {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-summary
    .system-map-card {
    padding-right: 0;
  }
  body[data-impact-story="compensation"] .impact-story .system-map-stats b {
    font-size: 23px;
  }
  body[data-impact-story="compensation"] .impact-story .workflow-layout {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .workflow-photo
    figcaption {
    padding: 22px 0;
  }
}

/* Balance the connected-model narrative and align the product workspace. */
body[data-impact-story="compensation"]
  .impact-story
  .system-summary
  .system-map-card
  figure {
  width: 92%;
  max-width: 520px;
  align-self: flex-start;
}
body[data-impact-story="compensation"]
  .impact-story
  .system-summary
  .traceable-paths {
  height: 100%;
  padding-bottom: 32px;
}
body[data-impact-story="compensation"] .impact-story .traceable-paths > p {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.58;
}
body[data-impact-story="compensation"]
  .impact-story
  .traceable-paths
  .system-map-stats {
  width: 100%;
  margin-top: auto;
}
body[data-impact-story="compensation"]
  .impact-story
  .traceable-paths
  .system-map-stats
  b {
  padding-top: 16px;
  font-size: 24px;
}
body[data-impact-story="compensation"] .impact-story .product-story {
  margin-top: 88px;
  align-items: start;
}
body[data-impact-story="compensation"] .impact-story .single-frame {
  color: #d7e3ee;
  background: #07182d;
  border: 1px solid rgba(113, 182, 169, 0.3);
  border-radius: 0;
}
body[data-impact-story="compensation"] .impact-story .single-frame .frame-head {
  height: 54px;
  padding: 0 24px;
  color: #d7e3ee;
  background: #0c223c;
  border-bottom: 1px solid rgba(113, 182, 169, 0.28);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure {
  padding: 20px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  background: #07182d;
}
body[data-impact-story="compensation"] .impact-story .single-frame figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}

@media (min-width: 761px) and (max-width: 1050px) {
  body[data-impact-story="compensation"]
    .impact-story
    .system-summary
    .system-map-card
    figure {
    width: 88%;
  }
  body[data-impact-story="compensation"] .impact-story .traceable-paths > p {
    font-size: 16px;
    line-height: 1.55;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats {
    grid-template-columns: 1fr;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats
    b,
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats
    b
    + b {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats
    b:last-child {
    border-bottom: 0;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats
    small {
    display: inline;
    margin: 0 0 0 8px;
  }
  body[data-impact-story="compensation"] .impact-story .single-frame figure {
    padding: 16px 18px 20px;
  }
}

@media (max-width: 760px) {
  body[data-impact-story="compensation"]
    .impact-story
    .system-summary
    .system-map-card
    figure {
    width: 100%;
    max-width: none;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .system-summary
    .traceable-paths {
    height: auto;
    padding-bottom: 28px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .traceable-paths
    .system-map-stats {
    margin-top: 8px;
  }
  body[data-impact-story="compensation"] .impact-story .product-story {
    margin-top: 68px;
  }
  body[data-impact-story="compensation"]
    .impact-story
    .single-frame
    .frame-head {
    padding: 0 16px;
  }
  body[data-impact-story="compensation"] .impact-story .single-frame figure {
    min-width: 0;
    padding: 14px;
    aspect-ratio: 16/10;
  }
}

body[data-impact-story="compensation"] .impact-story {
  --ink: #e7e9ef;
  --muted: #a3acb9;
  --line: #303744;
  --paper: #0b1017;
  --surface: #121923;
  --soft: #111821;
  --soft-purple: #171c25;
  --accent: #f3f4f6;
  --dark: #080c12;
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.6;
}

/* @block practices — bilingual impact collection and responsive story shell */
.impact-collection {
  padding: 64px 0 120px;
}
.impact-collection-heading {
  max-width: 900px;
  margin-bottom: 48px;
}
.impact-eyebrow {
  margin: 0 0 20px;
  color: #f3f4f6;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.impact-collection-heading h2 {
  margin: 0;
  color: #e9e8ef;
  font-size: clamp(34px, 4.5vw, 64px);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 42px 24px;
}
.impact-card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #11151d;
  border: 1px solid #252b36;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}
.impact-card--1,
.impact-card--4 {
  grid-column: span 7;
}
.impact-card--2,
.impact-card--3 {
  grid-column: span 5;
}
.impact-card:hover {
  transform: translateY(-5px);
  border-color: #707782;
}
.impact-card:focus-within {
  border-color: #e5e7eb;
}
.impact-card a:focus-visible,
.impact-card button:focus-visible {
  outline: 3px solid #f3f4f6;
  outline-offset: 4px;
}
.impact-card-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #171c25;
  overflow: hidden;
}
.impact-card--2 .impact-card-media,
.impact-card--3 .impact-card-media {
  aspect-ratio: 5/4;
}
.impact-card-media > a {
  display: block;
  width: 100%;
  height: 100%;
}
.impact-card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition:
    opacity 0.5s ease,
    transform 0.6s ease;
}
.impact-card:hover .impact-card-media > a img {
  transform: scale(1.035);
}
.impact-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.impact-video-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.impact-card-media:hover .impact-video-cover,
.impact-card-media:focus-within .impact-video-cover,
.impact-card-media.is-preview .impact-video-cover {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.48) 30%,
    rgba(0, 0, 0, 0.25) 65%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.48) 30%,
    rgba(0, 0, 0, 0.25) 65%,
    transparent 100%
  );
}
.impact-card-media.is-playing .impact-video-cover {
  opacity: 0;
  visibility: hidden;
}
.impact-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #0b1017b3;
  color: #f3f4f6;
  cursor: pointer;
  font-size: 22px;
  padding: 0 0 0 4px;
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.impact-card-media:hover .impact-play,
.impact-card-media:focus-within .impact-play,
.impact-card-media.is-preview .impact-play {
  opacity: 1;
  pointer-events: auto;
}
.impact-play[hidden],
.impact-video-error[hidden] {
  display: none;
}
.impact-video-error {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  z-index: 3;
  padding: 10px;
  background: #151a22e8;
  color: #e5e7eb;
  font-size: 13px;
}
.impact-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 30px 30px;
  min-height: 325px;
}
.impact-card-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9da5b2;
}
.impact-card-meta strong {
  color: #f3f4f6;
  text-align: right;
}
.impact-card-body h3 {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: clamp(26px, 2.7vw, 43px);
  line-height: 1.13;
  font-weight: 550;
  letter-spacing: -0.035em;
  color: #e9e8ee;
  text-wrap: balance;
}
.impact-card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.impact-card-body > p {
  margin: 0 0 10px;
  color: #a4abb8;
  font-size: 15px;
  line-height: 1.7;
  max-width: 60ch;
}
.impact-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: auto;
  padding: 13px 16px;
  background: #f3f4f6;
  color: #11151d;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  min-width: 175px;
  transition: background 0.2s;
}
.impact-card-action:hover {
  background: #d1d5db;
}
.impact-story-page {
  background: #0b1017;
}
.impact-story {
  padding-top: 100px;
}
.impact-story .story-nav {
  width: min(1420px, calc(100% - 96px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  border-bottom: 1px solid #303744;
  color: #adb4c0;
  font-size: 12px;
}
.impact-story .story-nav a:first-child {
  margin-right: auto;
  color: #f3f4f6;
}
.impact-story main {
  min-width: 0;
}
.water-story-tabs {
  position: sticky;
  top: 104px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(1420px, calc(100% - 96px));
  margin: 24px auto 0;
  padding: 6px;
  border: 1px solid #303744;
  border-radius: 12px;
  background: #0b1017;
}
body[data-water-management] .impact-story .water-story-tabs button {
  min-width: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #a3acb9;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
body[data-water-management]
  .impact-story
  .water-story-tabs
  button[aria-selected="true"] {
  background: #f3f4f6;
  color: #11151d;
}
body[data-water-management]
  .impact-story
  .water-story-tabs
  button:focus-visible {
  outline: 2px solid #f3f4f6;
  outline-offset: 2px;
}
.water-story-panel[hidden] {
  display: none !important;
}
/* Arabic reading order follows the site locale; graph coordinates stay stable. */
html[dir="rtl"] .impact-story {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: normal;
}
html[dir="rtl"] .impact-story .story-nav a:first-child {
  margin-right: 0;
  margin-left: auto;
}
html[dir="rtl"] body.impact-story-page .impact-story main .hero h1 {
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}
html[dir="rtl"] .impact-story :is(h2, h3, .eyebrow) {
  letter-spacing: normal;
}
html[dir="rtl"] .impact-story :is(.network-stage, .network-canvas) {
  direction: ltr;
}
html[dir="rtl"] .impact-story :is(.network-detail, .query-summary) {
  text-align: start;
}
html[dir="rtl"] .impact-story .node-detail {
  direction: rtl;
  text-align: start;
}
html[dir="rtl"] .impact-story :is(.network-hud strong, .network-reset) {
  letter-spacing: normal;
}
.impact-card-meta > *,
.water-story-tabs button {
  overflow-wrap: anywhere;
}
body[data-impact-story="compensation"] .impact-story .system-summary article {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-impact-story="compensation"] .impact-story .system-map-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[dir="rtl"] .impact-story .workflow-photo figcaption {
  flex-wrap: wrap;
}
html[dir="rtl"] .impact-story .workflow-photo figcaption > span {
  min-width: 0;
  flex: 1 1 140px;
}
@media (max-width: 760px) {
  /* Reserve a control row above the diagram, including long locale labels. */
  body[data-impact-story="provincial-intelligence"]
    .impact-story
    .ontology-lab
    .network-stage {
    height: 560px;
    min-height: 560px;
  }
  .water-story-tabs {
    top: 76px;
    width: calc(100% - 40px);
    margin-top: 16px;
  }
  body[data-water-management] .impact-story .water-story-tabs button {
    padding: 12px 8px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-water-management] .impact-story .water-story-tabs button {
    transition: none;
  }
}
.impact-story main img {
  max-width: 100%;
}
.impact-story main p {
  overflow-wrap: anywhere;
}
.impact-story main :is(h1, h2, h3) {
  overflow-wrap: anywhere;
}
.impact-story main section {
  scroll-margin-top: 110px;
}
.impact-story main .metric {
  min-width: 0;
}
body.impact-story-page .impact-story .view-switch button[aria-selected="true"] {
  color: #11151d;
}
.impact-story main .metric p {
  white-space: normal;
  flex-wrap: wrap;
}
.impact-story main .metric p strong {
  overflow-wrap: anywhere;
}
.impact-story main .hero {
  min-height: auto;
}
body.impact-story-page .impact-story main .hero h1 {
  display: block;
  padding: 0;
  font-size: clamp(48px, 5.6vw, 86px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.05em !important;
}
body.impact-story-page .impact-story main .hero h1 em {
  display: block;
  font-size: inherit;
}
body.impact-story-page .impact-story main .hero-support {
  color: #a3acb9;
}
.impact-story .enter,
.impact-story .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.impact-story .impact-existing-demo {
  width: min(1400px, calc(100% - 96px));
  margin: 40px auto 100px;
}
.impact-story .impact-existing-demo iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 1px solid #303744;
}
.impact-story .impact-existing-copy {
  width: min(1000px, calc(100% - 96px));
  margin: 64px auto;
}
.impact-story .impact-existing-copy h1 {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.12;
  color: #e9e8ef;
}
.impact-story .impact-existing-copy p {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.8;
  color: #a4abb8;
}
@media (max-width: 1050px) and (min-width: 761px) {
  body.impact-story-page .impact-story main .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
  body.impact-story-page .impact-story main .hero-facts {
    grid-column: 1/-1;
  }
  body.impact-story-page .impact-story main .hero h1 {
    font-size: clamp(44px, 6vw, 66px);
  }
  body.impact-story-page .impact-story main .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .impact-collection {
    padding: 46px 0 72px;
  }
  .impact-collection-heading {
    margin-bottom: 32px;
  }
  .impact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .impact-card,
  .impact-card--1,
  .impact-card--2,
  .impact-card--3,
  .impact-card--4 {
    grid-column: 1;
  }
  .impact-card .impact-card-media {
    aspect-ratio: 4/3;
  }
  .impact-card-body {
    padding: 24px 22px;
    min-height: 0;
  }
  .impact-card-body h3 {
    font-size: clamp(28px, 7.5vw, 42px);
  }
  .impact-card-meta {
    font-size: 10px;
    gap: 12px;
  }
  .impact-card-meta > * {
    max-width: 55%;
  }
  .impact-card-action {
    width: 100%;
    margin-top: 8px;
  }
  .impact-play {
    width: 56px;
    height: 56px;
  }
  .impact-story {
    padding-top: 70px;
  }
  .impact-story .story-nav {
    width: calc(100% - 40px);
    gap: 12px 20px;
    padding: 20px 0;
  }
  .impact-story .story-nav a:first-child {
    flex-basis: 100%;
  }
  body.impact-story-page .impact-story main .hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: calc(100% - 40px);
    padding: 48px 0;
  }
  body.impact-story-page .impact-story main .hero > * {
    width: 100%;
    min-width: 0;
  }
  body.impact-story-page .impact-story main .hero h1 {
    font-size: clamp(40px, 10vw, 64px) !important;
  }
  body.impact-story-page .impact-story main .hero-visual {
    min-height: 0;
    height: 420px;
  }
  body.impact-story-page .impact-story main .hero-visual img {
    height: 100%;
  }
  body.impact-story-page .impact-story main .hero-facts {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  body.impact-story-page .impact-story main .hero-facts > div {
    min-width: 0;
    padding: 18px 10px;
    border-right: 0;
    border-inline-end: 1px solid var(--line);
  }
  body.impact-story-page .impact-story main .hero-facts > div:last-child {
    border-inline-end: 0;
  }
  body.impact-story-page .impact-story main .hero-facts strong {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  body.impact-story-page .impact-story main .hero-facts span {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: normal;
    overflow-wrap: anywhere;
  }
  body.impact-story-page .impact-story main .section {
    padding: 72px 20px;
  }
  body.impact-story-page .impact-story main .metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  body.impact-story-page .impact-story main .metric-wide {
    grid-column: auto;
  }
  body.impact-story-page .impact-story main :is(h2, h3) {
    max-width: 100%;
  }
  body.impact-story-page .impact-story main .product-frame figure {
    min-width: 0;
  }
  body.impact-story-page .impact-story main .product-frame {
    overflow-x: auto;
  }
  .impact-story .impact-existing-demo,
  .impact-story .impact-existing-copy {
    width: calc(100% - 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .impact-card,
  .impact-card-media img {
    transition: none;
  }
}