/* ==========================================================================
   KyperX Energy & Industry — shared design system
   Desktop review build. Responsive rules are intentionally deferred.
   ========================================================================== */

:root {
  /* Palette (spec A5) */
  --graphite: #0b1118;
  --graphite-2: #0f1720;
  --midnight: #142334;
  --midnight-2: #1a2c41;
  --white: #f4f6f7;
  --paper: #fbfcfc;
  --steel: #8a9aa8;
  --steel-2: #5d6d7c;
  --cyan: #46bfe8;
  --violet: #aa98ef;
  --amber: #e6b76e;

  /* Text */
  --ink: #0b1118;
  --ink-2: #3a4855;
  --ink-3: #5f6e7b;
  --on-dark: #eef2f5;
  --on-dark-2: #c5cfd8;
  --on-dark-3: #97a6b3;

  /* Lines */
  --rule-light: rgba(11, 17, 24, 0.12);
  --rule-dark: rgba(238, 242, 245, 0.12);

  /* Type */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --page-max: 1520px;
  --gutter: 56px;
  --header-h: 76px;
  --radius: 4px;
  --radius-lg: 10px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--graphite);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--white); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius);
  text-decoration: none; font-weight: 500;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type scale ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7;
}
.theme-dark .eyebrow { color: var(--on-dark-3); }

.display {
  font-size: clamp(52px, 5.1vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 500;
}
.h2 {
  font-size: clamp(36px, 3.3vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.h3 {
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.body { color: var(--ink-2); max-width: 66ch; }
.theme-dark .lede, .theme-dark .body { color: var(--on-dark-2); }
.mono { font-family: var(--font-mono); }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 22px 0 24px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--primary:hover { --btn-bg: var(--btn-primary-hover); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgb(var(--on-dark-rgb) / .28); }
.btn--ghost:hover { --btn-bd: rgb(var(--on-dark-rgb) / .7); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--midnight); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgb(var(--ink-rgb) / .25); }
.btn--outline:hover { --btn-bd: var(--ink); }
.btn--sm { height: 42px; padding: 0 16px 0 18px; font-size: 14px; }

.arrow { width: 16px; height: 16px; flex: none; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  border-color: rgb(var(--ink-rgb) / .25);
  transition: border-color .25s var(--ease-out), gap .3s var(--ease-out);
}
.text-link:hover { border-color: var(--ink); gap: 12px; }
.theme-dark .text-link { color: var(--on-dark); border-color: rgb(var(--on-dark-rgb) / .3); }
.theme-dark .text-link:hover { border-color: var(--on-dark); }

/* ---------- Maturity / enquiry labels (spec A3) ---------- */
.label-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--rule-light);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.label-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.theme-dark .label-chip { border-color: var(--rule-dark); color: var(--on-dark-2); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  color: var(--on-dark);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgb(var(--ink-rgb) / 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--rule-dark);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--on-dark);
}
.brand__word {
  font-size: 22px; font-weight: 600; letter-spacing: -0.03em;
}
.brand__word span { color: var(--cyan); }
.brand__divider { width: 1px; height: 18px; background: rgb(var(--on-dark-rgb) / .25); }
.brand__desc {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-2);
}

.primary-nav ul { display: flex; gap: 6px; }
.primary-nav a {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 14px;
  font-size: 14.5px; font-weight: 450;
  color: var(--on-dark-2); text-decoration: none;
  border-radius: var(--radius);
  transition: color .2s, background .2s;
}
.primary-nav a:hover { color: var(--on-dark); background: rgb(var(--on-dark-rgb) / .06); }
.primary-nav a[aria-current="page"] { color: var(--on-dark); }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding: 112px 0; }
.section--tight { padding: 120px 0; }
.theme-dark { background: var(--graphite); color: var(--on-dark); }
.theme-midnight { background: var(--midnight); color: var(--on-dark); }
.theme-light { background: var(--white); color: var(--ink); }
.theme-paper { background: var(--paper); color: var(--ink); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px 80px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .eyebrow { grid-column: 1 / -1; margin-bottom: -24px; }
.section-head .h2 { max-width: 16ch; }

/* Reveal on scroll (progressive enhancement) */
/* Text stays readable; only position eases in. */
.js .reveal { transform: translateY(14px); transition: transform .8s var(--ease-out); }
.js .reveal.is-visible { transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--graphite);
  color: var(--on-dark-2);
  padding: 88px 0 40px;
  border-top: 1px solid var(--rule-dark);
  font-size: 15px;
}
.footer-top {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 80px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule-dark);
}
.footer-statement {
  margin-top: 28px;
  color: var(--on-dark-2);
  max-width: 40ch;
  line-height: 1.6;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
.footer-nav h3 {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 18px;
}
.footer-nav li + li { margin-top: 10px; }
.footer-nav a {
  color: var(--on-dark-2); text-decoration: none;
  transition: color .2s;
}
.footer-nav a:hover { color: var(--on-dark); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  padding-top: 32px;
  font-size: 13.5px; color: var(--on-dark-3);
}
.footer-bottom address { font-style: normal; line-height: 1.7; }
.footer-bottom a { color: var(--on-dark-2); text-decoration: none; }
.footer-bottom a:hover { color: var(--on-dark); }
.footer-legal { display: flex; gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   P01 — Energy home
   ========================================================================== */

/* ---------- Cinematic stage (one canvas shared by hero + explorer) ---------- */
.cinema { position: relative; }

.stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 720px;
  overflow: hidden;
  background: var(--graphite);
}
.stage__poster, .stage__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.stage__canvas { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.stage.is-live .stage__canvas { opacity: 1; }
.stage.is-live .stage__poster { opacity: 0; transition: opacity 1.2s .2s var(--ease-out); }

.stage__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--ink-rgb) / .96) 0%, rgb(var(--ink-rgb) / .9) 32%, rgb(var(--ink-rgb) / .45) 48%, rgb(var(--ink-rgb) / 0) 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .7) 0%, rgb(var(--ink-rgb) / 0) 18%, rgb(var(--ink-rgb) / 0) 78%, rgb(var(--ink-rgb) / .85) 100%);
  transition: opacity .9s var(--ease-out);
}
.cinema[data-mode="explore"] .stage__scrim {
  background:
    linear-gradient(90deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .55) 28%, rgb(var(--ink-rgb) / 0) 44%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .6) 0%, rgb(var(--ink-rgb) / 0) 16%, rgb(var(--ink-rgb) / 0) 82%, rgb(var(--ink-rgb) / .8) 100%);
}

.stage__footer {
  position: absolute; left: 0; right: 0; bottom: 28px;
  display: flex; justify-content: flex-end; align-items: center; gap: 28px;
  z-index: 3;
  transition: opacity .5s var(--ease-out);
}
.cinema[data-mode="explore"] .stage__tools .tool-btn { visibility: hidden; }

.concept-note {
  padding-right: 28px; border-right: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--on-dark-3);
}
.stage__tools { display: flex; align-items: center; gap: 28px; }
.flow-legend { display: flex; gap: 22px; }
.flow-legend li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-2);
}
.flow-legend svg { width: 28px; height: 6px; }

.tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: rgb(var(--on-dark-rgb) / .04);
  border: 1px solid rgb(var(--on-dark-rgb) / .16);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.tool-btn:hover { color: var(--on-dark); border-color: rgb(var(--on-dark-rgb) / .4); }
.tool-btn[aria-pressed="true"] { color: var(--on-dark); border-color: rgb(var(--cyan-rgb) / .6); background: rgb(var(--cyan-rgb) / .08); }
.tool-btn svg { width: 12px; height: 12px; }
.tool-btn .i-play { display: none; }
.tool-btn[data-action="pause"][aria-pressed="true"] .i-play { display: block; }
.tool-btn[data-action="pause"][aria-pressed="true"] .i-pause { display: none; }
.tool-btn[data-action="pause"][aria-pressed="true"] { border-color: rgb(var(--on-dark-rgb) / .4); background: rgb(var(--on-dark-rgb) / .06); }

/* ---------- Content layer over the stage ---------- */
.cinema__content {
  position: relative; z-index: 2;
  margin-top: -100vh;
  pointer-events: none;
}
.cinema__content a, .cinema__content button { pointer-events: auto; }

/* Hero */
.hero {
  position: relative;
  min-height: max(100vh, 720px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
}
.hero__panel { max-width: 640px; margin-top: -20px; }
.hero__eyebrow { color: var(--on-dark-2); margin-bottom: 32px; }
.hero__title { color: var(--on-dark-strong); max-width: 13ch; }
.hero__lede { margin-top: 32px; color: var(--on-dark-2); max-width: 56ch; }
.hero__actions { display: flex; gap: 12px; margin-top: 44px; }



/* Explorer */
.explorer {
  position: relative;
  min-height: max(110vh, 820px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 100px;
}
.explorer__panel {
  width: 470px;
}
.explorer__title { color: var(--on-dark-strong); max-width: 14ch; font-size: 44px; }
.explorer__intro { margin-top: 20px; color: var(--on-dark-2); font-size: 16px; max-width: 38ch; }

.system-list { margin-top: 32px; border-top: 1px solid var(--rule-dark); }
.system-list li { border-bottom: 1px solid var(--rule-dark); }
.system-list button {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-areas: "num nm" "num ds";
  column-gap: 8px;
  width: 100%;
  padding: 12px 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--on-dark-2);
  position: relative;
  transition: color .25s, padding .35s var(--ease-out);
}
.system-list .num { grid-area: num; font-family: var(--font-mono); font-size: 11.5px; padding-top: 4px; color: var(--on-dark-3); }
.system-list .nm { grid-area: nm; font-size: 17px; font-weight: 500; color: var(--on-dark); letter-spacing: -0.01em; }
.system-list .ds { grid-area: ds; font-size: 14px; color: var(--on-dark-3); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease-out), opacity .3s, margin .4s; }
.system-list button::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--cyan); opacity: 0; transform: scale(.4);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.system-list button:hover .ds, .system-list button[aria-pressed="true"] .ds { max-height: 44px; opacity: 1; margin-top: 4px; }
.system-list button[aria-pressed="true"]::before { opacity: 1; transform: none; }
.system-list button[aria-pressed="true"] .num { color: var(--cyan); }

.explorer__controls { display: flex; gap: 6px; margin-top: 28px; }
.explorer__controls .tool-btn { padding: 0 10px; letter-spacing: .04em; font-size: 11px; }

/* Selected system card (stable panel, never inside the canvas) */
.system-card {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); bottom: 92px; z-index: 5;
  width: 480px;
  padding: 26px 28px 28px;
  background: rgb(var(--glass-rgb) / 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(var(--on-dark-rgb) / .12);
  border-radius: var(--radius-lg);
  color: var(--on-dark);
  box-shadow: 0 30px 80px -20px rgb(var(--shadow-rgb) / .6);
  animation: card-in .5s var(--ease-out);
}
.system-card[hidden], .cinema[data-mode="hero"] .system-card { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
.system-card__tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin: 20px 0 18px; padding: 3px;
  background: rgb(var(--on-dark-rgb) / .05); border-radius: 6px;
}
.system-card__tabs button {
  height: 32px; padding: 0 6px; white-space: nowrap;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  font-size: 12px; color: var(--on-dark-3);
  transition: color .2s, background .2s;
}
.system-card__tabs button:hover { color: var(--on-dark); }
.system-card__tabs button[aria-selected="true"] { background: rgb(var(--on-dark-rgb) / .1); color: var(--on-dark); }
.system-card__kicker { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.system-card__title { color: var(--on-dark-strong); }
.system-card__content { margin-top: 0; font-size: 15px; color: var(--on-dark-2); line-height: 1.6; min-height: 96px; }
.system-card__content ul { margin-top: 10px; }
.system-card__content li { position: relative; padding-left: 16px; }
.system-card__content li + li { margin-top: 4px; }
.system-card__content li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--steel); }
.system-card__content .label-chip { margin-top: 12px; }
.system-card__content dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 12px; }
.system-card__content dd { margin: 4px 0 0; }
.system-card__actions { display: flex; gap: 8px; margin-top: 24px; }
.system-card__close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--on-dark-3);
}
.system-card__close:hover { color: var(--on-dark); background: rgb(var(--on-dark-rgb) / .08); }
.system-card__close svg { width: 14px; height: 14px; }

/* Hotspots (projected from the 3D anchors) */
.hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hotspot {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--on-dark);
  pointer-events: auto;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  will-change: transform;
}
.cinema[data-mode="explore"] .hotspot.is-onscreen { opacity: 1; }
.hotspot__dot {
  position: relative; width: 14px; height: 14px; flex: none;
  margin-left: -7px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / .6);
  border: 1.5px solid var(--on-dark);
  transition: transform .3s var(--ease-out), background .3s, border-color .3s;
}
.hotspot__label {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 11px;
  background: rgb(var(--ink-rgb) / .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(var(--on-dark-rgb) / .16);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .3s, background .3s, opacity .3s;
}
.hotspot__label b { font-weight: 500; color: var(--on-dark-3); }
.hotspots.no-labels .hotspot__label { opacity: 0; pointer-events: none; }
.hotspot:hover .hotspot__dot, .hotspot:focus-visible .hotspot__dot { transform: scale(1.2); }
.hotspot:hover .hotspot__label { border-color: rgb(var(--on-dark-rgb) / .45); }
.hotspot[aria-pressed="true"] .hotspot__dot { background: var(--cyan); border-color: var(--on-dark-strong); }
.hotspot[aria-pressed="true"] .hotspot__label { border-color: rgb(var(--cyan-rgb) / .7); background: rgb(var(--glass-hi-rgb) / .85); }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hotspot__label { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Requirements (commercial) ---------- */
.requirements .section-head { margin-bottom: 48px; }
.section-head--single { grid-template-columns: 1fr; }
.requirements .h2 { max-width: 18ch; }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.offer {
  --accent: var(--cyan);
  position: relative;
  display: flex; flex-direction: column;
  padding: 40px 36px 36px;
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.offer[data-flow="violet"] { --accent: var(--violet); }
.offer::before {
  content: ""; position: absolute; left: 36px; right: 36px; top: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(.12); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.offer:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -30px rgb(var(--ink-rgb) / .28); border-color: rgb(var(--ink-rgb) / .18); }
.offer:hover::before { transform: scaleX(1); }
.offer__art { color: var(--ink); height: 72px; margin-bottom: 28px; }
.offer__art svg { height: 72px; width: auto; }
.offer .h3 { margin-bottom: 16px; }
.offer p { color: var(--ink-2); font-size: 16px; line-height: 1.62; }
.supply { margin: 24px 0 28px; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }
p.supply__label, .offer p.supply__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.offer p.supply__items { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.supply--primary { background: var(--cyan-wash); }
.offer .supply--primary p.supply__label { font-size: 12.5px; }
.offer__actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.offer--feature { border-color: rgb(var(--cyan-rgb) / .45); box-shadow: 0 24px 60px -36px rgb(var(--midnight-rgb) / .35); }
.offer--feature::before { transform: scaleX(1); }
.offer-note { margin-top: 24px; font-size: 14px; color: var(--ink-3); max-width: 90ch; }

/* ---------- Technical approach ---------- */
.approach { overflow: hidden; }
.approach .section-head .h2 { color: var(--on-dark-strong); }
.approach-diagram { margin: 0; display: grid; grid-template-columns: 1fr 340px; gap: 0; align-items: stretch; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: s; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px;
  background: linear-gradient(90deg, rgb(var(--cyan-rgb) / .0), rgb(var(--cyan-rgb) / .7) 15%, rgb(var(--cyan-rgb) / .7) 85%, rgb(var(--cyan-rgb) / .9));
}
.steps li {
  position: relative;
  padding: 64px 24px 32px 0;
  font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--on-dark);
  letter-spacing: -0.01em;
}
.steps li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--midnight); border: 1.5px solid var(--cyan);
}
.steps li .mono { display: block; font-size: 11.5px; color: var(--on-dark-3); margin-bottom: 10px; font-weight: 400; letter-spacing: .08em; }
.decision {
  padding: 32px 32px 32px;
  border: 1px solid rgb(var(--cyan-rgb) / .35);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(var(--cyan-rgb) / .08), rgb(var(--cyan-rgb) / .02));
}
.decision__label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.decision li { position: relative; padding-left: 22px; color: var(--on-dark); font-size: 16px; line-height: 1.45; }
.decision li + li { margin-top: 14px; }
.decision li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--cyan); }

/* ---------- R&D ---------- */
.research__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.intro-band { padding: 72px 0; }
.intro-band .lede { max-width: 62ch; color: var(--on-dark-2); }
.intro-band .lede + .lede { margin-top: 20px; }
.research__grid--solo { grid-template-columns: minmax(0, 760px); }
.research__intro .h2 { max-width: 13ch; margin-bottom: 32px; }
.research__intro .body { margin-bottom: 44px; font-size: 18px; }
.topic-index { border-top: 1px solid var(--rule-light); margin-top: 8px; }
.topic-index li {
  display: grid; grid-template-columns: 72px 1fr;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-light);
}
.topic-index h3 { font-size: 21px; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); line-height: 1.3; }
.topic-index p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.topic-index p b { font-weight: 500; color: var(--ink); }
.topic-index .mono { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }

/* ---------- Pathway ---------- */
.pathway { background: radial-gradient(120% 80% at 80% 0%, var(--glow) 0%, var(--graphite) 60%); }
.pathway .section-head .h2 { color: var(--on-dark-strong); max-width: 15ch; }
.pathway__meta { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.flow-diagram {
  margin: 0;
  padding: 48px 40px 32px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-lg);
  background: rgb(var(--midnight-rgb) / .35);
}
.flow-diagram svg { width: 100%; height: auto; overflow: visible; }
.fd-node rect { fill: rgb(var(--ink-rgb) / .7); stroke: rgb(var(--amber-rgb) / .5); stroke-width: 1; }
.fd-node--energy rect { stroke: rgb(var(--cyan-rgb) / .5); }
.fd-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; fill: var(--on-dark-3); }
.fd-t { font-family: var(--font-sans); font-size: 17px; font-weight: 500; fill: var(--on-dark); letter-spacing: -0.01em; }
.fd-inlet { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; fill: var(--steel); text-transform: uppercase; }
.fd-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.fd-tag--e { fill: var(--cyan); } .fd-tag--h { fill: var(--violet); } .fd-tag--m { fill: var(--amber); }
.fd-path { fill: none; stroke-width: 2; }
.fd-path--e { stroke: var(--cyan); }
.fd-path--h { stroke: var(--violet); stroke-dasharray: 8 6; animation: dash 1.6s linear infinite; }
.fd-path--m { stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 7; animation: dash-dot 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes dash-dot { to { stroke-dashoffset: -14.2; } }
.flow-diagram__note { margin-top: 20px; font-family: var(--font-mono); font-size: 11.5px; color: var(--on-dark-3); }
@media (prefers-reduced-motion: reduce) { .fd-path { animation: none !important; } }

/* ---------- Closing (plain, high contrast) ---------- */
.closing { padding: 112px 0; border-top: 1px solid var(--rule-light); }
.closing__inner { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: end; }
.closing__title { font-size: clamp(48px, 4.6vw, 72px); max-width: 11ch; }
.closing .lede { color: var(--ink-2); }
.closing__actions { display: flex; gap: 12px; margin-top: 36px; }

/* Collaboration routes */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 72px; }
.routes a {
  display: flex; flex-direction: column; height: 100%;
  padding: 28px 26px 26px;
  background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  transition: border-color .3s var(--ease-out), transform .4s var(--ease-out);
}
.routes a:hover { border-color: rgb(var(--ink-rgb) / .35); transform: translateY(-3px); }
.routes__k { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 500; line-height: 1.5; }
.routes__t { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); flex: 1; }
.routes__cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }

/* Connection labels for the selected system */
.flow-tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.flow-tag {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 10px;
  background: rgb(var(--ink-rgb) / .82);
  border: 1px solid rgb(var(--cyan-rgb) / .55);
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark); white-space: nowrap;
}
.flow-tag::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--cyan); }
.flow-tag[data-kind="hydrogen"] { border-color: rgb(var(--violet-rgb) / .6); }
.flow-tag[data-kind="hydrogen"]::before { border-top: 2px dashed var(--violet); }
.flow-tag[data-kind="material"] { border-color: rgb(var(--amber-rgb) / .6); }
.flow-tag[data-kind="material"]::before { border-top: 2px dotted var(--amber); }
.flow-tag[data-kind="utility"] { border-color: rgb(var(--steel-rgb) / .6); }
.flow-tag[data-kind="utility"]::before { border-top: 2px solid var(--steel); width: 10px; }
.flow-tag[hidden] { display: none; }
.system-card__note { margin-top: 12px; font-size: 13px; color: var(--on-dark-3); }

/* ==========================================================================
   KyperX Energy & Industry — interior pages (P02–P24)
   Shared section components used by the page generator (src/lib/components.mjs).
   Desktop review build; responsive rules are intentionally deferred.
   ========================================================================== */

.page-light { background: var(--white); }
.page-light .site-header { background: var(--graphite); border-color: var(--rule-dark); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 40px; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb--dark { color: var(--on-dark-3); }
.breadcrumb--dark a { color: var(--on-dark-2); }
.breadcrumb--dark a:hover { color: var(--on-dark); }
.breadcrumb [aria-current] { color: inherit; }

/* ---------- Hero ---------- */
.phero { position: relative; overflow: hidden; }
.phero__eyebrow { color: var(--on-dark-2); margin-bottom: 28px; }
.phero__title { color: var(--on-dark-strong); max-width: 15ch; font-size: clamp(48px, 4.4vw, 70px); }
.phero__lede { margin-top: 28px; color: var(--on-dark-2); max-width: 56ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }

/* scene hero */
.phero--scene { min-height: clamp(760px, 94vh, 980px); display: flex; }
.phero--scene .phero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 36px); padding-bottom: 120px; pointer-events: none; }
.phero--scene .phero__inner a, .phero--scene .phero__inner button { pointer-events: auto; }
.phero--scene .phero__panel { margin: auto 0; max-width: 640px; }

.pstage { position: absolute; inset: 0; background: var(--graphite); }
.stage__poster, .stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__canvas { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.pstage.is-live .stage__canvas { opacity: 1; }
.pstage.is-live .stage__poster { opacity: 0; transition: opacity 1.2s .2s var(--ease-out); }
.pstage__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--ink-rgb) / .97) 0%, rgb(var(--ink-rgb) / .92) 30%, rgb(var(--ink-rgb) / .5) 46%, rgb(var(--ink-rgb) / 0) 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .75) 0%, rgb(var(--ink-rgb) / 0) 20%, rgb(var(--ink-rgb) / 0) 76%, rgb(var(--ink-rgb) / .9) 100%);
}
.pstage__footer {
  position: absolute; z-index: 4; bottom: 30px;
  left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  display: flex; justify-content: flex-end; align-items: center; gap: 28px;
}

.concept-note { padding-right: 28px; border-right: 1px solid var(--rule-dark); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--on-dark-3); }
.stage__tools { display: flex; align-items: center; gap: 28px; }
.flow-legend { display: flex; gap: 22px; }
.flow-legend li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-2); }
.flow-legend svg { width: 28px; height: 6px; }

.tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: rgb(var(--on-dark-rgb) / .04); border: 1px solid rgb(var(--on-dark-rgb) / .16); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-2); white-space: nowrap; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.tool-btn:hover { color: var(--on-dark); border-color: rgb(var(--on-dark-rgb) / .4); }
.tool-btn[aria-pressed="true"] { color: var(--on-dark); border-color: rgb(var(--cyan-rgb) / .6); background: rgb(var(--cyan-rgb) / .08); }
.tool-btn svg { width: 12px; height: 12px; }
.tool-btn .i-play { display: none; }
.tool-btn[data-action="pause"][aria-pressed="true"] .i-play { display: block; }
.tool-btn[data-action="pause"][aria-pressed="true"] .i-pause { display: none; }
.tool-btn[data-action="pause"][aria-pressed="true"] { border-color: rgb(var(--on-dark-rgb) / .4); background: rgb(var(--on-dark-rgb) / .06); }

.flow-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flow-tag {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 10px;
  background: rgb(var(--ink-rgb) / .82); border: 1px solid rgb(var(--cyan-rgb) / .55); border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark); white-space: nowrap;
  transition: opacity .4s var(--ease-out);
}
.flow-tag::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--cyan); }
.flow-tag[data-kind="hydrogen"] { border-color: rgb(var(--violet-rgb) / .6); }
.flow-tag[data-kind="hydrogen"]::before { border-top: 2px dashed var(--violet); }
.flow-tag[data-kind="material"] { border-color: rgb(var(--amber-rgb) / .6); }
.flow-tag[data-kind="material"]::before { border-top: 2px dotted var(--amber); }
.flow-tag[data-kind="utility"] { border-color: rgb(var(--steel-rgb) / .6); }
.flow-tag[data-kind="utility"]::before { border-top: 2px solid var(--steel); width: 10px; }
.flow-tag[data-kind="boundary"] { border-color: rgb(var(--on-dark-rgb) / .4); border-style: dashed; }
.flow-tag[data-kind="boundary"]::before { display: none; }
.flow-tag[data-kind="component"] { border-color: rgb(var(--on-dark-rgb) / .32); }
.flow-tag[data-kind="component"]::before { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--on-dark); }
.flow-tag.is-active { border-color: var(--cyan); background: rgb(var(--glass-hi-rgb) / .92); }
.flow-tag[hidden] { display: none; }

/* scene controls row inside a hero (e.g. P02 groups, P09 layers) */
.scene-controls { margin-top: 36px; }
.scene-controls__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 12px; }
.scene-controls__row { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-controls + .scene-controls { margin-top: 20px; }

/* diagram hero */
.phero--diagram { padding: calc(var(--header-h) + 36px) 0 96px; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.phero--diagram .phero__title { max-width: 14ch; }
.phero__art { margin: 0; }
.phero__art svg { width: 100%; height: auto; overflow: visible; }
.phero__art figcaption { margin-top: 16px; font-size: 11.5px; color: var(--on-dark-3); }
.phero--diagram.theme-light .phero__eyebrow, .phero--diagram.theme-paper .phero__eyebrow { color: var(--ink-3); }
.phero--diagram.theme-light .phero__title, .phero--diagram.theme-paper .phero__title { color: var(--ink); }
.phero--diagram.theme-light .phero__lede, .phero--diagram.theme-paper .phero__lede { color: var(--ink-2); }
.phero--diagram.theme-light .phero__art figcaption { color: var(--ink-3); }

/* ---------- Label chips ---------- */
.label-chip--dark { border-color: rgb(var(--ink-rgb) / .18); color: var(--ink); background: var(--surface); }
.label-chip--cyan::before { background: var(--cyan); }
.label-chip--violet::before { background: var(--violet); }
.label-chip--steel::before { background: var(--steel); }
.theme-dark .label-chip--dark, .theme-midnight .label-chip--dark { background: transparent; color: var(--on-dark); border-color: var(--rule-dark); }
.theme-midnight .label-chip { border-color: var(--rule-dark); color: var(--on-dark-2); }

.stage-marker { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid rgb(var(--amber-rgb) / .5); border-radius: 999px; font-size: 14px; background: rgb(var(--amber-rgb) / .07); }
.stage-marker .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stage-marker b { font-weight: 500; }
.stage-marker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgb(var(--amber-rgb) / .2); }
.theme-dark .stage-marker .mono, .theme-midnight .stage-marker .mono { color: var(--on-dark-3); }
.theme-dark .stage-marker b, .theme-midnight .stage-marker b { color: var(--on-dark); }

/* ---------- Editorial split block ---------- */
.pblock__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; align-items: start; }
.pblock__head .eyebrow { margin-bottom: 20px; }
.pblock__head .h2 { max-width: 14ch; }
.pblock__head > * + .pnote, .pblock__head > * + .pcheck, .pblock__head > * + .btn, .pblock__head > * + .text-link { margin-top: 32px; }
.pblock__body > * + * { margin-top: 22px; }
.pblock__body .body { font-size: 18px; line-height: 1.68; }
.pblock__body .body a, .pcard__body a, .faq a { color: inherit; text-decoration-color: rgb(var(--ink-rgb) / .35); text-underline-offset: 3px; }
.pblock__body .body a:hover { text-decoration-color: currentColor; }
.theme-dark .pblock__body .body a, .theme-midnight .pblock__body .body a { text-decoration-color: rgb(var(--on-dark-rgb) / .4); }
.pblock .pcards, .pblock .pseq, .pblock .pfields-grid, .pblock .pmodes, .pblock .ptable-wrap, .pblock .wide { margin-top: 64px; }
.pblock__body .pcards { margin-top: 36px; }
.section.pblock + .section.pblock.theme-light, .section.pblock.theme-light + .section.pblock.theme-light { border-top: 1px solid var(--rule-light); }
.theme-dark .h2, .theme-midnight .h2 { color: var(--on-dark-strong); }
.theme-midnight { background: var(--midnight); }
.theme-blueprint { background: radial-gradient(120% 90% at 85% 0%, var(--glow) 0%, var(--graphite) 62%); color: var(--on-dark); }
.theme-blueprint .h2 { color: var(--on-dark-strong); }
.theme-blueprint .body, .theme-blueprint .lede { color: var(--on-dark-2); }
.theme-blueprint .eyebrow { color: var(--on-dark-3); }

.pnote { font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; padding-left: 14px; border-left: 2px solid var(--rule-light); }
.theme-dark .pnote, .theme-midnight .pnote, .theme-blueprint .pnote { color: var(--on-dark-3); border-color: var(--rule-dark); }

/* ---------- Cards ---------- */
.pcards { display: grid; gap: 16px; }
.pcards--2 { grid-template-columns: repeat(2, 1fr); }
.pcards--3 { grid-template-columns: repeat(3, 1fr); }
.pcards--4 { grid-template-columns: repeat(4, 1fr); }
.pcards--5 { grid-template-columns: repeat(5, 1fr); }
.pcard {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.pcard__num { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 26px; }
.pcard__icon { display: block; height: 44px; margin-bottom: 26px; color: var(--ink); }
.pcard__icon svg { height: 44px; width: auto; }
.pcard__kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.pcard__title { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); }
.pcard__body { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.pcard__link { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.pcard__link .arrow { transition: transform .3s var(--ease-out); }
.pcard--link:hover { border-color: rgb(var(--ink-rgb) / .32); transform: translateY(-3px); box-shadow: 0 22px 50px -30px rgb(var(--ink-rgb) / .3); }
.pcard--link:hover .pcard__link .arrow { transform: translateX(4px); }
.pcard .label-chip { margin-top: 18px; align-self: flex-start; }
.pcard .supply { margin: 18px 0 0; }
.theme-dark .pcard, .theme-midnight .pcard, .theme-blueprint .pcard { background: rgb(var(--on-dark-rgb) / .035); border-color: var(--rule-dark); }
.theme-dark .pcard__title, .theme-midnight .pcard__title, .theme-blueprint .pcard__title, .theme-dark .pcard__link, .theme-midnight .pcard__link, .theme-blueprint .pcard__link { color: var(--on-dark); }
.theme-dark .pcard__body, .theme-midnight .pcard__body, .theme-blueprint .pcard__body { color: var(--on-dark-2); }
.theme-dark .pcard__num, .theme-midnight .pcard__num, .theme-blueprint .pcard__num, .theme-dark .pcard__kicker, .theme-midnight .pcard__kicker, .theme-blueprint .pcard__kicker { color: var(--on-dark-3); }
.theme-dark .pcard__icon, .theme-midnight .pcard__icon, .theme-blueprint .pcard__icon { color: var(--on-dark); }
.theme-dark .pcard--link:hover, .theme-midnight .pcard--link:hover, .theme-blueprint .pcard--link:hover { border-color: rgb(var(--on-dark-rgb) / .35); box-shadow: none; }

/* ---------- Commercial enquiry panel ---------- */
.penquiry-wrap { padding: 96px 0; }
.penquiry {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px;
  padding: 64px 64px 60px;
  background: linear-gradient(135deg, var(--midnight) 0%, var(--midnight-deep) 100%);
  color: var(--on-dark);
  border-radius: 14px;
}
.penquiry::before { content: ""; position: absolute; left: 64px; top: 0; width: 120px; height: 3px; background: var(--cyan); }
.penquiry--violet::before { background: var(--violet); }
.penquiry--amber::before { background: var(--amber); }
.penquiry .label-chip { background: rgb(var(--on-dark-rgb) / .06); border-color: rgb(var(--on-dark-rgb) / .18); color: var(--on-dark); }
.penquiry .label-chip::before { background: var(--cyan); }
.penquiry--violet .label-chip::before { background: var(--violet); }
.penquiry__title { margin-top: 28px; color: var(--on-dark-strong); max-width: 17ch; }
.penquiry__body { margin-top: 22px; font-size: 17.5px; line-height: 1.66; color: var(--on-dark-2); max-width: 58ch; }
.penquiry__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.penquiry__items { border-top: 1px solid var(--rule-dark); align-self: start; }
.penquiry__side { align-self: start; }
.penquiry__side .penquiry__fine { border-top: 0; }
.penquiry__items li { display: grid; grid-template-columns: 44px 1fr; padding: 22px 0; border-bottom: 1px solid var(--rule-dark); }
.penquiry__items .mono { font-size: 12px; color: var(--cyan); padding-top: 4px; }
.penquiry--violet .penquiry__items .mono { color: var(--violet); }
.penquiry__items h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--on-dark-strong); }
.penquiry__items p { margin-top: 6px; font-size: 15px; line-height: 1.58; color: var(--on-dark-2); }
.penquiry__note { margin-top: 20px; font-size: 14px; color: var(--ink-3); max-width: 90ch; }

/* ---------- Numbered sequence ---------- */
.pseq { display: grid; gap: 0; border-top: 1px solid var(--rule-light); counter-reset: s; }
.pseq--3 { grid-template-columns: repeat(3, 1fr); }
.pseq--4 { grid-template-columns: repeat(4, 1fr); }
.pseq--5 { grid-template-columns: repeat(5, 1fr); }
.pseq__item { position: relative; padding: 32px 32px 8px 0; }
.pseq__item + .pseq__item { padding-left: 32px; border-left: 1px solid var(--rule-light); }
.pseq__item::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: transparent; }
.pseq__item + .pseq__item::before { left: -1px; }
.pseq__num { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.pseq__num b { font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text); padding: 3px 8px; border-radius: 999px; background: rgb(var(--amber-rgb) / .2); }
.pseq__title { margin-top: 18px; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.pseq__body { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.pseq__item.is-current::before { background: var(--amber); }
.theme-dark .pseq, .theme-midnight .pseq, .theme-blueprint .pseq { border-color: var(--rule-dark); }
.theme-dark .pseq__item + .pseq__item, .theme-midnight .pseq__item + .pseq__item, .theme-blueprint .pseq__item + .pseq__item { border-color: var(--rule-dark); }
.theme-dark .pseq__title, .theme-midnight .pseq__title, .theme-blueprint .pseq__title { color: var(--on-dark-strong); }
.theme-dark .pseq__body, .theme-midnight .pseq__body, .theme-blueprint .pseq__body { color: var(--on-dark-2); }
.theme-dark .pseq__num, .theme-midnight .pseq__num, .theme-blueprint .pseq__num { color: var(--on-dark-3); }
.theme-dark .pseq__num b, .theme-midnight .pseq__num b, .theme-blueprint .pseq__num b { color: var(--amber); background: rgb(var(--amber-rgb) / .12); }

/* ---------- FAQ ---------- */
.pfaq { border-top: 1px solid var(--rule-light); }
.faq { border-top: 1px solid var(--rule-light); }
.faq__item { border-bottom: 1px solid var(--rule-light); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .3s var(--ease-out); }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item summary:hover { color: var(--ink-2); }
.faq__item p { padding: 0 48px 26px 0; font-size: 16.5px; line-height: 1.66; color: var(--ink-2); max-width: 70ch; }

/* ---------- Related + closing ---------- */
.prelated { margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--rule-light); }
.prelated .eyebrow { margin-bottom: 20px; }
.prelated ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prelated a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t a" "d a"; align-items: center; column-gap: 16px;
  height: 100%; padding: 18px 20px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink); background: var(--surface);
  transition: border-color .25s var(--ease-out);
}
.prelated a:hover { border-color: rgb(var(--ink-rgb) / .35); }
.prelated__t { grid-area: t; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.prelated__d { grid-area: d; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.prelated .arrow { grid-area: a; transition: transform .3s var(--ease-out); }
.prelated a:hover .arrow { transform: translateX(3px); }

.pclosing { padding: 104px 0 96px; border-top: 1px solid var(--rule-light); }
.pclosing__inner { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.pclosing__title { font-size: clamp(42px, 3.9vw, 62px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; max-width: 16ch; color: var(--ink); }
.pclosing .lede { color: var(--ink-2); margin-bottom: 32px; }
.pclosing__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Four-field cards ---------- */
.pfields-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pfields-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pfields {
  display: flex; flex-direction: column;
  padding: 32px 32px 30px; background: var(--surface);
  border: 1px solid var(--rule-light); border-radius: var(--radius-lg);
}
.pfields__head { margin-bottom: 22px; }
.pfields__kicker { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.pfields__head .h3 { font-size: 23px; }
.pfields__head svg { margin-top: 24px; width: 100%; height: auto; }
.pfields__list { margin: 0 0 24px; border-top: 1px solid var(--rule-light); flex: 1; }
.pfields__list > div { padding: 16px 0; border-bottom: 1px solid var(--rule-light); }
.pfields__list dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pfields__list dd { margin: 6px 0 0; font-size: 15.5px; line-height: 1.58; color: var(--ink-2); }
.pfields__list dd b { font-weight: 500; color: var(--ink); }
.pfields .text-link { align-self: flex-start; }
.pfields .stage-dd { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.pfields .stage-dd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* ---------- Checklist ---------- */
.pcheck { padding: 28px 30px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.pcheck__title { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.pcheck li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 9px 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); border-bottom: 1px solid var(--rule-light); }
.pcheck li:last-child { border-bottom: 0; }
.pcheck svg { width: 16px; height: 16px; margin-top: 3px; color: var(--steel-2); }
.theme-dark .pcheck, .theme-midnight .pcheck, .theme-blueprint .pcheck { background: rgb(var(--on-dark-rgb) / .04); border-color: var(--rule-dark); }
.theme-dark .pcheck li, .theme-midnight .pcheck li, .theme-blueprint .pcheck li { color: var(--on-dark); border-color: var(--rule-dark); }
.theme-dark .pcheck svg, .theme-midnight .pcheck svg, .theme-blueprint .pcheck svg { color: var(--cyan); }

/* ---------- Tables ---------- */
.ptable-wrap { border: 1px solid var(--rule-light); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.ptable { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.ptable caption { text-align: left; padding: 20px 28px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-light); }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 18px 28px; border-bottom: 1px solid var(--rule-light); }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--white); }
.ptable tbody th { font-weight: 500; color: var(--ink); width: 24%; }
.ptable td { color: var(--ink-2); }
.ptable .muted { color: var(--ink-3); font-style: italic; }

/* ---------- Mode switcher (tabbed explanatory diagrams) ---------- */
.pmodes__bar { display: inline-flex; gap: 2px; padding: 4px; border-radius: 8px; background: rgb(var(--ink-rgb) / .05); }
.pmodes__bar button {
  height: 38px; padding: 0 18px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}
.pmodes__bar button:hover { color: var(--ink); }
.pmodes__bar button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .12); }
.pmodes__body { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.pmodes--stack .pmodes__body { grid-template-columns: 1fr; gap: 28px; }
.pmodes__figure { margin: 0; padding: 32px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.pmodes__figure svg { width: 100%; height: auto; overflow: visible; }
.pmodes__figure figcaption { margin-top: 16px; font-size: 11.5px; color: var(--ink-3); }
.pmodes__panel h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); margin-bottom: 12px; }
.pmodes__panel p { font-size: 16.5px; line-height: 1.66; color: var(--ink-2); }
.pmodes__panel p + p, .pmodes__panel p + ul, .pmodes__panel ul + p { margin-top: 14px; }
.pmodes__panel ul li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pmodes__panel ul li + li { margin-top: 8px; }
.pmodes__panel ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--steel-2); }
.pmodes__panel dl > div { padding: 12px 0; border-bottom: 1px solid var(--rule-light); }
.pmodes__panel dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pmodes__panel dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pmodes--dark .pmodes__bar { background: rgb(var(--on-dark-rgb) / .06); }
.pmodes--dark .pmodes__bar button { color: var(--on-dark-3); }
.pmodes--dark .pmodes__bar button:hover { color: var(--on-dark); }
.pmodes--dark .pmodes__bar button[aria-selected="true"] { background: rgb(var(--on-dark-rgb) / .12); color: var(--on-dark-strong); box-shadow: none; }
.pmodes--dark .pmodes__figure { background: rgb(var(--ink-rgb) / .45); border-color: var(--rule-dark); }
.pmodes--dark .pmodes__figure figcaption { color: var(--on-dark-3); }
.pmodes--dark .pmodes__panel h3 { color: var(--on-dark-strong); }
.pmodes--dark .pmodes__panel p, .pmodes--dark .pmodes__panel ul li, .pmodes--dark .pmodes__panel dd { color: var(--on-dark-2); }
.pmodes--dark .pmodes__panel dl > div { border-color: var(--rule-dark); }
.pmodes--dark .pmodes__panel dt { color: var(--on-dark-3); }

/* ---------- Technical diagrams (SVG) ---------- */
/* Shared vocabulary: nodes, flows by kind, boundaries, labels. Highlight via [data-mode] on the figure. */
.dg { font-family: var(--font-sans); }
.dg-node rect, .dg-node circle, .dg-node path.shape { fill: var(--surface); stroke: rgb(var(--ink-rgb) / .28); stroke-width: 1.2; transition: stroke .35s, fill .35s, opacity .35s; }
.dg-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.dg-t { font-size: 15px; font-weight: 500; fill: var(--ink); letter-spacing: -0.01em; }
.dg-s { font-size: 12.5px; fill: var(--ink-3); }
.dg-flow { fill: none; stroke-width: 2.2; transition: opacity .35s, stroke-width .35s; }
.dg-flow--e { stroke: var(--cyan-ink); }
.dg-flow--h { stroke: var(--violet-ink); stroke-dasharray: 8 6; }
.dg-flow--m { stroke: var(--amber-ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 7.5; }
.dg-flow--u { stroke: var(--steel); stroke-dasharray: 2 4; }
.dg-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.dg-tag--e { fill: var(--cyan-text); } .dg-tag--h { fill: var(--violet-text); } .dg-tag--m { fill: var(--amber-text); } .dg-tag--u { fill: var(--ink-3); }
.dg-boundary { fill: none; stroke: rgb(var(--ink-rgb) / .35); stroke-width: 1; stroke-dasharray: 5 5; }
.dg-zone { fill: rgb(var(--ink-rgb) / .025); stroke: none; }
.dg-grid line { stroke: rgb(var(--ink-rgb) / .07); }
.dg-axis { stroke: rgb(var(--ink-rgb) / .4); stroke-width: 1; }
.dg-dim { transition: opacity .35s; }
[data-mode-figure] .dg-hl { transition: opacity .35s, stroke .35s, fill .35s; }
.dg-arrow { fill: currentColor; }
.dg-flow--h { animation: dg-dash 1.6s linear infinite; }
.dg-flow--m { animation: dg-dot 1.4s linear infinite; }
@keyframes dg-dash { to { stroke-dashoffset: -32; } }
@keyframes dg-dot { to { stroke-dashoffset: -15.2; } }
.dg .is-dim { opacity: .18; }
.dg .dg-node.is-on rect, .dg .dg-node.is-on circle, .dg .dg-node.is-on path.shape { stroke: var(--ink); stroke-width: 1.6; }
.dg .is-on.dg-node--accent rect { fill: var(--cyan-wash); stroke: var(--cyan-ink); }

/* dark-surface variant */
.dg--dark .dg-node rect, .dg--dark .dg-node circle, .dg--dark .dg-node path.shape { fill: rgb(var(--ink-rgb) / .75); stroke: rgb(var(--on-dark-rgb) / .24); }
.dg--dark .dg-k { fill: var(--on-dark-3); }
.dg--dark .dg-t { fill: var(--on-dark); }
.dg--dark .dg-s { fill: var(--on-dark-3); }
.dg--dark .dg-flow--e { stroke: var(--cyan); } .dg--dark .dg-flow--h { stroke: var(--violet); } .dg--dark .dg-flow--m { stroke: var(--amber); }
.dg--dark .dg-tag--e { fill: var(--cyan); } .dg--dark .dg-tag--h { fill: var(--violet); } .dg--dark .dg-tag--m { fill: var(--amber); } .dg--dark .dg-tag--u { fill: var(--on-dark-3); }
.dg--dark .dg-boundary { stroke: rgb(var(--on-dark-rgb) / .32); }
.dg--dark .dg-zone { fill: rgb(var(--on-dark-rgb) / .025); }
.dg--dark .dg-grid line { stroke: rgb(var(--on-dark-rgb) / .06); }
.dg--dark .dg-axis { stroke: rgb(var(--on-dark-rgb) / .35); }
.dg--dark .dg-node.is-on rect, .dg--dark .dg-node.is-on circle, .dg--dark .dg-node.is-on path.shape { stroke: var(--on-dark); }
.dg--dark .is-on.dg-node--accent rect { fill: rgb(var(--cyan-rgb) / .12); stroke: var(--cyan); }
.dg--dark .is-on.dg-node--violet rect { fill: rgb(var(--violet-rgb) / .12); stroke: var(--violet); }
.dg--dark .is-on.dg-node--amber rect { fill: rgb(var(--amber-rgb) / .12); stroke: var(--amber); }
@media (prefers-reduced-motion: reduce) { .dg-flow { animation: none !important; } }

/* figure caption used under static diagrams */
.pfigure { margin: 0; padding: 40px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.pfigure svg { width: 100%; height: auto; overflow: visible; }
.pfigure figcaption { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.theme-dark .pfigure, .theme-midnight .pfigure, .theme-blueprint .pfigure { background: rgb(var(--ink-rgb) / .4); border-color: var(--rule-dark); }
.theme-dark .pfigure figcaption, .theme-midnight .pfigure figcaption, .theme-blueprint .pfigure figcaption { color: var(--on-dark-3); }

/* supply block reused from home cards */
.supply { padding: 14px 16px; border-left: 2px solid var(--cyan); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }
.supply__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.supply__items { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.theme-dark .supply, .theme-midnight .supply { background: rgb(var(--cyan-rgb) / .06); }
.theme-dark .supply__label, .theme-midnight .supply__label { color: var(--on-dark); }
.theme-dark .supply__items, .theme-midnight .supply__items { color: var(--on-dark-2); }

/* key-value strip (inputs, method, output prompts etc.) */
.pkv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-light); }
.pkv > div { padding: 18px 24px 4px 0; }
.pkv > div + div { padding-left: 24px; border-left: 1px solid var(--rule-light); }
.pkv dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pkv dd { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* audience / route cards with illustration */
.paud { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.paud__card { display: flex; flex-direction: column; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: border-color .3s var(--ease-out), transform .4s var(--ease-out); }
.paud__card:hover { border-color: rgb(var(--ink-rgb) / .35); transform: translateY(-3px); }
.paud__art { height: 112px; margin: -6px -4px 22px; border-radius: 6px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.paud__art svg { width: 100%; height: 100%; }
.paud__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.paud__t { margin-top: 10px; font-size: 19px; line-height: 1.28; letter-spacing: -0.015em; font-weight: 500; }
.paud__b { margin-top: 12px; font-size: 15px; line-height: 1.58; color: var(--ink-2); flex: 1; }
.paud__cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }

/* duration calculator (P05, P22) */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.calc__inputs { padding: 36px; border-right: 1px solid var(--rule-light); }
.calc__inputs .field + .field { margin-top: 22px; }
.calc label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.calc__input { display: flex; align-items: center; border: 1px solid rgb(var(--ink-rgb) / .22); border-radius: var(--radius); background: var(--surface); transition: border-color .2s; }
.calc__input:focus-within { border-color: var(--ink); }
.calc__input input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ink); outline: none; }
.calc__input span { padding: 0 14px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.calc__input input[aria-invalid="true"] { color: var(--error); }
.calc__error { min-height: 20px; margin-top: 6px; font-size: 13.5px; color: var(--error); }
.calc__result { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-light); }
.calc__result dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.calc__result dd { margin: 6px 0 0; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc__formula { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.calc__viz { padding: 36px; background: var(--white); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.calc__viz svg { width: 100%; height: auto; }
.calc__label { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.calc__charge { padding: 18px 20px; border: 1px dashed rgb(var(--ink-rgb) / .25); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.calc__charge b { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }

/* article layout (insights) */
.article { padding: 72px 0 40px; }
.article__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 64px; }
.article__body { max-width: 70ch; }
.article__body h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; margin: 56px 0 18px; color: var(--ink); }
.article__body h2:first-child { margin-top: 0; }
.article__body p { font-size: 18.5px; line-height: 1.72; color: var(--ink-2); }
.article__body p + p { margin-top: 18px; }
.article__body .pfigure, .article__body .pmodes, .article__body .calc { margin: 40px 0; }
.article__toc { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.article__toc p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.article__toc li + li { margin-top: 10px; }
.article__toc a { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.article__toc a:hover { color: var(--ink); }
.further { margin-top: 56px; padding: 24px 28px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.further p { font-size: 15px !important; line-height: 1.6 !important; }
.further .mono { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.article-cta { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; }

.phero--article { padding: calc(var(--header-h) + 48px) 0 72px; border-bottom: 1px solid var(--rule-light); }
.phero--article .phero__title { color: var(--ink); max-width: 20ch; font-size: clamp(44px, 3.9vw, 62px); }
.phero--article .phero__eyebrow { color: var(--ink-3); }
.phero--article .phero__lede { color: var(--ink-2); max-width: 64ch; font-size: 20px; }

/* editorial cards with small diagrams (insights index) */
.pedit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pedit a { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s; }
.pedit a:hover { border-color: rgb(var(--ink-rgb) / .32); transform: translateY(-3px); box-shadow: 0 24px 50px -32px rgb(var(--ink-rgb) / .3); }
.pedit__art { padding: 28px; background: var(--white); border-bottom: 1px solid var(--rule-light); }
.pedit__art svg { width: 100%; height: auto; }
.pedit__txt { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.pedit__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pedit__t { margin-top: 12px; font-size: 23px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.pedit__b { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.pedit__cta { margin-top: 24px; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14.5px; }

/* leadership / contact (about) */
.pperson { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; padding: 32px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.pperson__mono { width: 120px; height: 120px; border-radius: 8px; background: var(--midnight); color: var(--on-dark); display: grid; place-items: center; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.pperson h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.pperson .role { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pperson p.bio { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.pcontact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-light); }
.pcontact > div { padding: 22px 28px 6px 0; }
.pcontact > div + div { padding-left: 28px; border-left: 1px solid var(--rule-light); }
.pcontact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcontact dd { margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.pcontact a { color: inherit; }

/* print-friendly (spec P16/P17) */
@media print {
  .site-header, .site-footer, .pstage, .phero__actions, .pclosing__actions, .skip-link { display: none !important; }
  body, .theme-dark, .theme-midnight, .theme-blueprint { background: var(--surface) !important; color: #000 !important; }
  .h2, .display, .pcard__title { color: #000 !important; }
  .section { padding: 32px 0 !important; }
}
.penquiry__fine { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-dark); font-size: 15px; line-height: 1.6; color: var(--on-dark-3); max-width: 58ch; }
.prelated--3 ul { grid-template-columns: repeat(3, 1fr); }
.prelated--5 ul { grid-template-columns: repeat(5, 1fr); }
.prelated--6 ul { grid-template-columns: repeat(3, 1fr); }
.link-row { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.theme-midnight .text-link, .theme-blueprint .text-link { color: var(--on-dark); border-color: rgb(var(--on-dark-rgb) / .3); }
.theme-midnight .text-link:hover, .theme-blueprint .text-link:hover { border-color: var(--on-dark); }
.pblock__head .h2 { max-width: 17ch; }
.pmodes-panel { padding: 40px 40px 44px; border-radius: 14px; }
.pmodes-panel .pmodes__figure { background: rgb(var(--ink-rgb) / .5); }
.penquiry .pcheck { margin-top: 28px; background: rgb(var(--on-dark-rgb) / .04); border-color: var(--rule-dark); max-width: 460px; }
.penquiry .pcheck__title { color: var(--on-dark-3); }
.penquiry .pcheck li { color: var(--on-dark); border-color: var(--rule-dark); }
.penquiry .pcheck svg { color: var(--cyan); }
.pmodes-panel .pmodes { margin-top: 0; }
.pfigure.theme-midnight { background: var(--midnight); border-color: transparent; }
.pfigure.theme-midnight figcaption { color: var(--on-dark-3); }
.pcards--compact .pcard { padding: 24px 22px; min-height: 132px; }
.pcards--compact .pcard__kicker { margin-bottom: 18px; }
.pcards--compact .pcard__title { font-size: 18px; }
.dg-darkbox { background: var(--midnight); border-radius: 8px; padding: 24px; }
.pmodes__figure:has(.dg-darkbox) { padding: 0; border: 0; background: none; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 8px 14px; border: 1px solid var(--rule-light); border-radius: 999px; background: var(--surface); font-size: 14.5px; color: var(--ink); }
.pblock__body .stage-marker { margin-top: 28px; }
.penquiry--amber .penquiry__items .mono { color: var(--amber); }
.penquiry--amber .label-chip::before { background: var(--amber); }

/* ---------- P02 explorer ---------- */
.page-explorer .phero--scene { min-height: max(100vh, 880px); }
.page-explorer .phero__panel { margin: 0; max-width: 560px; }
.page-explorer .phero__title { font-size: clamp(44px, 3.7vw, 58px); max-width: 15ch; }
.page-explorer .phero__lede { font-size: 17.5px; max-width: 50ch; }
.xbar { position: absolute; left: 0; bottom: 92px; display: flex; gap: 40px; padding: 0 var(--gutter); pointer-events: auto; }
.xbar .scene-controls { margin-top: 0; }
.xcard {
  position: absolute; right: var(--gutter); top: calc(var(--header-h) + 64px); width: 350px;
  padding: 26px 28px 28px; pointer-events: auto;
  background: rgb(var(--glass-rgb) / .84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgb(var(--on-dark-rgb) / .12); border-radius: var(--radius-lg); color: var(--on-dark);
}
.xcard__kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.xcard__title { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--on-dark-strong); margin-bottom: 10px; }
.xcard__text { font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.xcard__groups { margin-top: 16px; border-top: 1px solid var(--rule-dark); }
.xcard__groups li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-dark); font-size: 15px; color: var(--on-dark); }
.xcard__groups .mono { font-size: 11.5px; color: var(--on-dark-3); padding-top: 2px; }
.xcard__links { margin-top: 18px; border-top: 1px solid var(--rule-dark); }
.xcard__links a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-dark); color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 500; }
.xcard__links a:hover { color: var(--on-dark-strong); }
.xcard__links a:hover .arrow { transform: translateX(3px); }
.xcard__links .arrow { transition: transform .3s var(--ease-out); }
.xgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule-light); }
.xgroup { display: flex; flex-direction: column; padding: 36px 36px 8px 0; }
.xgroup + .xgroup { padding-left: 36px; border-left: 1px solid var(--rule-light); }
.xgroup__num { font-size: 12px; color: var(--ink-3); }
.xgroup__title { margin-top: 20px; font-size: 34px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.xgroup__text { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); flex: 1; }
.xgroup__links { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- P10 commercial index ---------- */
.poffers-wrap { padding: 72px 0; }
.poffers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.poffer { position: relative; display: flex; flex-direction: column; padding: 36px 34px 32px; background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s; }
.poffer::before { content: ""; position: absolute; left: 34px; top: -1px; width: 56px; height: 2px; background: var(--cyan); transition: width .5s var(--ease-out); }
.poffer:hover { border-color: rgb(var(--ink-rgb) / .3); transform: translateY(-3px); box-shadow: 0 26px 56px -34px rgb(var(--ink-rgb) / .32); }
.poffer:hover::before { width: calc(100% - 68px); }
.poffer__k { font-size: 12px; color: var(--ink-3); }
.poffer__t { margin-top: 22px; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
.poffer__b { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.poffer .label-chip { margin-top: 22px; align-self: flex-start; }
.poffer__cta { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.pequip__list { margin-top: 56px; border-top: 1px solid var(--rule-dark); }
.pequip__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule-dark); }
.pequip__num { font-size: 12px; color: var(--cyan); }
.pequip__title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--on-dark-strong); }
.pequip__body { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-2); }
.pequip__actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.pequip__actions .btn { height: 44px; font-size: 14px; }
.pequip__foot { margin-top: 40px; display: flex; align-items: center; gap: 28px; }
.ptwo { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.ptwo .h2 { margin: 18px 0 22px; }
.ptwo .body { font-size: 18px; line-height: 1.68; }
.pprog-eyebrow { margin-bottom: 28px; }
.pseq-note { margin-top: 24px; }
.pfields__head svg { margin-top: 22px; border-radius: 6px; background: var(--white); padding: 10px; }
.pcards--plain .pcard { min-height: 0; padding: 18px 22px; }
.pcards--plain .pcard__title { font-size: 17px; }
.pequip__meta { margin-top: 14px; }
.pequip__actions .text-link { white-space: nowrap; }
.theme-midnight .body, .theme-midnight .lede, .theme-blueprint .body { color: var(--on-dark-2); }
.theme-midnight .eyebrow { color: var(--on-dark-3); }

/* ---------- P14–P19 collaboration and about ---------- */
.paud-wrap { padding: 88px 0 104px; }
.paud-wrap > .container > .eyebrow { margin-bottom: 28px; }
.paud__art .dg { width: 100%; height: 100%; }
.penquiry--solo { grid-template-columns: minmax(0, 1fr); }
.penquiry__side { align-self: start; }
.pcheck--dark { background: rgb(var(--on-dark-rgb) / .04); border-color: var(--rule-dark); }
.pcheck--dark .pcheck__title { color: var(--on-dark-3); }
.pcheck--dark li { color: var(--on-dark); border-color: var(--rule-dark); }
.pcheck--dark svg { color: var(--violet); }
.pcheck__title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.pcheck--plain { background: transparent; padding: 0; border: 0; border-top: 1px solid var(--rule-light); border-radius: 0; padding-top: 14px; }
.prelated--9 ul { grid-template-columns: repeat(3, 1fr); }
.dg-icon { color: rgb(var(--on-dark-rgb) / .45); transition: color .35s; }
.dg--dark .dg-node.is-on .dg-icon { color: var(--cyan); }
.dg-t--sm { font-size: 13.5px; }
.pmfr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.pmfr h3 { font-size: 22px; }
.pmfr .link-row { align-items: center; }
.pmodes--stack .pmodes__panel h3 { color: var(--on-dark-strong); }
.pq { font-size: 18px !important; line-height: 1.55; color: var(--on-dark-strong) !important; }
.pprompts { margin-top: 22px; display: grid; gap: 0; border-top: 1px solid var(--rule-dark); }
.pprompts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
.pprompts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); padding-top: 3px; }
.pprompts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-2); }
.pprompts--one { margin-top: 0; min-width: 420px; max-width: 520px; }
.pwp__tools { margin-top: 32px; }
.pwp__sheet { border-top: 1px solid var(--ink); counter-reset: none; }
.pwp__sheet li { display: grid; grid-template-columns: 52px 1fr; padding: 22px 0 18px; border-bottom: 1px solid var(--rule-light); }
.pwp__sheet .mono { font-size: 12px; color: var(--ink-3); padding-top: 4px; }
.pwp__sheet h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.pwp__sheet p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pwp__line { display: block; margin-top: 18px; height: 1px; background: repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / .22) 0 4px, transparent 4px 8px); }
.pevidence { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); margin-top: 56px; }
.pevidence__panel { padding: 32px 30px 36px; }
.pevidence__panel + .pevidence__panel { border-left: 1px solid var(--rule-light); }
.pevidence__panel .mono { font-size: 12px; color: var(--ink-3); }
.pevidence__panel h3 { margin-top: 18px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.pevidence__panel p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pdecide { position: absolute; right: 48px; top: calc(var(--header-h) + 72px); width: 280px; padding: 22px 24px; background: rgb(var(--ink-rgb) / .78); backdrop-filter: blur(10px); border: 1px solid var(--rule-dark); border-radius: 10px; z-index: 3; }
.pdecide__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.pdecide ol { margin-top: 14px; }
.pdecide li { display: grid; grid-template-columns: 34px 1fr; padding: 10px 0; border-top: 1px solid var(--rule-dark); font-size: 15.5px; color: var(--on-dark-2); }
.pdecide li .mono { font-size: 11.5px; color: var(--on-dark-3); padding-top: 2px; }
.pdecide li.is-current { color: var(--on-dark-strong); }
.pdecide li.is-current .mono { color: var(--violet); }
.pdecide__note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--on-dark-3); }
.tag-list--dark li { background: rgb(var(--on-dark-rgb) / .05); border-color: var(--rule-dark); color: var(--on-dark); }
.pseq-dark .pseq { border-color: var(--rule-dark); }
.pseq-dark .pseq__item { border-color: var(--rule-dark); }
.pseq-dark .pseq__title { color: var(--on-dark-strong); }
.pseq-dark .pseq__num { color: var(--on-dark-3); }
.theme-midnight .stage-marker, .theme-blueprint .stage-marker { color: var(--on-dark); }
.pblock__body > .stage-marker { margin-top: 28px; }
.pblock__body > .tag-list { margin-top: 24px; }
.pperson__mono { font-family: var(--font-sans); }
.pcontact { margin-top: 36px; }
@media print {
  .pwp__tools, .pdecide, .breadcrumb, .prelated, .phero__art { display: none !important; }
  .pevidence, .pevidence__panel { border-color: #999 !important; }
  .pblock__grid { display: block !important; }
}
.dg-modules .dg-node:not(.is-on) { opacity: .62; }
.pblock__head .h2 + .body { margin-top: 24px; }
.paud__art { height: 150px; }
.dg.dg-modules .dg-node.is-dim { opacity: .62; }

/* ---------- Insights articles ---------- */
.article__aside { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.article__card { padding: 22px 22px 18px; border: 1px solid var(--rule-light); border-radius: var(--radius-lg); background: var(--surface); }
.article__card .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: block; }
.article__card .text-link { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule-light); font-size: 14.5px; }
.article__card .text-link:last-child { border-bottom: 0; }
.article__toc ol { list-style: none; padding: 0; margin: 0; }
.article__body section { scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body section + section h2 { margin-top: 56px; }
.article__body .tag-list { margin-top: 20px; }
.article .prelated { margin-top: 72px; }
.textalt { margin-top: -20px; margin-bottom: 32px; font-size: 15px; color: var(--ink-2); }
.textalt summary { cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.textalt ol { margin: 12px 0 0 20px; line-height: 1.6; }
.article__body .pmodes__panel p { font-size: 16.5px; }
.pmodes--light .dg-icon--ink, .dg-icon--ink { color: var(--ink); }
.pedit__art { min-height: 220px; display: grid; place-items: center; }
/* ---------- P00 corporate preview ---------- */
.preview-band { position: relative; z-index: 60; margin-top: var(--header-h); background: var(--notice-bg); color: var(--notice-fg); font-size: 12px; padding: 9px 0; }
.preview-band + main .phero--scene { margin-top: 0; }
.pcorp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.pcorp__card { display: flex; flex-direction: column; padding: 28px 26px 24px; background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); }
.pcorp__card .mono { font-size: 12px; color: var(--ink-3); }
.pcorp__card h3 { margin-top: 18px; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; }
.pcorp__card p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.pcorp__actions { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tool-btn--light { color: var(--ink-2); border-color: var(--rule-light); background: transparent; }
.tool-btn--light[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.pfigure--dark { margin-top: 56px; padding: 32px; border: 1px solid var(--rule-dark); border-radius: 12px; background: rgb(var(--ink-rgb) / .4); }
.article__body section + section { margin-top: 56px; }
.article__body .calc { grid-template-columns: 1fr; }
.dg.dg-modules .dg-node.is-dim, .dg.dg-modules .dg-flow.is-dim { opacity: .5; }
.pfigure--dark svg { max-height: 200px; }

/* Article dateline (insights): publish date under the lede. */
.article-meta{margin-top:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.72}

/* Phones: comparison tables stack each row as a labelled card (labels from build-site.py). */
@media (max-width: 640px) {
  :is(.ptable,.scope-comparison table), :is(.ptable,.scope-comparison table) caption, :is(.ptable,.scope-comparison table) tbody, :is(.ptable,.scope-comparison table) tr, :is(.ptable,.scope-comparison table) th, :is(.ptable,.scope-comparison table) td { display: block; width: auto; }
  :is(.ptable,.scope-comparison table) caption { padding: 16px 18px; }
  :is(.ptable,.scope-comparison table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.ptable,.scope-comparison table) tbody tr { padding: 14px 18px; border-bottom: 1px solid var(--rule-light); }
  :is(.ptable,.scope-comparison table) tbody tr:last-child { border-bottom: 0; }
  :is(.ptable,.scope-comparison table) tbody th, :is(.ptable,.scope-comparison table) td { padding: 4px 0; border: 0; width: auto; }
  :is(.ptable,.scope-comparison table) tbody th { font-size: 16px; padding-bottom: 6px; }
  :is(.ptable,.scope-comparison table) td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
  .scope-comparison table { min-width: 0; }
  .scope-comparison { overflow: visible; }
}

/* P20 Contact + U01 Enquiry received */
.page-light { background: var(--white); }
.page-light .site-header { background: var(--graphite); border-color: var(--rule-dark); }

.contact-page { padding: calc(var(--header-h) + 72px) 0 112px; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.contact-intro { position: sticky; top: calc(var(--header-h) + 48px); }
.breadcrumb { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 36px; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.contact-title { margin: 20px 0 24px; max-width: 14ch; }
.contact-email { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule-light); color: var(--ink-2); }
.contact-email .h3 { color: var(--ink); margin-bottom: 8px; font-size: 19px; }
.contact-email a { color: var(--ink); }
.contact-address { margin-top: 12px; font-size: 14px; color: var(--ink-3); }

.enquiry { background: var(--surface); border: 1px solid var(--rule-light); border-radius: var(--radius-lg); padding: 40px 44px 44px; }
.steps-indicator { display: flex; gap: 28px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--rule-light); }
.steps-indicator li { font-size: 14.5px; color: var(--ink-3); display: inline-flex; gap: 10px; align-items: baseline; }
.steps-indicator li .mono { font-size: 11.5px; }
.steps-indicator li.is-current { color: var(--ink); font-weight: 500; }
.steps-indicator li.is-current .mono { color: var(--cyan); }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { padding: 0; margin-bottom: 24px; }
.step-intro { color: var(--ink-2); margin: -8px 0 24px; max-width: 60ch; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.req { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--paper); border: 1px solid rgb(var(--ink-rgb) / .18); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(var(--ink-rgb) / .35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px rgb(var(--cyan-rgb) / .25); }
.field [aria-invalid="true"] { border-color: var(--error); }
.hint { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.error { margin-top: 6px; font-size: 13.5px; color: var(--error); min-height: 0; }
.error:empty { display: none; }
.preselect { margin-bottom: 24px; padding: 14px 16px; background: var(--cyan-wash); border-left: 2px solid var(--cyan); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--ink-2); }
.preselect b { color: var(--ink); font-weight: 500; }
.notice { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; max-width: 70ch; }
.notice a { color: var(--ink-2); }
.status { margin-top: 16px; font-size: 14.5px; color: var(--ink); }
.status.is-error { color: var(--error); }
.actions { display: flex; gap: 12px; margin-top: 28px; }

.received { max-width: 720px; padding-top: 24px; }
.received__icon { width: 48px; height: 48px; color: var(--cyan); margin-bottom: 28px; }
.received .h2 { margin-bottom: 20px; }
.received .h2:focus { outline: none; }
.received .body { margin-top: 16px; }
.received .body a { color: var(--ink); }

/* Generated by full-sites/_build/build.mjs from systems.mjs (Kinetic). Do not edit here.
   Colour tokens, their rgb triplets (used as rgb(var(--x-rgb) / alpha)) and layout/type variables. */
:root {
  --graphite: #522d1f;
  --graphite-2: #4a2d21;
  --midnight: #442d23;
  --midnight-2: #473028;
  --midnight-deep: #040b12;
  --white: #eeebe5;
  --paper: #e3ded7;
  --surface: #fdfbfa;
  --steel: #8ea2ad;
  --steel-2: #5c707b;
  --cyan: #72c8dd;
  --violet: #b3a6f5;
  --amber: #e8b86a;
  --ink: #101b23;
  --ink-2: #3c4c54;
  --ink-3: #61717a;
  --on-dark: #f5f7f5;
  --on-dark-2: #c9d3d4;
  --on-dark-3: #96a8ad;
  --on-dark-strong: #ffffff;
  --cyan-ink: #17748e;
  --violet-ink: #6b58cc;
  --amber-ink: #a8711a;
  --cyan-text: #125f74;
  --violet-text: #5847b0;
  --amber-text: #7f5410;
  --cyan-wash: #e0eff2;
  --glow: #174556;
  --error: #b23a2a;
  --notice-bg: #f3e7c9;
  --notice-fg: #4a3a12;
  --btn-primary-hover: #9bdbea;
  --glass: #0d151c;
  --glass-hi: #13303a;
  --shadow: #000000;
  --brand: #75d7d2;
  --brand-ink: #17576a;
  --line: #b9c9ca;
  --ink-rgb: 16 27 35;
  --on-dark-rgb: 245 247 245;
  --cyan-rgb: 114 200 221;
  --violet-rgb: 179 166 245;
  --amber-rgb: 232 184 106;
  --steel-rgb: 142 162 173;
  --midnight-rgb: 68 45 35;
  --glass-rgb: 13 21 28;
  --glass-hi-rgb: 19 48 58;
  --shadow-rgb: 0 0 0;
  --font-sans: "DM Sans", Arial, sans-serif;
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 0px;
  --radius-lg: 0px;
  --page-max: 1560px;
  --gutter: 64px;
  --header-h: 78px;
  --kx-site: #f4a56d;
}

:root{--mk:url("data:image/png;base64,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")}

/* Site mark: a 3px bar in the site's family colour along the top of the header */
html:not([data-system="live"]) .site-header { box-shadow: inset 0 3px 0 var(--kx-site); }
/* KyperX mark (the approved symbol from 00-shared/design-bank/03-brand), shared by every system */
.mk { display: inline-block; width: 22px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--mk) center/contain no-repeat; mask: var(--mk) center/contain no-repeat; }
/* Kinetic Energy: a single 3D world persists through the opening, explorer and four scroll chapters. */
:root { --brand:var(--kx-site); }
body { background:var(--kx-palette-deep,#120d0c); }
.site-header { background:rgba(5,10,16,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); }
.site-header.is-scrolled { background:rgba(5,10,16,.92); }
.brand__word span,.mk { color:var(--kx-site); }
.btn,.tool-btn,.offer,.pcard,.pfigure,.xcard,.poffer { border-radius:0; }
.btn--primary { --btn-bg:var(--kx-site);--btn-fg:#071118; }
.btn--ghost { --btn-bd:rgba(246,249,248,.44);--btn-fg:#f4f7f6; }
.display,.h2,.phero__title,.closing__title,.pclosing__title,.explorer__title { font-family:var(--font-display);font-weight:500;letter-spacing:-.06em; }
.display { font-size:clamp(64px,8.3vw,134px);line-height:.9; }
.h2 { font-size:clamp(49px,5.7vw,85px);line-height:.98; }
.eyebrow { color:var(--kx-site);font-family:var(--font-mono);letter-spacing:.17em; }
.section { padding:clamp(105px,12vw,185px) 0; }
.section-head { margin-bottom:72px; }
.section-head .h2 { max-width:15ch; }
.theme-light { background:#f1f1ed; }
.theme-paper { background:#e7e9e4; }
.theme-midnight { background:#0b1720; }
.theme-dark { background:var(--kx-palette-deep,#120d0c); }
.theme-blueprint { background:radial-gradient(80% 85% at 75% 10%,var(--kx-palette-glow,#80472e),var(--kx-palette-deep,#120d0c) 72%); }
.theme-midnight .lede,.theme-midnight .body,.theme-blueprint .lede,.theme-blueprint .body { color:var(--on-dark-2); }
.cinema { background:var(--kx-palette-deep,#120d0c); }
.stage { height:100svh;min-height:690px;background:var(--kx-palette-deep,#120d0c); }
.stage__scrim { background:linear-gradient(90deg,rgba(4,8,13,.75),rgba(4,8,13,.36) 38%,transparent 73%),linear-gradient(0deg,rgba(4,8,13,.89),transparent 24%,transparent 77%,rgba(4,8,13,.4)); }
.cinema[data-mode="explore"] .stage__scrim { background:linear-gradient(90deg,rgba(4,8,13,.7),rgba(4,8,13,.23) 36%,transparent 73%),linear-gradient(0deg,rgba(4,8,13,.88),transparent 26%,transparent 81%,rgba(4,8,13,.3)); }
.cinema[data-story="true"] .stage__scrim { background:linear-gradient(90deg,rgba(4,8,13,.82),rgba(4,8,13,.36) 40%,transparent 72%),linear-gradient(0deg,rgba(4,8,13,.87),transparent 24%,transparent 80%,rgba(4,8,13,.28)); }
.cinema[data-story="true"] .hotspots,.cinema[data-story="true"] .system-card { display:none!important; }
.hero { min-height:100svh;align-items:flex-end;padding-bottom:clamp(95px,14vh,160px); }
.hero__panel { max-width:min(650px,52vw);margin:0 auto 0 0; }
.hero__title { max-width:9ch; }
.hero__lede { max-width:51ch;margin-top:24px;font-size:18px;line-height:1.55;color:#d0dbdb; }
.hero__actions { margin-top:30px; }
.stage__footer { border-top:1px solid rgba(242,249,249,.25);padding-top:13px; }
.stage__tools { gap:18px; }
.kn-energy-story { position:relative; }
.kn-energy-chapter { min-height:100svh;display:flex;align-items:center;padding:140px var(--gutter) 125px; }
.kn-energy-chapter__copy { width:min(600px,48vw);padding:28px 16px 32px 0;border-top:1px solid rgba(244,250,250,.34);border-bottom:1px solid rgba(244,250,250,.22);background:linear-gradient(90deg,rgba(4,8,13,.62),rgba(4,8,13,0));opacity:.46;transform:translateY(25px);transition:opacity .7s,transform .7s;pointer-events:auto; }
.kn-energy-chapter.is-active .kn-energy-chapter__copy { opacity:1;transform:none; }
.kn-energy-chapter__index { color:var(--kx-site);font:500 12px/1.5 var(--font-mono);letter-spacing:.15em; }
.kn-energy-chapter h2 { max-width:10ch;margin:26px 0 25px;font:500 clamp(59px,7vw,112px)/.96 var(--font-display);letter-spacing:-.07em;color:#fff;text-wrap:balance; }
.kn-energy-chapter p { max-width:43ch;color:#d2dedf;font-size:clamp(17px,1.55vw,21px);line-height:1.55; }
.kn-energy-chapter a { display:inline-flex;gap:26px;margin-top:30px;padding-bottom:7px;color:var(--kx-site);text-decoration:none;border-bottom:1px solid currentColor;font-size:14px;font-weight:600; }
.explorer { min-height:110svh; }
.explorer__panel { width:min(470px,42vw); }
.explorer__title { font-size:clamp(40px,4.2vw,62px); }
.system-list button:hover .nm,.system-list button[aria-pressed="true"] .nm { color:var(--kx-site); }
.requirements .offer-grid { gap:1px;background:#cbd4d2;border:1px solid #cbd4d2; }
.requirements .offer { border:0;background:#f9faf8;padding:48px 39px; }
.requirements .offer::before { left:0;right:0;top:0;width:auto;height:3px;background:var(--kx-site); }
.approach .h2,.pathway .h2 { max-width:14ch; }
.research { background:#ecefeb; }
.closing { background:#e7e9e4; }
.phero--scene { min-height:max(790px,100svh); }
.pstage__scrim { background:linear-gradient(90deg,rgba(4,9,15,.78),rgba(4,9,15,.37) 45%,transparent 75%),linear-gradient(0deg,rgba(4,9,15,.84),transparent 35%); }
.phero--scene .phero__panel { max-width:650px; }
.phero__title { font-size:clamp(53px,5.5vw,92px);line-height:.96; }
.page-explorer .phero__title { font-size:clamp(45px,4.4vw,70px); }
.xcard { background:rgba(7,17,24,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }
.xcard__kicker { color:var(--kx-site); }
.xgroup__title { font-family:var(--font-display);font-size:clamp(31px,3vw,44px); }
.kx-energy-menu { display:none;position:absolute;top:17px;right:20px;z-index:120; }
.kx-energy-menu summary { list-style:none;cursor:pointer;padding:10px 14px;color:#f4f8f7;border:1px solid rgba(255,255,255,.3);background:rgba(6,10,17,.84);font:500 12px var(--font-mono); }
.kx-energy-menu summary::-webkit-details-marker { display:none; }
.kx-energy-menu nav { position:absolute;top:48px;right:0;width:min(300px,85vw);display:grid;padding:8px;color:#f4f8f7;background:#0b1520;border:1px solid rgba(255,255,255,.25);box-shadow:0 20px 50px rgba(0,0,0,.5); }
.kx-energy-menu nav a { display:block;padding:12px;color:inherit;text-decoration:none;font-size:14px; }
.kx-energy-menu nav a:hover { background:#1b303d; }
@media (max-width:1100px) { .site-header .primary-nav { display:none; } .kx-energy-menu { display:block; } .site-header .header-actions { margin-right:82px; } .page-explorer .phero--scene { min-height:1180px; } .page-explorer .phero__inner { padding-bottom:115px; } .page-explorer .phero__panel { max-width:min(600px,100%);margin:42px 0 0; } .page-explorer .xcard { position:relative;top:auto;right:auto;width:min(490px,100%);margin:60px 0 0; } .page-explorer .xbar { position:relative;left:auto;bottom:auto;display:flex;flex-wrap:wrap;padding:0;margin-top:40px;gap:24px; } }
@media (max-width:900px) { .section-head { grid-template-columns:1fr;gap:24px; } .section-head .h2 { max-width:18ch; } .requirements .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .requirements .offer:last-child { grid-column:1/-1; } .approach-diagram { grid-template-columns:1fr; } .steps { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; } .steps::before { display:none; } .xgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } .poffers { grid-template-columns:repeat(2,minmax(0,1fr)); } .closing__inner { grid-template-columns:1fr;gap:36px; } .closing__actions { flex-wrap:wrap; } .routes { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-top { grid-template-columns:1fr;gap:42px; } .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr));gap:28px; } .footer-bottom { flex-wrap:wrap; } }
@media (max-width:850px) { .hero__panel { max-width:85%; } .display { font-size:clamp(58px,10vw,94px); } .kn-energy-chapter__copy { width:min(520px,65vw); } .explorer__panel { width:min(470px,70vw); } .stage__footer .concept-note { display:none; } .stage__tools .flow-legend { display:none; } }
@media (max-width:600px) { .site-header .header-actions { display:none; } .hero { min-height:760px;padding-bottom:100px; } .hero__panel { max-width:100%; } .hero__lede { font-size:15px; } .kn-energy-chapter { padding:125px 24px 110px; } .kn-energy-chapter__copy { width:100%; } .kn-energy-chapter h2 { font-size:clamp(52px,12vw,78px); } .explorer__panel { width:100%; } .page-explorer .phero--scene { min-height:1280px; } .page-explorer .xbar { gap:15px; } .requirements .offer-grid,.poffers,.xgrid,.steps,.routes { grid-template-columns:1fr; } .requirements .offer:last-child { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { .kn-energy-chapter__copy { transition:none; } }
/* Persistent review control for three curated palettes in each vertical. */
.kx-palette { position:fixed;z-index:1500;top:88px;right:clamp(17px,3vw,42px);width:218px;color:#f4f8f8;font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em; }
.kx-palette summary { list-style:none;display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;cursor:pointer;border:1px solid rgba(243,249,249,.28);background:rgba(7,13,20,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.22); }
.kx-palette summary::-webkit-details-marker { display:none; }
.kx-palette summary strong { font:600 11px "DM Sans",Arial,sans-serif;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:106px;color:#fff; }
.kx-palette summary span:last-child { margin-left:auto;font-size:17px;line-height:1; }
.kx-palette__swatch { display:block;width:13px;height:13px;flex:none;border-radius:50%;background:var(--kx-site);box-shadow:0 0 0 3px color-mix(in srgb,var(--kx-site) 18%,transparent); }
.kx-palette__options { margin-top:4px;padding:7px;background:#0a1620;border:1px solid rgba(243,249,249,.25);box-shadow:0 20px 50px rgba(0,0,0,.42); }
.kx-palette button { display:flex;align-items:center;gap:11px;width:100%;padding:11px 9px;border:0;background:transparent;color:#f2f7f7;text-align:left;cursor:pointer; }
.kx-palette button:hover,.kx-palette button[aria-pressed="true"] { background:rgba(236,248,249,.1); }
.kx-palette button i { display:block;width:21px;height:21px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.55); }
.kx-palette button span { display:grid;gap:3px; }
.kx-palette button strong { font:600 13px "DM Sans",Arial,sans-serif;letter-spacing:0; }
.kx-palette button small { color:#b3c6c8;font:400 10px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0; }
.kx-palette :focus-visible { outline:2px solid var(--kx-site);outline-offset:2px; }
@media (max-width:600px) { .kx-palette { top:78px;right:15px;width:169px; } .kx-palette summary { min-height:37px;padding:7px; } .kx-palette summary span:nth-child(2) { display:none; } .kx-palette summary strong { max-width:106px; } }

/* Review badge: links back to the seven-system chooser. Not part of any design system. */
.kx-badge { position: fixed; left: 16px; bottom: 16px; z-index: 300; display: inline-flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px 0 6px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.25);
  font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; text-decoration: none; border-radius: 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.kx-badge__n { display: inline-grid; place-items: center; width: 24px; height: 22px; background: #fff; color: #111; }
.kx-badge__b { opacity: .6; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.3); }
.kx-badge:hover .kx-badge__b { opacity: 1; }
@media print { .kx-badge { display: none; } }
.kx-shot *, .kx-shot *::before, .kx-shot *::after, .kx-poster * { transition: none !important; animation-delay: 0s !important; }
.kx-shot .reveal { opacity: 1 !important; transform: none !important; }
.kx-shot .stage__poster, .kx-poster .stage__poster { opacity: 0 !important; }
.kx-shot .stage__canvas, .kx-poster .stage__canvas { opacity: 1 !important; }
.kx-poster body * { visibility: hidden !important; }
.kx-poster .stage, .kx-poster .stage *, .kx-poster .pstage, .kx-poster .pstage canvas { visibility: visible !important; }
.kx-poster .stage__scrim, .kx-poster .pstage__scrim, .kx-poster .pstage__footer, .kx-poster .stage__footer, .kx-poster .flow-tags, .kx-poster .hotspots { display: none !important; }

:root{--kx-site:#F4A56D;--kx-scene-accent:#F4A56D;--kx-palette-deep:#120D0C;--kx-palette-glow:#80472E;--acc:#F4A56D;--acc2:#F4A56D;--accr:244,165,109;--acc-hover:#F4A56D;--brand:#F4A56D;--brand-ink:#7f5639;--glow:#80472E;--bg:#120D0C;--bg2:#120D0C;--pnl:#120D0C;--graphite:#120D0C;--graphite-2:#120D0C;--midnight:#120D0C;--kx-hero-bg:#120D0C;--kx-deep:#120D0C;--font-sans:"DM Sans",Arial,sans-serif;--font-display:"Space Grotesk",Arial,sans-serif}
[hidden]{display:none!important}.leader-portrait{display:block;max-width:320px;margin:24px 0}.leader-portrait img{display:block;width:100%;height:auto}.hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.js .reveal{opacity:1;transform:none}:focus-visible{outline:3px solid #F4A56D;outline-offset:4px}.theme-light :focus-visible,.theme-paper :focus-visible{outline-color:#86431f}.skip-link:focus{z-index:1000}.legacy-page{color:#eeebe5;background:#120D0C}.legacy-page .ct{max-width:1200px;margin:auto;padding:48px 24px}.legacy-page .prose{max-width:76ch}.legacy-page p{margin:16px 0}.legacy-page h1{font-size:clamp(36px,5vw,70px)}.legacy-page h2{font-size:clamp(26px,3vw,40px)}.legacy-page canvas{display:none}.legacy-page .lbl{color:#F4A56D}.legacy-page .crumb{display:flex;gap:12px;list-style:none}.legacy-page a{color:#F4A56D}.legacy-page svg{max-width:100%;height:auto}.legacy-page .chead,.legacy-page .shead{display:grid;gap:24px}.legacy-page section{padding:24px 0}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.kn-energy-chapter{min-height:0!important;padding:60px 0!important}}

body.page-light{background:var(--paper)}.contact-page{background:var(--paper)}.site-header{background:rgba(18,13,12,.96)}.site-header.is-scrolled{background:rgba(18,13,12,.98)}.theme-midnight{background:#120D0C}.kn-energy-chapter__copy{opacity:1}.kn-energy-chapter p{color:#eef2f5}.concept-note{color:#e0e6e5}.pperson__mono{display:none}.pperson{grid-template-columns:1fr}.pprompts--one{min-width:0}.pmfr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.container{min-width:0}.container *{min-width:0}.legacy-page{overflow-wrap:anywhere}.legacy-page .ct>*,.legacy-page .ct svg{max-width:100%}.legacy-page .ct{overflow:auto}html:not(.js) [role=tabpanel][hidden]{display:block!important}html:not(.js) .kn-energy-chapter__copy{transform:none}.js .kn-energy-chapter__copy{opacity:1}html:not(.js) .hotspots,html:not(.js) .stage__tools,html:not(.js) .pmodes__tabs{display:none}
@media(max-width:1100px){.pblock__grid,.penquiry,.ptwo,.pwp,.pfields,.pmodes__body,.article__grid,.pmfr{grid-template-columns:1fr;gap:32px}.pprompts--one{max-width:none}.paud{grid-template-columns:repeat(2,minmax(0,1fr))}.pevidence{grid-template-columns:repeat(2,minmax(0,1fr))}.phero__grid{grid-template-columns:1fr;gap:40px}.contact-grid{grid-template-columns:1fr;gap:40px}.contact-intro{position:static}.contact-title{max-width:20ch}.article__aside{position:static}.ptable{display:block;overflow:auto}}
@media(max-width:600px){:root{--gutter:24px}.container{width:100%;padding-left:24px;padding-right:24px}.brand__desc{font-size:9px}.section{padding:64px 0}.section-head{margin-bottom:32px}.h2{font-size:clamp(32px,9vw,48px)}.display{font-size:clamp(44px,12vw,68px)}.phero__title{font-size:clamp(38px,10vw,56px)}.phero__panel{max-width:100%}.hero__panel{max-width:100%}.hero{min-height:740px;padding-top:140px}.hero__actions,.phero__actions,.pclosing__actions,.closing__actions,.actions{flex-wrap:wrap}.hero__actions .btn{width:100%;justify-content:center}.contact-page{padding:130px 0 64px}.enquiry{padding:24px 18px}.field-row,.pedit,.pcards,.psteps,.pkv,.pcontact,.pcorp,.pfields-grid,.paud,.pevidence,.prelated ul,.calc,.ptwo,.pwp,.pfields,.penquiry,.pblock__grid,.pclosing__inner,.phero__grid,.article__grid,.pmodes__body,.pmfr{grid-template-columns:1fr!important;gap:24px}.pperson{padding:24px}.pprompts>div{grid-template-columns:1fr;gap:8px}.pequip__item{grid-template-columns:1fr;gap:12px}.pdecide{position:relative;right:auto;top:auto;width:auto;margin:24px}.pmodes__tabs{flex-wrap:wrap}.pstage__footer{flex-wrap:wrap;gap:12px}.pstage__footer .concept-note{display:block;font-size:10px}.stage__footer .concept-note{display:block!important;font-size:10px}.stage__footer{flex-wrap:wrap;gap:12px}.stage__tools{display:none}.flow-tags,.hotspots{display:none}.system-card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin-top:20px}.kn-energy-chapter{min-height:0;padding:60px 24px}.kn-energy-chapter__copy{transform:none;width:100%}.kn-energy-chapter h2{font-size:48px}.kn-energy-story{background:#120D0C}.explorer{min-height:0;padding:60px 0}.explorer__panel{padding:24px 0;width:100%}.explorer__inner{display:block}.stage{min-height:740px}.phero--scene{min-height:0}.phero--scene .phero__inner{padding:145px 24px 100px}.legacy-page .ct{padding:24px}.prelated a{overflow-wrap:anywhere}.pfigure,.pmodes__figure{overflow:auto}.pfigure svg,.pmodes__figure svg{min-width:320px}.footer-nav{gap:24px}.steps-indicator{flex-wrap:wrap;gap:12px}.site-header__inner{gap:12px}.kx-energy-menu{right:24px}.hero__lede{font-size:17px}.pblock__head .h2{max-width:none}.pclosing__title{font-size:40px}}

.pmodes__bar{display:flex;flex-wrap:wrap;max-width:100%}.pmodes__bar button{white-space:normal;overflow-wrap:anywhere}.btn{height:auto;min-height:52px;white-space:normal;text-align:left;padding-top:14px;padding-bottom:14px}.btn .arrow{flex-shrink:0}.pblock__body,.pblock__head,.article__body{min-width:0}.legacy-page table{max-width:100%}.legacy-page .ct{overflow:visible}
@media(max-width:1100px){.pblock__head,.pblock__body{max-width:100%}.pblock__grid{padding-left:0;padding-right:0}.pblock__body .pmodes{padding:24px}.pmodes__bar{width:100%}}
@media(max-width:600px){.pblock__body .pmodes{padding:16px}.pblock__head{padding:0}.pfigure svg,.pmodes__figure svg{min-width:0;width:100%}.phero__art{max-width:100%;overflow:auto}.penquiry__actions,.pclosing__actions{display:flex;flex-direction:column;align-items:stretch}.contact-title{font-size:44px}.site-header .btn{min-height:42px}.site-header__inner{padding:0 24px}}
.scene-static [data-action="pause"]{display:none}.pmodes__panel{overflow-wrap:anywhere}

svg.dg,.legacy-page svg,.flow-diagram{overflow:hidden}.legacy-page table,.ptable,.pcompare table{display:block;width:100%;overflow-x:auto}.motion-control{position:fixed;right:24px;bottom:24px;z-index:50;padding:12px 18px;background:#120D0C;color:#F4A56D;border:1px solid #F4A56D;font-size:13px}.scene-static .motion-control,html:not(.js) .motion-control{display:none}@media(max-width:600px){.motion-control{display:none}}@media print{.motion-control{display:none}}

:root{--ink-3:#4f5e66;--on-dark-3:#c0cbce}.theme-light .eyebrow,.theme-paper .eyebrow,.page-light .eyebrow{color:#86431f}.steps-indicator li.is-current .mono{color:#86431f}.legacy-page .mono{color:#bac5c8}.phero:not(.phero--article) .breadcrumb,.phero:not(.phero--article) .breadcrumb a{color:#d2dbda}.xbar button[aria-pressed="true"]{color:#120D0C}.stage-marker{color:#4f5e66}.pstage__footer,.stage__footer{max-width:100%}.pmodes__figure svg,.pfigure svg,.dg,.flow-diagram{overflow:hidden}svg{overflow:hidden}
@media(max-width:600px){h1,h2,h3,.btn,.text-link,.lede{overflow-wrap:anywhere;max-width:100%}.btn{max-width:100%}.pclosing__title,.closing__title{font-size:40px}.kn-energy-chapter h2{max-width:100%}.penquiry .h2{font-size:36px}.poffer .h3{font-size:26px}}
.scene-controls .tool-btn{background:#120D0C;color:#e0e6e5}.scene-controls .tool-btn[aria-pressed="true"]{background:#F4A56D;color:#120D0C}
.penquiry .eyebrow{color:#c0cbce}.penquiry .btn--ghost{background:transparent;color:#eef2f5;border-color:#c0cbce}.legacy-page .b1{background:#F4A56D;color:#120D0C}.legacy-page .b2{background:transparent;color:#F4A56D}.theme-blueprint .eyebrow{color:#c0cbce}.primary-nav a,.footer-nav a{display:inline-flex;align-items:center;min-height:28px}.label-chip{white-space:normal;overflow-wrap:anywhere;max-width:100%}.text-link{white-space:normal;overflow-wrap:anywhere;max-width:100%}
@media(max-width:900px){.research__grid{grid-template-columns:1fr;gap:32px}.pseq{grid-template-columns:1fr!important}.pseq__item,.pseq__item+.pseq__item{padding:24px 0;border-left:0}.pseq__item+.pseq__item{border-top:1px solid var(--rule-light)}.topic-index li{grid-template-columns:48px minmax(0,1fr)}}
@media(max-width:600px){.penquiry{padding:32px 20px}.penquiry__items li{grid-template-columns:32px minmax(0,1fr)}.pequip__actions{display:flex;flex-wrap:wrap}.pequip__actions .text-link{width:100%}.text-link{display:flex;align-items:flex-start}.label-chip{font-size:11px}.pcompare,.ptable-wrap,.pfigure{max-width:100%;overflow-x:auto}}

main [id]{scroll-margin-top:96px}

/* Contact and utility screens use the same Kinetic light surface and page rhythm. */
.contact-page.theme-light{background:#f1f1ed;color:var(--ink)}
.contact-page .contact-grid{gap:64px}.contact-page .contact-intro{position:static}
.contact-page .contact-title{font-family:var(--font-display);font-weight:500;letter-spacing:-.06em}
.contact-page .enquiry{border-radius:0}.contact-page .received{padding-top:0;min-height:50vh}
.contact-page .step legend{scroll-margin-top:110px}
.article__body section{scroll-margin-top:110px}
.article__body .scope-comparison{margin:24px 0;overflow-x:auto}
.article__body .scope-comparison table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.article__body .scope-comparison th,.article__body .scope-comparison td{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--rule-light)}
.article__body .scope-comparison th{font-weight:600}.article__body .scope-comparison caption{text-align:left;margin-bottom:12px;font-weight:500}
@media(max-width:1100px){.contact-page .contact-grid{gap:40px}}
@media(max-width:600px){.article__body .scope-comparison th,.article__body .scope-comparison td{padding:10px;font-size:14px}}
/* Brand accents on form controls; diagram connection colours remain semantic. */
.contact-page .received__icon{color:#86431f}
.contact-page .preselect{background:rgba(244,165,109,.14);border-left-color:#86431f}
.contact-page .field input:focus,.contact-page .field select:focus,.contact-page .field textarea:focus{border-color:#86431f;box-shadow:0 0 0 3px rgba(244,165,109,.3)}

/* Scoped adaptation of the KyperX Corporate/AI V1 shell. Kinetic content retains its own typography and layout. */
.v1-shell{--shell-tx:#f1f0ee;--shell-muted:#b9b6b4;--shell-dim:#aaa5a1;--shell-line:rgba(238,232,227,.14);font-family:Archivo,Arial,sans-serif;color:var(--shell-tx)}
.site-header.v1-shell{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid var(--shell-line);background:#120D0C;transition:background .3s,border-color .3s;backdrop-filter:blur(14px)}
.site-header.v1-shell.is-scrolled{background:#120D0C}
.v1-shell .hi{display:flex;align-items:center;justify-content:space-between;height:76px;gap:26px}
.v1-shell .brand{display:inline-flex;align-items:center;gap:11px;color:var(--shell-tx);text-decoration:none;flex-shrink:0}
.v1-shell .brand .mk{width:26px;height:22px;background:var(--shell-tx);flex:none}
.v1-shell .wm{font-size:17px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.v1-shell .unit{font-size:11px;font-weight:400;letter-spacing:.1em;margin-left:7px;color:var(--shell-muted)}
.v1-shell .primary-nav{display:block}
.v1-shell .primary-nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.v1-shell .primary-nav a{position:relative;color:var(--shell-muted);text-decoration:none;font-size:14px;font-weight:400;line-height:1.5;padding:4px 0;min-height:28px;background:none;border-radius:0;white-space:nowrap}
.v1-shell .primary-nav .nvi>a:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:#F4A56D;transition:width .3s}
.v1-shell .primary-nav a:hover,.v1-shell a[aria-current=page],.v1-shell .nvi.is-current>a{color:var(--shell-tx);background:none}
.v1-shell .primary-nav .nvi>a:hover:after,.v1-shell .nvi.is-current>a:after{width:100%}
.v1-shell :focus-visible{outline:2px solid #F4A56D;outline-offset:3px}
.v1-shell .nvi{position:relative;display:flex;align-items:center;gap:7px}
.v1-shell .nvt{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:28px;background:none;border:0;color:var(--shell-dim);cursor:pointer;font:11px Archivo,Arial,sans-serif;padding:0;margin:0 -5px}
.v1-shell .nvt:hover,.v1-shell .nvt[aria-expanded=true]{color:#F4A56D}
.v1-shell .dd{position:absolute;top:calc(100% + 14px);left:-16px;width:300px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;background:rgba(18,13,12,.98);backdrop-filter:blur(14px);border:1px solid var(--shell-line);padding:8px 0;display:none;flex-direction:column;z-index:101;box-shadow:0 14px 30px rgba(0,0,0,.2)}
.v1-shell .dd.open{display:flex}
.v1-shell .dd a{display:block;white-space:normal;padding:11px 18px;font-size:13.5px;line-height:1.5;min-height:44px}
.v1-shell .dd a:hover,.v1-shell .dd a[aria-current=page]{background:rgba(255,255,255,.045);color:var(--shell-tx)}
.v1-shell .ddl{display:block;padding:8px 18px 10px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--shell-dim);border-bottom:1px solid var(--shell-line);margin-bottom:6px}
.v1-shell .mnav{display:none;background:none;border:1px solid var(--shell-line);color:var(--shell-tx);font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;padding:10px 15px;min-height:44px;cursor:pointer}
.v1-shell .mpanel{display:none;flex-direction:column;background:rgba(18,13,12,.98);border-top:1px solid var(--shell-line);padding:12px 24px 22px;max-height:calc(100dvh - 76px);overflow:auto;overscroll-behavior:contain}
.v1-shell .mpanel a{display:block;color:var(--shell-muted);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--shell-line);font-size:16px;line-height:1.5;min-height:44px}
.v1-shell .mpanel a.sub{padding-left:20px;font-size:14.5px;color:var(--shell-dim)}
.v1-shell .mpanel a:hover,.v1-shell .mpanel a[aria-current=page]{color:var(--shell-tx)}
.site-footer.v1-shell{border-top:1px solid var(--shell-line);padding:70px 0 34px;background:#120D0C}
.v1-shell .fg{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(0,4fr);gap:48px}
.v1-shell .footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.v1-shell .footer-nav h2{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--shell-dim);margin:0 0 16px;line-height:1.5}
.v1-shell ul{list-style:none;margin:0;padding:0}
.v1-shell .footer-nav li{margin:0 0 3px}
.v1-shell .footer-nav a{display:inline-block;padding:4px 0;min-height:28px;color:var(--shell-muted);text-decoration:none;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.v1-shell .footer-nav a:hover,.v1-shell .footer-nav a[aria-current=page]{color:var(--shell-tx)}
.v1-shell .fd{color:var(--shell-muted);font-size:15px;margin:16px 0 0;line-height:1.62;max-width:34ch}
.v1-shell .fcap{margin:26px 0 0;padding-top:14px;border-top:1px solid var(--shell-line);font:11px/1.7 'IBM Plex Mono',monospace;letter-spacing:.04em;color:var(--shell-dim);max-width:44ch}
.v1-shell .fcap a{font:inherit;color:var(--shell-muted);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:3px 0}
.v1-shell .fb{margin-top:54px;padding-top:24px;border-top:1px solid var(--shell-line);display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:13px;color:var(--shell-dim)}
.v1-shell .fb ul{display:flex;gap:22px;margin:-4px 0}
.v1-shell .fb li{margin:0}
.v1-shell .fb a{display:inline-block;padding:4px 0;font-size:13px;color:var(--shell-dim);text-decoration:none}
.v1-shell .fb a:hover{color:var(--shell-tx)}
@media(pointer:coarse){.v1-shell .nvt{min-width:44px;min-height:44px}.v1-shell .footer-nav a,.v1-shell .fb a{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:1100px){.v1-shell .primary-nav{display:none}.v1-shell .mnav{display:block}.v1-shell .mpanel.open{display:flex}.v1-shell .fg{grid-template-columns:1fr;gap:38px}.v1-shell .fd{max-width:50ch}}
@media(max-width:700px){.v1-shell .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}.v1-shell .footer-nav h2{font-size:12px}.v1-shell .fcap{font-size:12px}}
@media(max-width:400px){.v1-shell .footer-nav{grid-template-columns:1fr}.v1-shell .hi{gap:12px}.v1-shell .unit{font-size:10px;margin-left:4px}}
html:not(.js) .v1-shell .nvi:hover .dd,html:not(.js) .v1-shell .nvi:focus-within .dd{display:flex}
@media(max-width:1100px){html:not(.js) .site-header.v1-shell{position:relative}html:not(.js) .v1-shell .mnav{display:none}html:not(.js) .v1-shell .mpanel{display:flex;max-height:none}}
.site-header.v1-shell{height:auto}
.v1-shell .primary-nav a{height:auto}